first commit

src/stores/modules/app/index.ts

@@ -0,0 +1,101 @@
+import type { AppState, RouteRecordNormalized, NotificationReturn } from './types';
+
+import defaultSettings from '@/config/settings.json';
+import type { AppRouteRecordRaw } from '@/router/routes/types';
+
+export const useAppStore = defineStore('app', {
+  state: (): AppState => ({ ...defaultSettings }),
+
+  getters: {
+    appCurrentSetting(state: AppState): AppState {
+      return { ...state };
+    },
+    appDevice(state: AppState) {
+      return state.device;
+    },
+    appAsyncMenus(state: AppState): AppRouteRecordRaw[] {
+      return state.serverMenu as unknown as AppRouteRecordRaw[];
+    },
+  },
+
+  actions: {
+    // Update app settings
+    updateSettings(partial: Partial<AppState>) {
+      // @ts-ignore-next-line
+      this.$patch(partial);
+    },
+
+    // Change theme color
+    toggleTheme(dark: boolean) {
+      if (dark) {
+        this.theme = 'dark';
+        document.body.setAttribute('arco-theme', 'dark');
+      } else {
+        this.theme = 'light';
+        document.body.removeAttribute('arco-theme');
+      }
+    },
+    toggleDevice(device: string) {
+      this.device = device;
+    },
+    toggleMenu(value: boolean) {
+      this.hideMenu = value;
+    },
+    async fetchServerMenuConfig() {
+      this.serverMenu = [
+        {
+          path: '/enterprise',
+          name: 'enterprise',
+          meta: {
+            locale: '企业票夹',
+            requiresAuth: true,
+            roles: ['*'],
+          },
+          children: [
+            {
+              path: 'input',
+              name: 'input',
+              meta: {
+                icon: IconImport,
+                locale: '进项管理',
+                requiresAuth: true,
+                roles: ['*'],
+              },
+            },
+            {
+              path: 'output',
+              name: 'output',
+              meta: {
+                locale: '销项管理',
+                requiresAuth: true,
+                roles: ['*'],
+              },
+            },
+            {
+              path: 'red-invoice',
+              name: 'red-invoice',
+              meta: {
+                locale: '全电红字确认单管理',
+                requiresAuth: true,
+                roles: ['*'],
+              },
+            },
+            {
+              path: 'information',
+              name: 'information',
+              meta: {
+                locale: '企业信息',
+                requiresAuth: true,
+                roles: ['*'],
+              },
+            },
+          ],
+        },
+      ];
+      this.menuFromServer = true;
+    },
+    clearServerMenu() {
+      this.serverMenu = [];
+    },
+  },
+});

src/stores/modules/app/types.ts

@@ -0,0 +1,24 @@
+import type { RouteRecordNormalized } from 'vue-router';
+import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
+import type { AppRouteRecordRaw } from '@/router/routes/types';
+
+export { RouteRecordNormalized, NotificationReturn };
+
+export interface AppState {
+  theme: string;
+  colorWeak: boolean;
+  navbar: boolean;
+  menu: boolean;
+  topMenu: boolean;
+  hideMenu: boolean;
+  menuCollapse: boolean;
+  footer: boolean;
+  themeColor: string;
+  menuWidth: number;
+  globalSettings: boolean;
+  device: string;
+  tabBar: boolean;
+  menuFromServer: boolean;
+  serverMenu: AppRouteRecordRaw[];
+  [key: string]: unknown;
+}

src/stores/modules/index.ts

@@ -0,0 +1,10 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 18:14:17
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 18:24:57
+ * @Description:
+ */
+export * from './app';
+export * from './tab-bar';
+export * from './user';

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

@@ -0,0 +1,67 @@
+import type { TabBarState, TagProps, RouteLocationNormalized } from './types';
+
+import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';
+import { isString } from '@/utils/is';
+
+const formatTag = (route: RouteLocationNormalized): TagProps => {
+  const { name, meta, fullPath, query } = route;
+  return {
+    title: meta.locale || '',
+    name: String(name),
+    fullPath,
+    query,
+    ignoreCache: meta.ignoreCache,
+  };
+};
+
+const BAN_LIST = [REDIRECT_ROUTE_NAME];
+
+export const useTabBarStore = defineStore('tabBar', {
+  state: (): TabBarState => ({
+    cacheTabList: new Set([DEFAULT_ROUTE_NAME]),
+    tagList: [DEFAULT_ROUTE],
+  }),
+
+  getters: {
+    getTabList(): TagProps[] {
+      return this.tagList;
+    },
+    getCacheList(): string[] {
+      return Array.from(this.cacheTabList);
+    },
+  },
+
+  actions: {
+    updateTabList(route: RouteLocationNormalized) {
+      if (BAN_LIST.includes(route.name as string)) return;
+      this.tagList.push(formatTag(route));
+      if (!route.meta.ignoreCache) {
+        this.cacheTabList.add(route.name as string);
+      }
+    },
+    deleteTag(idx: number, tag: TagProps) {
+      this.tagList.splice(idx, 1);
+      this.cacheTabList.delete(tag.name);
+    },
+    addCache(name: string) {
+      if (isString(name) && name !== '') this.cacheTabList.add(name);
+    },
+    deleteCache(tag: TagProps) {
+      this.cacheTabList.delete(tag.name);
+    },
+    freshTabList(tags: TagProps[]) {
+      this.tagList = tags;
+      this.cacheTabList.clear();
+      // 要先判断ignoreCache
+      this.tagList
+        .filter((el) => !el.ignoreCache)
+        .map((el) => el.name)
+        .forEach((x) => this.cacheTabList.add(x));
+    },
+    resetTabList() {
+      this.tagList = [DEFAULT_ROUTE];
+      this.cacheTabList.clear();
+      this.cacheTabList.add(DEFAULT_ROUTE_NAME);
+    },
+  },
+});

src/stores/modules/tab-bar/types.ts

@@ -0,0 +1,14 @@
+export type { RouteLocationNormalized } from 'vue-router';
+
+export interface TagProps {
+  title: string;
+  name: string;
+  fullPath: string;
+  query?: any;
+  ignoreCache?: boolean;
+}
+
+export interface TabBarState {
+  tagList: TagProps[];
+  cacheTabList: Set<string>;
+}

src/stores/modules/user/index.ts

@@ -0,0 +1,46 @@
+/*
+ * @Author: 田鑫
+ * @Date: 2023-03-05 14:57:17
+ * @LastEditors: 田鑫
+ * @LastEditTime: 2023-03-05 15:29:15
+ * @Description: 用户相关状态
+ */
+
+type Role = 'ENTERPRISE' | 'PERSON';
+
+interface UserState {
+  role: Role;
+  isLogin: boolean;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    role: 'PERSON',
+    isLogin: false,
+  }),
+
+  getters: {
+    userRole(state) {
+      return state.role;
+    },
+    userIsLogin(state) {
+      return state.isLogin;
+    },
+  },
+
+  actions: {
+    setUserRole(role: Role) {
+      this.role = role;
+    },
+
+    setUserLoginStatus(isLogin: boolean) {
+      this.isLogin = isLogin;
+    },
+
+    async getUserInfo() {
+      // todo 调用获取用户信息接口，当前用mock数据表示
+      AMessage.success(`当前用户角色为：ENTERPRISE`)
+      this.setUserRole('ENTERPRISE');
+    },
+  },
+});