初始化仓库
This commit is contained in:
tao
4
.env.development
Normal file
4
.env.development
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# 开发环境
|
||||||
|
VITE_APP_BASE_API=/api
|
||||||
|
|
||||||
|
VITE_APP_BASE_URL=http://192.168.1.108:8083
|
||||||
4
.env.production
Normal file
4
.env.production
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
# 生产环境
|
||||||
|
VITE_APP_BASE_API=/prod-api
|
||||||
|
|
||||||
|
VITE_APP_BASE_URL=http://127.0.0.1:8093
|
||||||
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
*.zip
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
5
README.md
Normal file
5
README.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
||||||
38
components.d.ts
vendored
Normal file
38
components.d.ts
vendored
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
// biome-ignore lint: disable
|
||||||
|
export {}
|
||||||
|
|
||||||
|
/* prettier-ignore */
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
AButton: typeof import('ant-design-vue/es')['Button']
|
||||||
|
ACard: typeof import('ant-design-vue/es')['Card']
|
||||||
|
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
|
||||||
|
ActionButtons: typeof import('./src/components/common/ActionButtons/index.vue')['default']
|
||||||
|
AForm: typeof import('ant-design-vue/es')['Form']
|
||||||
|
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||||
|
AInput: typeof import('ant-design-vue/es')['Input']
|
||||||
|
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||||
|
Header: typeof import('./src/components/Header/index.vue')['default']
|
||||||
|
ILucideBarChart3: typeof import('~icons/lucide/bar-chart3')['default']
|
||||||
|
ILucideBuilding: typeof import('~icons/lucide/building')['default']
|
||||||
|
ILucideCpu: typeof import('~icons/lucide/cpu')['default']
|
||||||
|
ILucideLoader: typeof import('~icons/lucide/loader')['default']
|
||||||
|
ILucideLock: typeof import('~icons/lucide/lock')['default']
|
||||||
|
ILucideMonitor: typeof import('~icons/lucide/monitor')['default']
|
||||||
|
ILucidePackage: typeof import('~icons/lucide/package')['default']
|
||||||
|
ILucideRefreshCw: typeof import('~icons/lucide/refresh-cw')['default']
|
||||||
|
ILucideServer: typeof import('~icons/lucide/server')['default']
|
||||||
|
ILucideSettings: typeof import('~icons/lucide/settings')['default']
|
||||||
|
ILucideShieldCheck: typeof import('~icons/lucide/shield-check')['default']
|
||||||
|
ILucideUser: typeof import('~icons/lucide/user')['default']
|
||||||
|
ILucideUsers: typeof import('~icons/lucide/users')['default']
|
||||||
|
ILucideWrench: typeof import('~icons/lucide/wrench')['default']
|
||||||
|
Lucide: typeof import('./src/components/common/Lucide/index.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
4
global.d.ts
vendored
Normal file
4
global.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
// declare module '@/*';
|
||||||
|
declare module '@/components/*';
|
||||||
|
declare module '@/views/*';
|
||||||
|
declare module '@/api/*';
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>工业 HMI 自动采集设备</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3100
package-lock.json
generated
Normal file
3100
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"name": "rd_mes_front_hmi",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --open",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ant-design-vue": "^4.2.6",
|
||||||
|
"axios": "^1.10.0",
|
||||||
|
"pinia": "^3.0.3",
|
||||||
|
"unplugin-vue-components": "^28.7.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@iconify-json/lucide": "^1.2.66",
|
||||||
|
"@types/event-source-polyfill": "^1.0.5",
|
||||||
|
"@types/js-cookie": "^3.0.6",
|
||||||
|
"@types/node": "^24.0.3",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.3",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"event-source-polyfill": "^1.0.31",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
|
"sass-embedded": "^1.89.2",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"unplugin-icons": "^22.2.0",
|
||||||
|
"vite": "^6.3.5",
|
||||||
|
"vue-tsc": "^2.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/bg.jpg
Normal file
BIN
public/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1004 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
10
src/App.vue
Normal file
10
src/App.vue
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<a-config-provider :locale="zhCN">
|
||||||
|
<router-view />
|
||||||
|
</a-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||||
|
import 'dayjs/locale/zh-cn';
|
||||||
|
</script>
|
||||||
8
src/api/common/model.d.ts
vendored
Normal file
8
src/api/common/model.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export interface ApiResponse<T = any> {
|
||||||
|
code?: number;
|
||||||
|
msg?: string;
|
||||||
|
data?: T;
|
||||||
|
rows?: T[];
|
||||||
|
total?: number;
|
||||||
|
token?: string;
|
||||||
|
}
|
||||||
83
src/api/request.ts
Normal file
83
src/api/request.ts
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import router from '@/router';
|
||||||
|
import { getToken } from '@/utils/auth';
|
||||||
|
import { Modal, notification } from 'ant-design-vue';
|
||||||
|
import type { AxiosRequestConfig } from "axios";
|
||||||
|
import type { ApiResponse } from "@/api/common/model";
|
||||||
|
|
||||||
|
const errCodeMap: { [key: string]: string } = {
|
||||||
|
'403': '当前操作没有权限',
|
||||||
|
'404': '访问资源不存在',
|
||||||
|
'default': '系统未知错误，请反馈给管理员'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const service = axios.create({
|
||||||
|
baseURL: import.meta.env.VITE_APP_BASE_API,
|
||||||
|
timeout: 10000,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
service.interceptors.request.use(
|
||||||
|
config => {
|
||||||
|
config.headers = config.headers || {};
|
||||||
|
config.headers['Accept-Language'] = 'zh-CN';
|
||||||
|
|
||||||
|
const token = getToken();
|
||||||
|
if (token) {
|
||||||
|
config.headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
service.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
// console.log(response);
|
||||||
|
const code = response.data.code || 200;
|
||||||
|
const data = response.data;
|
||||||
|
|
||||||
|
switch (code) {
|
||||||
|
case 200:
|
||||||
|
return data ?? response;
|
||||||
|
case 401:
|
||||||
|
Modal.error({
|
||||||
|
title: '系统提示',
|
||||||
|
content: '登录状态已过期，请重新登录',
|
||||||
|
onOk: () => {
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return Promise.reject(data);
|
||||||
|
default:
|
||||||
|
const errMsg = errCodeMap[code] || data.msg || errCodeMap['default'];
|
||||||
|
notification.error({
|
||||||
|
message: '请求错误',
|
||||||
|
description: errMsg,
|
||||||
|
});
|
||||||
|
return Promise.reject(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
error.message = error.code === "ECONNABORTED" ? '请求超时，请稍后重试' : error.message;
|
||||||
|
|
||||||
|
// 网络/服务器错误统一处理
|
||||||
|
notification.error({
|
||||||
|
message: "网络错误",
|
||||||
|
description: error.message,
|
||||||
|
});
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// 类型检查
|
||||||
|
function request<T = any>(config: AxiosRequestConfig): Promise<ApiResponse<T>> {
|
||||||
|
return service(config) as unknown as Promise<ApiResponse<T>>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default request;
|
||||||
|
// export default service;
|
||||||
19
src/api/system/index.ts
Normal file
19
src/api/system/index.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import request from '../request'
|
||||||
|
import type { LoginInfo } from './model';
|
||||||
|
|
||||||
|
// 用户登录
|
||||||
|
export function login(data: LoginInfo) {
|
||||||
|
return request({
|
||||||
|
url: '/login',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取验证码
|
||||||
|
export function getCaptcha() {
|
||||||
|
return request({
|
||||||
|
url: '/captchaImage',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
6
src/api/system/model.d.ts
vendored
Normal file
6
src/api/system/model.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export interface LoginInfo {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
uuid: string
|
||||||
|
code: string
|
||||||
|
}
|
||||||
9
src/assets/styles/_ant-design.scss
Normal file
9
src/assets/styles/_ant-design.scss
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@use './variables' as *;
|
||||||
|
|
||||||
|
// 解决外部图标无法居中问题
|
||||||
|
.ant-btn:has(svg) {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
14
src/assets/styles/_base.scss
Normal file
14
src/assets/styles/_base.scss
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* 整个滚动条 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
// display: none;
|
||||||
|
/* 对应纵向滚动条的宽度 */
|
||||||
|
width: 10px;
|
||||||
|
/* 对应横向滚动条的宽度 */
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条上的滚动滑块 */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #8B8B8B;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
110
src/assets/styles/_variables.scss
Normal file
110
src/assets/styles/_variables.scss
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
$title-font-size: clamp(1.5rem, 2vw, 2.4rem);
|
||||||
|
$content-font-size: clamp(1rem, 1.5vw, 1.2rem);
|
||||||
|
$log-font-size: 1.1rem;
|
||||||
|
|
||||||
|
|
||||||
|
$primary-color: #4a90e2;
|
||||||
|
$primary-light: #5ba0f2;
|
||||||
|
$primary-dark: #3a7bd5;
|
||||||
|
$success-color: #52c41a;
|
||||||
|
$success-light: #73d13d;
|
||||||
|
$success-bg: rgba(82, 196, 26, 0.2);
|
||||||
|
$success-bg-hover: rgba(82, 196, 26, 0.4);
|
||||||
|
$warning-color: #faad14;
|
||||||
|
$warning-light: #ffc53d;
|
||||||
|
$warning-bg: rgba(250, 173, 20, 0.2);
|
||||||
|
$warning-bg-hover: rgba(250, 173, 20, 0.4);
|
||||||
|
$error-color: #ff4d4f;
|
||||||
|
$error-light: #ff7875;
|
||||||
|
$error-bg: rgba(255, 77, 79, 0.2);
|
||||||
|
$error-bg-hover: rgba(255, 77, 79, 0.4);
|
||||||
|
|
||||||
|
$white: #ffffff;
|
||||||
|
$text-size: 14px;
|
||||||
|
$text-light: #b8d4f0;
|
||||||
|
$text-dark: #333333;
|
||||||
|
$text-gray: #cccccc;
|
||||||
|
$text-success: #b7eb8f;
|
||||||
|
$text-warning: #ffd666;
|
||||||
|
$text-error: #ffccc7;
|
||||||
|
|
||||||
|
$bg-primary: rgba(74, 144, 226, 0.2);
|
||||||
|
$bg-primary-hover: rgba(74, 144, 226, 0.4);
|
||||||
|
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||||
|
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
|
||||||
|
$bg-light: rgba(255, 255, 255, 0.1);
|
||||||
|
$bg-light-hover: rgba(255, 255, 255, 0.2);
|
||||||
|
$bg-dark: rgba(0, 0, 0, 0.3);
|
||||||
|
$bg-input: rgba(255, 255, 255, 0.1);
|
||||||
|
$bg-input-focus: rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
|
$border-primary: 1px solid $primary-color;
|
||||||
|
$border-light: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
|
$border-light-hover: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
|
$border-transparent: 1px solid transparent;
|
||||||
|
|
||||||
|
$spacing-xs: 4px;
|
||||||
|
$spacing-sm: 8px;
|
||||||
|
$spacing-md: 12px;
|
||||||
|
$spacing-lg: 15px;
|
||||||
|
$spacing-xl: 20px;
|
||||||
|
$spacing-xxl: 30px;
|
||||||
|
|
||||||
|
$border-radius: 4px;
|
||||||
|
$border-radius-lg: 8px;
|
||||||
|
|
||||||
|
$transition: all 0.3s ease;
|
||||||
|
$font-family: 'Microsoft YaHei', sans-serif;
|
||||||
|
|
||||||
|
// 混合器定义
|
||||||
|
@mixin button-base {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: $transition;
|
||||||
|
border: $border-transparent;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-hover($bg-color, $border-color, $text-color) {
|
||||||
|
&:hover {
|
||||||
|
background: $bg-color;
|
||||||
|
border-color: $border-color;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin status-button($bg, $bg-hover, $border, $border-hover, $text, $text-hover) {
|
||||||
|
background: $bg;
|
||||||
|
border-color: $border;
|
||||||
|
color: $text;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $bg-hover;
|
||||||
|
border-color: $border-hover;
|
||||||
|
color: $text-hover;
|
||||||
|
box-shadow: 0 0 12px rgba($border, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flex-between {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin transition-ease {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin icon-base($size) {
|
||||||
|
width: $size;
|
||||||
|
height: $size;
|
||||||
|
}
|
||||||
3
src/assets/styles/index.scss
Normal file
3
src/assets/styles/index.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@forward './base';
|
||||||
|
@forward './variables';
|
||||||
|
@forward './ant-design';
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
116
src/components/Header/index.vue
Normal file
116
src/components/Header/index.vue
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<header class="header-container" :class="{ 'hide-shadow': hideShadow }"
|
||||||
|
:style="{ height, zIndex, lineHeight: height }">
|
||||||
|
<div class="opts left-opts" v-if="$slots['left-opts'] || title || $slots.title">
|
||||||
|
<a-button v-if="showHome" class="header-btn" @click="backToHome">首页</a-button>
|
||||||
|
<a-button v-if="showBack" class="header-btn" @click="back">返回</a-button>
|
||||||
|
<slot name="left-opts" />
|
||||||
|
</div>
|
||||||
|
<div class="title" v-if="title || $slots.title">
|
||||||
|
<slot name="title">
|
||||||
|
{{ title }}
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div class="opts right-opts" v-if="$slots['right-opts'] || title || $slots.title">
|
||||||
|
<slot name="right-opts" />
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
showHome: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
showBack: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
hideShadow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '6vh',
|
||||||
|
},
|
||||||
|
zIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 999,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['back']);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const back = () => {
|
||||||
|
emit('back');
|
||||||
|
defaultBack();
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultBack = () => {
|
||||||
|
router.go(-1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const backToHome = () => {
|
||||||
|
router.push({ name: 'ipc' });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.header-container {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
|
||||||
|
|
||||||
|
&.hide-shadow {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 14;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: clamp(16px, 2.5vw, 32px);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opts {
|
||||||
|
height: 100%;
|
||||||
|
flex: 5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
&.left-opts {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right-opts {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.header-btn.ant-btn) {
|
||||||
|
height: 80%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: clamp(14px, 1vw, 18px);
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
394
src/components/common/ActionButtons/index.vue
Normal file
394
src/components/common/ActionButtons/index.vue
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bottom-actions">
|
||||||
|
<div class="pagination-container">
|
||||||
|
<div class="pagination-control left" v-if="showPagination">
|
||||||
|
<div class="pagination-btn-wrapper">
|
||||||
|
<a-button :disabled="currentPage === 1" @click="goToPrevPage" class="pagination-btn prev-btn">
|
||||||
|
<template #icon>
|
||||||
|
<LeftOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<div class="page-tooltip" v-if="currentPage > 1">
|
||||||
|
{{ currentPage - 1 }} / {{ totalPages }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="buttons-container">
|
||||||
|
<a-row :gutter="16" justify="center">
|
||||||
|
<a-col v-for="button in currentPageButtons" :key="button.label">
|
||||||
|
<a-button :type="button.type" size="large" @click="executeButtonAction(button.handler)"
|
||||||
|
:class="['action-button', getButtonStatusClass(button)]">
|
||||||
|
<component :is="getButtonStatusIcon(button)" v-if="getButtonStatusIcon(button)"
|
||||||
|
class="status-icon-btn" />
|
||||||
|
{{ button.label }}
|
||||||
|
</a-button>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination-control right" v-if="showPagination">
|
||||||
|
<div class="pagination-btn-wrapper">
|
||||||
|
<a-button :disabled="currentPage === totalPages" @click="goToNextPage" class="pagination-btn next-btn">
|
||||||
|
<template #icon>
|
||||||
|
<RightOutlined />
|
||||||
|
</template>
|
||||||
|
</a-button>
|
||||||
|
<div class="page-tooltip" v-if="currentPage < totalPages">
|
||||||
|
{{ currentPage + 1 }} / {{ totalPages }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
|
||||||
|
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
|
||||||
|
|
||||||
|
interface ActionButton {
|
||||||
|
label: string;
|
||||||
|
handler: string;
|
||||||
|
type: ButtonType;
|
||||||
|
status?: 'running' | 'paused' | 'idle';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
buttons: ActionButton[];
|
||||||
|
buttonsPerPage?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Emits {
|
||||||
|
(e: 'execute', handlerName: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
buttonsPerPage: 6
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
// 底部按钮分页控制
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const buttonsPerPage = ref(props.buttonsPerPage);
|
||||||
|
|
||||||
|
// 获取按钮状态样式类
|
||||||
|
const getButtonStatusClass = (button: ActionButton) => {
|
||||||
|
const statusClasses = {
|
||||||
|
running: 'status-running',
|
||||||
|
paused: 'status-paused',
|
||||||
|
idle: 'status-idle'
|
||||||
|
};
|
||||||
|
return statusClasses[button.status || 'idle'];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取按钮状态图标
|
||||||
|
const getButtonStatusIcon = (button: ActionButton) => {
|
||||||
|
const statusIcons = {
|
||||||
|
running: 'i-play-circle',
|
||||||
|
paused: 'i-pause-circle',
|
||||||
|
idle: ''
|
||||||
|
};
|
||||||
|
return statusIcons[button.status || 'idle'];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 计算当前页显示的按钮
|
||||||
|
const currentPageButtons = computed(() => {
|
||||||
|
const start = (currentPage.value - 1) * buttonsPerPage.value;
|
||||||
|
const end = start + buttonsPerPage.value;
|
||||||
|
return props.buttons.slice(start, end);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算总页数
|
||||||
|
const totalPages = computed(() => {
|
||||||
|
return Math.ceil(props.buttons.length / buttonsPerPage.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 是否显示分页控制
|
||||||
|
const showPagination = computed(() => {
|
||||||
|
return totalPages.value > 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 分页控制函数
|
||||||
|
const goToPrevPage = () => {
|
||||||
|
if (currentPage.value > 1) {
|
||||||
|
currentPage.value--;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const goToNextPage = () => {
|
||||||
|
if (currentPage.value < totalPages.value) {
|
||||||
|
currentPage.value++;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 执行按钮操作
|
||||||
|
const executeButtonAction = (handlerName: string) => {
|
||||||
|
emit('execute', handlerName);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 响应式调整按钮数量
|
||||||
|
const updateButtonsPerPage = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
const buttonsContainer = document.querySelector('.buttons-container') as HTMLElement;
|
||||||
|
if (!buttonsContainer) {
|
||||||
|
buttonsPerPage.value = props.buttonsPerPage; // 默认值
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const containerWidth = buttonsContainer.offsetWidth;
|
||||||
|
const buttonWidth = 100; // 单个操作按钮最小宽度
|
||||||
|
const buttonGap = 16; // 按钮间距
|
||||||
|
|
||||||
|
// 计算可以放置的按钮数量
|
||||||
|
const maxButtons = Math.floor((containerWidth + buttonGap) / (buttonWidth + buttonGap));
|
||||||
|
|
||||||
|
// 设置最小和最大按钮数量
|
||||||
|
buttonsPerPage.value = Math.max(3, maxButtons);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化按钮数量
|
||||||
|
updateButtonsPerPage();
|
||||||
|
|
||||||
|
// 监听窗口大小变化
|
||||||
|
window.addEventListener('resize', updateButtonsPerPage);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 清理事件监听
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
window.removeEventListener('resize', updateButtonsPerPage);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
// 变量定义
|
||||||
|
$primary-color: #4a90e2;
|
||||||
|
$primary-light: #5ba0f2;
|
||||||
|
$success-color: #52c41a;
|
||||||
|
$success-light: #73d13d;
|
||||||
|
$success-bg: rgba(82, 196, 26, 0.1);
|
||||||
|
$success-bg-hover: rgba(82, 196, 26, 0.2);
|
||||||
|
$warning-color: #faad14;
|
||||||
|
$warning-light: #ffc53d;
|
||||||
|
$warning-bg: rgba(250, 173, 20, 0.1);
|
||||||
|
$warning-bg-hover: rgba(250, 173, 20, 0.2);
|
||||||
|
$error-color: #ff4d4f;
|
||||||
|
$error-light: #ff7875;
|
||||||
|
$bg-dark: rgba(0, 0, 0, 0.4);
|
||||||
|
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||||
|
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
|
||||||
|
$text-light: #cccccc;
|
||||||
|
$text-success: #52c41a;
|
||||||
|
$text-warning: #faad14;
|
||||||
|
$white: #ffffff;
|
||||||
|
$spacing-xs: 4px;
|
||||||
|
$spacing-sm: 8px;
|
||||||
|
$spacing-md: 12px;
|
||||||
|
$spacing-lg: 16px;
|
||||||
|
$border-radius: 6px;
|
||||||
|
$border-radius-lg: 8px;
|
||||||
|
$transition: all 0.3s ease;
|
||||||
|
|
||||||
|
// 混合器
|
||||||
|
@mixin flex-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin button-base {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: $transition;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部操作按钮区域 */
|
||||||
|
.bottom-actions {
|
||||||
|
height: 80px;
|
||||||
|
background: $bg-dark;
|
||||||
|
border-top: 2px solid $primary-color;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: $spacing-sm $spacing-lg;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
@include flex-center;
|
||||||
|
width: 100%;
|
||||||
|
gap: $spacing-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-btn-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-btn {
|
||||||
|
width: 35px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
@include flex-center;
|
||||||
|
background: rgba(74, 144, 226, 0.1);
|
||||||
|
border: 1px solid $primary-color;
|
||||||
|
color: $text-light;
|
||||||
|
transition: $transition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(74, 144, 226, 0.2);
|
||||||
|
border-color: $primary-light;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
background: $bg-overlay;
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: -30px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
color: $white;
|
||||||
|
padding: $spacing-xs $spacing-sm;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 1000;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-top-color: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-btn-wrapper:hover .page-tooltip {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-container {
|
||||||
|
flex: 1;
|
||||||
|
@include flex-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
min-width: 100px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
@include button-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮状态样式 */
|
||||||
|
.action-button {
|
||||||
|
&.status-running {
|
||||||
|
background: $success-bg !important;
|
||||||
|
border-color: $success-color !important;
|
||||||
|
color: $text-success !important;
|
||||||
|
box-shadow: 0 0 8px rgba(82, 196, 26, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $success-bg-hover !important;
|
||||||
|
border-color: $success-light !important;
|
||||||
|
color: $white !important;
|
||||||
|
box-shadow: 0 0 12px rgba(82, 196, 26, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-paused {
|
||||||
|
background: $warning-bg !important;
|
||||||
|
border-color: $warning-color !important;
|
||||||
|
color: $text-warning !important;
|
||||||
|
box-shadow: 0 0 8px rgba(250, 173, 20, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $warning-bg-hover !important;
|
||||||
|
border-color: $warning-light !important;
|
||||||
|
color: $white !important;
|
||||||
|
box-shadow: 0 0 12px rgba(250, 173, 20, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-idle {
|
||||||
|
background: $bg-overlay;
|
||||||
|
border-color: rgba(255, 255, 255, 0.3);
|
||||||
|
color: $text-light;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $bg-overlay-hover;
|
||||||
|
border-color: rgba(255, 255, 255, 0.5);
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-icon-btn {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 1366px) {
|
||||||
|
.bottom-actions .ant-btn {
|
||||||
|
min-width: 90px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.bottom-actions {
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
.ant-row {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
min-width: 80px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
20
src/components/common/Lucide/index.vue
Normal file
20
src/components/common/Lucide/index.vue
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
defineOptions({
|
||||||
|
name: 'Lucide',
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<component :is="props.name" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
16
src/main.ts
Normal file
16
src/main.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
// Pinia 状态管理
|
||||||
|
import { createPinia } from "pinia";
|
||||||
|
const pinia = createPinia();
|
||||||
|
|
||||||
|
// Vue Router
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
// 样式文件
|
||||||
|
import "ant-design-vue/dist/reset.css";
|
||||||
|
import "@/assets/styles/index.scss";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(pinia).use(router).mount("#app");
|
||||||
53
src/router/index.ts
Normal file
53
src/router/index.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
|
|
||||||
|
const whiteList = ["/login"];
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Index',
|
||||||
|
component: () => import('@/views/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('@/views/login.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pwoManage',
|
||||||
|
name: 'PwoManage',
|
||||||
|
component: () => import('@/views/pwoManage/index.vue')
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
router.beforeEach(async (to, from, next) => {
|
||||||
|
const token = localStorage.getItem("token");
|
||||||
|
|
||||||
|
// 白名单放行
|
||||||
|
if (whiteList.includes(to.path)) {
|
||||||
|
return next();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已登录，访问 login → 跳首页
|
||||||
|
if (token && to.path === "/login") {
|
||||||
|
return next("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未登录，访问受保护路由
|
||||||
|
if (!token) {
|
||||||
|
return next({
|
||||||
|
path: "/login",
|
||||||
|
query: { redirect: to.fullPath },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已登录，正常访问
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
5
src/shim-vue.d.ts
vendored
Normal file
5
src/shim-vue.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
declare module "*.vue" {
|
||||||
|
import type { DefineComponent } from "vue";
|
||||||
|
const component: DefineComponent<{}, {}, any>;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
66
src/store/auth.ts
Normal file
66
src/store/auth.ts
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useUserStore } from './user';
|
||||||
|
import { login } from '@/api/system';
|
||||||
|
import type { LoginInfo } from '@/api/system/model';
|
||||||
|
|
||||||
|
const TOKEN_KEY = 'token';
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth', () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const loginLoading = ref(false);
|
||||||
|
const token = ref(Cookies.get(TOKEN_KEY) || null);
|
||||||
|
|
||||||
|
function setToken(newToken: string) {
|
||||||
|
token.value = newToken;
|
||||||
|
Cookies.set(TOKEN_KEY, newToken);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearToken() {
|
||||||
|
token.value = null;
|
||||||
|
Cookies.remove(TOKEN_KEY);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function authLogin(params: LoginInfo) {
|
||||||
|
try {
|
||||||
|
loginLoading.value = true;
|
||||||
|
const res = await login(params);
|
||||||
|
if (res.code === 200) {
|
||||||
|
setToken(res.token as string);
|
||||||
|
await userStore.fetchUserInfo();
|
||||||
|
message.success('登录成功');
|
||||||
|
await router.push('/');
|
||||||
|
return res;
|
||||||
|
} else {
|
||||||
|
// 抛出错误，让调用方处理
|
||||||
|
throw new Error(res.msg || '登录失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
throw error;
|
||||||
|
} finally {
|
||||||
|
loginLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function logout() {
|
||||||
|
// 在实际应用中，这里可以调用后端的退出登录接口
|
||||||
|
// await doLogoutApi();
|
||||||
|
clearToken();
|
||||||
|
userStore.clearUserInfo();
|
||||||
|
await router.push('/login');
|
||||||
|
message.success('已成功退出');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
token,
|
||||||
|
loginLoading,
|
||||||
|
authLogin,
|
||||||
|
logout,
|
||||||
|
};
|
||||||
|
});
|
||||||
2
src/store/index.ts
Normal file
2
src/store/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './auth';
|
||||||
|
export * from './user';
|
||||||
22
src/store/user.ts
Normal file
22
src/store/user.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { defineStore } from 'pinia';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
const USERNAME_KEY = 'username';
|
||||||
|
|
||||||
|
export const useUserStore = defineStore('user', {
|
||||||
|
state: () => ({
|
||||||
|
username: Cookies.get(USERNAME_KEY) || null,
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
async fetchUserInfo() {
|
||||||
|
// Simulate API call
|
||||||
|
const fetchedUsername = 'mock_user';
|
||||||
|
this.username = fetchedUsername;
|
||||||
|
Cookies.set(USERNAME_KEY, fetchedUsername);
|
||||||
|
},
|
||||||
|
clearUserInfo() {
|
||||||
|
this.username = null;
|
||||||
|
Cookies.remove(USERNAME_KEY);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
15
src/utils/auth.ts
Normal file
15
src/utils/auth.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
const TokenKey = 'Admin-Token'
|
||||||
|
|
||||||
|
export function getToken() {
|
||||||
|
return Cookies.get(TokenKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setToken(token: string) {
|
||||||
|
return Cookies.set(TokenKey, token)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function removeToken() {
|
||||||
|
return Cookies.remove(TokenKey)
|
||||||
|
}
|
||||||
71
src/utils/dateUtils.ts
Normal file
71
src/utils/dateUtils.ts
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 格式化日期时间
|
||||||
|
* @param date 日期对象或时间戳
|
||||||
|
* @param format 格式字符串，默认 'YYYY-MM-DD HH:mm:ss'
|
||||||
|
* @returns 格式化后的时间字符串
|
||||||
|
*/
|
||||||
|
export function formatDateTime(date: Date | number | string, format = 'YYYY-MM-DD HH:mm:ss'): string {
|
||||||
|
const d = new Date(date);
|
||||||
|
|
||||||
|
if (isNaN(d.getTime())) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(d.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(d.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(d.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(d.getSeconds()).padStart(2, '0');
|
||||||
|
|
||||||
|
return format
|
||||||
|
.replace('YYYY', String(year))
|
||||||
|
.replace('MM', month)
|
||||||
|
.replace('DD', day)
|
||||||
|
.replace('HH', hours)
|
||||||
|
.replace('mm', minutes)
|
||||||
|
.replace('ss', seconds);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前时间字符串
|
||||||
|
* @param format 格式字符串
|
||||||
|
* @returns 当前时间字符串
|
||||||
|
*/
|
||||||
|
export function getCurrentTime(format = 'YYYY-MM-DD HH:mm:ss'): string {
|
||||||
|
return formatDateTime(new Date(), format);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取实时时间（用于显示）
|
||||||
|
* @param format 格式字符串
|
||||||
|
* @returns 响应式时间字符串
|
||||||
|
*/
|
||||||
|
export function useRealTime(format = 'YYYY-MM-DD HH:mm:ss') {
|
||||||
|
const currentTime = ref(getCurrentTime(format));
|
||||||
|
let timer: NodeJS.Timeout | null = null;
|
||||||
|
|
||||||
|
const startTimer = () => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
currentTime.value = getCurrentTime(format);
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopTimer = () => {
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(startTimer);
|
||||||
|
onBeforeUnmount(stopTimer);
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentTime,
|
||||||
|
startTimer,
|
||||||
|
stopTimer
|
||||||
|
};
|
||||||
|
}
|
||||||
33
src/utils/useDialog.ts
Normal file
33
src/utils/useDialog.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dialog控制Hook
|
||||||
|
* @returns visible（显隐状态）、show（显示）、hide（隐藏）、toggle（切换）
|
||||||
|
*/
|
||||||
|
export function useDialog(initialVisible:boolean = false): {
|
||||||
|
visible: import('vue').Ref<boolean>,
|
||||||
|
show: () => void,
|
||||||
|
hide: () => void,
|
||||||
|
toggle: () => void
|
||||||
|
} {
|
||||||
|
const visible = ref(initialVisible);
|
||||||
|
|
||||||
|
const show = () => {
|
||||||
|
visible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const hide = () => {
|
||||||
|
visible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
visible.value = !visible.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
visible,
|
||||||
|
show,
|
||||||
|
hide,
|
||||||
|
toggle
|
||||||
|
};
|
||||||
|
}
|
||||||
41
src/utils/useLoading.ts
Normal file
41
src/utils/useLoading.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loading控制Hook
|
||||||
|
* @returns loading（加载状态）、startLoading（开始加载）、stopLoading（停止加载）、withLoading（包装异步函数）
|
||||||
|
*/
|
||||||
|
export function useLoading(initialLoading = false) {
|
||||||
|
const loading = ref(initialLoading);
|
||||||
|
|
||||||
|
const startLoading = () => {
|
||||||
|
loading.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopLoading = () => {
|
||||||
|
loading.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 包装异步函数，自动控制loading状态
|
||||||
|
* @param fn 异步函数
|
||||||
|
* @returns 包装后的函数
|
||||||
|
*/
|
||||||
|
const withLoading = <T extends (...args: any[]) => Promise<any>>(fn: T): T => {
|
||||||
|
return (async (...args: any[]) => {
|
||||||
|
startLoading();
|
||||||
|
try {
|
||||||
|
const result = await fn(...args);
|
||||||
|
return result;
|
||||||
|
} finally {
|
||||||
|
stopLoading();
|
||||||
|
}
|
||||||
|
}) as T;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
loading,
|
||||||
|
startLoading,
|
||||||
|
stopLoading,
|
||||||
|
withLoading
|
||||||
|
};
|
||||||
|
}
|
||||||
11
src/utils/uuidUtils.ts
Normal file
11
src/utils/uuidUtils.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* 生成一个随机的UUID v4
|
||||||
|
* @returns 生成的UUID字符串
|
||||||
|
*/
|
||||||
|
export function generateUUID(): string {
|
||||||
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||||
|
const r = Math.random() * 16 | 0;
|
||||||
|
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||||
|
return v.toString(16);
|
||||||
|
});
|
||||||
|
}
|
||||||
301
src/views/index.vue
Normal file
301
src/views/index.vue
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ipc-dashboard">
|
||||||
|
<Header title="过站工控机">
|
||||||
|
<template #right>
|
||||||
|
<a-button @click="handleLogout">退出登录</a-button>
|
||||||
|
</template>
|
||||||
|
</Header>
|
||||||
|
|
||||||
|
<div class="menu-grid">
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/pwoManage')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-building />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">工单管理</div>
|
||||||
|
<div class="desc">管理生产工单和进度</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/stationControl')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-monitor />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">游站控制</div>
|
||||||
|
<div class="desc">设备状态监控和控制</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dispatch')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-package />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">出站管理</div>
|
||||||
|
<div class="desc">产品出站和质量检测</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/hold')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-server />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">Hold管理</div>
|
||||||
|
<div class="desc">异常处理和Hold状态管理</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/dataAnalysis')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-bar-chart-3 />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">数据分析</div>
|
||||||
|
<div class="desc">生产数据统计分析</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/maintenance')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-wrench />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">设备维护</div>
|
||||||
|
<div class="desc">设备保养和维修记录</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/personnel')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-users />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">人员管理</div>
|
||||||
|
<div class="desc">操作人员及权限管理</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
|
||||||
|
<a-card class="menu-card" shadow="hover" @click="handleJumpTo('/settings')">
|
||||||
|
<div class="icon-wrap">
|
||||||
|
<i-lucide-settings />
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="title">系统设置</div>
|
||||||
|
<div class="desc">系统参数配置</div>
|
||||||
|
</div>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { message, Modal } from 'ant-design-vue';
|
||||||
|
import { useAuthStore, useUserStore } from '@/store';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const { username } = storeToRefs(userStore);
|
||||||
|
const { token } = storeToRefs(authStore);
|
||||||
|
const loggedIn = ref(Boolean(token.value));
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '提示',
|
||||||
|
content: `是否确认退出登录：${username.value}`,
|
||||||
|
okText: '确定',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk: () => {
|
||||||
|
message.success('已退出');
|
||||||
|
},
|
||||||
|
onCancel: () => {
|
||||||
|
message.error('操作失败');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleJumpTo = (path) => {
|
||||||
|
if (!loggedIn.value) {
|
||||||
|
message.warning("尚未登录，请先登录");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
router.push({ path });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ipc-dashboard {
|
||||||
|
background: #f5f7fa;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-grid {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 8vh 6vh;
|
||||||
|
gap: 4%;
|
||||||
|
row-gap: 6vh;
|
||||||
|
|
||||||
|
.menu-card {
|
||||||
|
width: 22%;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 1vw;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 24px 16px;
|
||||||
|
gap: 1vh;
|
||||||
|
|
||||||
|
.icon-wrap {
|
||||||
|
width: 5vw;
|
||||||
|
height: 5vw;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(180deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.2vw;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
color: #8b96a7;
|
||||||
|
font-size: 0.9vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.login-dialog) {
|
||||||
|
.ant-modal {
|
||||||
|
width: 48vw;
|
||||||
|
left: 26vw;
|
||||||
|
border-radius: 16px !important;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-header {
|
||||||
|
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 24px 20px !important;
|
||||||
|
|
||||||
|
.ant-modal-title {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-close-x {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-body {
|
||||||
|
padding: 32px 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
.ant-form-item {
|
||||||
|
margin-bottom: 22px;
|
||||||
|
|
||||||
|
.ant-form-item-label > label {
|
||||||
|
color: #1f2937;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input {
|
||||||
|
font-size: 16px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 0 1rem;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
border-color: #0c6bd1;
|
||||||
|
box-shadow: 0 0 0 3px rgba(12, 107, 209, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-password-icon {
|
||||||
|
color: #bfbfbf;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #0c6bd1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-modal-footer {
|
||||||
|
padding: 20px 28px !important;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
background: #fafafa;
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 10px 32px !important;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:not(.btn-primary) {
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
color: #595959;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #0c6bd1;
|
||||||
|
color: #0c6bd1;
|
||||||
|
background: #f0f7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: linear-gradient(135deg, #0c6bd1 0%, #1c6fb8 100%);
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0 4px 16px rgba(12, 107, 209, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
520
src/views/login.vue
Normal file
520
src/views/login.vue
Normal file
@@ -0,0 +1,520 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import { getCaptcha } from '@/api/system'
|
||||||
|
import type { LoginInfo } from '@/api/system/model'
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
import { useAuthStore } from '@/store';
|
||||||
|
import { storeToRefs } from 'pinia';
|
||||||
|
|
||||||
|
const authStore = useAuthStore();
|
||||||
|
const { loginLoading } = storeToRefs(authStore);
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive<LoginInfo>({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
uuid: '',
|
||||||
|
code: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 验证码图片
|
||||||
|
const captchaImg = ref('')
|
||||||
|
const captchaLoading = ref(false)
|
||||||
|
const loadCaptchaFail = ref(false)
|
||||||
|
|
||||||
|
// 表单验证规则
|
||||||
|
const rules: Record<string, Rule[]> = {
|
||||||
|
username: [
|
||||||
|
{ required: true, message: '请输入用户名', trigger: 'change' }
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{ required: true, message: '请输入密码', trigger: 'change' }
|
||||||
|
],
|
||||||
|
code: [
|
||||||
|
{ required: true, message: '请输入验证码', trigger: 'change' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取验证码
|
||||||
|
const refreshCaptcha = async () => {
|
||||||
|
try {
|
||||||
|
captchaImg.value = ''
|
||||||
|
captchaLoading.value = true
|
||||||
|
await getCaptcha().then((res: any) => {
|
||||||
|
loadCaptchaFail.value = false;
|
||||||
|
if (res.captchaOnOff) {
|
||||||
|
captchaImg.value = "data:image/gif;base64," + res.img
|
||||||
|
rules.code[0].required = true;
|
||||||
|
} else {
|
||||||
|
rules.code[0].required = false;
|
||||||
|
}
|
||||||
|
formData.uuid = res.uuid
|
||||||
|
formData.code = '' // 清空验证码输入
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
loadCaptchaFail.value = true;
|
||||||
|
message.error('获取验证码失败')
|
||||||
|
console.error('获取验证码失败:', error)
|
||||||
|
} finally {
|
||||||
|
captchaLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录处理
|
||||||
|
const handleLogin = async () => {
|
||||||
|
try {
|
||||||
|
await authStore.authLogin(formData);
|
||||||
|
} catch (error: any) {
|
||||||
|
message.error(error.message || '登录失败');
|
||||||
|
await refreshCaptcha();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取验证码
|
||||||
|
refreshCaptcha()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<!-- 背景图 -->
|
||||||
|
<div class="login-background"></div>
|
||||||
|
|
||||||
|
<!-- 登录框 -->
|
||||||
|
<div class="login-box">
|
||||||
|
<div class="login-header">
|
||||||
|
<h2 class="login-title">
|
||||||
|
<i-lucide-cpu class="title-icon" />
|
||||||
|
工业控制系统 HMI
|
||||||
|
</h2>
|
||||||
|
<p class="login-subtitle">请登录您的账户</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-form
|
||||||
|
:model="formData"
|
||||||
|
:rules="rules"
|
||||||
|
@finish="handleLogin"
|
||||||
|
class="login-form"
|
||||||
|
layout="vertical"
|
||||||
|
>
|
||||||
|
<!-- 用户名 -->
|
||||||
|
<a-form-item name="username" class="form-item">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.username"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
size="large"
|
||||||
|
class="login-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-lucide-user class="input-icon" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 密码 -->
|
||||||
|
<a-form-item name="password" class="form-item">
|
||||||
|
<a-input-password
|
||||||
|
v-model:value="formData.password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
size="large"
|
||||||
|
class="login-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-lucide-lock class="input-icon" />
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 验证码 -->
|
||||||
|
<a-form-item name="code" class="form-item" v-if="rules.code[0].required">
|
||||||
|
<div class="captcha-container">
|
||||||
|
<a-input
|
||||||
|
v-model:value="formData.code"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
size="large"
|
||||||
|
class="login-input captcha-input"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<i-lucide-shield-check class="input-icon" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<div class="captcha-image-container" @click="refreshCaptcha">
|
||||||
|
<img
|
||||||
|
v-if="captchaImg"
|
||||||
|
:src="captchaImg"
|
||||||
|
alt="验证码"
|
||||||
|
class="captcha-image"
|
||||||
|
/>
|
||||||
|
<div v-else-if="captchaLoading" class="captcha-loading">
|
||||||
|
<i-lucide-loader class="loading-icon" />
|
||||||
|
</div>
|
||||||
|
<div v-else-if="!captchaLoading && loadCaptchaFail" class="captcha-loading">
|
||||||
|
获取失败
|
||||||
|
</div>
|
||||||
|
<div class="captcha-refresh-hint">
|
||||||
|
<i-lucide-refresh-cw class="refresh-icon" />
|
||||||
|
点击刷新
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<!-- 登录按钮 -->
|
||||||
|
<a-form-item class="form-item">
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
html-type="submit"
|
||||||
|
size="large"
|
||||||
|
:loading="loginLoading"
|
||||||
|
class="login-button"
|
||||||
|
block
|
||||||
|
>
|
||||||
|
{{ loginLoading ? '登录中...' : '登录' }}
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
// 变量定义
|
||||||
|
$primary-color: #4a90e2;
|
||||||
|
$primary-light: #5ba0f2;
|
||||||
|
$primary-dark: #3a7bd5;
|
||||||
|
$success-color: #52c41a;
|
||||||
|
$warning-color: #faad14;
|
||||||
|
$error-color: #ff4d4f;
|
||||||
|
$white: #ffffff;
|
||||||
|
$text-light: #b8d4f0;
|
||||||
|
$text-dark: #333333;
|
||||||
|
$bg-overlay: rgba(255, 255, 255, 0.1);
|
||||||
|
$bg-glass: rgba(255, 255, 255, 0.15);
|
||||||
|
$border-light: rgba(255, 255, 255, 0.3);
|
||||||
|
$shadow-light: rgba(0, 0, 0, 0.1);
|
||||||
|
$shadow-medium: rgba(0, 0, 0, 0.2);
|
||||||
|
$border-radius: 8px;
|
||||||
|
$border-radius-lg: 12px;
|
||||||
|
$spacing-sm: 8px;
|
||||||
|
$spacing-md: 16px;
|
||||||
|
$spacing-lg: 24px;
|
||||||
|
$spacing-xl: 32px;
|
||||||
|
$transition: all 0.3s ease;
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('/bg.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
filter: blur(2px);
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(74, 144, 226, 0.3) 0%,
|
||||||
|
rgba(58, 123, 213, 0.4) 50%,
|
||||||
|
rgba(91, 160, 242, 0.3) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
width: 420px;
|
||||||
|
padding: $spacing-xl;
|
||||||
|
background: $bg-glass;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid $border-light;
|
||||||
|
border-radius: $border-radius-lg;
|
||||||
|
box-shadow:
|
||||||
|
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||||
|
0 4px 16px rgba(0, 0, 0, 0.1),
|
||||||
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||||
|
animation: slideInUp 0.6s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(30px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: $spacing-xl;
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $white;
|
||||||
|
margin: 0 0 $spacing-sm 0;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: $primary-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: $text-light;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: $spacing-lg;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-input {
|
||||||
|
height: 48px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: $border-radius;
|
||||||
|
transition: $transition;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(255, 255, 255, 0.4);
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: $primary-light;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-input) {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: $white;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-input-password-icon) {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-icon {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-container {
|
||||||
|
display: flex;
|
||||||
|
gap: $spacing-md;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.captcha-input {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-image-container {
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
height: 48px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: $border-radius;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: $transition;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $primary-light;
|
||||||
|
|
||||||
|
.captcha-refresh-hint {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-loading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
.loading-icon {
|
||||||
|
color: $white;
|
||||||
|
font-size: 20px;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-refresh-hint {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: $white;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: $transition;
|
||||||
|
|
||||||
|
.refresh-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-button {
|
||||||
|
height: 48px;
|
||||||
|
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: $transition;
|
||||||
|
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: linear-gradient(135deg, $primary-light 0%, $primary-color 100%);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-icon {
|
||||||
|
margin-right: $spacing-sm;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-btn-loading-icon) {
|
||||||
|
margin-right: $spacing-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证错误样式
|
||||||
|
:deep(.ant-form-item-has-error) {
|
||||||
|
.login-input {
|
||||||
|
border-color: $error-color;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-image-container {
|
||||||
|
border-color: $error-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.ant-form-item-explain-error) {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
background: rgba(255, 77, 79, 0.1);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式设计
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.login-box {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 380px;
|
||||||
|
padding: $spacing-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-container {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.captcha-image-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.login-box {
|
||||||
|
padding: $spacing-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-header .login-title {
|
||||||
|
font-size: 20px;
|
||||||
|
|
||||||
|
.title-icon {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
0
src/views/pwoManage/index.vue
Normal file
0
src/views/pwoManage/index.vue
Normal file
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
17
tsconfig.app.json
Normal file
17
tsconfig.app.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
},
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"composite": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
}
|
||||||
19
tsconfig.json
Normal file
19
tsconfig.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
"composite": true,
|
||||||
|
"declaration": true,
|
||||||
|
"emitDeclarationOnly": true,
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
28
tsconfig.node.json
Normal file
28
tsconfig.node.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"composite": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"noEmit": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"vite.config.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/shim-vue.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
56
vite.config.ts
Normal file
56
vite.config.ts
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { defineConfig, loadEnv } from 'vite';
|
||||||
|
import Components from "unplugin-vue-components/vite"; // 按需组件自动导入
|
||||||
|
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import Icons from 'unplugin-icons/vite';
|
||||||
|
import IconsResolver from 'unplugin-icons/resolver';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig(({ mode }) => {
|
||||||
|
|
||||||
|
const env = loadEnv(mode, process.cwd());
|
||||||
|
|
||||||
|
return {
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
"/api": {
|
||||||
|
target: env.VITE_APP_BASE_URL,
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api\//, "/"),
|
||||||
|
},
|
||||||
|
"/prod-api": {
|
||||||
|
target: env.VITE_APP_BASE_URL,
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/prod-api\//, "/"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
Components({
|
||||||
|
dts: true, //生成components.d.ts 全局定义文件
|
||||||
|
resolvers: [
|
||||||
|
AntDesignVueResolver({
|
||||||
|
//对使用到的全局ant design vue组件进行类型导入
|
||||||
|
importStyle: false, // 不动态引入css,这个不强求
|
||||||
|
}),
|
||||||
|
// 自动导入 lucide 图标
|
||||||
|
IconsResolver({
|
||||||
|
prefix: "i", // 比如用 <i-a-arrow-down />
|
||||||
|
enabledCollections: ["lucide"],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
include: [/\.vue$/, /\.vue\?vue/, /\.md$/, /\.tsx$/], //包含的文件类型
|
||||||
|
}),
|
||||||
|
Icons({
|
||||||
|
autoInstall: true, // 没安装的图标库会自动下载
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user