-
-
{{ appStore.title }}
+
+
+ {{ name }}
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
index fe2ba58..965457f 100644
--- a/src/layouts/components/sider/Menu.vue
+++ b/src/layouts/components/sider/Menu.vue
@@ -2,7 +2,6 @@
{
- routerPush(key);
+ routerPush(key);
};
diff --git a/src/main.ts b/src/main.ts
index 4594a3c..6d8993a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,24 +1,23 @@
import { createApp } from 'vue';
import App from './App.vue';
+import AppLoading from './components/common/appLoading.vue';
import { setupRouter } from './router';
import { setupAssets } from './plugins';
import { setupStore } from './store';
async function setupApp() {
- // 引入静态资源
- setupAssets();
- // 创建vue实例
- const app = createApp(App);
- // 安装pinia全局状态库
- setupStore(app);
- // 安装router
- await setupRouter(app);
- // 挂载
- await app.mount('#app');
- closeAppLoading();
+ // 引入静态资源
+ setupAssets();
+ // 载入全局loading加载状态
+ const appLoading = createApp(AppLoading);
+ appLoading.mount('#appLoading');
+ // 创建vue实例
+ const app = createApp(App);
+ // 安装pinia全局状态库
+ setupStore(app);
+ // 安装router
+ await setupRouter(app);
+ // 挂载
+ await app.mount('#app');
}
setupApp();
-
-function closeAppLoading() {
- document.querySelector('#loading-container')!.remove();
-}
diff --git a/src/router/guard/index.ts b/src/router/guard/index.ts
index eddbff7..ce49889 100644
--- a/src/router/guard/index.ts
+++ b/src/router/guard/index.ts
@@ -2,24 +2,25 @@ import type { Router } from 'vue-router';
import { createPermissionGuard } from './permission';
-const appTitle = import.meta.env.VITE_APP_TITLE;
+import { useAppInfo } from '@/hooks';
+const { title } = useAppInfo();
export function setupRouterGuard(router: Router) {
- router.beforeEach(async (to, from, next) => {
- // 判断是否是外链，如果是直接打开网页并拦截跳转
- if (to.meta.herf) {
- window.open(to.meta.herf);
- return false;
- }
- // 开始 loadingBar
- window.$loadingBar?.start();
- // 权限操作
- await createPermissionGuard(to, from, next);
- });
- router.afterEach((to) => {
- // 修改网页标题
- document.title = `${to.meta.title} — ${appTitle}`;
- // 结束 loadingBar
- window.$loadingBar?.finish();
- });
+ router.beforeEach(async (to, from, next) => {
+ // 判断是否是外链，如果是直接打开网页并拦截跳转
+ if (to.meta.herf) {
+ window.open(to.meta.herf);
+ return false;
+ }
+ // 开始 loadingBar
+ window.$loadingBar?.start();
+ // 权限操作
+ await createPermissionGuard(to, from, next);
+ });
+ router.afterEach((to) => {
+ // 修改网页标题
+ document.title = `${to.meta.title} - ${title}`;
+ // 结束 loadingBar
+ window.$loadingBar?.finish();
+ });
}
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 3a8bcbf..3436f37 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -3,124 +3,132 @@ import { nextTick } from 'vue';
import { darkTheme, GlobalTheme } from 'naive-ui';
interface AppStatus {
- title: string;
- footerText: string;
- collapsed: boolean;
- fullScreen: boolean;
- darkMode: boolean;
- grayMode: boolean;
- colorWeak: boolean;
- darkTheme: GlobalTheme | null;
- loadFlag: boolean;
- showLogo: boolean;
- showTabs: boolean;
- showBreadcrumb: boolean;
- fixedHeader: boolean;
- fixedFooter: boolean;
- invertedSider: boolean;
- invertedHeader: boolean;
+ readonly footerText: string;
+ collapsed: boolean;
+ fullScreen: boolean;
+ darkMode: boolean;
+ grayMode: boolean;
+ colorWeak: boolean;
+ darkTheme: GlobalTheme | null;
+ loadFlag: boolean;
+ showLogo: boolean;
+ showTabs: boolean;
+ showBreadcrumb: boolean;
+ fixedHeader: boolean;
+ fixedFooter: boolean;
+ invertedSider: boolean;
+ invertedHeader: boolean;
}
const docEle = document.documentElement;
export const useAppStore = defineStore('app-store', {
- state: (): AppStatus => {
- return {
- title: import.meta.env.VITE_APP_TITLE,
- footerText: 'Copyright ©2022 Ench Admin',
- collapsed: false,
- fullScreen: false,
- darkMode: false,
- grayMode: false,
- colorWeak: false,
- darkTheme: null,
- loadFlag: true,
- showLogo: true,
- showTabs: true,
- showBreadcrumb: true,
- fixedHeader: false,
- fixedFooter: true,
- invertedSider: false,
- invertedHeader: false,
- };
- },
- actions: {
- /* 切换侧边栏收缩 */
- toggleCollapse() {
- this.collapsed = !this.collapsed;
- },
- /* 切换全屏 */
- toggleFullScreen() {
- if (!document.fullscreenElement) {
- this.fullScreen = true;
- document.documentElement.requestFullscreen();
- } else if (document.exitFullscreen) {
- this.fullScreen = false;
- document.exitFullscreen();
- }
- },
- /* 切换主题 亮/深色 */
- toggleDarkMode() {
- this.darkMode = !this.darkMode;
- if (this.darkMode) {
- this.darkTheme = darkTheme;
- } else {
- this.darkTheme = null;
- }
- },
- /**
- * @description: 页面内容重载
- * @param {number} delay - 延迟毫秒数
- * @return {*}
- */
- async reloadPage(delay = 600) {
- this.loadFlag = false;
- await nextTick();
- if (delay) {
- setTimeout(() => {
- this.loadFlag = true;
- }, delay);
- } else {
- this.loadFlag = true;
- }
- },
- /* 切换色弱模式 */
- toggleColorWeak() {
- docEle.classList.toggle('color-weak');
- this.colorWeak = docEle.classList.contains('color-weak');
- },
- /* 切换灰色模式 */
- toggleGrayMode() {
- docEle.classList.toggle('gray-mode');
- this.grayMode = docEle.classList.contains('gray-mode');
- },
- /* 切换显示logo */
- toggleShowLogo() {
- this.showLogo = !this.showLogo;
- },
- /* 切换显示多页签 */
- toggleShowTabs() {
- this.showTabs = !this.showTabs;
- },
- /* 切换显示多页签 */
- toggleShowBreadcrumb() {
- this.showBreadcrumb = !this.showBreadcrumb;
- },
- /* 切换固定头部和标签页 */
- toggleFixedHeader() {
- this.fixedHeader = !this.fixedHeader;
- },
- /* 切换固定底部 */
- toggleFixedFooter() {
- this.fixedFooter = !this.fixedFooter;
- },
- /* 切换固定底部 */
- toggleInvertedSider() {
- this.invertedSider = !this.invertedSider;
- },
- /* 切换固定底部 */
- toggleInvertedHeader() {
- this.invertedHeader = !this.invertedHeader;
- },
- },
+ state: (): AppStatus => {
+ return {
+ footerText: 'Copyright ©2023 Ench Admin',
+ collapsed: false,
+ fullScreen: false,
+ darkMode: false,
+ grayMode: false,
+ colorWeak: false,
+ darkTheme: null,
+ loadFlag: true,
+ showLogo: true,
+ showTabs: true,
+ showBreadcrumb: true,
+ fixedHeader: false,
+ fixedFooter: true,
+ invertedSider: false,
+ invertedHeader: false,
+ };
+ },
+ actions: {
+ /* 切换侧边栏收缩 */
+ toggleCollapse() {
+ this.collapsed = !this.collapsed;
+ },
+ /* 切换全屏 */
+ toggleFullScreen() {
+ if (!document.fullscreenElement) {
+ this.fullScreen = true;
+ document.documentElement.requestFullscreen();
+ } else if (document.exitFullscreen) {
+ this.fullScreen = false;
+ document.exitFullscreen();
+ }
+ },
+ /* 切换主题 亮/深色 */
+ toggleDarkMode() {
+ this.darkMode = !this.darkMode;
+ if (this.darkMode) {
+ this.darkTheme = darkTheme;
+ } else {
+ this.darkTheme = null;
+ }
+ },
+ /* 设置主题深色 */
+ setDarkMode(mode: boolean) {
+ if (mode) {
+ this.darkMode = true;
+ this.darkTheme = darkTheme;
+ } else {
+ this.darkMode = false;
+ this.darkTheme = null;
+ }
+ },
+ /**
+ * @description: 页面内容重载
+ * @param {number} delay - 延迟毫秒数
+ * @return {*}
+ */
+ async reloadPage(delay = 600) {
+ this.loadFlag = false;
+ await nextTick();
+ if (delay) {
+ setTimeout(() => {
+ this.loadFlag = true;
+ }, delay);
+ } else {
+ this.loadFlag = true;
+ }
+ },
+ /* 切换色弱模式 */
+ toggleColorWeak() {
+ docEle.classList.toggle('color-weak');
+ this.colorWeak = docEle.classList.contains('color-weak');
+ },
+ /* 切换灰色模式 */
+ toggleGrayMode() {
+ docEle.classList.toggle('gray-mode');
+ this.grayMode = docEle.classList.contains('gray-mode');
+ },
+ /* 切换显示logo */
+ toggleShowLogo() {
+ this.showLogo = !this.showLogo;
+ },
+ /* 切换显示多页签 */
+ toggleShowTabs() {
+ this.showTabs = !this.showTabs;
+ },
+ /* 切换显示多页签 */
+ toggleShowBreadcrumb() {
+ this.showBreadcrumb = !this.showBreadcrumb;
+ },
+ /* 切换固定头部和标签页 */
+ toggleFixedHeader() {
+ this.fixedHeader = !this.fixedHeader;
+ },
+ /* 切换固定底部 */
+ toggleFixedFooter() {
+ this.fixedFooter = !this.fixedFooter;
+ },
+ /* 切换固定底部 */
+ toggleInvertedSider() {
+ this.invertedSider = !this.invertedSider;
+ },
+ /* 切换固定底部 */
+ toggleInvertedHeader() {
+ this.invertedHeader = !this.invertedHeader;
+ },
+ },
});
diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts
index 6188e00..5a50454 100644
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -8,38 +8,44 @@ type ServiceEnvType = 'dev' | 'test' | 'prod';
/** 后台服务的环境配置 */
interface ServiceEnvConfig {
- /** 请求地址 */
- url: string;
- /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
- urlPattern: '/url-pattern';
- /** 另一个后端请求地址(有多个不同的后端服务时) */
- secondUrl: string;
- /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
- secondUrlPattern: '/second-url-pattern';
+ /** 请求地址 */
+ url: string;
+ /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
+ urlPattern: '/url-pattern';
+ /** 另一个后端请求地址(有多个不同的后端服务时) */
+ secondUrl: string;
+ /** 匹配路径的正则字符串, 用于拦截地址转发代理(任意以 /开头 + 字符串, 单个/不起作用) */
+ secondUrlPattern: '/second-url-pattern';
}
interface ImportMetaEnv {
- /** 项目基本地址 */
- readonly VITE_BASE_URL: string;
- /** 项目标题 */
- readonly VITE_APP_TITLE: string;
- /** 开启请求代理 */
- readonly VITE_HTTP_PROXY?: 'Y' | 'N';
- /** 是否开启打包依赖分析 */
- readonly VITE_VISUALIZER?: 'Y' | 'N';
- /** 是否开启打包压缩 */
- readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
- /** 压缩算法类型 */
- readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
- /** hash路由模式 */
- readonly VITE_HASH_ROUTE?: 'Y' | 'N';
- /** 路由加载模式 */
- readonly VITE_AUTH_ROUTE_MODE?: 'static' | 'dynamic';
- /** 本地存储前缀 */
- readonly VITE_STORAGE_PREFIX?: string;
- /** 后端服务的环境类型 */
- readonly VITE_SERVICE_ENV?: ServiceEnvType;
+ /** 项目基本地址 */
+ readonly VITE_BASE_URL: string;
+ /** 项目标题 */
+ readonly VITE_APP_NAME: string;
+ readonly VITE_APP_TITLE: string;
+ readonly VITE_APP_DESC: string;
+ /** 开启请求代理 */
+ readonly VITE_HTTP_PROXY?: 'Y' | 'N';
+ /** 是否开启打包依赖分析 */
+ readonly VITE_VISUALIZER?: 'Y' | 'N';
+ /** 是否开启打包压缩 */
+ readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
+ /** 压缩算法类型 */
+ readonly VITE_COMPRESS_TYPE?:
+ | 'gzip'
+ | 'brotliCompress'
+ | 'deflate'
+ | 'deflateRaw';
+ /** hash路由模式 */
+ readonly VITE_HASH_ROUTE?: 'Y' | 'N';
+ /** 路由加载模式 */
+ readonly VITE_AUTH_ROUTE_MODE?: 'static' | 'dynamic';
+ /** 本地存储前缀 */
+ readonly VITE_STORAGE_PREFIX?: string;
+ /** 后端服务的环境类型 */
+ readonly VITE_SERVICE_ENV?: ServiceEnvType;
}
interface ImportMeta {
- readonly env: ImportMetaEnv;
+ readonly env: ImportMetaEnv;
}
diff --git a/src/views/list/cardList/index.vue b/src/views/list/cardList/index.vue
index 53733cc..d36fceb 100644
--- a/src/views/list/cardList/index.vue
+++ b/src/views/list/cardList/index.vue
@@ -1,7 +1,15 @@
-
-
+
+
-
-
+
+
-
+
-
+
-
+
开通
- 生效中
+
+ 生效中
+
@@ -42,63 +67,63 @@ import { ref } from 'vue';
const currentRadio = ref(0);
const cardData = [
- {
- title: '一类',
- id: 1,
- children: [
- {
- id: 0,
- title: '卡片',
- content: '卡片内容',
- },
- {
- id: 1,
- title: '卡片2',
- content: '卡片2内容',
- },
- ],
- },
- {
- title: '二类',
- id: 2,
- children: [
- {
- id: 0,
- title: '卡片',
- content: '卡片内容',
- },
- {
- id: 1,
- title: '卡片2',
- content: '卡片2内容',
- },
- ],
- },
- {
- title: '三类',
- id: 3,
- children: [
- {
- id: 0,
- title: '卡片',
- content: '卡片内容',
- },
- {
- id: 1,
- title: '卡片2',
- content: '卡片2内容',
- },
- ],
- },
+ {
+ title: '一类',
+ id: 1,
+ children: [
+ {
+ id: 0,
+ title: '卡片',
+ content: '卡片内容',
+ },
+ {
+ id: 1,
+ title: '卡片2',
+ content: '卡片2内容',
+ },
+ ],
+ },
+ {
+ title: '二类',
+ id: 2,
+ children: [
+ {
+ id: 0,
+ title: '卡片',
+ content: '卡片内容',
+ },
+ {
+ id: 1,
+ title: '卡片2',
+ content: '卡片2内容',
+ },
+ ],
+ },
+ {
+ title: '三类',
+ id: 3,
+ children: [
+ {
+ id: 0,
+ title: '卡片',
+ content: '卡片内容',
+ },
+ {
+ id: 1,
+ title: '卡片2',
+ content: '卡片2内容',
+ },
+ ],
+ },
];
const radioDate = [
- {
- value: 0,
- label: '全部',
- },
- ...cardData.map((item) => {
- return { value: item.id, label: item.title };
- }),
+ {
+ value: 0,
+ label: '全部',
+ },
+ ...cardData.map((item) => {
+ return { value: item.id, label: item.title };
+ }),
];