1. npm install --save-dev @types/axios @types/vue @types/vue-router

2. create file vue-router.d.ts
2. pinia use my plugin
3. npm i --save-dev @types/cytoscape. npm i --save-dev @types/cytoscape-dagre. npm i --save-dev @types/cytoscape-popper.
4. add apiError.d.ts npm install --save-dev @types/vue-router.
5. add vue-axios.d.ts

package.json

@@ -41,7 +41,6 @@
     "vue": "^3.2.45",
     "vue-axios": "^3.5.2",
     "vue-chartjs": "^5.2.0",
-    "vue-router": "^4.1.6",
     "vue-sweetalert2": "^5.0.5",
     "vue-toast-notification": "^3.0.4",
     "vuedraggable": "^4.1.0"
@@ -49,7 +48,12 @@
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.2.5",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@types/node": "^20.14.9",
+    "@types/cytoscape": "^3.21.4",
+    "@types/cytoscape-dagre": "^2.3.3",
+    "@types/cytoscape-popper": "^2.0.4",
+    "@types/node": "^20.14.10",
+    "@types/vue": "^2.0.0",
+    "@types/vue-router": "^2.0.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.6",
@@ -60,15 +64,18 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^9.3.0",
     "html-webpack-plugin": "^5.5.0",
+    "i": "^0.3.7",
     "jsdom": "^20.0.3",
+    "npm": "^10.8.1",
     "postcss": "^8.4.20",
     "prettier": "^2.7.1",
     "sass": "^1.57.1",
     "start-server-and-test": "^2.0.3",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.3",
     "vite": "^4.0.0",
-    "vitest": "^0.25.6"
+    "vitest": "^0.25.6",
+    "vue-router": "^4.4.0"
   }
 }

shims-vue.d.ts

@@ -1,7 +0,0 @@
-// shims-vue.d.ts
-declare module '*.vue' {
-    import { DefineComponent } from 'vue';
-    const component: DefineComponent<{}, {}, any>;
-    export default component;
-  }
-  

src/components/Header.vue

@@ -21,7 +21,7 @@
 import { storeToRefs, mapActions, } from 'pinia';
 import i18next from '@/i18n/i18n';
 import loginStore from '@/stores/login.js';
-import acctMenuStore from "@/stores/acctMgmt.js";
+import acctMenuStore from "@/stores/acctMgmt.ts";
 import DspLogo from '@/components/icons/DspLogo.vue';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';

src/main.ts

@@ -1,8 +1,9 @@
-import { createApp, markRaw } from "vue";
+import { createApp, } from "vue";
 
 import App from "./App.vue";
-import router from "./router";
-import pinia from '@/stores/main.js';
+import router from "@router";
+import pinia from '@/stores/main';
+import myPiniaPlugin from './plugins/myPiniaPlugin';
 import axios from 'axios';
 import VueAxios from 'vue-axios';
 import moment from 'moment';
@@ -52,13 +53,11 @@ import ContextMenu from 'primevue/contextmenu';
 const emitter = mitt();
 const app = createApp(App);
 
+// axios setting
+app.config.globalProperties.$axios = axios;
+
 // Pinia Set
-pinia.use(({ store }) => {
-  store.$router = markRaw(router);
-  store.$axios = markRaw(axios);
-  store.$toast = markRaw(ToastPlugin);
-  store.$http = app.$http;
-});
+pinia.use(myPiniaPlugin);
 
 // can use `this.$moment` in Vue.js
 app.config.globalProperties.$moment = moment;
@@ -104,4 +103,4 @@ app.component('ContextMenu', ContextMenu);
 app.component('Draggable', draggable);  // 拖曳
 app.directive('tooltip', Tooltip);
 
-app.mount("#app");
+app.mount("#app");

src/plugins/myPiniaPlugin.ts

@@ -0,0 +1,13 @@
+import { PiniaPluginContext } from 'pinia';
+
+const myPiniaPlugin = (context: PiniaPluginContext) => {
+  const { store } = context;
+
+  // 在这里添加你的插件逻辑，例如：
+  store.$subscribe((mutation, state) => {
+    console.log(`Store mutation:`, mutation);
+    console.log(`New state:`, state);
+  });
+};
+
+export default myPiniaPlugin;

src/stores/acctMgmt.ts

@@ -28,7 +28,7 @@ export default defineStore('acctMgmtStore', {
     isAcctMenuOpen: false,
     currentViewingUser: {
       username: '',
-      detail: {},
+      detail: {} as EditDetail,
     } as User,
     response: {
       deleteAccount: null,
@@ -59,7 +59,7 @@ export default defineStore('acctMgmtStore', {
      * @param {string} username 
      */
     setCurrentViewingUser(username: string) {
-      const userFind = this.allUserAccoutList.find(user => user.username === username);
+      const userFind:User|undefined = this.allUserAccoutList.find(user => user.username === username);
       this.currentViewingUser = userFind ? userFind : { username: '', detail: {} };
     },
     /**
@@ -72,6 +72,10 @@ export default defineStore('acctMgmtStore', {
         name: '',
         is_admin: false,
         is_sso: false,
+        isDeleteHovered: false,
+        isRowHovered: false,
+        isEditHovered: false,
+        isDetailHovered: false,
       };
     },
     /**

src/stores/login.ts

@@ -2,7 +2,6 @@ import { defineStore } from "pinia";
 import axios from 'axios';
 import apiError from '@/module/apiError.js';
 import { deleteCookie, setCookie, getCookie } from "../utils/cookieUtil";
-import LoginStore from "@/stores/login.js";
 
 export default defineStore('loginStore', {
   // data, methods, computed

src/types/apiError.d.ts

@@ -0,0 +1,5 @@
+declare module '@/module/apiError' {
+    const apiError: any;
+    export default apiError;
+    }
+  

src/types/shims-vue.d.ts

@@ -0,0 +1,14 @@
+// src/types/shims-vue.d.ts
+declare module '*.vue' {
+    import { DefineComponent } from 'vue';
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+  }
+  
+  declare module 'vue/types/vue' {
+    import { AxiosInstance } from 'axios';
+    interface Vue {
+      $axios: AxiosInstance;
+    }
+  }
+  

src/types/vue-axios.d.ts

@@ -0,0 +1,7 @@
+import { AxiosInstance } from 'axios';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $axios: AxiosInstance;
+  }
+}

src/types/vue-router.d.ts

@@ -0,0 +1,15 @@
+import { Router, RouteLocationNormalized } from 'vue-router';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $router: Router;
+    $route: RouteLocationNormalized;
+  }
+}
+
+declare module '@router' {
+  import { Router } from 'vue-router';
+  const router: Router;
+  export default router;
+}
+  

src/views/AccountManagement/AccountAdmin/AccountAdmin.vue

@@ -110,7 +110,7 @@ import { ref, computed, onMounted, watch, } from 'vue';
 import { storeToRefs, mapState, mapActions, } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import { useModalStore } from '@/stores/modal.js';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import piniaLoginStore from '@/stores/login.js';
 import SearchBar from '../../../components/AccountMenu/SearchBar.vue';
 import i18next from '@/i18n/i18n.js';
@@ -145,10 +145,10 @@ function repeatAccountList(accountList, N) {
 }
 
 // 這是製作假資料，在正式環境不會用到
-const repeatedAccountList = repeatAccountList(accountList, 20);
+// const repeatedAccountList = repeatAccountList(accountList, 20);
 
 export default {
-    setup(props, { emit, }) {
+    setup() {
         const toast = useToast();
         const acctMgmtStore = useAcctMgmtStore();
         const loadingStore = LoadingStore();
@@ -382,7 +382,6 @@ export default {
     data() {
         return {
             i18next: i18next,
-            repeatedAccountList: repeatedAccountList,
             infiniteAcctDataVue2: [],
             infiniteStart: 0,
             isInfiniteFinish: true,
@@ -432,9 +431,10 @@ export default {
             this.openModal(MODAL_ACCT_INFO);
             this.setCurrentViewingUser(dataKey);
         },
-        onEditBtnClick(dataKey){
+        onEditBtnClick(clickedUserName){
             this.openModal(MODAL_ACCT_EDIT);
-            this.setCurrentViewingUser(dataKey);
+            console.log('TODO:', clickedUserName);
+            this.setCurrentViewingUser(clickedUserName);
         },
         moveCurrentLoginUserToFirstRow(){
 

src/views/AccountManagement/ModalAccountEditCreate.vue

@@ -142,7 +142,8 @@ import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toast-notification';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt';
+import useLoginStore from '@/stores/login';
 import ModalHeader from "./ModalHeader.vue";
 import IconChecked from "@/components/icons/IconChecked.vue";
 import { MODAL_CREATE_NEW, MODAL_ACCT_EDIT, } from '@/constants/constants.js';
@@ -151,6 +152,7 @@ export default defineComponent({
     setup() {
         const acctMgmtStore = useAcctMgmtStore();
         const modalStore = useModalStore();
+        const loginStore = useLoginStore();
 
         const router = useRouter();
         const toast = useToast();
@@ -245,7 +247,7 @@ export default defineComponent({
                     }                
                     await acctMgmtStore.createNewAccount({
                         username: inputUserAccount.value,
-                        password: inputPwd.value,
+                        password: inputPwd.value === undefined ? '' : inputPwd.value,
                         name: inputName.value,
                         is_admin: isSetAsAdminChecked.value,
                         is_active: isSetActivedChecked.value,
@@ -261,7 +263,7 @@ export default defineComponent({
                         currentViewingUser.value.username, {
                         newUsername: inputUserAccount.value,
                         password: inputPwd.value,
-                        name: inputName.value,
+                        name: inputName.value === undefined ? '' : inputName.value,
                         is_active: true,
                         // is_active: isSetActivedChecked.value, //TODO: 待確認需求規格
                     });
@@ -307,6 +309,8 @@ export default defineComponent({
         }
 
         onMounted(() => {
+            console.log('username', username, name, );
+            console.log('userData TODO:', loginStore.userData);
         });
 
         return {

src/views/AccountManagement/ModalAccountInfo.vue

@@ -28,7 +28,7 @@
 <script>
 import { onBeforeMount, computed, ref } from 'vue';
 import i18next from '@/i18n/i18n.js';
-import useAcctMgmtStore from '@/stores/acctMgmt.js';
+import useAcctMgmtStore from '@/stores/acctMgmt.ts';
 import ModalHeader from './ModalHeader.vue';
 import Badge from '../../components/Badge.vue';
 

tsconfig.json

@@ -1,5 +1,10 @@
 {
   "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./types",
+    "allowJs": true,
+    "checkJs": true,
     "target": "esnext",
     "module": "esnext",
     "strict": true,
@@ -10,13 +15,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "jest"],
     "paths": {
       "@/*": ["src/*"]
     },
     "lib": ["esnext", "dom"],
-    "skipLibCheck": true
+    "types": ["node", "webpack-env", "vue"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.json"]
+}