first commit
This commit is contained in:
139
.gitignore
vendored
Normal file
139
.gitignore
vendored
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Production builds
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
.next/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Logs
|
||||||
|
logs/
|
||||||
|
*.log
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids/
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage/
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
.parcel-cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
|
|
||||||
|
# Stores VSCode versions used for testing VSCode extensions
|
||||||
|
.vscode-test
|
||||||
|
|
||||||
|
# IDE
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
*.swp
|
||||||
|
*.swo
|
||||||
|
*~
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Docker
|
||||||
|
.dockerignore
|
||||||
|
|
||||||
|
# Database
|
||||||
|
*.sqlite
|
||||||
|
*.db
|
||||||
|
|
||||||
|
# Uploads
|
||||||
|
uploads/
|
||||||
|
public/uploads/
|
||||||
|
|
||||||
|
# SSL certificates
|
||||||
|
ssl/
|
||||||
|
*.pem
|
||||||
|
*.key
|
||||||
|
*.crt
|
||||||
|
|
||||||
|
# Backup files
|
||||||
|
backups/
|
||||||
|
*.backup
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
tmp/
|
||||||
|
temp/
|
||||||
|
|
||||||
|
# Prisma
|
||||||
|
prisma/migrations/
|
||||||
|
!prisma/migrations/.gitkeep
|
||||||
|
|
||||||
|
# TypeScript
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage/
|
||||||
|
.nyc_output/
|
||||||
|
|
||||||
|
# Monitoring
|
||||||
|
monitoring/data/
|
||||||
288
ARCHITECTURE.md
Normal file
288
ARCHITECTURE.md
Normal file
@@ -0,0 +1,288 @@
|
|||||||
|
# Pandora 系统架构设计
|
||||||
|
|
||||||
|
## 整体架构
|
||||||
|
|
||||||
|
Pandora 采用现代化的微服务架构，前后端分离，支持容器化部署。
|
||||||
|
|
||||||
|
### 技术栈
|
||||||
|
|
||||||
|
**前端**: Vue 3 + TypeScript + Tailwind CSS + Vite
|
||||||
|
**后端**: Node.js + Express.js + TypeScript + Prisma
|
||||||
|
**数据库**: PostgreSQL + Redis
|
||||||
|
**部署**: Docker + Docker Compose + Nginx
|
||||||
|
|
||||||
|
### 核心功能模块
|
||||||
|
|
||||||
|
1. **用户认证系统** - 多路径登录、二步验证
|
||||||
|
2. **权限管理系统** - 基于角色的访问控制
|
||||||
|
3. **账号管理系统** - 网站账号token存储和分配
|
||||||
|
4. **后台管理系统** - 用户和权限管理界面
|
||||||
|
|
||||||
|
### 安全特性
|
||||||
|
|
||||||
|
- JWT身份验证
|
||||||
|
- 密码加密存储
|
||||||
|
- 二步验证(TOTP/邮箱)
|
||||||
|
- API限流保护
|
||||||
|
- 审计日志记录
|
||||||
|
|
||||||
|
### 部署架构
|
||||||
|
|
||||||
|
- 开发环境: Docker Compose
|
||||||
|
- 生产环境: 支持负载均衡和监控
|
||||||
|
- 数据库: PostgreSQL主从复制
|
||||||
|
- 缓存: Redis集群
|
||||||
|
|
||||||
|
## 数据库设计
|
||||||
|
|
||||||
|
### 核心表结构
|
||||||
|
|
||||||
|
- **users**: 用户信息
|
||||||
|
- **paths**: 登录路径
|
||||||
|
- **user_paths**: 用户路径权限
|
||||||
|
- **website_accounts**: 网站账号
|
||||||
|
- **account_assignments**: 账号分配
|
||||||
|
- **sessions**: 用户会话
|
||||||
|
- **audit_logs**: 审计日志
|
||||||
|
|
||||||
|
## API设计
|
||||||
|
|
||||||
|
RESTful API设计，支持用户管理、权限管理、账号管理等核心功能。
|
||||||
|
|
||||||
|
## 监控和日志
|
||||||
|
|
||||||
|
- 健康检查端点
|
||||||
|
- 性能监控
|
||||||
|
- 错误追踪
|
||||||
|
- 访问日志
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────┐
|
||||||
|
│ 用户层 │
|
||||||
|
├─────────────────────────────────────────────────────────────┤
|
||||||
|
│ Domain A (path1.com) │ Domain B (path2.com) │ Domain C │
|
||||||
|
└─────────────────────────────────────────────────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Nginx Proxy │
|
||||||
|
│ (Load Bal.) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Frontend │
|
||||||
|
│ (React SPA) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Backend API │
|
||||||
|
│ (Express.js) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌────────────────────┼────────────────────┐
|
||||||
|
│ │ │
|
||||||
|
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||||
|
│ PostgreSQL │ │ Redis │ │ File Storage │
|
||||||
|
│ (Main DB) │ │ (Cache/Session)│ │ (Uploads) │
|
||||||
|
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 技术栈选择
|
||||||
|
|
||||||
|
### 前端技术栈
|
||||||
|
- **React 18**: 现代化的前端框架，支持并发特性
|
||||||
|
- **TypeScript**: 类型安全，提高开发效率和代码质量
|
||||||
|
- **Vite**: 快速的构建工具，支持热重载
|
||||||
|
- **Tailwind CSS**: 实用优先的CSS框架，快速构建UI
|
||||||
|
- **React Router**: 客户端路由管理
|
||||||
|
- **React Query**: 数据获取和缓存管理
|
||||||
|
- **Zustand**: 轻量级状态管理
|
||||||
|
- **React Hook Form**: 表单处理
|
||||||
|
- **React Hot Toast**: 通知组件
|
||||||
|
|
||||||
|
### 后端技术栈
|
||||||
|
- **Node.js**: JavaScript运行时
|
||||||
|
- **Express.js**: 轻量级Web框架
|
||||||
|
- **TypeScript**: 类型安全
|
||||||
|
- **Prisma**: 现代化数据库ORM
|
||||||
|
- **PostgreSQL**: 关系型数据库
|
||||||
|
- **Redis**: 缓存和会话存储
|
||||||
|
- **JWT**: 身份验证
|
||||||
|
- **bcrypt**: 密码加密
|
||||||
|
- **nodemailer**: 邮件发送
|
||||||
|
- **speakeasy**: TOTP生成
|
||||||
|
|
||||||
|
### 基础设施
|
||||||
|
- **Docker**: 容器化部署
|
||||||
|
- **Docker Compose**: 多服务编排
|
||||||
|
- **Nginx**: 反向代理和负载均衡
|
||||||
|
- **Let's Encrypt**: SSL证书
|
||||||
|
|
||||||
|
## 安全架构
|
||||||
|
|
||||||
|
### 认证机制
|
||||||
|
1. **多因素认证**: 支持邮箱验证码和TOTP
|
||||||
|
2. **JWT Token**: 无状态的身份验证
|
||||||
|
3. **会话管理**: Redis存储会话信息
|
||||||
|
4. **密码安全**: bcrypt加密，支持盐值
|
||||||
|
|
||||||
|
### 权限控制
|
||||||
|
1. **基于角色的访问控制(RBAC)**: 用户、管理员、超级管理员
|
||||||
|
2. **路径权限**: 用户只能访问被授权的路径
|
||||||
|
3. **账号权限**: 用户只能访问被分配的账号
|
||||||
|
4. **API权限**: 基于角色的API访问控制
|
||||||
|
|
||||||
|
### 数据安全
|
||||||
|
1. **敏感数据加密**: 使用AES加密存储token
|
||||||
|
2. **SQL注入防护**: 使用Prisma ORM
|
||||||
|
3. **XSS防护**: 输入验证和输出转义
|
||||||
|
4. **CSRF防护**: Token验证
|
||||||
|
5. **限流保护**: API访问频率限制
|
||||||
|
|
||||||
|
## API设计
|
||||||
|
|
||||||
|
### RESTful API
|
||||||
|
```
|
||||||
|
认证相关:
|
||||||
|
POST /api/auth/register - 用户注册
|
||||||
|
POST /api/auth/login - 用户登录
|
||||||
|
POST /api/auth/logout - 用户登出
|
||||||
|
POST /api/auth/verify-email - 邮箱验证
|
||||||
|
POST /api/auth/verify-totp - TOTP验证
|
||||||
|
|
||||||
|
用户管理:
|
||||||
|
GET /api/users - 获取用户列表
|
||||||
|
GET /api/users/:id - 获取用户详情
|
||||||
|
PUT /api/users/:id - 更新用户信息
|
||||||
|
DELETE /api/users/:id - 删除用户
|
||||||
|
|
||||||
|
路径管理:
|
||||||
|
GET /api/paths - 获取路径列表
|
||||||
|
GET /api/paths/:id - 获取路径详情
|
||||||
|
POST /api/paths - 创建路径
|
||||||
|
PUT /api/paths/:id - 更新路径
|
||||||
|
DELETE /api/paths/:id - 删除路径
|
||||||
|
|
||||||
|
账号管理:
|
||||||
|
GET /api/accounts - 获取账号列表
|
||||||
|
GET /api/accounts/:id - 获取账号详情
|
||||||
|
POST /api/accounts - 创建账号
|
||||||
|
PUT /api/accounts/:id - 更新账号
|
||||||
|
DELETE /api/accounts/:id - 删除账号
|
||||||
|
|
||||||
|
权限管理:
|
||||||
|
GET /api/permissions - 获取权限列表
|
||||||
|
POST /api/permissions - 分配权限
|
||||||
|
DELETE /api/permissions/:id - 撤销权限
|
||||||
|
```
|
||||||
|
|
||||||
|
### GraphQL API (可选)
|
||||||
|
```graphql
|
||||||
|
type Query {
|
||||||
|
users: [User!]!
|
||||||
|
user(id: ID!): User
|
||||||
|
paths: [Path!]!
|
||||||
|
accounts: [Account!]!
|
||||||
|
}
|
||||||
|
|
||||||
|
type Mutation {
|
||||||
|
createUser(input: CreateUserInput!): User!
|
||||||
|
updateUser(id: ID!, input: UpdateUserInput!): User!
|
||||||
|
assignPermission(input: AssignPermissionInput!): Permission!
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 部署架构
|
||||||
|
|
||||||
|
### 开发环境
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
postgres: PostgreSQL 数据库
|
||||||
|
redis: Redis 缓存
|
||||||
|
backend: Express.js API 服务
|
||||||
|
frontend: React 开发服务器
|
||||||
|
nginx: 反向代理
|
||||||
|
```
|
||||||
|
|
||||||
|
### 生产环境
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
postgres: PostgreSQL 数据库 (主从复制)
|
||||||
|
redis: Redis 集群
|
||||||
|
backend: Express.js API 服务 (负载均衡)
|
||||||
|
frontend: Nginx 静态文件服务
|
||||||
|
nginx: 反向代理和SSL终止
|
||||||
|
prometheus: 监控服务
|
||||||
|
grafana: 监控面板
|
||||||
|
```
|
||||||
|
|
||||||
|
## 监控和日志
|
||||||
|
|
||||||
|
### 应用监控
|
||||||
|
- **健康检查**: 每个服务都有健康检查端点
|
||||||
|
- **性能监控**: 使用Prometheus收集指标
|
||||||
|
- **错误追踪**: 集成错误监控服务
|
||||||
|
- **日志聚合**: 集中化日志管理
|
||||||
|
|
||||||
|
### 安全监控
|
||||||
|
- **访问日志**: 记录所有API访问
|
||||||
|
- **审计日志**: 记录敏感操作
|
||||||
|
- **异常检测**: 检测异常访问模式
|
||||||
|
- **实时告警**: 安全事件实时通知
|
||||||
|
|
||||||
|
## 扩展性设计
|
||||||
|
|
||||||
|
### 水平扩展
|
||||||
|
- **无状态设计**: 后端服务无状态，支持水平扩展
|
||||||
|
- **数据库分片**: 支持数据库水平分片
|
||||||
|
- **缓存分层**: 多级缓存策略
|
||||||
|
- **CDN集成**: 静态资源CDN加速
|
||||||
|
|
||||||
|
### 功能扩展
|
||||||
|
- **插件系统**: 支持功能插件扩展
|
||||||
|
- **API版本控制**: 支持API版本管理
|
||||||
|
- **多租户**: 支持多租户架构
|
||||||
|
- **国际化**: 支持多语言
|
||||||
|
|
||||||
|
## 性能优化
|
||||||
|
|
||||||
|
### 前端优化
|
||||||
|
- **代码分割**: 按路由分割代码
|
||||||
|
- **懒加载**: 组件和图片懒加载
|
||||||
|
- **缓存策略**: 静态资源缓存
|
||||||
|
- **预加载**: 关键资源预加载
|
||||||
|
|
||||||
|
### 后端优化
|
||||||
|
- **数据库索引**: 优化查询性能
|
||||||
|
- **连接池**: 数据库连接池管理
|
||||||
|
- **缓存策略**: Redis缓存热点数据
|
||||||
|
- **异步处理**: 非关键操作异步处理
|
||||||
|
|
||||||
|
## 故障恢复
|
||||||
|
|
||||||
|
### 高可用性
|
||||||
|
- **服务冗余**: 关键服务多实例部署
|
||||||
|
- **数据库备份**: 定期数据库备份
|
||||||
|
- **故障转移**: 自动故障转移机制
|
||||||
|
- **灾难恢复**: 完整的灾难恢复计划
|
||||||
|
|
||||||
|
### 数据保护
|
||||||
|
- **数据备份**: 定期数据备份
|
||||||
|
- **版本控制**: 数据版本管理
|
||||||
|
- **加密存储**: 敏感数据加密
|
||||||
|
- **访问控制**: 严格的数据访问控制
|
||||||
|
|
||||||
|
## 开发流程
|
||||||
|
|
||||||
|
### 代码管理
|
||||||
|
- **Git工作流**: 基于Git的版本控制
|
||||||
|
- **代码审查**: 强制代码审查
|
||||||
|
- **自动化测试**: 单元测试和集成测试
|
||||||
|
- **CI/CD**: 持续集成和部署
|
||||||
|
|
||||||
|
### 质量保证
|
||||||
|
- **代码规范**: ESLint和Prettier
|
||||||
|
- **类型检查**: TypeScript严格模式
|
||||||
|
- **测试覆盖**: 高测试覆盖率
|
||||||
|
- **安全扫描**: 定期安全扫描
|
||||||
|
|
||||||
|
这个架构设计确保了系统的安全性、可扩展性和可维护性，为Pandora网站账号共享系统提供了坚实的基础。
|
||||||
152
INTEGRATION_README.md
Normal file
152
INTEGRATION_README.md
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
# Pandora 前后端集成说明
|
||||||
|
|
||||||
|
## 🚀 快速启动
|
||||||
|
|
||||||
|
### 1. 启动后端服务
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd backend
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
后端服务将在 `http://localhost:3001` 启动
|
||||||
|
|
||||||
|
### 2. 启动前端服务
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd frontend
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
前端服务将在 `http://localhost:3000` 启动
|
||||||
|
|
||||||
|
## 🔧 配置说明
|
||||||
|
|
||||||
|
### 后端配置
|
||||||
|
|
||||||
|
后端使用 SQLite 数据库，无需额外配置。主要配置项在 `backend/.env` 文件中：
|
||||||
|
|
||||||
|
- `DATABASE_URL`: SQLite 数据库路径
|
||||||
|
- `JWT_SECRET`: JWT 密钥
|
||||||
|
- `PORT`: 服务端口 (默认 3001)
|
||||||
|
|
||||||
|
### 前端配置
|
||||||
|
|
||||||
|
前端 API 基础 URL 配置在 `frontend/src/utils/api.ts` 中：
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api'
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🧪 测试集成
|
||||||
|
|
||||||
|
### 1. API 测试页面
|
||||||
|
|
||||||
|
访问 `http://localhost:3000/test` 可以测试各种 API 功能：
|
||||||
|
|
||||||
|
- 获取路径列表
|
||||||
|
- 用户注册
|
||||||
|
- 用户登录
|
||||||
|
- 获取用户信息
|
||||||
|
|
||||||
|
### 2. 功能测试
|
||||||
|
|
||||||
|
1. **用户注册**: 访问首页，切换到注册模式，填写信息并注册
|
||||||
|
2. **用户登录**: 使用注册的邮箱和密码登录
|
||||||
|
3. **路径权限**: 登录后查看仪表板中的路径权限
|
||||||
|
4. **账号管理**: 查看分配的网站账号
|
||||||
|
|
||||||
|
## 📋 已实现的功能
|
||||||
|
|
||||||
|
### 后端 API
|
||||||
|
|
||||||
|
- ✅ 用户注册 (`POST /api/auth/register`)
|
||||||
|
- ✅ 用户登录 (`POST /api/auth/login`)
|
||||||
|
- ✅ 邮箱验证 (`POST /api/auth/verify-email`)
|
||||||
|
- ✅ 密码重置 (`POST /api/auth/forgot-password`, `POST /api/auth/reset-password`)
|
||||||
|
- ✅ TOTP 二步验证 (`POST /api/auth/verify-totp`)
|
||||||
|
- ✅ 用户信息管理 (`GET /api/auth/profile`, `PUT /api/auth/profile`)
|
||||||
|
- ✅ 路径权限管理 (`GET /api/paths`, `GET /api/paths/user`)
|
||||||
|
- ✅ 账号管理 (`GET /api/accounts/user`)
|
||||||
|
- ✅ 管理员功能 (`/api/admin/*`)
|
||||||
|
|
||||||
|
### 前端功能
|
||||||
|
|
||||||
|
- ✅ 用户认证状态管理 (Pinia Store)
|
||||||
|
- ✅ API 服务层 (Axios)
|
||||||
|
- ✅ 路由守卫
|
||||||
|
- ✅ 登录/注册界面
|
||||||
|
- ✅ 用户仪表板
|
||||||
|
- ✅ 路径权限显示
|
||||||
|
- ✅ 账号列表显示
|
||||||
|
- ✅ Toast 通知
|
||||||
|
- ✅ 响应式设计
|
||||||
|
|
||||||
|
## 🔐 认证流程
|
||||||
|
|
||||||
|
1. **注册**: 用户填写信息 → 后端创建用户 → 发送验证邮件
|
||||||
|
2. **登录**: 用户输入邮箱密码 → 后端验证 → 返回 JWT Token
|
||||||
|
3. **权限验证**: 前端请求携带 Token → 后端验证权限 → 返回数据
|
||||||
|
4. **路径选择**: 用户选择登录路径 → 验证路径权限 → 进入系统
|
||||||
|
|
||||||
|
## 🛠️ 开发工具
|
||||||
|
|
||||||
|
### 后端开发
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 数据库迁移
|
||||||
|
npm run db:migrate
|
||||||
|
|
||||||
|
# 生成 Prisma 客户端
|
||||||
|
npm run db:generate
|
||||||
|
|
||||||
|
# 查看数据库
|
||||||
|
npm run db:studio
|
||||||
|
```
|
||||||
|
|
||||||
|
### 前端开发
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 代码检查
|
||||||
|
npm run lint
|
||||||
|
|
||||||
|
# 类型检查
|
||||||
|
npm run type-check
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🐛 常见问题
|
||||||
|
|
||||||
|
### 1. CORS 错误
|
||||||
|
|
||||||
|
确保后端 CORS 配置正确，允许前端域名访问。
|
||||||
|
|
||||||
|
### 2. 数据库连接错误
|
||||||
|
|
||||||
|
检查 SQLite 数据库文件是否存在，确保有写入权限。
|
||||||
|
|
||||||
|
### 3. API 请求失败
|
||||||
|
|
||||||
|
检查后端服务是否正常运行，API 地址是否正确。
|
||||||
|
|
||||||
|
### 4. 认证失败
|
||||||
|
|
||||||
|
检查 JWT Token 是否正确传递，Token 是否过期。
|
||||||
|
|
||||||
|
## 📝 下一步开发
|
||||||
|
|
||||||
|
1. **完善管理后台**: 实现用户管理、权限管理、账号管理界面
|
||||||
|
2. **添加更多安全功能**: API 限流、IP 白名单、审计日志
|
||||||
|
3. **优化用户体验**: 添加加载状态、错误处理、表单验证
|
||||||
|
4. **性能优化**: 数据库查询优化、前端代码分割、缓存策略
|
||||||
|
5. **测试覆盖**: 单元测试、集成测试、端到端测试
|
||||||
|
|
||||||
|
## 🔗 相关文档
|
||||||
|
|
||||||
|
- [后端 API 文档](./backend/README.md)
|
||||||
|
- [前端开发文档](./frontend/README.md)
|
||||||
|
- [数据库设计文档](./TODO.md)
|
||||||
262
README.md
Normal file
262
README.md
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
# Pandora - 网站账号共享系统
|
||||||
|
|
||||||
|
## 项目简介
|
||||||
|
|
||||||
|
Pandora 是一个现代化的网站账号共享管理系统，允许用户通过不同的域名路径访问共享的网站账号。系统提供了完整的用户管理、权限控制和账号token管理功能。
|
||||||
|
|
||||||
|
## 核心功能
|
||||||
|
|
||||||
|
### 🏠 用户界面
|
||||||
|
- **Claude风格首页**: 现代化的AI助手风格界面设计
|
||||||
|
- **多路径登录**: 支持三个不同的登录路径，每个路径对应独立域名
|
||||||
|
- **响应式设计**: 适配各种设备尺寸
|
||||||
|
|
||||||
|
### 🔐 认证系统
|
||||||
|
- **多路径登录**: 用户可选择不同的登录路径
|
||||||
|
- **二步验证**: 支持邮箱验证码和TOTP验证
|
||||||
|
- **权限控制**: 基于角色的访问控制
|
||||||
|
|
||||||
|
### 👥 用户管理
|
||||||
|
- **用户注册/登录**: 完整的用户认证流程
|
||||||
|
- **权限分配**: 管理员可控制用户访问权限
|
||||||
|
- **路径权限**: 用户只能看到有权限的登录路径
|
||||||
|
|
||||||
|
### 🔑 账号管理
|
||||||
|
- **Token存储**: 安全存储不同网站的账号token
|
||||||
|
- **账号分配**: 将网站账号分配给指定用户
|
||||||
|
- **访问控制**: 未分配的账号用户无法访问
|
||||||
|
|
||||||
|
### 🛠️ 后台管理
|
||||||
|
- **用户管理**: 查看、编辑、删除用户
|
||||||
|
- **权限管理**: 分配和撤销用户权限
|
||||||
|
- **账号管理**: 管理网站账号和token
|
||||||
|
- **系统监控**: 访问日志和系统状态
|
||||||
|
|
||||||
|
## 技术架构
|
||||||
|
|
||||||
|
### 前端技术栈
|
||||||
|
- **Vue 3**: 现代化的前端框架
|
||||||
|
- **TypeScript**: 类型安全的JavaScript
|
||||||
|
- **Tailwind CSS**: 实用优先的CSS框架
|
||||||
|
- **Vue Router**: 客户端路由
|
||||||
|
- **Pinia**: 状态管理
|
||||||
|
- **VueUse**: 组合式工具库
|
||||||
|
- **VeeValidate**: 表单验证
|
||||||
|
- **Vue Toastification**: 通知组件
|
||||||
|
|
||||||
|
### 后端技术栈
|
||||||
|
- **Node.js**: JavaScript运行时
|
||||||
|
- **Express.js**: Web应用框架
|
||||||
|
- **TypeScript**: 类型安全
|
||||||
|
- **Prisma**: 数据库ORM
|
||||||
|
- **PostgreSQL**: 主数据库
|
||||||
|
- **Redis**: 缓存和会话存储
|
||||||
|
- **JWT**: 身份验证
|
||||||
|
- **bcrypt**: 密码加密
|
||||||
|
- **nodemailer**: 邮件发送
|
||||||
|
- **speakeasy**: TOTP生成
|
||||||
|
|
||||||
|
### 基础设施
|
||||||
|
- **Docker**: 容器化部署
|
||||||
|
- **Docker Compose**: 多服务编排
|
||||||
|
- **Nginx**: 反向代理和负载均衡
|
||||||
|
- **Let's Encrypt**: SSL证书
|
||||||
|
|
||||||
|
## 系统架构
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||||
|
│ Domain A │ │ Domain B │ │ Domain C │
|
||||||
|
│ (path1.com) │ │ (path2.com) │ │ (path3.com) │
|
||||||
|
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||||
|
│ │ │
|
||||||
|
└───────────────────────┼───────────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Nginx Proxy │
|
||||||
|
│ (Load Bal.) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Frontend │
|
||||||
|
│ (Vue App) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌─────────────────┐
|
||||||
|
│ Backend API │
|
||||||
|
│ (Express.js) │
|
||||||
|
└─────────────────┘
|
||||||
|
│
|
||||||
|
┌───────────────────────┼───────────────────────┐
|
||||||
|
│ │ │
|
||||||
|
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
|
||||||
|
│ PostgreSQL │ │ Redis │ │ File Storage │
|
||||||
|
│ (Main DB) │ │ (Cache/Session)│ │ (Uploads) │
|
||||||
|
└─────────────────┘ └─────────────────┘ └─────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 数据库设计
|
||||||
|
|
||||||
|
### 核心表结构
|
||||||
|
- **users**: 用户信息表
|
||||||
|
- **user_paths**: 用户路径权限表
|
||||||
|
- **website_accounts**: 网站账号表
|
||||||
|
- **account_assignments**: 账号分配表
|
||||||
|
- **sessions**: 用户会话表
|
||||||
|
- **audit_logs**: 审计日志表
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
### 环境要求
|
||||||
|
- Docker 20.10+
|
||||||
|
- Docker Compose 2.0+
|
||||||
|
- 至少 2GB 可用内存
|
||||||
|
|
||||||
|
### 安装步骤
|
||||||
|
|
||||||
|
1. **克隆项目**
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/your-username/pandora.git
|
||||||
|
cd pandora
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **配置环境变量**
|
||||||
|
```bash
|
||||||
|
cp env.example .env
|
||||||
|
# 编辑 .env 文件，配置必要的环境变量
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **启动服务**
|
||||||
|
```bash
|
||||||
|
docker-compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **初始化数据库**
|
||||||
|
```bash
|
||||||
|
docker-compose exec backend npm run db:migrate
|
||||||
|
docker-compose exec backend npm run db:seed
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **访问应用**
|
||||||
|
- 前端: http://localhost:3000
|
||||||
|
- 管理后台: http://localhost:3000/admin
|
||||||
|
- API文档: http://localhost:3000/api/docs
|
||||||
|
|
||||||
|
## 开发指南
|
||||||
|
|
||||||
|
### 本地开发
|
||||||
|
```bash
|
||||||
|
# 安装依赖
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 启动开发服务器
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# 运行测试
|
||||||
|
npm test
|
||||||
|
|
||||||
|
# 构建生产版本
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 代码规范
|
||||||
|
- 使用 ESLint 和 Prettier 进行代码格式化
|
||||||
|
- 遵循 TypeScript 严格模式
|
||||||
|
- 使用 Conventional Commits 规范
|
||||||
|
|
||||||
|
## 部署
|
||||||
|
|
||||||
|
### 生产环境部署
|
||||||
|
```bash
|
||||||
|
# 构建生产镜像
|
||||||
|
docker-compose -f docker-compose.prod.yml build
|
||||||
|
|
||||||
|
# 启动生产服务
|
||||||
|
docker-compose -f docker-compose.prod.yml up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
### 环境变量配置
|
||||||
|
生产环境需要配置以下环境变量：
|
||||||
|
- `DATABASE_URL`: PostgreSQL连接字符串
|
||||||
|
- `REDIS_URL`: Redis连接字符串
|
||||||
|
- `JWT_SECRET`: JWT密钥
|
||||||
|
- `SMTP_CONFIG`: 邮件服务器配置
|
||||||
|
- `DOMAIN_CONFIG`: 域名配置
|
||||||
|
|
||||||
|
## 安全特性
|
||||||
|
|
||||||
|
- **密码加密**: 使用bcrypt进行密码哈希
|
||||||
|
- **JWT认证**: 安全的token认证机制
|
||||||
|
- **二步验证**: 支持邮箱和TOTP验证
|
||||||
|
- **权限控制**: 基于角色的访问控制
|
||||||
|
- **审计日志**: 完整的操作日志记录
|
||||||
|
- **HTTPS**: 强制HTTPS连接
|
||||||
|
- **CORS**: 跨域资源共享控制
|
||||||
|
|
||||||
|
## 贡献指南
|
||||||
|
|
||||||
|
1. Fork 项目
|
||||||
|
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||||||
|
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||||||
|
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||||||
|
5. 打开 Pull Request
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
|
||||||
|
|
||||||
|
## 支持
|
||||||
|
|
||||||
|
如果您遇到问题或有建议，请：
|
||||||
|
1. 查看 [FAQ](docs/FAQ.md)
|
||||||
|
2. 搜索 [Issues](https://github.com/your-username/pandora/issues)
|
||||||
|
3. 创建新的 Issue
|
||||||
|
|
||||||
|
## 更新日志
|
||||||
|
|
||||||
|
查看 [CHANGELOG.md](CHANGELOG.md) 了解版本更新历史。
|
||||||
|
|
||||||
|
## 用户激活功能
|
||||||
|
|
||||||
|
### 功能说明
|
||||||
|
- 新注册的用户默认为禁用状态（`isActive: false`）
|
||||||
|
- 用户需要等待管理员激活账户后才能登录
|
||||||
|
- 管理员可以在用户管理页面激活/禁用用户账户
|
||||||
|
|
||||||
|
### 修改内容
|
||||||
|
|
||||||
|
#### 后端修改
|
||||||
|
1. **注册控制器** (`backend/src/controllers/authController.ts`)
|
||||||
|
- 新注册用户默认为禁用状态
|
||||||
|
- 返回明确的激活提示信息
|
||||||
|
|
||||||
|
2. **登录控制器** (`backend/src/controllers/authController.ts`)
|
||||||
|
- 检查用户是否激活
|
||||||
|
- 被禁用用户登录时返回明确错误信息
|
||||||
|
|
||||||
|
3. **用户管理控制器** (`backend/src/controllers/userController.ts`)
|
||||||
|
- 管理员创建用户时默认为禁用状态
|
||||||
|
- 支持管理员激活/禁用用户
|
||||||
|
|
||||||
|
#### 前端修改
|
||||||
|
1. **登录页面** (`frontend/src/views/Home.vue`)
|
||||||
|
- 注册成功后显示激活提示
|
||||||
|
- 登录失败时区分账户禁用和其他错误
|
||||||
|
|
||||||
|
2. **管理员用户管理** (`frontend/src/views/AdminUsers.vue`)
|
||||||
|
- 显示用户激活状态
|
||||||
|
- 支持管理员编辑用户激活状态
|
||||||
|
|
||||||
|
3. **API调用** (`frontend/src/utils/api.ts`)
|
||||||
|
- 修复登录API使用username字段
|
||||||
|
- 移除不需要的email字段
|
||||||
|
|
||||||
|
4. **类型定义** (`frontend/src/types/index.ts`)
|
||||||
|
- 更新用户类型定义
|
||||||
|
- 移除email相关字段
|
||||||
|
|
||||||
|
### 使用流程
|
||||||
|
1. 用户注册 → 账户默认为禁用状态
|
||||||
|
2. 管理员在用户管理页面查看新注册用户
|
||||||
|
3. 管理员激活用户账户
|
||||||
|
4. 用户可以使用账户登录系统
|
||||||
38
backend/Dockerfile
Normal file
38
backend/Dockerfile
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
FROM node:18-alpine
|
||||||
|
|
||||||
|
# 设置工作目录
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 安装系统依赖
|
||||||
|
RUN apk add --no-cache \
|
||||||
|
python3 \
|
||||||
|
make \
|
||||||
|
g++ \
|
||||||
|
curl
|
||||||
|
|
||||||
|
# 复制 package.json 和 package-lock.json
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
RUN npm ci --only=production && npm cache clean --force
|
||||||
|
|
||||||
|
# 复制源代码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 创建非root用户
|
||||||
|
RUN addgroup -g 1001 -S nodejs
|
||||||
|
RUN adduser -S nodejs -u 1001
|
||||||
|
|
||||||
|
# 更改文件所有权
|
||||||
|
RUN chown -R nodejs:nodejs /app
|
||||||
|
USER nodejs
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 3001
|
||||||
|
|
||||||
|
# 健康检查
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||||
|
CMD curl -f http://localhost:3001/health || exit 1
|
||||||
|
|
||||||
|
# 启动命令
|
||||||
|
CMD ["npm", "run", "dev"]
|
||||||
347
backend/README.md
Normal file
347
backend/README.md
Normal file
@@ -0,0 +1,347 @@
|
|||||||
|
# Pandora 后端 API
|
||||||
|
|
||||||
|
这是 Pandora 项目的后端 API 服务，提供完整的用户认证系统和权限管理功能。
|
||||||
|
|
||||||
|
## 🚀 功能特性
|
||||||
|
|
||||||
|
### 用户认证系统
|
||||||
|
- ✅ 用户注册和登录
|
||||||
|
- ✅ JWT 令牌认证
|
||||||
|
- ✅ 邮箱验证
|
||||||
|
- ✅ 密码重置
|
||||||
|
- ✅ TOTP 二步验证
|
||||||
|
- ✅ 会话管理
|
||||||
|
- ✅ 密码加密 (bcrypt)
|
||||||
|
|
||||||
|
### 权限管理系统
|
||||||
|
- ✅ 基于角色的权限控制
|
||||||
|
- ✅ 路径权限验证
|
||||||
|
- ✅ 用户权限分配
|
||||||
|
- ✅ 权限审计日志
|
||||||
|
|
||||||
|
### 账号管理系统
|
||||||
|
- ✅ 网站账号管理
|
||||||
|
- ✅ 账号分配和撤销
|
||||||
|
- ✅ 账号使用统计
|
||||||
|
- ✅ 多用户共享控制
|
||||||
|
|
||||||
|
### 安全特性
|
||||||
|
- ✅ API 限流
|
||||||
|
- ✅ CORS 配置
|
||||||
|
- ✅ 安全头部 (Helmet)
|
||||||
|
- ✅ 输入验证
|
||||||
|
- ✅ 错误处理
|
||||||
|
- ✅ 审计日志
|
||||||
|
|
||||||
|
## 📋 技术栈
|
||||||
|
|
||||||
|
- **运行时**: Node.js + TypeScript
|
||||||
|
- **框架**: Express.js
|
||||||
|
- **数据库**: PostgreSQL + Prisma ORM
|
||||||
|
- **缓存**: Redis
|
||||||
|
- **认证**: JWT + bcrypt
|
||||||
|
- **二步验证**: TOTP (Google Authenticator)
|
||||||
|
- **邮件**: Nodemailer
|
||||||
|
- **日志**: Winston
|
||||||
|
- **验证**: express-validator
|
||||||
|
|
||||||
|
## 🛠️ 安装和设置
|
||||||
|
|
||||||
|
### 1. 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd backend
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. 环境配置
|
||||||
|
|
||||||
|
复制环境变量文件：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
编辑 `.env` 文件，配置以下变量：
|
||||||
|
|
||||||
|
```env
|
||||||
|
# 数据库配置
|
||||||
|
DATABASE_URL="postgresql://username:password@localhost:5432/pandora"
|
||||||
|
|
||||||
|
# JWT 配置
|
||||||
|
JWT_SECRET="your-super-secret-jwt-key-here"
|
||||||
|
JWT_EXPIRES_IN="7d"
|
||||||
|
|
||||||
|
# 邮件配置 (用于邮箱验证和密码重置)
|
||||||
|
SMTP_HOST="smtp.gmail.com"
|
||||||
|
SMTP_PORT=587
|
||||||
|
SMTP_USER="your-email@gmail.com"
|
||||||
|
SMTP_PASS="your-app-password"
|
||||||
|
EMAIL_FROM="noreply@pandora.com"
|
||||||
|
|
||||||
|
# Redis 配置
|
||||||
|
REDIS_URL="redis://localhost:6379"
|
||||||
|
|
||||||
|
# 服务器配置
|
||||||
|
PORT=3001
|
||||||
|
NODE_ENV="development"
|
||||||
|
|
||||||
|
# 安全配置
|
||||||
|
BCRYPT_ROUNDS=12
|
||||||
|
RATE_LIMIT_WINDOW_MS=900000
|
||||||
|
RATE_LIMIT_MAX_REQUESTS=100
|
||||||
|
|
||||||
|
# TOTP 配置
|
||||||
|
TOTP_ISSUER="Pandora"
|
||||||
|
TOTP_LABEL="Pandora Authentication"
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. 数据库设置
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 生成 Prisma 客户端
|
||||||
|
npm run db:generate
|
||||||
|
|
||||||
|
# 运行数据库迁移
|
||||||
|
npm run db:migrate
|
||||||
|
|
||||||
|
# 初始化测试数据
|
||||||
|
npm run db:seed
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. 启动服务
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 开发模式
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# 生产模式
|
||||||
|
npm run build
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📚 API 文档
|
||||||
|
|
||||||
|
### 认证相关 API
|
||||||
|
|
||||||
|
#### 用户注册
|
||||||
|
```http
|
||||||
|
POST /api/auth/register
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"email": "user@example.com",
|
||||||
|
"username": "username",
|
||||||
|
"password": "password123",
|
||||||
|
"firstName": "张",
|
||||||
|
"lastName": "三"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 用户登录
|
||||||
|
```http
|
||||||
|
POST /api/auth/login
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"email": "user@example.com",
|
||||||
|
"password": "password123"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 邮箱验证
|
||||||
|
```http
|
||||||
|
POST /api/auth/verify-email
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"token": "verification-token"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 设置 TOTP
|
||||||
|
```http
|
||||||
|
POST /api/auth/setup-totp
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 验证 TOTP
|
||||||
|
```http
|
||||||
|
POST /api/auth/verify-totp
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"token": "123456"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 获取当前用户信息
|
||||||
|
```http
|
||||||
|
GET /api/auth/me
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 用户管理 API
|
||||||
|
|
||||||
|
#### 获取所有用户 (管理员)
|
||||||
|
```http
|
||||||
|
GET /api/users
|
||||||
|
Authorization: Bearer <admin-token>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 获取用户详情
|
||||||
|
```http
|
||||||
|
GET /api/users/:id
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 更新用户信息
|
||||||
|
```http
|
||||||
|
PUT /api/users/:id
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"firstName": "新名字",
|
||||||
|
"lastName": "新姓氏"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 账号管理 API
|
||||||
|
|
||||||
|
#### 获取用户账号
|
||||||
|
```http
|
||||||
|
GET /api/accounts/user/assigned
|
||||||
|
Authorization: Bearer <token>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 创建账号 (管理员)
|
||||||
|
```http
|
||||||
|
POST /api/accounts
|
||||||
|
Authorization: Bearer <admin-token>
|
||||||
|
Content-Type: application/json
|
||||||
|
|
||||||
|
{
|
||||||
|
"website": "claude.ai",
|
||||||
|
"accountName": "claude_pro_1",
|
||||||
|
"token": "sk-ant-api03-xxx",
|
||||||
|
"maxUsers": 3
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🔐 安全说明
|
||||||
|
|
||||||
|
### 密码安全
|
||||||
|
- 使用 bcrypt 进行密码哈希，默认 12 轮加密
|
||||||
|
- 密码最小长度 8 位
|
||||||
|
- 支持密码重置功能
|
||||||
|
|
||||||
|
### 会话管理
|
||||||
|
- JWT 令牌有效期 7 天
|
||||||
|
- 支持令牌刷新
|
||||||
|
- 会话存储在数据库中，支持强制登出
|
||||||
|
|
||||||
|
### 二步验证
|
||||||
|
- 支持 TOTP (Google Authenticator)
|
||||||
|
- 提供 10 个备用码
|
||||||
|
- 可选择性启用
|
||||||
|
|
||||||
|
### API 安全
|
||||||
|
- 所有敏感 API 需要认证
|
||||||
|
- 管理员 API 需要管理员权限
|
||||||
|
- 实现 API 限流防止滥用
|
||||||
|
- 输入验证和清理
|
||||||
|
|
||||||
|
## 🧪 测试账户
|
||||||
|
|
||||||
|
运行 `npm run db:seed` 后会创建以下测试账户：
|
||||||
|
|
||||||
|
### 管理员账户
|
||||||
|
- 邮箱: `admin@pandora.com`
|
||||||
|
- 密码: `admin123`
|
||||||
|
- 权限: 所有账号
|
||||||
|
|
||||||
|
### 测试用户账户
|
||||||
|
- 邮箱: `user@pandora.com`
|
||||||
|
- 密码: `user123`
|
||||||
|
- 权限: claude.ai 和 openai.com 账号
|
||||||
|
|
||||||
|
## 📝 开发说明
|
||||||
|
|
||||||
|
### 项目结构
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── config/ # 配置文件
|
||||||
|
│ ├── database.ts # 数据库连接
|
||||||
|
│ └── redis.ts # Redis 连接
|
||||||
|
├── controllers/ # 控制器
|
||||||
|
│ ├── authController.ts
|
||||||
|
│ ├── userController.ts
|
||||||
|
│ └── accountController.ts
|
||||||
|
├── middleware/ # 中间件
|
||||||
|
│ ├── authMiddleware.ts
|
||||||
|
│ ├── adminMiddleware.ts
|
||||||
|
│ ├── validateRequest.ts
|
||||||
|
│ ├── errorHandler.ts
|
||||||
|
│ └── notFoundHandler.ts
|
||||||
|
├── routes/ # 路由
|
||||||
|
│ ├── auth.ts
|
||||||
|
│ ├── users.ts
|
||||||
|
│ └── accounts.ts
|
||||||
|
├── utils/ # 工具函数
|
||||||
|
│ └── logger.ts
|
||||||
|
└── index.ts # 入口文件
|
||||||
|
```
|
||||||
|
|
||||||
|
### 数据库模型
|
||||||
|
- `User`: 用户信息
|
||||||
|
- `WebsiteAccount`: 网站账号
|
||||||
|
- `AccountAssignment`: 账号分配
|
||||||
|
- `Session`: 用户会话
|
||||||
|
- `AuditLog`: 审计日志
|
||||||
|
|
||||||
|
### 开发命令
|
||||||
|
```bash
|
||||||
|
# 开发模式
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# 构建
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# 数据库操作
|
||||||
|
npm run db:generate # 生成 Prisma 客户端
|
||||||
|
npm run db:migrate # 运行迁移
|
||||||
|
npm run db:push # 推送 schema 到数据库
|
||||||
|
npm run db:studio # 打开 Prisma Studio
|
||||||
|
npm run db:seed # 初始化测试数据
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚨 注意事项
|
||||||
|
|
||||||
|
1. **环境变量**: 确保所有必需的环境变量都已正确配置
|
||||||
|
2. **数据库**: 确保 PostgreSQL 数据库正在运行
|
||||||
|
3. **Redis**: 确保 Redis 服务正在运行
|
||||||
|
4. **邮件服务**: 如果使用邮箱验证功能，需要配置有效的 SMTP 服务
|
||||||
|
5. **JWT 密钥**: 生产环境请使用强随机密钥
|
||||||
|
6. **HTTPS**: 生产环境建议使用 HTTPS
|
||||||
|
|
||||||
|
## 📞 支持
|
||||||
|
|
||||||
|
如有问题，请查看：
|
||||||
|
1. 日志文件 (`logs/` 目录)
|
||||||
|
2. 数据库连接状态
|
||||||
|
3. Redis 连接状态
|
||||||
|
4. 环境变量配置
|
||||||
|
|
||||||
|
## 🔄 更新日志
|
||||||
|
|
||||||
|
### v1.0.0
|
||||||
|
- ✅ 完整的用户认证系统
|
||||||
|
- ✅ JWT 令牌认证
|
||||||
|
- ✅ 邮箱验证功能
|
||||||
|
- ✅ TOTP 二步验证
|
||||||
|
- ✅ 权限管理系统
|
||||||
|
- ✅ 账号管理系统
|
||||||
|
- ✅ 审计日志
|
||||||
|
- ✅ API 限流和安全防护
|
||||||
45
backend/package.json
Normal file
45
backend/package.json
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"name": "pandora-backend",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Pandora Backend API",
|
||||||
|
"main": "dist/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nodemon src/index.ts",
|
||||||
|
"build": "tsc",
|
||||||
|
"start": "node dist/index.js",
|
||||||
|
"db:generate": "prisma generate",
|
||||||
|
"db:push": "prisma db push",
|
||||||
|
"db:migrate": "prisma migrate dev",
|
||||||
|
"db:studio": "prisma studio",
|
||||||
|
"db:seed": "ts-node prisma/seed.ts"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"dependencies": {
|
||||||
|
"@prisma/client": "^5.7.1",
|
||||||
|
"bcryptjs": "^2.4.3",
|
||||||
|
"cors": "^2.8.5",
|
||||||
|
"dotenv": "^16.3.1",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"express-async-errors": "^3.1.1",
|
||||||
|
"express-rate-limit": "^7.1.5",
|
||||||
|
"express-validator": "^7.0.1",
|
||||||
|
"helmet": "^7.1.0",
|
||||||
|
"jsonwebtoken": "^9.0.2",
|
||||||
|
"nodemailer": "^6.9.7",
|
||||||
|
"winston": "^3.11.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
"@types/cors": "^2.8.17",
|
||||||
|
"@types/express": "^4.17.21",
|
||||||
|
"@types/jsonwebtoken": "^9.0.5",
|
||||||
|
"@types/node": "^20.10.5",
|
||||||
|
"@types/nodemailer": "^6.4.14",
|
||||||
|
"nodemon": "^3.0.2",
|
||||||
|
"prisma": "^5.7.1",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"typescript": "^5.3.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
99
backend/prisma/schema.prisma
Normal file
99
backend/prisma/schema.prisma
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
// This is your Prisma schema file,
|
||||||
|
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||||
|
|
||||||
|
generator client {
|
||||||
|
provider = "prisma-client-js"
|
||||||
|
}
|
||||||
|
|
||||||
|
datasource db {
|
||||||
|
provider = "sqlite"
|
||||||
|
url = env("DATABASE_URL")
|
||||||
|
}
|
||||||
|
|
||||||
|
model User {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
username String @unique
|
||||||
|
password String
|
||||||
|
firstName String?
|
||||||
|
lastName String?
|
||||||
|
isActive Boolean @default(true)
|
||||||
|
isAdmin Boolean @default(false)
|
||||||
|
lastLoginAt DateTime?
|
||||||
|
loginAttempts Int @default(0)
|
||||||
|
lockedUntil DateTime?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
// Relations
|
||||||
|
sessions Session[]
|
||||||
|
auditLogs AuditLog[]
|
||||||
|
accountAssignments AccountAssignment[]
|
||||||
|
|
||||||
|
@@map("users")
|
||||||
|
}
|
||||||
|
|
||||||
|
model WebsiteAccount {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
website String
|
||||||
|
accountName String
|
||||||
|
token String
|
||||||
|
isActive Boolean @default(true)
|
||||||
|
maxUsers Int @default(1)
|
||||||
|
currentUsers Int @default(0)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
// Relations
|
||||||
|
accountAssignments AccountAssignment[]
|
||||||
|
|
||||||
|
@@unique([website, accountName])
|
||||||
|
@@map("website_accounts")
|
||||||
|
}
|
||||||
|
|
||||||
|
model AccountAssignment {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
userId String
|
||||||
|
accountId String
|
||||||
|
assignedAt DateTime @default(now())
|
||||||
|
expiresAt DateTime?
|
||||||
|
isActive Boolean @default(true)
|
||||||
|
|
||||||
|
// Relations
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
account WebsiteAccount @relation(fields: [accountId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@unique([userId, accountId])
|
||||||
|
@@map("account_assignments")
|
||||||
|
}
|
||||||
|
|
||||||
|
model Session {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
userId String
|
||||||
|
token String @unique
|
||||||
|
ipAddress String?
|
||||||
|
userAgent String?
|
||||||
|
expiresAt DateTime
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
|
||||||
|
// Relations
|
||||||
|
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||||
|
|
||||||
|
@@map("sessions")
|
||||||
|
}
|
||||||
|
|
||||||
|
model AuditLog {
|
||||||
|
id String @id @default(cuid())
|
||||||
|
userId String?
|
||||||
|
action String
|
||||||
|
resource String?
|
||||||
|
resourceId String?
|
||||||
|
details String? // JSON string
|
||||||
|
ipAddress String?
|
||||||
|
userAgent String?
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
|
||||||
|
// Relations
|
||||||
|
user User? @relation(fields: [userId], references: [id], onDelete: SetNull)
|
||||||
|
|
||||||
|
@@map("audit_logs")
|
||||||
|
}
|
||||||
153
backend/prisma/seed.ts
Normal file
153
backend/prisma/seed.ts
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import { PrismaClient } from '@prisma/client';
|
||||||
|
import bcrypt from 'bcryptjs';
|
||||||
|
|
||||||
|
const prisma = new PrismaClient();
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
console.log('开始初始化数据库...');
|
||||||
|
|
||||||
|
// 创建管理员用户
|
||||||
|
const adminPassword = await bcrypt.hash('admin123', 12);
|
||||||
|
const admin = await prisma.user.upsert({
|
||||||
|
where: { email: 'admin@pandora.com' },
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
email: 'admin@pandora.com',
|
||||||
|
username: 'admin',
|
||||||
|
password: adminPassword,
|
||||||
|
firstName: '管理员',
|
||||||
|
lastName: '系统',
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
emailVerified: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建测试用户
|
||||||
|
const userPassword = await bcrypt.hash('user123', 12);
|
||||||
|
const user = await prisma.user.upsert({
|
||||||
|
where: { email: 'user@pandora.com' },
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
email: 'user@pandora.com',
|
||||||
|
username: 'testuser',
|
||||||
|
password: userPassword,
|
||||||
|
firstName: '测试',
|
||||||
|
lastName: '用户',
|
||||||
|
isAdmin: false,
|
||||||
|
isActive: true,
|
||||||
|
emailVerified: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建网站账号
|
||||||
|
const accounts = [
|
||||||
|
{
|
||||||
|
website: 'claude.ai',
|
||||||
|
accountName: 'claude_pro_1',
|
||||||
|
token: 'sk-ant-api03-xxx-claude-pro-1',
|
||||||
|
maxUsers: 3,
|
||||||
|
currentUsers: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
website: 'openai.com',
|
||||||
|
accountName: 'gpt4_plus_1',
|
||||||
|
token: 'sk-xxx-gpt4-plus-1',
|
||||||
|
maxUsers: 2,
|
||||||
|
currentUsers: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
website: 'gemini.google.com',
|
||||||
|
accountName: 'gemini_pro_1',
|
||||||
|
token: 'AIzaSyCxxx-gemini-pro-1',
|
||||||
|
maxUsers: 1,
|
||||||
|
currentUsers: 0,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const accountData of accounts) {
|
||||||
|
await prisma.websiteAccount.upsert({
|
||||||
|
where: {
|
||||||
|
website_accountName: {
|
||||||
|
website: accountData.website,
|
||||||
|
accountName: accountData.accountName,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {},
|
||||||
|
create: accountData,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为管理员分配所有账号
|
||||||
|
const allAccounts = await prisma.websiteAccount.findMany();
|
||||||
|
for (const account of allAccounts) {
|
||||||
|
await prisma.accountAssignment.upsert({
|
||||||
|
where: {
|
||||||
|
userId_accountId: {
|
||||||
|
userId: admin.id,
|
||||||
|
accountId: account.id,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
userId: admin.id,
|
||||||
|
accountId: account.id,
|
||||||
|
isActive: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 为用户分配部分账号
|
||||||
|
const userAccounts = await prisma.websiteAccount.findMany({
|
||||||
|
where: {
|
||||||
|
website: {
|
||||||
|
in: ['claude.ai', 'openai.com']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const account of userAccounts) {
|
||||||
|
await prisma.accountAssignment.upsert({
|
||||||
|
where: {
|
||||||
|
userId_accountId: {
|
||||||
|
userId: user.id,
|
||||||
|
accountId: account.id,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {},
|
||||||
|
create: {
|
||||||
|
userId: user.id,
|
||||||
|
accountId: account.id,
|
||||||
|
isActive: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新账号当前用户数
|
||||||
|
for (const account of allAccounts) {
|
||||||
|
const userCount = await prisma.accountAssignment.count({
|
||||||
|
where: {
|
||||||
|
accountId: account.id,
|
||||||
|
isActive: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await prisma.websiteAccount.update({
|
||||||
|
where: { id: account.id },
|
||||||
|
data: { currentUsers: userCount }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('数据库初始化完成！');
|
||||||
|
console.log('管理员账户:', admin.email, '密码: admin123');
|
||||||
|
console.log('测试用户账户:', user.email, '密码: user123');
|
||||||
|
}
|
||||||
|
|
||||||
|
main()
|
||||||
|
.catch((e) => {
|
||||||
|
console.error('数据库初始化失败:', e);
|
||||||
|
process.exit(1);
|
||||||
|
})
|
||||||
|
.finally(async () => {
|
||||||
|
await prisma.$disconnect();
|
||||||
|
});
|
||||||
34
backend/src/config/database.ts
Normal file
34
backend/src/config/database.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import { PrismaClient } from '@prisma/client';
|
||||||
|
import { logger } from '../utils/logger';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
var prisma: PrismaClient | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const prisma = globalThis.prisma || new PrismaClient({
|
||||||
|
log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
globalThis.prisma = prisma;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function connectDatabase() {
|
||||||
|
try {
|
||||||
|
await prisma.$connect();
|
||||||
|
logger.info('Database connected successfully');
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Database connection failed:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function disconnectDatabase() {
|
||||||
|
try {
|
||||||
|
await prisma.$disconnect();
|
||||||
|
logger.info('Database disconnected successfully');
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Database disconnection failed:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
545
backend/src/controllers/accountController.ts
Normal file
545
backend/src/controllers/accountController.ts
Normal file
@@ -0,0 +1,545 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { AuthRequest } from '../middleware/authMiddleware';
|
||||||
|
|
||||||
|
export const accountController = {
|
||||||
|
// 获取所有账号 (管理员)
|
||||||
|
async getAllAccounts(req: Request, res: Response) {
|
||||||
|
const accounts = await prisma.websiteAccount.findMany({
|
||||||
|
include: {
|
||||||
|
accountAssignments: {
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
accounts: accounts.map((account: any) => ({
|
||||||
|
id: account.id,
|
||||||
|
website: account.website,
|
||||||
|
username: account.accountName,
|
||||||
|
token: account.token,
|
||||||
|
isActive: account.isActive,
|
||||||
|
createdAt: account.createdAt,
|
||||||
|
updatedAt: account.updatedAt,
|
||||||
|
assignedUsers: account.accountAssignments.map((aa: any) => aa.user)
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据ID获取账号 (管理员)
|
||||||
|
async getAccountById(req: Request, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '账号ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = await prisma.websiteAccount.findUnique({
|
||||||
|
where: { id },
|
||||||
|
include: {
|
||||||
|
accountAssignments: {
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return res.status(404).json({ error: '账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
account: {
|
||||||
|
id: account.id,
|
||||||
|
website: account.website,
|
||||||
|
username: account.accountName,
|
||||||
|
token: account.token,
|
||||||
|
isActive: account.isActive,
|
||||||
|
createdAt: account.createdAt,
|
||||||
|
updatedAt: account.updatedAt,
|
||||||
|
assignedUsers: account.accountAssignments.map((aa: any) => aa.user)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 创建新账号 (管理员)
|
||||||
|
async createAccount(req: Request, res: Response) {
|
||||||
|
const { website, accountName, token, isActive, maxUsers } = req.body;
|
||||||
|
|
||||||
|
if (!website || !accountName || !token) {
|
||||||
|
return res.status(400).json({ error: '网站、账号名称和token是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查账号是否已存在
|
||||||
|
const existingAccount = await prisma.websiteAccount.findFirst({
|
||||||
|
where: {
|
||||||
|
website,
|
||||||
|
accountName
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingAccount) {
|
||||||
|
return res.status(400).json({ error: '账号已存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = await prisma.websiteAccount.create({
|
||||||
|
data: {
|
||||||
|
website,
|
||||||
|
accountName,
|
||||||
|
token,
|
||||||
|
isActive: isActive !== undefined ? isActive : true,
|
||||||
|
maxUsers: maxUsers || 1,
|
||||||
|
currentUsers: 0,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(201).json({
|
||||||
|
message: '账号创建成功',
|
||||||
|
account: {
|
||||||
|
id: account.id,
|
||||||
|
website: account.website,
|
||||||
|
username: account.accountName,
|
||||||
|
token: account.token,
|
||||||
|
isActive: account.isActive,
|
||||||
|
createdAt: account.createdAt,
|
||||||
|
updatedAt: account.updatedAt
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新账号 (管理员)
|
||||||
|
async updateAccount(req: Request, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
const { website, accountName, token, maxUsers, isActive } = req.body;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '账号ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = await prisma.websiteAccount.findUnique({
|
||||||
|
where: { id }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return res.status(404).json({ error: '账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否与其他账号重复（排除当前账号）
|
||||||
|
if (website && accountName) {
|
||||||
|
const existingAccount = await prisma.websiteAccount.findFirst({
|
||||||
|
where: {
|
||||||
|
website,
|
||||||
|
accountName,
|
||||||
|
id: { not: id }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingAccount) {
|
||||||
|
return res.status(400).json({ error: '该网站和账号名称组合已存在' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const updatedAccount = await prisma.websiteAccount.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
website,
|
||||||
|
accountName,
|
||||||
|
token,
|
||||||
|
maxUsers,
|
||||||
|
isActive,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
message: '账号更新成功',
|
||||||
|
account: {
|
||||||
|
id: updatedAccount.id,
|
||||||
|
website: updatedAccount.website,
|
||||||
|
username: updatedAccount.accountName,
|
||||||
|
token: updatedAccount.token,
|
||||||
|
isActive: updatedAccount.isActive,
|
||||||
|
createdAt: updatedAccount.createdAt,
|
||||||
|
updatedAt: updatedAccount.updatedAt
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除账号 (管理员)
|
||||||
|
async deleteAccount(req: Request, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '账号ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const account = await prisma.websiteAccount.findUnique({
|
||||||
|
where: { id }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return res.status(404).json({ error: '账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除账号相关的所有分配
|
||||||
|
await prisma.$transaction([
|
||||||
|
prisma.accountAssignment.deleteMany({ where: { accountId: id } }),
|
||||||
|
prisma.websiteAccount.delete({ where: { id } })
|
||||||
|
]);
|
||||||
|
|
||||||
|
return res.json({ message: '账号删除成功' });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户的已分配账号
|
||||||
|
async getUserAccounts(req: AuthRequest, res: Response) {
|
||||||
|
if (!req.user) {
|
||||||
|
return res.status(401).json({ error: '未授权' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const assignments = await prisma.accountAssignment.findMany({
|
||||||
|
where: {
|
||||||
|
userId: req.user.id,
|
||||||
|
isActive: true,
|
||||||
|
OR: [
|
||||||
|
{ expiresAt: null },
|
||||||
|
{ expiresAt: { gt: new Date() } }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
account: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
website: true,
|
||||||
|
accountName: true,
|
||||||
|
token: true,
|
||||||
|
isActive: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
accounts: assignments.map((aa: any) => ({
|
||||||
|
id: aa.account.id,
|
||||||
|
website: aa.account.website,
|
||||||
|
username: aa.account.accountName,
|
||||||
|
token: aa.account.token,
|
||||||
|
isActive: aa.account.isActive,
|
||||||
|
createdAt: aa.account.createdAt,
|
||||||
|
updatedAt: aa.account.updatedAt,
|
||||||
|
assignedAt: aa.assignedAt,
|
||||||
|
expiresAt: aa.expiresAt,
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分配账号给用户 (管理员)
|
||||||
|
async assignAccount(req: Request, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
const { userId, expiresAt } = req.body;
|
||||||
|
|
||||||
|
if (!id || !userId) {
|
||||||
|
return res.status(400).json({ error: '账号ID和用户ID都是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查账号是否存在
|
||||||
|
const account = await prisma.websiteAccount.findUnique({
|
||||||
|
where: { id }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return res.status(404).json({ error: '账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查用户是否存在
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: userId }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查账号是否已满
|
||||||
|
if (account.currentUsers >= account.maxUsers) {
|
||||||
|
return res.status(400).json({ error: '账号已达到最大用户数' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否已经分配
|
||||||
|
const existingAssignment = await prisma.accountAssignment.findFirst({
|
||||||
|
where: {
|
||||||
|
userId,
|
||||||
|
accountId: id,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingAssignment) {
|
||||||
|
return res.status(400).json({ error: '用户已分配此账号' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建分配
|
||||||
|
const assignment = await prisma.accountAssignment.create({
|
||||||
|
data: {
|
||||||
|
userId,
|
||||||
|
accountId: id,
|
||||||
|
expiresAt: expiresAt ? new Date(expiresAt) : null,
|
||||||
|
isActive: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新账号当前用户数
|
||||||
|
await prisma.websiteAccount.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
currentUsers: {
|
||||||
|
increment: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
message: '账号分配成功',
|
||||||
|
assignment
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 取消账号分配 (管理员)
|
||||||
|
async unassignAccount(req: Request, res: Response) {
|
||||||
|
const { id, userId } = req.params;
|
||||||
|
|
||||||
|
if (!id || !userId) {
|
||||||
|
return res.status(400).json({ error: '账号ID和用户ID都是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const assignment = await prisma.accountAssignment.findFirst({
|
||||||
|
where: {
|
||||||
|
userId,
|
||||||
|
accountId: id,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!assignment) {
|
||||||
|
return res.status(404).json({ error: '分配不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除分配
|
||||||
|
await prisma.accountAssignment.delete({
|
||||||
|
where: { id: assignment.id }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 更新账号当前用户数
|
||||||
|
await prisma.websiteAccount.update({
|
||||||
|
where: { id },
|
||||||
|
data: {
|
||||||
|
currentUsers: {
|
||||||
|
decrement: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({ message: '账号分配已取消' });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 网站登录
|
||||||
|
async loginToWebsite(req: Request, res: Response) {
|
||||||
|
const { accountId } = req.params;
|
||||||
|
const { userId } = req.body;
|
||||||
|
|
||||||
|
if (!accountId || !userId) {
|
||||||
|
return res.status(400).json({ error: '账号ID和用户ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取账号信息
|
||||||
|
const account = await prisma.websiteAccount.findUnique({
|
||||||
|
where: { id: accountId }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!account) {
|
||||||
|
return res.status(404).json({ error: '账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查用户是否有权限访问该账号
|
||||||
|
console.log('检查用户权限:', { accountId, userId });
|
||||||
|
|
||||||
|
const assignment = await prisma.accountAssignment.findFirst({
|
||||||
|
where: {
|
||||||
|
accountId,
|
||||||
|
userId,
|
||||||
|
isActive: true,
|
||||||
|
OR: [
|
||||||
|
{ expiresAt: null },
|
||||||
|
{ expiresAt: { gt: new Date() } }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('权限检查结果:', {
|
||||||
|
assignment: assignment ? 'found' : 'not found',
|
||||||
|
accountId,
|
||||||
|
userId,
|
||||||
|
currentTime: new Date()
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!assignment) {
|
||||||
|
// 获取更多调试信息
|
||||||
|
const allAssignments = await prisma.accountAssignment.findMany({
|
||||||
|
where: { accountId, userId }
|
||||||
|
});
|
||||||
|
console.log('该用户的所有分配记录:', allAssignments);
|
||||||
|
|
||||||
|
return res.status(403).json({ error: '您没有权限访问该账号' });
|
||||||
|
}
|
||||||
|
|
||||||
|
let loginUrl = '';
|
||||||
|
|
||||||
|
// 根据网站类型处理登录
|
||||||
|
switch (account.website) {
|
||||||
|
case 'claude':
|
||||||
|
loginUrl = await handleClaudeLogin(account.token, userId);
|
||||||
|
break;
|
||||||
|
case 'chatgpt':
|
||||||
|
loginUrl = await handleChatGPTLogin(account.token, userId);
|
||||||
|
break;
|
||||||
|
case 'grok':
|
||||||
|
loginUrl = await handleGrokLogin(account.token, userId);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return res.status(400).json({ error: '不支持的网站类型' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
success: true,
|
||||||
|
loginUrl,
|
||||||
|
website: account.website,
|
||||||
|
accountName: account.accountName
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error('网站登录失败:', error);
|
||||||
|
return res.status(500).json({ error: '登录失败，请稍后重试' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Claude 登录处理
|
||||||
|
async function handleClaudeLogin(token: string, userName: string): Promise<string> {
|
||||||
|
try {
|
||||||
|
const baseUrl = process.env.CLAUDE_TARGET_URL || 'https://chat.micar9.com:8443';
|
||||||
|
console.log('Claude登录处理:', { token, userName });
|
||||||
|
// 第一步：获取oauth token
|
||||||
|
const oauthResponse = await fetch(`${baseUrl}/manage-api/auth/oauth_token`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
session_key: token,
|
||||||
|
unique_name: userName
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!oauthResponse.ok) {
|
||||||
|
throw new Error(`OAuth token 请求失败: ${oauthResponse.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const oauthData = await oauthResponse.json() as { login_url?: string };
|
||||||
|
|
||||||
|
if (!oauthData.login_url) {
|
||||||
|
throw new Error('未获取到登录URL');
|
||||||
|
}
|
||||||
|
|
||||||
|
return oauthData.login_url;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Claude登录处理失败:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ChatGPT 登录处理
|
||||||
|
async function handleChatGPTLogin(token: string, userName: string): Promise<string> {
|
||||||
|
try {
|
||||||
|
const baseUrl = process.env.CLAUDE_TARGET_URL || 'http://127.0.0.1:8181';
|
||||||
|
|
||||||
|
const response = await fetch(`${baseUrl}/api/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${process.env.ADMIN_PASSWORD || 'admin'}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
access_token: token,
|
||||||
|
user_name: userName,
|
||||||
|
isolated_session: true,
|
||||||
|
limits: []
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`ChatGPT登录请求失败: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json() as { login_url?: string };
|
||||||
|
|
||||||
|
if (!data.login_url) {
|
||||||
|
throw new Error('未获取到登录URL');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.login_url;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('ChatGPT登录处理失败:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grok 登录处理
|
||||||
|
async function handleGrokLogin(token: string, userName: string): Promise<string> {
|
||||||
|
try {
|
||||||
|
const baseUrl = process.env.CLAUDE_TARGET_URL || 'https://grok-mirror.micar9.com:8443';
|
||||||
|
|
||||||
|
const response = await fetch(`${baseUrl}/api/login-v2`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
user_name: userName,
|
||||||
|
sso_token: token
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Grok登录请求失败: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json() as { login_url?: string };
|
||||||
|
|
||||||
|
if (!data.login_url) {
|
||||||
|
throw new Error('未获取到登录URL');
|
||||||
|
}
|
||||||
|
|
||||||
|
return data.login_url;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Grok登录处理失败:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
222
backend/src/controllers/adminController.ts
Normal file
222
backend/src/controllers/adminController.ts
Normal file
@@ -0,0 +1,222 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import bcrypt from 'bcryptjs';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { logger } from '../utils/logger';
|
||||||
|
import { createAuditLog } from '../utils/audit';
|
||||||
|
|
||||||
|
export const adminController = {
|
||||||
|
// 管理员登录
|
||||||
|
async login(req: Request, res: Response): Promise<void> {
|
||||||
|
try {
|
||||||
|
const { username, password } = req.body;
|
||||||
|
|
||||||
|
// 验证管理员凭据
|
||||||
|
const admin = await prisma.user.findFirst({
|
||||||
|
where: {
|
||||||
|
username,
|
||||||
|
isAdmin: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!admin) {
|
||||||
|
// 记录管理员登录失败审计日志
|
||||||
|
await createAuditLog({
|
||||||
|
userId: null,
|
||||||
|
action: 'ADMIN_LOGIN_FAILED',
|
||||||
|
resource: 'ADMIN',
|
||||||
|
details: JSON.stringify({ username, reason: '管理员不存在' }),
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '管理员凭据无效'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证密码
|
||||||
|
const isValidPassword = await bcrypt.compare(password, admin.password);
|
||||||
|
if (!isValidPassword) {
|
||||||
|
// 记录管理员登录失败审计日志
|
||||||
|
await createAuditLog({
|
||||||
|
userId: admin.id,
|
||||||
|
action: 'ADMIN_LOGIN_FAILED',
|
||||||
|
resource: 'ADMIN',
|
||||||
|
details: JSON.stringify({ username, reason: '密码错误' }),
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null
|
||||||
|
});
|
||||||
|
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '管理员凭据无效'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成JWT token
|
||||||
|
const token = jwt.sign(
|
||||||
|
{
|
||||||
|
userId: admin.id,
|
||||||
|
username: admin.username,
|
||||||
|
role: admin.isAdmin ? 'admin' : 'user'
|
||||||
|
},
|
||||||
|
process.env.JWT_SECRET!,
|
||||||
|
{ expiresIn: '24h' }
|
||||||
|
);
|
||||||
|
|
||||||
|
// 创建审计日志
|
||||||
|
await createAuditLog({
|
||||||
|
userId: admin.id,
|
||||||
|
action: 'ADMIN_LOGIN',
|
||||||
|
resource: 'ADMIN',
|
||||||
|
details: { username: admin.username },
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null
|
||||||
|
});
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
message: '管理员登录成功',
|
||||||
|
token,
|
||||||
|
admin: {
|
||||||
|
id: admin.id,
|
||||||
|
username: admin.username,
|
||||||
|
role: admin.isAdmin ? 'admin' : 'user'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Admin login error:', error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: '服务器内部错误'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
async getStats(req: Request, res: Response): Promise<void> {
|
||||||
|
try {
|
||||||
|
// 获取用户总数
|
||||||
|
const totalUsers = await prisma.user.count({
|
||||||
|
where: { isAdmin: false }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取账号总数
|
||||||
|
const totalAccounts = await prisma.websiteAccount.count();
|
||||||
|
|
||||||
|
// 获取今日访问数（基于会话）
|
||||||
|
const today = new Date();
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
const todayVisits = await prisma.session.count({
|
||||||
|
where: {
|
||||||
|
createdAt: {
|
||||||
|
gte: today
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取系统告警数（基于审计日志中的错误）
|
||||||
|
const alerts = await prisma.auditLog.count({
|
||||||
|
where: {
|
||||||
|
action: { contains: 'ERROR' },
|
||||||
|
createdAt: {
|
||||||
|
gte: new Date(Date.now() - 24 * 60 * 60 * 1000) // 最近24小时
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('统计数据:', { totalUsers, totalAccounts, todayVisits, alerts });
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
totalUsers,
|
||||||
|
totalAccounts,
|
||||||
|
todayVisits,
|
||||||
|
alerts
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Get stats error:', error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: '获取统计数据失败'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取最近活动
|
||||||
|
async getRecentActivities(req: Request, res: Response): Promise<void> {
|
||||||
|
try {
|
||||||
|
const activities = await prisma.auditLog.findMany({
|
||||||
|
take: 10,
|
||||||
|
orderBy: {
|
||||||
|
createdAt: 'desc'
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const formattedActivities = activities.map((activity: any) => {
|
||||||
|
let description = '';
|
||||||
|
|
||||||
|
if (activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED') {
|
||||||
|
// 解析失败原因
|
||||||
|
let reason = '登录失败';
|
||||||
|
let username = '未知用户';
|
||||||
|
|
||||||
|
if (activity.details) {
|
||||||
|
try {
|
||||||
|
const details = JSON.parse(activity.details);
|
||||||
|
reason = details.reason || '登录失败';
|
||||||
|
username = details.username || '未知用户';
|
||||||
|
} catch (e) {
|
||||||
|
console.error('解析活动详情失败:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
description = `${username} ${reason}`;
|
||||||
|
} else if (activity.user) {
|
||||||
|
description = `${activity.user.username} ${activity.action}`;
|
||||||
|
} else {
|
||||||
|
description = `系统 ${activity.action}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: activity.id,
|
||||||
|
description,
|
||||||
|
time: activity.createdAt,
|
||||||
|
details: activity.details,
|
||||||
|
ipAddress: activity.ipAddress,
|
||||||
|
userAgent: activity.userAgent,
|
||||||
|
action: activity.action
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('最近活动:', formattedActivities);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
activities: formattedActivities
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Get recent activities error:', error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: '获取最近活动失败'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
57
backend/src/controllers/auditLogController.ts
Normal file
57
backend/src/controllers/auditLogController.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { logger } from '../utils/logger';
|
||||||
|
|
||||||
|
export const auditLogController = {
|
||||||
|
// 获取审计日志
|
||||||
|
async getAuditLogs(req: Request, res: Response): Promise<void> {
|
||||||
|
try {
|
||||||
|
const { page = 1, limit = 10, userId, action, resource } = req.query;
|
||||||
|
const skip = (Number(page) - 1) * Number(limit);
|
||||||
|
|
||||||
|
const where: any = {};
|
||||||
|
if (userId) where.userId = String(userId);
|
||||||
|
if (action) where.action = { contains: String(action) };
|
||||||
|
if (resource) where.resource = { contains: String(resource) };
|
||||||
|
|
||||||
|
const [logs, total] = await Promise.all([
|
||||||
|
prisma.auditLog.findMany({
|
||||||
|
where,
|
||||||
|
skip,
|
||||||
|
take: Number(limit),
|
||||||
|
orderBy: {
|
||||||
|
createdAt: 'desc'
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
prisma.auditLog.count({ where })
|
||||||
|
]);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
logs,
|
||||||
|
pagination: {
|
||||||
|
page: Number(page),
|
||||||
|
limit: Number(limit),
|
||||||
|
total,
|
||||||
|
totalPages: Math.ceil(total / Number(limit))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Get audit logs error:', error);
|
||||||
|
res.status(500).json({
|
||||||
|
success: false,
|
||||||
|
message: '获取审计日志失败'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
387
backend/src/controllers/authController.ts
Normal file
387
backend/src/controllers/authController.ts
Normal file
@@ -0,0 +1,387 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import bcrypt from 'bcryptjs';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { logger } from '../utils/logger';
|
||||||
|
import { AuthRequest } from '../middleware/authMiddleware';
|
||||||
|
import type { Secret, SignOptions } from 'jsonwebtoken';
|
||||||
|
|
||||||
|
// Generate JWT token
|
||||||
|
function generateToken(userId: string): string {
|
||||||
|
const secret = process.env.JWT_SECRET;
|
||||||
|
if (!secret) {
|
||||||
|
throw new Error('JWT_SECRET is not configured');
|
||||||
|
}
|
||||||
|
const expiresIn = process.env.JWT_EXPIRES_IN || '7d';
|
||||||
|
return jwt.sign(
|
||||||
|
{ userId },
|
||||||
|
secret,
|
||||||
|
{ expiresIn: expiresIn as any }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create session
|
||||||
|
async function createSession(userId: string, token: string, req: Request) {
|
||||||
|
console.log('创建session:', { userId, token: token.substring(0, 20) + '...' })
|
||||||
|
|
||||||
|
const session = await prisma.session.create({
|
||||||
|
data: {
|
||||||
|
userId,
|
||||||
|
token,
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Session创建成功:', {
|
||||||
|
sessionId: session.id,
|
||||||
|
expiresAt: session.expiresAt,
|
||||||
|
currentTime: new Date()
|
||||||
|
})
|
||||||
|
|
||||||
|
return session;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const authController = {
|
||||||
|
// 用户注册
|
||||||
|
async register(req: Request, res: Response) {
|
||||||
|
const { username, password, confirmPassword, firstName, lastName } = req.body;
|
||||||
|
|
||||||
|
// 验证密码确认
|
||||||
|
if (password !== confirmPassword) {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: '密码和确认密码不匹配'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if user already exists
|
||||||
|
const existingUser = await prisma.user.findUnique({
|
||||||
|
where: { username }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
return res.status(400).json({
|
||||||
|
error: '用户名已存在'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hash password
|
||||||
|
const hashedPassword = await bcrypt.hash(password, parseInt(process.env.BCRYPT_ROUNDS || '12'));
|
||||||
|
|
||||||
|
// Create user with isActive set to false by default
|
||||||
|
const user = await prisma.user.create({
|
||||||
|
data: {
|
||||||
|
username,
|
||||||
|
password: hashedPassword,
|
||||||
|
firstName,
|
||||||
|
lastName,
|
||||||
|
isActive: false, // 新注册用户默认为禁用状态
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create audit log
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: user.id,
|
||||||
|
action: 'USER_REGISTERED',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: user.id,
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(201).json({
|
||||||
|
message: '注册成功，请等待管理员激活您的账户',
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
isActive: user.isActive,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户登录
|
||||||
|
async login(req: Request, res: Response) {
|
||||||
|
const { username, password } = req.body;
|
||||||
|
|
||||||
|
// Find user
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { username }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
// 记录登录失败审计日志
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: null,
|
||||||
|
action: 'USER_LOGIN_FAILED',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: null,
|
||||||
|
details: JSON.stringify({ username, reason: '用户不存在' }),
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return res.status(401).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if user is active
|
||||||
|
if (!user.isActive) {
|
||||||
|
// 记录登录失败审计日志
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: user.id,
|
||||||
|
action: 'USER_LOGIN_FAILED',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: user.id,
|
||||||
|
details: JSON.stringify({ username, reason: '账户已被禁用' }),
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return res.status(401).json({ error: '账户已被禁用，请联系管理员激活' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify password
|
||||||
|
const isValidPassword = await bcrypt.compare(password, user.password);
|
||||||
|
if (!isValidPassword) {
|
||||||
|
// 增加登录失败次数
|
||||||
|
const loginAttempts = (user.loginAttempts || 0) + 1;
|
||||||
|
const updateData: any = { loginAttempts };
|
||||||
|
let userDisabled = false;
|
||||||
|
|
||||||
|
// 如果失败次数达到5次，禁用账户
|
||||||
|
if (loginAttempts >= 5) {
|
||||||
|
updateData.isActive = false;
|
||||||
|
userDisabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
await prisma.user.update({
|
||||||
|
where: { id: user.id },
|
||||||
|
data: updateData
|
||||||
|
});
|
||||||
|
|
||||||
|
// 记录登录失败审计日志
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: user.id,
|
||||||
|
action: 'USER_LOGIN_FAILED',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: user.id,
|
||||||
|
details: JSON.stringify({
|
||||||
|
username,
|
||||||
|
reason: userDisabled ? '密码错误且账户已被禁用' : '密码错误',
|
||||||
|
loginAttempts,
|
||||||
|
isDisabled: userDisabled
|
||||||
|
}),
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (userDisabled) {
|
||||||
|
return res.status(401).json({ error: '登录失败次数过多，账户已被禁用，请联系管理员' });
|
||||||
|
}
|
||||||
|
return res.status(401).json({
|
||||||
|
error: '用户名或密码错误',
|
||||||
|
remainingAttempts: 5 - loginAttempts
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录成功，重置登录失败次数和锁定时间
|
||||||
|
await prisma.user.update({
|
||||||
|
where: { id: user.id },
|
||||||
|
data: {
|
||||||
|
loginAttempts: 0,
|
||||||
|
lockedUntil: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Generate token
|
||||||
|
const token = generateToken(user.id);
|
||||||
|
|
||||||
|
// Delete existing sessions for this user (optional - for single session per user)
|
||||||
|
await prisma.session.deleteMany({
|
||||||
|
where: { userId: user.id }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create session
|
||||||
|
await createSession(user.id, token, req);
|
||||||
|
|
||||||
|
// Update last login
|
||||||
|
await prisma.user.update({
|
||||||
|
where: { id: user.id },
|
||||||
|
data: { lastLoginAt: new Date() }
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create audit log
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: user.id,
|
||||||
|
action: 'USER_LOGIN',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: user.id,
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
message: '登录成功',
|
||||||
|
token,
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户登出
|
||||||
|
async logout(req: AuthRequest, res: Response) {
|
||||||
|
const token = req.headers.authorization?.substring(7);
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
// Delete session
|
||||||
|
await prisma.session.deleteMany({
|
||||||
|
where: { token }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create audit log
|
||||||
|
if (req.user) {
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: req.user.id,
|
||||||
|
action: 'USER_LOGOUT',
|
||||||
|
resource: 'user',
|
||||||
|
resourceId: req.user.id,
|
||||||
|
ipAddress: req.ip ?? null,
|
||||||
|
userAgent: req.get('User-Agent') ?? null,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
res.json({ message: '登出成功' });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取当前用户信息
|
||||||
|
async getCurrentUser(req: AuthRequest, res: Response) {
|
||||||
|
if (!req.user) {
|
||||||
|
return res.status(401).json({ error: '未授权' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: req.user.id },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
lastLoginAt: true,
|
||||||
|
createdAt: true,
|
||||||
|
updatedAt: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
user: user
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 刷新token
|
||||||
|
async refreshToken(req: Request, res: Response) {
|
||||||
|
const { refreshToken } = req.body;
|
||||||
|
|
||||||
|
if (!refreshToken) {
|
||||||
|
return res.status(400).json({ error: '刷新令牌是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(refreshToken, process.env.JWT_SECRET!) as any;
|
||||||
|
|
||||||
|
const session = await prisma.session.findFirst({
|
||||||
|
where: {
|
||||||
|
token: refreshToken,
|
||||||
|
expiresAt: {
|
||||||
|
gt: new Date()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!session || !session.user || !session.user.isActive) {
|
||||||
|
return res.status(401).json({ error: '无效的刷新令牌' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate new token
|
||||||
|
const newToken = generateToken(session.user.id);
|
||||||
|
|
||||||
|
// Update session
|
||||||
|
await prisma.session.update({
|
||||||
|
where: { id: session.id },
|
||||||
|
data: {
|
||||||
|
token: newToken,
|
||||||
|
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
token: newToken,
|
||||||
|
user: session.user
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
return res.status(401).json({ error: '无效的刷新令牌' });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调试端点 - 检查用户session状态
|
||||||
|
async debugSession(req: AuthRequest, res: Response) {
|
||||||
|
if (!req.user) {
|
||||||
|
return res.status(401).json({ error: '未授权' });
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const sessions = await prisma.session.findMany({
|
||||||
|
where: { userId: req.user.id },
|
||||||
|
orderBy: { createdAt: 'desc' }
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
userId: req.user.id,
|
||||||
|
username: req.user.username,
|
||||||
|
sessions: sessions.map((s: any) => ({
|
||||||
|
id: s.id,
|
||||||
|
token: s.token.substring(0, 20) + '...',
|
||||||
|
expiresAt: s.expiresAt,
|
||||||
|
createdAt: s.createdAt,
|
||||||
|
isExpired: s.expiresAt < new Date()
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
return res.status(500).json({ error: '获取session信息失败' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
365
backend/src/controllers/userController.ts
Normal file
365
backend/src/controllers/userController.ts
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { AuthRequest } from '../middleware/auth';
|
||||||
|
import bcrypt from 'bcryptjs';
|
||||||
|
|
||||||
|
export const userController = {
|
||||||
|
// 获取所有用户 (管理员)
|
||||||
|
async getAllUsers(req: Request, res: Response) {
|
||||||
|
const { page = 1, limit = 10, search = '', role = '' } = req.query;
|
||||||
|
|
||||||
|
const pageNum = parseInt(page as string) || 1;
|
||||||
|
const limitNum = parseInt(limit as string) || 10;
|
||||||
|
const skip = (pageNum - 1) * limitNum;
|
||||||
|
|
||||||
|
// 构建查询条件
|
||||||
|
const where: any = {};
|
||||||
|
|
||||||
|
if (search) {
|
||||||
|
where.OR = [
|
||||||
|
{ username: { contains: search as string, mode: 'insensitive' } },
|
||||||
|
{ firstName: { contains: search as string, mode: 'insensitive' } },
|
||||||
|
{ lastName: { contains: search as string, mode: 'insensitive' } }
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (role) {
|
||||||
|
if (role === 'admin') {
|
||||||
|
where.isAdmin = true;
|
||||||
|
} else if (role === 'user') {
|
||||||
|
where.isAdmin = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取总数
|
||||||
|
const total = await prisma.user.count({ where });
|
||||||
|
|
||||||
|
// 获取用户列表
|
||||||
|
const users = await prisma.user.findMany({
|
||||||
|
where,
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
totpEnabled: true,
|
||||||
|
lastLoginAt: true,
|
||||||
|
createdAt: true,
|
||||||
|
accountAssignments: {
|
||||||
|
select: {
|
||||||
|
accountId: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
skip,
|
||||||
|
take: limitNum,
|
||||||
|
orderBy: { createdAt: 'desc' }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 计算分页信息
|
||||||
|
const totalPages = Math.ceil(total / limitNum);
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
users: users.map((user: any) => ({
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
role: user.isAdmin ? 'admin' : 'user',
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
isActive: user.isActive,
|
||||||
|
totpEnabled: user.totpEnabled,
|
||||||
|
lastLoginAt: user.lastLoginAt,
|
||||||
|
createdAt: user.createdAt,
|
||||||
|
accounts: user.accountAssignments.map((assignment: any) => assignment.accountId)
|
||||||
|
})),
|
||||||
|
pagination: {
|
||||||
|
page: pageNum,
|
||||||
|
limit: limitNum,
|
||||||
|
total,
|
||||||
|
totalPages
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据ID获取用户信息
|
||||||
|
async getUserById(req: AuthRequest, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '用户ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查权限：只能查看自己的信息或管理员可以查看所有
|
||||||
|
if (req.user?.id !== id && req.user?.role !== 'admin') {
|
||||||
|
return res.status(403).json({ error: '权限不足' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id },
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
totpEnabled: true,
|
||||||
|
lastLoginAt: true,
|
||||||
|
createdAt: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
isActive: user.isActive,
|
||||||
|
totpEnabled: user.totpEnabled,
|
||||||
|
lastLoginAt: user.lastLoginAt,
|
||||||
|
createdAt: user.createdAt
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户信息
|
||||||
|
async updateUser(req: AuthRequest, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
const { username, role, firstName, lastName, isActive, loginAttempts } = req.body;
|
||||||
|
|
||||||
|
console.log('收到更新请求:', req.body);
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '用户ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查权限：只能更新自己的信息或管理员可以更新所有
|
||||||
|
if (req.user?.id !== id && req.user?.role !== 'admin') {
|
||||||
|
return res.status(403).json({ error: '权限不足' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建更新数据
|
||||||
|
const updateData: any = {};
|
||||||
|
|
||||||
|
// 只有管理员可以修改这些字段
|
||||||
|
if (req.user?.role === 'admin') {
|
||||||
|
if (username !== undefined) updateData.username = username;
|
||||||
|
if (role !== undefined) updateData.isAdmin = role === 'admin';
|
||||||
|
if (typeof isActive === 'boolean') updateData.isActive = isActive;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 普通用户可以修改这些字段
|
||||||
|
if (firstName !== undefined) updateData.firstName = firstName;
|
||||||
|
if (lastName !== undefined) updateData.lastName = lastName;
|
||||||
|
|
||||||
|
// 新增：处理密码修改
|
||||||
|
if (req.body.password && typeof req.body.password === 'string' && req.body.password.trim() !== '') {
|
||||||
|
console.log('正在处理密码更新');
|
||||||
|
const hashedPassword = await bcrypt.hash(req.body.password, 12);
|
||||||
|
updateData.password = hashedPassword;
|
||||||
|
console.log('密码已加密');
|
||||||
|
}
|
||||||
|
updateData.loginAttempts = 0
|
||||||
|
console.log('最终更新数据:', updateData);
|
||||||
|
|
||||||
|
// 检查用户名是否已存在（排除当前用户）
|
||||||
|
if (username) {
|
||||||
|
const existingUser = await prisma.user.findFirst({
|
||||||
|
where: {
|
||||||
|
username,
|
||||||
|
id: { not: id }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
return res.status(400).json({ error: '用户名已存在' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await prisma.user.update({
|
||||||
|
where: { id },
|
||||||
|
data: updateData,
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
totpEnabled: true,
|
||||||
|
lastLoginAt: true,
|
||||||
|
createdAt: true,
|
||||||
|
password: true,
|
||||||
|
loginAttempts: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
isActive: user.isActive,
|
||||||
|
totpEnabled: user.totpEnabled,
|
||||||
|
lastLoginAt: user.lastLoginAt,
|
||||||
|
createdAt: user.createdAt,
|
||||||
|
password: user.password,
|
||||||
|
loginAttempts: loginAttempts
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户账号权限
|
||||||
|
async updateUserAccounts(req: AuthRequest, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
const { accountIds } = req.body;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '用户ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(accountIds)) {
|
||||||
|
return res.status(400).json({ error: 'accountIds必须是数组' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查用户是否存在
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查所有账号是否存在
|
||||||
|
const accounts = await prisma.websiteAccount.findMany({
|
||||||
|
where: {
|
||||||
|
id: { in: accountIds }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (accounts.length !== accountIds.length) {
|
||||||
|
return res.status(400).json({ error: '部分账号不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用事务来确保数据一致性
|
||||||
|
await prisma.$transaction(async (tx) => {
|
||||||
|
// 删除用户现有的所有账号分配
|
||||||
|
await tx.accountAssignment.deleteMany({
|
||||||
|
where: { userId: id }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建新的账号分配
|
||||||
|
if (accountIds.length > 0) {
|
||||||
|
await tx.accountAssignment.createMany({
|
||||||
|
data: accountIds.map(accountId => ({
|
||||||
|
userId: id,
|
||||||
|
accountId: accountId,
|
||||||
|
isActive: true
|
||||||
|
}))
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.json({
|
||||||
|
message: '用户账号权限更新成功',
|
||||||
|
accountIds
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除用户 (管理员)
|
||||||
|
async deleteUser(req: Request, res: Response) {
|
||||||
|
const { id } = req.params;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
return res.status(400).json({ error: '用户ID是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user) {
|
||||||
|
return res.status(404).json({ error: '用户不存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除用户相关的所有数据
|
||||||
|
await prisma.$transaction([
|
||||||
|
prisma.session.deleteMany({ where: { userId: id } }),
|
||||||
|
prisma.accountAssignment.deleteMany({ where: { userId: id } }),
|
||||||
|
prisma.auditLog.deleteMany({ where: { userId: id } }),
|
||||||
|
prisma.user.delete({ where: { id } })
|
||||||
|
]);
|
||||||
|
|
||||||
|
return res.json({ message: '用户删除成功' });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 创建用户 (管理员)
|
||||||
|
async createUser(req: Request, res: Response) {
|
||||||
|
const { username, password, role } = req.body;
|
||||||
|
|
||||||
|
if (!username || !password) {
|
||||||
|
return res.status(400).json({ error: '用户名和密码是必需的' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查用户是否已存在
|
||||||
|
const existingUser = await prisma.user.findUnique({
|
||||||
|
where: { username }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (existingUser) {
|
||||||
|
return res.status(400).json({ error: '用户名已存在' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加密密码
|
||||||
|
const hashedPassword = await bcrypt.hash(password, 12);
|
||||||
|
|
||||||
|
// 创建用户，默认为禁用状态
|
||||||
|
const user = await prisma.user.create({
|
||||||
|
data: {
|
||||||
|
username,
|
||||||
|
password: hashedPassword,
|
||||||
|
isAdmin: role === 'admin',
|
||||||
|
isActive: false, // 新创建的用户默认为禁用状态
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
firstName: true,
|
||||||
|
lastName: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true,
|
||||||
|
totpEnabled: true,
|
||||||
|
lastLoginAt: true,
|
||||||
|
createdAt: true,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return res.status(201).json({
|
||||||
|
message: '用户创建成功，需要激活后才能登录',
|
||||||
|
user: {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
firstName: user.firstName,
|
||||||
|
lastName: user.lastName,
|
||||||
|
role: user.isAdmin ? 'admin' : 'user',
|
||||||
|
isAdmin: user.isAdmin,
|
||||||
|
isActive: user.isActive,
|
||||||
|
totpEnabled: user.totpEnabled,
|
||||||
|
lastLoginAt: user.lastLoginAt,
|
||||||
|
createdAt: user.createdAt
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
105
backend/src/index.ts
Normal file
105
backend/src/index.ts
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import 'express-async-errors';
|
||||||
|
import express from 'express';
|
||||||
|
import cors from 'cors';
|
||||||
|
import helmet from 'helmet';
|
||||||
|
import rateLimit from 'express-rate-limit';
|
||||||
|
import dotenv from 'dotenv';
|
||||||
|
import { logger } from './utils/logger';
|
||||||
|
import { errorHandler } from './middleware/errorHandler';
|
||||||
|
import { notFoundHandler } from './middleware/notFoundHandler';
|
||||||
|
import authRoutes from './routes/auth';
|
||||||
|
import userRoutes from './routes/users';
|
||||||
|
import accountRoutes from './routes/accounts';
|
||||||
|
import adminRoutes from './routes/admin';
|
||||||
|
import { connectDatabase } from './config/database';
|
||||||
|
|
||||||
|
// Load environment variables
|
||||||
|
dotenv.config();
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const PORT = process.env.PORT || 3001;
|
||||||
|
|
||||||
|
// 信任代理，确保正确获取客户端IP地址
|
||||||
|
app.set('trust proxy', true);
|
||||||
|
|
||||||
|
// Security middleware
|
||||||
|
app.use(helmet());
|
||||||
|
app.use(cors({
|
||||||
|
origin: process.env.NODE_ENV === 'production'
|
||||||
|
? ['http://frontend:3000',"http://backend:3001"]
|
||||||
|
: ['http://localhost:3000', 'http://localhost:5173'],
|
||||||
|
credentials: true
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Rate limiting
|
||||||
|
const limiter = rateLimit({
|
||||||
|
windowMs: parseInt(process.env.RATE_LIMIT_WINDOW_MS || '900000'), // 15 minutes
|
||||||
|
max: parseInt(process.env.RATE_LIMIT_MAX_REQUESTS || '100'), // limit each IP to 100 requests per windowMs
|
||||||
|
message: {
|
||||||
|
error: 'Too many requests from this IP, please try again later.'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
app.use('/api/', limiter);
|
||||||
|
|
||||||
|
// Body parsing middleware
|
||||||
|
app.use(express.json({ limit: '10mb' }));
|
||||||
|
app.use(express.urlencoded({ extended: true }));
|
||||||
|
|
||||||
|
// Request logging
|
||||||
|
app.use((req, res, next) => {
|
||||||
|
logger.info(`${req.method} ${req.path}`, {
|
||||||
|
ip: req.ip,
|
||||||
|
userAgent: req.get('User-Agent')
|
||||||
|
});
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Health check endpoint
|
||||||
|
app.get('/health', (req, res) => {
|
||||||
|
res.json({
|
||||||
|
status: 'OK',
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
uptime: process.uptime()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API routes
|
||||||
|
app.use('/api/auth', authRoutes);
|
||||||
|
app.use('/api/users', userRoutes);
|
||||||
|
app.use('/api/accounts', accountRoutes);
|
||||||
|
app.use('/api/admin', adminRoutes);
|
||||||
|
|
||||||
|
// Error handling middleware
|
||||||
|
app.use(notFoundHandler);
|
||||||
|
app.use(errorHandler);
|
||||||
|
|
||||||
|
// Start server
|
||||||
|
async function startServer() {
|
||||||
|
try {
|
||||||
|
// Connect to database
|
||||||
|
await connectDatabase();
|
||||||
|
logger.info('Database connected successfully');
|
||||||
|
|
||||||
|
// Start server
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
logger.info(`Server running on port ${PORT}`);
|
||||||
|
logger.info(`Environment: ${process.env.NODE_ENV}`);
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logger.error('Failed to start server:', error);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle graceful shutdown
|
||||||
|
process.on('SIGTERM', () => {
|
||||||
|
logger.info('SIGTERM received, shutting down gracefully');
|
||||||
|
process.exit(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
process.on('SIGINT', () => {
|
||||||
|
logger.info('SIGINT received, shutting down gracefully');
|
||||||
|
process.exit(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
startServer();
|
||||||
19
backend/src/middleware/adminMiddleware.ts
Normal file
19
backend/src/middleware/adminMiddleware.ts
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import { Response, NextFunction } from 'express';
|
||||||
|
import { AuthRequest } from './authMiddleware';
|
||||||
|
import { AppError } from './errorHandler';
|
||||||
|
|
||||||
|
export function adminMiddleware(
|
||||||
|
req: AuthRequest,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
) {
|
||||||
|
if (!req.user) {
|
||||||
|
throw new AppError('Authentication required', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!req.user.isAdmin) {
|
||||||
|
throw new AppError('Admin privileges required', 403);
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
}
|
||||||
82
backend/src/middleware/auth.ts
Normal file
82
backend/src/middleware/auth.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
|
||||||
|
export interface AuthRequest extends Request {
|
||||||
|
user?: {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
role: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证JWT token
|
||||||
|
export const authenticateToken = async (
|
||||||
|
req: AuthRequest,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
): Promise<void> => {
|
||||||
|
try {
|
||||||
|
const authHeader = req.headers.authorization;
|
||||||
|
|
||||||
|
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '未提供认证token'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = authHeader.substring(7);
|
||||||
|
const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
|
||||||
|
|
||||||
|
// 检查用户是否存在
|
||||||
|
const user = await prisma.user.findUnique({
|
||||||
|
where: { id: decoded.userId }
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!user || !user.isActive) {
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '用户不存在或已被禁用'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
req.user = {
|
||||||
|
id: user.id,
|
||||||
|
username: user.username,
|
||||||
|
role: user.isAdmin ? 'admin' : 'user'
|
||||||
|
};
|
||||||
|
|
||||||
|
next();
|
||||||
|
} catch (error) {
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '无效的token'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 检查角色权限
|
||||||
|
export const requireRole = (role: string) => {
|
||||||
|
return (req: AuthRequest, res: Response, next: NextFunction): void => {
|
||||||
|
if (!req.user) {
|
||||||
|
res.status(401).json({
|
||||||
|
success: false,
|
||||||
|
message: '需要认证'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (req.user.role !== role) {
|
||||||
|
res.status(403).json({
|
||||||
|
success: false,
|
||||||
|
message: '权限不足'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
};
|
||||||
|
};
|
||||||
72
backend/src/middleware/authMiddleware.ts
Normal file
72
backend/src/middleware/authMiddleware.ts
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import jwt from 'jsonwebtoken';
|
||||||
|
import { prisma } from '../config/database';
|
||||||
|
import { AppError } from './errorHandler';
|
||||||
|
|
||||||
|
export interface AuthRequest extends Request {
|
||||||
|
user?: {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
isAdmin: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function authMiddleware(
|
||||||
|
req: AuthRequest,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const authHeader = req.headers.authorization;
|
||||||
|
|
||||||
|
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||||
|
throw new AppError('No token provided', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = authHeader.substring(7);
|
||||||
|
console.log('验证token:', { token: token.substring(0, 20) + '...' })
|
||||||
|
|
||||||
|
const decoded = jwt.verify(token, process.env.JWT_SECRET!) as any;
|
||||||
|
console.log('JWT解码成功:', { userId: decoded.userId })
|
||||||
|
|
||||||
|
// Check if session exists and is valid
|
||||||
|
const session = await prisma.session.findFirst({
|
||||||
|
where: {
|
||||||
|
token,
|
||||||
|
expiresAt: {
|
||||||
|
gt: new Date()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
include: {
|
||||||
|
user: {
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
username: true,
|
||||||
|
isAdmin: true,
|
||||||
|
isActive: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Session查询结果:', {
|
||||||
|
found: !!session,
|
||||||
|
expiresAt: session?.expiresAt,
|
||||||
|
currentTime: new Date(),
|
||||||
|
userActive: session?.user?.isActive
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!session || !session.user || !session.user.isActive) {
|
||||||
|
throw new AppError('Invalid or expired token', 401);
|
||||||
|
}
|
||||||
|
|
||||||
|
req.user = session.user;
|
||||||
|
next();
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof jwt.JsonWebTokenError) {
|
||||||
|
next(new AppError('Invalid token', 401));
|
||||||
|
} else {
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
backend/src/middleware/errorHandler.ts
Normal file
45
backend/src/middleware/errorHandler.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import { logger } from '../utils/logger';
|
||||||
|
|
||||||
|
export class AppError extends Error {
|
||||||
|
public statusCode: number;
|
||||||
|
public isOperational: boolean;
|
||||||
|
|
||||||
|
constructor(message: string, statusCode: number = 500) {
|
||||||
|
super(message);
|
||||||
|
this.statusCode = statusCode;
|
||||||
|
this.isOperational = true;
|
||||||
|
|
||||||
|
Error.captureStackTrace(this, this.constructor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function errorHandler(
|
||||||
|
error: AppError,
|
||||||
|
req: Request,
|
||||||
|
res: Response,
|
||||||
|
next: NextFunction
|
||||||
|
) {
|
||||||
|
const statusCode = error.statusCode || 500;
|
||||||
|
const message = error.message || 'Internal Server Error';
|
||||||
|
|
||||||
|
// Log error
|
||||||
|
logger.error('Error occurred:', {
|
||||||
|
error: error.message,
|
||||||
|
stack: error.stack,
|
||||||
|
url: req.url,
|
||||||
|
method: req.method,
|
||||||
|
ip: req.ip,
|
||||||
|
userAgent: req.get('User-Agent')
|
||||||
|
});
|
||||||
|
|
||||||
|
// Don't leak error details in production
|
||||||
|
const responseMessage = process.env.NODE_ENV === 'production' && statusCode === 500
|
||||||
|
? 'Internal Server Error'
|
||||||
|
: message;
|
||||||
|
|
||||||
|
res.status(statusCode).json({
|
||||||
|
error: responseMessage,
|
||||||
|
...(process.env.NODE_ENV === 'development' && { stack: error.stack })
|
||||||
|
});
|
||||||
|
}
|
||||||
9
backend/src/middleware/notFoundHandler.ts
Normal file
9
backend/src/middleware/notFoundHandler.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { Request, Response } from 'express';
|
||||||
|
|
||||||
|
export function notFoundHandler(req: Request, res: Response) {
|
||||||
|
res.status(404).json({
|
||||||
|
error: 'Route not found',
|
||||||
|
path: req.path,
|
||||||
|
method: req.method
|
||||||
|
});
|
||||||
|
}
|
||||||
16
backend/src/middleware/validateRequest.ts
Normal file
16
backend/src/middleware/validateRequest.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import { validationResult } from 'express-validator';
|
||||||
|
|
||||||
|
export function validateRequest(req: Request, res: Response, next: NextFunction): void {
|
||||||
|
const errors = validationResult(req);
|
||||||
|
|
||||||
|
if (!errors.isEmpty()) {
|
||||||
|
res.status(400).json({
|
||||||
|
error: 'Validation failed',
|
||||||
|
details: errors.array()
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
}
|
||||||
17
backend/src/middleware/validation.ts
Normal file
17
backend/src/middleware/validation.ts
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { Request, Response, NextFunction } from 'express';
|
||||||
|
import { validationResult } from 'express-validator';
|
||||||
|
|
||||||
|
export const validateRequest = (req: Request, res: Response, next: NextFunction): void => {
|
||||||
|
const errors = validationResult(req);
|
||||||
|
|
||||||
|
if (!errors.isEmpty()) {
|
||||||
|
res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: '验证失败',
|
||||||
|
errors: errors.array()
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
};
|
||||||
38
backend/src/routes/accounts.ts
Normal file
38
backend/src/routes/accounts.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { Router } from 'express';
|
||||||
|
import { accountController } from '../controllers/accountController';
|
||||||
|
import { authMiddleware } from '../middleware/authMiddleware';
|
||||||
|
import { adminMiddleware } from '../middleware/adminMiddleware';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// All routes require authentication
|
||||||
|
router.use(authMiddleware);
|
||||||
|
|
||||||
|
// Get all accounts (admin only)
|
||||||
|
router.get('/', adminMiddleware, accountController.getAllAccounts);
|
||||||
|
|
||||||
|
// Get account by ID (admin only)
|
||||||
|
router.get('/:id', adminMiddleware, accountController.getAccountById);
|
||||||
|
|
||||||
|
// Create new account (admin only)
|
||||||
|
router.post('/', adminMiddleware, accountController.createAccount);
|
||||||
|
|
||||||
|
// Update account (admin only)
|
||||||
|
router.put('/:id', adminMiddleware, accountController.updateAccount);
|
||||||
|
|
||||||
|
// Delete account (admin only)
|
||||||
|
router.delete('/:id', adminMiddleware, accountController.deleteAccount);
|
||||||
|
|
||||||
|
// Get user's assigned accounts
|
||||||
|
router.get('/user/assigned', accountController.getUserAccounts);
|
||||||
|
|
||||||
|
// Assign account to user (admin only)
|
||||||
|
router.post('/:id/assign', adminMiddleware, accountController.assignAccount);
|
||||||
|
|
||||||
|
// Unassign account from user (admin only)
|
||||||
|
router.delete('/:id/assign/:userId', adminMiddleware, accountController.unassignAccount);
|
||||||
|
|
||||||
|
// Login to website
|
||||||
|
router.post('/:accountId/login', accountController.loginToWebsite);
|
||||||
|
|
||||||
|
export default router;
|
||||||
37
backend/src/routes/admin.ts
Normal file
37
backend/src/routes/admin.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import express from 'express';
|
||||||
|
import { authenticateToken, requireRole } from '../middleware/auth';
|
||||||
|
import { validateRequest } from '../middleware/validation';
|
||||||
|
import { adminController } from '../controllers/adminController';
|
||||||
|
import { userController } from '../controllers/userController';
|
||||||
|
import { accountController } from '../controllers/accountController';
|
||||||
|
|
||||||
|
const router = express.Router();
|
||||||
|
|
||||||
|
// 管理员认证中间件
|
||||||
|
const requireAdmin = requireRole('admin');
|
||||||
|
|
||||||
|
// 管理员登录
|
||||||
|
router.post('/login', validateRequest, adminController.login);
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
router.get('/stats', authenticateToken, requireAdmin, adminController.getStats);
|
||||||
|
|
||||||
|
// 获取最近活动
|
||||||
|
router.get('/activities', authenticateToken, requireAdmin, adminController.getRecentActivities);
|
||||||
|
|
||||||
|
// 用户管理
|
||||||
|
router.get('/users', authenticateToken, requireAdmin, userController.getAllUsers);
|
||||||
|
router.post('/users', authenticateToken, requireAdmin, validateRequest, userController.createUser);
|
||||||
|
router.get('/users/:id', authenticateToken, requireAdmin, userController.getUserById);
|
||||||
|
router.put('/users/:id', authenticateToken, requireAdmin, validateRequest, userController.updateUser);
|
||||||
|
router.put('/users/:id/accounts', authenticateToken, requireAdmin, validateRequest, userController.updateUserAccounts);
|
||||||
|
router.delete('/users/:id', authenticateToken, requireAdmin, userController.deleteUser);
|
||||||
|
|
||||||
|
// 账号管理
|
||||||
|
router.get('/accounts', authenticateToken, requireAdmin, accountController.getAllAccounts);
|
||||||
|
router.post('/accounts', authenticateToken, requireAdmin, validateRequest, accountController.createAccount);
|
||||||
|
router.get('/accounts/:id', authenticateToken, requireAdmin, accountController.getAccountById);
|
||||||
|
router.put('/accounts/:id', authenticateToken, requireAdmin, validateRequest, accountController.updateAccount);
|
||||||
|
router.delete('/accounts/:id', authenticateToken, requireAdmin, accountController.deleteAccount);
|
||||||
|
|
||||||
|
export default router;
|
||||||
52
backend/src/routes/auth.ts
Normal file
52
backend/src/routes/auth.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import { Router } from 'express';
|
||||||
|
import { body } from 'express-validator';
|
||||||
|
import { validateRequest } from '../middleware/validateRequest';
|
||||||
|
import { authController } from '../controllers/authController';
|
||||||
|
import { authMiddleware } from '../middleware/authMiddleware';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// Register
|
||||||
|
router.post('/register', [
|
||||||
|
body('username').isLength({ min: 3, max: 30 }).matches(/^[a-zA-Z0-9_]+$/),
|
||||||
|
body('password').isLength({ min: 8 }),
|
||||||
|
body('confirmPassword').isLength({ min: 8 }).custom((value, { req }) => {
|
||||||
|
if (value !== req.body.password) {
|
||||||
|
throw new Error('密码和确认密码不匹配');
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
body('firstName').optional().isLength({ max: 50 }),
|
||||||
|
body('lastName').optional().isLength({ max: 50 }),
|
||||||
|
validateRequest
|
||||||
|
], authController.register);
|
||||||
|
|
||||||
|
// Login
|
||||||
|
router.post('/login', [
|
||||||
|
body('username').isLength({ min: 3, max: 30 }),
|
||||||
|
body('password').notEmpty(),
|
||||||
|
validateRequest
|
||||||
|
], authController.login);
|
||||||
|
|
||||||
|
// Logout
|
||||||
|
router.post('/logout', authMiddleware, authController.logout);
|
||||||
|
|
||||||
|
// Setup TOTP
|
||||||
|
router.post('/setup-totp', authMiddleware, authController.setupTOTP);
|
||||||
|
|
||||||
|
// Verify TOTP
|
||||||
|
router.post('/verify-totp', [
|
||||||
|
body('token').notEmpty(),
|
||||||
|
validateRequest
|
||||||
|
], authMiddleware, authController.verifyTOTP);
|
||||||
|
|
||||||
|
// Get current user
|
||||||
|
router.get('/me', authMiddleware, authController.getCurrentUser);
|
||||||
|
|
||||||
|
// Refresh token
|
||||||
|
router.post('/refresh', authController.refreshToken);
|
||||||
|
|
||||||
|
// Debug session (for development)
|
||||||
|
router.get('/debug-session', authMiddleware, authController.debugSession);
|
||||||
|
|
||||||
|
export default router;
|
||||||
23
backend/src/routes/users.ts
Normal file
23
backend/src/routes/users.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { Router } from 'express';
|
||||||
|
import { userController } from '../controllers/userController';
|
||||||
|
import { authMiddleware } from '../middleware/authMiddleware';
|
||||||
|
import { adminMiddleware } from '../middleware/adminMiddleware';
|
||||||
|
|
||||||
|
const router = Router();
|
||||||
|
|
||||||
|
// All routes require authentication
|
||||||
|
router.use(authMiddleware);
|
||||||
|
|
||||||
|
// Get all users (admin only)
|
||||||
|
router.get('/', adminMiddleware, userController.getAllUsers);
|
||||||
|
|
||||||
|
// Get user by ID (admin or self)
|
||||||
|
router.get('/:id', userController.getUserById);
|
||||||
|
|
||||||
|
// Update user (admin or self)
|
||||||
|
router.put('/:id', userController.updateUser);
|
||||||
|
|
||||||
|
// Delete user (admin only)
|
||||||
|
router.delete('/:id', adminMiddleware, userController.deleteUser);
|
||||||
|
|
||||||
|
export default router;
|
||||||
41
backend/src/utils/audit.ts
Normal file
41
backend/src/utils/audit.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { prisma } from '../config/database';
|
||||||
|
|
||||||
|
interface AuditLogData {
|
||||||
|
userId: string | null;
|
||||||
|
action: string;
|
||||||
|
resource: string;
|
||||||
|
resourceId?: string;
|
||||||
|
details?: any;
|
||||||
|
ipAddress?: string | null;
|
||||||
|
userAgent?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createAuditLog = async (data: AuditLogData) => {
|
||||||
|
try {
|
||||||
|
const auditData: any = {
|
||||||
|
userId: data.userId,
|
||||||
|
action: data.action,
|
||||||
|
resource: data.resource
|
||||||
|
};
|
||||||
|
|
||||||
|
// 只添加非undefined的字段
|
||||||
|
if (data.resourceId !== undefined) {
|
||||||
|
auditData.resourceId = data.resourceId;
|
||||||
|
}
|
||||||
|
if (data.details !== undefined) {
|
||||||
|
auditData.details = data.details;
|
||||||
|
}
|
||||||
|
if (data.ipAddress !== undefined) {
|
||||||
|
auditData.ipAddress = data.ipAddress;
|
||||||
|
}
|
||||||
|
if (data.userAgent !== undefined) {
|
||||||
|
auditData.userAgent = data.userAgent;
|
||||||
|
}
|
||||||
|
|
||||||
|
await prisma.auditLog.create({
|
||||||
|
data: auditData
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to create audit log:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
26
backend/src/utils/logger.ts
Normal file
26
backend/src/utils/logger.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import winston from 'winston';
|
||||||
|
|
||||||
|
const logFormat = winston.format.combine(
|
||||||
|
winston.format.timestamp(),
|
||||||
|
winston.format.errors({ stack: true }),
|
||||||
|
winston.format.json()
|
||||||
|
);
|
||||||
|
|
||||||
|
export const logger = winston.createLogger({
|
||||||
|
level: process.env.NODE_ENV === 'production' ? 'info' : 'debug',
|
||||||
|
format: logFormat,
|
||||||
|
defaultMeta: { service: 'pandora-backend' },
|
||||||
|
transports: [
|
||||||
|
new winston.transports.File({ filename: 'logs/error.log', level: 'error' }),
|
||||||
|
new winston.transports.File({ filename: 'logs/combined.log' }),
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
logger.add(new winston.transports.Console({
|
||||||
|
format: winston.format.combine(
|
||||||
|
winston.format.colorize(),
|
||||||
|
winston.format.simple()
|
||||||
|
)
|
||||||
|
}));
|
||||||
|
}
|
||||||
30
backend/tsconfig.json
Normal file
30
backend/tsconfig.json
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"module": "commonjs",
|
||||||
|
"lib": ["ES2020"],
|
||||||
|
"outDir": "./dist",
|
||||||
|
"rootDir": "./src",
|
||||||
|
"strict": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"removeComments": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"exactOptionalPropertyTypes": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist"
|
||||||
|
]
|
||||||
|
}
|
||||||
44
docker-compose.yml
Normal file
44
docker-compose.yml
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
version: '3.8'
|
||||||
|
|
||||||
|
services:
|
||||||
|
# 后端 API 服务
|
||||||
|
backend:
|
||||||
|
build:
|
||||||
|
context: ./backend
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: pandora_backend
|
||||||
|
volumes:
|
||||||
|
- sqlite_data:/app/prisma
|
||||||
|
ports:
|
||||||
|
- "3001:3001"
|
||||||
|
networks:
|
||||||
|
- pandora_network
|
||||||
|
restart: always
|
||||||
|
command: npm run start
|
||||||
|
|
||||||
|
# 前端应用
|
||||||
|
frontend:
|
||||||
|
build:
|
||||||
|
context: ./frontend
|
||||||
|
dockerfile: Dockerfile
|
||||||
|
container_name: pandora_frontend
|
||||||
|
environment:
|
||||||
|
CLAUDE_TARGET_URL: https://claude.micar9.com:8443
|
||||||
|
CHATGPT_TARGET_URL: https://gpt.micar9.com:8443
|
||||||
|
GROK_TARGET_URL: https://grok-mirror.micar9.com:8443
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
depends_on:
|
||||||
|
- backend
|
||||||
|
networks:
|
||||||
|
- pandora_network
|
||||||
|
restart: always
|
||||||
|
command: npm run start
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
sqlite_data:
|
||||||
|
driver: local
|
||||||
|
|
||||||
|
networks:
|
||||||
|
pandora_network:
|
||||||
|
driver: bridge
|
||||||
68
env.example
Normal file
68
env.example
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
# 数据库配置
|
||||||
|
DATABASE_URL=postgresql://pandora_user:pandora_password@localhost:5432/pandora
|
||||||
|
POSTGRES_DB=pandora
|
||||||
|
POSTGRES_USER=pandora_user
|
||||||
|
POSTGRES_PASSWORD=your-secure-password
|
||||||
|
|
||||||
|
# Redis配置
|
||||||
|
REDIS_URL=redis://localhost:6379
|
||||||
|
REDIS_PASSWORD=your-redis-password
|
||||||
|
|
||||||
|
# JWT配置
|
||||||
|
JWT_SECRET=your-super-secret-jwt-key-change-in-production
|
||||||
|
JWT_EXPIRES_IN=7d
|
||||||
|
|
||||||
|
# 服务器配置
|
||||||
|
PORT=3001
|
||||||
|
NODE_ENV=development
|
||||||
|
CORS_ORIGIN=http://localhost:3000
|
||||||
|
|
||||||
|
# 邮件配置
|
||||||
|
SMTP_HOST=smtp.gmail.com
|
||||||
|
SMTP_PORT=587
|
||||||
|
SMTP_USER=your-email@gmail.com
|
||||||
|
SMTP_PASS=your-app-password
|
||||||
|
SMTP_FROM=Pandora <your-email@gmail.com>
|
||||||
|
|
||||||
|
# 前端配置
|
||||||
|
VITE_API_URL=http://localhost:3001
|
||||||
|
VITE_APP_NAME=Pandora
|
||||||
|
|
||||||
|
# 域名配置
|
||||||
|
DOMAIN_PATH1=path1.com
|
||||||
|
DOMAIN_PATH2=path2.com
|
||||||
|
DOMAIN_PATH3=path3.com
|
||||||
|
|
||||||
|
# 聊天配置 - 网站代理目标地址
|
||||||
|
CLAUDE_TARGET_URL=https://claude.ai
|
||||||
|
CHATGPT_TARGET_URL=https://chat.openai.com
|
||||||
|
GROK_TARGET_URL=https://grok.x.ai
|
||||||
|
|
||||||
|
# 聊天配置 - 自定义User-Agent（可选）
|
||||||
|
CLAUDE_USER_AGENT=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
|
||||||
|
CHATGPT_USER_AGENT=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
|
||||||
|
GROK_USER_AGENT=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
|
||||||
|
|
||||||
|
# 聊天配置 - 超时和限制
|
||||||
|
CHAT_TIMEOUT=10000
|
||||||
|
CHAT_RATE_LIMIT=100
|
||||||
|
|
||||||
|
# 日志配置
|
||||||
|
LOG_LEVEL=info
|
||||||
|
|
||||||
|
# 监控配置 (可选)
|
||||||
|
GRAFANA_PASSWORD=admin
|
||||||
|
|
||||||
|
# 安全配置
|
||||||
|
BCRYPT_ROUNDS=12
|
||||||
|
RATE_LIMIT_WINDOW=15m
|
||||||
|
RATE_LIMIT_MAX=100
|
||||||
|
|
||||||
|
# 文件上传配置
|
||||||
|
UPLOAD_MAX_SIZE=10mb
|
||||||
|
UPLOAD_PATH=./uploads
|
||||||
|
|
||||||
|
# 备份配置
|
||||||
|
BACKUP_ENABLED=true
|
||||||
|
BACKUP_SCHEDULE=0 2 * * *
|
||||||
|
BACKUP_RETENTION_DAYS=30
|
||||||
35
frontend/Dockerfile
Normal file
35
frontend/Dockerfile
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
FROM node:18-alpine
|
||||||
|
|
||||||
|
# 设置工作目录
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 安装系统依赖
|
||||||
|
RUN apk add --no-cache \
|
||||||
|
curl
|
||||||
|
|
||||||
|
# 复制 package.json 和 package-lock.json
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# 安装依赖
|
||||||
|
RUN npm ci
|
||||||
|
|
||||||
|
# 复制源代码
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
# 创建非root用户
|
||||||
|
RUN addgroup -g 1001 -S nodejs
|
||||||
|
RUN adduser -S nodejs -u 1001
|
||||||
|
|
||||||
|
# 更改文件所有权
|
||||||
|
RUN chown -R nodejs:nodejs /app
|
||||||
|
USER nodejs
|
||||||
|
|
||||||
|
# 暴露端口
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
# 健康检查
|
||||||
|
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||||
|
CMD curl -f http://localhost:3000 || exit 1
|
||||||
|
|
||||||
|
# 启动命令 - 支持环境变量
|
||||||
|
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
|
||||||
108
frontend/README.md
Normal file
108
frontend/README.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# Pandora 前端应用
|
||||||
|
|
||||||
|
基于 Vue 3 + TypeScript + Vite 构建的现代化前端应用。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- **Vue 3**: 现代化的前端框架
|
||||||
|
- **TypeScript**: 类型安全的JavaScript
|
||||||
|
- **Vite**: 快速的构建工具
|
||||||
|
- **Tailwind CSS**: 实用优先的CSS框架
|
||||||
|
- **Vue Router**: 客户端路由
|
||||||
|
- **Pinia**: 状态管理
|
||||||
|
- **VueUse**: 组合式工具库
|
||||||
|
- **VeeValidate**: 表单验证
|
||||||
|
- **Vue Toastification**: 通知组件
|
||||||
|
|
||||||
|
## 项目结构
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # 可复用组件
|
||||||
|
├── views/ # 页面组件
|
||||||
|
├── stores/ # Pinia状态管理
|
||||||
|
├── utils/ # 工具函数
|
||||||
|
├── types/ # TypeScript类型定义
|
||||||
|
├── assets/ # 静态资源
|
||||||
|
├── router/ # 路由配置
|
||||||
|
├── App.vue # 根组件
|
||||||
|
├── main.ts # 应用入口
|
||||||
|
└── style.css # 全局样式
|
||||||
|
```
|
||||||
|
|
||||||
|
## 开发指南
|
||||||
|
|
||||||
|
### 安装依赖
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### 启动开发服务器
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 构建生产版本
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### 代码检查
|
||||||
|
```bash
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### 运行测试
|
||||||
|
```bash
|
||||||
|
npm test
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主要功能
|
||||||
|
|
||||||
|
1. **Claude风格首页** - 现代化的AI助手风格界面，集成登录和注册功能
|
||||||
|
2. **用户仪表板** - 显示可用账号和统计信息
|
||||||
|
3. **管理后台** - 用户和权限管理界面
|
||||||
|
4. **响应式设计** - 适配各种设备尺寸
|
||||||
|
5. **深色模式** - 支持深色/浅色主题切换
|
||||||
|
|
||||||
|
## 组件说明
|
||||||
|
|
||||||
|
### 页面组件
|
||||||
|
- `Home.vue` - 首页，包含登录和注册功能
|
||||||
|
- `Dashboard.vue` - 用户仪表板
|
||||||
|
- `Admin.vue` - 管理后台
|
||||||
|
- `NotFound.vue` - 404页面
|
||||||
|
|
||||||
|
### 工具组件
|
||||||
|
- `icons/` - SVG图标组件
|
||||||
|
- 更多组件开发中...
|
||||||
|
|
||||||
|
## 样式系统
|
||||||
|
|
||||||
|
使用 Tailwind CSS 构建，包含：
|
||||||
|
- 响应式设计
|
||||||
|
- 深色模式支持
|
||||||
|
- 自定义组件类
|
||||||
|
- 动画效果
|
||||||
|
|
||||||
|
## 状态管理
|
||||||
|
|
||||||
|
使用 Pinia 进行状态管理，主要store：
|
||||||
|
- 用户认证状态
|
||||||
|
- 应用配置
|
||||||
|
- 主题设置
|
||||||
|
|
||||||
|
## 路由配置
|
||||||
|
|
||||||
|
- `/` - 首页（包含登录/注册功能）
|
||||||
|
- `/dashboard` - 用户仪表板
|
||||||
|
- `/admin` - 管理后台
|
||||||
|
- `/*` - 404页面
|
||||||
|
|
||||||
|
## 开发规范
|
||||||
|
|
||||||
|
- 使用 TypeScript 严格模式
|
||||||
|
- 遵循 Vue 3 Composition API
|
||||||
|
- 使用 ESLint 和 Prettier
|
||||||
|
- 组件命名使用 PascalCase
|
||||||
|
- 文件命名使用 kebab-case
|
||||||
17
frontend/index.html
Normal file
17
frontend/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<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>Pandora - 网站账号共享系统</title>
|
||||||
|
<meta name="description" content="现代化的网站账号共享管理系统" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
50
frontend/package.json
Normal file
50
frontend/package.json
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "pandora-frontend",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Pandora 前端应用",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:ui": "vitest --ui",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.3.8",
|
||||||
|
"vue-router": "^4.2.5",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"@vueuse/core": "^10.4.1",
|
||||||
|
"vee-validate": "^4.10.5",
|
||||||
|
"vue-toastification": "^2.0.0-rc.5",
|
||||||
|
"axios": "^1.5.0",
|
||||||
|
"@headlessui/vue": "^1.7.16",
|
||||||
|
"@heroicons/vue": "^2.0.18",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"tailwind-merge": "^1.14.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^20.6.3",
|
||||||
|
"@vitejs/plugin-vue": "^4.4.0",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^12.0.0",
|
||||||
|
"@vue/test-utils": "^2.4.2",
|
||||||
|
"autoprefixer": "^10.4.15",
|
||||||
|
"eslint": "^8.49.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"jsdom": "^22.1.0",
|
||||||
|
"postcss": "^8.4.29",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"typescript": "~5.2.0",
|
||||||
|
"vite": "^4.4.11",
|
||||||
|
"vitest": "^0.34.4",
|
||||||
|
"vue-tsc": "^1.8.15"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0",
|
||||||
|
"npm": ">=8.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
15
frontend/src/App.vue
Normal file
15
frontend/src/App.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app" class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 根组件逻辑
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
frontend/src/assets/ChatGPT.png
Normal file
BIN
frontend/src/assets/ChatGPT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
frontend/src/assets/claude.png
Normal file
BIN
frontend/src/assets/claude.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
frontend/src/assets/grok.png
Normal file
BIN
frontend/src/assets/grok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
35
frontend/src/components/icons/index.ts
Normal file
35
frontend/src/components/icons/index.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
// 用户图标
|
||||||
|
export const UserIcon = {
|
||||||
|
template: `
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 钥匙图标
|
||||||
|
export const KeyIcon = {
|
||||||
|
template: `
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4l-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 盾牌图标
|
||||||
|
export const ShieldIcon = {
|
||||||
|
template: `
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图表图标
|
||||||
|
export const ChartIcon = {
|
||||||
|
template: `
|
||||||
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
`
|
||||||
|
}
|
||||||
62
frontend/src/config/websites.ts
Normal file
62
frontend/src/config/websites.ts
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
// 网站URL配置
|
||||||
|
// 支持通过Docker环境变量配置
|
||||||
|
|
||||||
|
export interface WebsiteConfig {
|
||||||
|
name: string
|
||||||
|
url: string
|
||||||
|
icon: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从环境变量获取URL，如果没有配置则使用默认值
|
||||||
|
const getWebsiteUrls = () => {
|
||||||
|
// 检查是否在浏览器环境中
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
// 在客户端，使用Vite定义的全局变量
|
||||||
|
return {
|
||||||
|
claude: (window as any).__CLAUDE_URL__ || 'https://chat.micar9.com:8443',
|
||||||
|
chatgpt: (window as any).__CHATGPT_URL__ || 'https://chat.openai.com',
|
||||||
|
grok: (window as any).__GROK_URL__ || 'https://grok-mirror.micar9.com:8443'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在服务端，使用环境变量
|
||||||
|
return {
|
||||||
|
claude: process.env.CLAUDE_TARGET_URL || 'https://chat.micar9.com:8443',
|
||||||
|
chatgpt: process.env.CHATGPT_TARGET_URL || 'https://chat.openai.com',
|
||||||
|
grok: process.env.GROK_TARGET_URL || 'https://grok-mirror.micar9.com:8443'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 网站配置
|
||||||
|
export const websiteConfigs: Record<string, WebsiteConfig> = {
|
||||||
|
claude: {
|
||||||
|
name: 'Claude',
|
||||||
|
url: getWebsiteUrls().claude,
|
||||||
|
icon: '/src/assets/claude.png'
|
||||||
|
},
|
||||||
|
chatgpt: {
|
||||||
|
name: 'ChatGPT',
|
||||||
|
url: getWebsiteUrls().chatgpt,
|
||||||
|
icon: '/src/assets/ChatGPT.png'
|
||||||
|
},
|
||||||
|
grok: {
|
||||||
|
name: 'Grok',
|
||||||
|
url: getWebsiteUrls().grok,
|
||||||
|
icon: '/src/assets/grok.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取网站URL的函数
|
||||||
|
export const getWebsiteUrl = (site: string): string => {
|
||||||
|
return websiteConfigs[site]?.url || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取网站配置的函数
|
||||||
|
export const getWebsiteConfig = (site: string): WebsiteConfig | null => {
|
||||||
|
return websiteConfigs[site] || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有网站配置
|
||||||
|
export const getAllWebsiteConfigs = (): WebsiteConfig[] => {
|
||||||
|
return Object.values(websiteConfigs)
|
||||||
|
}
|
||||||
11
frontend/src/env.d.ts
vendored
Normal file
11
frontend/src/env.d.ts
vendored
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly VITE_API_BASE_URL: string
|
||||||
|
readonly VITE_APP_TITLE: string
|
||||||
|
readonly VITE_APP_VERSION: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv
|
||||||
|
}
|
||||||
44
frontend/src/main.ts
Normal file
44
frontend/src/main.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
import Toast from 'vue-toastification'
|
||||||
|
import 'vue-toastification/dist/index.css'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import './style.css'
|
||||||
|
import { useAuthStore } from './stores/auth'
|
||||||
|
import { useAdminStore } from './stores/admin'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
// 配置 Pinia 状态管理
|
||||||
|
const pinia = createPinia()
|
||||||
|
app.use(pinia)
|
||||||
|
|
||||||
|
// 初始化认证状态
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
|
||||||
|
authStore.initAuth()
|
||||||
|
adminStore.initAuth()
|
||||||
|
|
||||||
|
// 配置路由
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
// 配置 Toast 通知
|
||||||
|
app.use(Toast, {
|
||||||
|
position: 'top-right',
|
||||||
|
timeout: 5000,
|
||||||
|
closeOnClick: true,
|
||||||
|
pauseOnFocusLoss: true,
|
||||||
|
pauseOnHover: true,
|
||||||
|
draggable: true,
|
||||||
|
draggablePercent: 0.6,
|
||||||
|
showCloseButtonOnHover: false,
|
||||||
|
hideProgressBar: false,
|
||||||
|
closeButton: 'button',
|
||||||
|
icon: true,
|
||||||
|
rtl: false,
|
||||||
|
})
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
105
frontend/src/router/index.ts
Normal file
105
frontend/src/router/index.ts
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import type { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { useAdminStore } from '@/stores/admin'
|
||||||
|
import { adminAuth } from '@/utils/auth'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const routes: RouteRecordRaw[] = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: () => import('@/views/Home.vue'),
|
||||||
|
meta: { title: '首页' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/login',
|
||||||
|
name: 'AdminLogin',
|
||||||
|
component: () => import('@/views/AdminLogin.vue'),
|
||||||
|
meta: { title: '管理员登录' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/dashboard',
|
||||||
|
name: 'Dashboard',
|
||||||
|
component: () => import('@/views/Dashboard.vue'),
|
||||||
|
meta: { title: '仪表板', requiresAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
name: 'Admin',
|
||||||
|
component: () => import('@/views/Admin.vue'),
|
||||||
|
meta: { title: '管理后台', requiresAdminAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/users',
|
||||||
|
name: 'AdminUsers',
|
||||||
|
component: () => import('@/views/AdminUsers.vue'),
|
||||||
|
meta: { title: '用户管理', requiresAdminAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/accounts',
|
||||||
|
name: 'AdminAccounts',
|
||||||
|
component: () => import('@/views/AdminAccounts.vue'),
|
||||||
|
meta: { title: '账号管理', requiresAdminAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/permissions',
|
||||||
|
name: 'AdminPermissions',
|
||||||
|
component: () => import('@/views/AdminPermissions.vue'),
|
||||||
|
meta: { title: '权限管理', requiresAdminAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin/monitor',
|
||||||
|
name: 'AdminMonitor',
|
||||||
|
component: () => import('@/views/AdminMonitor.vue'),
|
||||||
|
meta: { title: '系统监控', requiresAdminAuth: true }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/test',
|
||||||
|
name: 'Test',
|
||||||
|
component: () => import('@/views/Test.vue'),
|
||||||
|
meta: { title: 'API测试' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/:pathMatch(.*)*',
|
||||||
|
name: 'NotFound',
|
||||||
|
component: () => import('@/views/NotFound.vue'),
|
||||||
|
meta: { title: '页面未找到' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// 路由守卫
|
||||||
|
router.beforeEach((to: any, from: any, next: any) => {
|
||||||
|
// 设置页面标题
|
||||||
|
document.title = `${to.meta.title} - Pandora`
|
||||||
|
|
||||||
|
// 获取认证状态
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 检查是否需要用户认证
|
||||||
|
if (to.meta.requiresAuth) {
|
||||||
|
if (!authStore.isLoggedIn) {
|
||||||
|
next('/')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查是否需要管理员认证
|
||||||
|
if (to.meta.requiresAdminAuth) {
|
||||||
|
if (!adminAuth.isLoggedIn()) {
|
||||||
|
next('/admin/login')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
248
frontend/src/stores/admin.ts
Normal file
248
frontend/src/stores/admin.ts
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { adminAPI } from '@/utils/api'
|
||||||
|
import { adminAuth } from '@/utils/auth'
|
||||||
|
import type { User, PaginatedResponse } from '@/types'
|
||||||
|
|
||||||
|
export const useAdminStore = defineStore('admin', () => {
|
||||||
|
// 状态
|
||||||
|
const admin = ref<User | null>(null)
|
||||||
|
const token = ref<string | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
const error = ref<string | null>(null)
|
||||||
|
const users = ref<User[]>([])
|
||||||
|
const pagination = ref({
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
total: 0,
|
||||||
|
totalPages: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const isLoggedIn = computed(() => !!token.value && !!admin.value)
|
||||||
|
|
||||||
|
// 初始化认证状态
|
||||||
|
const initAuth = () => {
|
||||||
|
const storedToken = adminAuth.getToken()
|
||||||
|
const storedAdmin = adminAuth.getAdminInfo()
|
||||||
|
|
||||||
|
if (storedToken && storedAdmin) {
|
||||||
|
token.value = storedToken
|
||||||
|
admin.value = storedAdmin
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 管理员登录
|
||||||
|
const login = async (data: { username: string; password: string }) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.login(data)
|
||||||
|
|
||||||
|
// 保存认证信息
|
||||||
|
token.value = response.token
|
||||||
|
admin.value = response.admin
|
||||||
|
adminAuth.setLogin(response.token, response.admin)
|
||||||
|
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '登录失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 管理员登出
|
||||||
|
const logout = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 清除本地状态
|
||||||
|
token.value = null
|
||||||
|
admin.value = null
|
||||||
|
users.value = []
|
||||||
|
adminAuth.logout()
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Admin logout failed:', err)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户列表
|
||||||
|
const loadUsers = async (params?: { page?: number; limit?: number; search?: string }) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.getUsers(params)
|
||||||
|
users.value = response.users
|
||||||
|
pagination.value = response.pagination
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '获取用户列表失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建用户
|
||||||
|
const createUser = async (data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
role: string
|
||||||
|
}) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.createUser(data)
|
||||||
|
// 重新加载用户列表
|
||||||
|
await loadUsers()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '创建用户失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新用户
|
||||||
|
const updateUser = async (userId: string, data: any) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.updateUser(userId, data)
|
||||||
|
// 重新加载用户列表
|
||||||
|
await loadUsers()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '更新用户失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新用户账号权限
|
||||||
|
const updateUserAccounts = async (userId: string, accountIds: string[]) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.updateUserAccounts(userId, accountIds)
|
||||||
|
// 重新加载用户列表
|
||||||
|
await loadUsers()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '更新用户账号权限失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
const deleteUser = async (userId: string) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.deleteUser(userId)
|
||||||
|
// 重新加载用户列表
|
||||||
|
await loadUsers()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '删除用户失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
const getStats = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.getStats()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '获取统计数据失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取最近活动
|
||||||
|
const getRecentActivities = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.getRecentActivities()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '获取最近活动失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取账号列表
|
||||||
|
const getAccounts = async (params?: { page?: number; limit?: number; search?: string; status?: string }) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await adminAPI.getAccounts(params)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '获取账号列表失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除错误
|
||||||
|
const clearError = () => {
|
||||||
|
error.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
admin,
|
||||||
|
token,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
users,
|
||||||
|
pagination,
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
isLoggedIn,
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
initAuth,
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
loadUsers,
|
||||||
|
createUser,
|
||||||
|
updateUser,
|
||||||
|
updateUserAccounts,
|
||||||
|
deleteUser,
|
||||||
|
getStats,
|
||||||
|
getRecentActivities,
|
||||||
|
getAccounts,
|
||||||
|
clearError
|
||||||
|
}
|
||||||
|
})
|
||||||
247
frontend/src/stores/auth.ts
Normal file
247
frontend/src/stores/auth.ts
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
import { authAPI } from '@/utils/api'
|
||||||
|
import { userAuth } from '@/utils/auth'
|
||||||
|
import type { User } from '@/types'
|
||||||
|
|
||||||
|
export const useAuthStore = defineStore('auth', () => {
|
||||||
|
// 状态
|
||||||
|
const user = ref<User | null>(null)
|
||||||
|
const token = ref<string | null>(null)
|
||||||
|
const loading = ref(false)
|
||||||
|
const error = ref<string | null>(null)
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const isLoggedIn = computed(() => !!token.value && !!user.value)
|
||||||
|
|
||||||
|
// 初始化认证状态
|
||||||
|
const initAuth = () => {
|
||||||
|
const storedToken = userAuth.getToken()
|
||||||
|
const storedUser = userAuth.getUserInfo()
|
||||||
|
|
||||||
|
if (storedToken && storedUser) {
|
||||||
|
token.value = storedToken
|
||||||
|
user.value = storedUser
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户注册
|
||||||
|
const register = async (data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
confirmPassword: string
|
||||||
|
}) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.register(data)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '注册失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户登录
|
||||||
|
const login = async (data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.login(data)
|
||||||
|
|
||||||
|
// 保存认证信息
|
||||||
|
token.value = response.token
|
||||||
|
user.value = response.user
|
||||||
|
userAuth.setLogin(response.token, response.user)
|
||||||
|
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 邮箱验证
|
||||||
|
const verifyEmail = async (token: string) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.verifyEmail(token)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '邮箱验证失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重新发送验证邮件
|
||||||
|
const resendVerification = async (email: string) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.resendVerification(email)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '发送验证邮件失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 忘记密码
|
||||||
|
const forgotPassword = async (email: string) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.forgotPassword(email)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '发送重置邮件失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置密码
|
||||||
|
const resetPassword = async (data: {
|
||||||
|
token: string
|
||||||
|
password: string
|
||||||
|
}) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.resetPassword(data)
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '重置密码失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置TOTP
|
||||||
|
const setupTOTP = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.setupTOTP()
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '设置二步验证失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证TOTP
|
||||||
|
const verifyTOTP = async (totpToken: string) => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.verifyTOTP(totpToken)
|
||||||
|
|
||||||
|
// 更新用户信息
|
||||||
|
if (user.value && token.value) {
|
||||||
|
user.value.totpEnabled = true
|
||||||
|
userAuth.setLogin(token.value, user.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '验证失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
const getProfile = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.getProfile()
|
||||||
|
user.value = response.user
|
||||||
|
if (token.value) {
|
||||||
|
userAuth.setLogin(token.value, response.user)
|
||||||
|
}
|
||||||
|
return response
|
||||||
|
} catch (err: any) {
|
||||||
|
error.value = err.response?.data?.message || '获取用户信息失败'
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户登出
|
||||||
|
const logout = async () => {
|
||||||
|
loading.value = true
|
||||||
|
error.value = null
|
||||||
|
|
||||||
|
try {
|
||||||
|
await authAPI.logout()
|
||||||
|
} catch (err: any) {
|
||||||
|
console.error('登出API调用失败:', err)
|
||||||
|
} finally {
|
||||||
|
// 清除本地状态
|
||||||
|
token.value = null
|
||||||
|
user.value = null
|
||||||
|
userAuth.logout()
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除错误
|
||||||
|
const clearError = () => {
|
||||||
|
error.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
user,
|
||||||
|
token,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
isLoggedIn,
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
initAuth,
|
||||||
|
register,
|
||||||
|
login,
|
||||||
|
verifyEmail,
|
||||||
|
resendVerification,
|
||||||
|
forgotPassword,
|
||||||
|
resetPassword,
|
||||||
|
setupTOTP,
|
||||||
|
verifyTOTP,
|
||||||
|
getProfile,
|
||||||
|
logout,
|
||||||
|
clearError
|
||||||
|
}
|
||||||
|
})
|
||||||
39
frontend/src/style.css
Normal file
39
frontend/src/style.css
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply antialiased;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
@apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply btn bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
@apply btn border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
@apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply bg-white dark:bg-gray-800 shadow rounded-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
119
frontend/src/types/index.ts
Normal file
119
frontend/src/types/index.ts
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
// 用户相关类型
|
||||||
|
export interface User {
|
||||||
|
id: string
|
||||||
|
username: string
|
||||||
|
role: string
|
||||||
|
isActive: boolean
|
||||||
|
emailVerified?: boolean
|
||||||
|
totpEnabled: boolean
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 网站账号相关类型
|
||||||
|
export interface WebsiteAccount {
|
||||||
|
id: string
|
||||||
|
website: string
|
||||||
|
username: string
|
||||||
|
token?: string
|
||||||
|
isActive: boolean
|
||||||
|
createdAt: string
|
||||||
|
updatedAt: string
|
||||||
|
assignedUsers?: User[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账号分配相关类型
|
||||||
|
export interface AccountAssignment {
|
||||||
|
id: string
|
||||||
|
userId: string
|
||||||
|
accountId: string
|
||||||
|
assignedAt: string
|
||||||
|
expiresAt?: string
|
||||||
|
isActive: boolean
|
||||||
|
account: WebsiteAccount
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
// 会话相关类型
|
||||||
|
export interface Session {
|
||||||
|
id: string
|
||||||
|
userId: string
|
||||||
|
token: string
|
||||||
|
expiresAt: string
|
||||||
|
createdAt: string
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
// 审计日志相关类型
|
||||||
|
export interface AuditLog {
|
||||||
|
id: string
|
||||||
|
userId: string
|
||||||
|
action: string
|
||||||
|
resource: string
|
||||||
|
resourceId?: string
|
||||||
|
details?: any
|
||||||
|
ipAddress?: string
|
||||||
|
userAgent?: string
|
||||||
|
createdAt: string
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
// API响应类型
|
||||||
|
export interface ApiResponse<T = any> {
|
||||||
|
success: boolean
|
||||||
|
message: string
|
||||||
|
data?: T
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页响应类型
|
||||||
|
export interface PaginatedResponse<T> {
|
||||||
|
data: T[]
|
||||||
|
pagination: {
|
||||||
|
page: number
|
||||||
|
limit: number
|
||||||
|
total: number
|
||||||
|
totalPages: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 认证相关类型
|
||||||
|
export interface LoginRequest {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterRequest {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
confirmPassword: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoginResponse {
|
||||||
|
token: string
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterResponse {
|
||||||
|
message: string
|
||||||
|
user: User
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证类型
|
||||||
|
export interface ValidationError {
|
||||||
|
field: string
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题类型
|
||||||
|
export type Theme = 'light' | 'dark' | 'system'
|
||||||
|
|
||||||
|
// 通知类型
|
||||||
|
export interface Notification {
|
||||||
|
id: string
|
||||||
|
type: 'success' | 'error' | 'warning' | 'info'
|
||||||
|
title: string
|
||||||
|
message: string
|
||||||
|
duration?: number
|
||||||
|
createdAt: string
|
||||||
|
}
|
||||||
13
frontend/src/types/vue.d.ts
vendored
Normal file
13
frontend/src/types/vue.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue-router' {
|
||||||
|
interface RouteMeta {
|
||||||
|
title?: string
|
||||||
|
requiresAuth?: boolean
|
||||||
|
requiresAdmin?: boolean
|
||||||
|
}
|
||||||
|
}
|
||||||
294
frontend/src/utils/api.ts
Normal file
294
frontend/src/utils/api.ts
Normal file
@@ -0,0 +1,294 @@
|
|||||||
|
import axios, { AxiosInstance, AxiosResponse } from 'axios'
|
||||||
|
import { userAuth, adminAuth } from './auth'
|
||||||
|
|
||||||
|
// API基础配置
|
||||||
|
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api'
|
||||||
|
|
||||||
|
// 创建axios实例
|
||||||
|
const api: AxiosInstance = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器 - 添加认证token
|
||||||
|
api.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
// 优先使用管理员token，如果没有则使用用户token
|
||||||
|
let token = adminAuth.getToken()
|
||||||
|
if (!token) {
|
||||||
|
token = userAuth.getToken()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器 - 处理认证错误
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(response: AxiosResponse) => {
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
// Token过期或无效，清除所有认证状态
|
||||||
|
userAuth.logout()
|
||||||
|
adminAuth.logout()
|
||||||
|
|
||||||
|
// 自动重定向到登录页面（如果不是已经在登录页面）
|
||||||
|
if (window.location.pathname !== '/' && window.location.pathname !== '/login') {
|
||||||
|
window.location.href = '/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 用户认证API
|
||||||
|
export const authAPI = {
|
||||||
|
// 用户注册
|
||||||
|
async register(data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
confirmPassword: string
|
||||||
|
}) {
|
||||||
|
// 只发送后端需要的字段
|
||||||
|
const requestData = {
|
||||||
|
username: data.username,
|
||||||
|
password: data.password,
|
||||||
|
confirmPassword: data.confirmPassword
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await api.post('/auth/register', requestData)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户登录
|
||||||
|
async login(data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}) {
|
||||||
|
try {
|
||||||
|
const response = await api.post('/auth/login', data)
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
throw error
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 邮箱验证
|
||||||
|
async verifyEmail(token: string) {
|
||||||
|
const response = await api.post('/auth/verify-email', { token })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重新发送验证邮件
|
||||||
|
async resendVerification(email: string) {
|
||||||
|
const response = await api.post('/auth/resend-verification', { email })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 忘记密码
|
||||||
|
async forgotPassword(email: string) {
|
||||||
|
const response = await api.post('/auth/forgot-password', { email })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置密码
|
||||||
|
async resetPassword(data: {
|
||||||
|
token: string
|
||||||
|
password: string
|
||||||
|
}) {
|
||||||
|
const response = await api.post('/auth/reset-password', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置TOTP
|
||||||
|
async setupTOTP() {
|
||||||
|
const response = await api.post('/auth/setup-totp')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 验证TOTP
|
||||||
|
async verifyTOTP(token: string) {
|
||||||
|
const response = await api.post('/auth/verify-totp', { token })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
async getProfile() {
|
||||||
|
const response = await api.get('/auth/me')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户信息
|
||||||
|
async updateProfile(data: {
|
||||||
|
username?: string
|
||||||
|
email?: string
|
||||||
|
currentPassword?: string
|
||||||
|
newPassword?: string
|
||||||
|
}) {
|
||||||
|
const response = await api.put('/auth/profile', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户登出
|
||||||
|
async logout() {
|
||||||
|
const response = await api.post('/auth/logout')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取TOTP二维码
|
||||||
|
async getTOTPQRCode() {
|
||||||
|
const response = await api.get('/auth/totp/qr-code')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 启用TOTP
|
||||||
|
async enableTOTP(token: string) {
|
||||||
|
const response = await api.post('/auth/totp/enable', { token })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 禁用TOTP
|
||||||
|
async disableTOTP(password: string) {
|
||||||
|
const response = await api.post('/auth/totp/disable', { password })
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 账号管理API
|
||||||
|
export const accountAPI = {
|
||||||
|
// 获取用户可用账号
|
||||||
|
async getUserAccounts() {
|
||||||
|
const response = await api.get('/accounts/user/assigned')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取账号详情
|
||||||
|
async getAccountDetails(accountId: string) {
|
||||||
|
const response = await api.get(`/accounts/${accountId}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 登录到网站
|
||||||
|
async loginToWebsite(accountId: string, userId: string) {
|
||||||
|
const response = await api.post(`/accounts/${accountId}/login`, { userId })
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 管理员API
|
||||||
|
export const adminAPI = {
|
||||||
|
// 管理员登录
|
||||||
|
async login(data: { username: string; password: string }) {
|
||||||
|
const response = await api.post('/admin/login', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户列表
|
||||||
|
async getUsers(params?: { page?: number; limit?: number; search?: string }) {
|
||||||
|
const response = await api.get('/admin/users', { params })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 创建用户
|
||||||
|
async createUser(data: {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
role: string
|
||||||
|
}) {
|
||||||
|
const response = await api.post('/admin/users', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户
|
||||||
|
async updateUser(userId: string, data: any) {
|
||||||
|
const response = await api.put(`/admin/users/${userId}`, data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新用户账号权限
|
||||||
|
async updateUserAccounts(userId: string, accountIds: string[]) {
|
||||||
|
const response = await api.put(`/admin/users/${userId}/accounts`, { accountIds })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
async deleteUser(userId: string) {
|
||||||
|
const response = await api.delete(`/admin/users/${userId}`)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取统计数据
|
||||||
|
async getStats() {
|
||||||
|
console.log('发送获取统计数据请求...')
|
||||||
|
const response = await api.get('/admin/stats')
|
||||||
|
console.log('统计数据API响应:', response.data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取最近活动
|
||||||
|
async getRecentActivities() {
|
||||||
|
console.log('发送获取最近活动请求...')
|
||||||
|
const response = await api.get('/admin/activities')
|
||||||
|
console.log('最近活动API响应:', response.data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取账号列表
|
||||||
|
async getAccounts(params?: { page?: number; limit?: number; search?: string; status?: string }) {
|
||||||
|
const response = await api.get('/admin/accounts', { params })
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 创建账号
|
||||||
|
async createAccount(data: {
|
||||||
|
website: string
|
||||||
|
username: string
|
||||||
|
token?: string
|
||||||
|
isActive: boolean
|
||||||
|
}) {
|
||||||
|
const requestData = {
|
||||||
|
website: data.website,
|
||||||
|
accountName: data.username,
|
||||||
|
token: data.token,
|
||||||
|
isActive: data.isActive
|
||||||
|
}
|
||||||
|
const response = await api.post('/admin/accounts', requestData)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新账号
|
||||||
|
async updateAccount(accountId: string, data: any) {
|
||||||
|
const response = await api.put(`/admin/accounts/${accountId}`, data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除账号
|
||||||
|
async deleteAccount(accountId: string) {
|
||||||
|
const response = await api.delete(`/admin/accounts/${accountId}`)
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 路径API
|
||||||
|
export const pathAPI = {
|
||||||
|
// 获取路径
|
||||||
|
async getPaths() {
|
||||||
|
const response = await api.get('/paths')
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
96
frontend/src/utils/auth.ts
Normal file
96
frontend/src/utils/auth.ts
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
// 认证工具函数
|
||||||
|
|
||||||
|
// 用户认证相关
|
||||||
|
export const userAuth = {
|
||||||
|
// 检查用户是否已登录
|
||||||
|
isLoggedIn(): boolean {
|
||||||
|
return !!localStorage.getItem('userToken')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户token
|
||||||
|
getToken(): string | null {
|
||||||
|
return localStorage.getItem('userToken')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取用户信息
|
||||||
|
getUserInfo(): any {
|
||||||
|
const userInfo = localStorage.getItem('userInfo')
|
||||||
|
return userInfo ? JSON.parse(userInfo) : null
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置用户登录状态
|
||||||
|
setLogin(token: string, userInfo: any): void {
|
||||||
|
localStorage.setItem('userToken', token)
|
||||||
|
localStorage.setItem('userInfo', JSON.stringify(userInfo))
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除用户登录状态
|
||||||
|
logout(): void {
|
||||||
|
localStorage.removeItem('userToken')
|
||||||
|
localStorage.removeItem('userInfo')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 管理员认证相关
|
||||||
|
export const adminAuth = {
|
||||||
|
// 检查管理员是否已登录
|
||||||
|
isLoggedIn(): boolean {
|
||||||
|
return !!localStorage.getItem('adminToken')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取管理员token
|
||||||
|
getToken(): string | null {
|
||||||
|
return localStorage.getItem('adminToken')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取管理员信息
|
||||||
|
getAdminInfo(): any {
|
||||||
|
try {
|
||||||
|
const adminInfo = localStorage.getItem('adminUser')
|
||||||
|
return adminInfo ? JSON.parse(adminInfo) : null
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析管理员信息失败:', error)
|
||||||
|
// 清除可能损坏的数据
|
||||||
|
localStorage.removeItem('adminUser')
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 设置管理员登录状态
|
||||||
|
setLogin(token: string, adminInfo: any): void {
|
||||||
|
try {
|
||||||
|
if (!token || !adminInfo) {
|
||||||
|
console.error('设置管理员登录状态失败：token 或 adminInfo 为空')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!adminInfo.username) {
|
||||||
|
console.error('设置管理员登录状态失败：adminInfo 缺少 username 字段')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem('adminToken', token)
|
||||||
|
localStorage.setItem('adminUser', JSON.stringify(adminInfo))
|
||||||
|
console.log('管理员登录状态设置成功:', { token, adminInfo })
|
||||||
|
} catch (error) {
|
||||||
|
console.error('设置管理员登录状态失败:', error)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 清除管理员登录状态
|
||||||
|
logout(): void {
|
||||||
|
localStorage.removeItem('adminToken')
|
||||||
|
localStorage.removeItem('adminUser')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证管理员凭据
|
||||||
|
export const validateAdminCredentials = (username: string, password: string): boolean => {
|
||||||
|
// 这里可以扩展为从API验证
|
||||||
|
const validCredentials = {
|
||||||
|
username: 'admin',
|
||||||
|
password: 'admin123'
|
||||||
|
}
|
||||||
|
|
||||||
|
return username === validCredentials.username && password === validCredentials.password
|
||||||
|
}
|
||||||
472
frontend/src/views/Admin.vue
Normal file
472
frontend/src/views/Admin.vue
Normal file
@@ -0,0 +1,472 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
Pandora 管理后台
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
管理员：{{ adminUser?.username || '未知用户' }}
|
||||||
|
</span>
|
||||||
|
<button class="btn-outline" @click="handleLogout">
|
||||||
|
退出登录
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
系统管理
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">
|
||||||
|
管理用户、权限和系统配置
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 管理菜单 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div
|
||||||
|
v-for="menu in adminMenus"
|
||||||
|
:key="menu.id"
|
||||||
|
class="card p-6 cursor-pointer hover:shadow-lg transition-shadow"
|
||||||
|
@click="navigateToMenu(menu)"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path v-if="menu.icon === 'UserIcon'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||||
|
<path v-else-if="menu.icon === 'KeyIcon'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||||
|
<path v-else-if="menu.icon === 'ShieldIcon'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
<path v-else-if="menu.icon === 'ChartIcon'" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ menu.name }}
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ menu.description }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 系统统计 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">总用户数</p>
|
||||||
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.totalUsers }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9v-9m0-9v9" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">总账号数</p>
|
||||||
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.totalAccounts }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">今日访问</p>
|
||||||
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.todayVisits }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card p-6">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-8 h-8 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">系统告警</p>
|
||||||
|
<p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ stats.alerts }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 快速操作 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<!-- 快速操作卡片 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
快速操作
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||||
|
<button
|
||||||
|
@click="router.push('/admin/users')"
|
||||||
|
class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">添加用户</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">创建新用户账号</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="router.push('/admin/accounts')"
|
||||||
|
class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">添加账号</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">管理网站账号</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="router.push('/admin/permissions')"
|
||||||
|
class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">权限设置</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">配置访问权限</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="router.push('/admin/monitor')"
|
||||||
|
class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text-left">
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">系统监控</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">查看运行状态</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 最近活动 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
最近活动
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div v-if="recentActivities.length === 0" class="text-center py-12">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">暂无活动</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
系统运行正常，暂无异常活动
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="activity in recentActivities"
|
||||||
|
:key="activity.id"
|
||||||
|
class="flex items-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
|
||||||
|
:class="{
|
||||||
|
'border-red-200 dark:border-red-700 bg-red-50 dark:bg-red-900/20':
|
||||||
|
activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div
|
||||||
|
class="w-8 h-8 rounded-full flex items-center justify-center"
|
||||||
|
:class="{
|
||||||
|
'bg-red-100 dark:bg-red-900': activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED',
|
||||||
|
'bg-gray-100 dark:bg-gray-800': !(activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED')
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4"
|
||||||
|
:class="{
|
||||||
|
'text-red-600 dark:text-red-400': activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED',
|
||||||
|
'text-gray-600 dark:text-gray-400': !(activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED')
|
||||||
|
}"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
v-if="activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED'"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
v-else
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4 flex-1">
|
||||||
|
<p
|
||||||
|
class="text-sm"
|
||||||
|
:class="{
|
||||||
|
'text-red-900 dark:text-red-100': activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED',
|
||||||
|
'text-gray-900 dark:text-white': !(activity.action === 'USER_LOGIN_FAILED' || activity.action === 'ADMIN_LOGIN_FAILED')
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ activity.description }}
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center space-x-4 mt-1">
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{{ formatTime(activity.time) }}
|
||||||
|
</p>
|
||||||
|
<p v-if="activity.ipAddress" class="text-xs text-blue-600 dark:text-blue-400">
|
||||||
|
IP: {{ activity.ipAddress }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAdminStore } from '@/stores/admin'
|
||||||
|
import { adminAuth } from '@/utils/auth'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 管理菜单
|
||||||
|
const adminMenus = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '用户管理',
|
||||||
|
description: '管理用户账号和权限',
|
||||||
|
icon: 'UserIcon',
|
||||||
|
route: '/admin/users'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '账号管理',
|
||||||
|
description: '管理网站账号和token',
|
||||||
|
icon: 'KeyIcon',
|
||||||
|
route: '/admin/accounts'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '权限管理',
|
||||||
|
description: '配置用户访问权限',
|
||||||
|
icon: 'ShieldIcon',
|
||||||
|
route: '/admin/permissions'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '系统监控',
|
||||||
|
description: '查看系统运行状态',
|
||||||
|
icon: 'ChartIcon',
|
||||||
|
route: '/admin/monitor'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 统计数据
|
||||||
|
const stats = ref({
|
||||||
|
totalUsers: 0,
|
||||||
|
totalAccounts: 0,
|
||||||
|
todayVisits: 0,
|
||||||
|
alerts: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 最近活动
|
||||||
|
const recentActivities = ref([])
|
||||||
|
|
||||||
|
// 导航到菜单
|
||||||
|
const navigateToMenu = (menu: any) => {
|
||||||
|
router.push(menu.route)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 管理员用户信息
|
||||||
|
const adminUser = ref<any>(null)
|
||||||
|
|
||||||
|
// 退出登录
|
||||||
|
const handleLogout = () => {
|
||||||
|
adminAuth.logout()
|
||||||
|
router.push('/admin/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化时间
|
||||||
|
const formatTime = (time: string) => {
|
||||||
|
const date = new Date(time)
|
||||||
|
const now = new Date()
|
||||||
|
const diff = now.getTime() - date.getTime()
|
||||||
|
|
||||||
|
if (diff < 60000) { // 1分钟内
|
||||||
|
return '刚刚'
|
||||||
|
} else if (diff < 3600000) { // 1小时内
|
||||||
|
return `${Math.floor(diff / 60000)}分钟前`
|
||||||
|
} else if (diff < 86400000) { // 1天内
|
||||||
|
return `${Math.floor(diff / 3600000)}小时前`
|
||||||
|
} else {
|
||||||
|
return date.toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载统计数据
|
||||||
|
const loadStats = async () => {
|
||||||
|
try {
|
||||||
|
console.log('开始加载统计数据...')
|
||||||
|
const response = await adminStore.getStats()
|
||||||
|
console.log('统计数据响应:', response)
|
||||||
|
|
||||||
|
if (response.success && response.data) {
|
||||||
|
stats.value = response.data
|
||||||
|
console.log('统计数据加载成功:', stats.value)
|
||||||
|
} else {
|
||||||
|
console.error('统计数据格式错误:', response)
|
||||||
|
toast.error('统计数据格式错误')
|
||||||
|
// 设置默认值
|
||||||
|
stats.value = {
|
||||||
|
totalUsers: 0,
|
||||||
|
totalAccounts: 0,
|
||||||
|
todayVisits: 0,
|
||||||
|
alerts: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载统计数据失败:', error)
|
||||||
|
toast.error('加载统计数据失败')
|
||||||
|
// 设置默认值
|
||||||
|
stats.value = {
|
||||||
|
totalUsers: 0,
|
||||||
|
totalAccounts: 0,
|
||||||
|
todayVisits: 0,
|
||||||
|
alerts: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载最近活动
|
||||||
|
const loadRecentActivities = async () => {
|
||||||
|
try {
|
||||||
|
console.log('开始加载最近活动...')
|
||||||
|
const response = await adminStore.getRecentActivities()
|
||||||
|
console.log('最近活动响应:', response)
|
||||||
|
|
||||||
|
if (response.success && response.data) {
|
||||||
|
recentActivities.value = response.data.activities || []
|
||||||
|
console.log('最近活动加载成功:', recentActivities.value)
|
||||||
|
} else {
|
||||||
|
console.error('最近活动数据格式错误:', response)
|
||||||
|
toast.error('最近活动数据格式错误')
|
||||||
|
recentActivities.value = []
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载最近活动失败:', error)
|
||||||
|
toast.error('加载最近活动失败')
|
||||||
|
recentActivities.value = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取数据
|
||||||
|
onMounted(async () => {
|
||||||
|
|
||||||
|
// 检查管理员登录状态
|
||||||
|
if (!adminAuth.isLoggedIn()) {
|
||||||
|
router.push('/admin/login')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取管理员用户信息
|
||||||
|
const adminInfo = adminAuth.getAdminInfo()
|
||||||
|
|
||||||
|
if (!adminInfo) {
|
||||||
|
// 如果没有管理员信息，清除登录状态并跳转到登录页
|
||||||
|
adminAuth.logout()
|
||||||
|
router.push('/admin/login')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
adminUser.value = adminInfo
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
try {
|
||||||
|
await Promise.all([
|
||||||
|
loadStats(),
|
||||||
|
loadRecentActivities()
|
||||||
|
])
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载数据失败:', error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
422
frontend/src/views/AdminAccounts.vue
Normal file
422
frontend/src/views/AdminAccounts.vue
Normal file
@@ -0,0 +1,422 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button @click="$router.back()" class="mr-4">
|
||||||
|
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
账号管理
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<!-- 页面标题和操作 -->
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
网站账号
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">
|
||||||
|
管理系统中的所有网站账号和token
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button @click="showCreateModal = true" class="btn-primary">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
添加账号
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索和筛选 -->
|
||||||
|
<div class="card mb-6">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
v-model="searchQuery"
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索网站类型或用户名..."
|
||||||
|
class="input w-full"
|
||||||
|
@input="handleSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<select v-model="statusFilter" class="input" @change="handleSearch">
|
||||||
|
<option value="">所有状态</option>
|
||||||
|
<option value="active">活跃</option>
|
||||||
|
<option value="inactive">非活跃</option>
|
||||||
|
</select>
|
||||||
|
<button @click="handleSearch" class="btn-outline">
|
||||||
|
搜索
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 账号列表 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
账号信息
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
状态
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
分配用户
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
创建时间
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<tr v-for="account in accounts" :key="account.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
|
<div class="h-10 w-10 rounded-lg bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
|
||||||
|
<!-- Claude 图标 -->
|
||||||
|
<img v-if="account.website === 'claude'" :src="claudeIcon" alt="Claude" class="w-6 h-6">
|
||||||
|
<!-- ChatGPT 图标 -->
|
||||||
|
<img v-else-if="account.website === 'chatgpt'" :src="chatgptIcon" alt="ChatGPT" class="w-6 h-6">
|
||||||
|
<!-- Grok 图标 -->
|
||||||
|
<img v-else-if="account.website === 'grok'" :src="grokIcon" alt="Grok" class="w-6 h-6">
|
||||||
|
<!-- 默认占位符 -->
|
||||||
|
<div v-else class="w-6 h-6 bg-gray-300 dark:bg-gray-600 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ getWebsiteTypeName(account.website) }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
用户名: {{ account.username }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||||
|
:class="account.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'">
|
||||||
|
{{ account.isActive ? '活跃' : '非活跃' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ account.assignedUsers?.length || 0 }} 个用户
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ formatDate(account.createdAt) }}
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button @click="editAccount(account)" class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300">
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button @click="deleteAccount(account)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 创建账号模态框 -->
|
||||||
|
<div v-if="showCreateModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||||
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
||||||
|
<div class="mt-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">添加网站账号</h3>
|
||||||
|
<form @submit.prevent="handleCreateAccount">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">网站类型</label>
|
||||||
|
<select v-model="createForm.website" required class="input mt-1 w-full">
|
||||||
|
<option value="">请选择网站类型</option>
|
||||||
|
<option value="claude">Claude</option>
|
||||||
|
<option value="chatgpt">ChatGPT</option>
|
||||||
|
<option value="grok">Grok</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
|
||||||
|
<input v-model="createForm.username" type="text" required class="input mt-1 w-full" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Token</label>
|
||||||
|
<textarea v-model="createForm.token" rows="3" class="input mt-1 w-full" placeholder="输入API token或访问凭证"></textarea>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="flex items-center">
|
||||||
|
<input v-model="createForm.isActive" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded" />
|
||||||
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">账号活跃</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-3 mt-6">
|
||||||
|
<button type="button" @click="showCreateModal = false" class="btn-outline">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" :disabled="loading" class="btn-primary">
|
||||||
|
{{ loading ? '创建中...' : '创建' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑账号模态框 -->
|
||||||
|
<div v-if="showEditModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||||
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
||||||
|
<div class="mt-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">编辑网站账号</h3>
|
||||||
|
<form @submit.prevent="handleUpdateAccount">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">网站类型</label>
|
||||||
|
<select v-model="editForm.website" required class="input mt-1 w-full">
|
||||||
|
<option value="">请选择网站类型</option>
|
||||||
|
<option value="claude">Claude</option>
|
||||||
|
<option value="chatgpt">ChatGPT</option>
|
||||||
|
<option value="grok">Grok</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
|
||||||
|
<input v-model="editForm.username" type="text" required class="input mt-1 w-full" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Token</label>
|
||||||
|
<textarea v-model="editForm.token" rows="3" class="input mt-1 w-full" placeholder="输入API token或访问凭证"></textarea>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="flex items-center">
|
||||||
|
<input v-model="editForm.isActive" type="checkbox" class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded" />
|
||||||
|
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">账号活跃</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<!-- 显示当前分配用户信息 -->
|
||||||
|
<div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
|
||||||
|
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
当前分配用户: <span class="font-medium text-gray-900 dark:text-white">{{ selectedAccount?.assignedUsers?.length || 0 }} 个</span>
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||||
|
创建时间: {{ selectedAccount ? formatDate(selectedAccount.createdAt) : '' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-3 mt-6">
|
||||||
|
<button type="button" @click="closeEditModal" class="btn-outline">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" :disabled="loading" class="btn-primary">
|
||||||
|
{{ loading ? '更新中...' : '更新' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
import { adminAPI } from '@/utils/api'
|
||||||
|
import type { WebsiteAccount } from '@/types'
|
||||||
|
import claudeIcon from '@/assets/claude.png'
|
||||||
|
import chatgptIcon from '@/assets/ChatGPT.png'
|
||||||
|
import grokIcon from '@/assets/grok.png'
|
||||||
|
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 账号列表
|
||||||
|
const accounts = ref<WebsiteAccount[]>([])
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
// 搜索和筛选
|
||||||
|
const searchQuery = ref('')
|
||||||
|
const statusFilter = ref('')
|
||||||
|
|
||||||
|
// 创建账号模态框
|
||||||
|
const showCreateModal = ref(false)
|
||||||
|
const createForm = reactive({
|
||||||
|
website: '',
|
||||||
|
username: '',
|
||||||
|
token: '',
|
||||||
|
isActive: true
|
||||||
|
})
|
||||||
|
|
||||||
|
// 编辑账号模态框
|
||||||
|
const showEditModal = ref(false)
|
||||||
|
const editForm = reactive({
|
||||||
|
id: '',
|
||||||
|
website: '',
|
||||||
|
username: '',
|
||||||
|
token: '',
|
||||||
|
isActive: true
|
||||||
|
})
|
||||||
|
|
||||||
|
const selectedAccount = ref<WebsiteAccount | null>(null)
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取网站类型名称
|
||||||
|
const getWebsiteTypeName = (website: string) => {
|
||||||
|
switch (website) {
|
||||||
|
case 'claude':
|
||||||
|
return 'Claude'
|
||||||
|
case 'chatgpt':
|
||||||
|
return 'ChatGPT'
|
||||||
|
case 'grok':
|
||||||
|
return 'Grok'
|
||||||
|
default:
|
||||||
|
return website
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
const handleSearch = () => {
|
||||||
|
loadAccounts()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载账号列表
|
||||||
|
const loadAccounts = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const response = await adminAPI.getAccounts({
|
||||||
|
search: searchQuery.value,
|
||||||
|
status: statusFilter.value
|
||||||
|
})
|
||||||
|
accounts.value = response.accounts || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载账号列表失败:', error)
|
||||||
|
toast.error('加载账号列表失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建账号
|
||||||
|
const handleCreateAccount = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
await adminAPI.createAccount(createForm)
|
||||||
|
toast.success('账号创建成功')
|
||||||
|
showCreateModal.value = false
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
createForm.website = ''
|
||||||
|
createForm.username = ''
|
||||||
|
createForm.token = ''
|
||||||
|
createForm.isActive = true
|
||||||
|
|
||||||
|
// 重新加载列表
|
||||||
|
await loadAccounts()
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '创建账号失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭编辑模态框
|
||||||
|
const closeEditModal = () => {
|
||||||
|
showEditModal.value = false
|
||||||
|
selectedAccount.value = null
|
||||||
|
// 重置编辑表单
|
||||||
|
editForm.id = ''
|
||||||
|
editForm.website = ''
|
||||||
|
editForm.username = ''
|
||||||
|
editForm.token = ''
|
||||||
|
editForm.isActive = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑账号
|
||||||
|
const editAccount = (account: WebsiteAccount) => {
|
||||||
|
// 设置选中的账号（用于显示用户信息）
|
||||||
|
selectedAccount.value = account
|
||||||
|
|
||||||
|
// 填充编辑表单
|
||||||
|
editForm.id = account.id
|
||||||
|
editForm.website = account.website
|
||||||
|
editForm.username = account.username
|
||||||
|
editForm.token = account.token || ''
|
||||||
|
editForm.isActive = account.isActive
|
||||||
|
|
||||||
|
// 显示编辑模态框
|
||||||
|
showEditModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新账号
|
||||||
|
const handleUpdateAccount = async () => {
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
// 准备更新数据
|
||||||
|
const updateData = {
|
||||||
|
website: editForm.website,
|
||||||
|
accountName: editForm.username,
|
||||||
|
token: editForm.token,
|
||||||
|
isActive: editForm.isActive
|
||||||
|
}
|
||||||
|
|
||||||
|
await adminAPI.updateAccount(editForm.id, updateData)
|
||||||
|
toast.success('账号更新成功')
|
||||||
|
closeEditModal()
|
||||||
|
|
||||||
|
// 重新加载列表
|
||||||
|
await loadAccounts()
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '更新账号失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除账号
|
||||||
|
const deleteAccount = async (account: WebsiteAccount) => {
|
||||||
|
if (!confirm(`确定要删除账号 ${account.website} 吗？`)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await adminAPI.deleteAccount(account.id)
|
||||||
|
toast.success('账号删除成功')
|
||||||
|
await loadAccounts()
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '删除账号失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时加载数据
|
||||||
|
onMounted(() => {
|
||||||
|
loadAccounts()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
208
frontend/src/views/AdminLogin.vue
Normal file
208
frontend/src/views/AdminLogin.vue
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-red-50 to-red-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-md w-full space-y-8">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="mx-auto h-16 w-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
|
||||||
|
<svg class="w-8 h-8 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
管理员登录
|
||||||
|
</h2>
|
||||||
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||||
|
仅限管理员账号访问
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 登录表单 -->
|
||||||
|
<form class="mt-8 space-y-6" @submit.prevent="handleLogin">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
管理员用户名
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
v-model="form.username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="input mt-1"
|
||||||
|
placeholder="请输入管理员用户名"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
管理员密码
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="form.password"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
class="input mt-1"
|
||||||
|
placeholder="请输入管理员密码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 二步验证 -->
|
||||||
|
<div v-if="showTwoFactor" class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label for="verificationCode" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||||
|
验证码
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="verificationCode"
|
||||||
|
v-model="form.verificationCode"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="input mt-1"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember-me"
|
||||||
|
v-model="form.rememberMe"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
|
||||||
|
记住我
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-sm">
|
||||||
|
<a href="#" class="font-medium text-red-600 hover:text-red-500">
|
||||||
|
忘记密码？
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<div v-if="errorMessage" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg class="h-5 w-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm text-red-800 dark:text-red-200">
|
||||||
|
{{ errorMessage }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="loading"
|
||||||
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
<span v-if="loading" class="flex items-center justify-center">
|
||||||
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
登录中...
|
||||||
|
</span>
|
||||||
|
<span v-else>管理员登录</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- 返回首页 -->
|
||||||
|
<div class="text-center">
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
class="text-sm text-red-600 hover:text-red-500"
|
||||||
|
>
|
||||||
|
返回首页
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 安全提示 -->
|
||||||
|
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-4">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<svg class="h-5 w-5 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-sm text-yellow-800 dark:text-yellow-200">
|
||||||
|
此页面仅限管理员访问，请确保您有相应的权限。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { adminAuth } from '@/utils/auth'
|
||||||
|
import { adminAPI } from '@/utils/api'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const form = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
verificationCode: '',
|
||||||
|
rememberMe: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// 状态
|
||||||
|
const loading = ref(false)
|
||||||
|
const showTwoFactor = ref(false)
|
||||||
|
const errorMessage = ref('')
|
||||||
|
|
||||||
|
// 处理登录
|
||||||
|
const handleLogin = async () => {
|
||||||
|
loading.value = true
|
||||||
|
errorMessage.value = ''
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('开始管理员登录:', { username: form.username })
|
||||||
|
|
||||||
|
// 调用后端管理员登录 API
|
||||||
|
const response = await adminAPI.login({
|
||||||
|
username: form.username,
|
||||||
|
password: form.password
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log('管理员登录响应:', response)
|
||||||
|
|
||||||
|
if (response.success) {
|
||||||
|
// 登录成功，设置管理员状态
|
||||||
|
adminAuth.setLogin(response.token, response.admin)
|
||||||
|
|
||||||
|
toast.success('管理员登录成功')
|
||||||
|
|
||||||
|
// 跳转到管理后台
|
||||||
|
router.push('/admin')
|
||||||
|
} else {
|
||||||
|
errorMessage.value = response.message || '登录失败'
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('管理员登录失败:', error)
|
||||||
|
errorMessage.value = error.response?.data?.message || '登录失败，请稍后重试'
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
38
frontend/src/views/AdminMonitor.vue
Normal file
38
frontend/src/views/AdminMonitor.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button @click="$router.back()" class="mr-4">
|
||||||
|
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
系统监控
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div class="text-center py-12">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">系统监控</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
查看系统运行状态功能正在开发中...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// 系统监控页面 - 开发中
|
||||||
|
</script>
|
||||||
388
frontend/src/views/AdminPermissions.vue
Normal file
388
frontend/src/views/AdminPermissions.vue
Normal file
@@ -0,0 +1,388 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button @click="$router.back()" class="mr-4">
|
||||||
|
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
权限管理
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
权限管理
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">
|
||||||
|
管理用户访问权限和账号配置
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户账号权限管理 -->
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- 搜索和筛选 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
v-model="searchQuery"
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索用户名或邮箱..."
|
||||||
|
class="input w-full"
|
||||||
|
@input="handleSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<select v-model="accountFilter" class="input" @change="handleSearch">
|
||||||
|
<option value="">所有账号</option>
|
||||||
|
<option v-for="account in availableAccounts" :key="account.id" :value="account.id">
|
||||||
|
{{ account.username }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<button @click="handleSearch" class="btn-outline">
|
||||||
|
搜索
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户权限列表 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
用户信息
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
账号权限
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<tr v-for="user in filteredUsers" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
|
<div class="h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-medium text-primary-600 dark:text-primary-400">
|
||||||
|
{{ user.username.charAt(0).toUpperCase() }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ user.username }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ user.email }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<span
|
||||||
|
v-for="account in user.accounts || []"
|
||||||
|
:key="account"
|
||||||
|
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
|
||||||
|
>
|
||||||
|
{{ getAccountName(account) }}
|
||||||
|
</span>
|
||||||
|
<span v-if="!user.accounts || user.accounts.length === 0" class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
无访问权限
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||||
|
<button
|
||||||
|
@click="editUserAccounts(user)"
|
||||||
|
class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300"
|
||||||
|
>
|
||||||
|
编辑权限
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 系统权限设置 -->
|
||||||
|
<div class="space-y-6 mt-8">
|
||||||
|
<div class="card">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
系统权限设置
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="space-y-6">
|
||||||
|
<!-- 注册设置 -->
|
||||||
|
<div>
|
||||||
|
<h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">注册设置</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">允许用户注册</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">是否允许新用户注册账号</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="toggleSystemSetting('allowRegistration')"
|
||||||
|
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
|
||||||
|
:class="systemSettings.allowRegistration ? 'bg-primary-600' : 'bg-gray-200 dark:bg-gray-700'"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||||
|
:class="systemSettings.allowRegistration ? 'translate-x-5' : 'translate-x-0'"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 安全设置 -->
|
||||||
|
<div>
|
||||||
|
<h4 class="text-md font-medium text-gray-900 dark:text-white mb-4">安全设置</h4>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">二步验证</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">是否启用TOTP二步验证</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="toggleSystemSetting('enableTOTP')"
|
||||||
|
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
|
||||||
|
:class="systemSettings.enableTOTP ? 'bg-primary-600' : 'bg-gray-200 dark:bg-gray-700'"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||||
|
:class="systemSettings.enableTOTP ? 'translate-x-5' : 'translate-x-0'"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium text-gray-900 dark:text-white">会话超时</p>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">用户会话超时时间（小时）</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
v-model="systemSettings.sessionTimeout"
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
max="72"
|
||||||
|
class="input w-20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 编辑用户账号权限模态框 -->
|
||||||
|
<div v-if="showAccountModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||||
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
||||||
|
<div class="mt-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
|
||||||
|
编辑 {{ selectedUser?.username }} 的账号权限
|
||||||
|
</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div v-for="account in availableAccounts" :key="account.id" class="flex items-center">
|
||||||
|
<input
|
||||||
|
:id="`account-${account.id}`"
|
||||||
|
type="checkbox"
|
||||||
|
:checked="selectedUserAccounts.includes(account.id)"
|
||||||
|
@change="toggleUserAccount(account.id)"
|
||||||
|
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
|
||||||
|
/>
|
||||||
|
<label :for="`account-${account.id}`" class="ml-3 text-sm text-gray-900 dark:text-white">
|
||||||
|
{{ account.username }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-3 mt-6">
|
||||||
|
<button @click="showAccountModal = false" class="btn-outline">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button @click="saveUserAccounts" class="btn-primary">
|
||||||
|
保存
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
|
import { useAdminStore } from '@/stores/admin'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 搜索和筛选
|
||||||
|
const searchQuery = ref('')
|
||||||
|
const accountFilter = ref('')
|
||||||
|
|
||||||
|
// 用户列表
|
||||||
|
const users = ref([])
|
||||||
|
const filteredUsers = computed(() => {
|
||||||
|
let filtered = users.value
|
||||||
|
|
||||||
|
if (searchQuery.value) {
|
||||||
|
filtered = filtered.filter((user: any) =>
|
||||||
|
user.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||||
|
user.email.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (accountFilter.value) {
|
||||||
|
filtered = filtered.filter((user: any) =>
|
||||||
|
user.accounts?.includes(accountFilter.value)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered
|
||||||
|
})
|
||||||
|
|
||||||
|
// 可用账号
|
||||||
|
const availableAccounts = ref([])
|
||||||
|
|
||||||
|
// 加载可用账号
|
||||||
|
const loadAvailableAccounts = async () => {
|
||||||
|
try {
|
||||||
|
const response = await adminStore.getAccounts()
|
||||||
|
availableAccounts.value = response.accounts || []
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载可用账号失败:', error)
|
||||||
|
// 如果加载失败，使用默认数据
|
||||||
|
availableAccounts.value = [
|
||||||
|
{ id: 'account1', username: '账号1', description: '第一个登录账号' },
|
||||||
|
{ id: 'account2', username: '账号2', description: '第二个登录账号' },
|
||||||
|
{ id: 'account3', username: '账号3', description: '第三个登录账号' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 系统设置
|
||||||
|
const systemSettings = ref({
|
||||||
|
allowRegistration: true,
|
||||||
|
enableTOTP: false,
|
||||||
|
sessionTimeout: 24
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模态框状态
|
||||||
|
const showAccountModal = ref(false)
|
||||||
|
const selectedUser = ref(null)
|
||||||
|
const selectedUserAccounts = ref([])
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
const handleSearch = () => {
|
||||||
|
// 这里可以添加实际的搜索逻辑
|
||||||
|
console.log('搜索:', searchQuery.value, '账号筛选:', accountFilter.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据账户ID获取账户名称
|
||||||
|
const getAccountName = (accountId: string) => {
|
||||||
|
const account = availableAccounts.value.find(acc => acc.id === accountId)
|
||||||
|
return account ? account.username : accountId
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑用户账号权限
|
||||||
|
const editUserAccounts = (user: any) => {
|
||||||
|
selectedUser.value = { ...user }
|
||||||
|
selectedUserAccounts.value = [...(user.accounts || [])]
|
||||||
|
showAccountModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换用户账号权限
|
||||||
|
const toggleUserAccount = (accountId: string) => {
|
||||||
|
const index = selectedUserAccounts.value.indexOf(accountId)
|
||||||
|
if (index > -1) {
|
||||||
|
selectedUserAccounts.value.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
selectedUserAccounts.value.push(accountId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 保存用户账号权限
|
||||||
|
const saveUserAccounts = async () => {
|
||||||
|
try {
|
||||||
|
// 调用API保存用户账号权限到后端
|
||||||
|
await adminStore.updateUserAccounts(selectedUser.value.id, selectedUserAccounts.value)
|
||||||
|
console.log('保存用户账号权限:', selectedUser.value?.id, selectedUserAccounts.value)
|
||||||
|
|
||||||
|
// 直接更新本地用户数据
|
||||||
|
if (selectedUser.value) {
|
||||||
|
const userIndex = users.value.findIndex((user: any) => user.id === selectedUser.value.id)
|
||||||
|
console.log('找到用户索引:', userIndex, '用户ID:', selectedUser.value.id)
|
||||||
|
if (userIndex !== -1) {
|
||||||
|
// 使用Vue的响应式更新机制
|
||||||
|
users.value[userIndex] = {
|
||||||
|
...users.value[userIndex],
|
||||||
|
accounts: [...selectedUserAccounts.value]
|
||||||
|
}
|
||||||
|
console.log('更新后的用户数据:', users.value[userIndex])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success('权限保存成功')
|
||||||
|
showAccountModal.value = false
|
||||||
|
} catch (error) {
|
||||||
|
console.error('保存权限失败:', error)
|
||||||
|
toast.error('保存权限失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换系统设置
|
||||||
|
const toggleSystemSetting = (setting: string) => {
|
||||||
|
systemSettings.value[setting] = !systemSettings.value[setting]
|
||||||
|
console.log('切换系统设置:', setting, systemSettings.value[setting])
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载用户列表
|
||||||
|
const loadUsers = async () => {
|
||||||
|
try {
|
||||||
|
const response = await adminStore.loadUsers()
|
||||||
|
// 确保用户数据包含accounts字段，如果没有则初始化为空数组
|
||||||
|
users.value = (response.users || []).map((user: any) => ({
|
||||||
|
...user,
|
||||||
|
accounts: user.accounts || []
|
||||||
|
}))
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载用户列表失败:', error)
|
||||||
|
toast.error('加载用户列表失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时加载数据
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadUsers()
|
||||||
|
await loadAvailableAccounts()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
400
frontend/src/views/AdminUsers.vue
Normal file
400
frontend/src/views/AdminUsers.vue
Normal file
@@ -0,0 +1,400 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<button @click="$router.back()" class="mr-4">
|
||||||
|
<svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
用户管理
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<!-- 页面标题和操作 -->
|
||||||
|
<div class="flex justify-between items-center mb-8">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
用户列表
|
||||||
|
</h2>
|
||||||
|
<p class="text-gray-600 dark:text-gray-300">
|
||||||
|
管理系统中的所有用户账号
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button @click="showCreateModal = true" class="btn-primary">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||||
|
</svg>
|
||||||
|
添加用户
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索和筛选 -->
|
||||||
|
<div class="card mb-6">
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
|
<div class="flex-1">
|
||||||
|
<input
|
||||||
|
v-model="searchQuery"
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索用户名或邮箱..."
|
||||||
|
class="input w-full"
|
||||||
|
@input="handleSearch"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<select v-model="roleFilter" class="input" @change="handleSearch">
|
||||||
|
<option value="">所有角色</option>
|
||||||
|
<option value="user">普通用户</option>
|
||||||
|
<option value="admin">管理员</option>
|
||||||
|
</select>
|
||||||
|
<button @click="handleSearch" class="btn-outline">
|
||||||
|
搜索
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户列表 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
用户信息
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
角色
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
状态
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
创建时间
|
||||||
|
</th>
|
||||||
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
操作
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<tr v-for="user in adminStore.users" :key="user.id" class="hover:bg-gray-50 dark:hover:bg-gray-800">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0 h-10 w-10">
|
||||||
|
<div class="h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
|
||||||
|
<span class="text-sm font-medium text-primary-600 dark:text-primary-400">
|
||||||
|
{{ user.username.charAt(0).toUpperCase() }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ user.username }}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ user.firstName || user.lastName ? `${user.firstName || ''} ${user.lastName || ''}`.trim() : '未设置姓名' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||||
|
:class="user.role === 'admin' ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'">
|
||||||
|
{{ user.role === 'admin' ? '管理员' : '普通用户' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
|
||||||
|
:class="user.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'">
|
||||||
|
{{ user.isActive ? '激活' : '禁用' }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{{ formatDate(user.createdAt) }}
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button @click="editUser(user)" class="text-primary-600 hover:text-primary-900 dark:text-primary-400 dark:hover:text-primary-300">
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button @click="deleteUser(user)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div v-if="adminStore.pagination.totalPages > 1" class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
显示第 {{ (adminStore.pagination.page - 1) * adminStore.pagination.limit + 1 }} 到
|
||||||
|
{{ Math.min(adminStore.pagination.page * adminStore.pagination.limit, adminStore.pagination.total) }} 条，
|
||||||
|
共 {{ adminStore.pagination.total }} 条记录
|
||||||
|
</div>
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<button
|
||||||
|
@click="changePage(adminStore.pagination.page - 1)"
|
||||||
|
:disabled="adminStore.pagination.page <= 1"
|
||||||
|
class="btn-outline px-3 py-1"
|
||||||
|
:class="{ 'opacity-50 cursor-not-allowed': adminStore.pagination.page <= 1 }"
|
||||||
|
>
|
||||||
|
上一页
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="changePage(adminStore.pagination.page + 1)"
|
||||||
|
:disabled="adminStore.pagination.page >= adminStore.pagination.totalPages"
|
||||||
|
class="btn-outline px-3 py-1"
|
||||||
|
:class="{ 'opacity-50 cursor-not-allowed': adminStore.pagination.page >= adminStore.pagination.totalPages }"
|
||||||
|
>
|
||||||
|
下一页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- 创建用户模态框 -->
|
||||||
|
<div v-if="showCreateModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||||
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
||||||
|
<div class="mt-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">创建新用户</h3>
|
||||||
|
<form @submit.prevent="handleCreateUser">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
|
||||||
|
<input v-model="createForm.username" type="text" required class="input mt-1 w-full" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">密码</label>
|
||||||
|
<input v-model="createForm.password" type="password" required class="input mt-1 w-full" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">角色</label>
|
||||||
|
<select v-model="createForm.role" class="input mt-1 w-full">
|
||||||
|
<option value="user">普通用户</option>
|
||||||
|
<option value="admin">管理员</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-3 mt-6">
|
||||||
|
<button type="button" @click="showCreateModal = false" class="btn-outline">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" :disabled="adminStore.loading" class="btn-primary">
|
||||||
|
{{ adminStore.loading ? '创建中...' : '创建' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑用户模态框 -->
|
||||||
|
<div v-if="showEditModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||||
|
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
|
||||||
|
<div class="mt-3">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">编辑用户</h3>
|
||||||
|
<form @submit.prevent="handleEditUser">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">用户名</label>
|
||||||
|
<input v-model="editForm.username" type="text" required class="input mt-1 w-full" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">角色</label>
|
||||||
|
<select v-model="editForm.role" class="input mt-1 w-full">
|
||||||
|
<option value="user">普通用户</option>
|
||||||
|
<option value="admin">管理员</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">状态</label>
|
||||||
|
<select v-model="editForm.isActive" class="input mt-1 w-full">
|
||||||
|
<option :value="true">激活</option>
|
||||||
|
<option :value="false">禁用</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">新密码（留空则不修改）</label>
|
||||||
|
<input v-model="editForm.password" type="password" class="input mt-1 w-full" autocomplete="new-password" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end space-x-3 mt-6">
|
||||||
|
<button type="button" @click="showEditModal = false" class="btn-outline">
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button type="submit" :disabled="adminStore.loading" class="btn-primary">
|
||||||
|
{{ adminStore.loading ? '保存中...' : '保存' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useAdminStore } from '@/stores/admin'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
import type { User } from '@/types'
|
||||||
|
|
||||||
|
const adminStore = useAdminStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 搜索和筛选
|
||||||
|
const searchQuery = ref('')
|
||||||
|
const roleFilter = ref('')
|
||||||
|
|
||||||
|
// 创建用户模态框
|
||||||
|
const showCreateModal = ref(false)
|
||||||
|
const createForm = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
role: 'user'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 编辑用户模态框
|
||||||
|
const showEditModal = ref(false)
|
||||||
|
const editForm = reactive({
|
||||||
|
id: '',
|
||||||
|
username: '',
|
||||||
|
role: 'user',
|
||||||
|
isActive: true,
|
||||||
|
password: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 格式化日期
|
||||||
|
const formatDate = (dateString: string) => {
|
||||||
|
return new Date(dateString).toLocaleDateString('zh-CN')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索处理
|
||||||
|
const handleSearch = () => {
|
||||||
|
adminStore.pagination.page = 1 // 重置到第一页
|
||||||
|
loadUsers()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载用户列表
|
||||||
|
const loadUsers = async () => {
|
||||||
|
try {
|
||||||
|
const params: any = {
|
||||||
|
page: adminStore.pagination.page,
|
||||||
|
limit: adminStore.pagination.limit
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchQuery.value) {
|
||||||
|
params.search = searchQuery.value
|
||||||
|
}
|
||||||
|
|
||||||
|
if (roleFilter.value) {
|
||||||
|
params.role = roleFilter.value
|
||||||
|
}
|
||||||
|
|
||||||
|
await adminStore.loadUsers(params)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载用户列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换页面
|
||||||
|
const changePage = async (page: number) => {
|
||||||
|
adminStore.pagination.page = page
|
||||||
|
await loadUsers()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建用户
|
||||||
|
const handleCreateUser = async () => {
|
||||||
|
try {
|
||||||
|
await adminStore.createUser(createForm)
|
||||||
|
toast.success('用户创建成功')
|
||||||
|
showCreateModal.value = false
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
createForm.username = ''
|
||||||
|
createForm.password = ''
|
||||||
|
createForm.role = 'user'
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '创建用户失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 编辑用户
|
||||||
|
const editUser = (user: User) => {
|
||||||
|
// 填充编辑表单
|
||||||
|
editForm.id = user.id
|
||||||
|
editForm.username = user.username
|
||||||
|
editForm.role = user.role
|
||||||
|
editForm.isActive = user.isActive
|
||||||
|
editForm.password = ''
|
||||||
|
|
||||||
|
// 显示编辑模态框
|
||||||
|
showEditModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理编辑用户
|
||||||
|
const handleEditUser = async () => {
|
||||||
|
try {
|
||||||
|
const updateData: any = {
|
||||||
|
username: editForm.username,
|
||||||
|
role: editForm.role,
|
||||||
|
isActive: editForm.isActive
|
||||||
|
}
|
||||||
|
if (editForm.password) {
|
||||||
|
console.log('正在更新密码:', editForm.password)
|
||||||
|
updateData.password = editForm.password
|
||||||
|
}
|
||||||
|
updateData.loginAttempts = 0
|
||||||
|
console.log('发送更新数据:', updateData)
|
||||||
|
await adminStore.updateUser(editForm.id, updateData)
|
||||||
|
toast.success('用户更新成功')
|
||||||
|
showEditModal.value = false
|
||||||
|
|
||||||
|
// 重置表单
|
||||||
|
editForm.id = ''
|
||||||
|
editForm.username = ''
|
||||||
|
editForm.role = 'user'
|
||||||
|
editForm.isActive = true
|
||||||
|
editForm.password = ''
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '更新用户失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除用户
|
||||||
|
const deleteUser = async (user: User) => {
|
||||||
|
if (!confirm(`确定要删除用户 ${user.username} 吗？`)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await adminStore.deleteUser(user.id)
|
||||||
|
toast.success('用户删除成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
toast.error(error.message || '删除用户失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时加载数据
|
||||||
|
onMounted(() => {
|
||||||
|
loadUsers()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
243
frontend/src/views/Dashboard.vue
Normal file
243
frontend/src/views/Dashboard.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-white dark:bg-gray-800 shadow">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400">
|
||||||
|
AI Route
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
{{ authStore.user?.username }}
|
||||||
|
</span>
|
||||||
|
<div class="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
|
||||||
|
<span class="text-sm font-medium text-primary-600 dark:text-primary-400">
|
||||||
|
{{ authStore.user?.username?.charAt(0).toUpperCase() }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button @click="handleLogout" class="btn-outline" :disabled="authStore.loading">
|
||||||
|
{{ authStore.loading ? '退出中...' : '退出' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<!-- 欢迎信息 -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white">
|
||||||
|
欢迎回来，{{ authStore.user?.username }}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 账号列表 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h3 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
我的账号
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div v-if="accounts.length === 0" class="text-center py-12">
|
||||||
|
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">暂无账号</h3>
|
||||||
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
您还没有被分配任何网站账号
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="account in accounts"
|
||||||
|
:key="account.id"
|
||||||
|
class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
|
||||||
|
<!-- Claude 图标 -->
|
||||||
|
<img v-if="account.website === 'claude'" :src="claudeIcon" alt="Claude" class="w-6 h-6">
|
||||||
|
<!-- ChatGPT 图标 -->
|
||||||
|
<img v-else-if="account.website === 'chatgpt'" :src="chatgptIcon" alt="ChatGPT" class="w-6 h-6">
|
||||||
|
<!-- Grok 图标 -->
|
||||||
|
<img v-else-if="account.website === 'grok'" :src="grokIcon" alt="Grok" class="w-6 h-6">
|
||||||
|
<!-- 默认占位符 -->
|
||||||
|
<div v-else class="w-6 h-6 bg-gray-300 dark:bg-gray-600 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ml-4">
|
||||||
|
<h4 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ account.username }}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<button @click="handleAccessAccount(account)" class="btn-primary">
|
||||||
|
访问
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { accountAPI } from '@/utils/api'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
import type { WebsiteAccount } from '@/types'
|
||||||
|
import claudeIcon from '@/assets/claude.png'
|
||||||
|
import chatgptIcon from '@/assets/ChatGPT.png'
|
||||||
|
import grokIcon from '@/assets/grok.png'
|
||||||
|
import { getWebsiteUrl, getWebsiteConfig } from '@/config/websites'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 账号列表
|
||||||
|
const accounts = ref<WebsiteAccount[]>([])
|
||||||
|
|
||||||
|
// 退出登录
|
||||||
|
const handleLogout = async () => {
|
||||||
|
try {
|
||||||
|
await authStore.logout()
|
||||||
|
router.push('/')
|
||||||
|
} catch (error) {
|
||||||
|
console.error('退出登录失败:', error)
|
||||||
|
// 即使API调用失败也清除本地状态并跳转
|
||||||
|
authStore.logout()
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取网站URL
|
||||||
|
const getLocalWebsiteUrl = (site: string) => {
|
||||||
|
return getWebsiteUrl(site)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 访问账号
|
||||||
|
const handleAccessAccount = async (account: WebsiteAccount) => {
|
||||||
|
try {
|
||||||
|
// 显示加载状态
|
||||||
|
toast.info('正在准备登录...')
|
||||||
|
|
||||||
|
// 调用网站登录API
|
||||||
|
const response = await accountAPI.loginToWebsite(account.id, authStore.user?.id || '')
|
||||||
|
|
||||||
|
if (response.success && response.loginUrl) {
|
||||||
|
// 打开登录URL
|
||||||
|
const jichuurl = getLocalWebsiteUrl(account.website)
|
||||||
|
window.open(jichuurl + response.loginUrl, '_blank')
|
||||||
|
const config = getWebsiteConfig(account.website)
|
||||||
|
toast.success(`正在跳转到 ${config?.name || account.website}...`)
|
||||||
|
} else {
|
||||||
|
toast.error('获取登录链接失败')
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('访问账号失败:', error)
|
||||||
|
|
||||||
|
// 根据不同的错误状态码显示不同的错误信息
|
||||||
|
if (error.response?.status === 403) {
|
||||||
|
const errorMessage = error.response?.data?.error || '您没有权限访问该账号'
|
||||||
|
toast.error(errorMessage)
|
||||||
|
|
||||||
|
// 如果是权限问题，建议用户联系管理员
|
||||||
|
if (errorMessage.includes('权限') || errorMessage.includes('permission')) {
|
||||||
|
console.log('权限错误详情:', {
|
||||||
|
userId: authStore.user?.id,
|
||||||
|
accountId: account.id,
|
||||||
|
error: error.response?.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (error.response?.status === 404) {
|
||||||
|
toast.error('账号不存在或已被删除')
|
||||||
|
} else if (error.response?.status === 400) {
|
||||||
|
toast.error(error.response?.data?.error || '请求参数错误')
|
||||||
|
} else if (error.response?.status === 500) {
|
||||||
|
toast.error('服务器内部错误，请稍后重试')
|
||||||
|
} else if (error.code === 'NETWORK_ERROR') {
|
||||||
|
toast.error('网络连接失败，请检查网络连接')
|
||||||
|
} else {
|
||||||
|
toast.error(error.response?.data?.error || '访问账号失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载用户账号
|
||||||
|
const loadUserAccounts = async () => {
|
||||||
|
try {
|
||||||
|
|
||||||
|
const response = await accountAPI.getUserAccounts()
|
||||||
|
accounts.value = response.accounts || []
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('加载用户账号失败:', error)
|
||||||
|
console.error('错误详情:', error.response?.data)
|
||||||
|
|
||||||
|
// 如果是认证错误，不显示错误消息（因为响应拦截器会处理重定向）
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
console.log('认证错误，响应拦截器将处理重定向')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.error('加载账号列表失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时获取数据
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
// 初始化认证状态
|
||||||
|
authStore.initAuth()
|
||||||
|
|
||||||
|
// 确保用户已登录
|
||||||
|
if (!authStore.isLoggedIn) {
|
||||||
|
toast.error('请先登录')
|
||||||
|
router.push('/')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证token是否有效（通过尝试获取用户信息）
|
||||||
|
try {
|
||||||
|
await authStore.getProfile()
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
// Token无效，清除认证状态并重定向
|
||||||
|
authStore.logout()
|
||||||
|
toast.error('登录已过期，请重新登录')
|
||||||
|
router.push('/')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载用户账号
|
||||||
|
await loadUserAccounts()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Dashboard初始化失败:', error)
|
||||||
|
|
||||||
|
// 如果是认证错误，重定向到登录页面
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
authStore.logout()
|
||||||
|
toast.error('登录已过期，请重新登录')
|
||||||
|
router.push('/')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.error('加载数据失败，请刷新页面重试')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
401
frontend/src/views/Home.vue
Normal file
401
frontend/src/views/Home.vue
Normal file
@@ -0,0 +1,401 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden">
|
||||||
|
<!-- Claude风格背景装饰 -->
|
||||||
|
<div class="absolute inset-0">
|
||||||
|
<!-- 动态背景粒子效果 -->
|
||||||
|
<div class="absolute top-20 left-20 w-2 h-2 bg-blue-400 rounded-full opacity-60 animate-pulse"></div>
|
||||||
|
<div class="absolute top-40 right-32 w-1 h-1 bg-purple-400 rounded-full opacity-40 animate-ping"></div>
|
||||||
|
<div class="absolute bottom-32 left-1/4 w-1.5 h-1.5 bg-cyan-400 rounded-full opacity-50 animate-bounce"></div>
|
||||||
|
<div class="absolute top-1/2 right-1/4 w-1 h-1 bg-green-400 rounded-full opacity-30 animate-pulse"></div>
|
||||||
|
<div class="absolute bottom-20 right-20 w-2 h-2 bg-yellow-400 rounded-full opacity-40 animate-ping"></div>
|
||||||
|
|
||||||
|
<!-- 渐变光晕效果 -->
|
||||||
|
<div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||||
|
<div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<div class="relative z-10 flex items-center justify-center min-h-screen px-4">
|
||||||
|
<div class="w-full max-w-md">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-4xl font-bold text-white mb-2">
|
||||||
|
AI Route
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模式切换 -->
|
||||||
|
<div class="flex justify-center mb-6">
|
||||||
|
<div class="bg-white/10 backdrop-blur-lg rounded-lg p-1 border border-white/20">
|
||||||
|
<button
|
||||||
|
@click="currentMode = 'login'"
|
||||||
|
:class="[
|
||||||
|
'px-4 py-2 rounded-md text-sm font-medium transition-all',
|
||||||
|
currentMode === 'login'
|
||||||
|
? 'bg-blue-600 text-white shadow-lg'
|
||||||
|
: 'text-slate-300 hover:text-white'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
登录
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="currentMode = 'register'"
|
||||||
|
:class="[
|
||||||
|
'px-4 py-2 rounded-md text-sm font-medium transition-all',
|
||||||
|
currentMode === 'register'
|
||||||
|
? 'bg-blue-600 text-white shadow-lg'
|
||||||
|
: 'text-slate-300 hover:text-white'
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
注册
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 登录表单 -->
|
||||||
|
<div v-if="currentMode === 'login'" class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 shadow-2xl">
|
||||||
|
<form @submit.prevent="handleLogin" class="space-y-6">
|
||||||
|
<!-- 用户名输入框 -->
|
||||||
|
<div>
|
||||||
|
<label for="username" class="block text-sm font-medium text-slate-200 mb-2">
|
||||||
|
用户名
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="username"
|
||||||
|
v-model="loginForm.username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 密码输入框 -->
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm font-medium text-slate-200 mb-2">
|
||||||
|
密码
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="password"
|
||||||
|
v-model="loginForm.password"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 记住我 -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="remember-me"
|
||||||
|
v-model="loginForm.rememberMe"
|
||||||
|
type="checkbox"
|
||||||
|
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-white/20 rounded bg-white/10"
|
||||||
|
/>
|
||||||
|
<label for="remember-me" class="ml-2 block text-sm text-slate-200">
|
||||||
|
记住我
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
@click="handleForgotPassword"
|
||||||
|
class="text-slate-300 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
忘记密码？
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 登录按钮 -->
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="authStore.loading"
|
||||||
|
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
||||||
|
>
|
||||||
|
<span v-if="authStore.loading" class="flex items-center justify-center">
|
||||||
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
登录中...
|
||||||
|
</span>
|
||||||
|
<span v-else>登录</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 注册表单 -->
|
||||||
|
<div v-if="currentMode === 'register'" class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 shadow-2xl">
|
||||||
|
<form @submit.prevent="handleRegister" class="space-y-6">
|
||||||
|
<!-- 用户名输入框 -->
|
||||||
|
<div>
|
||||||
|
<label for="regUsername" class="block text-sm font-medium text-slate-200 mb-2">
|
||||||
|
用户名
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="regUsername"
|
||||||
|
v-model="registerForm.username"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 密码输入框 -->
|
||||||
|
<div>
|
||||||
|
<label for="regPassword" class="block text-sm font-medium text-slate-200 mb-2">
|
||||||
|
密码
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="regPassword"
|
||||||
|
v-model="registerForm.password"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 确认密码输入框 -->
|
||||||
|
<div>
|
||||||
|
<label for="confirmPassword" class="block text-sm font-medium text-slate-200 mb-2">
|
||||||
|
确认密码
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
id="confirmPassword"
|
||||||
|
v-model="registerForm.confirmPassword"
|
||||||
|
type="password"
|
||||||
|
required
|
||||||
|
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||||
|
placeholder="请再次输入密码"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 注册按钮 -->
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
:disabled="authStore.loading"
|
||||||
|
class="w-full bg-gradient-to-r from-green-600 to-blue-600 hover:from-green-700 hover:to-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
|
||||||
|
>
|
||||||
|
<span v-if="authStore.loading" class="flex items-center justify-center">
|
||||||
|
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
注册中...
|
||||||
|
</span>
|
||||||
|
<span v-else>注册</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 错误提示 -->
|
||||||
|
<div v-if="authStore.error" class="mt-4 p-3 bg-red-500/20 border border-red-500/30 rounded-lg">
|
||||||
|
<p class="text-red-300 text-sm">{{ authStore.error }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 成功提示 -->
|
||||||
|
<div v-if="successMessage" class="mt-4 p-3 bg-green-500/20 border border-green-500/30 rounded-lg">
|
||||||
|
<p class="text-green-300 text-sm">{{ successMessage }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
// 当前模式：login 或 register
|
||||||
|
const currentMode = ref<'login' | 'register'>('login')
|
||||||
|
|
||||||
|
// 成功消息
|
||||||
|
const successMessage = ref('')
|
||||||
|
|
||||||
|
// 登录表单数据
|
||||||
|
const loginForm = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
rememberMe: false
|
||||||
|
})
|
||||||
|
|
||||||
|
// 注册表单数据
|
||||||
|
const registerForm = reactive({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 登录处理函数
|
||||||
|
const handleLogin = async () => {
|
||||||
|
if (!loginForm.username || !loginForm.password) {
|
||||||
|
toast.error('请填写完整的登录信息')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await authStore.login({
|
||||||
|
username: loginForm.username,
|
||||||
|
password: loginForm.password
|
||||||
|
})
|
||||||
|
|
||||||
|
// 如果选择记住我，保存登录信息到本地存储
|
||||||
|
if (loginForm.rememberMe) {
|
||||||
|
localStorage.setItem('rememberedUser', JSON.stringify({
|
||||||
|
username: loginForm.username,
|
||||||
|
password: loginForm.password
|
||||||
|
}))
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('rememberedUser')
|
||||||
|
}
|
||||||
|
|
||||||
|
router.push('/dashboard')
|
||||||
|
} catch (error: any) {
|
||||||
|
console.log(error)
|
||||||
|
// 根据不同的错误类型显示不同的错误信息
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
const errorMessage = error.response?.data?.error || '用户名或密码错误'
|
||||||
|
const remainingAttempts = error.response?.data?.remainingAttempts
|
||||||
|
|
||||||
|
if (errorMessage.includes('锁定')) {
|
||||||
|
toast.error(errorMessage)
|
||||||
|
} else if (errorMessage.includes('禁用') || errorMessage.includes('inactive')) {
|
||||||
|
toast.error('您的账户尚未激活，请联系管理员激活账户')
|
||||||
|
} else {
|
||||||
|
if (remainingAttempts !== undefined) {
|
||||||
|
toast.error(`用户名或密码错误，还剩${remainingAttempts}次尝试机会`)
|
||||||
|
} else {
|
||||||
|
toast.error('用户名或密码错误，请检查后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (error.response?.status === 400) {
|
||||||
|
toast.error(error.response?.data?.message || '请求参数错误')
|
||||||
|
} else if (error.response?.status === 500) {
|
||||||
|
toast.error('服务器内部错误，请稍后重试')
|
||||||
|
} else if (error.code === 'NETWORK_ERROR') {
|
||||||
|
toast.error('网络连接失败，请检查网络连接')
|
||||||
|
} else {
|
||||||
|
toast.error(error.response?.data?.message || '登录失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 注册处理函数
|
||||||
|
const handleRegister = async () => {
|
||||||
|
if (!registerForm.username || !registerForm.password || !registerForm.confirmPassword) {
|
||||||
|
toast.error('请填写完整的注册信息')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证用户名格式
|
||||||
|
if (!/^[a-zA-Z0-9_]+$/.test(registerForm.username)) {
|
||||||
|
toast.error('用户名只能包含字母、数字和下划线')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证用户名长度
|
||||||
|
if (registerForm.username.length < 3 || registerForm.username.length > 30) {
|
||||||
|
toast.error('用户名长度必须在3-30个字符之间')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证密码长度
|
||||||
|
if (registerForm.password.length < 8) {
|
||||||
|
toast.error('密码长度至少8个字符')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (registerForm.password !== registerForm.confirmPassword) {
|
||||||
|
toast.error('两次输入的密码不一致')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await authStore.register({
|
||||||
|
username: registerForm.username,
|
||||||
|
password: registerForm.password,
|
||||||
|
confirmPassword: registerForm.confirmPassword
|
||||||
|
})
|
||||||
|
|
||||||
|
successMessage.value = '注册成功！您的账户已创建，请等待管理员激活后即可登录。'
|
||||||
|
toast.success('注册成功！请等待管理员激活您的账户。')
|
||||||
|
|
||||||
|
// 注册成功时清空注册表单
|
||||||
|
registerForm.username = ''
|
||||||
|
registerForm.password = ''
|
||||||
|
registerForm.confirmPassword = ''
|
||||||
|
|
||||||
|
// 切换到登录模式
|
||||||
|
currentMode.value = 'login'
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('注册错误详情:', error)
|
||||||
|
console.error('错误响应:', error.response.data.error)
|
||||||
|
|
||||||
|
// 根据不同的错误类型显示不同的错误信息
|
||||||
|
if (error.response?.status === 400) {
|
||||||
|
const details = error.response?.data?.error
|
||||||
|
if (details) {
|
||||||
|
// 显示具体的验证错误信息
|
||||||
|
const errorMessages = details
|
||||||
|
toast.error(`注册失败: ${errorMessages}`)
|
||||||
|
}
|
||||||
|
} else if (error.response?.status === 409) {
|
||||||
|
toast.error('用户名已存在，请使用其他信息')
|
||||||
|
} else if (error.response?.status === 500) {
|
||||||
|
toast.error('服务器内部错误，请稍后重试')
|
||||||
|
} else if (error.code === 'NETWORK_ERROR') {
|
||||||
|
toast.error('网络连接失败，请检查网络连接')
|
||||||
|
} else {
|
||||||
|
toast.error(error.response?.data?.message || '注册失败，请稍后重试')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 忘记密码处理函数
|
||||||
|
const handleForgotPassword = () => {
|
||||||
|
toast.info('请联系管理员')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面加载时检查是否有记住的登录信息
|
||||||
|
const loadRememberedUser = () => {
|
||||||
|
const remembered = localStorage.getItem('rememberedUser')
|
||||||
|
if (remembered) {
|
||||||
|
try {
|
||||||
|
const userData = JSON.parse(remembered)
|
||||||
|
loginForm.username = userData.username || ''
|
||||||
|
loginForm.rememberMe = true
|
||||||
|
} catch (error) {
|
||||||
|
console.error('解析记住的用户信息失败:', error)
|
||||||
|
localStorage.removeItem('rememberedUser')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面挂载时初始化
|
||||||
|
onMounted(() => {
|
||||||
|
loadRememberedUser()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 自定义动画 */
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-float {
|
||||||
|
animation: float 3s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
frontend/src/views/NotFound.vue
Normal file
43
frontend/src/views/NotFound.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-md w-full text-center">
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-9xl font-bold text-primary-600 dark:text-primary-400">404</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
页面未找到
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
|
||||||
|
抱歉，您访问的页面不存在或已被移除。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<router-link
|
||||||
|
to="/"
|
||||||
|
class="btn-primary w-full"
|
||||||
|
>
|
||||||
|
返回首页
|
||||||
|
</router-link>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="goBack"
|
||||||
|
class="btn-outline w-full"
|
||||||
|
>
|
||||||
|
返回上页
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const goBack = () => {
|
||||||
|
router.go(-1)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
212
frontend/src/views/Test.vue
Normal file
212
frontend/src/views/Test.vue
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
|
||||||
|
API 集成测试
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- 认证状态 -->
|
||||||
|
<div class="card mb-8">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
认证状态
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">登录状态</p>
|
||||||
|
<p class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ authStore.isLoggedIn ? '已登录' : '未登录' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-500 dark:text-gray-400">用户信息</p>
|
||||||
|
<p class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
{{ authStore.user?.username || '无' }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- API 测试 -->
|
||||||
|
<div class="card mb-8">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
API 测试
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6 space-y-4">
|
||||||
|
<!-- 获取路径 -->
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
@click="testGetPaths"
|
||||||
|
:disabled="loading"
|
||||||
|
class="btn-primary"
|
||||||
|
>
|
||||||
|
{{ loading ? '测试中...' : '测试获取路径' }}
|
||||||
|
</button>
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
结果: {{ pathsResult }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户注册 -->
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
@click="testRegister"
|
||||||
|
:disabled="loading"
|
||||||
|
class="btn-primary"
|
||||||
|
>
|
||||||
|
{{ loading ? '测试中...' : '测试用户注册' }}
|
||||||
|
</button>
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
结果: {{ registerResult }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户登录 -->
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
@click="testLogin"
|
||||||
|
:disabled="loading"
|
||||||
|
class="btn-primary"
|
||||||
|
>
|
||||||
|
{{ loading ? '测试中...' : '测试用户登录' }}
|
||||||
|
</button>
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
结果: {{ loginResult }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 获取用户信息 -->
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
@click="testGetProfile"
|
||||||
|
:disabled="loading"
|
||||||
|
class="btn-primary"
|
||||||
|
>
|
||||||
|
{{ loading ? '测试中...' : '测试获取用户信息' }}
|
||||||
|
</button>
|
||||||
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
结果: {{ profileResult }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 响应数据 -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
|
||||||
|
响应数据
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-6">
|
||||||
|
<pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg text-sm overflow-auto max-h-96">{{ responseData }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { authAPI, pathAPI } from '@/utils/api'
|
||||||
|
import { useToast } from 'vue-toastification'
|
||||||
|
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const pathsResult = ref('未测试')
|
||||||
|
const registerResult = ref('未测试')
|
||||||
|
const loginResult = ref('未测试')
|
||||||
|
const profileResult = ref('未测试')
|
||||||
|
const responseData = ref('')
|
||||||
|
|
||||||
|
// 测试获取路径
|
||||||
|
const testGetPaths = async () => {
|
||||||
|
loading.value = true
|
||||||
|
pathsResult.value = '测试中...'
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await pathAPI.getPaths()
|
||||||
|
pathsResult.value = '成功'
|
||||||
|
responseData.value = JSON.stringify(response, null, 2)
|
||||||
|
toast.success('获取路径成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
pathsResult.value = '失败'
|
||||||
|
responseData.value = JSON.stringify(error.response?.data || error.message, null, 2)
|
||||||
|
toast.error('获取路径失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试用户注册
|
||||||
|
const testRegister = async () => {
|
||||||
|
loading.value = true
|
||||||
|
registerResult.value = '测试中...'
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.register({
|
||||||
|
username: 'testuser',
|
||||||
|
password: 'password123',
|
||||||
|
confirmPassword: 'password123'
|
||||||
|
})
|
||||||
|
registerResult.value = '成功'
|
||||||
|
responseData.value = JSON.stringify(response, null, 2)
|
||||||
|
toast.success('注册测试成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
registerResult.value = '失败'
|
||||||
|
responseData.value = JSON.stringify(error.response?.data || error.message, null, 2)
|
||||||
|
toast.error('注册测试失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试用户登录
|
||||||
|
const testLogin = async () => {
|
||||||
|
loading.value = true
|
||||||
|
loginResult.value = '测试中...'
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.login({
|
||||||
|
username: 'testuser',
|
||||||
|
password: 'password123'
|
||||||
|
})
|
||||||
|
loginResult.value = '成功'
|
||||||
|
responseData.value = JSON.stringify(response, null, 2)
|
||||||
|
toast.success('登录测试成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
loginResult.value = '失败'
|
||||||
|
responseData.value = JSON.stringify(error.response?.data || error.message, null, 2)
|
||||||
|
toast.error('登录测试失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 测试获取用户信息
|
||||||
|
const testGetProfile = async () => {
|
||||||
|
loading.value = true
|
||||||
|
profileResult.value = '测试中...'
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await authAPI.getProfile()
|
||||||
|
profileResult.value = '成功'
|
||||||
|
responseData.value = JSON.stringify(response, null, 2)
|
||||||
|
toast.success('获取用户信息成功')
|
||||||
|
} catch (error: any) {
|
||||||
|
profileResult.value = '失败'
|
||||||
|
responseData.value = JSON.stringify(error.response?.data || error.message, null, 2)
|
||||||
|
toast.error('获取用户信息失败')
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
65
frontend/tailwind.config.js
Normal file
65
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
950: '#172554',
|
||||||
|
},
|
||||||
|
gray: {
|
||||||
|
50: '#f9fafb',
|
||||||
|
100: '#f3f4f6',
|
||||||
|
200: '#e5e7eb',
|
||||||
|
300: '#d1d5db',
|
||||||
|
400: '#9ca3af',
|
||||||
|
500: '#6b7280',
|
||||||
|
600: '#4b5563',
|
||||||
|
700: '#374151',
|
||||||
|
800: '#1f2937',
|
||||||
|
900: '#111827',
|
||||||
|
950: '#030712',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||||
|
'slide-up': 'slideUp 0.3s ease-out',
|
||||||
|
'bounce-in': 'bounceIn 0.6s ease-out',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0' },
|
||||||
|
'100%': { opacity: '1' },
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
bounceIn: {
|
||||||
|
'0%': { transform: 'scale(0.3)', opacity: '0' },
|
||||||
|
'50%': { transform: 'scale(1.05)' },
|
||||||
|
'70%': { transform: 'scale(0.9)' },
|
||||||
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
darkMode: 'class',
|
||||||
|
}
|
||||||
36
frontend/tsconfig.json
Normal file
36
frontend/tsconfig.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
|
||||||
|
/* Path mapping */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.d.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue"
|
||||||
|
],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
frontend/tsconfig.node.json
Normal file
10
frontend/tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
44
frontend/vite.config.ts
Normal file
44
frontend/vite.config.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, 'src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
// 定义环境变量，使其在客户端可用
|
||||||
|
VITE_API_URL: JSON.stringify(process.env.VITE_API_URL || 'http://localhost:3001'),
|
||||||
|
VITE_APP_NAME: JSON.stringify(process.env.VITE_APP_NAME || 'Pandora'),
|
||||||
|
VITE_CLAUDE_TARGET_URL: JSON.stringify(process.env.CLAUDE_TARGET_URL || 'https://claude.ai'),
|
||||||
|
VITE_CHATGPT_TARGET_URL: JSON.stringify(process.env.CHATGPT_TARGET_URL || 'https://chat.openai.com'),
|
||||||
|
VITE_GROK_TARGET_URL: JSON.stringify(process.env.GROK_TARGET_URL || 'https://grok.x.ai'),
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
host: '0.0.0.0',
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:3001',
|
||||||
|
changeOrigin: true,
|
||||||
|
secure: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
sourcemap: true,
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: {
|
||||||
|
vendor: ['vue', 'vue-router', 'pinia'],
|
||||||
|
ui: ['@headlessui/vue', '@heroicons/vue'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
8186
package-lock.json
generated
Normal file
8186
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
59
package.json
Normal file
59
package.json
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"name": "pandora",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "网站账号共享系统",
|
||||||
|
"private": true,
|
||||||
|
"workspaces": [
|
||||||
|
"frontend",
|
||||||
|
"backend"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
|
||||||
|
"dev:backend": "cd backend && npm run dev",
|
||||||
|
"dev:frontend": "cd frontend && npm run dev",
|
||||||
|
"build": "npm run build:backend && npm run build:frontend",
|
||||||
|
"build:backend": "cd backend && npm run build",
|
||||||
|
"build:frontend": "cd frontend && npm run build",
|
||||||
|
"test": "npm run test:backend && npm run test:frontend",
|
||||||
|
"test:backend": "cd backend && npm test",
|
||||||
|
"test:frontend": "cd frontend && npm test",
|
||||||
|
"lint": "npm run lint:backend && npm run lint:frontend",
|
||||||
|
"lint:backend": "cd backend && npm run lint",
|
||||||
|
"lint:frontend": "cd frontend && npm run lint",
|
||||||
|
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,vue,json,md}\"",
|
||||||
|
"docker:build": "docker-compose build",
|
||||||
|
"docker:up": "docker-compose up -d",
|
||||||
|
"docker:down": "docker-compose down",
|
||||||
|
"docker:logs": "docker-compose logs -f",
|
||||||
|
"docker:prod": "docker-compose -f docker-compose.prod.yml up -d",
|
||||||
|
"db:migrate": "cd backend && npm run db:migrate",
|
||||||
|
"db:seed": "cd backend && npm run db:seed",
|
||||||
|
"db:reset": "cd backend && npm run db:reset"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"concurrently": "^8.2.2",
|
||||||
|
"prettier": "^3.1.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.0.0",
|
||||||
|
"npm": ">=8.0.0"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"account-sharing",
|
||||||
|
"user-management",
|
||||||
|
"authentication",
|
||||||
|
"vue",
|
||||||
|
"express",
|
||||||
|
"typescript"
|
||||||
|
],
|
||||||
|
"author": "Your Name",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/your-username/pandora.git"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/your-username/pandora/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/your-username/pandora#readme"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user