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

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';