initHeader
This commit is contained in:
@@ -1,2 +1,6 @@
|
||||
NODE_ENV='development'
|
||||
|
||||
VITE_TITLE=""
|
||||
# 路由模式
|
||||
# Optional: hash | history
|
||||
VITE_ROUTER_MODE = hash
|
||||
@@ -1,2 +1,6 @@
|
||||
NODE_ENV='production'
|
||||
|
||||
VITE_TITLE=""
|
||||
# 路由模式
|
||||
# Optional: hash | history
|
||||
VITE_ROUTER_MODE = hash
|
||||
@@ -37,6 +37,8 @@
|
||||
"sass": "^1.77.8",
|
||||
"tailwindcss": "^3.4.7",
|
||||
"typescript": "~5.4.0",
|
||||
"unplugin-auto-import": "^0.18.2",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"vite": "^5.3.1",
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<!--element-plus语言国际化，全局修改为中文-->
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view/>
|
||||
<el-config-provider :locale='zhCn'>
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script lang='ts' setup>
|
||||
defineOptions({
|
||||
name: "App"
|
||||
name: 'App',
|
||||
})
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
@@ -15,4 +15,6 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
document.getElementById('loadingPage')?.remove()
|
||||
|
||||
</script>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import createAxios from '@/utils/http'
|
||||
import { useUserInfoStore } from '@/stores/user'
|
||||
import { useUserInfoStore } from '@/stores/modules/user'
|
||||
import { sm3Digest } from '@/assets/commjs/sm3.js'
|
||||
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
|
||||
|
||||
|
||||
BIN
frontend/src/assets/images/logo.png
Normal file
BIN
frontend/src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -3,6 +3,7 @@
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
|
||||
/* 申明字体为东方大楷 */
|
||||
@font-face {
|
||||
font-family: 'DongFangDaKai';
|
||||
@@ -16,4 +17,3 @@
|
||||
font-family: "MFBanHei"; /* Project id 1513211 */
|
||||
src: url('@/assets/font/MFBanHei.ttf?t=1643094287456') format('truetype');
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
// 用户信息
|
||||
export const USER_INFO = 'userInfo'
|
||||
|
||||
// 用户信息
|
||||
export const TABS_INFO = 'tabsInfo'
|
||||
|
||||
// WEB端布局配置
|
||||
export const STORE_CONFIG = 'storeConfig'
|
||||
|
||||
|
||||
92
frontend/src/layouts/CnHeader/index.vue
Normal file
92
frontend/src/layouts/CnHeader/index.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<!--主界面的头部，包含了logo、导航、用户信息-->
|
||||
<template>
|
||||
<el-menu
|
||||
:default-active='activeIndex'
|
||||
popper-effect='light'
|
||||
mode='horizontal'
|
||||
:router='false'
|
||||
class='el-menu-njcn text-center'
|
||||
:ellipsis='false'
|
||||
background-color='var(--el-color-primary)'
|
||||
text-color='#fff'
|
||||
active-text-color='#ffd04b'
|
||||
@select='handleSelect'
|
||||
:style="{height:headerHeight+'px'}"
|
||||
>
|
||||
<img
|
||||
class='float-left'
|
||||
:style="{height:headerHeight+'px'}"
|
||||
src='@/assets/images/logo.png'
|
||||
/>
|
||||
<el-menu-item index='0'>
|
||||
<el-icon><HomeFilled /></el-icon>
|
||||
<span>运营管理</span>
|
||||
</el-menu-item>
|
||||
<el-sub-menu index='1' :popper-offset="0">
|
||||
<template #title>
|
||||
<el-icon><Monitor /></el-icon>
|
||||
台账管理
|
||||
</template>
|
||||
<el-menu-item index='/home1'>脚本检测管理</el-menu-item>
|
||||
<el-menu-item index='/home1'>被检设备管理</el-menu-item>
|
||||
<el-menu-item index='/home1'>误差体系管理</el-menu-item>
|
||||
<el-menu-item index='/home1'>检测源管理</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index='2' :popper-offset="0">
|
||||
<template #title>
|
||||
<el-icon><UserFilled /></el-icon>
|
||||
权限管理
|
||||
</template>
|
||||
<el-menu-item index='/home2'>用户管理</el-menu-item>
|
||||
<el-menu-item index='/home2'>角色管理</el-menu-item>
|
||||
<el-menu-item index='/home2'>菜单管理</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-sub-menu index='3' :popper-offset="0">
|
||||
<template #title>
|
||||
<el-icon><Setting /></el-icon>
|
||||
系统配置
|
||||
</template>
|
||||
<el-menu-item index='/home3'>系统配置</el-menu-item>
|
||||
<el-menu-item index='/home3'>数据字典</el-menu-item>
|
||||
<el-menu-item index='/home3'>报告模板</el-menu-item>
|
||||
<el-menu-item index='/home3'>版本注册</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item index='0'>
|
||||
<el-icon><Document /></el-icon>
|
||||
日志管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index='0'>
|
||||
<el-icon><DataLine /></el-icon>
|
||||
统计分析
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
defineOptions({
|
||||
name: 'customHeader',
|
||||
})
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const activeIndex = ref('1')
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
console.log(key)
|
||||
}
|
||||
|
||||
defineProps(['headerHeight'])
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
/* 浮动菜单的颜色 */
|
||||
.el-menu-item:hover {
|
||||
--el-menu-hover-bg-color: var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
.el-menu--horizontal > .el-menu-item:nth-child(1) {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.el-menu--horizontal.el-menu {
|
||||
border-bottom: solid 0 var(--el-menu-border-color);
|
||||
}
|
||||
|
||||
</style>
|
||||
34
frontend/src/layouts/index.vue
Normal file
34
frontend/src/layouts/index.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class='common-layout'>
|
||||
<el-container>
|
||||
<el-header :style="{'--el-header-height':headerHeight+'px',backgroundColor:'var(--el-color-primary)'}">
|
||||
<cn-header :headerHeight='headerHeight' />
|
||||
</el-header>
|
||||
<el-main :style='{height:containerHeight}'>
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
defineOptions({
|
||||
name: 'home',
|
||||
})
|
||||
import { ref, computed } from 'vue'
|
||||
import CnHeader from '@/layouts/CnHeader/index.vue'
|
||||
let headerHeight = ref(70)
|
||||
|
||||
let containerHeight = computed(() => {
|
||||
const viewportHeight = window.innerHeight // 获取视口高度
|
||||
const heightInPx = viewportHeight - headerHeight.value
|
||||
return `${heightInPx}px`
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.el-main{
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,9 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
// element-plus
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
// element-plus 全局引入图标
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
|
||||
// 使用pinia
|
||||
import pinia from '@/stores'
|
||||
// 导入路由
|
||||
@@ -18,11 +18,16 @@ import registerGlobComp from '@/components'
|
||||
//创建实例
|
||||
const app = createApp(App)
|
||||
const setupAll = async () => {
|
||||
//全局注册图标
|
||||
for(const [key, component] of Object.entries(ElementPlusIconsVue)){
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app
|
||||
.use(Router) // 使用路由
|
||||
.use(ElementPlus) // 使用ele-plus组件
|
||||
.use(pinia) // 使用pinia
|
||||
.use(registerGlobComp) // 使用全局自定义组件
|
||||
.use(ElementPlusIconsVue) // 使用element-plus图标
|
||||
|
||||
|
||||
//待路由初始化完毕后，挂载app
|
||||
|
||||
@@ -10,6 +10,18 @@ const constantRouterMap = [
|
||||
name: 'login',
|
||||
component: Login,
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: import("@/layouts/index.vue"),
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
name: 'home',
|
||||
component: () => import("@/views/Home.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default constantRouterMap
|
||||
|
||||
62
frontend/src/stores/interface/index.ts
Normal file
62
frontend/src/stores/interface/index.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
export type LayoutType = "vertical" | "classic" | "transverse" | "columns";
|
||||
|
||||
export type AssemblySizeType = "large" | "default" | "small";
|
||||
|
||||
export type LanguageType = "zh" | "en" | null;
|
||||
|
||||
/* GlobalState */
|
||||
export interface GlobalState {
|
||||
layout: LayoutType;
|
||||
assemblySize: AssemblySizeType;
|
||||
language: LanguageType;
|
||||
maximize: boolean;
|
||||
primary: string;
|
||||
isDark: boolean;
|
||||
isGrey: boolean;
|
||||
isWeak: boolean;
|
||||
asideInverted: boolean;
|
||||
headerInverted: boolean;
|
||||
isCollapse: boolean;
|
||||
accordion: boolean;
|
||||
watermark: boolean;
|
||||
breadcrumb: boolean;
|
||||
breadcrumbIcon: boolean;
|
||||
tabs: boolean;
|
||||
tabsIcon: boolean;
|
||||
footer: boolean;
|
||||
}
|
||||
|
||||
/* UserState */
|
||||
export interface UserState {
|
||||
token: string;
|
||||
userInfo: { name: string };
|
||||
}
|
||||
|
||||
/* tabsMenuProps */
|
||||
export interface TabsMenuProps {
|
||||
icon: string;
|
||||
title: string;
|
||||
path: string;
|
||||
name: string;
|
||||
close: boolean;
|
||||
isKeepAlive: boolean;
|
||||
}
|
||||
|
||||
/* TabsState */
|
||||
export interface TabsState {
|
||||
tabsMenuList: TabsMenuProps[];
|
||||
}
|
||||
|
||||
/* AuthState */
|
||||
export interface AuthState {
|
||||
routeName: string;
|
||||
authButtonList: {
|
||||
[key: string]: string[];
|
||||
};
|
||||
authMenuList: Menu.MenuOptions[];
|
||||
}
|
||||
|
||||
/* KeepAliveState */
|
||||
export interface KeepAliveState {
|
||||
keepAliveName: string[];
|
||||
}
|
||||
22
frontend/src/theme/index.scss
Normal file
22
frontend/src/theme/index.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@forward "element-plus/theme-chalk/src/common/var.scss" with (
|
||||
$colors: (
|
||||
"primary": (//主题色
|
||||
"base": #003078,
|
||||
),
|
||||
"success": (//成功色
|
||||
"base": #67C23A,
|
||||
),
|
||||
"warning": (//警告色
|
||||
"base": #E6A23C,
|
||||
),
|
||||
"danger": (//危险色
|
||||
"base": #F56C6C,
|
||||
),
|
||||
"error": (//错误色
|
||||
"base": #FF4949,
|
||||
),
|
||||
"info": (//信息色
|
||||
"base": #409EFF,
|
||||
),
|
||||
),
|
||||
);
|
||||
75
frontend/src/types/global.d.ts
vendored
75
frontend/src/types/global.d.ts
vendored
@@ -31,3 +31,78 @@ interface ApiResponse<T = any> {
|
||||
}
|
||||
|
||||
type ApiPromise<T = any> = Promise<ApiResponse<T>>
|
||||
|
||||
/* Menu */
|
||||
declare namespace Menu {
|
||||
interface MenuOptions {
|
||||
path: string;
|
||||
name: string;
|
||||
component?: string | (() => Promise<unknown>);
|
||||
redirect?: string;
|
||||
meta: MetaProps;
|
||||
children?: MenuOptions[];
|
||||
}
|
||||
interface MetaProps {
|
||||
icon: string;
|
||||
title: string;
|
||||
activeMenu?: string;
|
||||
isLink?: string;
|
||||
isHide: boolean;
|
||||
isFull: boolean;
|
||||
isAffix: boolean;
|
||||
isKeepAlive: boolean;
|
||||
}
|
||||
}
|
||||
|
||||
/* FileType */
|
||||
declare namespace File {
|
||||
type ImageMimeType =
|
||||
| "image/apng"
|
||||
| "image/bmp"
|
||||
| "image/gif"
|
||||
| "image/jpeg"
|
||||
| "image/pjpeg"
|
||||
| "image/png"
|
||||
| "image/svg+xml"
|
||||
| "image/tiff"
|
||||
| "image/webp"
|
||||
| "image/x-icon";
|
||||
|
||||
type ExcelMimeType = "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
||||
}
|
||||
|
||||
/* Vite */
|
||||
declare type Recordable<T = any> = Record<string, T>;
|
||||
|
||||
declare interface ViteEnv {
|
||||
VITE_USER_NODE_ENV: "development" | "production" | "test";
|
||||
VITE_GLOB_APP_TITLE: string;
|
||||
VITE_PORT: number;
|
||||
VITE_OPEN: boolean;
|
||||
VITE_REPORT: boolean;
|
||||
VITE_ROUTER_MODE: "hash" | "history";
|
||||
VITE_BUILD_COMPRESS: "gzip" | "brotli" | "gzip,brotli" | "none";
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
|
||||
VITE_DROP_CONSOLE: boolean;
|
||||
VITE_PWA: boolean;
|
||||
VITE_DEVTOOLS: boolean;
|
||||
VITE_PUBLIC_PATH: string;
|
||||
VITE_API_URL: string;
|
||||
VITE_PROXY: [string, string][];
|
||||
}
|
||||
|
||||
interface ImportMetaEnv extends ViteEnv {
|
||||
__: unknown;
|
||||
}
|
||||
|
||||
/* __APP_INFO__ */
|
||||
declare const __APP_INFO__: {
|
||||
pkg: {
|
||||
name: string;
|
||||
version: string;
|
||||
dependencies: Recordable<string>;
|
||||
devDependencies: Recordable<string>;
|
||||
};
|
||||
lastBuildTime: string;
|
||||
};
|
||||
|
||||
|
||||
17
frontend/src/types/utils.d.ts
vendored
Normal file
17
frontend/src/types/utils.d.ts
vendored
Normal file
@@ -0,0 +1,17 @@
|
||||
type ObjToKeyValUnion<T> = {
|
||||
[K in keyof T]: { key: K; value: T[K] };
|
||||
}[keyof T];
|
||||
|
||||
type ObjToKeyValArray<T> = {
|
||||
[K in keyof T]: [K, T[K]];
|
||||
}[keyof T];
|
||||
|
||||
type ObjToSelectedValueUnion<T> = {
|
||||
[K in keyof T]: T[K];
|
||||
}[keyof T];
|
||||
|
||||
type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
|
||||
|
||||
type GetOptional<T> = {
|
||||
[P in keyof T as T[P] extends Required<T>[P] ? never : P]: T[P];
|
||||
};
|
||||
8
frontend/src/types/window.d.ts
vendored
Normal file
8
frontend/src/types/window.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
declare global {
|
||||
interface Navigator {
|
||||
msSaveOrOpenBlob: (blob: Blob, fileName: string) => void;
|
||||
browserLanguage: string;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -3,7 +3,7 @@ import axios from 'axios'
|
||||
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'
|
||||
import { refreshToken } from '@/api/user'
|
||||
import router from '@/router/index'
|
||||
import { useUserInfoStore } from '@/stores/user'
|
||||
import { useUserInfoStore } from '@/stores/modules/user'
|
||||
|
||||
window.requests = []
|
||||
window.tokenRefreshing = false
|
||||
|
||||
288
frontend/src/utils/index.ts
Normal file
288
frontend/src/utils/index.ts
Normal file
@@ -0,0 +1,288 @@
|
||||
import { isArray } from "@/utils/is";
|
||||
|
||||
const mode = import.meta.env.VITE_ROUTER_MODE;
|
||||
|
||||
/**
|
||||
* @description 获取localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @returns {String}
|
||||
*/
|
||||
export function localGet(key: string) {
|
||||
const value = window.localStorage.getItem(key);
|
||||
try {
|
||||
return JSON.parse(window.localStorage.getItem(key) as string);
|
||||
} catch (error) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 存储localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @param {*} value Storage值
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localSet(key: string, value: any) {
|
||||
window.localStorage.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 清除localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localRemove(key: string) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 清除所有localStorage
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localClear() {
|
||||
window.localStorage.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 判断数据类型
|
||||
* @param {*} val 需要判断类型的数据
|
||||
* @returns {String}
|
||||
*/
|
||||
export function isType(val: any) {
|
||||
if (val === null) return "null";
|
||||
if (typeof val !== "object") return typeof val;
|
||||
else return Object.prototype.toString.call(val).slice(8, -1).toLocaleLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 生成唯一 uuid
|
||||
* @returns {String}
|
||||
*/
|
||||
export function generateUUID() {
|
||||
let uuid = "";
|
||||
for (let i = 0; i < 32; i++) {
|
||||
let random = (Math.random() * 16) | 0;
|
||||
if (i === 8 || i === 12 || i === 16 || i === 20) uuid += "-";
|
||||
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
|
||||
}
|
||||
return uuid;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断两个对象是否相同
|
||||
* @param {Object} a 要比较的对象一
|
||||
* @param {Object} b 要比较的对象二
|
||||
* @returns {Boolean} 相同返回 true，反之 false
|
||||
*/
|
||||
export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
|
||||
if (!a || !b) return false;
|
||||
let aProps = Object.getOwnPropertyNames(a);
|
||||
let bProps = Object.getOwnPropertyNames(b);
|
||||
if (aProps.length != bProps.length) return false;
|
||||
for (let i = 0; i < aProps.length; i++) {
|
||||
let propName = aProps[i];
|
||||
let propA = a[propName];
|
||||
let propB = b[propName];
|
||||
if (!b.hasOwnProperty(propName)) return false;
|
||||
if (propA instanceof Object) {
|
||||
if (!isObjectValueEqual(propA, propB)) return false;
|
||||
} else if (propA !== propB) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 生成随机数
|
||||
* @param {Number} min 最小值
|
||||
* @param {Number} max 最大值
|
||||
* @returns {Number}
|
||||
*/
|
||||
export function randomNum(min: number, max: number): number {
|
||||
let num = Math.floor(Math.random() * (min - max) + max);
|
||||
return num;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取当前时间对应的提示语
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getTimeState() {
|
||||
let timeNow = new Date();
|
||||
let hours = timeNow.getHours();
|
||||
if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
|
||||
if (hours >= 10 && hours <= 14) return `中午好 🌞`;
|
||||
if (hours >= 14 && hours <= 18) return `下午好 🌞`;
|
||||
if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
|
||||
if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取浏览器默认语言
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getBrowserLang() {
|
||||
let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
|
||||
let defaultBrowserLang = "";
|
||||
if (["cn", "zh", "zh-cn"].includes(browserLang.toLowerCase())) {
|
||||
defaultBrowserLang = "zh";
|
||||
} else {
|
||||
defaultBrowserLang = "en";
|
||||
}
|
||||
return defaultBrowserLang;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取不同路由模式所对应的 url + params
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getUrlWithParams() {
|
||||
const url = {
|
||||
hash: location.hash.substring(1),
|
||||
history: location.pathname + location.search
|
||||
};
|
||||
return url[mode];
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归扁平化菜单，方便添加动态路由
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function getFlatMenuList(menuList: Menu.MenuOptions[]): Menu.MenuOptions[] {
|
||||
let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
|
||||
return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归过滤出需要渲染在左侧菜单的列表 (需剔除 isHide == true 的菜单)
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @returns {Array}
|
||||
* */
|
||||
export function getShowMenuList(menuList: Menu.MenuOptions[]) {
|
||||
let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
|
||||
return newMenuList.filter(item => {
|
||||
item.children?.length && (item.children = getShowMenuList(item.children));
|
||||
return !item.meta?.isHide;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归找出所有面包屑存储到 pinia/vuex 中
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @param {Array} parent 父级菜单
|
||||
* @param {Object} result 处理后的结果
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const getAllBreadcrumbList = (menuList: Menu.MenuOptions[], parent = [], result: { [key: string]: any } = {}) => {
|
||||
for (const item of menuList) {
|
||||
result[item.path] = [...parent, item];
|
||||
if (item.children) getAllBreadcrumbList(item.children, result[item.path], result);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 使用递归处理路由菜单 path，生成一维数组 (第一版本地路由鉴权会用到，该函数暂未使用)
|
||||
* @param {Array} menuList 所有菜单列表
|
||||
* @param {Array} menuPathArr 菜单地址的一维数组 ['**','**']
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function getMenuListPath(menuList: Menu.MenuOptions[], menuPathArr: string[] = []): string[] {
|
||||
for (const item of menuList) {
|
||||
if (typeof item === "object" && item.path) menuPathArr.push(item.path);
|
||||
if (item.children?.length) getMenuListPath(item.children, menuPathArr);
|
||||
}
|
||||
return menuPathArr;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 递归查询当前 path 所对应的菜单对象 (该函数暂未使用)
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @param {String} path 当前访问地址
|
||||
* @returns {Object | null}
|
||||
*/
|
||||
export function findMenuByPath(menuList: Menu.MenuOptions[], path: string): Menu.MenuOptions | null {
|
||||
for (const item of menuList) {
|
||||
if (item.path === path) return item;
|
||||
if (item.children) {
|
||||
const res = findMenuByPath(item.children, path);
|
||||
if (res) return res;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归过滤需要缓存的菜单 name (该函数暂未使用)
|
||||
* @param {Array} menuList 所有菜单列表
|
||||
* @param {Array} keepAliveNameArr 缓存的菜单 name ['**','**']
|
||||
* @returns {Array}
|
||||
* */
|
||||
export function getKeepAliveRouterName(menuList: Menu.MenuOptions[], keepAliveNameArr: string[] = []) {
|
||||
menuList.forEach(item => {
|
||||
item.meta.isKeepAlive && item.name && keepAliveNameArr.push(item.name);
|
||||
item.children?.length && getKeepAliveRouterName(item.children, keepAliveNameArr);
|
||||
});
|
||||
return keepAliveNameArr;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 格式化表格单元格默认值 (el-table-column)
|
||||
* @param {Number} row 行
|
||||
* @param {Number} col 列
|
||||
* @param {*} callValue 当前单元格值
|
||||
* @returns {String}
|
||||
* */
|
||||
export function formatTableColumn(row: number, col: number, callValue: any) {
|
||||
// 如果当前值为数组，使用 / 拼接（根据需求自定义）
|
||||
if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
|
||||
return callValue ?? "--";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 ProTable 值为数组 || 无数据
|
||||
* @param {*} callValue 需要处理的值
|
||||
* @returns {String}
|
||||
* */
|
||||
export function formatValue(callValue: any) {
|
||||
// 如果当前值为数组，使用 / 拼接（根据需求自定义）
|
||||
if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
|
||||
return callValue ?? "--";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 prop 为多级嵌套的情况，返回的数据 (列如: prop: user.name)
|
||||
* @param {Object} row 当前行数据
|
||||
* @param {String} prop 当前 prop
|
||||
* @returns {*}
|
||||
* */
|
||||
export function handleRowAccordingToProp(row: { [key: string]: any }, prop: string) {
|
||||
if (!prop.includes(".")) return row[prop] ?? "--";
|
||||
prop.split(".").forEach(item => (row = row[item] ?? "--"));
|
||||
return row;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 prop，当 prop 为多级嵌套时 ==> 返回最后一级 prop
|
||||
* @param {String} prop 当前 prop
|
||||
* @returns {String}
|
||||
* */
|
||||
export function handleProp(prop: string) {
|
||||
const propArr = prop.split(".");
|
||||
if (propArr.length == 1) return prop;
|
||||
return propArr[propArr.length - 1];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description 递归查找 callValue 对应的 enum 值
|
||||
* */
|
||||
export function findItemNested(enumData: any, callValue: any, value: string, children: string) {
|
||||
return enumData.reduce((accumulator: any, current: any) => {
|
||||
if (accumulator) return accumulator;
|
||||
if (current[value] === callValue) return current;
|
||||
if (current[children]) return findItemNested(current[children], callValue, value, children);
|
||||
}, null);
|
||||
}
|
||||
125
frontend/src/utils/is/index.ts
Normal file
125
frontend/src/utils/is/index.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* @description: 判断值是否未某个类型
|
||||
*/
|
||||
export function is(val: unknown, type: string) {
|
||||
return Object.prototype.toString.call(val) === `[object ${type}]`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为函数
|
||||
*/
|
||||
export function isFunction<T = Function>(val: unknown): val is T {
|
||||
return is(val, "Function");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否已定义
|
||||
*/
|
||||
export const isDef = <T = unknown>(val?: T): val is T => {
|
||||
return typeof val !== "undefined";
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否未定义
|
||||
*/
|
||||
export const isUnDef = <T = unknown>(val?: T): val is T => {
|
||||
return !isDef(val);
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否为对象
|
||||
*/
|
||||
export const isObject = (val: any): val is Record<any, any> => {
|
||||
return val !== null && is(val, "Object");
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否为时间
|
||||
*/
|
||||
export function isDate(val: unknown): val is Date {
|
||||
return is(val, "Date");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为数值
|
||||
*/
|
||||
export function isNumber(val: unknown): val is number {
|
||||
return is(val, "Number");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为AsyncFunction
|
||||
*/
|
||||
export function isAsyncFunction<T = any>(val: unknown): val is Promise<T> {
|
||||
return is(val, "AsyncFunction");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为promise
|
||||
*/
|
||||
export function isPromise<T = any>(val: unknown): val is Promise<T> {
|
||||
return is(val, "Promise") && isObject(val) && isFunction(val.then) && isFunction(val.catch);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为字符串
|
||||
*/
|
||||
export function isString(val: unknown): val is string {
|
||||
return is(val, "String");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为boolean类型
|
||||
*/
|
||||
export function isBoolean(val: unknown): val is boolean {
|
||||
return is(val, "Boolean");
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为数组
|
||||
*/
|
||||
export function isArray(val: any): val is Array<any> {
|
||||
return val && Array.isArray(val);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否客户端
|
||||
*/
|
||||
export const isClient = () => {
|
||||
return typeof window !== "undefined";
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否为浏览器
|
||||
*/
|
||||
export const isWindow = (val: any): val is Window => {
|
||||
return typeof window !== "undefined" && is(val, "Window");
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否为 element 元素
|
||||
*/
|
||||
export const isElement = (val: unknown): val is Element => {
|
||||
return isObject(val) && !!val.tagName;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description: 是否为 null
|
||||
*/
|
||||
export function isNull(val: unknown): val is null {
|
||||
return val === null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为 null || undefined
|
||||
*/
|
||||
export function isNullOrUnDef(val: unknown): val is null | undefined {
|
||||
return isUnDef(val) || isNull(val);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description: 是否为 16 进制颜色
|
||||
*/
|
||||
export const isHexColor = (str: string) => {
|
||||
return /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(str);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useUserInfoStore } from '@/stores/user'
|
||||
import { useUserInfoStore } from '@/stores/modules/user'
|
||||
import { USER_INFO } from '@/constants/storeKey'
|
||||
|
||||
export function clearUserInfo() {
|
||||
|
||||
@@ -38,7 +38,7 @@ import { ref, onMounted } from "vue";
|
||||
const router = useRouter();
|
||||
import { useRouter } from "vue-router";
|
||||
import { Avatar, Lock } from "@element-plus/icons-vue";
|
||||
import { useUserInfoStore } from "@/stores/user";
|
||||
import { useUserInfoStore } from "@/stores/modules/user";
|
||||
const userInfoStore = useUserInfoStore();
|
||||
|
||||
|
||||
@@ -61,12 +61,12 @@ const handleLogin = () => {
|
||||
loginLoading.value = true;
|
||||
if (LoginForm.value.loginUserName && LoginForm.value.loginUserPassword) {
|
||||
setTimeout(() => {
|
||||
// router.push({
|
||||
// path: "/admin",
|
||||
// query: {
|
||||
// name: LoginForm.value.loginUserName,
|
||||
// },
|
||||
// });
|
||||
router.push({
|
||||
path: "/home",
|
||||
query: {
|
||||
name: LoginForm.value.loginUserName,
|
||||
},
|
||||
});
|
||||
userInfoStore.dataFill({ loginName: LoginForm.value.loginUserName });
|
||||
console.log(userInfoStore.loginName)
|
||||
}, 1500);
|
||||
|
||||
231
frontend/src/views/dashboard/index.vue
Normal file
231
frontend/src/views/dashboard/index.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main_container">
|
||||
<div class="mode" v-for="(item, index) in modeList" :key="index">
|
||||
<div class="mode_top">
|
||||
<div class="mode_name">
|
||||
<p>
|
||||
{{ item.name }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="test_button">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handelOpen(item.isActive)"
|
||||
>进入检测</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode_img">
|
||||
<img :src="item.img" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useUserInfoStore } from "@/stores/modules/user";
|
||||
import { ElMessage } from "element-plus";
|
||||
const user = useUserInfoStore();
|
||||
const activeIndex = ref("1-1");
|
||||
const router = useRouter();
|
||||
const modeList = [
|
||||
{
|
||||
name: "模拟式模式",
|
||||
subName: "未启用模拟式检测计划",
|
||||
img: "/src/assets/images/dashboard/1.svg",
|
||||
isActive: true,
|
||||
},
|
||||
{
|
||||
name: "数字式模式",
|
||||
subName: "启用数字检测计划",
|
||||
img: "/src/assets/images/dashboard/2.svg",
|
||||
isActive: false,
|
||||
},
|
||||
{
|
||||
name: "对比式模式",
|
||||
subName: "启用对比式检测计划",
|
||||
img: "/src/assets/images/dashboard/3.svg",
|
||||
isActive: false,
|
||||
}
|
||||
];
|
||||
const handelOpen = (isActive: any) => {
|
||||
if (isActive) {
|
||||
router.push({ path: "/admin/user-boot/preDetection" });
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "当前模式未配置",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleSelect = (key: string, keyPath: string[]) => {
|
||||
console.log(key, keyPath);
|
||||
};
|
||||
onMounted(() => {
|
||||
console.log();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.main_container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 140px);
|
||||
// overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// padding: 20px 2%;
|
||||
.mode {
|
||||
// width: 31.5%;
|
||||
// height: 100%;
|
||||
flex: none;
|
||||
width: 32.5%;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: space-around;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 102, 255, 1) 65%,
|
||||
rgba(0, 51, 255, 1) 100%,
|
||||
rgba(0, 51, 255, 1) 100%
|
||||
);
|
||||
// padding: 40px 0;
|
||||
.mode_top {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #008aff;
|
||||
border-radius: 6px 6px 0 0;
|
||||
.mode_name {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
p {
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
// background: #fff;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
// margin-top: 20px;
|
||||
}
|
||||
.mode_subName {
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
padding: 5px 0 0 10px;
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.test_button {
|
||||
width: 150px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.mode_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// padding: 30px 0 50px;
|
||||
margin-top: 100px;
|
||||
img:nth-child(1) {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
img:nth-child(2) {
|
||||
width: 70%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
img:nth-child(3) {
|
||||
width: 60%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.mode_test {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
.test_button {
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
border: 1px solid rgba(121, 121, 121, 1);
|
||||
border-radius: 5px;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.test_button:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mode:nth-child(3n + 3) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 153, 255, 1) 0%,
|
||||
rgba(0, 102, 255, 1) 39%,
|
||||
rgba(102, 51, 204, 1) 100%,
|
||||
rgba(102, 51, 204, 1) 100%
|
||||
);
|
||||
}
|
||||
.mode_off {
|
||||
.mode_name,
|
||||
.mode_subName,
|
||||
.test_button {
|
||||
color: #fff !important;
|
||||
}
|
||||
.test_button:hover {
|
||||
// background: rgba(0, 0, 0, 0.2) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-sub-menu__title {
|
||||
border-bottom: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,9 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default defineConfig((config) => {
|
||||
return {
|
||||
@@ -13,6 +16,16 @@ export default defineConfig((config) => {
|
||||
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
|
||||
symbolId: 'icon-[dir]-[name]',
|
||||
}),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver({
|
||||
importStyle: "sass",
|
||||
})]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver({
|
||||
importStyle: "sass",
|
||||
})]
|
||||
}),
|
||||
],
|
||||
// 基础配置
|
||||
base: './',
|
||||
@@ -30,6 +43,10 @@ export default defineConfig((config) => {
|
||||
},
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
scss: {
|
||||
// 引入index.scss覆盖文件
|
||||
additionalData: `@use "@/theme/index.scss" as *;`,
|
||||
}
|
||||
},
|
||||
},
|
||||
build: {
|
||||
|
||||
Reference in New Issue
Block a user