Discover: fetch discover api && set element(nodes, edges) done

2023-02-22 16:10:40 +08:00
parent 8228f9791c
commit 78e18663aa
11 changed files with 361 additions and 74 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
      "dependencies": {
        "autoprefixer": "^10.4.13",
        "axios": "^1.2.2",
+        "cytoscape": "^3.23.0",
+        "cytoscape-klay": "^3.1.4",
        "mitt": "^3.0.0",
        "moment": "^2.29.4",
        "pinia": "^2.0.28",
@@ -17,7 +19,6 @@
        "tailwindcss": "^3.2.4",
        "vue": "^3.2.45",
        "vue-axios": "^3.5.2",
-        "vue-dataset": "^3.5.0",
        "vue-router": "^4.1.6",
        "vue-toast-notification": "^3.0.4"
      },
@@ -2043,6 +2044,29 @@
        "node": "^14.0.0 || ^16.0.0 || >=18.0.0"
      }
    },
+    "node_modules/cytoscape": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz",
+      "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==",
+      "dependencies": {
+        "heap": "^0.2.6",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-klay": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
+      "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==",
+      "dependencies": {
+        "klayjs": "^0.4.1"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
    "node_modules/dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -3248,6 +3272,11 @@
        "he": "bin/he"
      }
    },
+    "node_modules/heap": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+    },
    "node_modules/html-encoding-sniffer": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -3842,6 +3871,11 @@
        "verror": "1.10.0"
      }
    },
+    "node_modules/klayjs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz",
+      "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA=="
+    },
    "node_modules/lazy-ass": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@@ -3940,8 +3974,7 @@
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "node_modules/lodash.merge": {
      "version": "4.6.2",
@@ -5865,14 +5898,6 @@
        "vue": "^3.0.0 || ^2.0.0"
      }
    },
-    "node_modules/vue-dataset": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/vue-dataset/-/vue-dataset-3.5.0.tgz",
-      "integrity": "sha512-NpIprTm2nAFSlHXS6+kfyZcLe/wSxsh1XsgZVskAe7UFYlC9HRTUvBe+uGmR8wvdh+EE7mzOpW29WQCE7tZ6JA==",
-      "dependencies": {
-        "vue": "^3.2.47"
-      }
-    },
    "node_modules/vue-eslint-parser": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
@@ -7703,6 +7728,23 @@
        "yauzl": "^2.10.0"
      }
    },
+    "cytoscape": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.23.0.tgz",
+      "integrity": "sha512-gRZqJj/1kiAVPkrVFvz/GccxsXhF3Qwpptl32gKKypO4IlqnKBjTOu+HbXtEggSGzC5KCaHp3/F7GgENrtsFkA==",
+      "requires": {
+        "heap": "^0.2.6",
+        "lodash": "^4.17.21"
+      }
+    },
+    "cytoscape-klay": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
+      "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==",
+      "requires": {
+        "klayjs": "^0.4.1"
+      }
+    },
    "dashdash": {
      "version": "1.14.1",
      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -8605,6 +8647,11 @@
      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
      "dev": true
    },
+    "heap": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+      "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+    },
    "html-encoding-sniffer": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -9049,6 +9096,11 @@
        "verror": "1.10.0"
      }
    },
+    "klayjs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz",
+      "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA=="
+    },
    "lazy-ass": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz",
@@ -9112,8 +9164,7 @@
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
    "lodash.merge": {
      "version": "4.6.2",
@@ -10429,14 +10480,6 @@
      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
      "requires": {}
    },
-    "vue-dataset": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/vue-dataset/-/vue-dataset-3.5.0.tgz",
-      "integrity": "sha512-NpIprTm2nAFSlHXS6+kfyZcLe/wSxsh1XsgZVskAe7UFYlC9HRTUvBe+uGmR8wvdh+EE7mzOpW29WQCE7tZ6JA==",
-      "requires": {
-        "vue": "^3.2.47"
-      }
-    },
    "vue-eslint-parser": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
  "dependencies": {
    "autoprefixer": "^10.4.13",
    "axios": "^1.2.2",
+    "cytoscape": "^3.23.0",
+    "cytoscape-klay": "^3.1.4",
    "mitt": "^3.0.0",
    "moment": "^2.29.4",
    "pinia": "^2.0.28",
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -44,8 +44,10 @@ export default {
    return {
      showNavbarBreadcrumb: false,
      // 之後優化要模組化
-      // navViewName: {
-      //   files: ['all', 'discover', 'compare', 'design'],
+      // navViewData:
+      // {
+      //   FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
+      //   DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
      // },
      // navViewName: '',
    };
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,8 @@ import VueAxios from 'vue-axios';
 import moment from 'moment';
 import mitt from 'mitt';
 import ToastPlugin from 'vue-toast-notification';
+import cytoscape from 'cytoscape';
+import klay from 'cytoscape-klay';

 import "./assets/main.css";
 import 'vue-toast-notification/dist/theme-sugar.css';
@@ -16,19 +18,22 @@ const emitter = mitt();
 const app = createApp(App);

 pinia.use(({ store }) => {
-  store.$router = markRaw(router)
-  store.$toast = markRaw(ToastPlugin)
+  store.$router = markRaw(router);
+  store.$axios = markRaw(axios);
+  store.$toast = markRaw(ToastPlugin);
 });

 // can use `this.$moment` in Vue.js
 app.config.globalProperties.$moment = moment;
 app.config.globalProperties.emitter = emitter;
+app.config.globalProperties.$cytoscape = cytoscape;
+
+cytoscape.use( klay );

 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
-// use `this.$toast` in Vue.js
-app.use(ToastPlugin, {
+app.use(ToastPlugin, { // use `this.$toast` in Vue.js
  duration: 10000,
 });

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,9 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory, createWebHashHistory, useRoute, useRouter } from "vue-router";
 import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
 import Files from '@/views/Files/index.vue';
+import Discover from '@/views/Discover/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';

@@ -17,7 +18,7 @@ const routes = [
    component: AuthContainer,
    children: [
      {
-        path: "login",
+        path: "/login",
        name: "Login",
        component: Login,
      },
@@ -29,15 +30,25 @@ const routes = [
    component: MainContainer,
    children: [
      {
-        path: "member-area",
+        path: "/member-area",
        name: "MemberArea",
        component: MemberArea,
      },
      {
-        path: "files",
+        path: "/files",
        name: "Files",
        component: Files,
      },
+      {
+        path: "/discover/:logId",
+        name: "Discover",
+        component: Discover,
+
+        // 先注意，之後思考是否修改，網址打 discover 時，要跳預設的頁面
+        // path: "discover",
+        // redirect: 'discover/12345'
+
+      }
    ]
  },
  {
@@ -51,7 +62,9 @@ const routes = [

 const base_url = import.meta.env.BASE_URL;
 const router = createRouter({
-  history: createWebHistory(base_url),
+  history: createWebHistory(base_url), //(/)
+  // history: createWebHashHistory(base_url), // (/#)
+
  routes
 });

--- a/src/stores/allMapData.js
+++ b/src/stores/allMapData.js
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+
+export default defineStore('allMapDataStore', {
+  state: () => ({
+    logId: null,
+    processMap: {},
+    bpmn: {},
+  }),
+  getters: {
+  },
+  actions: {
+    /**
+     * fetch discover api, include '/process-map, /bpmn, /stats, /insights'.
+     */
+    async getAllMapData() {
+      let logId = this.logId
+      const api = `/api/logs/${logId}/discover`;
+
+      try {
+        const response = await this.$axios.get(api);
+        // console.log(response);
+        this.processMap = response.data.process_map;
+        this.bpmn = response.data.bpmn;
+      } catch(error) {
+        // console.dir(error);
+      };
+    },
+  }
+})
--- a/src/stores/files.js
+++ b/src/stores/files.js
@@ -30,7 +30,7 @@ export default defineStore('filesStore', {
    switchFilesTagData: {
      ALL: ['Log', 'Filter', 'Rule', 'Design'],
      DISCOVER: ['Log', 'Filter', 'Rule'],
-      COMPARE: ['Filter'],
+      COMPARE: ['Log','Filter'],
      DESIGN: ['Log', 'Design'],
    },
    filesTag: 'ALL',
@@ -60,7 +60,7 @@ export default defineStore('filesStore', {
     * Fetch event logs api
     */
    async fetchEventLog() {
-      const api = 'api/logs';
+      const api = '/api/logs';

      try {
        const response = await axios.get(api);
@@ -92,7 +92,7 @@ export default defineStore('filesStore', {
     * Fetch filters api
     */
    async fetchFilter() {
-      const api = 'api/filters';
+      const api = '/api/filters';

      try {
        const response = await axios.get(api);
--- a/src/stores/login.js
+++ b/src/stores/login.js
@@ -22,7 +22,7 @@ export default defineStore('loginStore', {
     * fetch Login For Access Token api
     */
    async signIn() {
-      const api = 'api/oauth/token';
+      const api = '/api/oauth/token';
      const config = {
        headers: {
          // http post 預設的 url 編碼，非 json 格式
@@ -38,7 +38,7 @@ export default defineStore('loginStore', {
          const token = response.data.access_token;

          document.cookie = `luciaToken=${token}`;
-          this.$router.push('/files')
+          this.$router.push('/files');
        }
      } catch(error) {
        this.isInvalid = true;
@@ -61,7 +61,7 @@ export default defineStore('loginStore', {
     * get user detail for 'my-account' api
     */
    async getUserData() {
-      const api = 'api/my-account';
+      const api = '/api/my-account';

      try {
        const response = await axios.get(api);
@@ -74,7 +74,7 @@ export default defineStore('loginStore', {
     * check login for 'my-account' api
     */
    async checkLogin() {
-      const api = 'api/my-account';
+      const api = '/api/my-account';

      try {
        const response = await axios.get(api);
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -0,0 +1,187 @@
+<template>
+  <h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
+  <div class="flex min-w-full min-h-screen">
+    <div class="cyto" id="cyto"></div>
+  </div>
+</template>
+
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import AllMapDataStore from '@/stores/allMapData.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const allMapDataStore = AllMapDataStore();
+    const { isLoading } = storeToRefs(loadingStore);
+    const { processMap, bpmn } = storeToRefs(allMapDataStore);
+
+    return {
+      isLoading,
+      processMap, bpmn, allMapDataStore,
+    }
+  },
+  data() {
+    return {
+      processMapData: {
+        startId: 0,
+        endId: 1,
+        nodes: [],
+        edges: [],
+      },
+      curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
+    }
+  },
+  methods: {
+    /**
+     * Switch curve-style is 'bezier' or 'unbundled-bezier'.
+     * @param {string} style 貝茲曲線 bezier | 直角 unbundled-bezier
+     */
+    switchCurveStyle(style){
+      this.curveStyle = style;
+    },
+    /**
+     * 將node資料彙整
+     * @param {string} type ProcessMap | BPMN
+     */
+     setNodesData(type){
+      const logFreq = {
+        "total": "",
+        "rel_freq": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+        "cases": ""
+      };
+      const logDuration = {
+        "total": "",
+        "rel_duration": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+      };
+      // BPMN 才有 gateway 類別
+      const gateway = {
+        parallel: "+",
+        exclusive: "x",
+        inclusive: "o",
+      };
+
+      // 將 api call 回來的資料帶進 node
+      this.processMap.vertices.forEach(node => {
+        switch (node.type) {
+          // add type of 'event' node
+          case 'event':
+            if(node.event_type === 'start') this.processMapData.startId = node.id;
+            else if(node.event_type === 'end') this.processMapData.endId = node.id;
+
+            this.processMapData.nodes.push({
+              data:{
+                id:node.id,
+                type:node.type,
+                label:node.event_type,
+                height:60,
+                width:60,
+                backgroundColor:'#FFCCCC',
+                bordercolor:'#003366',
+                shape:"ellipse",
+                freq:logFreq,
+                duration:logDuration,
+              }
+            });
+            break;
+          // add type of 'activity' node
+          default:
+            this.processMapData.nodes.push({
+              data:{
+                id:node.id,
+                type:node.type,
+                label:node.label,
+                height:80,
+                width:100,
+                backgroundColor:'#FFCCCC',
+                bordercolor:'#003366',
+                shape:"ellipse",
+                freq:node.freq,
+                duration:node.duration,
+              }
+            })
+            break;
+        }
+      });
+     },
+    /**
+     * 將edge資料彙整
+     * @param {string} type ProcessMap/BPMN
+     */
+    setEdgesData(type) {
+      //add event duration is empty
+      const event_duration = {
+        "total": "",
+        "rel_duration": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+        "cases": ""
+      };
+      this.processMap.edges.forEach(edge => {
+        this.processMapData.nodes.push({
+          data: {
+            source:edge.tail,
+            target:edge.head,
+            freq:edge.freq,
+            duration:edge.duration == null ? event_duration:edge.duration,
+            style:'dotted',
+            lineWidth:1,
+          },
+        });
+      });
+     },
+    /**
+     * create and setting cytoscape
+     */
+    createCytoscape() {
+      let graphId = document.getElementById('cyto');
+      // let nodes
+      // let edges
+
+      let cy = this.$cytoscape({
+        container: graphId,
+        // elements: {
+        //   nodes: nodes, // 節點的資料
+        //   edges: edges, // 關係線的資料
+        // },
+        layout: {
+          name: 'klay',
+          rankDir: 'LR' // 直向 TB | 橫向 LR
+        },
+        style: [
+          {
+            selector: 'node',
+          }
+        ],
+      })
+
+      // this.$cytoscape.warnings(false); // false
+    },
+    async executeApi() {
+      await this.allMapDataStore.getAllMapData();
+      this.setNodesData();
+      console.log(this.processMapData.nodes);
+    }
+
+  },
+  created() {
+    this.allMapDataStore.logId = this.$route.params.logId;
+  },
+  mounted() {
+    this.isLoading = false
+    // this.createCytoscape();
+    this.executeApi();
+  },
+}
+</script>
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -6,23 +6,22 @@
      <!-- 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" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                {{ file.name }}
-              </h3>
-              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-                {{ file.parentLog }}
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              {{ file.accessed_at }}
+        <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
+        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">
+              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+            </figure>
+            <h3 class="text-sm font-medium mb-2">
+              {{ file.name }}
+            </h3>
+            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+              {{ file.parentLog }}
            </p>
-          </a>
+          </div>
+          <p class="text-sm text-neutral-500">
+            {{ file.accessed_at }}
+          </p>
        </li>
      </ul>
    </section>
@@ -52,7 +51,7 @@
            </tr>
          </thead>
          <tbody>
-            <tr v-for="(file, index) in allFiles" :key="file.id">
+            <tr v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
              <td>{{ file.name }}</td>
              <td class="text-neutral-500">{{ file.parentLog }}</td>
              <td class="text-neutral-500">{{ file.fileType }}</td>
@@ -64,24 +63,22 @@
      </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"
-      v-for="(file, index) in allFiles" :key="file.id">
-        <a href="" class="h-full flex flex-col justify-between">
-          <div>
-            <figure class="mb-2">
-              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
-            </figure>
-            <h3 class="text-sm font-medium mb-2">
-              {{ file.name }}
-            </h3>
-            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-              {{ file.parentLog }}
-            </p>
-          </div>
-          <p class="text-sm text-neutral-500">
-            {{ file.updated_at }}
+    <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"
+      v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
+        <div>
+          <figure class="mb-2">
+            <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+          </figure>
+          <h3 class="text-sm font-medium mb-2">
+            {{ file.name }}
+          </h3>
+          <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+            {{ file.parentLog }}
          </p>
-        </a>
+        </div>
+        <p class="text-sm text-neutral-500">
+          {{ file.updated_at }}
+        </p>
      </li>
    </ul>
    </section>
@@ -181,12 +178,20 @@
    },
    methods: {
      /**
-       * switch sort
+       * sort's switch
+       * @param {string} value
       */
      switchSort(value) {
        this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
        this.sortKey = value;
      },
+      /**
+       * 選擇該 files 進入 Discover/Compare/Design 頁面
+       * @param {object} file
+       */
+      enterDiscover(file){
+        this.$router.push({ name: 'Discover', params: { logId: file.id }});
+      },
    },
    mounted() {
      this.store.fetchEventLog();
--- a/vite.config.js
+++ b/vite.config.js
@@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => {
    // 設定路徑別名
    resolve: {
      alias: {
+        util: "util/",
        "@": fileURLToPath(new URL("./src", import.meta.url)), // EX:"/@/components/Header.vue"
        '/images': 'src/assets/images', // EX:<img src="/images/logo.png">
      }