blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-06 03:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

build(build): 移除vite-plugin-html

Browse Source
This commit is contained in:
chen.home 2023-03-21 23:46:07 +08:00
parent 32be17e913
commit 4d0dcf1695
14 changed files with 202 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
build/plugins/html.ts
View File

@ -1,13 +0,0 @@
import { createHtmlPlugin } from 'vite-plugin-html'; // https://github.com/vbenjs/vite-plugin-html/blob/main/README.zh_CN.md
export default (env: ImportMetaEnv) => {
return createHtmlPlugin({
minify: true, // 压缩HTML
inject: {
// 注入数据
data: {
title: env.VITE_APP_TITLE,
},
},
});
};

3
build/plugins/index.ts
View File

@ -1,7 +1,6 @@
import type { PluginOption } from 'vite'; import type { PluginOption } from 'vite';
import vue from './vue'; import vue from './vue';
import compress from './compress'; import compress from './compress';
import html from './html';
import unocss from '@unocss/vite'; import unocss from '@unocss/vite';
import visualizer from './visualizer'; import visualizer from './visualizer';
import unplugin from './unplugin'; import unplugin from './unplugin';
@ -13,7 +12,7 @@ import mock from './mock';
* @return {*} * @return {*}
*/ */
export function setVitePlugins(env: ImportMetaEnv) { export function setVitePlugins(env: ImportMetaEnv) {
const plugins = [...vue, html(env), unocss(), ...unplugin, mock]; const plugins = [...vue, unocss(), ...unplugin, mock];
// 是否压缩 // 是否压缩
if (env.VITE_COMPRESS_OPEN === 'Y') { if (env.VITE_COMPRESS_OPEN === 'Y') {
plugins.push(compress(env)); plugins.push(compress(env));

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title>%VITE_APP_TITLE%</title>
</head> </head>
<body> <body>
<div id="app"><div id="appLoading"></div></div> <div id="app"><div id="appLoading"></div></div>

30
mock/module/user.ts
View File

@ -246,7 +246,7 @@ const userRoutes = [
{ {
name: 'docments', name: 'docments',
path: '/docments', path: '/docments',
redirect: '/docments/not-found', redirect: '/docments/vue',
meta: { meta: {
title: '外链文档', title: '外链文档',
requiresAuth: true, requiresAuth: true,
@ -317,7 +317,7 @@ const userRoutes = [
{ {
name: 'error', name: 'error',
path: '/error', path: '/error',
redirect: '/error/not-found', redirect: '/error/404',
meta: { meta: {
title: '异常页', title: '异常页',
requiresAuth: true, requiresAuth: true,
@ -326,17 +326,8 @@ const userRoutes = [
}, },
children: [ children: [
{ {
name: 'not-found', name: '403',
path: '/error/not-found', path: '/error/403',
meta: {
title: '404页',
requiresAuth: true,
icon: 'icon-park-outline:error',
},
},
{
name: 'not-permission',
path: '/error/not-permission',
meta: { meta: {
title: '403页', title: '403页',
requiresAuth: true, requiresAuth: true,
@ -344,8 +335,17 @@ const userRoutes = [
}, },
}, },
{ {
name: 'service-error', name: '404',
path: '/error/service-error', path: '/error/404',
meta: {
title: '404页',
requiresAuth: true,
icon: 'icon-park-outline:error',
},
},
{
name: '500',
path: '/error/500',
meta: { meta: {
title: '500页', title: '500页',
requiresAuth: true, requiresAuth: true,

5
package.json
View File

@ -75,12 +75,11 @@
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"naive-ui": "^2.34.3", "naive-ui": "^2.34.3",
"rollup-plugin-visualizer": "^5.9.0", "rollup-plugin-visualizer": "^5.9.0",
"typescript": "^4.9.4", "typescript": "^5.0.2",
"unplugin-icons": "^0.15.3", "unplugin-icons": "^0.15.3",
"unplugin-vue-components": "^0.24.1", "unplugin-vue-components": "^0.24.1",
"vite": "^4.1.4", "vite": "^4.2.1",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^1.2.0" "vue-tsc": "^1.2.0"

199
src/layouts/components/tab/TabBar.vue
View File

@ -1,7 +1,18 @@
<template> <template>
<div class="wh-full flex items-end"> <div class="wh-full flex items-end">
<n-tabs type="card" size="small" :tabs-padding="15" :value="tabStore.currentTab" @close="handleClose"> <n-tabs
<n-tab v-for="item in tabStore.inherentTab" :key="item.path" :name="item.name" @click="toRoot"> type="card"
size="small"
:tabs-padding="15"
:value="tabStore.currentTab"
@close="handleClose"
>
<n-tab
v-for="item in tabStore.inherentTab"
:key="item.path"
:name="item.name"
@click="toRoot"
>
{{ item.title }} {{ item.title }}
</n-tab> </n-tab>
<n-tab <n-tab
@ -12,7 +23,9 @@
@click="handleTab(item)" @click="handleTab(item)"
@contextmenu="handleContextMenu($event, item)" @contextmenu="handleContextMenu($event, item)"
> >
{{ item.meta.title }} <div class="flex-x-center gap-2">
<e-icon :icon="item.meta.icon" /> {{ item.meta.title }}
</div>
</n-tab> </n-tab>
</n-tabs> </n-tabs>
<n-dropdown <n-dropdown
@ -29,100 +42,100 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useTabStore, useAppStore } from '@/store'; import { useTabStore, useAppStore } from '@/store';
import { useAppRouter } from '@/hooks'; import { useAppRouter } from '@/hooks';
import { RouteLocationNormalized } from 'vue-router'; import { RouteLocationNormalized } from 'vue-router';
import { ref, nextTick } from 'vue'; import { ref, nextTick } from 'vue';
import { renderIcon } from '@/utils'; import { renderIcon } from '@/utils';
const tabStore = useTabStore(); const tabStore = useTabStore();
const appStore = useAppStore(); const appStore = useAppStore();
const { routerPush, toRoot } = useAppRouter(); const { routerPush, toRoot } = useAppRouter();
function handleTab(route: RouteLocationNormalized) { function handleTab(route: RouteLocationNormalized) {
routerPush(route.path); routerPush(route.path);
} }
function handleClose(name: string) { function handleClose(name: string) {
tabStore.closeTab(name); tabStore.closeTab(name);
} }
const options = [ const options = [
{ {
label: '刷新', label: '刷新',
key: 'reload', key: 'reload',
icon: renderIcon('icon-park-outline:redo'), icon: renderIcon('icon-park-outline:redo'),
}, },
{ {
label: '关闭', label: '关闭',
key: 'closeCurrent', key: 'closeCurrent',
icon: renderIcon('icon-park-outline:close'), icon: renderIcon('icon-park-outline:close'),
}, },
{ {
label: '关闭其他', label: '关闭其他',
key: 'closeOther', key: 'closeOther',
icon: renderIcon('icon-park-outline:delete-four'), icon: renderIcon('icon-park-outline:delete-four'),
}, },
{ {
label: '关闭左侧', label: '关闭左侧',
key: 'closeLeft', key: 'closeLeft',
icon: renderIcon('icon-park-outline:to-left'), icon: renderIcon('icon-park-outline:to-left'),
}, },
{ {
label: '关闭右侧', label: '关闭右侧',
key: 'closeRight', key: 'closeRight',
icon: renderIcon('icon-park-outline:to-right'), icon: renderIcon('icon-park-outline:to-right'),
}, },
{ {
label: '全部关闭', label: '全部关闭',
key: 'closeAll', key: 'closeAll',
icon: renderIcon('icon-park-outline:fullwidth'), icon: renderIcon('icon-park-outline:fullwidth'),
}, },
]; ];
const showDropdown = ref(false); const showDropdown = ref(false);
const x = ref(0); const x = ref(0);
const y = ref(0); const y = ref(0);
const currentRoute = ref(); const currentRoute = ref();
function handleSelect(key: string) { function handleSelect(key: string) {
showDropdown.value = false; showDropdown.value = false;
type HandleFn = { type HandleFn = {
[key: string]: any; [key: string]: any;
}; };
const handleFn: HandleFn = { const handleFn: HandleFn = {
reload() { reload() {
appStore.reloadPage(); appStore.reloadPage();
}, },
closeCurrent() { closeCurrent() {
tabStore.closeTab(currentRoute.value.name); tabStore.closeTab(currentRoute.value.name);
}, },
closeOther() { closeOther() {
tabStore.closeOtherTabs(currentRoute.value.name); tabStore.closeOtherTabs(currentRoute.value.name);
}, },
closeLeft() { closeLeft() {
tabStore.closeLeftTabs(currentRoute.value.name); tabStore.closeLeftTabs(currentRoute.value.name);
}, },
closeRight() { closeRight() {
tabStore.closeRightTabs(currentRoute.value.name); tabStore.closeRightTabs(currentRoute.value.name);
}, },
closeAll() { closeAll() {
tabStore.closeAllTabs(); tabStore.closeAllTabs();
}, },
}; };
handleFn[key](); handleFn[key]();
} }
function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) { function handleContextMenu(e: MouseEvent, route: RouteLocationNormalized) {
e.preventDefault(); e.preventDefault();
currentRoute.value = route; currentRoute.value = route;
showDropdown.value = false; showDropdown.value = false;
nextTick().then(() => { nextTick().then(() => {
showDropdown.value = true; showDropdown.value = true;
x.value = e.clientX; x.value = e.clientX;
y.value = e.clientY; y.value = e.clientY;
}); });
} }
function onClickoutside() { function onClickoutside() {
showDropdown.value = false; showDropdown.value = false;
} }
</script> </script>
<style scoped></style> <style scoped></style>

19
src/router/guard/index.ts
View File

@ -1,11 +1,13 @@
import type { Router } from 'vue-router'; import type { Router } from 'vue-router';
import { createPermissionGuard } from './permission'; import { createPermissionGuard } from './permission';
import { useAppInfo } from '@/hooks'; import { useAppInfo } from '@/hooks';
import { useRouteStore, useTabStore } from '@/store';
const { title } = useAppInfo(); const { title } = useAppInfo();
export function setupRouterGuard(router: Router) { export function setupRouterGuard(router: Router) {
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from, next) => {
// 判断是否是外链，如果是直接打开网页并拦截跳转 // 判断是否是外链，如果是直接打开网页并拦截跳转
if (to.meta.herf) { if (to.meta.herf) {
window.open(to.meta.herf); window.open(to.meta.herf);
@ -14,9 +16,20 @@ export function setupRouterGuard(router: Router) {
// 开始 loadingBar // 开始 loadingBar
window.$loadingBar?.start(); window.$loadingBar?.start();
// 权限操作 // 权限操作
await createPermissionGuard(to, from); await createPermissionGuard(to, from, next);
}); });
router.beforeResolve(async (to) => {
const routeStore = useRouteStore();
const tabStore = useTabStore();
// 设置菜单高亮
routeStore.setActiveMenu(to.meta.activeMenu ?? to.fullPath);
// 添加tabs
tabStore.addTab(to);
// 设置高亮标签;
tabStore.setCurrentTab(to.name as string);
})
router.afterEach((to) => { router.afterEach((to) => {
// 修改网页标题 // 修改网页标题
document.title = `${to.meta.title} - ${title}`; document.title = `${to.meta.title} - ${title}`;

58
src/router/guard/permission.ts
View File

@ -1,54 +1,50 @@
import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'; import { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
import { getToken } from '@/utils/auth'; import { getToken } from '@/utils/auth';
import { useRouteStore, useTabStore } from '@/store'; import { useRouteStore } from '@/store';
export async function createPermissionGuard( export async function createPermissionGuard(
to: RouteLocationNormalized, to: RouteLocationNormalized,
from: RouteLocationNormalized, from: RouteLocationNormalized,
next: NavigationGuardNext
) { ) {
console.log("🚀 ~ file: permission.ts:9 ~ to:", to)
const routeStore = useRouteStore(); const routeStore = useRouteStore();
const tabStore = useTabStore();
// 判断有无TOKEN,登录鉴权 // 判断有无TOKEN,登录鉴权
const isLogin = Boolean(getToken()); const isLogin = Boolean(getToken());
if (!isLogin) { if (!isLogin) {
const redirect = to.name === 'not-found' ? undefined : to.fullPath; if (to.name == 'login') {
return { path: '/login', query: { redirect } }; next()
}
if (to.name !== 'login') {
const redirect = to.name === '404' ? undefined : to.fullPath;
next({ path: '/login', query: { redirect } });
}
return false
} }
// 判断路由有无进行初始化 // 判断路由有无进行初始化
if (!routeStore.isInitAuthRoute) { if (!routeStore.isInitAuthRoute) {
await routeStore.initAuthRoute(); await routeStore.initAuthRoute();
} // 动态路由加载完回到根路由
if (to.name === '404' && to.redirectedFrom) {
// 动态路由加载完回到根路由 // 等待权限路由加载好了，回到之前的路由,否则404
if (to.name === 'not-found' && to.redirectedFrom) { const path = to.redirectedFrom?.fullPath;
// 等待权限路由加载好了，回到之前的路由,否则404 next({ path, replace: true, query: to.query, hash: to.hash });
const path = to.redirectedFrom.fullPath; return false;
return { path, replace: true, query: to.query, hash: to.hash }; }
}
// 判断当前页是否在login,则定位去首页
if (to.name === 'login') {
return { path: '/appRoot' }
} }
// 权限路由已经加载，仍然未找到，重定向到404 // 权限路由已经加载，仍然未找到，重定向到404
if (to.name === 'not-found') { // if (to.name === '404') {
return { name: 'not-found', replace: true }; // next({ name: '404', replace: true });
// return false;
// }
// 判断当前页是否在login,则定位去首页
if (to.name === 'login') {
next({ path: '/appRoot' })
return false;
} }
// 设置菜单高亮 next()
if (to.meta.activeMenu) {
routeStore.setActiveMenu(to.meta.activeMenu);
} else {
routeStore.setActiveMenu(to.fullPath);
}
// 添加tabs
tabStore.addTab(to);
// 设置高亮标签;
tabStore.setCurrentTab(to.name as string);
} }

63
src/router/routes/index.ts
View File

@ -9,37 +9,6 @@ export const routes: RouteRecordRaw[] = [
redirect: '/appRoot', redirect: '/appRoot',
component: BasicLayout, component: BasicLayout,
children: [ children: [
{
path: '/not-found',
name: 'not-found',
component: () => import('@/views/error/not-found/index.vue'),
meta: {
title: '找不到页面',
icon: 'icon-park-outline:ghost',
},
},
{
path: '/not-permission',
name: 'not-permission',
component: () => import('@/views/error/not-permission/index.vue'),
meta: {
title: '用户无权限',
icon: 'icon-park-outline:error',
},
},
{
path: '/service-error',
name: 'service-error',
component: () => import('@/views/error/service-error/index.vue'),
meta: {
title: '服务器错误',
icon: 'icon-park-outline:close-wifi',
},
},
{
path: '/:pathMatch(.*)*',
redirect: '/not-found',
},
], ],
}, },
{ {
@ -50,4 +19,36 @@ export const routes: RouteRecordRaw[] = [
title: '登录', title: '登录',
}, },
}, },
{
path: '/403',
name: '403',
component: () => import('@/views/error/403/index.vue'),
meta: {
title: '用户无权限',
icon: 'icon-park-outline:error',
},
},
{
path: '/404',
name: '404',
component: () => import('@/views/error/404/index.vue'),
meta: {
title: '找不到页面',
icon: 'icon-park-outline:ghost',
},
},
{
path: '/500',
name: '500',
component: () => import('@/views/error/500/index.vue'),
meta: {
title: '服务器错误',
icon: 'icon-park-outline:close-wifi',
},
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
},
]; ];

2
src/store/modules/route.ts
View File

@ -1,5 +1,5 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { renderIcon, getUserInfo ,isEmpty} from '@/utils'; import { renderIcon, getUserInfo} from '@/utils';
import { MenuOption } from 'naive-ui'; import { MenuOption } from 'naive-ui';
import { createDynamicRoutes } from '@/router/guard/dynamic'; import { createDynamicRoutes } from '@/router/guard/dynamic';
import { router } from '@/router'; import { router } from '@/router';

2
src/store/modules/tab.ts
View File

@ -23,7 +23,7 @@ export const useTabStore = defineStore('tab-store', {
}, },
], ],
tabs: [], tabs: [],
tabWhiteList: ['not-found', 'not-permission', 'service-error', 'login'], tabWhiteList: ['404', '403', '500', 'login'],
currentTab: 'dashboard_workbench', currentTab: 'dashboard_workbench',
}; };
}, },

0
src/views/error/not-permission/index.vue → src/views/error/403/index.vue
View File

0
src/views/error/not-found/index.vue → src/views/error/404/index.vue
View File

0
src/views/error/service-error/index.vue → src/views/error/500/index.vue
View File