更新代码
This commit is contained in:
parent
81d7bd6fd9
commit
6857d2c3de
20
.htaccess
20
.htaccess
@ -1 +1,21 @@
|
|||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
Options +FollowSymlinks -Multiviews
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# 允许跨域请求
|
||||||
|
<IfModule mod_headers.c>
|
||||||
|
Header always set Access-Control-Allow-Origin "*"
|
||||||
|
Header always set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
|
||||||
|
Header always set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With"
|
||||||
|
Header always set Access-Control-Max-Age "86400"
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# 处理OPTIONS预检请求
|
||||||
|
RewriteEngine On
|
||||||
|
RewriteCond %{REQUEST_METHOD} OPTIONS
|
||||||
|
RewriteRule ^(.*)$ $1 [R=200,L]
|
||||||
BIN
frontend/.env
Normal file
BIN
frontend/.env
Normal file
Binary file not shown.
4
frontend/.env.development
Normal file
4
frontend/.env.development
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
VITE_APP_ENV=development
|
||||||
|
VITE_APP_DEBUG_MODE=true
|
||||||
|
VITE_APP_TITLE=项目管理系统
|
||||||
|
VITE_APP_API_BASE_URL=https://www.yunzer.cn/api
|
||||||
4
frontend/.env.production
Normal file
4
frontend/.env.production
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
VITE_APP_ENV=production
|
||||||
|
VITE_APP_DEBUG_MODE=false
|
||||||
|
VITE_APP_TITLE=项目管理系统
|
||||||
|
VITE_APP_API_BASE_URL=https://www.yunzer.cn/api
|
||||||
24
frontend/.gitignore
vendored
Normal file
24
frontend/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# 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?
|
||||||
3
frontend/.vscode/extensions.json
vendored
Normal file
3
frontend/.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
162
frontend/API_SETUP.md
Normal file
162
frontend/API_SETUP.md
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
# API 设置说明
|
||||||
|
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
本项目已从模拟登录改为真实的API调用,支持通过数据库进行用户认证。
|
||||||
|
|
||||||
|
## 后端API要求
|
||||||
|
|
||||||
|
### 1. 基础配置
|
||||||
|
|
||||||
|
- **API基础URL**: `http://localhost:8000/api` (开发环境)
|
||||||
|
- **请求格式**: JSON
|
||||||
|
- **认证方式**: Bearer Token
|
||||||
|
|
||||||
|
### 2. 必需接口
|
||||||
|
|
||||||
|
#### 用户登录
|
||||||
|
```
|
||||||
|
POST /api/user/login
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
请求体:
|
||||||
|
{
|
||||||
|
"username": "用户名",
|
||||||
|
"password": "密码"
|
||||||
|
}
|
||||||
|
|
||||||
|
响应格式:
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"message": "登录成功",
|
||||||
|
"data": {
|
||||||
|
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||||||
|
"userInfo": {
|
||||||
|
"id": 1,
|
||||||
|
"username": "admin",
|
||||||
|
"name": "管理员",
|
||||||
|
"avatar": "/static/images/avatar.png",
|
||||||
|
"role": "admin"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 获取用户信息
|
||||||
|
```
|
||||||
|
GET /api/user/info
|
||||||
|
Authorization: Bearer {token}
|
||||||
|
|
||||||
|
响应格式:
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"message": "获取成功",
|
||||||
|
"data": {
|
||||||
|
"id": 1,
|
||||||
|
"username": "admin",
|
||||||
|
"name": "管理员",
|
||||||
|
"avatar": "/static/images/avatar.png",
|
||||||
|
"role": "admin"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 用户登出
|
||||||
|
```
|
||||||
|
POST /api/user/logout
|
||||||
|
Authorization: Bearer {token}
|
||||||
|
|
||||||
|
响应格式:
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"message": "登出成功",
|
||||||
|
"data": null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 修改密码
|
||||||
|
```
|
||||||
|
POST /api/user/change-password
|
||||||
|
Authorization: Bearer {token}
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
请求体:
|
||||||
|
{
|
||||||
|
"oldPassword": "旧密码",
|
||||||
|
"newPassword": "新密码"
|
||||||
|
}
|
||||||
|
|
||||||
|
响应格式:
|
||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"message": "密码修改成功",
|
||||||
|
"data": null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 错误处理
|
||||||
|
|
||||||
|
所有接口都应该返回统一的错误格式:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"code": 400,
|
||||||
|
"message": "错误描述",
|
||||||
|
"data": null
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
常见HTTP状态码:
|
||||||
|
- `200`: 成功
|
||||||
|
- `400`: 请求参数错误
|
||||||
|
- `401`: 未授权(token无效或过期)
|
||||||
|
- `500`: 服务器内部错误
|
||||||
|
|
||||||
|
## 环境配置
|
||||||
|
|
||||||
|
### 开发环境
|
||||||
|
- 后端API运行在 `http://localhost:8000`
|
||||||
|
- 前端开发服务器运行在 `http://localhost:5173`
|
||||||
|
|
||||||
|
### 生产环境
|
||||||
|
- 使用相对路径 `/api`
|
||||||
|
- 需要配置反向代理
|
||||||
|
|
||||||
|
## 数据库表结构建议
|
||||||
|
|
||||||
|
### 用户表 (users)
|
||||||
|
```sql
|
||||||
|
CREATE TABLE users (
|
||||||
|
id INT PRIMARY KEY AUTO_INCREMENT,
|
||||||
|
username VARCHAR(50) UNIQUE NOT NULL,
|
||||||
|
password VARCHAR(255) NOT NULL, -- 加密后的密码
|
||||||
|
name VARCHAR(100) NOT NULL,
|
||||||
|
avatar VARCHAR(255),
|
||||||
|
role VARCHAR(20) DEFAULT 'user',
|
||||||
|
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### 示例数据
|
||||||
|
```sql
|
||||||
|
INSERT INTO users (username, password, name, role) VALUES
|
||||||
|
('admin', '$2y$10$...', '管理员', 'admin'),
|
||||||
|
('user1', '$2y$10$...', '普通用户', 'user');
|
||||||
|
```
|
||||||
|
|
||||||
|
## 注意事项
|
||||||
|
|
||||||
|
1. **密码安全**: 使用bcrypt等加密算法存储密码
|
||||||
|
2. **Token安全**: 使用JWT等安全的token机制
|
||||||
|
3. **CORS配置**: 确保前端可以访问后端API
|
||||||
|
4. **错误处理**: 提供清晰的错误信息
|
||||||
|
5. **日志记录**: 记录登录、登出等重要操作
|
||||||
|
|
||||||
|
## 测试
|
||||||
|
|
||||||
|
1. 启动后端服务
|
||||||
|
2. 确保API接口正常工作
|
||||||
|
3. 启动前端开发服务器
|
||||||
|
4. 尝试使用真实用户名密码登录
|
||||||
|
5. 检查token是否正确保存和使用
|
||||||
102
frontend/README.md
Normal file
102
frontend/README.md
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
# 项目管理系统 - 前端
|
||||||
|
|
||||||
|
## 开发环境
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 启动开发服务器
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 构建生产版本
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 类型检查
|
||||||
|
```bash
|
||||||
|
npm run type-check
|
||||||
|
```
|
||||||
|
|
||||||
|
## 部署说明
|
||||||
|
|
||||||
|
### 1. 构建项目
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 部署方式
|
||||||
|
|
||||||
|
#### 方式一:直接部署 dist 目录
|
||||||
|
将 `dist` 目录中的所有文件复制到 Web 服务器的根目录或子目录中。
|
||||||
|
|
||||||
|
#### 方式二:使用静态文件服务器
|
||||||
|
```bash
|
||||||
|
# 使用 serve 包
|
||||||
|
npx serve dist
|
||||||
|
|
||||||
|
# 或使用 http-server
|
||||||
|
npx http-server dist
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 环境配置
|
||||||
|
|
||||||
|
项目已配置为支持子目录部署,主要配置:
|
||||||
|
|
||||||
|
- **基础路径**: `./` (相对路径)
|
||||||
|
- **路由模式**: Hash 模式 (`#`)
|
||||||
|
- **API 地址**: `https://api.yunzer.com.cn`
|
||||||
|
|
||||||
|
### 4. 注意事项
|
||||||
|
|
||||||
|
1. **资源路径**: 所有静态资源都使用相对路径,支持任意目录部署
|
||||||
|
2. **路由**: 使用 Hash 路由,无需服务器端配置
|
||||||
|
3. **API**: 确保 API 服务器 `api.yunzer.com.cn` 可访问
|
||||||
|
4. **HTTPS**: 生产环境建议使用 HTTPS
|
||||||
|
|
||||||
|
### 5. 环境变量
|
||||||
|
|
||||||
|
可以通过 `.env` 文件配置环境变量:
|
||||||
|
|
||||||
|
```env
|
||||||
|
VITE_APP_TITLE=项目管理系统
|
||||||
|
VITE_APP_API_BASE_URL=https://api.yunzer.com.cn
|
||||||
|
VITE_APP_API_TIMEOUT=10000
|
||||||
|
VITE_APP_ENV=production
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **框架**: Vue 3 + TypeScript
|
||||||
|
- **构建工具**: Vite
|
||||||
|
- **UI 组件**: Element Plus
|
||||||
|
- **状态管理**: Pinia
|
||||||
|
- **路由**: Vue Router
|
||||||
|
- **HTTP 客户端**: Axios
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── api/ # API 接口
|
||||||
|
├── assets/ # 静态资源
|
||||||
|
├── components/ # 公共组件
|
||||||
|
├── config/ # 配置文件
|
||||||
|
├── router/ # 路由配置
|
||||||
|
├── store/ # 状态管理
|
||||||
|
├── types/ # 类型定义
|
||||||
|
├── utils/ # 工具函数
|
||||||
|
└── views/ # 页面组件
|
||||||
|
```
|
||||||
|
|
||||||
|
## 开发规范
|
||||||
|
|
||||||
|
1. **代码风格**: 使用 ESLint + Prettier
|
||||||
|
2. **类型检查**: 使用 TypeScript 严格模式
|
||||||
|
3. **组件命名**: 使用 PascalCase
|
||||||
|
4. **文件命名**: 使用 kebab-case
|
||||||
|
5. **API 调用**: 统一使用 `@/api` 中的方法
|
||||||
86
frontend/auto-imports.d.ts
vendored
Normal file
86
frontend/auto-imports.d.ts
vendored
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// noinspection JSUnusedGlobalSymbols
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
// biome-ignore lint: disable
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
|
const ElNotification: typeof import('element-plus/es')['ElNotification']
|
||||||
|
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||||
|
const computed: typeof import('vue')['computed']
|
||||||
|
const createApp: typeof import('vue')['createApp']
|
||||||
|
const createPinia: typeof import('pinia')['createPinia']
|
||||||
|
const customRef: typeof import('vue')['customRef']
|
||||||
|
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||||
|
const defineComponent: typeof import('vue')['defineComponent']
|
||||||
|
const defineStore: typeof import('pinia')['defineStore']
|
||||||
|
const effectScope: typeof import('vue')['effectScope']
|
||||||
|
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||||
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
|
const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
|
||||||
|
const h: typeof import('vue')['h']
|
||||||
|
const inject: typeof import('vue')['inject']
|
||||||
|
const isProxy: typeof import('vue')['isProxy']
|
||||||
|
const isReactive: typeof import('vue')['isReactive']
|
||||||
|
const isReadonly: typeof import('vue')['isReadonly']
|
||||||
|
const isRef: typeof import('vue')['isRef']
|
||||||
|
const isShallow: typeof import('vue')['isShallow']
|
||||||
|
const mapActions: typeof import('pinia')['mapActions']
|
||||||
|
const mapGetters: typeof import('pinia')['mapGetters']
|
||||||
|
const mapState: typeof import('pinia')['mapState']
|
||||||
|
const mapStores: typeof import('pinia')['mapStores']
|
||||||
|
const mapWritableState: typeof import('pinia')['mapWritableState']
|
||||||
|
const markRaw: typeof import('vue')['markRaw']
|
||||||
|
const nextTick: typeof import('vue')['nextTick']
|
||||||
|
const onActivated: typeof import('vue')['onActivated']
|
||||||
|
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||||
|
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||||
|
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||||
|
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||||
|
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||||
|
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||||
|
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||||
|
const onMounted: typeof import('vue')['onMounted']
|
||||||
|
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||||
|
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||||
|
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||||
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||||
|
const provide: typeof import('vue')['provide']
|
||||||
|
const reactive: typeof import('vue')['reactive']
|
||||||
|
const readonly: typeof import('vue')['readonly']
|
||||||
|
const ref: typeof import('vue')['ref']
|
||||||
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
|
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||||
|
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||||
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
|
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||||
|
const shallowRef: typeof import('vue')['shallowRef']
|
||||||
|
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||||
|
const toRaw: typeof import('vue')['toRaw']
|
||||||
|
const toRef: typeof import('vue')['toRef']
|
||||||
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
|
const toValue: typeof import('vue')['toValue']
|
||||||
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
|
const unref: typeof import('vue')['unref']
|
||||||
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useI18n: typeof import('vue-i18n')['useI18n']
|
||||||
|
const useId: typeof import('vue')['useId']
|
||||||
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
|
const useModel: typeof import('vue')['useModel']
|
||||||
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||||
|
const watch: typeof import('vue')['watch']
|
||||||
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
|
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||||
|
}
|
||||||
40
frontend/components.d.ts
vendored
Normal file
40
frontend/components.d.ts
vendored
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
/* 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 {
|
||||||
|
ElAside: typeof import('element-plus/es')['ElAside']
|
||||||
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
|
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
|
||||||
|
ElContainer: typeof import('element-plus/es')['ElContainer']
|
||||||
|
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||||
|
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||||
|
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||||
|
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||||
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
|
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||||
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
|
ElMain: typeof import('element-plus/es')['ElMain']
|
||||||
|
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||||
|
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||||
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
|
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||||
|
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
||||||
|
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||||
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
|
ElTable: typeof import('element-plus/es')['ElTable']
|
||||||
|
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||||
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
}
|
||||||
|
}
|
||||||
13
frontend/index.html
Normal file
13
frontend/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>Vite + Vue + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3344
frontend/package-lock.json
generated
Normal file
3344
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
frontend/package.json
Normal file
35
frontend/package.json
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"@vueuse/core": "^10.11.0",
|
||||||
|
"axios": "^1.11.0",
|
||||||
|
"mitt": "^3.0.1",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"pinia-plugin-persistedstate": "^3.2.1",
|
||||||
|
"vue": "^3.5.18",
|
||||||
|
"vue-router": "^4.5.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.3.0",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.1",
|
||||||
|
"@vue/tsconfig": "^0.7.0",
|
||||||
|
"element-plus": "^2.10.7",
|
||||||
|
"sass": "^1.90.0",
|
||||||
|
"sass-loader": "^16.0.5",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"unplugin-auto-import": "^20.0.0",
|
||||||
|
"unplugin-icons": "^22.2.0",
|
||||||
|
"unplugin-vue-components": "^29.0.0",
|
||||||
|
"vite": "^7.1.2",
|
||||||
|
"vue-tsc": "^3.0.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
frontend/public/vite.svg
Normal file
1
frontend/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 |
32
frontend/src/App.vue
Normal file
32
frontend/src/App.vue
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useDark } from '@vueuse/core'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import useColorStore from '@/store/color'
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
|
import ENV_CONFIG from '@/config/env'
|
||||||
|
|
||||||
|
useDark()
|
||||||
|
|
||||||
|
const colorStore = useColorStore()
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 设置页面标题
|
||||||
|
document.title = ENV_CONFIG.APP_TITLE
|
||||||
|
// 初始化用户状态
|
||||||
|
userStore.initUserState()
|
||||||
|
// 初始化主题色
|
||||||
|
colorStore.primaryChange(colorStore.primary)
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
51
frontend/src/api/menu.ts
Normal file
51
frontend/src/api/menu.ts
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
import api from './user'
|
||||||
|
|
||||||
|
// 菜单相关接口类型定义
|
||||||
|
export interface MenuItem {
|
||||||
|
smid: number
|
||||||
|
label: string
|
||||||
|
icon_class: string
|
||||||
|
type: number
|
||||||
|
src: string
|
||||||
|
sort: number
|
||||||
|
status: number
|
||||||
|
parent_id: number
|
||||||
|
children?: MenuItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RoleItem {
|
||||||
|
group_id: number
|
||||||
|
group_name: string
|
||||||
|
status: number
|
||||||
|
create_time: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有菜单列表
|
||||||
|
export const getMenuList = () => {
|
||||||
|
return api.get('/menu/list')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据用户角色获取菜单
|
||||||
|
export const getUserMenus = () => {
|
||||||
|
return api.get('/menu/userMenus')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取角色列表
|
||||||
|
export const getRoleList = () => {
|
||||||
|
return api.get('/menu/roles')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取菜单详情
|
||||||
|
export const getMenuDetail = (id: number) => {
|
||||||
|
return api.get('/menu/detail', { params: { id } })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 临时菜单接口(使用用户控制器)
|
||||||
|
export const getTempUserMenus = () => {
|
||||||
|
return api.get('/user/menus')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 或者直接使用完整路径(如果baseURL有问题)
|
||||||
|
export const getTempUserMenusDirect = () => {
|
||||||
|
return api.get('https://www.yunzer.cn/api/user/menus')
|
||||||
|
}
|
||||||
79
frontend/src/api/user.ts
Normal file
79
frontend/src/api/user.ts
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
import ENV_CONFIG from '@/config/env'
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const api = axios.create({
|
||||||
|
baseURL: ENV_CONFIG.API_BASE_URL,
|
||||||
|
timeout: ENV_CONFIG.REQUEST_TIMEOUT,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 调试信息
|
||||||
|
console.log('API配置:', {
|
||||||
|
baseURL: ENV_CONFIG.API_BASE_URL,
|
||||||
|
timeout: ENV_CONFIG.REQUEST_TIMEOUT,
|
||||||
|
'环境变量VITE_APP_API_BASE_URL': import.meta.env.VITE_APP_API_BASE_URL
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器 - 添加token
|
||||||
|
api.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
// 调试信息
|
||||||
|
console.log('API请求:', {
|
||||||
|
method: config.method,
|
||||||
|
url: config.url,
|
||||||
|
fullURL: (config.baseURL || '') + (config.url || ''),
|
||||||
|
baseURL: config.baseURL
|
||||||
|
})
|
||||||
|
|
||||||
|
const token = localStorage.getItem(ENV_CONFIG.TOKEN_KEY)
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器 - 处理错误
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
// 直接返回响应数据,而不是整个response对象
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
// token过期,清除本地存储
|
||||||
|
localStorage.removeItem(ENV_CONFIG.TOKEN_KEY)
|
||||||
|
localStorage.removeItem(ENV_CONFIG.USER_INFO_KEY)
|
||||||
|
window.location.href = '/#/login'
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 用户登录接口
|
||||||
|
export const login = (data: { username: string; password: string }) => {
|
||||||
|
return api.post('/user/login', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户信息接口
|
||||||
|
export const getUserInfo = () => {
|
||||||
|
return api.get('/user/info')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户登出接口
|
||||||
|
export const logout = () => {
|
||||||
|
return api.post('/user/logout')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改密码接口
|
||||||
|
export const changePassword = (data: { oldPassword: string; newPassword: string }) => {
|
||||||
|
return api.post('/user/change-password', data)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
114
frontend/src/assets/css/style.css
Normal file
114
frontend/src/assets/css/style.css
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
--el-color-primary: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark {
|
||||||
|
color-scheme: dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
--el-color-primary: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #213547;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark body {
|
||||||
|
background-color: #242424;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #213547;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.dark #app {
|
||||||
|
background-color: #242424;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
body > #app,
|
||||||
|
#app > .el-container {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
BIN
frontend/src/assets/images/background.jpg
Normal file
BIN
frontend/src/assets/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
frontend/src/assets/images/background.png
Normal file
BIN
frontend/src/assets/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
BIN
frontend/src/assets/images/login_form.png
Normal file
BIN
frontend/src/assets/images/login_form.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
22
frontend/src/config/env.ts
Normal file
22
frontend/src/config/env.ts
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
// src/config/env.ts
|
||||||
|
|
||||||
|
const ENV_CONFIG = {
|
||||||
|
// API配置
|
||||||
|
API_BASE_URL: import.meta.env.VITE_APP_API_BASE_URL || 'https://www.yunzer.cn/api',
|
||||||
|
REQUEST_TIMEOUT: 10000,
|
||||||
|
|
||||||
|
// 应用配置
|
||||||
|
APP_TITLE: import.meta.env.VITE_APP_TITLE || '项目管理系统',
|
||||||
|
|
||||||
|
// 本地存储key
|
||||||
|
TOKEN_KEY: 'token',
|
||||||
|
USER_INFO_KEY: 'userInfo',
|
||||||
|
|
||||||
|
// 是否为开发环境
|
||||||
|
IS_DEV: import.meta.env.DEV,
|
||||||
|
|
||||||
|
// 是否为生产环境
|
||||||
|
IS_PROD: import.meta.env.PROD
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ENV_CONFIG;
|
||||||
39
frontend/src/data/menu.ts
Normal file
39
frontend/src/data/menu.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
const menus: IMenu[] = [
|
||||||
|
{
|
||||||
|
name: 'Home',
|
||||||
|
desc: '首页',
|
||||||
|
icon: 'House',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sys',
|
||||||
|
desc: '系统',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'AdmUserPassword',
|
||||||
|
desc: '密码更新',
|
||||||
|
key: [1, 11]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AdmUser',
|
||||||
|
desc: '管理员',
|
||||||
|
key: [1]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
icon: 'User',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'log',
|
||||||
|
desc: '日志',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'AdmUserLogin',
|
||||||
|
desc: '管理员登录',
|
||||||
|
key: [1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
icon: 'Notification',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
export default menus
|
||||||
28
frontend/src/main.ts
Normal file
28
frontend/src/main.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import '@/assets/css/style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from "./router";
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
const pinia = createPinia()
|
||||||
|
pinia.use(piniaPluginPersistedstate)
|
||||||
|
|
||||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||||
|
app.component(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
|
app.use(pinia).use(ElementPlus).use(router)
|
||||||
|
|
||||||
|
// 初始化用户状态
|
||||||
|
const userStore = useUserStore()
|
||||||
|
userStore.initUserState()
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
95
frontend/src/router/index.ts
Normal file
95
frontend/src/router/index.ts
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import { RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router'
|
||||||
|
|
||||||
|
import * as MenuUtil from '@/util/menu'
|
||||||
|
import useFastnavStore from '@/store/fastnav'
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
|
// 只保留非菜单相关的静态路由
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'Login',
|
||||||
|
component: () => import('@/views/login/index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Main',
|
||||||
|
component: () => import('@/views/main/index.vue'),
|
||||||
|
children: [], // 预定义空的子路由数组
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:catchAll(.*)',
|
||||||
|
component: () => import('@/views/error/404.vue'),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
routes,
|
||||||
|
history: createWebHashHistory()
|
||||||
|
})
|
||||||
|
|
||||||
|
let isAddRoute = false
|
||||||
|
let isUserStateInitialized = false
|
||||||
|
|
||||||
|
router.beforeEach(async (to, _from, next) => {
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 等待用户状态初始化完成
|
||||||
|
if (!isUserStateInitialized) {
|
||||||
|
await userStore.initUserState()
|
||||||
|
isUserStateInitialized = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果已登录且访问登录页,跳转到首页
|
||||||
|
if (to.path == '/login' && userStore.isLogin) {
|
||||||
|
next({ path: '/' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 如果未登录且访问非登录页,跳转到登录页
|
||||||
|
else if (to.path != '/login' && !userStore.isLogin) {
|
||||||
|
next({ path: '/login' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未登录直接放行(此时只可能是去登录页)
|
||||||
|
if (!userStore.isLogin) {
|
||||||
|
next()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 已经添加过动态路由
|
||||||
|
if (isAddRoute) {
|
||||||
|
if (to.meta.desc) {
|
||||||
|
const fastnavStore = useFastnavStore()
|
||||||
|
fastnavStore.addData(to.meta.desc as string, to.path)
|
||||||
|
}
|
||||||
|
next()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加主页子路由
|
||||||
|
isAddRoute = true
|
||||||
|
|
||||||
|
// 找到主路由
|
||||||
|
const mainRoute = router.options.routes.find((v) => v.path == '/')!
|
||||||
|
|
||||||
|
// 根据用户类型生成菜单和路由(默认使用管理员类型)
|
||||||
|
const [_genMenus, genRoutes] = MenuUtil.gen(1)
|
||||||
|
|
||||||
|
// 设置主路由的重定向和子路由
|
||||||
|
if (genRoutes.length > 0) {
|
||||||
|
mainRoute.redirect = genRoutes[0].path
|
||||||
|
mainRoute.children = genRoutes
|
||||||
|
|
||||||
|
// 添加主路由(包含子路由)
|
||||||
|
router.addRoute(mainRoute)
|
||||||
|
|
||||||
|
// 重新导航到目标路由
|
||||||
|
next({ ...to, replace: true })
|
||||||
|
} else {
|
||||||
|
// 如果没有生成路由,至少重定向到登录页
|
||||||
|
next({ path: '/login' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
29
frontend/src/store/auth.ts
Normal file
29
frontend/src/store/auth.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
|
||||||
|
const useAuthStore = defineStore('appauth', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
isLogin: false,
|
||||||
|
_userInfo: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
persist: true,
|
||||||
|
|
||||||
|
getters: {
|
||||||
|
userInfo(): IUser | null {
|
||||||
|
return this._userInfo
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
login(data: any) {
|
||||||
|
this.isLogin = true
|
||||||
|
this._userInfo = data
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
export default useAuthStore
|
||||||
115
frontend/src/store/color.ts
Normal file
115
frontend/src/store/color.ts
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
const color2rgb = (color: string) => {
|
||||||
|
return color.startsWith('#') ? hex2rgb(color) : rgb2rgb(color)
|
||||||
|
}
|
||||||
|
|
||||||
|
// rgb(255, 0, 0) | rgba(255, 0, 0) => [255, 0, 0]
|
||||||
|
const rgb2rgb = (color: string) => {
|
||||||
|
const colors = color.split('(')[1].split(')')[0].split(',')
|
||||||
|
return colors.slice(0, 3).map(item => parseInt(item.trim()))
|
||||||
|
}
|
||||||
|
|
||||||
|
// #FF0000 => [255, 0, 0]
|
||||||
|
const hex2rgb = (color: string) => {
|
||||||
|
color = color.replace('#', '')
|
||||||
|
const matchs = color.match(/../g)
|
||||||
|
|
||||||
|
const rgbs: number[] = []
|
||||||
|
for (let i = 0; i < matchs!.length; i++) {
|
||||||
|
rgbs[i] = parseInt(matchs![i], 16)
|
||||||
|
}
|
||||||
|
|
||||||
|
return rgbs
|
||||||
|
}
|
||||||
|
|
||||||
|
const rgb2hex = (r: number, g: number, b: number) => {
|
||||||
|
const hexs = [r.toString(16), g.toString(16), b.toString(16)]
|
||||||
|
|
||||||
|
for (let i = 0; i < hexs.length; i++) {
|
||||||
|
if (hexs[i].length === 1) {
|
||||||
|
hexs[i] = '0' + hexs[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return '#' + hexs.join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 颜色变亮
|
||||||
|
const lighten = (color: string, level: number) => {
|
||||||
|
const rgbs = color2rgb(color)
|
||||||
|
|
||||||
|
for (let i = 0; i < rgbs.length; i++) {
|
||||||
|
rgbs[i] = Math.floor((255 - rgbs[i]) * level + rgbs[i])
|
||||||
|
}
|
||||||
|
|
||||||
|
return rgb2hex(rgbs[0], rgbs[1], rgbs[2])
|
||||||
|
}
|
||||||
|
|
||||||
|
// 颜色变暗
|
||||||
|
const darken = (color: string, level: number) => {
|
||||||
|
const rgbs = color2rgb(color)
|
||||||
|
|
||||||
|
for (let i = 0; i < rgbs.length; i++) {
|
||||||
|
rgbs[i] = Math.floor(rgbs[i] * (1 - level))
|
||||||
|
}
|
||||||
|
|
||||||
|
return rgb2hex(rgbs[0], rgbs[1], rgbs[2])
|
||||||
|
}
|
||||||
|
|
||||||
|
const useColorStore = defineStore('appcolor', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
primary: '#409EFF',
|
||||||
|
primaryPredefines: [
|
||||||
|
'#409EFF',
|
||||||
|
'#67C23A',
|
||||||
|
'#E6A23C',
|
||||||
|
'#F56C6C',
|
||||||
|
'#909399',
|
||||||
|
'#FF6B6B',
|
||||||
|
'#4ECDC4',
|
||||||
|
'#45B7D1',
|
||||||
|
'#96CEB4',
|
||||||
|
'#FFEAA7',
|
||||||
|
'#DDA0DD',
|
||||||
|
'#98D8C8'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
primaryChange(color: string | null) {
|
||||||
|
if (!color) return
|
||||||
|
|
||||||
|
// 设置 CSS 变量
|
||||||
|
document.documentElement.style.setProperty('--el-color-primary', color)
|
||||||
|
|
||||||
|
// 生成不同深浅的主题色
|
||||||
|
const colors = {
|
||||||
|
'primary': color,
|
||||||
|
'primary-light-3': lighten(color, 0.3),
|
||||||
|
'primary-light-5': lighten(color, 0.5),
|
||||||
|
'primary-light-7': lighten(color, 0.7),
|
||||||
|
'primary-light-8': lighten(color, 0.8),
|
||||||
|
'primary-light-9': lighten(color, 0.9),
|
||||||
|
'primary-dark-2': darken(color, 0.2)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置所有主题色变量
|
||||||
|
Object.entries(colors).forEach(([key, value]) => {
|
||||||
|
document.documentElement.style.setProperty(`--el-color-${key}`, value)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
primarySave(color: string | null) {
|
||||||
|
if (!color) return
|
||||||
|
this.primary = color
|
||||||
|
this.primaryChange(color)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
persist: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useColorStore
|
||||||
108
frontend/src/store/fastnav.ts
Normal file
108
frontend/src/store/fastnav.ts
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
const idMap: Map<string, number> = new Map()
|
||||||
|
|
||||||
|
const useFastnavStore = defineStore('appfastnav', {
|
||||||
|
state: () => {
|
||||||
|
const datas: IFastnavItem[] = []
|
||||||
|
const currPath: string = ''
|
||||||
|
|
||||||
|
return {
|
||||||
|
datas,
|
||||||
|
currPath,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
persist: true,
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
addData(desc: string, path: string) {
|
||||||
|
const data = this.datas.find(item => item.path == path)
|
||||||
|
if (data) {
|
||||||
|
this.currPath = path
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.datas.push({ desc, path })
|
||||||
|
|
||||||
|
this.currPath = path
|
||||||
|
},
|
||||||
|
removeData(path: string): string {
|
||||||
|
if (this.datas.length <= 1) return ''
|
||||||
|
|
||||||
|
for (let i = 0; i < this.datas.length; i++) {
|
||||||
|
const item = this.datas[i]
|
||||||
|
if (item.path != path) continue
|
||||||
|
|
||||||
|
// 修改:删除数据
|
||||||
|
this.datas.splice(i, 1)
|
||||||
|
|
||||||
|
if (item.path != this.currPath) return ''
|
||||||
|
|
||||||
|
return i == 0 ? this.datas[0].path : this.datas[i - 1].path
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
removeOther(path: string): string {
|
||||||
|
const data = this.datas.find(item => item.path == path)
|
||||||
|
if (!data) return ''
|
||||||
|
|
||||||
|
this.idAddAll(this.datas, path)
|
||||||
|
this.datas = [data]
|
||||||
|
|
||||||
|
return path == this.currPath ? '' : path
|
||||||
|
},
|
||||||
|
removeLeft(path: string): string {
|
||||||
|
for (let i = 0; i < this.datas.length; i++) {
|
||||||
|
const data = this.datas[i]
|
||||||
|
if (data.path != path) continue
|
||||||
|
|
||||||
|
const removes = this.datas.splice(0, i)
|
||||||
|
this.idAddAll(removes)
|
||||||
|
|
||||||
|
return path == this.currPath ? '' : path
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
removeRight(path: string): string {
|
||||||
|
for (let i = 0; i < this.datas.length; i++) {
|
||||||
|
const data = this.datas[i]
|
||||||
|
if (data.path != path) continue
|
||||||
|
|
||||||
|
const removes = this.datas.splice(i + 1)
|
||||||
|
this.idAddAll(removes)
|
||||||
|
|
||||||
|
return path == this.currPath ? '' : path
|
||||||
|
}
|
||||||
|
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
idGet(path: string): string {
|
||||||
|
const id = idMap.get(path) ?? 1
|
||||||
|
return path + id
|
||||||
|
},
|
||||||
|
idAdd(path: string): number {
|
||||||
|
// 自增id并返回
|
||||||
|
const id = (idMap.get(path) ?? 1) + 1
|
||||||
|
idMap.set(path, id)
|
||||||
|
return id
|
||||||
|
},
|
||||||
|
idAddAll(datas: IFastnavItem[], excludePath?: string) {
|
||||||
|
datas.forEach(item => {
|
||||||
|
if (item.path != excludePath) {
|
||||||
|
this.idAdd(item.path)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
isFirst(path: string): boolean {
|
||||||
|
return this.datas.length > 0 && this.datas[0].path == path
|
||||||
|
},
|
||||||
|
isLast(path: string): boolean {
|
||||||
|
return this.datas.length > 0 && this.datas[this.datas.length - 1].path == path
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useFastnavStore
|
||||||
6
frontend/src/store/index.ts
Normal file
6
frontend/src/store/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
//仓库大仓库
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
//创建大仓库
|
||||||
|
const pinia = createPinia()
|
||||||
|
//对外暴露:入口文件需要安装仓库
|
||||||
|
export default pinia
|
||||||
19
frontend/src/store/menu.ts
Normal file
19
frontend/src/store/menu.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
const useMenuStore = defineStore('appmenu', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
collapse: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getters: {
|
||||||
|
width(): string {
|
||||||
|
return this.collapse ? '64px' : '200px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
persist: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useMenuStore
|
||||||
91
frontend/src/store/modules/menu.ts
Normal file
91
frontend/src/store/modules/menu.ts
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { getUserMenus, getMenuList, getTempUserMenus, type MenuItem } from '@/api/menu'
|
||||||
|
import ENV_CONFIG from '@/config/env'
|
||||||
|
|
||||||
|
interface MenuState {
|
||||||
|
menus: MenuItem[]
|
||||||
|
loading: boolean
|
||||||
|
error: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
code: number
|
||||||
|
message: string
|
||||||
|
data: T
|
||||||
|
}
|
||||||
|
|
||||||
|
const useMenuStore = defineStore('menu', {
|
||||||
|
state: (): MenuState => ({
|
||||||
|
menus: [],
|
||||||
|
loading: false,
|
||||||
|
error: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
getters: {
|
||||||
|
// 获取菜单列表
|
||||||
|
getMenus: (state) => state.menus,
|
||||||
|
|
||||||
|
// 获取加载状态
|
||||||
|
getLoading: (state) => state.loading,
|
||||||
|
|
||||||
|
// 获取错误信息
|
||||||
|
getError: (state) => state.error
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
// 获取用户菜单(使用临时接口)
|
||||||
|
async fetchUserMenus() {
|
||||||
|
this.loading = true
|
||||||
|
this.error = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await getTempUserMenus() as unknown as ApiResponse<MenuItem[]>
|
||||||
|
|
||||||
|
if (response.code === 200 && response.data) {
|
||||||
|
this.menus = response.data
|
||||||
|
} else {
|
||||||
|
throw new Error(response.message || '获取菜单失败')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
this.error = error.message || '获取菜单失败'
|
||||||
|
console.error('获取用户菜单失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取所有菜单(管理员用)
|
||||||
|
async fetchAllMenus() {
|
||||||
|
this.loading = true
|
||||||
|
this.error = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await getMenuList() as unknown as ApiResponse<MenuItem[]>
|
||||||
|
|
||||||
|
if (response.code === 200 && response.data) {
|
||||||
|
this.menus = response.data
|
||||||
|
} else {
|
||||||
|
throw new Error(response.message || '获取菜单失败')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
this.error = error.message || '获取菜单失败'
|
||||||
|
console.error('获取所有菜单失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除菜单数据
|
||||||
|
clearMenus() {
|
||||||
|
this.menus = []
|
||||||
|
this.error = null
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置错误信息
|
||||||
|
setError(error: string) {
|
||||||
|
this.error = error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useMenuStore
|
||||||
146
frontend/src/store/modules/user.ts
Normal file
146
frontend/src/store/modules/user.ts
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { login as loginApi, getUserInfo as getUserInfoApi, logout as logoutApi } from '@/api/user'
|
||||||
|
import ENV_CONFIG from '@/config/env'
|
||||||
|
|
||||||
|
interface LoginForm {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserInfo {
|
||||||
|
id: number
|
||||||
|
username: string
|
||||||
|
name: string
|
||||||
|
avatar?: string
|
||||||
|
role: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ApiResponse<T> {
|
||||||
|
code: number
|
||||||
|
message: string
|
||||||
|
data: T
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LoginResponse {
|
||||||
|
token: string
|
||||||
|
userInfo: UserInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
const useUserStore = defineStore('user', {
|
||||||
|
state: () => {
|
||||||
|
return {
|
||||||
|
token: '',
|
||||||
|
userInfo: null as UserInfo | null,
|
||||||
|
isLogin: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getters: {
|
||||||
|
// 获取用户信息
|
||||||
|
getUserInfo: (state) => state.userInfo,
|
||||||
|
// 获取token
|
||||||
|
getToken: (state) => state.token,
|
||||||
|
// 是否已登录
|
||||||
|
getIsLogin: (state) => state.isLogin
|
||||||
|
},
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
// 用户登录
|
||||||
|
async userLogin(loginForm: LoginForm) {
|
||||||
|
try {
|
||||||
|
const response = await loginApi(loginForm) as unknown as ApiResponse<LoginResponse>
|
||||||
|
|
||||||
|
// 假设API返回格式为 { code: 200, data: { token: string, userInfo: UserInfo } }
|
||||||
|
if (response.code === 200 && response.data) {
|
||||||
|
const { token, userInfo } = response.data
|
||||||
|
|
||||||
|
// 保存登录状态
|
||||||
|
this.token = token
|
||||||
|
this.userInfo = userInfo
|
||||||
|
this.isLogin = true
|
||||||
|
|
||||||
|
// 保存到 localStorage
|
||||||
|
localStorage.setItem(ENV_CONFIG.TOKEN_KEY, token)
|
||||||
|
localStorage.setItem(ENV_CONFIG.USER_INFO_KEY, JSON.stringify(userInfo))
|
||||||
|
|
||||||
|
return userInfo
|
||||||
|
} else {
|
||||||
|
throw new Error(response.message || '登录失败')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
// 处理不同类型的错误
|
||||||
|
if (error.response?.data?.message) {
|
||||||
|
throw new Error(error.response.data.message)
|
||||||
|
} else if (error.message) {
|
||||||
|
throw new Error(error.message)
|
||||||
|
} else {
|
||||||
|
throw new Error('登录失败,请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户登出
|
||||||
|
async userLogout() {
|
||||||
|
try {
|
||||||
|
await logoutApi()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('登出API调用失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.token = ''
|
||||||
|
this.userInfo = null
|
||||||
|
this.isLogin = false
|
||||||
|
|
||||||
|
// 清除 localStorage
|
||||||
|
localStorage.removeItem(ENV_CONFIG.TOKEN_KEY)
|
||||||
|
localStorage.removeItem(ENV_CONFIG.USER_INFO_KEY)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化用户状态(从 localStorage 恢复)
|
||||||
|
async initUserState() {
|
||||||
|
const token = localStorage.getItem(ENV_CONFIG.TOKEN_KEY)
|
||||||
|
const userInfoStr = localStorage.getItem(ENV_CONFIG.USER_INFO_KEY)
|
||||||
|
|
||||||
|
if (token && userInfoStr) {
|
||||||
|
try {
|
||||||
|
// 验证token是否有效
|
||||||
|
const response = await getUserInfoApi() as unknown as ApiResponse<UserInfo>
|
||||||
|
if (response.code === 200 && response.data) {
|
||||||
|
this.token = token
|
||||||
|
this.userInfo = response.data
|
||||||
|
this.isLogin = true
|
||||||
|
} else {
|
||||||
|
// token无效,清除本地存储但不调用logout API
|
||||||
|
this.clearUserState()
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('获取用户信息失败:', error)
|
||||||
|
// 网络错误时,不清除本地状态,保持用户登录状态
|
||||||
|
// 只有在明确知道token无效时才清除
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
this.clearUserState()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除用户状态(不调用API)
|
||||||
|
clearUserState() {
|
||||||
|
this.token = ''
|
||||||
|
this.userInfo = null
|
||||||
|
this.isLogin = false
|
||||||
|
|
||||||
|
// 清除 localStorage
|
||||||
|
localStorage.removeItem(ENV_CONFIG.TOKEN_KEY)
|
||||||
|
localStorage.removeItem(ENV_CONFIG.USER_INFO_KEY)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
persist: {
|
||||||
|
key: 'user-store',
|
||||||
|
storage: localStorage,
|
||||||
|
paths: ['token', 'userInfo', 'isLogin']
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default useUserStore
|
||||||
20
frontend/src/types/index.d.ts
vendored
Normal file
20
frontend/src/types/index.d.ts
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
interface IMenu {
|
||||||
|
name: string
|
||||||
|
desc: string
|
||||||
|
|
||||||
|
key?: number[] //菜单权限(1:管理员|11:游客),没有配置或者为空数组则所有角色都有权限
|
||||||
|
route?: string //路由
|
||||||
|
children?: IMenu[] //子菜单
|
||||||
|
redirect?: string //如果有子菜单,要重定向到第一个子菜单
|
||||||
|
icon?: string //菜单图标(一级菜单才有)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IFastnavItem {
|
||||||
|
desc: string
|
||||||
|
path: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IUser {
|
||||||
|
account: string
|
||||||
|
type: number
|
||||||
|
}
|
||||||
123
frontend/src/util/menu.ts
Normal file
123
frontend/src/util/menu.ts
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import menus from "@/data/menu"
|
||||||
|
import { RouteRecordRaw } from "vue-router"
|
||||||
|
|
||||||
|
// 使用相对路径,vite 的 import.meta.glob 会返回 /src/views/... 格式的key
|
||||||
|
const views = import.meta.glob('@/views/**/*.vue')
|
||||||
|
|
||||||
|
// 创建一个映射,将 @/views/... 格式的路径映射到实际的组件
|
||||||
|
const viewsMap = new Map()
|
||||||
|
for (const [key, component] of Object.entries(views)) {
|
||||||
|
// 将 /src/views/... 转换为 @/views/... 格式作为key
|
||||||
|
const mappedKey = key.replace('/src/views/', '@/views/')
|
||||||
|
viewsMap.set(mappedKey, component)
|
||||||
|
// 同时保留原始key
|
||||||
|
viewsMap.set(key, component)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成菜单和路由
|
||||||
|
export const gen = (userType: number): [IMenu[], RouteRecordRaw[]] => {
|
||||||
|
return gen2(userType, menus, '', [], [])
|
||||||
|
}
|
||||||
|
|
||||||
|
const gen2 = (
|
||||||
|
userType: number,
|
||||||
|
menus: IMenu[],
|
||||||
|
parentPath: string,
|
||||||
|
genMenus: IMenu[],
|
||||||
|
genRoutes: RouteRecordRaw[]
|
||||||
|
): [IMenu[], RouteRecordRaw[]] => {
|
||||||
|
for (let i = 0; i < menus.length; i++) {
|
||||||
|
const menuTmp = menus[i]
|
||||||
|
|
||||||
|
// 权限校验
|
||||||
|
if (menuTmp.key && menuTmp.key.length > 0 && menuTmp.key.indexOf(userType) < 0) continue
|
||||||
|
|
||||||
|
const menu = { ...menuTmp }
|
||||||
|
// 处理路由拼接,避免多余斜杠
|
||||||
|
if (parentPath) {
|
||||||
|
// 如果父路径以斜杠结尾,直接拼接
|
||||||
|
if (parentPath.endsWith('/')) {
|
||||||
|
menu.route = `${parentPath}${menu.name}`
|
||||||
|
} else {
|
||||||
|
menu.route = `${parentPath}/${menu.name}`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
menu.route = `/${menu.name}`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (menu.children) {
|
||||||
|
const [genMenusChild, genRoutesChild] = gen2(userType, menu.children, menu.route, [], [])
|
||||||
|
if (genMenusChild.length > 0) {
|
||||||
|
menu.children = genMenusChild
|
||||||
|
|
||||||
|
genMenus.push(menu)
|
||||||
|
genRoutes.push({
|
||||||
|
path: menu.route,
|
||||||
|
name: menu.name,
|
||||||
|
redirect: genMenusChild[0].route,
|
||||||
|
children: genRoutesChild,
|
||||||
|
meta: {
|
||||||
|
desc: menu.desc
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
genMenus.push(menu)
|
||||||
|
|
||||||
|
// 智能组件路径匹配
|
||||||
|
const component = findComponent(menu.name, menu.route)
|
||||||
|
if (component) {
|
||||||
|
genRoutes.push({
|
||||||
|
path: menu.route,
|
||||||
|
name: menu.name,
|
||||||
|
component: component,
|
||||||
|
meta: {
|
||||||
|
desc: menu.desc
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return [genMenus, genRoutes]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 智能查找组件文件
|
||||||
|
function findComponent(componentName: string, routePath: string): any {
|
||||||
|
// 处理 routePath,去除开头的斜杠
|
||||||
|
let cleanPath = routePath.startsWith('/') ? routePath.slice(1) : routePath
|
||||||
|
|
||||||
|
// 只保留第一个斜杠后的路径(去掉多余的斜杠)
|
||||||
|
cleanPath = cleanPath.replace(/\/+/g, '/')
|
||||||
|
|
||||||
|
// 可能的路径组合
|
||||||
|
const possiblePaths = [
|
||||||
|
// 1. 直接匹配:/src/views/路径.vue
|
||||||
|
`/src/views/${cleanPath}.vue`,
|
||||||
|
// 2. index.vue 结尾:/src/views/路径/index.vue
|
||||||
|
`/src/views/${cleanPath}/index.vue`,
|
||||||
|
// 3. 小写路径匹配
|
||||||
|
`/src/views/${cleanPath.toLowerCase()}.vue`,
|
||||||
|
`/src/views/${cleanPath.toLowerCase()}/index.vue`,
|
||||||
|
].filter(Boolean)
|
||||||
|
|
||||||
|
// 精确匹配 - 使用映射查找
|
||||||
|
for (const path of possiblePaths) {
|
||||||
|
if (viewsMap.get(path)) {
|
||||||
|
return viewsMap.get(path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 模糊匹配 - 改进逻辑
|
||||||
|
const searchTerms = [componentName.toLowerCase()]
|
||||||
|
|
||||||
|
// 优先匹配更精确的路径
|
||||||
|
for (const [path, component] of Object.entries(views)) {
|
||||||
|
// 检查路径是否包含组件名(不区分大小写)
|
||||||
|
if (path.toLowerCase().includes(componentName.toLowerCase())) {
|
||||||
|
return component
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
3
frontend/src/views/error/404.vue
Normal file
3
frontend/src/views/error/404.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
404 page not found
|
||||||
|
</template>
|
||||||
54
frontend/src/views/home/index.vue
Normal file
54
frontend/src/views/home/index.vue
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<template #header>
|
||||||
|
<div class="card-header">
|
||||||
|
<span>工作台</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-statistic title="待办事项" :value="12" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-statistic title="进行中项目" :value="5" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-statistic title="消息通知" :value="3" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-statistic title="已完成任务" :value="27" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider />
|
||||||
|
<el-table :data="tableData" style="width: 100%">
|
||||||
|
<el-table-column prop="name" label="任务名称" />
|
||||||
|
<el-table-column prop="status" label="状态" />
|
||||||
|
<el-table-column prop="date" label="截止日期" />
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
|
||||||
|
const tableData = ref([
|
||||||
|
{ name: '设计首页', status: '进行中', date: '2024-06-10' },
|
||||||
|
{ name: '接口联调', status: '待办', date: '2024-06-12' },
|
||||||
|
{ name: '测试用例', status: '已完成', date: '2024-06-08' },
|
||||||
|
])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// console.log('工作台挂载完成')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.card-header {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
frontend/src/views/log/AdmUserLogin.vue
Normal file
3
frontend/src/views/log/AdmUserLogin.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
管理员登录日志
|
||||||
|
</template>
|
||||||
105
frontend/src/views/login/index.vue
Normal file
105
frontend/src/views/login/index.vue
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login_container">
|
||||||
|
<el-row>
|
||||||
|
<!-- <el-col :span="12" :xs="0"></el-col> -->
|
||||||
|
<el-col :span="12" :xs="24">
|
||||||
|
<el-form class="login_form">
|
||||||
|
<h1>Hello</h1>
|
||||||
|
<h2>欢迎来到项目管理系统</h2>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
:prefix-icon="User"
|
||||||
|
v-model="loginForm.username"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
type="password"
|
||||||
|
:prefix-icon="Lock"
|
||||||
|
v-model="loginForm.password"
|
||||||
|
show-password
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
class="login_btn"
|
||||||
|
type="primary"
|
||||||
|
size="default"
|
||||||
|
:loading="loading"
|
||||||
|
@click="login"
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { User, Lock } from '@element-plus/icons-vue'
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ElNotification } from 'element-plus'
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
|
|
||||||
|
// 收集账号与密码数据
|
||||||
|
const loginForm = reactive({ username: '', password: '' })
|
||||||
|
// 按钮加载状态
|
||||||
|
const loading = ref(false)
|
||||||
|
// 获取路由实例
|
||||||
|
const router = useRouter()
|
||||||
|
// 获取用户仓库
|
||||||
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
// 登录按钮的回调
|
||||||
|
const login = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
await userStore.userLogin(loginForm)
|
||||||
|
router.push('/')
|
||||||
|
ElNotification({
|
||||||
|
type: 'success',
|
||||||
|
message: '登录成功!',
|
||||||
|
})
|
||||||
|
loading.value = false
|
||||||
|
} catch (error: any) {
|
||||||
|
loading.value = false
|
||||||
|
ElNotification({
|
||||||
|
type: 'error',
|
||||||
|
message: error?.message || '登录失败',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.login_container {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('@/assets/images/background.jpg') no-repeat;
|
||||||
|
// background: url('@/assets/images/background.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
.login_form {
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
top: 30vh;
|
||||||
|
// background: url('@/assets/images/login_form.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
.login_btn {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
381
frontend/src/views/main/index.vue
Normal file
381
frontend/src/views/main/index.vue
Normal file
@ -0,0 +1,381 @@
|
|||||||
|
<template>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<div class="header-left" :style="{ width: menuStore.width }">
|
||||||
|
<router-link to="/">
|
||||||
|
<div class="logo">VE</div>
|
||||||
|
<div v-if="!menuStore.collapse" class="title">
|
||||||
|
<span>Vue Element</span>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<el-icon size="22" style="margin-left: 15px;" @click="onCollapseSwitch">
|
||||||
|
<expand v-if="menuStore.collapse" />
|
||||||
|
<fold v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<el-dropdown trigger="click" @command="handleUserCommand">
|
||||||
|
<span class="user-info">
|
||||||
|
<el-icon class="el-icon--left">
|
||||||
|
<user />
|
||||||
|
</el-icon>
|
||||||
|
{{ userStore.userInfo?.name || 'admin' }}
|
||||||
|
<el-icon class="el-icon--right">
|
||||||
|
<arrow-down />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="info">个人信息</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="password">修改密码</el-dropdown-item>
|
||||||
|
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
<el-switch
|
||||||
|
v-model="isDark"
|
||||||
|
style="margin-right: 15px;"
|
||||||
|
active-action-icon="moon-night"
|
||||||
|
inactive-action-icon="sunny"
|
||||||
|
/>
|
||||||
|
<el-color-picker
|
||||||
|
v-model="colorStore.primary"
|
||||||
|
show-alpha
|
||||||
|
:predefine="colorStore.primaryPredefines"
|
||||||
|
@active-change="colorStore.primaryChange"
|
||||||
|
@change="colorStore.primarySave"
|
||||||
|
style="margin-right: 15px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<el-icon style="margin-right: 15px;" @click="toggle">
|
||||||
|
<rank v-if="isFullscreen" />
|
||||||
|
<full-screen v-else />
|
||||||
|
</el-icon>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<el-container>
|
||||||
|
<el-aside :width="menuStore.width">
|
||||||
|
<el-menu
|
||||||
|
router
|
||||||
|
:default-active="route.path"
|
||||||
|
:collapse="menuStore.collapse"
|
||||||
|
style="height: 100%;"
|
||||||
|
>
|
||||||
|
<template v-for="menu in menus" :key="menu.smid">
|
||||||
|
<el-sub-menu
|
||||||
|
v-if="menu.children && menu.children.length > 0"
|
||||||
|
:index="menu.smid.toString()"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<el-icon>
|
||||||
|
<component :is="menu.icon_class"></component>
|
||||||
|
</el-icon>
|
||||||
|
<span>{{ menu.label }}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="child in menu.children"
|
||||||
|
:key="child.smid"
|
||||||
|
:index="child.smid.toString()"
|
||||||
|
@click="handleMenuClick(child)"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<component :is="child.icon_class"></component>
|
||||||
|
</el-icon>
|
||||||
|
<span>{{ child.label }}</span>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
|
||||||
|
<el-menu-item
|
||||||
|
v-else
|
||||||
|
:key="menu.smid"
|
||||||
|
:index="menu.smid.toString()"
|
||||||
|
@click="handleMenuClick(menu)"
|
||||||
|
>
|
||||||
|
<el-icon>
|
||||||
|
<component :is="menu.icon_class"></component>
|
||||||
|
</el-icon>
|
||||||
|
<template #title>{{ menu.label }}</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
|
||||||
|
<el-main>
|
||||||
|
<!-- 导航标签栏 -->
|
||||||
|
<div class="navbar">
|
||||||
|
<el-tag
|
||||||
|
v-for="item in fastnavStore.datas"
|
||||||
|
:key="item.path"
|
||||||
|
:type="item.path == fastnavStore.currPath ? 'primary' : 'info'"
|
||||||
|
size="large"
|
||||||
|
:closable="fastnavStore.datas.length != 1"
|
||||||
|
style="margin-right: 10px;"
|
||||||
|
@click="onTagClick(item.path)"
|
||||||
|
@close="onTagClose(item.path)"
|
||||||
|
@contextmenu.native.prevent="openTagContextMenu($event, item)"
|
||||||
|
>
|
||||||
|
{{ item.desc }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主内容区域 -->
|
||||||
|
<el-scrollbar class="main-scrollbar">
|
||||||
|
<div class="main-content">
|
||||||
|
<RouterView />
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
|
||||||
|
<el-dropdown
|
||||||
|
ref="navbarDropdown"
|
||||||
|
trigger="contextmenu"
|
||||||
|
style="position: absolute;"
|
||||||
|
@command="handleTagCommand"
|
||||||
|
>
|
||||||
|
<span></span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="reload" icon="Refresh"
|
||||||
|
>重新加载</el-dropdown-item
|
||||||
|
>
|
||||||
|
<el-dropdown-item command="close" icon="Close"
|
||||||
|
>关闭</el-dropdown-item
|
||||||
|
>
|
||||||
|
<el-dropdown-item command="closeOther" icon="Delete"
|
||||||
|
>关闭其他</el-dropdown-item
|
||||||
|
>
|
||||||
|
<el-dropdown-item command="closeLeft" icon="Back"
|
||||||
|
>关闭左侧</el-dropdown-item
|
||||||
|
>
|
||||||
|
<el-dropdown-item command="closeRight" icon="Right"
|
||||||
|
>关闭右侧</el-dropdown-item
|
||||||
|
>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import useUserStore from '@/store/modules/user'
|
||||||
|
import useMenuStore from '@/store/modules/menu'
|
||||||
|
import useFastnavStore from '@/store/fastnav'
|
||||||
|
import useMenuCollapseStore from '@/store/menu'
|
||||||
|
import useColorStore from '@/store/color'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import { useRoute, useRouter, RouterView } from 'vue-router'
|
||||||
|
import { useFullscreen, useDark } from '@vueuse/core'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const { isFullscreen, toggle } = useFullscreen()
|
||||||
|
const isDark = useDark()
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const menuStore = useMenuCollapseStore()
|
||||||
|
const fastnavStore = useFastnavStore()
|
||||||
|
const menuDataStore = useMenuStore()
|
||||||
|
const colorStore = useColorStore()
|
||||||
|
|
||||||
|
const menus = ref<any[]>([])
|
||||||
|
const collapse = ref(true)
|
||||||
|
|
||||||
|
// 新增:控制右键菜单各项的禁用状态
|
||||||
|
const tagMenuReloadDisabled = ref(false)
|
||||||
|
const tagMenuCloseDisabled = ref(false)
|
||||||
|
const tagMenuOtherDisabled = ref(false)
|
||||||
|
const tagMenuLeftDisabled = ref(false)
|
||||||
|
const tagMenuRightDisabled = ref(false)
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
// 获取动态菜单数据
|
||||||
|
await menuDataStore.fetchUserMenus()
|
||||||
|
menus.value = menuDataStore.getMenus
|
||||||
|
})
|
||||||
|
|
||||||
|
// 折叠侧边栏
|
||||||
|
const onCollapseSwitch = () => {
|
||||||
|
menuStore.collapse = !menuStore.collapse
|
||||||
|
}
|
||||||
|
|
||||||
|
const onTagClick = (path: string) => {
|
||||||
|
if (path == fastnavStore.currPath) return
|
||||||
|
router.push(path)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onTagClose = (path: string) => {
|
||||||
|
console.log(`关闭页签:${path}`)
|
||||||
|
const pathNew = fastnavStore.removeData(path)
|
||||||
|
if (!pathNew) return
|
||||||
|
router.push(pathNew)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右键菜单相关
|
||||||
|
let navbarItem: any
|
||||||
|
const navbarDropdown = ref()
|
||||||
|
const openTagContextMenu = (e: PointerEvent, item: any) => {
|
||||||
|
navbarItem = item
|
||||||
|
navbarDropdown.value.handleClose()
|
||||||
|
|
||||||
|
tagMenuReloadDisabled.value = item.path != fastnavStore.currPath
|
||||||
|
tagMenuCloseDisabled.value = fastnavStore.datas.length == 1
|
||||||
|
tagMenuOtherDisabled.value = fastnavStore.datas.length == 1
|
||||||
|
tagMenuLeftDisabled.value = fastnavStore.isFirst(item.path)
|
||||||
|
tagMenuRightDisabled.value = fastnavStore.isLast(item.path)
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
navbarDropdown.value.$el.style.left = e.x + 'px'
|
||||||
|
navbarDropdown.value.$el.style.top = e.y + 'px'
|
||||||
|
navbarDropdown.value.handleOpen()
|
||||||
|
}, 50)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTagCommand = (command: string) => {
|
||||||
|
switch (command) {
|
||||||
|
case 'reload':
|
||||||
|
// 重新加载当前页面
|
||||||
|
const currentPath = fastnavStore.currPath
|
||||||
|
router.replace('/redirect' + currentPath)
|
||||||
|
break
|
||||||
|
case 'close':
|
||||||
|
onTagClose(navbarItem.path)
|
||||||
|
break
|
||||||
|
case 'closeOther':
|
||||||
|
const pathNew1 = fastnavStore.removeOther(navbarItem.path)
|
||||||
|
if (!pathNew1) return
|
||||||
|
router.push(pathNew1)
|
||||||
|
break
|
||||||
|
case 'closeLeft':
|
||||||
|
const pathNew2 = fastnavStore.removeLeft(navbarItem.path)
|
||||||
|
if (!pathNew2) return
|
||||||
|
router.push(pathNew2)
|
||||||
|
break
|
||||||
|
case 'closeRight':
|
||||||
|
const pathNew3 = fastnavStore.removeRight(navbarItem.path)
|
||||||
|
if (!pathNew3) return
|
||||||
|
router.push(pathNew3)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 菜单点击处理
|
||||||
|
const handleMenuClick = (menu: any) => {
|
||||||
|
if (menu.type === 1 && menu.src) {
|
||||||
|
// 内部跳转
|
||||||
|
const title = menu.label
|
||||||
|
const path = '/' + menu.src.replace('/', '_')
|
||||||
|
// 这里需要根据实际情况处理页面跳转
|
||||||
|
console.log('内部跳转:', title, path)
|
||||||
|
} else if (menu.type === 2 && menu.src) {
|
||||||
|
// 外部链接
|
||||||
|
window.open(menu.src, '_blank')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户下拉菜单处理
|
||||||
|
const handleUserCommand = (command: string) => {
|
||||||
|
if (command === 'logout') {
|
||||||
|
userStore.userLogout()
|
||||||
|
router.push('/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.el-header {
|
||||||
|
padding: 0px;
|
||||||
|
border-bottom: 1px solid var(--el-border-color);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.el-main {
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
padding: 12px;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid var(--el-border-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-scrollbar {
|
||||||
|
height: calc(100vh - 200px);
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-center {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
width: 1px;
|
||||||
|
|
||||||
|
.el-scrollbar {
|
||||||
|
margin: 0 12px;
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-left {
|
||||||
|
& a {
|
||||||
|
height: 60px;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-left: 14px;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
background-color: var(--el-color-primary);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-left: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
& span {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
margin-right: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
frontend/src/views/sys/AdmUser.vue
Normal file
3
frontend/src/views/sys/AdmUser.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
管理员
|
||||||
|
</template>
|
||||||
3
frontend/src/views/sys/AdmUserLogin.vue
Normal file
3
frontend/src/views/sys/AdmUserLogin.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
管理员登录日志
|
||||||
|
</template>
|
||||||
3
frontend/src/views/sys/AdmUserPassword.vue
Normal file
3
frontend/src/views/sys/AdmUserPassword.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
密码更新
|
||||||
|
</template>
|
||||||
7
frontend/src/vite-env.d.ts
vendored
Normal file
7
frontend/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
14
frontend/tsconfig.app.json
Normal file
14
frontend/tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
28
frontend/tsconfig.json
Normal file
28
frontend/tsconfig.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxImportSource": "vue",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"types": ["element-plus/global"],
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["ESNext", "DOM"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
25
frontend/tsconfig.node.json
Normal file
25
frontend/tsconfig.node.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"emitDeclarationOnly": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
1
frontend/tsconfig.tsbuildinfo
Normal file
1
frontend/tsconfig.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"root":["./src/main.ts","./src/vite-env.d.ts","./src/api/user.ts","./src/config/env.ts","./src/data/menu.ts","./src/router/index.ts","./src/store/auth.ts","./src/store/color.ts","./src/store/fastnav.ts","./src/store/index.ts","./src/store/menu.ts","./src/store/modules/user.ts","./src/types/index.d.ts","./src/util/menu.ts","./src/utils/request.ts","./src/app.vue","./src/views/error/404.vue","./src/views/home/index.vue","./src/views/log/admuserlogin.vue","./src/views/login/index.vue","./src/views/main/index.vue","./src/views/sys/admuser.vue","./src/views/sys/admuserlogin.vue","./src/views/sys/admuserpassword.vue"],"version":"5.8.3"}
|
||||||
2
frontend/vite.config.d.ts
vendored
Normal file
2
frontend/vite.config.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: import("vite").UserConfig;
|
||||||
|
export default _default;
|
||||||
61
frontend/vite.config.ts
Normal file
61
frontend/vite.config.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
// vite.config.ts
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
// 设置基础路径,支持子目录部署
|
||||||
|
base: './',
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
AutoImport({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
Components({
|
||||||
|
resolvers: [ElementPlusResolver()],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
// 构建配置
|
||||||
|
build: {
|
||||||
|
// 输出目录
|
||||||
|
outDir: 'dist',
|
||||||
|
// 静态资源目录
|
||||||
|
assetsDir: 'assets',
|
||||||
|
// 生成 sourcemap
|
||||||
|
sourcemap: false,
|
||||||
|
// 压缩配置
|
||||||
|
minify: 'esbuild',
|
||||||
|
// 代码分割配置
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
// 手动分割代码块
|
||||||
|
manualChunks: {
|
||||||
|
// 将 Vue 相关库单独打包
|
||||||
|
'vue-vendor': ['vue', 'vue-router', 'pinia'],
|
||||||
|
// 将 Element Plus 单独打包
|
||||||
|
'element-plus': ['element-plus'],
|
||||||
|
// 将图标库单独打包
|
||||||
|
'icons': ['@element-plus/icons-vue']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 服务器配置
|
||||||
|
// server: {
|
||||||
|
// port: 3000,
|
||||||
|
// open: true,
|
||||||
|
// cors: true
|
||||||
|
// }
|
||||||
|
})
|
||||||
@ -1,4 +1,4 @@
|
|||||||
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1750323451;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1750323451;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1751594649;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1750323451;}*/ ?>
|
<?php /*a:4:{s:59:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\index\index.php";i:1754756464;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\header.php";i:1750323451;s:62:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\main.php";i:1751594649;s:64:"E:\Demos\DemoOwns\PHP\yunzer\app\index\view\component\footer.php";i:1750323451;}*/ ?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
@ -10,9 +10,11 @@
|
|||||||
<link rel="stylesheet" href="/static/css/style.css">
|
<link rel="stylesheet" href="/static/css/style.css">
|
||||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="/static/css/fontawesome.css">
|
<link rel="stylesheet" href="/static/css/fontawesome.css">
|
||||||
|
<link rel="stylesheet" href="/static/css/all.min.css">
|
||||||
|
|
||||||
<script src="/static/layui/layui.js" charset="utf-8"></script>
|
<script src="/static/layui/layui.js" charset="utf-8"></script>
|
||||||
<script src="/static/js/bootstrap.bundle.js"></script>
|
<script src="/static/js/bootstrap.bundle.js"></script>
|
||||||
|
<script src="/static/js/all.min.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user