fix: store state sync

package.json

@@ -72,7 +72,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
-    "marked": "^4.3.0",
+    "marked": "^6.0.0",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "packageurl-js": "^0.0.7",

src/components/breadcrumb/index.vue

@@ -122,9 +122,9 @@
               @click="handleClickItem(item)"
             >
               <component :is="item.icon" v-if="item.icon"></component>
-              {{ item.label }}
+              {{ $t(item.label || '') }}
             </a-link>
-            <span v-else>{{ item.label }}</span>
+            <span v-else>{{ $t(item.label || '') }}</span>
           </span>
           <icon-oblique-line
             v-if="index < items.length - 1"

src/components/menu/index.vue

@@ -11,7 +11,6 @@
     versionData,
     getVersion
   } from '@/hooks/fetch-app-version';
-  // import type { RouteLocationNormalized } from 'vue-router';
 
   import {
     useAppStore,
@@ -125,20 +124,22 @@
       const handleShowVersion = () => {
         showVersionModal(versionInfo.value as versionData);
       };
-      const goToProject = async (item: RouteRecordRaw) => {
-        const defaultProject = await localStore.getValue(USER_DEFAULT_PROJECT);
-
+      const goToProject = (item: RouteRecordRaw) => {
+        // const localValue: any = await localStore.getValue(USER_DEFAULT_PROJECT);
+        const defaultProject = projectStore.defaultActiveProject;
         // need create new project
         if (!projectStore.projectList.length) {
           router.push({
             name: item.name
           });
           return;
         }
+
         const pro = _.find(
           projectStore.projectList,
           (item) => item.value === defaultProject?.id
         );
+
         const projectID = pro
           ? defaultProject?.id
           : _.get(projectStore.projectList, '0.value');
@@ -156,6 +157,7 @@
           });
           return;
         }
+
         // has access permission to default project
         router.push({
           name: PROJECT.Detail,
@@ -164,6 +166,69 @@
           }
         });
       };
+      const getProjectList = async () => {
+        try {
+          const params = {
+            page: -1
+          };
+          const { data } = await queryProjects(params);
+          const list = _.map(data.items, (item) => {
+            return {
+              label: item.name,
+              value: item.id
+            };
+          });
+          // const localValue: any = await localStore.getValue(
+          //   USER_DEFAULT_PROJECT
+          // );
+          const defaultProject = projectStore.defaultActiveProject;
+          const defaultValue = route.params.projectId || _.get(list, '0.value');
+          const defaultName = _.find(
+            list,
+            (item) => item.value === defaultValue
+          )?.label as string;
+
+          if (!defaultProject?.id && list.length) {
+            // localStore.setValue(USER_DEFAULT_PROJECT, {
+            //   id: defaultValue,
+            //   name: defaultName
+            // });
+            projectStore.setInfo({
+              defaultActiveProject: {
+                id: defaultValue,
+                name: defaultName
+              }
+            });
+          } else if (!list.length) {
+            // localStore.setValue(USER_DEFAULT_PROJECT, { id: '', name: '' });
+            projectStore.setInfo({
+              defaultActiveProject: {}
+            });
+          } else {
+            const data = _.find(
+              list,
+              (item) => item.value === defaultProject?.id
+            );
+            // localStore.setValue(USER_DEFAULT_PROJECT, {
+            //   id: data?.value || defaultValue,
+            //   name: data?.label || defaultName
+            // });
+            projectStore.setInfo({
+              defaultActiveProject: {
+                id: data?.value || defaultValue,
+                name: data?.label || defaultName
+              }
+            });
+          }
+          projectStore.setInfo({
+            projectList: _.cloneDeep(list)
+          });
+        } catch (error) {
+          projectStore.setInfo({
+            projectList: []
+          });
+        }
+      };
       // In this case only two levels of menus are available
       // You can expand as needed
 
@@ -172,7 +237,8 @@
         const isReplace: any = item.meta?.replace;
         tabBarStore.clearTags();
         if (item.name === PROJECT.List) {
-          await goToProject(item);
+          await getProjectList();
+          goToProject(item);
           return;
         }
         if (!isReplace) {
@@ -394,50 +460,6 @@
         return travel();
       };
 
-      const getProjectList = async () => {
-        try {
-          const params = {
-            page: -1
-          };
-          const { data } = await queryProjects(params);
-          const list = _.map(data.items, (item) => {
-            return {
-              label: item.name,
-              value: item.id
-            };
-          });
-          const defaultProject = await localStore.getValue(
-            USER_DEFAULT_PROJECT
-          );
-          const defaultValue = route.params.projectId || _.get(list, '0.value');
-          const defaultName = _.get(list, '0.label');
-          if (!defaultProject?.id && list.length) {
-            localStore.setValue(USER_DEFAULT_PROJECT, {
-              id: defaultValue,
-              name: defaultName
-            });
-          } else if (!list.length) {
-            localStore.setValue(USER_DEFAULT_PROJECT, { id: '', name: '' });
-          } else {
-            const data = _.find(
-              list,
-              (item) => item.value === defaultProject?.id
-            );
-            localStore.setValue(USER_DEFAULT_PROJECT, {
-              id: data?.value || defaultValue,
-              name: data?.label || defaultName
-            });
-          }
-          projectStore.setInfo({
-            projectList: _.cloneDeep(list)
-          });
-        } catch (error) {
-          projectStore.setInfo({
-            projectList: []
-          });
-          console.log(error);
-        }
-      };
       const init = () => {
         userStore.info();
         getProjectList();

src/hooks/user.ts

@@ -1,19 +1,27 @@
 import { Message } from '@arco-design/web-vue';
-import { useUserStore, useAppStore, useProjectStore } from '@/store';
+import {
+  useUserStore,
+  useAppStore,
+  useProjectStore,
+  useServiceStore
+} from '@/store';
 import useCallCommon from './use-call-common';
 
 export default function useUser() {
   const { router, t } = useCallCommon();
   const userStore = useUserStore();
   const appStore = useAppStore();
   const projectStore = useProjectStore();
+  const serviceStore = useServiceStore();
+
   const logout = async (logoutTo?: string) => {
     await userStore.logout();
     const currentRoute = router.currentRoute.value;
     Message.success(t('common.logout.msg'));
     userStore.resetInfo();
     appStore.resetInfo();
     projectStore.resetInfo();
+    serviceStore.resetInfo();
     router.push({
       name: logoutTo && typeof logoutTo === 'string' ? logoutTo : 'Login',
       query: {

src/store/modules/cost-managment/index.ts

@@ -6,15 +6,16 @@ const useCostManageStore = defineStore('costManage', {
   },
   state: (): any => ({
     perspectiveList: [],
-    fieldNameList: []
+    fieldNameList: [],
+    defaultActivePerspective: {} // {hotProjectId: '', page: ''}
   }),
   getters: {
     filterInfo(state: any): any {
       return { ...state };
     }
   },
   actions: {
-    setFilterInfo(partial: any) {
+    setInfo(partial: any) {
       this.$patch(partial);
     },
     reset() {

src/store/modules/project/index.ts

@@ -1,3 +1,4 @@
+import { clone, cloneDeep } from 'lodash';
 import { defineStore } from 'pinia';
 
 const useProjectStore = defineStore('project', {
@@ -7,7 +8,8 @@ const useProjectStore = defineStore('project', {
   state: (): any => ({
     projectList: [],
     environmentList: [],
-    serviceList: []
+    serviceList: [],
+    defaultActiveProject: {} // {id: '', name: ''}
   }),
   getters: {
     filterInfo(state: any): any {
@@ -20,6 +22,14 @@ const useProjectStore = defineStore('project', {
     },
     resetInfo() {
       this.$reset();
+    },
+    removeProjects(ids) {
+      const projectList = cloneDeep(this.projectList).filter(
+        (item) => !ids.includes(item.value)
+      );
+      this.setInfo({
+        projectList
+      });
     }
   }
 });

src/store/modules/service/index.ts

@@ -1,15 +1,37 @@
 import { defineStore } from 'pinia';
+import _ from 'lodash';
 
 const useServiceStore = defineStore('service', {
   persist: {
     key: 'service'
   },
   state: (): any => ({
-    currentService: {}
+    currentService: []
   }),
   actions: {
-    setInfo(partial: any) {
-      this.$patch(partial);
+    getServiceInfo(serviceId) {
+      if (serviceId) {
+        return _.find(this.currentService, { id: serviceId }) || {};
+      }
+      return {};
+    },
+    setServiceInfo(serviceId, data) {
+      if (serviceId) {
+        const index = _.findIndex(this.currentService, { id: serviceId });
+        if (index > -1) {
+          this.currentService[index] = data;
+        } else {
+          this.currentService.push(data);
+        }
+      }
+    },
+    deleteService(serviceId) {
+      if (serviceId) {
+        const index = _.findIndex(this.currentService, { id: serviceId });
+        if (index > -1) {
+          this.currentService.splice(index, 1);
+        }
+      }
     },
     resetInfo() {
       this.$reset();

src/store/modules/tab-bar/index.ts

@@ -15,14 +15,7 @@ const formatTag = (route: RouteLocationNormalized): TagProps => {
 const useAppStore = defineStore('tabBar', {
   state: (): TabBarState => ({
     cacheTabList: new Set(),
-    tagList: [
-      // Set the first element dynamically as needed
-      // {
-      //   title: 'menu.dashboard.workplace',
-      //   name: 'workplace',
-      //   fullPath: '/dashboard/workplace',
-      // },
-    ]
+    tagList: []
   }),
 
   getters: {

src/utils/localStore.ts

@@ -23,22 +23,22 @@ class Localestore extends Object.getPrototypeOf(localForage).constructor {
         expire: {
           expire,
           createTime: dayjs().valueOf(),
-          expiration: dayjs().add(expire, 'day').valueOf(),
-        },
+          expiration: dayjs().add(expire, 'day').valueOf()
+        }
       },
       callback
     );
   }
 
   public async getValue(key, callback?) {
     const storeValue = await localForage.getItem(key, callback);
-    console.log('storeValue:', storeValue);
+
     const expire = get(storeValue, 'expire');
-    if (!expire) return get(storeValue, 'value');
+    if (!expire) return storeValue;
     const expiration = get(expire, 'expiration');
     return {
       value: get(storeValue, 'value'),
-      isExpiration: dayjs().isAfter(expiration),
+      isExpiration: dayjs().isAfter(expiration)
     };
   }
 }

src/views/application-management/projects/hooks/update-store-projectlist.ts

@@ -0,0 +1,19 @@
+import mitt, { Handler } from 'mitt';
+
+const emitter = mitt();
+
+const key = Symbol('UPDATE_STORE_PROJECTLIST');
+
+export function updateStoreProjectListEmitter(data) {
+  emitter.emit(key, data);
+}
+
+export function listenerStoreUpdateProjectList(handler: (data) => void) {
+  emitter.on(key, handler as Handler);
+}
+
+export function removeUpdateStoreProjectListener() {
+  emitter.off(key);
+}
+
+export default {};