ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initHeader

Browse Source
This commit is contained in:
hongawen
2024-08-21 14:52:36 +08:00
parent 41babdfa5c
commit fe895bd37c
25 changed files with 1023 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.env.development
View File

@@ -1,2 +1,6 @@
NODE_ENV='development'
VITE_TITLE=""
# 路由模式
# Optional: hash | history
VITE_ROUTER_MODE = hash

4
frontend/.env.production
View File

@@ -1,2 +1,6 @@
NODE_ENV='production'
VITE_TITLE=""
# 路由模式
# Optional: hash | history
VITE_ROUTER_MODE = hash

2
frontend/package.json
View File

@@ -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",

12
frontend/src/App.vue
View File

@@ -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>

2
frontend/src/api/user/index.ts
View File

@@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2
frontend/src/assets/styles/tailMain.css
View File

@@ -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');
}

3
frontend/src/constants/storeKey.ts
View File

@@ -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
View 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
View 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>

13
frontend/src/main.ts
View File

@@ -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

12
frontend/src/router/routerMap.ts
View File

@@ -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
View 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[];
}

0
frontend/src/stores/user/index.ts → frontend/src/stores/modules/user/index.ts
View File

22
frontend/src/theme/index.scss Normal file
View 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
View File

@@ -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
View 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
View File

@@ -0,0 +1,8 @@
declare global {
interface Navigator {
msSaveOrOpenBlob: (blob: Blob, fileName: string) => void;
browserLanguage: string;
}
}
export {};

2
frontend/src/utils/http/index.ts
View File

@@ -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
View 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
View 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);
};

2
frontend/src/utils/logout/index.ts
View File

@@ -1,4 +1,4 @@
import { useUserInfoStore } from '@/stores/user'
import { useUserInfoStore } from '@/stores/modules/user'
import { USER_INFO } from '@/constants/storeKey'
export function clearUserInfo() {

14
frontend/src/views/Login.vue
View File

@@ -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
View 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>

17
frontend/vite.config.ts
View File

@@ -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: {