feat: File rename API done.

src/views/Files/index.vue

@@ -6,8 +6,8 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar pb-4">
         <!-- card item v-for -->
-        <li class="w-[216px] 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)" :title="file.name">
-          <div class="">
+        <li class="w-[216px] 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)" :title="file.name" @contextmenu="onRightClick($event, file)">
+          <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
             </span>
@@ -49,7 +49,7 @@
       <!-- 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: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)" :title="file.name">
+        v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)" :title="file.name" @contextmenu="onRightClick($event, file)">
           <div>
             <span class="material-symbols-outlined mb-2 text-[32px] block">
               {{ file.icon }}
@@ -67,6 +67,16 @@
         </li>
       </ul>
     </section>
+    <!-- ContextMenu -->
+    <ContextMenu ref="menu" :model="items" @hide="selectedFile = null">
+      <template #item="{ item }">
+        <a class="flex align-items-center px-4 py-2 duration-300 hover:bg-primary/20">
+          <span class="material-symbols-outlined">{{ item.icon }}</span>
+          <span class="ml-2 text-sm inline-flex items-center">{{ item.label }}</span>
+          <span v-if="item.shortcut" class="border border-round p-1">{{ item.shortcut }}</span>
+        </a>
+      </template>
+    </ContextMenu>
   </div>
 </template>
 
@@ -82,11 +92,34 @@
   import IconVector from '@/components/icons/IconVector.vue';
   import IconList from '@/components/icons/IconList.vue';
   import IconGrid from '@/components/icons/IconGrid.vue';
+  import { renameModal } from '@/module/alertModal.js';
 
   export default {
     data() {
       return {
         switchListOrGrid: false,
+        selectedFile: null,
+        selectedType: null,
+        selectedId: null,
+        items: [
+          {
+            label: 'Rename',
+            icon: 'edit_square',
+            command: this.rename,
+          },
+          {
+            label: 'Download',
+            icon: 'download',
+          },
+          {
+            separator: true // 分隔符號
+          },
+          {
+            label: 'Delete',
+            icon: 'delete',
+
+          },
+        ],
       }
     },
     setup() {
@@ -105,7 +138,7 @@
       IconFlowChart,
       IconVector,
       IconList,
-      IconGrid,
+      IconGrid
     },
     computed: {
       /**
@@ -129,6 +162,9 @@
       },
     },
     methods: {
+      rename() {
+        renameModal(this.store.rename, this.selectedType, this.selectedId);
+      },
       /**
        * 選擇該 files 進入 Discover/Compare/Design 頁面
        * @param {object} file
@@ -170,7 +206,12 @@
             this.$router.push({name: 'CheckConformance', params: params});
             break;
         }
-      }
+      },
+      onRightClick(event, file) {
+        this.selectedType = file.type;
+        this.selectedId = file.id;
+        this.$refs.menu.show(event)
+      },
     },
     mounted() {
       this.isLoading = true;