mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 12:44:27 +08:00
feat(project): 重构载入动画和系统结构样式
This commit is contained in:
chen.home
parent
264cc119cb
commit
c5705f7032
5
.env
5
.env
@ -1,7 +1,10 @@
|
||||
# 项目根目录
|
||||
VITE_BASE_URL=/
|
||||
# 项目名称
|
||||
VITE_APP_TITLE = Ench Admin
|
||||
VITE_APP_NAME=EnchAdmin
|
||||
VITE_APP_TITLE=Ench管理系统
|
||||
VITE_APP_DESC=EnchAdmin是一个中后台管理系统模版
|
||||
|
||||
# 路由模式
|
||||
VITE_HASH_ROUTE = Y
|
||||
# 权限路由模式: static ｜ dynamic
|
||||
|
||||
14
index.html
14
index.html
@ -3,23 +3,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||
<link rel="stylesheet" href="/resource/loading.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading-container">
|
||||
<div class="app-loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<span class="loading-title"><%= title %>管理系统</span>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<div id="app"><div id="appLoading"></div></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
70
package.json
70
package.json
@ -31,54 +31,54 @@
|
||||
"./src/**/*.{vue,js,jsx,ts,tsx,json}": "eslint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^9.3.0",
|
||||
"@wangeditor/editor": "^5.1.21",
|
||||
"@vueuse/core": "^9.10.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^0.27.2",
|
||||
"echarts": "^5.4.0",
|
||||
"md-editor-v3": "^2.3.0",
|
||||
"pinia": "^2.0.20",
|
||||
"axios": "^1.2.2",
|
||||
"echarts": "^5.4.1",
|
||||
"md-editor-v3": "^2.7.2",
|
||||
"pinia": "^2.0.28",
|
||||
"pinia-plugin-persist": "^1.0.0",
|
||||
"vue": "^3.2.37",
|
||||
"vue": "^3.2.45",
|
||||
"vue-qr": "^4.0.9",
|
||||
"vue-router": "^4.1.4"
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.0.3",
|
||||
"@commitlint/config-conventional": "^17.0.3",
|
||||
"@iconify-json/icon-park-outline": "^1.1.5",
|
||||
"@iconify/vue": "^3.2.1",
|
||||
"@types/mockjs": "^1.0.6",
|
||||
"@types/node": "^18.7.13",
|
||||
"@typescript-eslint/eslint-plugin": "^5.35.1",
|
||||
"@typescript-eslint/parser": "^5.35.1",
|
||||
"@unocss/preset-attributify": "^0.45.18",
|
||||
"@unocss/preset-uno": "^0.45.18",
|
||||
"@unocss/vite": "^0.45.18",
|
||||
"@vitejs/plugin-vue": "^3.0.3",
|
||||
"@vitejs/plugin-vue-jsx": "^2.0.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.0",
|
||||
"commitizen": "^4.2.5",
|
||||
"@commitlint/cli": "^17.4.1",
|
||||
"@commitlint/config-conventional": "^17.4.0",
|
||||
"@iconify-json/icon-park-outline": "^1.1.9",
|
||||
"@iconify/vue": "^4.0.2",
|
||||
"@types/mockjs": "^1.0.7",
|
||||
"@types/node": "^18.11.18",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.1",
|
||||
"@typescript-eslint/parser": "^5.48.1",
|
||||
"@unocss/preset-attributify": "^0.48.3",
|
||||
"@unocss/preset-uno": "^0.48.3",
|
||||
"@unocss/vite": "^0.48.3",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"commitizen": "^4.2.6",
|
||||
"cross-env": "^7.0.3",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"cz-customizable": "^6.9.1",
|
||||
"eslint": "^8.22.0",
|
||||
"cz-customizable": "^7.0.0",
|
||||
"eslint": "^8.31.0",
|
||||
"eslint-import-resolver-alias": "^1.1.2",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-vue": "^9.4.0",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^13.1.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"naive-ui": "^2.32.2",
|
||||
"rollup-plugin-visualizer": "^5.8.0",
|
||||
"typescript": "^4.7.4",
|
||||
"unplugin-icons": "^0.14.8",
|
||||
"unplugin-vue-components": "^0.22.4",
|
||||
"vite": "^3.0.9",
|
||||
"naive-ui": "^2.34.3",
|
||||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"typescript": "^4.9.4",
|
||||
"unplugin-icons": "^0.15.1",
|
||||
"unplugin-vue-components": "^0.22.12",
|
||||
"vite": "^4.0.4",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vue-tsc": "^0.40.1"
|
||||
"vue-tsc": "^1.0.24"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
body{
|
||||
margin: 0;
|
||||
}
|
||||
#loading-container{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10vh;
|
||||
position: fixed;
|
||||
background-color: aliceblue;
|
||||
z-index: 1;
|
||||
}
|
||||
.app-loading {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
animation: app-loading-y0fdc1 2s infinite ease;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.loading-title{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.app-loading > div {
|
||||
background-color: rgba(0, 77, 255, 0.2);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
border: 2px solid #004dff;
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(1) {
|
||||
transform: translateZ(-44px) rotateY(180deg);
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(2) {
|
||||
transform: rotateY(-270deg) translateX(50%);
|
||||
transform-origin: top right;
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(3) {
|
||||
transform: rotateY(270deg) translateX(-50%);
|
||||
transform-origin: center left;
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(4) {
|
||||
transform: rotateX(90deg) translateY(-50%);
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(5) {
|
||||
transform: rotateX(-90deg) translateY(50%);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.app-loading div:nth-of-type(6) {
|
||||
transform: translateZ(44px);
|
||||
}
|
||||
|
||||
@keyframes app-loading-y0fdc1 {
|
||||
0% {
|
||||
transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
|
||||
}
|
||||
}
|
||||
33
src/App.vue
33
src/App.vue
@ -1,15 +1,3 @@
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from './store';
|
||||
import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
|
||||
import json from './theme.json';
|
||||
|
||||
const locale = zhCN;
|
||||
const dateLocale = dateZhCN;
|
||||
const appStore = useAppStore();
|
||||
|
||||
const themeOverrides: GlobalThemeOverrides = json;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider
|
||||
class="wh-full"
|
||||
@ -22,4 +10,25 @@ const themeOverrides: GlobalThemeOverrides = json;
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from './store';
|
||||
import {
|
||||
zhCN,
|
||||
dateZhCN,
|
||||
GlobalThemeOverrides,
|
||||
useOsTheme,
|
||||
darkTheme,
|
||||
} from 'naive-ui';
|
||||
import themeConfig from './theme.json';
|
||||
|
||||
const locale = zhCN;
|
||||
const dateLocale = dateZhCN;
|
||||
const appStore = useAppStore();
|
||||
|
||||
const osThemeRef = useOsTheme();
|
||||
appStore.setDarkMode(osThemeRef.value === 'dark');
|
||||
|
||||
const themeOverrides: GlobalThemeOverrides = themeConfig;
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
241
src/components/common/appLoading.vue
Normal file
241
src/components/common/appLoading.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div id="loading-container">
|
||||
<div class="boxes">
|
||||
<div class="box">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
<div class="box">
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-28px font-500 text-#646464">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppInfo } from '@/hooks';
|
||||
const { title } = useAppInfo();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#loading-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10vh;
|
||||
position: fixed;
|
||||
background-color: aliceblue;
|
||||
z-index: 1;
|
||||
}
|
||||
.boxes {
|
||||
--size: 48px;
|
||||
--duration: 800ms;
|
||||
height: calc(var(--size) * 2);
|
||||
width: calc(var(--size) * 3);
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform-origin: 50% 50%;
|
||||
margin-top: calc(var(--size) * 1.5 * -1);
|
||||
transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
|
||||
}
|
||||
|
||||
.boxes .box {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.boxes .box:nth-child(1) {
|
||||
transform: translate(100%, 0);
|
||||
-webkit-animation: box1 var(--duration) linear infinite;
|
||||
animation: box1 var(--duration) linear infinite;
|
||||
}
|
||||
|
||||
.boxes .box:nth-child(2) {
|
||||
transform: translate(0, 100%);
|
||||
-webkit-animation: box2 var(--duration) linear infinite;
|
||||
animation: box2 var(--duration) linear infinite;
|
||||
}
|
||||
|
||||
.boxes .box:nth-child(3) {
|
||||
transform: translate(100%, 100%);
|
||||
-webkit-animation: box3 var(--duration) linear infinite;
|
||||
animation: box3 var(--duration) linear infinite;
|
||||
}
|
||||
|
||||
.boxes .box:nth-child(4) {
|
||||
transform: translate(200%, 0);
|
||||
-webkit-animation: box4 var(--duration) linear infinite;
|
||||
animation: box4 var(--duration) linear infinite;
|
||||
}
|
||||
|
||||
.boxes .box > div {
|
||||
--background: #5c8df6;
|
||||
--top: auto;
|
||||
--right: auto;
|
||||
--bottom: auto;
|
||||
--left: auto;
|
||||
--translateZ: calc(var(--size) / 2);
|
||||
--rotateY: 0deg;
|
||||
--rotateX: 0deg;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--background);
|
||||
top: var(--top);
|
||||
right: var(--right);
|
||||
bottom: var(--bottom);
|
||||
left: var(--left);
|
||||
transform: rotateY(var(--rotateY)) rotateX(var(--rotateX))
|
||||
translateZ(var(--translateZ));
|
||||
}
|
||||
|
||||
.boxes .box > div:nth-child(1) {
|
||||
--top: 0;
|
||||
--left: 0;
|
||||
}
|
||||
|
||||
.boxes .box > div:nth-child(2) {
|
||||
--background: #145af2;
|
||||
--right: 0;
|
||||
--rotateY: 90deg;
|
||||
}
|
||||
|
||||
.boxes .box > div:nth-child(3) {
|
||||
--background: #447cf5;
|
||||
--rotateX: -90deg;
|
||||
}
|
||||
|
||||
.boxes .box > div:nth-child(4) {
|
||||
--background: #dbe3f4;
|
||||
--top: 0;
|
||||
--left: 0;
|
||||
--translateZ: calc(var(--size) * 3 * -1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes box1 {
|
||||
0%,
|
||||
50% {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(200%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box1 {
|
||||
0%,
|
||||
50% {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(200%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes box2 {
|
||||
0% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box2 {
|
||||
0% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes box3 {
|
||||
0%,
|
||||
50% {
|
||||
transform: translate(100%, 100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box3 {
|
||||
0%,
|
||||
50% {
|
||||
transform: translate(100%, 100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes box4 {
|
||||
0% {
|
||||
transform: translate(200%, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(200%, 100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes box4 {
|
||||
0% {
|
||||
transform: translate(200%, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(200%, 100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(100%, 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,3 +3,4 @@ export * from './useBoolean';
|
||||
export * from './useLoading';
|
||||
export * from './useEcharts';
|
||||
export * from './useClipBoard';
|
||||
export * from './useSystem';
|
||||
|
||||
23
src/hooks/useSystem.ts
Normal file
23
src/hooks/useSystem.ts
Normal file
@ -0,0 +1,23 @@
|
||||
interface AppInfo {
|
||||
/** 项目名称 */
|
||||
name: string;
|
||||
/** 项目标题 */
|
||||
title: string;
|
||||
/** 项目描述 */
|
||||
desc: string;
|
||||
}
|
||||
|
||||
/** 项目信息 */
|
||||
export function useAppInfo(): AppInfo {
|
||||
const {
|
||||
VITE_APP_NAME: name,
|
||||
VITE_APP_TITLE: title,
|
||||
VITE_APP_DESC: desc,
|
||||
} = import.meta.env;
|
||||
|
||||
return {
|
||||
name,
|
||||
title,
|
||||
desc,
|
||||
};
|
||||
}
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<n-layout has-sider class="wh-full">
|
||||
<n-layout
|
||||
has-sider
|
||||
class="wh-full"
|
||||
>
|
||||
<n-layout-sider
|
||||
bordered
|
||||
:collapsed="appStore.collapsed"
|
||||
@ -11,7 +14,10 @@
|
||||
<Logo v-if="appStore.showLogo" />
|
||||
<Menu />
|
||||
</n-layout-sider>
|
||||
<n-layout class="h-full" embedded :native-scrollbar="false">
|
||||
<n-layout
|
||||
class="h-full"
|
||||
embedded
|
||||
>
|
||||
<n-layout-header
|
||||
:position="appStore.fixedHeader ? 'absolute' : 'static'"
|
||||
:inverted="appStore.invertedHeader"
|
||||
@ -43,26 +49,42 @@
|
||||
>
|
||||
<TabBar class="h-45px" />
|
||||
</n-layout-header>
|
||||
<n-layout-content class="bg-transparent">
|
||||
<n-layout-content
|
||||
class="bg-transparent"
|
||||
style="min-height: calc(100% - 105px); height: calc(100% - 105px)"
|
||||
content-style="padding: 16px;min-height:100%;"
|
||||
>
|
||||
<div
|
||||
class="p-16px"
|
||||
class="h-full"
|
||||
:class="{
|
||||
'p-b-56px': appStore.fixedFooter,
|
||||
'p-b-40px': appStore.fixedFooter,
|
||||
'p-t-122px': appStore.fixedHeader && appStore.showTabs,
|
||||
'p-t-77px': appStore.fixedHeader && !appStore.showTabs,
|
||||
}"
|
||||
>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition name="fade-slide" mode="out-in">
|
||||
<transition
|
||||
name="fade-slide"
|
||||
mode="out-in"
|
||||
>
|
||||
<keep-alive :include="routeStore.cacheRoutes">
|
||||
<component :is="Component" v-if="appStore.loadFlag" :key="route.fullPath" />
|
||||
<component
|
||||
:is="Component"
|
||||
v-if="appStore.loadFlag"
|
||||
:key="route.fullPath"
|
||||
/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</n-layout-content>
|
||||
<BackTop />
|
||||
<n-layout-footer :position="appStore.fixedFooter ? 'absolute' : 'static'" bordered class="flex-center h-40px">
|
||||
<n-layout-footer
|
||||
:position="appStore.fixedFooter ? 'absolute' : 'static'"
|
||||
bordered
|
||||
class="flex-center h-40px"
|
||||
style="margin-top: auto"
|
||||
>
|
||||
{{ appStore.footerText }}
|
||||
</n-layout-footer>
|
||||
</n-layout>
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
<template>
|
||||
<n-el
|
||||
tag="div"
|
||||
class="el h-full px-3 cursor-pointer"
|
||||
>
|
||||
<n-space
|
||||
align="center"
|
||||
class="hover:bg-hex-F3F4F6 hover:shadow-inner h-full px-3 cursor-pointer transition duration-300 dark:bg-hex-f90"
|
||||
class="h-full"
|
||||
>
|
||||
<slot />
|
||||
</n-space>
|
||||
</n-el>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.el {
|
||||
color: var(--n-text-color);
|
||||
background-color: var(--n-color);
|
||||
transition: 0.3s var(--cubic-bezier-ease-in-out);
|
||||
}
|
||||
.el:hover {
|
||||
background-color: var(--button-color-2-hover);
|
||||
color: var(--n-text-color-hover);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,24 @@
|
||||
<template>
|
||||
<div class="h-60px text-2xl flex-center overflow-hidden cursor-pointer" @click="toRoot">
|
||||
<SvgIcon name="logo" :size="28" />
|
||||
<span v-show="!appStore.collapsed" class="mx-4">{{ appStore.title }}</span>
|
||||
<div
|
||||
class="h-60px text-2xl flex-center overflow-hidden cursor-pointer"
|
||||
@click="toRoot"
|
||||
>
|
||||
<SvgIcon
|
||||
name="logo"
|
||||
:size="28"
|
||||
/>
|
||||
<span
|
||||
v-show="!appStore.collapsed"
|
||||
class="mx-4"
|
||||
>{{ name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAppStore } from '@/store';
|
||||
import { useAppRouter } from '@/hooks';
|
||||
import { useAppInfo } from '@/hooks';
|
||||
const { name } = useAppInfo();
|
||||
const { toRoot } = useAppRouter();
|
||||
const appStore = useAppStore();
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<n-menu
|
||||
:collapsed="appStore.collapsed"
|
||||
:collapsed-width="64"
|
||||
:collapsed-icon-size="24"
|
||||
:indent="20"
|
||||
accordion
|
||||
:options="routesStore.menus"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
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';
|
||||
@ -7,6 +8,9 @@ import { setupStore } from './store';
|
||||
async function setupApp() {
|
||||
// 引入静态资源
|
||||
setupAssets();
|
||||
// 载入全局loading加载状态
|
||||
const appLoading = createApp(AppLoading);
|
||||
appLoading.mount('#appLoading');
|
||||
// 创建vue实例
|
||||
const app = createApp(App);
|
||||
// 安装pinia全局状态库
|
||||
@ -15,10 +19,5 @@ async function setupApp() {
|
||||
await setupRouter(app);
|
||||
// 挂载
|
||||
await app.mount('#app');
|
||||
closeAppLoading();
|
||||
}
|
||||
setupApp();
|
||||
|
||||
function closeAppLoading() {
|
||||
document.querySelector('#loading-container')!.remove();
|
||||
}
|
||||
|
||||
@ -2,7 +2,8 @@ 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) => {
|
||||
@ -18,7 +19,7 @@ export function setupRouterGuard(router: Router) {
|
||||
});
|
||||
router.afterEach((to) => {
|
||||
// 修改网页标题
|
||||
document.title = `${to.meta.title} — ${appTitle}`;
|
||||
document.title = `${to.meta.title} - ${title}`;
|
||||
// 结束 loadingBar
|
||||
window.$loadingBar?.finish();
|
||||
});
|
||||
|
||||
@ -3,8 +3,7 @@ import { nextTick } from 'vue';
|
||||
import { darkTheme, GlobalTheme } from 'naive-ui';
|
||||
|
||||
interface AppStatus {
|
||||
title: string;
|
||||
footerText: string;
|
||||
readonly footerText: string;
|
||||
collapsed: boolean;
|
||||
fullScreen: boolean;
|
||||
darkMode: boolean;
|
||||
@ -26,8 +25,7 @@ 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',
|
||||
footerText: 'Copyright ©2023 Ench Admin',
|
||||
collapsed: false,
|
||||
fullScreen: false,
|
||||
darkMode: false,
|
||||
@ -68,6 +66,16 @@ export const useAppStore = defineStore('app-store', {
|
||||
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 - 延迟毫秒数
|
||||
|
||||
8
src/typings/env.d.ts
vendored
8
src/typings/env.d.ts
vendored
@ -21,7 +21,9 @@ interface ImportMetaEnv {
|
||||
/** 项目基本地址 */
|
||||
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';
|
||||
/** 是否开启打包依赖分析 */
|
||||
@ -29,7 +31,11 @@ interface ImportMetaEnv {
|
||||
/** 是否开启打包压缩 */
|
||||
readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
|
||||
/** 压缩算法类型 */
|
||||
readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
|
||||
readonly VITE_COMPRESS_TYPE?:
|
||||
| 'gzip'
|
||||
| 'brotliCompress'
|
||||
| 'deflate'
|
||||
| 'deflateRaw';
|
||||
/** hash路由模式 */
|
||||
readonly VITE_HASH_ROUTE?: 'Y' | 'N';
|
||||
/** 路由加载模式 */
|
||||
|
||||
@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<n-radio-group v-model:value="currentRadio" name="radiobuttongroup1">
|
||||
<n-radio-button v-for="item in radioDate" :key="item.value" :value="item.value" :label="item.label" />
|
||||
<n-radio-group
|
||||
v-model:value="currentRadio"
|
||||
name="radiobuttongroup1"
|
||||
>
|
||||
<n-radio-button
|
||||
v-for="item in radioDate"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
:label="item.label"
|
||||
/>
|
||||
</n-radio-group>
|
||||
<n-card
|
||||
v-for="item in cardData"
|
||||
@ -11,23 +19,40 @@
|
||||
:title="item.title"
|
||||
content-style="padding: 0;"
|
||||
>
|
||||
<n-grid :x-gap="8" :y-gap="8">
|
||||
<n-gi v-for="card in item.children" :key="card.id" :span="6">
|
||||
<n-grid
|
||||
:x-gap="8"
|
||||
:y-gap="8"
|
||||
:cols="4"
|
||||
>
|
||||
<n-gi
|
||||
v-for="card in item.children"
|
||||
:key="card.id"
|
||||
>
|
||||
<n-card hoverable>
|
||||
<n-thing content-indented :title="card.title" description="09/30/2022" :content="card.content">
|
||||
<n-thing
|
||||
content-indented
|
||||
:title="card.title"
|
||||
description="09/30/2022"
|
||||
:content="card.content"
|
||||
>
|
||||
<template #avatar>
|
||||
<n-icon color="#de4307" size="24">
|
||||
<n-icon
|
||||
color="#de4307"
|
||||
size="24"
|
||||
>
|
||||
<i-icon-park-outline-chart-histogram />
|
||||
</n-icon>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-space justify="space-between">
|
||||
<span></span>
|
||||
<span />
|
||||
<n-button>开通</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-tag type="info">生效中</n-tag>
|
||||
<n-tag type="info">
|
||||
生效中
|
||||
</n-tag>
|
||||
</template>
|
||||
</n-thing>
|
||||
</n-card>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user