Files: if data length is 0, layout

src/stores/files.js

@@ -51,6 +51,7 @@ export default defineStore('filesStore', {
     let filesTag = state.filesTag;
 
     result = result.filter(file => data[filesTag].includes(file.fileType));
+
     return result;
     },
   },

src/views/Files/index.vue

@@ -4,7 +4,7 @@
     <section class="mb-4">
       <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
       <!-- card group 最多六個-->
-      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
+      <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" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
           <a href="" class="h-full flex flex-col justify-between">
@@ -149,7 +149,8 @@
       /**
        * Read allFiles
        */
-      allFiles: function(value) {
+      allFiles: function() {
+        if(this.store.allFiles.length !== 0){
           let sortFiles = Array.from(this.store.allFiles);
 
           let dataSortOrder = sortFiles.sort((x,y) => x.updated_at - y.updated_at);
@@ -159,6 +160,7 @@
           let strSort = this.sortReverseOrder === false? strSortOrder: strSortOrder.reverse();
 
           return this.sortKey !== 'updated_at'? strSort: dataSort;
+        }
       },
       /**
        * 時間排序，如果沒有 accessed_at 就不加入 data
@@ -169,6 +171,14 @@
         return recentlyUsedFiles.sort((x, y) => y.updated_at - x.updated_at);
       },
     },
+    watch:{
+      allFiles:{
+        handler:function(val,oldVal){
+          this.allFiles;
+        },
+        deep:true,
+      }
+    },
     methods: {
       /**
        * switch sort