Files: change file's icon come from Google front icon.

src/stores/files.js

@@ -67,6 +67,7 @@ export default defineStore('filesStore', {
 
         this.allEventLog = response.data;
         this.allEventLog.map(o => {
+          o.icon = 'work_history';
           o.parentLog = "-";
           o.fileType = "Log";
           o.ownerName = o.owner.name;
@@ -99,6 +100,7 @@ export default defineStore('filesStore', {
 
         this.allFilter = response.data;
         this.allFilter.map(o => {
+          o.icon = 'tornado';
           o.fileType = "Filter";
           o.ownerName = o.owner.name;
           o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:MM');
@@ -118,5 +120,7 @@ export default defineStore('filesStore', {
         })
       };
     },
+    // fetchRule(){o.icon = local_police}
+    // fetchDesign(){o.icon = shape_line}
   },
 })

src/views/Files/index.vue

@@ -6,12 +6,12 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar whitespace-nowrap pb-4">
         <!-- card item v-for -->
-        <li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300
+        <li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300
         flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)">
           <div>
-            <figure class="mb-2">
+            <span class="material-symbols-outlined mb-2 text-[32px] block">
-              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+              {{ file.icon }}
-            </figure>
+            </span>
             <h3 class="text-sm font-medium mb-2">
               {{ file.name }}
             </h3>
@@ -49,12 +49,12 @@
       </div>
     <!-- All Files type of grid -->
     <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
-    <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+    <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300  hover:bg-primary/10 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
       v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
         <div>
-          <figure class="mb-2">
+          <span class="material-symbols-outlined mb-2 text-[32px] block">
-            <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+            {{ file.icon }}
-          </figure>
+          </span>
           <h3 class="text-sm font-medium mb-2">
             {{ file.name }}
           </h3>

src/views/MainContainer.vue

@@ -59,6 +59,7 @@ export default {
     this.checkLogin();
   },
   beforeRouteUpdate(to, from, next) {
+    // 離開 Discover 頁時判斷是否有無資料和需要存檔
     if (from.name === 'Discover' && this.tempFilterId) {
       leaveFilter(next, this.allMapDataStore.addFilterId)
     } else {