init

src/stores/dict.ts

@@ -0,0 +1,60 @@
+import {defineStore} from 'pinia';
+
+/**
+ * 创建并导出字典存储的 Vue3 store 对象
+ * @function
+ * @returns {DictionaryStore} - 返回创建的字典存储对象
+ */
+export const dict = defineStore('dict', {
+    state: () => ({
+        dict: [] as any[],
+    }),
+    actions: {
+        /**
+         * 获取指定键的值
+         * @function
+         * @param {string} key - 需要获取的键
+         * @returns {Object|null} - 返回指定键对应的值，如果找不到则返回 null
+         */
+        getDict(key: String) {
+            try {
+                const item = this.dict.find((item) => item.key === key);
+                return item ? item.value : null;
+            } catch (e) {
+                return null;
+            }
+        },
+
+        /**
+         * 设置一个键值对
+         * @function
+         * @param {string} key - 需要设置的键
+         * @param {Object} value - 需要设置的值
+         */
+        setDict(key: String, value: Object) {
+            if (!key || typeof key !== 'string') {
+                return;
+            }
+            this.dict.push({key, value});
+        },
+
+        /**
+         * 删除指定键值对
+         * @function
+         * @param {string} key - 需要删除的键
+         * @returns {boolean} - 返回删除操作是否成功
+         */
+        removeDict(key: String) {
+            try {
+                const index = this.dict.findIndex((item) => item.key === key);
+                if (index !== -1) {
+                    this.dict.splice(index, 1);
+                    return true;
+                }
+            } catch (e) {
+                return false;
+            }
+            return false;
+        },
+    },
+});

src/stores/index.ts

@@ -0,0 +1,10 @@
+// https://pinia.vuejs.org/
+import { createPinia } from 'pinia';
+import piniaPluginPersist from 'pinia-plugin-persist';
+
+// 创建
+const pinia = createPinia();
+pinia.use(piniaPluginPersist);
+
+// 导出
+export default pinia;

src/stores/keepAliveNames.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 路由缓存列表
+ * @methods setCacheKeepAlive 设置要缓存的路由 names（开启 Tagsview）
+ * @methods addCachedView 添加要缓存的路由 names（关闭 Tagsview）
+ * @methods delCachedView 删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delOthersCachedViews 右键菜单`关闭其它`，删除要缓存的路由 names（关闭 Tagsview）
+ * @methods delAllCachedViews 右键菜单`全部关闭`，删除要缓存的路由 names（关闭 Tagsview）
+ */
+export const useKeepALiveNames = defineStore('keepALiveNames', {
+	state: (): KeepAliveNamesState => ({
+		keepAliveNames: [],
+		cachedViews: [],
+	}),
+	actions: {
+		async setCacheKeepAlive(data: Array<string>) {
+			this.keepAliveNames = data;
+		},
+		async addCachedView(view: any) {
+			if (view.meta.isKeepAlive) this.cachedViews?.push(view.name);
+		},
+		async delCachedView(view: any) {
+			const index = this.cachedViews.indexOf(view.name);
+			index > -1 && this.cachedViews.splice(index, 1);
+		},
+		async delOthersCachedViews(view: any) {
+			if (view.meta.isKeepAlive) this.cachedViews = [view.name];
+			else this.cachedViews = [];
+		},
+		async delAllCachedViews() {
+			this.cachedViews = [];
+		},
+	},
+});

src/stores/msg.ts

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+export const useMsg = defineStore('msg', {
+	state: () => ({
+		msgArray: [] as any[],
+	}),
+	actions: {
+		getAllMsg() {
+			return this.msgArray;
+		},
+		setMsg(value: Object) {
+			this.msgArray.push(value);
+		},
+		removeAll() {
+			this.msgArray = [];
+		},
+	},
+});

src/stores/param.ts

@@ -0,0 +1,60 @@
+import {defineStore} from 'pinia';
+
+/**
+ * 创建并导出字典存储的 Vue3 store 对象
+ * @function
+ * @returns {DictionaryStore} - 返回创建的字典存储对象
+ */
+export const param = defineStore('param', {
+    state: () => ({
+        param: [] as any[],
+    }),
+    actions: {
+        /**
+         * 获取指定键的值
+         * @function
+         * @param {string} key - 需要获取的键
+         * @returns {Object|null} - 返回指定键对应的值，如果找不到则返回 null
+         */
+        getParam(key: String) {
+            try {
+                const item = this.param.find((item) => item.key === key);
+                return item ? item.value : undefined;
+            } catch (e) {
+                return undefined;
+            }
+        },
+
+        /**
+         * 设置一个键值对
+         * @function
+         * @param {string} key - 需要设置的键
+         * @param {Object} value - 需要设置的值
+         */
+        setParam(key: String, value: Object) {
+            if (!key || typeof key !== 'string') {
+                return;
+            }
+            this.param.push({key, value});
+        },
+
+        /**
+         * 删除指定键值对
+         * @function
+         * @param {string} key - 需要删除的键
+         * @returns {boolean} - 返回删除操作是否成功
+         */
+        removeParam(key: String) {
+            try {
+                const index = this.param.findIndex((item) => item.key === key);
+                if (index !== -1) {
+                    this.param.splice(index, 1);
+                    return true;
+                }
+            } catch (e) {
+                return false;
+            }
+            return false;
+        },
+    },
+});

src/stores/requestOldRoutes.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 后端返回原始路由(未处理时)
+ * @methods setCacheKeepAlive 设置接口原始路由数据
+ */
+export const useRequestOldRoutes = defineStore('requestOldRoutes', {
+	state: (): RequestOldRoutesState => ({
+		requestOldRoutes: [],
+	}),
+	actions: {
+		async setRequestOldRoutes(routes: Array<string>) {
+			this.requestOldRoutes = routes;
+		},
+	},
+});

src/stores/routesList.ts

@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 路由列表
+ * @methods setRoutesList 设置路由数据
+ * @methods setColumnsMenuHover 设置分栏布局菜单鼠标移入 boolean
+ * @methods setColumnsNavHover 设置分栏布局最左侧导航鼠标移入 boolean
+ */
+export const useRoutesList = defineStore('routesList', {
+	state: (): RoutesListState => ({
+		routesList: [],
+		isColumnsMenuHover: false,
+		isColumnsNavHover: false,
+	}),
+	actions: {
+		async setRoutesList(data: Array<string>) {
+			this.routesList = data;
+		},
+		async setColumnsMenuHover(bool: Boolean) {
+			this.isColumnsMenuHover = bool;
+		},
+		async setColumnsNavHover(bool: Boolean) {
+			this.isColumnsNavHover = bool;
+		},
+	},
+});

src/stores/tagsViewRoutes.ts

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia';
+import { Session } from '/@/utils/storage';
+import { useMessage } from '/@/hooks/message';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { i18n } from '/@/i18n/index';
+
+/**
+ * TagsView 路由列表
+ * @methods setTagsViewRoutes 设置 TagsView 路由列表
+ * @methods setCurrenFullscreen 设置开启/关闭全屏时的 boolean 状态
+ */
+export const useTagsViewRoutes = defineStore('tagsViewRoutes', {
+	state: (): TagsViewRoutesState => ({
+		tagsViewRoutes: [],
+		isTagsViewCurrenFull: false,
+		favoriteRoutes: [],
+	}),
+	actions: {
+		async setTagsViewRoutes(data: Array<string>) {
+			this.tagsViewRoutes = data;
+		},
+		setCurrenFullscreen(bool: Boolean) {
+			Session.set('isTagsViewCurrenFull', bool);
+			this.isTagsViewCurrenFull = bool;
+		},
+		async setFavoriteRoutes(item) {
+			const storesThemeConfig = useThemeConfig();
+			const { themeConfig } = storeToRefs(storesThemeConfig);
+			// 判断已经存储的长度,如果超过主题设置则警告
+			if (this.favoriteRoutes.length > themeConfig.value.quickLinkNum) {
+				useMessage().error(i18n.global.t('tagsView.favoriteMax'))
+				return
+			}
+			this.favoriteRoutes.unshift(item);
+		},
+		async delFavoriteRoutes(item) {
+			this.favoriteRoutes.splice(this.favoriteRoutes.indexOf(item), 1);
+		},
+	},
+	persist: {
+		enabled: true,
+		strategies: [
+			{
+				key: 'tagsViewRoutes', //自定义 Key值
+				storage: localStorage, // 选择存储方式
+			},
+		],
+	},
+});

src/stores/themeConfig.ts

@@ -0,0 +1,150 @@
+import { defineStore } from 'pinia';
+
+/**
+ * 修改配置时：
+ * 1、需要每次都清理 `window.localStorage` 浏览器永久缓存
+ * 2、或者点击布局配置最底部 `一键恢复默认` 按钮即可看到效果
+ */
+export const useThemeConfig = defineStore('themeConfig', {
+	state: (): ThemeConfigState => ({
+		themeConfig: {
+			// 是否开启布局配置抽屉
+			isDrawer: false,
+
+			/**
+			 * 全局主题
+			 */
+			// 默认 primary 主题颜色
+			primary: '#2E5CF6',
+			// 是否开启深色模式
+			isDark: false,
+
+			/**
+			 * 顶栏设置
+			 */
+			// 默认顶栏导航背景颜色
+			topBar: '#2E5CF6',
+			// 默认顶栏导航字体颜色
+			topBarColor: '#FFFFFF',
+			// 是否开启顶栏背景颜色渐变
+			isTopBarColorGradual: false,
+
+			/**
+			 * 菜单设置
+			 */
+			// 默认菜单导航背景颜色
+			menuBar: '#FFFFFF',
+			// 默认菜单导航字体颜色
+			menuBarColor: '#505968',
+			// 默认菜单高亮背景色
+			menuBarActiveColor: 'rgba(242, 243, 245, 1)',
+			// 是否开启菜单背景颜色渐变
+			isMenuBarColorGradual: false,
+
+			/**
+			 * 分栏设置
+			 */
+			// 默认分栏菜单背景颜色
+			columnsMenuBar: '#545c64',
+			// 默认分栏菜单字体颜色
+			columnsMenuBarColor: '#e6e6e6',
+			// 是否开启分栏菜单背景颜色渐变
+			isColumnsMenuBarColorGradual: false,
+			// 是否开启分栏菜单鼠标悬停预加载(预览菜单)
+			isColumnsMenuHoverPreload: false,
+
+			/**
+			 * 界面设置
+			 */
+			// 是否开启菜单水平折叠效果
+			isCollapse: false,
+			// 是否开启菜单手风琴效果
+			isUniqueOpened: true,
+			// 是否开启固定 Header
+			isFixedHeader: false,
+			// 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
+			isFixedHeaderChange: false,
+			// 是否开启经典布局分割菜单（仅经典布局生效）
+			isClassicSplitMenu: true,
+			// 是否开启自动锁屏
+			isLockScreen: false,
+			// 开启自动锁屏倒计时(s/秒)
+			lockScreenTime: 30,
+
+			/**
+			 * 界面显示
+			 */
+			// 是否开启侧边栏 Logo
+			isShowLogo: true,
+			// 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
+			isShowLogoChange: false,
+			// 是否开启 Breadcrumb，强制经典、横向布局不显示
+			isBreadcrumb: true,
+			// 是否开启 Tagsview
+			isTagsview: true,
+			// 是否开启 Breadcrumb 图标
+			isBreadcrumbIcon: false,
+			// 是否开启 Tagsview 图标
+			isTagsviewIcon: false,
+			// 是否开启 TagsView 缓存
+			isCacheTagsView: true,
+			// 是否开启 TagsView 拖拽
+			isSortableTagsView: true,
+			// 是否开启 TagsView 共用
+			isShareTagsView: false,
+			// 是否开启 Footer 底部版权信息
+			isFooter: true,
+			// 是否开启灰色模式
+			isGrayscale: false,
+			// 是否开启色弱模式
+			isInvert: false,
+			// 是否开启水印
+			isWartermark: true,
+			// 是否开启AI助手
+			isChat: false,
+			// 水印文案
+			wartermarkText: 'cloud',
+			// 首页快捷导航上限
+			quickLinkNum: 12,
+			/**
+			 * 其它设置
+			 */
+			// Tagsview 风格：可选值"<tags-style-one|tags-style-four|tags-style-five>"，默认 tags-style-five
+			// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
+			tagsStyle: 'tags-style-five',
+			// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
+			animation: 'slide-right',
+			// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
+			columnsAsideStyle: 'columns-round',
+			// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 columns-horizontal
+			columnsAsideLayout: 'columns-vertical',
+
+			/**
+			 * 布局切换
+			 * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/breadcrumb/settings.vue
+			 * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法
+			 */
+			// 布局切换：可选值"<defaults|classic|transverse|columns>"，默认 defaults
+			layout: 'classic',
+
+			/**
+			 * 后端控制路由
+			 */
+			// 是否开启后端控制路由
+			isRequestRoutes: true,
+			// 默认初始语言，可选值"<zh-cn|en|zh-tw>"，默认 zh-cn
+			globalI18n: 'zh-cn',
+			// 默认全局组件大小，可选值"<large|'default'|small>"，默认 'default'
+			globalComponentSize: 'default',
+			// 网站主标题（菜单导航、浏览器当前网页标题、登录form顶部右侧）
+			globalTitle: import.meta.env.VITE_GLOBAL_TITLE,
+			// footer 标题内容
+			footerAuthor: import.meta.env.VITE_FOOTER_TITLE,
+		},
+	}),
+	actions: {
+		setThemeConfig(data: ThemeConfigState) {
+			this.themeConfig = data.themeConfig;
+		},
+	},
+});

src/stores/userInfo.ts

@@ -0,0 +1,135 @@
+import { defineStore } from 'pinia';
+import { Session } from '/@/utils/storage';
+import { getUserInfo, login, loginByMobile, loginBySocial, refreshTokenApi } from '/@/api/login/index';
+import { useMessage } from '/@/hooks/message';
+
+/**
+ * @function useUserInfo
+ * @returns {UserInfosStore}
+ */
+export const useUserInfo = defineStore('userInfo', {
+	state: (): UserInfosState => ({
+		userInfos: {
+			userName: '',
+			photo: '',
+			time: 0,
+			roles: [],
+			authBtnList: [],
+		},
+	}),
+
+	actions: {
+		/**
+		 * 登录方法
+		 * @function login
+		 * @async
+		 * @param {Object} data - 登录数据
+		 * @returns {Promise<Object>}
+		 */
+		async login(data:any) {
+			data.grant_type = 'password';
+			data.scope = 'server';
+
+			return new Promise((resolve, reject) => {
+				login(data)
+					.then((res) => {
+						// 存储token 信息
+						Session.set('token', res.access_token);
+						Session.set('refresh_token', res.refresh_token);
+						resolve(res);
+					})
+					.catch((err) => {
+						useMessage().error(err?.msg || '系统异常请联系管理员');
+						reject(err);
+					});
+			});
+		},
+
+		/**
+		 * 手机登录方法
+		 * @function loginByMobile
+		 * @async
+		 * @param {Object} data - 登录数据
+		 * @returns {Promise<Object>}
+		 */
+		async loginByMobile(data) {
+			return new Promise((resolve, reject) => {
+				loginByMobile(data.mobile, data.code)
+					.then((res) => {
+						// 存储token 信息
+						Session.set('token', res.access_token);
+						Session.set('refresh_token', res.refresh_token);
+						resolve(res);
+					})
+					.catch((err) => {
+						useMessage().error(err?.msg || '系统异常请联系管理员');
+						reject(err);
+					});
+			});
+		},
+
+		/**
+		 * 社交账号登录方法
+		 * @function loginBySocial
+		 * @async
+		 * @param {string} state - 状态
+		 * @param {string} code - 代码
+		 * @returns {Promise<Object>}
+		 */
+		async loginBySocial(state, code) {
+			return new Promise((resolve, reject) => {
+				loginBySocial(state, code)
+					.then((res) => {
+						// 存储token 信息
+						Session.set('token', res.access_token);
+						Session.set('refresh_token', res.refresh_token);
+						resolve(res);
+					})
+					.catch((err) => {
+						useMessage().error(err?.msg || '系统异常请联系管理员');
+						reject(err);
+					});
+			});
+		},
+
+		/**
+		 * 刷新token方法
+		 * @function refreshToken
+		 * @async
+		 * @returns {Promise<any>}
+		 */
+		async refreshToken() {
+			return new Promise((resolve, reject) => {
+				const refreshToken = Session.get('refresh_token');
+				refreshTokenApi(refreshToken)
+					.then((res) => {
+						// 存储token 信息
+						Session.set('token', res.access_token);
+						Session.set('refresh_token', res.refresh_token);
+						resolve(res);
+					})
+					.catch((err) => {
+						useMessage().error(err.msg);
+						reject(err);
+					});
+			});
+		},
+
+		/**
+		 * 获取用户信息方法
+		 * @function setUserInfos
+		 * @async
+		 */
+		async setUserInfos() {
+			await getUserInfo().then((res) => {
+				const userInfo: any = {
+					user: res.data.sysUser,
+					time: new Date().getTime(),
+					roles: res.data.roles,
+					authBtnList: res.data.permissions,
+				};
+				this.userInfos = userInfo;
+			});
+		},
+	},
+});