mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-05 04:22:49 +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
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
return createHtmlPlugin({
|
||||
minify: true, // 压缩HTML
|
||||
inject: {
|
||||
// 注入数据
|
||||
data: {
|
||||
title: env.VITE_APP_TITLE,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
32
index.html
32
index.html
@ -1,25 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><%= title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
@ -71,20 +93,20 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
Breadcrumb,
|
||||
CollapaseButton,
|
||||
Menu,
|
||||
Logo,
|
||||
FullScreen,
|
||||
DarkMode,
|
||||
Setting,
|
||||
Github,
|
||||
Notices,
|
||||
UserCenter,
|
||||
Search,
|
||||
Reload,
|
||||
TabBar,
|
||||
BackTop,
|
||||
Breadcrumb,
|
||||
CollapaseButton,
|
||||
Menu,
|
||||
Logo,
|
||||
FullScreen,
|
||||
DarkMode,
|
||||
Setting,
|
||||
Github,
|
||||
Notices,
|
||||
UserCenter,
|
||||
Search,
|
||||
Reload,
|
||||
TabBar,
|
||||
BackTop,
|
||||
} from '../components';
|
||||
import { useAppStore, useRouteStore } from '@/store';
|
||||
|
||||
@ -94,9 +116,9 @@ const appStore = useAppStore();
|
||||
|
||||
<style scoped>
|
||||
.n-layout-sider {
|
||||
box-shadow: 2px 0 8px #1d23290d;
|
||||
box-shadow: 2px 0 8px #1d23290d;
|
||||
}
|
||||
.n-layout-header {
|
||||
box-shadow: 0 1px 2px #00152914;
|
||||
box-shadow: 0 1px 2px #00152914;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
<template>
|
||||
<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"
|
||||
<n-el
|
||||
tag="div"
|
||||
class="el h-full px-3 cursor-pointer"
|
||||
>
|
||||
<slot />
|
||||
</n-space>
|
||||
<n-space
|
||||
align="center"
|
||||
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"
|
||||
@ -22,7 +21,7 @@ const appStore = useAppStore();
|
||||
const routesStore = useRouteStore();
|
||||
|
||||
const handleClickMenu = (key: string, item: MenuOption) => {
|
||||
routerPush(key);
|
||||
routerPush(key);
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
29
src/main.ts
29
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();
|
||||
}
|
||||
|
||||
@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
64
src/typings/env.d.ts
vendored
64
src/typings/env.d.ts
vendored
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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 };
|
||||
}),
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user