Skip to content

P
performance-score
Commit 908ffa66 by Performance System
Options

Release v8.4: 添加紧急修复工具和调试功能

parent 16a45ab3
Showing with 1110 additions and 3743 deletions
.dockerignore deleted 100644 → 0
# 依赖目录
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# 构建输出
dist/
build/
# Git相关
.git/
.gitignore
.gitattributes
# IDE和编辑器文件
.vscode/
.idea/
*.swp
*.swo
*~
.DS_Store
# 环境变量文件
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
# 日志文件
logs/
*.log
# 运行时数据
pids/
*.pid
*.seed
*.pid.lock
# 覆盖率目录
coverage/
*.lcov
.nyc_output
# 缓存目录
.npm
.eslintcache
.cache
.parcel-cache
# 临时文件
tmp/
temp/
# 操作系统生成的文件
Thumbs.db
ehthumbs.db
.Spotlight-V100
.Trashes
# Docker相关文件
Dockerfile*
docker-compose*.yml
.dockerignore
# 文档和说明文件
README.md
*.md
cursorrules
# 批处理脚本和配置文件
*.bat
*.sh
# 但保留Docker相关的脚本
!docker-health-check.sh
# 测试文件
test/
tests/
__tests__/
*.test.js
*.spec.js
# 其他不需要的文件
.editorconfig
.browserslistrc
.prettierrc*
.eslintrc*
jest.config.js
babel.config.js
.gitignore
......@@ -3,9 +3,8 @@ node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Build outputs
# Production builds
dist/
build/
......@@ -16,12 +15,11 @@ build/
.env.test.local
.env.production.local
# IDE and editor files
# IDE files
.vscode/
.idea/
*.swp
*.swo
*~
# OS generated files
.DS_Store
......@@ -44,7 +42,6 @@ pids
# Coverage directory used by tools like istanbul
coverage/
*.lcov
# nyc test coverage
.nyc_output
......@@ -58,6 +55,12 @@ jspm_packages/
# Optional eslint cache
.eslintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
......@@ -91,7 +94,3 @@ jspm_packages/
# TernJS port file
.tern-port
# Temporary folders
tmp/
temp/
Dockerfile deleted 100644 → 0
# 绩效计分系统 Docker 镜像
# 使用多阶段构建优化镜像大小
# 第一阶段：构建阶段
FROM node:18-alpine AS builder
# 设置工作目录
WORKDIR /app
# 复制package文件
COPY package*.json ./
# 安装依赖（包括开发依赖，用于构建）
RUN npm ci --silent
# 复制源代码
COPY . .
# 构建应用
RUN npm run build
# 第二阶段：生产阶段
FROM nginx:alpine AS production
# 安装必要的工具
RUN apk add --no-cache tzdata
# 设置时区为中国标准时间
ENV TZ=Asia/Shanghai
# 创建nginx用户和组（如果不存在）
RUN addgroup -g 101 -S nginx || true
RUN adduser -S -D -H -u 101 -h /var/cache/nginx -s /sbin/nologin -G nginx -g nginx nginx || true
# 复制构建产物到nginx目录
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制nginx配置文件
COPY nginx.conf /etc/nginx/nginx.conf
# 复制健康检查脚本
COPY docker-health-check.sh /usr/local/bin/health-check.sh
RUN chmod +x /usr/local/bin/health-check.sh
# 创建日志目录
RUN mkdir -p /var/log/nginx && \
chown -R nginx:nginx /var/log/nginx && \
chown -R nginx:nginx /usr/share/nginx/html
# 暴露端口
EXPOSE 80
# 健康检查
HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
CMD /usr/local/bin/health-check.sh
# 启动nginx
CMD ["nginx", "-g", "daemon off;"]
Docker部署指南.md deleted 100644 → 0
# 绩效计分系统 - Docker 部署指南
++ /dev/null
# 绩效计分系统 - Docker 部署指南
## 📋 概述
本指南提供了绩效计分系统的Docker容器化部署方案，使用多阶段构建优化镜像大小，并通过nginx提供高性能的静态文件服务。
## 🛠️ 环境要求
### 系统要求
- Docker Engine 20.10.0 或更高版本
- Docker Compose V2 (内置于Docker Desktop)
- 至少 2GB 可用内存
- 至少 1GB 可用磁盘空间
### 检查环境
```bash
# 检查Docker版本
docker --version
# 检查Docker Compose版本
docker compose version
# 检查Docker服务状态
docker info
```
## 🚀 快速启动
### 1. 开发环境（推荐）
```bash
# 方式1：使用快速启动脚本
./docker-start.bat
# 方式2：使用 Docker Compose
docker compose up -d
# 查看服务状态
docker compose ps
# 查看日志
docker compose logs -f
```
### 2. 生产环境
```bash
# 使用生产环境配置启动
docker compose -f docker-compose.prod.yml up -d
# 查看服务状态
docker compose -f docker-compose.prod.yml ps
# 查看日志
docker compose -f docker-compose.prod.yml logs -f
```
### 3. 手动构建和运行
```bash
# 构建镜像
docker build -t performance-score-system:latest .
# 运行容器
docker run -d \
--name performance-score-frontend \
-p 4001:80 \
--restart unless-stopped \
performance-score-system:latest
```
## 🌐 访问应用
启动成功后，在浏览器中访问：
```
http://localhost:4001
```
### 默认登录账号
| 角色 | 用户名 | 密码 | 说明 |
|------|--------|------|------|
| 管理员 | admin | admin123 | 拥有所有权限 |
| 陈锐屏 | 13800138001 | 123456 | 负责机构 A、B、C、D、E |
| 张田田 | 13800138002 | 123456 | 负责机构 a、b、c、d、e |
| 余芳飞 | 13800138003 | 123456 | 负责机构 ①、②、③、④、⑤ |
## 📁 Docker 文件说明
### Dockerfile
- **多阶段构建**：第一阶段使用Node.js构建应用，第二阶段使用nginx提供服务
- **镜像优化**：最终镜像大小约30MB（基于nginx:alpine）
- **安全配置**：非root用户运行，健康检查支持
### docker-compose.yml
- **端口映射**：容器80端口映射到主机4001端口
- **环境变量**：时区设置为Asia/Shanghai
- **数据卷**：nginx日志持久化存储
- **网络配置**：独立的bridge网络
- **健康检查**：自动监控服务状态
### .dockerignore
- 排除不必要的文件和目录
- 减少构建上下文大小
- 提高构建速度
## 🔧 常用命令
### 服务管理
```bash
# 启动服务
docker compose up -d
# 停止服务
docker compose down
# 重启服务
docker compose restart
# 查看服务状态
docker compose ps
# 查看实时日志
docker compose logs -f performance-score-frontend
```
### 镜像管理
```bash
# 重新构建镜像
docker compose build --no-cache
# 拉取最新镜像
docker compose pull
# 查看镜像
docker images | grep performance-score
# 删除镜像
docker rmi performance-score-system:latest
```
### 容器管理
```bash
# 进入容器
docker exec -it performance-score-frontend sh
# 查看容器资源使用
docker stats performance-score-frontend
# 查看容器详细信息
docker inspect performance-score-frontend
```
## 📊 监控和维护
### 健康检查
系统内置健康检查端点：
```bash
# 检查服务健康状态
curl http://localhost:4001/health
# 查看健康检查日志
docker compose logs performance-score-frontend | grep health
```
### 日志管理
```bash
# 查看nginx访问日志
docker exec performance-score-frontend tail -f /var/log/nginx/access.log
# 查看nginx错误日志
docker exec performance-score-frontend tail -f /var/log/nginx/error.log
# 清理日志（谨慎操作）
docker exec performance-score-frontend sh -c "echo '' > /var/log/nginx/access.log"
```
### 数据备份
```bash
# 备份nginx日志
docker cp performance-score-frontend:/var/log/nginx ./nginx-logs-backup
# 备份容器配置
docker inspect performance-score-frontend > container-config-backup.json
```
## 🔒 安全配置
### 网络安全
- 使用独立的Docker网络
- 仅暴露必要的端口
- 配置适当的防火墙规则
### 容器安全
- 非root用户运行
- 只读文件系统（除日志目录）
- 资源限制配置
### nginx安全
- 安全头配置
- 文件上传大小限制
- 隐藏nginx版本信息
## 🚨 故障排除
### 常见问题
#### 1. 网络连接问题（无法拉取镜像）
```bash
# 错误信息：failed to fetch oauth token 或 connectex: A connection attempt failed
# 解决方案：
# 方法1：配置Docker镜像源（推荐）
# 在Docker Desktop设置中添加镜像源：
# - https://docker.mirrors.ustc.edu.cn
# - https://hub-mirror.c.163.com
# - https://mirror.baidubce.com
# 方法2：使用代理
# 在Docker Desktop设置中配置HTTP代理
# 方法3：重试构建
docker compose build --no-cache --pull
# 方法4：手动拉取镜像
docker pull node:18-alpine
docker pull nginx:alpine
```
#### 2. 端口被占用
```bash
# 检查端口占用
netstat -an | findstr :4001
# 修改端口映射
# 编辑 compose.yml 中的 ports 配置
```
#### 3. 构建失败
```bash
# 清理Docker缓存
docker system prune -a
# 重新构建
docker compose build --no-cache
```
#### 4. 容器无法启动
```bash
# 查看详细错误信息
docker compose logs performance-score-frontend
# 检查容器状态
docker ps -a
```
#### 5. 访问403错误
```bash
# 检查nginx配置
docker exec performance-score-frontend nginx -t
# 重新加载nginx配置
docker exec performance-score-frontend nginx -s reload
```
## 📈 性能优化
### 资源限制
在compose.yml中添加资源限制：
```yaml
services:
performance-score-frontend:
deploy:
resources:
limits:
cpus: '1.0'
memory: 512M
reservations:
cpus: '0.5'
memory: 256M
```
### 缓存优化
- 静态资源缓存：1年
- HTML文件：无缓存
- Gzip压缩：启用
## 🔄 更新部署
### 滚动更新
```bash
# 拉取最新代码
git pull
# 重新构建并部署
docker compose up -d --build
# 验证更新
curl http://localhost:4001/health
```
### 回滚操作
```bash
# 停止当前服务
docker compose down
# 使用之前的镜像
docker run -d --name performance-score-frontend -p 4001:80 performance-score-system:previous
# 或者从备份恢复
docker load < performance-score-backup.tar
```
## 📞 技术支持
如果在部署过程中遇到问题，请：
1. 检查Docker和Docker Compose V2版本
2. 查看容器日志获取详细错误信息
3. 确认端口没有被其他服务占用
4. 检查系统资源是否充足
---
**注意**：本部署方案适用于开发和测试环境。生产环境部署请根据实际需求调整安全配置和性能参数。
README-Docker.md deleted 100644 → 0
# 绩效计分系统 - Docker 快速指南
## 🐳 Docker Compose V2 使用说明
本项目使用 **Docker Compose V2**（`docker compose`）而不是旧版本的 `docker-compose`。
### 📋 环境要求
- Docker Desktop 4.0+ (内置 Compose V2)
- 或 Docker Engine 20.10+ + Docker Compose V2 插件
### 🆕 Compose V2 特性
- 移除了 `version` 字段（不再需要）
- 更快的启动速度
- 改进的错误信息
- 更好的资源管理
### 🔍 版本检查
```bash
# 检查 Docker 版本
docker --version
# 检查 Docker Compose V2 版本
docker compose version
# 如果显示错误，说明需要升级到 Compose V2
```
## 🚀 快速启动
### 开发环境
```bash
# 启动服务
docker compose up -d
# 查看状态
docker compose ps
# 查看日志
docker compose logs -f
# 停止服务
docker compose down
```
### 生产环境
```bash
# 启动生产环境
docker compose -f docker-compose.prod.yml up -d
# 查看状态
docker compose -f docker-compose.prod.yml ps
# 停止服务
docker compose -f docker-compose.prod.yml down
```
## 📊 常用命令对比
| 功能 | Docker Compose V1 | Docker Compose V2 |
|------|-------------------|-------------------|
| 启动服务 | `docker-compose up -d` | `docker compose up -d` |
| 查看状态 | `docker-compose ps` | `docker compose ps` |
| 查看日志 | `docker-compose logs -f` | `docker compose logs -f` |
| 停止服务 | `docker-compose down` | `docker compose down` |
| 重建镜像 | `docker-compose build` | `docker compose build` |
| 重启服务 | `docker-compose restart` | `docker compose restart` |
## 🔧 管理脚本
项目提供了便捷的管理脚本：
- **docker-start.bat** - 一键启动开发环境
- **docker-monitor.bat** - 服务监控和管理面板
## 📁 配置文件
- **docker-compose.yml** - 开发环境配置
- **docker-compose.prod.yml** - 生产环境配置
- **Dockerfile** - 镜像构建配置
- **nginx.conf** - 开发环境 nginx 配置
- **nginx.prod.conf** - 生产环境 nginx 配置
## 🌐 访问地址
### 本机访问
启动成功后访问：http://localhost:4001
### 局域网访问（其他设备）
1. 获取本机IP地址：`ipconfig | findstr "IPv4"`
2. 其他设备访问：`http://您的IP:4001`
3. 配置网络访问：运行 `网络配置.bat`
**注意**：如果其他设备无法访问，请运行网络配置工具解决防火墙问题。
## 📞 故障排除
### 网络连接问题（最常见）
如果遇到以下错误：
- `failed to fetch oauth token`
- `connectex: A connection attempt failed`
- `dial tcp xxx:443: connectex`
**快速解决方案：**
```bash
# 运行网络修复工具
./docker-network-fix.bat
```
**手动解决方案：**
1. **配置Docker镜像源（推荐）**
- 打开 Docker Desktop 设置
- 选择 "Docker Engine"
- 添加镜像源配置：
```json
{
"registry-mirrors": [
"https://docker.mirrors.ustc.edu.cn",
"https://hub-mirror.c.163.com",
"https://mirror.baidubce.com"
]
}
```
2. **手动拉取镜像**
```bash
docker pull node:18-alpine
docker pull nginx:alpine
docker compose build --no-cache
```
### 如果提示 "docker-compose: command not found"
这说明您使用的是旧版本，请：
1. 升级到 Docker Desktop 4.0+
2. 或安装 Docker Compose V2 插件
3. 使用 `docker compose` 而不是 `docker-compose`
### 如果 Docker Compose V2 不可用
```bash
# 在 Linux 上安装 Compose V2
sudo apt-get update
sudo apt-get install docker-compose-plugin
# 验证安装
docker compose version
```
## 📖 详细文档
更多详细信息请参考：[Docker部署指南.md](./Docker部署指南.md)
VERSION.md 0 → 100644
# 绩效计分系统版本历史
## 版本 8.4 (2025-08-04)
### 新增功能
- ✨ 紧急修复工具：添加了紧急修复、完整性检查、一键修复功能
- 🔧 调试工具：添加了数据重置、缓存清理、日志查看功能
- 📊 用户面板：完善了工作台显示和数据统计
- 🎨 界面优化：改进了用户界面设计和交互体验
### 技术改进
- 🏗️ 代码结构优化：重构了组件结构，提高了代码可维护性
- 🛡️ 错误处理：增强了错误处理机制和用户反馈
- 📱 响应式设计：优化了移动端适配
- ⚡ 性能优化：提升了页面加载速度和响应性能
### 修复问题
- 🐛 修复了数据加载异常的问题
- 🐛 修复了界面显示不一致的问题
- 🐛 修复了用户权限验证的问题
### 技术栈
- Vue 3.4.29
- Element Plus 2.7.6
- Vite 5.4.19
- Node.js 环境
### 部署说明
- 支持开发环境快速启动
- 准备Docker容器化部署
- 计划支持多用户实时数据同步
---
## 下一版本计划 (8.5)
- 🐳 Docker生产环境部署
- 🔄 多用户多浏览器数据同步
- 📡 WebSocket实时通信
- 🔐 增强安全性和权限管理
docker-compose.prod.yml deleted 100644 → 0
services:
# 绩效计分系统前端服务 - 生产环境配置
performance-score-frontend:
build:
context: .
dockerfile: Dockerfile
target: production
image: performance-score-system:latest
container_name: performance-score-frontend-prod
restart: always
ports:
- "4001:80"
environment:
# 时区设置
- TZ=Asia/Shanghai
# Nginx环境变量
- NGINX_HOST=0.0.0.0
- NGINX_PORT=80
# 生产环境标识
- NODE_ENV=production
volumes:
# 日志卷挂载
- nginx-logs:/var/log/nginx
# 生产环境nginx配置
- ./nginx.prod.conf:/etc/nginx/nginx.conf:ro
networks:
- performance-score-network
healthcheck:
test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost/health"]
interval: 15s
timeout: 5s
retries: 5
start_period: 30s
deploy:
resources:
limits:
cpus: '2.0'
memory: 1G
reservations:
cpus: '0.5'
memory: 256M
restart_policy:
condition: on-failure
delay: 5s
max_attempts: 3
window: 120s
security_opt:
- no-new-privileges:true
read_only: true
tmpfs:
- /tmp:noexec,nosuid,size=100m
- /var/cache/nginx:noexec,nosuid,size=50m
- /var/run:noexec,nosuid,size=10m
logging:
driver: "json-file"
options:
max-size: "10m"
max-file: "3"
labels:
- "com.docker.compose.service=performance-score-frontend"
- "com.docker.compose.project=performance-score-system"
- "environment=production"
# 网络配置
networks:
performance-score-network:
driver: bridge
name: performance-score-network-prod
ipam:
config:
- subnet: 172.20.0.0/16
# 数据卷配置
volumes:
nginx-logs:
driver: local
name: performance-score-nginx-logs-prod
driver_opts:
type: none
o: bind
device: /var/log/performance-score
docker-compose.yml deleted 100644 → 0
services:
# 绩效计分系统前端服务
performance-score-frontend:
build:
context: .
dockerfile: Dockerfile
target: production
image: performance-score-system:latest
container_name: performance-score-frontend
restart: unless-stopped
ports:
- "4001:80"
environment:
# 时区设置
- TZ=Asia/Shanghai
# Nginx环境变量
- NGINX_HOST=localhost
- NGINX_PORT=80
volumes:
# 日志卷挂载
- nginx-logs:/var/log/nginx
# 如果需要自定义nginx配置，可以挂载配置文件
# - ./nginx.conf:/etc/nginx/nginx.conf:ro
networks:
- performance-score-network
healthcheck:
test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost/health"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
deploy:
resources:
limits:
cpus: '1.0'
memory: 512M
reservations:
cpus: '0.25'
memory: 128M
security_opt:
- no-new-privileges:true
read_only: true
tmpfs:
- /tmp
- /var/cache/nginx
- /var/run
labels:
- "traefik.enable=true"
- "traefik.http.routers.performance-score.rule=Host(`localhost`)"
- "traefik.http.services.performance-score.loadbalancer.server.port=80"
- "com.docker.compose.service=performance-score-frontend"
- "com.docker.compose.project=performance-score-system"
# 网络配置
networks:
performance-score-network:
driver: bridge
name: performance-score-network
# 数据卷配置
volumes:
nginx-logs:
driver: local
name: performance-score-nginx-logs
docker-health-check.sh deleted 100644 → 0
#!/bin/sh
# 绩效计分系统 Docker 健康检查脚本
# 设置超时时间
TIMEOUT=5
# 检查nginx进程
if ! pgrep nginx > /dev/null; then
echo "ERROR: nginx process not running"
exit 1
fi
# 检查端口监听
if ! netstat -ln | grep -q ":80 "; then
echo "ERROR: nginx not listening on port 80"
exit 1
fi
# 检查健康端点
if ! wget --quiet --timeout=$TIMEOUT --tries=1 --spider http://localhost/health; then
echo "ERROR: health endpoint not responding"
exit 1
fi
# 检查主页面
if ! wget --quiet --timeout=$TIMEOUT --tries=1 --spider http://localhost/; then
echo "ERROR: main page not responding"
exit 1
fi
# 检查静态资源
if [ -f "/usr/share/nginx/html/index.html" ]; then
echo "OK: Static files present"
else
echo "ERROR: Static files missing"
exit 1
fi
echo "OK: All health checks passed"
exit 0
docker-monitor.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - Docker 监控面板
echo ========================================
echo.
:MENU
echo 请选择操作:
echo 1. 查看服务状态
echo 2. 查看实时日志
echo 3. 查看资源使用情况
echo 4. 查看健康状态
echo 5. 重启服务
echo 6. 停止服务
echo 7. 清理系统
echo 8. 退出
echo.
set /p choice=请输入选项 (1-8):
if "%choice%"=="1" goto STATUS
if "%choice%"=="2" goto LOGS
if "%choice%"=="3" goto STATS
if "%choice%"=="4" goto HEALTH
if "%choice%"=="5" goto RESTART
if "%choice%"=="6" goto STOP
if "%choice%"=="7" goto CLEANUP
if "%choice%"=="8" goto EXIT
echo 无效选项，请重新选择
echo.
goto MENU
:STATUS
echo.
echo 📊 服务状态:
docker compose ps
echo.
echo 🐳 Docker 镜像:
docker images | findstr performance-score
echo.
echo 🌐 网络状态:
docker network ls | findstr performance-score
echo.
echo 💾 数据卷状态:
docker volume ls | findstr performance-score
echo.
pause
goto MENU
:LOGS
echo.
echo 📋 实时日志 (按 Ctrl+C 停止):
docker compose logs -f --tail=50
echo.
pause
goto MENU
:STATS
echo.
echo 📈 资源使用情况:
docker stats performance-score-frontend --no-stream
echo.
echo 💽 磁盘使用:
docker system df
echo.
pause
goto MENU
:HEALTH
echo.
echo 🏥 健康检查:
docker inspect performance-score-frontend --format='{{.State.Health.Status}}'
echo.
echo 🔍 健康检查历史:
docker inspect performance-score-frontend --format='{{range .State.Health.Log}}{{.Start}} - {{.Output}}{{end}}'
echo.
echo 🌐 服务可访问性测试:
curl -s -o nul -w "HTTP状态码: %%{http_code}\n响应时间: %%{time_total}s\n" http://localhost:4001/health
echo.
pause
goto MENU
:RESTART
echo.
echo 🔄 重启服务...
docker compose restart
echo ✅ 服务重启完成
echo.
pause
goto MENU
:STOP
echo.
set /p confirm=确认停止服务? (y/N):
if /i "%confirm%"=="y" (
echo 🛑 停止服务...
docker compose down
echo ✅ 服务已停止
) else (
echo 操作已取消
)
echo.
pause
goto MENU
:CLEANUP
echo.
echo ⚠️ 系统清理将删除未使用的镜像、容器和网络
set /p confirm=确认执行清理? (y/N):
if /i "%confirm%"=="y" (
echo 🧹 清理系统...
docker system prune -f
echo ✅ 清理完成
) else (
echo 操作已取消
)
echo.
pause
goto MENU
:EXIT
echo.
echo 👋 再见！
exit /b 0
docker-network-fix.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo Docker 网络问题修复工具
echo ========================================
echo.
echo 🔍 检测到可能的网络连接问题
echo.
echo 常见错误信息:
echo - "failed to fetch oauth token"
echo - "connectex: A connection attempt failed"
echo - "dial tcp xxx:443: connectex"
echo.
echo 📋 解决方案选择:
echo 1. 配置国内镜像源（推荐）
echo 2. 手动拉取镜像
echo 3. 清理并重试
echo 4. 检查网络连接
echo 5. 显示详细帮助
echo 6. 退出
echo.
:MENU
set /p choice=请选择解决方案 (1-6):
if "%choice%"=="1" goto MIRRORS
if "%choice%"=="2" goto PULL
if "%choice%"=="3" goto CLEAN
if "%choice%"=="4" goto NETWORK
if "%choice%"=="5" goto HELP
if "%choice%"=="6" goto EXIT
echo 无效选项，请重新选择
goto MENU
:MIRRORS
echo.
echo 🌐 配置Docker镜像源
echo.
echo 请按以下步骤操作:
echo.
echo 1. 打开 Docker Desktop
echo 2. 点击右上角设置图标 (齿轮)
echo 3. 选择 "Docker Engine"
echo 4. 在配置中添加以下内容:
echo.
echo {
echo "registry-mirrors": [
echo "https://docker.mirrors.ustc.edu.cn",
echo "https://hub-mirror.c.163.com",
echo "https://mirror.baidubce.com"
echo ]
echo }
echo.
echo 5. 点击 "Apply & Restart"
echo 6. 等待 Docker 重启完成
echo.
echo 配置完成后，重新运行: docker compose up -d
echo.
pause
goto MENU
:PULL
echo.
echo 📥 手动拉取所需镜像
echo.
echo 正在尝试拉取 node:18-alpine...
docker pull node:18-alpine
if %errorlevel% neq 0 (
echo ❌ 拉取 node:18-alpine 失败
) else (
echo ✅ node:18-alpine 拉取成功
)
echo.
echo 正在尝试拉取 nginx:alpine...
docker pull nginx:alpine
if %errorlevel% neq 0 (
echo ❌ 拉取 nginx:alpine 失败
) else (
echo ✅ nginx:alpine 拉取成功
)
echo.
echo 镜像拉取完成，现在尝试构建...
docker compose build --no-cache
echo.
pause
goto MENU
:CLEAN
echo.
echo 🧹 清理Docker缓存并重试
echo.
echo 正在清理Docker系统...
docker system prune -f
echo.
echo 正在重新构建镜像...
docker compose build --no-cache --pull
echo.
echo 清理完成
pause
goto MENU
:NETWORK
echo.
echo 🔍 网络连接检查
echo.
echo 检查DNS解析...
nslookup docker.io
echo.
echo 检查网络连通性...
ping -n 4 docker.io
echo.
echo 检查HTTPS连接...
curl -I https://docker.io 2>nul
if %errorlevel% neq 0 (
echo ❌ 无法连接到 docker.io
echo 可能需要配置代理或使用镜像源
) else (
echo ✅ 网络连接正常
)
echo.
pause
goto MENU
:HELP
echo.
echo 📖 详细帮助信息
echo.
echo 问题原因:
echo - 网络连接不稳定
echo - DNS解析问题
echo - 防火墙或代理设置
echo - Docker Hub访问限制
echo.
echo 解决步骤:
echo 1. 首先尝试配置镜像源（选项1）
echo 2. 如果仍有问题，检查网络连接（选项4）
echo 3. 考虑配置HTTP代理
echo 4. 联系网络管理员检查防火墙设置
echo.
echo 代理配置:
echo 在Docker Desktop设置中的"Resources" → "Proxies"
echo 配置HTTP和HTTPS代理服务器
echo.
echo 企业网络:
echo 如果在企业网络中，可能需要:
echo - 配置企业代理
echo - 添加证书信任
echo - 联系IT部门获取帮助
echo.
pause
goto MENU
:EXIT
echo.
echo 💡 温馨提示:
echo.
echo 如果问题仍然存在，建议:
echo 1. 检查网络连接和代理设置
echo 2. 尝试使用手机热点测试
echo 3. 联系网络管理员
echo 4. 查看Docker官方文档
echo.
echo 👋 祝您使用愉快！
exit /b 0
docker-start.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - Docker 快速启动
echo ========================================
echo.
:: 检查Docker是否安装
docker --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ Docker 未安装或未启动
echo 请先安装 Docker Desktop 并确保服务正在运行
echo 下载地址: https://www.docker.com/products/docker-desktop
pause
exit /b 1
)
:: 检查Docker Compose是否可用
docker compose version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ Docker Compose V2 不可用
echo 请确保 Docker Desktop 已正确安装并启用 Compose V2
pause
exit /b 1
)
echo ✅ Docker 环境检查通过
echo.
:: 检查端口是否被占用
netstat -an | findstr ":4001" >nul 2>&1
if %errorlevel% equ 0 (
echo ⚠️ 端口 4001 已被占用
echo 请停止占用该端口的服务，或修改 docker-compose.yml 中的端口配置
pause
exit /b 1
)
echo ✅ 端口 4001 可用
echo.
echo 🚀 正在启动 Docker 容器...
echo 首次启动需要构建镜像，可能需要几分钟时间
echo.
:: 启动服务
docker compose up -d --build
if %errorlevel% neq 0 (
echo ❌ Docker 容器启动失败
echo 请检查错误信息并重试
pause
exit /b 1
)
echo.
echo ✅ Docker 容器启动成功！
echo.
echo 📱 访问地址: http://localhost:4001
echo.
echo 🔐 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 📊 查看服务状态: docker compose ps
echo 📋 查看日志: docker compose logs -f
echo 🛑 停止服务: docker compose down
echo 🌐 配置网络访问: 网络配置.bat
echo.
:: 等待服务完全启动
echo 🔍 等待服务启动完成...
timeout /t 10 /nobreak >nul
:: 检查服务健康状态
curl -s http://localhost:4001/health >nul 2>&1
if %errorlevel% equ 0 (
echo ✅ 服务健康检查通过
echo.
echo 🎉 系统已就绪，可以开始使用！
) else (
echo ⚠️ 服务可能还在启动中，请稍等片刻后访问
)
echo.
echo 按任意键打开浏览器访问系统...
pause >nul
:: 打开浏览器
start http://localhost:4001
nginx.conf deleted 100644 → 0
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
use epoll;
multi_accept on;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
# 日志格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
# 性能优化
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
client_max_body_size 10M;
# Gzip压缩
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
text/plain
text/css
text/xml
text/javascript
application/json
application/javascript
application/xml+rss
application/atom+xml
image/svg+xml;
# 安全头
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "no-referrer-when-downgrade" always;
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html index.htm;
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
# Vue.js 单页应用路由支持
location / {
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
# API代理（如果需要）
location /api/ {
# 如果有后端API，可以在这里配置代理
# proxy_pass http://backend:3000;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# proxy_set_header X-Forwarded-Proto $scheme;
return 404;
}
# 健康检查端点
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
# 错误页面
error_page 404 /index.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
nginx.prod.conf deleted 100644 → 0
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
# 优化worker连接数
events {
worker_connections 2048;
use epoll;
multi_accept on;
worker_rlimit_nofile 4096;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
# 日志格式
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" '
'$request_time $upstream_response_time';
access_log /var/log/nginx/access.log main;
# 性能优化
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
keepalive_requests 1000;
types_hash_max_size 2048;
client_max_body_size 10M;
client_body_buffer_size 128k;
client_header_buffer_size 1k;
large_client_header_buffers 4 4k;
# 隐藏nginx版本
server_tokens off;
# Gzip压缩
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
text/plain
text/css
text/xml
text/javascript
application/json
application/javascript
application/xml+rss
application/atom+xml
image/svg+xml
application/x-font-ttf
application/vnd.ms-fontobject
font/opentype;
# Brotli压缩（如果支持）
# brotli on;
# brotli_comp_level 6;
# brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 安全头
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self';" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# 限制请求
limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
limit_req_zone $binary_remote_addr zone=login:10m rate=1r/s;
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html index.htm;
# 访问日志
access_log /var/log/nginx/access.log main;
error_log /var/log/nginx/error.log warn;
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Vary "Accept-Encoding";
try_files $uri =404;
# 预压缩文件支持
location ~* \.(js|css)$ {
gzip_static on;
}
}
# HTML文件缓存控制
location ~* \.(html|htm)$ {
expires -1;
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
# API限流
location /api/ {
limit_req zone=api burst=20 nodelay;
# 如果有后端API，可以在这里配置代理
return 404;
}
# 登录接口限流
location /login {
limit_req zone=login burst=5 nodelay;
try_files $uri $uri/ /index.html;
}
# Vue.js 单页应用路由支持
location / {
try_files $uri $uri/ /index.html;
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
# 健康检查端点
location /health {
access_log off;
return 200 "healthy\n";
add_header Content-Type text/plain;
}
# 状态监控端点（仅内部访问）
location /nginx_status {
stub_status on;
access_log off;
allow 127.0.0.1;
allow 172.16.0.0/12;
deny all;
}
# 禁止访问隐藏文件
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
# 禁止访问备份文件
location ~* \.(bak|backup|old|orig|original|tmp)$ {
deny all;
access_log off;
log_not_found off;
}
# 错误页面
error_page 404 /index.html;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
package-lock.json
......@@ -10,6 +10,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"element-plus": "^2.4.4",
"lodash-es": "^4.17.21",
"pinia": "^2.1.7",
"vue": "^3.3.8",
"vue-router": "^4.2.5",
......
package.json
......@@ -11,6 +11,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"element-plus": "^2.4.4",
"lodash-es": "^4.17.21",
"pinia": "^2.1.7",
"vue": "^3.3.8",
"vue-router": "^4.2.5",
......
server.js 0 → 100644
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = 8080;
const DIST_DIR = path.join(__dirname, 'dist');
// MIME types
const mimeTypes = {
'.html': 'text/html',
'.js': 'text/javascript',
'.css': 'text/css',
'.json': 'application/json',
'.png': 'image/png',
'.jpg': 'image/jpg',
'.gif': 'image/gif',
'.svg': 'image/svg+xml',
'.wav': 'audio/wav',
'.mp4': 'video/mp4',
'.woff': 'application/font-woff',
'.ttf': 'application/font-ttf',
'.eot': 'application/vnd.ms-fontobject',
'.otf': 'application/font-otf',
'.wasm': 'application/wasm'
};
const server = http.createServer((req, res) => {
console.log(`${req.method} ${req.url}`);
// Parse URL
let filePath = path.join(DIST_DIR, req.url === '/' ? 'index.html' : req.url);
// Security check
if (!filePath.startsWith(DIST_DIR)) {
res.writeHead(403);
res.end('Forbidden');
return;
}
// Check if file exists
fs.access(filePath, fs.constants.F_OK, (err) => {
if (err) {
// If file doesn't exist and it's not a static asset, serve index.html (SPA routing)
if (!path.extname(filePath)) {
filePath = path.join(DIST_DIR, 'index.html');
} else {
res.writeHead(404);
res.end('Not Found');
return;
}
}
// Get file extension and MIME type
const extname = path.extname(filePath).toLowerCase();
const contentType = mimeTypes[extname] || 'application/octet-stream';
// Read and serve file
fs.readFile(filePath, (err, content) => {
if (err) {
res.writeHead(500);
res.end('Server Error');
return;
}
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
});
});
});
server.listen(PORT, 'localhost', () => {
console.log(`\n🚀 Server running at http://localhost:${PORT}`);
console.log(`📁 Serving files from: ${DIST_DIR}`);
console.log(`\n✅ 绩效计分系统已启动！`);
console.log(`🌐 请在浏览器中访问: http://localhost:${PORT}`);
});
server.on('error', (err) => {
if (err.code === 'EADDRINUSE') {
console.log(`❌ 端口 ${PORT} 已被占用，请尝试其他端口`);
} else {
console.log('❌ 服务器启动失败:', err);
}
});
server/package.json deleted 100644 → 0
{
"name": "score-system-realtime-server",
"version": "1.0.0",
"description": "绩效计分系统实时同步服务器",
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"test": "node test.js"
},
"keywords": [
"websocket",
"realtime",
"score-system"
],
"author": "Score System Team",
"license": "MIT",
"dependencies": {
"ws": "^8.14.2",
"uuid": "^9.0.1",
"compression": "^1.7.4",
"cors": "^2.8.5"
},
"devDependencies": {
"nodemon": "^3.0.1"
},
"engines": {
"node": ">=14.0.0"
}
}
server/start-server.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 实时同步服务器启动
echo ========================================
echo.
:: 检查Node.js是否安装
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ 错误: 未检测到Node.js
echo 请先安装Node.js: https://nodejs.org/
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
node --version
echo.
:: 检查是否已安装依赖
if not exist "node_modules" (
echo 📦 正在安装服务器依赖...
echo 这可能需要几分钟时间，请耐心等待...
echo.
npm install
if %errorlevel% neq 0 (
echo ❌ 依赖安装失败，请检查网络连接
pause
exit /b 1
)
echo ✅ 依赖安装完成
echo.
)
echo 🚀 正在启动实时同步服务器...
echo.
echo 服务器信息:
echo - WebSocket端口: 8080
echo - 健康检查端口: 8081
echo - 最大连接数: 100
echo - 心跳间隔: 30秒
echo.
echo 按 Ctrl+C 可停止服务器
echo ========================================
echo.
npm start
pause
server/test-server.js deleted 100644 → 0
/**
* 简单的WebSocket测试服务器
*/
const WebSocket = require('ws')
const PORT = 8082
console.log('🚀 启动测试WebSocket服务器...')
console.log(`📡 端口: ${PORT}`)
const wss = new WebSocket.Server({ port: PORT })
console.log(`✅ WebSocket服务器已启动在端口 ${PORT}`)
wss.on('connection', (ws) => {
console.log('🔗 新连接建立')
ws.on('message', (message) => {
console.log('📨 收到消息:', message.toString())
// 回显消息
ws.send(`Echo: ${message}`)
})
ws.on('close', () => {
console.log('🔌 连接关闭')
})
// 发送欢迎消息
ws.send('Welcome to WebSocket server!')
})
console.log('服务器运行中...')
server/test.js deleted 100644 → 0
/**
* WebSocket服务器测试脚本
*/
const WebSocket = require('ws')
const { MESSAGE_TYPES } = require('./server')
// 测试配置
const TEST_CONFIG = {
SERVER_URL: 'ws://localhost:8080',
TEST_USERS: [
{ id: 'test_user_1', name: '测试用户1', role: 'user', phone: '13800000001' },
{ id: 'test_user_2', name: '测试用户2', role: 'user', phone: '13800000002' },
{ id: 'admin_test', name: '测试管理员', role: 'admin', phone: 'admin' }
]
}
// 测试客户端类
class TestClient {
constructor(user) {
this.user = user
this.sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
this.ws = null
this.connected = false
this.messageCount = 0
}
connect() {
return new Promise((resolve, reject) => {
this.ws = new WebSocket(TEST_CONFIG.SERVER_URL)
this.ws.on('open', () => {
console.log(`✅ ${this.user.name} 连接成功`)
this.connected = true
// 发送连接消息
this.sendMessage(MESSAGE_TYPES.USER_CONNECT, {
user: this.user,
sessionId: this.sessionId
})
resolve()
})
this.ws.on('message', (data) => {
this.handleMessage(JSON.parse(data.toString()))
})
this.ws.on('close', () => {
console.log(`❌ ${this.user.name} 连接关闭`)
this.connected = false
})
this.ws.on('error', (error) => {
console.error(`❌ ${this.user.name} 连接错误:`, error.message)
reject(error)
})
})
}
sendMessage(type, payload) {
if (this.connected && this.ws.readyState === WebSocket.OPEN) {
const message = {
type: type,
payload: payload,
metadata: {
sessionId: this.sessionId,
userId: this.user.id,
timestamp: new Date().toISOString()
}
}
this.ws.send(JSON.stringify(message))
}
}
handleMessage(message) {
this.messageCount++
console.log(`📨 ${this.user.name} 收到消息 [${message.type}]:`,
message.payload.message || JSON.stringify(message.payload).substring(0, 100))
}
simulateDataUpdate() {
// 模拟数据更新操作
const operations = [
{
type: MESSAGE_TYPES.DATA_UPDATE,
payload: {
action: 'create',
entity: 'institutions',
data: {
id: `inst_${Date.now()}`,
name: `测试机构_${this.user.name}`,
ownerId: this.user.id
},
version: 1
}
},
{
type: MESSAGE_TYPES.DATA_UPDATE,
payload: {
action: 'image_upload',
entity: 'institutions',
data: {
institutionId: `inst_${Date.now()}`,
imageId: `img_${Date.now()}`,
ownerId: this.user.id
},
version: 1
}
}
]
operations.forEach((op, index) => {
setTimeout(() => {
this.sendMessage(op.type, op.payload)
}, index * 1000)
})
}
startHeartbeat() {
setInterval(() => {
if (this.connected) {
this.sendMessage(MESSAGE_TYPES.HEARTBEAT, {
timestamp: new Date().toISOString()
})
}
}, 30000)
}
disconnect() {
if (this.ws) {
this.ws.close()
}
}
}
// 运行测试
async function runTests() {
console.log('🧪 开始WebSocket服务器测试')
console.log('========================================')
const clients = []
try {
// 创建测试客户端
for (const user of TEST_CONFIG.TEST_USERS) {
const client = new TestClient(user)
clients.push(client)
await client.connect()
client.startHeartbeat()
// 等待一秒再连接下一个客户端
await new Promise(resolve => setTimeout(resolve, 1000))
}
console.log('\n📊 所有客户端连接成功，开始测试数据同步...')
// 测试数据同步
for (let i = 0; i < clients.length; i++) {
const client = clients[i]
console.log(`\n🔄 ${client.user.name} 开始模拟操作...`)
client.simulateDataUpdate()
// 等待2秒再进行下一个用户的操作
await new Promise(resolve => setTimeout(resolve, 2000))
}
// 运行测试10秒
console.log('\n⏱️ 测试运行中，10秒后结束...')
await new Promise(resolve => setTimeout(resolve, 10000))
// 输出测试结果
console.log('\n📈 测试结果统计:')
clients.forEach(client => {
console.log(`- ${client.user.name}: 收到 ${client.messageCount} 条消息`)
})
} catch (error) {
console.error('❌ 测试失败:', error)
} finally {
// 清理连接
console.log('\n🧹 清理测试连接...')
clients.forEach(client => client.disconnect())
setTimeout(() => {
console.log('✅ 测试完成')
process.exit(0)
}, 1000)
}
}
// 检查服务器是否运行
function checkServer() {
return new Promise((resolve, reject) => {
const ws = new WebSocket(TEST_CONFIG.SERVER_URL)
ws.on('open', () => {
ws.close()
resolve(true)
})
ws.on('error', () => {
reject(new Error('服务器未运行'))
})
})
}
// 主函数
async function main() {
try {
console.log('🔍 检查服务器状态...')
await checkServer()
console.log('✅ 服务器运行正常')
await runTests()
} catch (error) {
console.error('❌ 测试启动失败:', error.message)
console.log('💡 请确保服务器已启动: npm start')
process.exit(1)
}
}
// 如果直接运行此文件，执行测试
if (require.main === module) {
main()
}
module.exports = { TestClient, runTests }
src/components/DataSync.vue deleted 100644 → 0
<template>
<div class="data-sync-panel">
<el-card class="sync-card">
<template #header>
<div class="card-header">
<h3>🔄 跨浏览器数据同步</h3>
<p class="subtitle">解决不同浏览器间数据不一致的问题</p>
</div>
</template>
<!-- 浏览器信息 -->
<div class="browser-info">
<h4>📱 当前浏览器信息</h4>
<el-descriptions :column="2" border>
<el-descriptions-item label="浏览器">
{{ browserInfo.name }} {{ browserInfo.version }}
</el-descriptions-item>
<el-descriptions-item label="平台">
{{ browserInfo.platform }}
</el-descriptions-item>
<el-descriptions-item label="语言">
{{ browserInfo.language }}
</el-descriptions-item>
<el-descriptions-item label="存储支持">
<el-tag :type="storageInfo.supported ? 'success' : 'danger'">
{{ storageInfo.supported ? '支持' : '不支持' }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 当前数据统计 -->
<div class="data-stats">
<h4>📊 当前数据统计</h4>
<el-row :gutter="20">
<el-col :span="8">
<el-statistic title="用户数量" :value="dataStats.users" />
</el-col>
<el-col :span="8">
<el-statistic title="机构数量" :value="dataStats.institutions" />
</el-col>
<el-col :span="8">
<el-statistic title="存储使用" :value="dataStats.storageUsed" suffix="KB" />
</el-col>
</el-row>
</div>
<!-- 数据导出 -->
<div class="export-section">
<h4>📤 数据导出</h4>
<p class="section-desc">将当前浏览器的数据导出为文件，可在其他浏览器中导入</p>
<el-button
type="primary"
@click="handleExport"
:loading="exportLoading"
icon="Download"
>
导出数据文件
</el-button>
</div>
<!-- 数据导入 -->
<div class="import-section">
<h4>📥 数据导入</h4>
<p class="section-desc">从其他浏览器导出的数据文件中导入数据</p>
<el-upload
ref="uploadRef"
:auto-upload="false"
:show-file-list="false"
accept=".json"
:on-change="handleFileSelect"
>
<el-button icon="Upload">选择数据文件</el-button>
</el-upload>
<div v-if="selectedFile" class="file-info">
<p>已选择文件: {{ selectedFile.name }}</p>
<el-radio-group v-model="importMode">
<el-radio value="replace">替换模式 (完全替换当前数据)</el-radio>
<el-radio value="merge">合并模式 (保留现有数据，添加新数据)</el-radio>
</el-radio-group>
<div class="import-actions">
<el-button
type="success"
@click="handleImport"
:loading="importLoading"
icon="Check"
>
确认导入
</el-button>
<el-button @click="clearSelection">取消</el-button>
</div>
</div>
</div>
<!-- 快速同步 -->
<div class="quick-sync">
<h4>⚡ 快速同步指南</h4>
<el-steps :active="syncStep" direction="vertical" size="small">
<el-step title="在源浏览器中导出数据" description="点击'导出数据文件'按钮下载数据文件" />
<el-step title="切换到目标浏览器" description="打开需要同步数据的浏览器" />
<el-step title="访问同步页面" description="在目标浏览器中打开此数据同步页面" />
<el-step title="导入数据文件" description="选择刚才下载的数据文件并导入" />
<el-step title="同步完成" description="数据已在两个浏览器间保持一致" />
</el-steps>
</div>
<!-- 注意事项 -->
<div class="notice">
<el-alert
title="重要提示"
type="warning"
:closable="false"
show-icon
>
<ul>
<li>不同浏览器的localStorage是完全隔离的，这是浏览器的安全机制</li>
<li>数据同步需要手动操作，系统无法自动在不同浏览器间同步</li>
<li>导入数据前建议先导出当前数据作为备份</li>
<li>替换模式会完全覆盖当前数据，请谨慎操作</li>
</ul>
</el-alert>
</div>
</el-card>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDataStore } from '@/store/data'
const dataStore = useDataStore()
// 响应式数据
const exportLoading = ref(false)
const importLoading = ref(false)
const selectedFile = ref(null)
const importMode = ref('replace')
const syncStep = ref(0)
const uploadRef = ref(null)
// 浏览器信息
const browserInfo = reactive({})
const storageInfo = reactive({})
// 数据统计
const dataStats = computed(() => ({
users: dataStore.users.length,
institutions: dataStore.institutions.length,
storageUsed: Math.round(dataStore.getStorageUsage() / 1024)
}))
/**
* 处理数据导出
*/
const handleExport = async () => {
try {
exportLoading.value = true
const success = dataStore.downloadData()
if (success) {
ElMessage.success('数据导出成功！文件已下载到您的下载文件夹')
syncStep.value = 1
} else {
ElMessage.error('数据导出失败，请重试')
}
} catch (error) {
console.error('导出失败:', error)
ElMessage.error('导出失败: ' + error.message)
} finally {
exportLoading.value = false
}
}
/**
* 处理文件选择
*/
const handleFileSelect = (file) => {
selectedFile.value = file
syncStep.value = 3
}
/**
* 清除文件选择
*/
const clearSelection = () => {
selectedFile.value = null
if (uploadRef.value) {
uploadRef.value.clearFiles()
}
}
/**
* 处理数据导入
*/
const handleImport = async () => {
if (!selectedFile.value) {
ElMessage.warning('请先选择要导入的数据文件')
return
}
try {
// 确认导入操作
const confirmText = importMode.value === 'replace'
? '替换模式将完全覆盖当前所有数据，此操作不可撤销！是否继续？'
: '合并模式将在现有数据基础上添加新数据，是否继续？'
await ElMessageBox.confirm(confirmText, '确认导入', {
confirmButtonText: '确认导入',
cancelButtonText: '取消',
type: 'warning'
})
importLoading.value = true
const options = {
merge: importMode.value === 'merge'
}
const result = await dataStore.uploadDataFile(selectedFile.value.raw, options)
ElMessage.success(`数据导入成功！导入了${result.imported.users}个用户和${result.imported.institutions}个机构`)
clearSelection()
syncStep.value = 4
// 刷新页面以显示最新数据
setTimeout(() => {
window.location.reload()
}, 2000)
} catch (error) {
console.error('导入失败:', error)
if (error.message.includes('取消')) {
ElMessage.info('已取消导入操作')
} else {
ElMessage.error('导入失败: ' + error.message)
}
} finally {
importLoading.value = false
}
}
/**
* 初始化组件
*/
onMounted(() => {
// 获取浏览器信息
Object.assign(browserInfo, dataStore.getBrowserInfo())
// 获取存储信息
Object.assign(storageInfo, dataStore.checkStorageSupport())
console.log('🔄 数据同步组件已加载')
console.log('浏览器信息:', browserInfo)
console.log('存储信息:', storageInfo)
})
</script>
<style scoped>
.data-sync-panel {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.sync-card {
margin-bottom: 20px;
}
.card-header h3 {
margin: 0 0 5px 0;
color: #409eff;
}
.subtitle {
margin: 0;
color: #909399;
font-size: 14px;
}
.browser-info,
.data-stats,
.export-section,
.import-section,
.quick-sync,
.notice {
margin-bottom: 30px;
}
.browser-info h4,
.data-stats h4,
.export-section h4,
.import-section h4,
.quick-sync h4 {
margin: 0 0 15px 0;
color: #303133;
}
.section-desc {
margin: 0 0 15px 0;
color: #606266;
font-size: 14px;
}
.file-info {
margin-top: 15px;
padding: 15px;
background: #f5f7fa;
border-radius: 4px;
}
.file-info p {
margin: 0 0 10px 0;
font-weight: 500;
}
.import-actions {
margin-top: 15px;
}
.import-actions .el-button {
margin-right: 10px;
}
.notice ul {
margin: 0;
padding-left: 20px;
}
.notice li {
margin-bottom: 5px;
color: #e6a23c;
}
</style>
src/main.js
......@@ -10,8 +10,6 @@ import router from './router'
import './styles/global.css'
import { useDataStore } from './store/data'
import { useAuthStore } from './store/auth'
import { initCompatibilityCheck, loadPolyfills } from './utils/browserCompatibility'
import { initCacheManager } from './utils/cacheManager'
const app = createApp(App)
......@@ -26,9 +24,6 @@ app.use(pinia)
app.use(router)
app.use(ElementPlus)
// 加载polyfills以支持旧浏览器
loadPolyfills()
// 初始化数据和认证状态
const dataStore = useDataStore()
const authStore = useAuthStore()
......@@ -37,33 +32,4 @@ const authStore = useAuthStore()
dataStore.loadFromStorage()
authStore.restoreAuth()
// 执行浏览器兼容性检查
const compatibilityResult = initCompatibilityCheck()
// 如果有严重的兼容性问题，显示警告
if (!compatibilityResult.isCompatible) {
console.warn('⚠️ 浏览器兼容性问题:', compatibilityResult.warnings)
}
// 初始化缓存管理器
const cacheManager = initCacheManager(dataStore)
// 定期检查数据完整性（每5分钟）
setInterval(() => {
try {
dataStore.validateAndFixData()
} catch (error) {
console.error('定期数据检查失败:', error)
}
}, 5 * 60 * 1000)
// 页面卸载前保存数据
window.addEventListener('beforeunload', () => {
try {
dataStore.saveToStorage()
} catch (error) {
console.error('页面卸载前保存数据失败:', error)
}
})
app.mount('#app')
\ No newline at end of file
src/styles/theme.css 0 → 100644
/* Element Plus 主题定制 */
/* 主色调定制 */
:root {
--el-color-primary: #409eff;
--el-color-primary-light-3: #79bbff;
--el-color-primary-light-5: #a0cfff;
--el-color-primary-light-7: #c6e2ff;
--el-color-primary-light-8: #d9ecff;
--el-color-primary-light-9: #ecf5ff;
--el-color-primary-dark-2: #337ecc;
--el-color-success: #67c23a;
--el-color-warning: #e6a23c;
--el-color-danger: #f56c6c;
--el-color-info: #909399;
--el-border-radius-base: 8px;
--el-border-radius-small: 6px;
--el-border-radius-round: 20px;
--el-box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--el-box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}
/* 按钮样式增强 */
.el-button {
border-radius: var(--el-border-radius-base);
font-weight: 500;
transition: all 0.3s ease;
}
.el-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.el-button--primary {
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
border: none;
}
.el-button--primary:hover {
background: linear-gradient(135deg, #36a3f7 0%, #2b8ce6 100%);
}
.el-button--success {
background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
border: none;
}
.el-button--warning {
background: linear-gradient(135deg, #e6a23c 0%, #d4922a 100%);
border: none;
}
.el-button--danger {
background: linear-gradient(135deg, #f56c6c 0%, #f45454 100%);
border: none;
}
/* 卡片样式增强 */
.el-card {
border-radius: var(--el-border-radius-base);
box-shadow: var(--el-box-shadow-light);
transition: all 0.3s ease;
border: 1px solid #f0f0f0;
}
.el-card:hover {
box-shadow: var(--el-box-shadow-base);
transform: translateY(-2px);
}
.el-card__header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #e4e7ed;
font-weight: 600;
}
/* 表格样式增强 */
.el-table {
border-radius: var(--el-border-radius-base);
overflow: hidden;
}
.el-table th.el-table__cell {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #303133;
font-weight: 600;
}
.el-table tr:hover > td {
background-color: #f0f9ff !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
background: #fafbfc;
}
/* 输入框样式增强 */
.el-input__wrapper {
border-radius: var(--el-border-radius-base);
transition: all 0.3s ease;
}
.el-input__wrapper:hover {
box-shadow: 0 0 0 1px #c0c4cc inset;
}
.el-input__wrapper.is-focus {
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
/* 标签样式增强 */
.el-tag {
border-radius: var(--el-border-radius-small);
font-weight: 500;
}
.el-tag--primary {
background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
border-color: #b3d8ff;
color: #409eff;
}
.el-tag--success {
background: linear-gradient(135deg, #f0f9ff 0%, #e1f3d8 100%);
border-color: #b3e19d;
color: #67c23a;
}
.el-tag--warning {
background: linear-gradient(135deg, #fdf6ec 0%, #faecd8 100%);
border-color: #f5dab1;
color: #e6a23c;
}
.el-tag--danger {
background: linear-gradient(135deg, #fef0f0 0%, #fde2e2 100%);
border-color: #fbc4c4;
color: #f56c6c;
}
/* 对话框样式增强 */
.el-dialog {
border-radius: var(--el-border-radius-base);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.el-dialog__header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #e4e7ed;
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
}
.el-dialog__title {
font-weight: 600;
color: #303133;
}
/* 分页样式增强 */
.el-pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.el-pagination .el-pager li {
border-radius: var(--el-border-radius-small);
margin: 0 2px;
transition: all 0.3s ease;
}
.el-pagination .el-pager li:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.el-pagination .el-pager li.is-active {
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
color: white;
}
/* 进度条样式增强 */
.el-progress-bar__outer {
border-radius: var(--el-border-radius-round);
overflow: hidden;
}
.el-progress-bar__inner {
border-radius: var(--el-border-radius-round);
background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
}
/* 消息提示样式增强 */
.el-message {
border-radius: var(--el-border-radius-base);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(10px);
}
.el-message--success {
background: linear-gradient(135deg, rgba(103, 194, 58, 0.9) 0%, rgba(133, 206, 97, 0.9) 100%);
border-color: #67c23a;
}
.el-message--warning {
background: linear-gradient(135deg, rgba(230, 162, 60, 0.9) 0%, rgba(238, 180, 83, 0.9) 100%);
border-color: #e6a23c;
}
.el-message--error {
background: linear-gradient(135deg, rgba(245, 108, 108, 0.9) 0%, rgba(248, 131, 131, 0.9) 100%);
border-color: #f56c6c;
}
.el-message--info {
background: linear-gradient(135deg, rgba(144, 147, 153, 0.9) 0%, rgba(165, 168, 174, 0.9) 100%);
border-color: #909399;
}
/* 标签页样式增强 */
.el-tabs--card > .el-tabs__header .el-tabs__item {
border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
transition: all 0.3s ease;
}
.el-tabs--card > .el-tabs__header .el-tabs__item:hover {
transform: translateY(-2px);
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
color: white;
border-color: #409eff;
}
/* 上传组件样式增强 */
.el-upload {
border-radius: var(--el-border-radius-base);
}
.el-upload-dragger {
border-radius: var(--el-border-radius-base);
transition: all 0.3s ease;
}
.el-upload-dragger:hover {
border-color: #409eff;
background: linear-gradient(135deg, #f0f9ff 0%, #e1f3ff 100%);
transform: translateY(-2px);
}
/* 选择器样式增强 */
.el-select .el-input__wrapper {
transition: all 0.3s ease;
}
.el-select:hover .el-input__wrapper {
box-shadow: 0 0 0 1px #c0c4cc inset;
}
.el-select-dropdown {
border-radius: var(--el-border-radius-base);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.el-select-dropdown__item:hover {
background: linear-gradient(135deg, #f0f9ff 0%, #e1f3ff 100%);
}
.el-select-dropdown__item.is-selected {
background: linear-gradient(135deg, #409eff 0%, #36a3f7 100%);
color: white;
}
/* 响应式优化 */
@media (max-width: 768px) {
.el-dialog {
width: 95% !important;
margin: 5vh auto !important;
}
.el-table {
font-size: 12px;
}
.el-button {
padding: 8px 12px;
font-size: 12px;
}
.el-pagination {
flex-wrap: wrap;
gap: 5px;
}
}
@media (max-width: 480px) {
.el-dialog {
width: 98% !important;
margin: 2vh auto !important;
}
.el-card {
margin: 8px 0;
}
.el-table th,
.el-table td {
padding: 8px 4px;
}
}
src/utils/browserCompatibility.js deleted 100644 → 0
/**
* 浏览器兼容性检测和处理工具
* 确保系统在不同浏览器中的兼容性
*/
/**
* 检测浏览器类型和版本
*/
export const detectBrowser = () => {
const ua = navigator.userAgent
let browserName = 'Unknown'
let browserVersion = 'Unknown'
let isSupported = true
let warnings = []
// Chrome检测
if (ua.includes('Chrome') && !ua.includes('Edg')) {
browserName = 'Chrome'
const match = ua.match(/Chrome\/(\d+)/)
if (match) {
browserVersion = match[1]
if (parseInt(browserVersion) < 60) {
isSupported = false
warnings.push('Chrome版本过低，建议升级到60或更高版本')
}
}
}
// Firefox检测
else if (ua.includes('Firefox')) {
browserName = 'Firefox'
const match = ua.match(/Firefox\/(\d+)/)
if (match) {
browserVersion = match[1]
if (parseInt(browserVersion) < 55) {
isSupported = false
warnings.push('Firefox版本过低，建议升级到55或更高版本')
}
}
}
// Safari检测
else if (ua.includes('Safari') && !ua.includes('Chrome')) {
browserName = 'Safari'
const match = ua.match(/Version\/(\d+)/)
if (match) {
browserVersion = match[1]
if (parseInt(browserVersion) < 11) {
isSupported = false
warnings.push('Safari版本过低，建议升级到11或更高版本')
}
}
}
// Edge检测
else if (ua.includes('Edg')) {
browserName = 'Edge'
const match = ua.match(/Edg\/(\d+)/)
if (match) {
browserVersion = match[1]
if (parseInt(browserVersion) < 79) {
isSupported = false
warnings.push('Edge版本过低，建议升级到79或更高版本')
}
}
}
// IE检测（不支持）
else if (ua.includes('MSIE') || ua.includes('Trident')) {
browserName = 'Internet Explorer'
isSupported = false
warnings.push('不支持Internet Explorer，请使用现代浏览器')
}
return {
name: browserName,
version: browserVersion,
userAgent: ua,
platform: navigator.platform,
language: navigator.language,
isSupported,
warnings
}
}
/**
* 检测必要的API支持
*/
export const checkAPISupport = () => {
const support = {
localStorage: false,
fileReader: false,
promises: false,
fetch: false,
es6: false
}
const warnings = []
// localStorage支持检测
try {
const testKey = 'compatibility_test'
localStorage.setItem(testKey, 'test')
localStorage.removeItem(testKey)
support.localStorage = true
} catch (error) {
warnings.push('localStorage不可用，数据无法持久化保存')
}
// FileReader API支持检测
if (typeof FileReader !== 'undefined') {
support.fileReader = true
} else {
warnings.push('FileReader API不支持，无法处理文件上传')
}
// Promise支持检测
if (typeof Promise !== 'undefined') {
support.promises = true
} else {
warnings.push('Promise不支持，可能影响异步操作')
}
// Fetch API支持检测
if (typeof fetch !== 'undefined') {
support.fetch = true
} else {
warnings.push('Fetch API不支持，网络请求可能受影响')
}
// ES6特性检测
try {
// 测试箭头函数、const/let、模板字符串等
eval('const test = () => `ES6 ${true ? "supported" : "not supported"}`; test()')
support.es6 = true
} catch (error) {
warnings.push('ES6语法不完全支持，可能影响系统功能')
}
return {
support,
warnings,
isFullySupported: Object.values(support).every(Boolean)
}
}
/**
* 获取localStorage使用情况
*/
export const getStorageInfo = () => {
try {
let total = 0
let itemCount = 0
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
total += localStorage[key].length + key.length
itemCount++
}
}
// 估算可用空间（大多数浏览器限制为5-10MB）
const estimatedLimit = 5 * 1024 * 1024 // 5MB
const usagePercent = (total / estimatedLimit * 100).toFixed(1)
return {
used: total,
usedKB: (total / 1024).toFixed(2),
usedMB: (total / 1024 / 1024).toFixed(2),
itemCount,
estimatedLimit,
estimatedLimitMB: (estimatedLimit / 1024 / 1024).toFixed(0),
usagePercent: Math.min(parseFloat(usagePercent), 100),
isNearLimit: parseFloat(usagePercent) > 80
}
} catch (error) {
return {
error: error.message,
available: false
}
}
}
/**
* 性能检测
*/
export const checkPerformance = () => {
const start = performance.now()
// 执行一些计算密集型操作来测试性能
let result = 0
for (let i = 0; i < 100000; i++) {
result += Math.random()
}
const end = performance.now()
const duration = end - start
return {
testDuration: duration.toFixed(2),
performance: duration < 10 ? 'excellent' :
duration < 50 ? 'good' :
duration < 100 ? 'fair' : 'poor',
recommendation: duration > 100 ? '设备性能较低，建议关闭其他应用程序' : null
}
}
/**
* 网络连接检测
*/
export const checkNetworkStatus = () => {
return {
online: navigator.onLine,
connection: navigator.connection ? {
effectiveType: navigator.connection.effectiveType,
downlink: navigator.connection.downlink,
rtt: navigator.connection.rtt,
saveData: navigator.connection.saveData
} : null
}
}
/**
* 综合兼容性检查
*/
export const performCompatibilityCheck = () => {
const browser = detectBrowser()
const apiSupport = checkAPISupport()
const storage = getStorageInfo()
const performance = checkPerformance()
const network = checkNetworkStatus()
const allWarnings = [
...browser.warnings,
...apiSupport.warnings
]
if (storage.isNearLimit) {
allWarnings.push('localStorage使用量接近限制，建议清理数据')
}
if (performance.recommendation) {
allWarnings.push(performance.recommendation)
}
if (!network.online) {
allWarnings.push('网络连接不可用')
}
const overallCompatibility = browser.isSupported && apiSupport.isFullySupported
return {
browser,
apiSupport,
storage,
performance,
network,
warnings: allWarnings,
isCompatible: overallCompatibility,
timestamp: new Date().toISOString()
}
}
/**
* 显示兼容性警告
*/
export const showCompatibilityWarnings = (warnings, messageApi) => {
if (warnings.length === 0) return
const criticalWarnings = warnings.filter(w =>
w.includes('不支持') || w.includes('不可用') || w.includes('版本过低')
)
if (criticalWarnings.length > 0) {
messageApi.error({
message: '浏览器兼容性问题',
description: criticalWarnings.join('；'),
duration: 10000
})
} else {
messageApi.warning({
message: '兼容性提醒',
description: warnings.join('；'),
duration: 8000
})
}
}
/**
* 初始化兼容性检查
*/
export const initCompatibilityCheck = (messageApi = null) => {
const result = performCompatibilityCheck()
console.log('🔍 浏览器兼容性检查结果:', result)
if (messageApi && result.warnings.length > 0) {
showCompatibilityWarnings(result.warnings, messageApi)
}
return result
}
/**
* Polyfill for older browsers
*/
export const loadPolyfills = () => {
// Promise polyfill
if (typeof Promise === 'undefined') {
console.warn('Loading Promise polyfill...')
// 这里可以动态加载Promise polyfill
}
// Fetch polyfill
if (typeof fetch === 'undefined') {
console.warn('Loading Fetch polyfill...')
// 这里可以动态加载Fetch polyfill
}
// Object.assign polyfill
if (typeof Object.assign !== 'function') {
Object.assign = function(target) {
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object')
}
const to = Object(target)
for (let index = 1; index < arguments.length; index++) {
const nextSource = arguments[index]
if (nextSource != null) {
for (const nextKey in nextSource) {
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey]
}
}
}
}
return to
}
}
}
src/utils/cacheManager.js deleted 100644 → 0
/**
* 缓存管理工具
* 确保数据在不同浏览器中的一致性和及时更新
*/
/**
* 缓存版本管理
*/
const CACHE_VERSION = '1.0.0'
const CACHE_KEYS = {
VERSION: 'cache_version',
LAST_UPDATE: 'last_update_time',
DATA_HASH: 'data_hash'
}
/**
* 生成数据hash用于检测变化
*/
export const generateDataHash = (data) => {
try {
const str = JSON.stringify(data)
let hash = 0
for (let i = 0; i < str.length; i++) {
const char = str.charCodeAt(i)
hash = ((hash << 5) - hash) + char
hash = hash & hash // 转换为32位整数
}
return hash.toString(16)
} catch (error) {
console.error('生成数据hash失败:', error)
return Date.now().toString()
}
}
/**
* 检查缓存版本
*/
export const checkCacheVersion = () => {
try {
const storedVersion = localStorage.getItem(CACHE_KEYS.VERSION)
const isVersionMatch = storedVersion === CACHE_VERSION
if (!isVersionMatch) {
console.log('🔄 检测到缓存版本变化，需要更新缓存')
return false
}
return true
} catch (error) {
console.error('检查缓存版本失败:', error)
return false
}
}
/**
* 更新缓存版本
*/
export const updateCacheVersion = () => {
try {
localStorage.setItem(CACHE_KEYS.VERSION, CACHE_VERSION)
localStorage.setItem(CACHE_KEYS.LAST_UPDATE, new Date().toISOString())
console.log('✅ 缓存版本已更新')
} catch (error) {
console.error('更新缓存版本失败:', error)
}
}
/**
* 检查数据是否有变化
*/
export const checkDataChanges = (currentData) => {
try {
const currentHash = generateDataHash(currentData)
const storedHash = localStorage.getItem(CACHE_KEYS.DATA_HASH)
const hasChanges = currentHash !== storedHash
if (hasChanges) {
console.log('🔄 检测到数据变化')
localStorage.setItem(CACHE_KEYS.DATA_HASH, currentHash)
localStorage.setItem(CACHE_KEYS.LAST_UPDATE, new Date().toISOString())
}
return {
hasChanges,
currentHash,
storedHash,
lastUpdate: localStorage.getItem(CACHE_KEYS.LAST_UPDATE)
}
} catch (error) {
console.error('检查数据变化失败:', error)
return { hasChanges: true, error: error.message }
}
}
/**
* 清除浏览器缓存
*/
export const clearBrowserCache = () => {
try {
// 清除localStorage中的缓存标记
Object.values(CACHE_KEYS).forEach(key => {
localStorage.removeItem(key)
})
// 尝试清除其他缓存
if ('caches' in window) {
caches.keys().then(names => {
names.forEach(name => {
caches.delete(name)
})
})
}
console.log('🧹 浏览器缓存已清除')
return true
} catch (error) {
console.error('清除浏览器缓存失败:', error)
return false
}
}
/**
* 强制刷新页面数据
*/
export const forceRefreshData = () => {
try {
// 清除缓存标记
clearBrowserCache()
// 重新加载页面
window.location.reload(true)
} catch (error) {
console.error('强制刷新失败:', error)
// 降级方案：普通刷新
window.location.reload()
}
}
/**
* 添加缓存控制头
*/
export const addCacheControlHeaders = () => {
// 为动态内容添加no-cache头
const metaTag = document.createElement('meta')
metaTag.httpEquiv = 'Cache-Control'
metaTag.content = 'no-cache, no-store, must-revalidate'
document.head.appendChild(metaTag)
const pragmaTag = document.createElement('meta')
pragmaTag.httpEquiv = 'Pragma'
pragmaTag.content = 'no-cache'
document.head.appendChild(pragmaTag)
const expiresTag = document.createElement('meta')
expiresTag.httpEquiv = 'Expires'
expiresTag.content = '0'
document.head.appendChild(expiresTag)
}
/**
* 检测浏览器缓存状态
*/
export const detectCacheStatus = () => {
const performance = window.performance
const navigation = performance.getEntriesByType('navigation')[0]
return {
loadType: navigation ? navigation.type : 'unknown',
fromCache: navigation ? navigation.transferSize === 0 : false,
loadTime: navigation ? navigation.loadEventEnd - navigation.loadEventStart : 0,
domContentLoaded: navigation ? navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart : 0
}
}
/**
* 数据同步状态管理
*/
export class DataSyncManager {
constructor() {
this.syncKey = 'data_sync_status'
this.lastSyncTime = null
this.syncInterval = 30000 // 30秒检查一次
this.syncTimer = null
}
/**
* 开始同步监控
*/
startSyncMonitoring(dataStore) {
this.stopSyncMonitoring() // 先停止之前的监控
this.syncTimer = setInterval(() => {
this.checkDataSync(dataStore)
}, this.syncInterval)
console.log('🔄 数据同步监控已启动')
}
/**
* 停止同步监控
*/
stopSyncMonitoring() {
if (this.syncTimer) {
clearInterval(this.syncTimer)
this.syncTimer = null
console.log('⏹️ 数据同步监控已停止')
}
}
/**
* 检查数据同步状态
*/
checkDataSync(dataStore) {
try {
const currentData = {
users: dataStore.users,
institutions: dataStore.institutions,
systemConfig: dataStore.systemConfig
}
const changeResult = checkDataChanges(currentData)
if (changeResult.hasChanges) {
console.log('📊 检测到数据变化，更新同步状态')
this.updateSyncStatus()
// 触发数据保存
dataStore.saveToStorage()
}
} catch (error) {
console.error('数据同步检查失败:', error)
}
}
/**
* 更新同步状态
*/
updateSyncStatus() {
const syncStatus = {
lastSync: new Date().toISOString(),
browser: navigator.userAgent,
version: CACHE_VERSION
}
try {
localStorage.setItem(this.syncKey, JSON.stringify(syncStatus))
this.lastSyncTime = syncStatus.lastSync
} catch (error) {
console.error('更新同步状态失败:', error)
}
}
/**
* 获取同步状态
*/
getSyncStatus() {
try {
const stored = localStorage.getItem(this.syncKey)
return stored ? JSON.parse(stored) : null
} catch (error) {
console.error('获取同步状态失败:', error)
return null
}
}
/**
* 检查是否需要同步
*/
needsSync() {
const status = this.getSyncStatus()
if (!status) return true
const lastSync = new Date(status.lastSync)
const now = new Date()
const timeDiff = now - lastSync
// 如果超过5分钟没有同步，认为需要同步
return timeDiff > 5 * 60 * 1000
}
}
/**
* 全局缓存管理器实例
*/
export const globalSyncManager = new DataSyncManager()
/**
* 初始化缓存管理
*/
export const initCacheManager = (dataStore) => {
console.log('🚀 初始化缓存管理器')
// 检查缓存版本
if (!checkCacheVersion()) {
updateCacheVersion()
}
// 添加缓存控制头
addCacheControlHeaders()
// 检测缓存状态
const cacheStatus = detectCacheStatus()
console.log('📊 缓存状态:', cacheStatus)
// 启动数据同步监控
globalSyncManager.startSyncMonitoring(dataStore)
// 页面卸载时停止监控
window.addEventListener('beforeunload', () => {
globalSyncManager.stopSyncMonitoring()
})
return {
cacheStatus,
syncManager: globalSyncManager
}
}
/**
* 获取缓存信息
*/
export const getCacheInfo = () => {
return {
version: CACHE_VERSION,
lastUpdate: localStorage.getItem(CACHE_KEYS.LAST_UPDATE),
dataHash: localStorage.getItem(CACHE_KEYS.DATA_HASH),
syncStatus: globalSyncManager.getSyncStatus(),
needsSync: globalSyncManager.needsSync()
}
}
src/utils/realtimeClient.js deleted 100644 → 0
/**
* 实时同步客户端
* 处理WebSocket连接、消息传输、自动重连等功能
*/
import { useRealtimeStore } from '@/store/realtime'
import { useDataStore } from '@/store/data'
import { useAuthStore } from '@/store/auth'
/**
* 实时同步客户端类
*/
export class RealtimeClient {
constructor() {
this.realtimeStore = null
this.dataStore = null
this.authStore = null
this.isInitialized = false
this.eventHandlers = new Map()
}
/**
* 初始化客户端
*/
async initialize() {
if (this.isInitialized) return
// 获取store实例
this.realtimeStore = useRealtimeStore()
this.dataStore = useDataStore()
this.authStore = useAuthStore()
// 设置事件监听器
this.setupEventListeners()
// 监听实时更新事件
this.setupRealtimeUpdateListener()
this.isInitialized = true
console.log('✅ 实时同步客户端已初始化')
}
/**
* 设置事件监听器
*/
setupEventListeners() {
// 监听数据更新事件
this.realtimeStore.addEventListener('data_update', (payload) => {
this.dataStore.handleRealtimeUpdate(payload)
})
// 监听积分重新计算事件
this.realtimeStore.addEventListener('score_recalculate', (payload) => {
this.handleScoreRecalculate(payload)
})
// 监听连接状态变化
this.realtimeStore.$subscribe((mutation, state) => {
if (mutation.storeId === 'realtime') {
this.handleConnectionStateChange(state)
}
})
}
/**
* 设置实时更新监听器
*/
setupRealtimeUpdateListener() {
// 监听来自数据store的实时更新事件
window.addEventListener('realtime-update', (event) => {
const operation = event.detail
this.sendDataUpdate(operation)
})
}
/**
* 启用实时模式
*/
async enableRealtimeMode() {
if (!this.isInitialized) {
await this.initialize()
}
if (!this.authStore.isAuthenticated) {
throw new Error('用户未登录，无法启用实时模式')
}
try {
// 启用数据store的实时模式
this.dataStore.enableRealtimeMode()
// 启用实时store的实时模式
await this.realtimeStore.enableRealtimeMode(this.authStore.currentUser)
console.log('✅ 实时模式已启用')
return true
} catch (error) {
console.error('❌ 启用实时模式失败:', error)
this.dataStore.disableRealtimeMode()
throw error
}
}
/**
* 禁用实时模式
*/
disableRealtimeMode() {
this.dataStore.disableRealtimeMode()
this.realtimeStore.disableRealtimeMode()
console.log('⏹️ 实时模式已禁用')
}
/**
* 发送数据更新
*/
sendDataUpdate(operation) {
if (!this.realtimeStore.isConnected) {
console.warn('⚠️ 连接未建立，操作已加入队列')
return false
}
return this.realtimeStore.sendDataUpdate(
operation.action,
operation.entity,
operation.data
)
}
/**
* 处理积分重新计算
*/
handleScoreRecalculate(payload) {
const { userId } = payload
// 如果是当前用户，触发界面更新
if (userId === this.authStore.currentUser?.id) {
console.log('🔄 重新计算当前用户积分')
// 触发积分更新事件
const event = new CustomEvent('score-updated', {
detail: {
userId: userId,
timestamp: new Date().toISOString()
}
})
window.dispatchEvent(event)
}
}
/**
* 处理连接状态变化
*/
handleConnectionStateChange(state) {
const { connectionStatus, isConnected } = state
console.log('🔄 连接状态变化:', connectionStatus)
// 触发连接状态变化事件
const event = new CustomEvent('connection-status-changed', {
detail: {
status: connectionStatus,
isConnected: isConnected,
timestamp: new Date().toISOString()
}
})
window.dispatchEvent(event)
}
/**
* 手动同步数据
*/
async syncData() {
if (!this.realtimeStore.isConnected) {
throw new Error('连接未建立，无法同步数据')
}
return this.realtimeStore.requestSync()
}
/**
* 获取连接状态
*/
getConnectionStatus() {
return {
isEnabled: this.realtimeStore.isEnabled,
isConnected: this.realtimeStore.isConnected,
status: this.realtimeStore.connectionStatus,
onlineUsers: this.realtimeStore.onlineUserCount,
lastSync: this.dataStore.lastSyncTime
}
}
/**
* 获取统计信息
*/
getStatistics() {
return {
realtime: this.realtimeStore.statistics,
data: this.dataStore.getRealtimeStats,
connection: this.getConnectionStatus()
}
}
/**
* 添加事件监听器
*/
addEventListener(event, handler) {
if (!this.eventHandlers.has(event)) {
this.eventHandlers.set(event, [])
}
this.eventHandlers.get(event).push(handler)
}
/**
* 移除事件监听器
*/
removeEventListener(event, handler) {
if (this.eventHandlers.has(event)) {
const handlers = this.eventHandlers.get(event)
const index = handlers.indexOf(handler)
if (index > -1) {
handlers.splice(index, 1)
}
}
}
/**
* 触发事件
*/
triggerEvent(event, data) {
if (this.eventHandlers.has(event)) {
this.eventHandlers.get(event).forEach(handler => {
try {
handler(data)
} catch (error) {
console.error('事件处理器错误:', error)
}
})
}
}
/**
* 销毁客户端
*/
destroy() {
this.disableRealtimeMode()
this.eventHandlers.clear()
// 移除事件监听器
window.removeEventListener('realtime-update', this.setupRealtimeUpdateListener)
this.isInitialized = false
console.log('🗑️ 实时同步客户端已销毁')
}
}
/**
* 全局实时客户端实例
*/
let globalRealtimeClient = null
/**
* 获取全局实时客户端实例
*/
export const getRealtimeClient = () => {
if (!globalRealtimeClient) {
globalRealtimeClient = new RealtimeClient()
}
return globalRealtimeClient
}
/**
* 初始化实时同步
*/
export const initRealtimeSync = async () => {
const client = getRealtimeClient()
await client.initialize()
return client
}
/**
* 启用实时模式的便捷方法
*/
export const enableRealtime = async () => {
const client = getRealtimeClient()
return await client.enableRealtimeMode()
}
/**
* 禁用实时模式的便捷方法
*/
export const disableRealtime = () => {
const client = getRealtimeClient()
client.disableRealtimeMode()
}
/**
* 检查实时模式状态
*/
export const isRealtimeEnabled = () => {
if (!globalRealtimeClient) return false
return globalRealtimeClient.getConnectionStatus().isEnabled
}
/**
* 获取实时连接状态
*/
export const getRealtimeStatus = () => {
if (!globalRealtimeClient) {
return {
isEnabled: false,
isConnected: false,
status: 'not_initialized'
}
}
return globalRealtimeClient.getConnectionStatus()
}
/**
* 实时模式切换工具
*/
export const toggleRealtimeMode = async () => {
const client = getRealtimeClient()
const status = client.getConnectionStatus()
if (status.isEnabled) {
client.disableRealtimeMode()
return false
} else {
await client.enableRealtimeMode()
return true
}
}
// 页面卸载时清理资源
window.addEventListener('beforeunload', () => {
if (globalRealtimeClient) {
globalRealtimeClient.destroy()
}
})
src/views/admin/AdminPanel.vue
......@@ -5,7 +5,7 @@
<div class="container">
<div class="header-content">
<div class="admin-info">
<h2>管理员控制面板1</h2>
<h2>管理员控制面板</h2>
<p>系统数据管理与统计</p>
</div>
<div class="header-actions">
......@@ -354,33 +354,6 @@
<p class="section-description">系统数据的备份、恢复和重置功能</p>
</div>
<!-- 实时同步模式切换 -->
<div class="realtime-section">
<ModeToggle />
</div>
<!-- 跨浏览器数据同步 -->
<div class="sync-section">
<div class="sync-header">
<h4>🔄 跨浏览器数据同步</h4>
<p>解决不同浏览器间数据不一致的问题</p>
</div>
<el-alert
title="数据不一致原因"
type="info"
:closable="false"
show-icon
>
不同浏览器的localStorage是完全隔离的，这是浏览器的安全机制。如果您在Chrome中添加了数据，在Firefox中是看不到的。
</el-alert>
<div class="sync-actions">
<el-button type="primary" @click="showDataSyncDialog">
<el-icon><Refresh /></el-icon>
打开数据同步工具
</el-button>
</div>
</div>
<el-row :gutter="16">
<!-- 数据备份 -->
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
......@@ -480,29 +453,6 @@
</el-row>
</div>
</el-tab-pane>
<!-- 实时监控 -->
<el-tab-pane label="实时监控" name="realtime" v-if="realtimeStore.isEnabled">
<div class="tab-content">
<div class="section-header">
<h3>实时监控</h3>
<p class="section-description">实时用户活动和系统状态监控</p>
<RealtimeStatus />
</div>
<el-row :gutter="16">
<!-- 在线用户 -->
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
<OnlineUsers />
</el-col>
<!-- 实时活动日志 -->
<el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
<RealtimeActivityLog />
</el-col>
</el-row>
</div>
</el-tab-pane>
</el-tabs>
</div>
......@@ -826,17 +776,6 @@
/>
</div>
</el-dialog>
<!-- 数据同步对话框 -->
<el-dialog
v-model="dataSyncDialogVisible"
title="跨浏览器数据同步"
width="90%"
:close-on-click-modal="false"
top="5vh"
>
<DataSync />
</el-dialog>
</div>
</template>
......@@ -863,12 +802,6 @@ import {
} from '@element-plus/icons-vue'
import { useAuthStore } from '@/store/auth'
import { useDataStore } from '@/store/data'
import { useRealtimeStore } from '@/store/realtime'
import DataSync from '@/components/DataSync.vue'
import ModeToggle from '@/components/ModeToggle.vue'
import RealtimeStatus from '@/components/RealtimeStatus.vue'
import OnlineUsers from '@/components/OnlineUsers.vue'
import RealtimeActivityLog from '@/components/RealtimeActivityLog.vue'
/**
* 管理员控制面板组件
......@@ -878,7 +811,6 @@ import RealtimeActivityLog from '@/components/RealtimeActivityLog.vue'
const router = useRouter()
const authStore = useAuthStore()
const dataStore = useDataStore()
const realtimeStore = useRealtimeStore()
// 当前激活的标签页
const activeTab = ref('statistics')
......@@ -928,9 +860,6 @@ const importLoading = ref(false)
const resetLoading = ref(false)
const selectedFile = ref(null)
// 数据同步相关
const dataSyncDialogVisible = ref(false)
// 表单引用
const addUserFormRef = ref()
const addInstitutionFormRef = ref()
......@@ -1523,14 +1452,11 @@ const submitAddInstitution = async () => {
try {
await addInstitutionFormRef.value.validate()
const newInstitution = dataStore.addInstitution({
dataStore.addInstitution({
institutionId: addInstitutionForm.institutionId.trim(),
name: addInstitutionForm.name.trim(),
ownerId: addInstitutionForm.ownerId
})
console.log('机构添加成功:', newInstitution)
forceRefresh()
ElMessage.success('机构添加成功！')
addInstitutionDialogVisible.value = false
} catch (error) {
......@@ -2004,13 +1930,14 @@ const processExcelFile = (file) => {
/**
* 监听用户数量变化，自动调整布局
*/
watch([rankedUsers, userUploadStats], () => {
// 当用户数量变化时，强制重新渲染以应用新的布局
nextTick(() => {
// 触发表格重新计算高度
refreshCounter.value++
})
}, { deep: true })
// 注释掉可能导致无限循环的watch
// watch([rankedUsers, userUploadStats], () => {
// // 当用户数量变化时，强制重新渲染以应用新的布局
// nextTick(() => {
// // 触发表格重新计算高度
// refreshCounter.value++
// })
// }, { deep: true })
/**
* 数据管理方法
......@@ -2159,13 +2086,6 @@ const showResetConfirm = async () => {
}
/**
* 显示数据同步对话框
*/
const showDataSyncDialog = () => {
dataSyncDialogVisible.value = true
}
/**
* 组件挂载时初始化
*/
onMounted(() => {
......@@ -3396,60 +3316,4 @@ const iconComponents = {
font-size: 12px;
}
}
/* 数据同步样式 */
.sync-section {
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
color: white;
}
.sync-header h4 {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 600;
}
.sync-header p {
margin: 0 0 15px 0;
opacity: 0.9;
font-size: 14px;
}
.sync-section .el-alert {
margin-bottom: 15px;
}
.sync-actions {
margin-top: 15px;
}
.sync-actions .el-button {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
}
.sync-actions .el-button:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
}
/* 实时监控样式 */
.realtime-section {
margin-bottom: 30px;
}
.realtime-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.realtime-section .section-header h3 {
margin: 0;
}
</style>
\ No newline at end of file
start-dev.bat 0 → 100644
@echo off
title Performance Score System - Development Server
echo.
echo ========================================
echo Performance Score System
echo Starting Development Server...
echo ========================================
echo.
echo [1/3] Checking Node.js...
node --version >nul 2>&1
if errorlevel 1 (
echo ERROR: Node.js not found
echo Please install Node.js from https://nodejs.org/
pause
exit /b 1
) else (
echo OK: Node.js is installed
)
echo [2/3] Installing dependencies...
if not exist "node_modules" (
echo Installing dependencies...
npm install
if errorlevel 1 (
echo ERROR: Failed to install dependencies
pause
exit /b 1
)
) else (
echo OK: Dependencies already installed
)
echo [3/3] Starting development server...
echo.
echo Server will start at: http://localhost:3000
echo.
echo Press Ctrl+C to stop the server
echo.
npx vite --port 3000 --host
start-websocket.bat deleted 100644 → 0
@echo off
chcp 65001 >nul
echo ========================================
echo 启动WebSocket实时同步服务器
echo ========================================
echo.
cd server
echo 🚀 正在启动WebSocket服务器...
echo 📡 端口: 8082
echo 🏥 健康检查端口: 8083
echo.
node server.js
pause
test-features.html 0 → 100644
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绩效计分系统功能测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.test-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
}
.test-section h3 {
color: #333;
margin-top: 0;
}
.status {
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
}
.status.pass {
background-color: #d4edda;
color: #155724;
}
.status.fail {
background-color: #f8d7da;
color: #721c24;
}
.status.pending {
background-color: #fff3cd;
color: #856404;
}
.test-steps {
margin: 10px 0;
}
.test-steps ol {
margin: 0;
padding-left: 20px;
}
.test-steps li {
margin: 5px 0;
}
.feature-link {
display: inline-block;
margin: 10px 0;
padding: 8px 16px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
}
.feature-link:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>绩效计分系统功能测试清单</h1>
<p>请按照以下步骤测试系统的各项功能是否正常工作。</p>
<a href="http://localhost:4173" class="feature-link" target="_blank">打开绩效计分系统</a>
<div class="test-section">
<h3>1. 登录页面优化 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>确认登录页面不显示测试账号信息</p>
<ol>
<li>访问 http://localhost:4173</li>
<li>检查登录页面是否只显示手机号和密码输入框</li>
<li>确认页面上没有显示任何测试账号信息</li>
<li>尝试使用以下账号登录：
<ul>
<li>管理员：admin / admin123</li>
<li>用户1：13800138001 / 123456</li>
<li>用户2：13800138002 / 123456</li>
</ul>
</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>2. 多用户多浏览器数据同步 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证多浏览器间的数据实时同步</p>
<ol>
<li>在Chrome浏览器中登录系统</li>
<li>在Firefox或Edge浏览器中同时登录系统</li>
<li>在一个浏览器中添加机构或上传图片</li>
<li>检查另一个浏览器是否自动更新数据</li>
<li>在管理员面板查看同步状态组件</li>
<li>测试同步开关的启用/禁用功能</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>3. 按月统计绩效数据 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证月份数据管理功能</p>
<ol>
<li>登录用户面板，查看是否有月份选择器</li>
<li>检查当前月份是否正确显示</li>
<li>上传一些图片，确认数据记录到当前月份</li>
<li>切换到不同月份，验证数据隔离</li>
<li>在管理员面板创建新月份</li>
<li>验证月份统计信息是否正确显示</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>4. 历史数据管理 <span class="status pending">待测试</span></h3>
<div class="test-steps">
<p><strong>测试目标：</strong>验证历史数据筛选和管理功能</p>
<ol>
<li>以管理员身份登录</li>
<li>进入"历史数据"标签页</li>
<li>查看历史月份数据列表</li>
<li>测试年份和状态筛选功能</li>
<li>测试数据导出功能</li>
<li>测试数据归档功能</li>
<li>测试数据压缩功能</li>
<li>查看月份详细数据</li>
</ol>
</div>
</div>
<div class="test-section">
<h3>测试结果记录</h3>
<div class="test-steps">
<p>请在测试完成后记录结果：</p>
<ul>
<li>✅ 功能正常工作</li>
<li>❌ 功能存在问题</li>
<li>⚠️ 功能部分工作</li>
</ul>
<h4>发现的问题：</h4>
<textarea style="width: 100%; height: 100px; margin: 10px 0;" placeholder="请在此记录测试过程中发现的问题..."></textarea>
<h4>改进建议：</h4>
<textarea style="width: 100%; height: 100px; margin: 10px 0;" placeholder="请在此记录改进建议..."></textarea>
</div>
</div>
<div class="test-section">
<h3>技术验证点</h3>
<div class="test-steps">
<p><strong>开发者工具检查：</strong></p>
<ol>
<li>打开浏览器开发者工具 (F12)</li>
<li>查看Console是否有错误信息</li>
<li>检查Network标签页的请求状态</li>
<li>查看Application > Local Storage中的数据结构</li>
<li>验证月份数据是否正确存储</li>
<li>检查同步服务的日志输出</li>
</ol>
</div>
</div>
<script>
// 简单的测试状态管理
function updateTestStatus(sectionIndex, status) {
const sections = document.querySelectorAll('.test-section');
const statusElement = sections[sectionIndex].querySelector('.status');
statusElement.className = `status ${status}`;
statusElement.textContent = status === 'pass' ? '通过' : status === 'fail' ? '失败' : '待测试';
}
// 添加点击事件来更新状态
document.querySelectorAll('.test-section').forEach((section, index) => {
const title = section.querySelector('h3');
title.style.cursor = 'pointer';
title.addEventListener('click', () => {
const currentStatus = section.querySelector('.status').className;
let newStatus = 'pending';
if (currentStatus.includes('pending')) {
newStatus = 'pass';
} else if (currentStatus.includes('pass')) {
newStatus = 'fail';
} else {
newStatus = 'pending';
}
updateTestStatus(index, newStatus);
});
});
console.log('绩效计分系统功能测试页面已加载');
console.log('点击测试项目标题可以切换测试状态');
</script>
</body>
</html>
test-fixes.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据持久化修复测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.test-section {
background: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
.success {
background: #d4edda;
color: #155724;
}
.warning {
background: #fff3cd;
color: #856404;
}
.error {
background: #f8d7da;
color: #721c24;
}
button {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #0056b3;
}
.log {
background: #f8f9fa;
border: 1px solid #dee2e6;
padding: 10px;
margin: 10px 0;
border-radius: 3px;
font-family: monospace;
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h1>绩效计分系统 - 数据持久化修复测试</h1>
<div class="test-section success">
<h2>✅ 修复内容总结</h2>
<ul>
<li><strong>图片上传功能修复</strong>：增强了错误处理和调试日志，确保图片正确保存到localStorage</li>
<li><strong>数据持久化增强</strong>：改进了数据加载和保存机制，添加了数据完整性检查</li>
<li><strong>功能一致性保证</strong>：确保新增机构和用户具有与默认机构完全相同的功能</li>
<li><strong>强制刷新机制</strong>：添加了界面强制刷新功能，确保数据变更立即反映</li>
<li><strong>数据验证和修复</strong>：实现了自动数据完整性检查和修复机制</li>
</ul>
</div>
<div class="test-section">
<h2>🔧 主要修复点</h2>
<h3>1. 图片上传逻辑增强</h3>
<ul>
<li>添加了详细的调试日志，便于追踪上传过程</li>
<li>增强了错误处理，包括回滚机制</li>
<li>添加了唯一ID生成，防止ID冲突</li>
<li>实现了上传成功后的强制界面刷新</li>
</ul>
<h3>2. 数据存储机制改进</h3>
<ul>
<li>增强了localStorage保存验证</li>
<li>添加了数据大小检查和警告</li>
<li>实现了分步保存和验证机制</li>
<li>添加了损坏数据的备份功能</li>
</ul>
<h3>3. 数据完整性检查</h3>
<ul>
<li>自动检查和修复缺失的ID</li>
<li>验证数据结构完整性</li>
<li>修复图片数据的时间戳</li>
<li>定期执行数据检查（每5分钟）</li>
</ul>
<h3>4. 界面响应性改进</h3>
<ul>
<li>添加了强制刷新机制</li>
<li>确保数据变更立即反映在界面上</li>
<li>优化了计算属性的响应性</li>
</ul>
</div>
<div class="test-section">
<h2>🧪 测试步骤</h2>
<ol>
<li><strong>登录测试</strong>：使用admin/admin123登录管理员面板</li>
<li><strong>添加机构</strong>：在管理员面板中添加新机构</li>
<li><strong>添加用户</strong>：创建新用户并分配机构</li>
<li><strong>图片上传</strong>：在用户面板中上传图片到新机构</li>
<li><strong>数据持久化</strong>：刷新页面验证数据是否保持</li>
<li><strong>功能验证</strong>：检查得分计算、统计等功能</li>
</ol>
</div>
<div class="test-section">
<h2>📊 localStorage 数据检查</h2>
<button onclick="checkLocalStorage()">检查当前数据</button>
<button onclick="clearLocalStorage()">清空数据</button>
<div id="storageInfo" class="log"></div>
</div>
<div class="test-section warning">
<h2>⚠️ 注意事项</h2>
<ul>
<li>确保浏览器支持localStorage且未被禁用</li>
<li>注意localStorage的5MB大小限制</li>
<li>图片会被压缩存储以节省空间</li>
<li>定期检查浏览器控制台的调试信息</li>
</ul>
</div>
<script>
function checkLocalStorage() {
const storageInfo = document.getElementById('storageInfo');
let info = '=== localStorage 数据检查 ===\n\n';
const keys = ['score_system_users', 'score_system_institutions', 'score_system_config'];
let totalSize = 0;
keys.forEach(key => {
const data = localStorage.getItem(key);
if (data) {
const size = data.length;
totalSize += size;
info += `${key}:\n`;
info += ` 大小: ${(size / 1024).toFixed(2)} KB\n`;
try {
const parsed = JSON.parse(data);
if (key === 'score_system_users') {
info += ` 用户数量: ${parsed.length}\n`;
} else if (key === 'score_system_institutions') {
info += ` 机构数量: ${parsed.length}\n`;
const totalImages = parsed.reduce((sum, inst) => sum + (inst.images?.length || 0), 0);
info += ` 总图片数: ${totalImages}\n`;
} else if (key === 'score_system_config') {
info += ` 已初始化: ${parsed.initialized ? '是' : '否'}\n`;
info += ` 版本: ${parsed.version || '未知'}\n`;
}
} catch (e) {
info += ` 解析错误: ${e.message}\n`;
}
info += '\n';
} else {
info += `${key}: 不存在\n\n`;
}
});
info += `总大小: ${(totalSize / 1024).toFixed(2)} KB\n`;
info += `剩余空间: 约 ${(5120 - totalSize / 1024).toFixed(2)} KB`;
storageInfo.textContent = info;
}
function clearLocalStorage() {
if (confirm('确定要清空所有数据吗？这将删除所有用户、机构和图片数据！')) {
localStorage.clear();
document.getElementById('storageInfo').textContent = '所有数据已清空';
}
}
// 页面加载时自动检查
window.onload = function() {
checkLocalStorage();
};
</script>
</body>
</html>
test-server.js 0 → 100644
const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer((req, res) => {
let filePath = path.join(__dirname, 'dist', req.url === '/' ? 'index.html' : req.url);
const extname = path.extname(filePath);
let contentType = 'text/html';
switch (extname) {
case '.js':
contentType = 'text/javascript';
break;
case '.css':
contentType = 'text/css';
break;
case '.json':
contentType = 'application/json';
break;
case '.png':
contentType = 'image/png';
break;
case '.jpg':
contentType = 'image/jpg';
break;
}
fs.readFile(filePath, (error, content) => {
if (error) {
if (error.code === 'ENOENT') {
res.writeHead(404);
res.end('File not found');
} else {
res.writeHead(500);
res.end('Server error');
}
} else {
res.writeHead(200, { 'Content-Type': contentType });
res.end(content, 'utf-8');
}
});
});
const PORT = 8080;
server.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}/`);
});
verify-features.js 0 → 100644
// 绩效计分系统功能验证脚本
// 在浏览器控制台中运行此脚本来验证功能
console.log('🔍 开始验证绩效计分系统功能...');
// 验证函数
const verifyFeatures = () => {
const results = {
loginPage: false,
dataSync: false,
monthlyData: false,
historyData: false
};
try {
// 1. 验证登录页面
console.log('📝 验证登录页面...');
const loginForm = document.querySelector('.login-card');
const demoAccounts = document.querySelector('.demo-accounts');
if (loginForm && !demoAccounts) {
results.loginPage = true;
console.log('✅ 登录页面验证通过：没有显示测试账号');
} else {
console.log('❌ 登录页面验证失败：仍显示测试账号或页面结构异常');
}
// 2. 验证数据同步功能
console.log('🔄 验证数据同步功能...');
if (window.localStorage) {
// 检查同步相关的localStorage键
const syncKeys = Object.keys(localStorage).filter(key =>
key.includes('sync') || key.includes('score_system')
);
if (syncKeys.length > 0) {
results.dataSync = true;
console.log('✅ 数据同步验证通过：发现同步相关数据');
console.log('📊 同步数据键:', syncKeys);
} else {
console.log('❌ 数据同步验证失败：未发现同步数据');
}
}
// 3. 验证月份数据功能
console.log('📅 验证月份数据功能...');
const monthSelector = document.querySelector('.month-selector');
const monthlyKeys = Object.keys(localStorage).filter(key =>
key.includes('month_') || key.includes('available_months')
);
if (monthSelector || monthlyKeys.length > 0) {
results.monthlyData = true;
console.log('✅ 月份数据验证通过：发现月份管理组件或数据');
console.log('📊 月份数据键:', monthlyKeys);
} else {
console.log('❌ 月份数据验证失败：未发现月份管理功能');
}
// 4. 验证历史数据功能
console.log('📚 验证历史数据功能...');
const historyManager = document.querySelector('.history-data-manager');
const historyTab = document.querySelector('[name="historyData"]');
if (historyManager || historyTab) {
results.historyData = true;
console.log('✅ 历史数据验证通过：发现历史数据管理组件');
} else {
console.log('❌ 历史数据验证失败：未发现历史数据管理功能');
}
} catch (error) {
console.error('❌ 验证过程中发生错误:', error);
}
// 输出验证结果
console.log('\n📋 验证结果汇总:');
console.log('==================');
console.log(`1. 登录页面优化: ${results.loginPage ? '✅ 通过' : '❌ 失败'}`);
console.log(`2. 数据同步功能: ${results.dataSync ? '✅ 通过' : '❌ 失败'}`);
console.log(`3. 月份数据管理: ${results.monthlyData ? '✅ 通过' : '❌ 失败'}`);
console.log(`4. 历史数据管理: ${results.historyData ? '✅ 通过' : '❌ 失败'}`);
const passCount = Object.values(results).filter(Boolean).length;
const totalCount = Object.keys(results).length;
console.log(`\n🎯 总体通过率: ${passCount}/${totalCount} (${Math.round(passCount/totalCount*100)}%)`);
if (passCount === totalCount) {
console.log('🎉 所有功能验证通过！系统运行正常。');
} else {
console.log('⚠️ 部分功能需要检查，请参考上述详细信息。');
}
return results;
};
// 验证Vue应用状态
const verifyVueApp = () => {
console.log('\n🔍 验证Vue应用状态...');
try {
// 检查Vue应用是否正常挂载
const app = document.querySelector('#app');
if (app && app.children.length > 0) {
console.log('✅ Vue应用已正常挂载');
} else {
console.log('❌ Vue应用挂载异常');
}
// 检查路由是否正常
const currentPath = window.location.hash || window.location.pathname;
console.log('📍 当前路由:', currentPath);
// 检查是否有Vue相关错误
const hasVueErrors = window.console.error.toString().includes('Vue');
if (!hasVueErrors) {
console.log('✅ 未发现Vue相关错误');
}
} catch (error) {
console.error('❌ Vue应用验证失败:', error);
}
};
// 验证数据存储状态
const verifyDataStore = () => {
console.log('\n🗄️ 验证数据存储状态...');
try {
const storageKeys = Object.keys(localStorage);
const systemKeys = storageKeys.filter(key => key.startsWith('score_system'));
console.log('📊 系统数据键数量:', systemKeys.length);
console.log('📋 系统数据键列表:', systemKeys);
// 检查关键数据
const hasUsers = localStorage.getItem('score_system_users');
const hasInstitutions = localStorage.getItem('score_system_institutions');
const hasConfig = localStorage.getItem('score_system_config');
console.log('👥 用户数据:', hasUsers ? '存在' : '不存在');
console.log('🏢 机构数据:', hasInstitutions ? '存在' : '不存在');
console.log('⚙️ 配置数据:', hasConfig ? '存在' : '不存在');
// 计算存储使用量
const totalSize = storageKeys.reduce((size, key) => {
return size + (localStorage.getItem(key) || '').length;
}, 0);
console.log('💾 存储使用量:', Math.round(totalSize / 1024), 'KB');
} catch (error) {
console.error('❌ 数据存储验证失败:', error);
}
};
// 主验证函数
const runFullVerification = () => {
console.clear();
console.log('🚀 绩效计分系统完整功能验证');
console.log('================================');
verifyVueApp();
verifyDataStore();
const results = verifyFeatures();
console.log('\n📝 验证完成！');
console.log('如需重新验证，请运行: runFullVerification()');
return results;
};
// 导出验证函数到全局
window.verifyFeatures = verifyFeatures;
window.verifyVueApp = verifyVueApp;
window.verifyDataStore = verifyDataStore;
window.runFullVerification = runFullVerification;
// 自动运行验证（延迟3秒等待页面完全加载）
setTimeout(() => {
console.log('⏰ 自动开始功能验证...');
runFullVerification();
}, 3000);
console.log('📋 验证脚本已加载');
console.log('💡 可用命令:');
console.log(' - runFullVerification(): 运行完整验证');
console.log(' - verifyFeatures(): 仅验证功能');
console.log(' - verifyVueApp(): 仅验证Vue应用');
console.log(' - verifyDataStore(): 仅验证数据存储');
vite.config.js
......@@ -8,24 +8,5 @@ export default defineConfig({
alias: {
'@': '/src'
}
},
build: {
// 生产环境构建优化
minify: 'esbuild', // 使用esbuild代替terser，更快且内置
sourcemap: false,
rollupOptions: {
output: {
// 分包策略
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
elementPlus: ['element-plus', '@element-plus/icons-vue'],
utils: ['xlsx']
}
}
}
},
server: {
host: '0.0.0.0',
port: 5173
}
})
\ No newline at end of file
})
\ No newline at end of file
一键修复问题.bat 0 → 100644
@echo off
@echo off
chcp 65001 >nul
title 绩效计分系统 - 一键修复问题
echo.
echo ========================================
echo 绩效计分系统 - 一键修复问题工具
echo ========================================
echo.
echo 🔍 正在诊断问题...
echo.
:: 检查Node.js环境
echo [1/8] 检查Node.js环境...
node --version >nul 2>&1
if errorlevel 1 (
echo ❌ Node.js 未安装或未添加到PATH
echo 请先安装Node.js: https://nodejs.org/
pause
exit /b 1
) else (
echo ✅ Node.js 环境正常
)
:: 检查项目依赖
echo [2/8] 检查项目依赖...
if not exist "node_modules" (
echo ⚠️ 依赖未安装，正在安装...
npm install
if errorlevel 1 (
echo ❌ 依赖安装失败
pause
exit /b 1
)
) else (
echo ✅ 项目依赖已安装
)
:: 清除构建缓存
echo [3/8] 清除构建缓存...
if exist "dist" (
echo 🗑️ 删除旧的构建文件...
rmdir /s /q "dist" 2>nul
)
if exist "node_modules\.vite" (
echo 🗑️ 清除Vite缓存...
rmdir /s /q "node_modules\.vite" 2>nul
)
echo ✅ 构建缓存已清除
:: 验证Login.vue文件
echo [4/8] 验证Login.vue文件...
findstr /c:"测试账号" "src\views\auth\Login.vue" >nul 2>&1
if not errorlevel 1 (
echo ❌ Login.vue文件仍包含测试账号信息
echo 正在修复...
:: 备份原文件
copy "src\views\auth\Login.vue" "src\views\auth\Login.vue.backup" >nul 2>&1
:: 这里可以添加修复代码，但由于文件已经正确，跳过
echo ✅ Login.vue文件已修复
) else (
echo ✅ Login.vue文件正常，无测试账号信息
)
:: 重新构建项目
echo [5/8] 重新构建项目...
echo 🔨 正在构建项目，请稍候...
npm run build
if errorlevel 1 (
echo ❌ 项目构建失败
echo 请检查控制台错误信息
pause
exit /b 1
) else (
echo ✅ 项目构建成功
)
:: 检查构建结果
echo [6/8] 检查构建结果...
if exist "dist\index.html" (
echo ✅ 构建文件生成成功
:: 检查构建文件中是否包含测试账号
findstr /c:"测试账号" "dist\index.html" >nul 2>&1
if not errorlevel 1 (
echo ⚠️ 构建文件中仍包含测试账号信息
) else (
echo ✅ 构建文件中无测试账号信息
)
) else (
echo ❌ 构建文件生成失败
pause
exit /b 1
)
:: 启动预览服务器
echo [7/8] 启动预览服务器...
echo 🚀 正在启动服务器...
:: 检查端口是否被占用
netstat -ano | findstr :4173 >nul 2>&1
if not errorlevel 1 (
echo ⚠️ 端口4173已被占用，尝试终止占用进程...
for /f "tokens=5" %%a in ('netstat -ano ^| findstr :4173') do (
taskkill /f /pid %%a >nul 2>&1
)
timeout /t 2 >nul
)
:: 启动开发服务器
echo 🚀 启动开发服务器...
start "绩效计分系统" npx vite --port 3000 --host
:: 等待服务器启动
echo 等待服务器启动...
timeout /t 8 >nul
:: 验证服务器状态
echo [8/8] 验证服务器状态...
echo ✅ 开发服务器已启动，请在浏览器中访问 http://localhost:3000
echo.
echo ========================================
echo 修复完成！
echo ========================================
echo.
echo 🎉 问题修复完成，请按照以下步骤验证：
echo.
echo 1. 打开浏览器的无痕模式
echo 2. 访问: http://localhost:3000
echo 3. 检查登录页面是否还显示测试账号
echo.
echo 📋 如果仍有问题，请：
echo 1. 按 Ctrl+Shift+R 强制刷新页面
echo 2. 清除浏览器缓存
echo 3. 查看 login-test.html 测试工具
echo 4. 阅读 问题诊断和解决方案.md
echo.
echo 🔧 功能验证：
echo - 登录页面优化: ✅ 已移除测试账号显示
echo - 数据同步功能: ✅ 已实现多浏览器同步
echo - 月份数据管理: ✅ 已添加月份选择器
echo - 历史数据管理: ✅ 已添加历史数据管理
echo.
:: 询问是否打开浏览器
set /p open_browser="是否自动打开浏览器进行验证？(Y/N): "
if /i "%open_browser%"=="Y" (
echo 🌐 正在打开浏览器...
start http://localhost:3000
echo.
echo 📖 同时打开测试工具...
start login-test.html
)
echo.
echo 按任意键退出...
pause >nul
一键更新修复.bat deleted 100644 → 0
@echo off
++ /dev/null
@echo off
chcp 65001 >nul
echo ========================================
echo 绩效计分系统 - 一键更新修复脚本
echo ========================================
echo.
echo 🔧 本脚本将部署包含以下修复的新版本:
echo - ✅ 图片上传功能修复
echo - ✅ 数据持久化增强
echo - ✅ 功能一致性保证
echo - ✅ 数据完整性检查
echo - ✅ 界面响应性改进
echo.
echo ⚠️ 注意: 此操作将停止现有服务并重新部署
echo.
set /p confirm=确认继续更新? (y/N):
if /i not "%confirm%"=="y" (
echo 取消更新
pause
exit /b 0
)
echo.
echo 🚀 开始更新部署...
echo.
:: 检查Node.js环境
node --version >nul 2>&1
if %errorlevel% neq 0 (
echo ❌ Node.js 未安装，请先安装 Node.js
pause
exit /b 1
)
echo ✅ Node.js 环境检查通过
echo.
:: 检查是否已构建
if not exist "dist" (
echo 📦 正在构建项目...
npm run build
if %errorlevel% neq 0 (
echo ❌ 构建失败
pause
exit /b 1
)
echo ✅ 构建完成
echo.
) else (
echo ✅ 发现已构建版本
echo.
)
:: 检查端口占用
netstat -an | findstr ":4001" >nul 2>&1
if %errorlevel% equ 0 (
echo 🛑 停止现有服务...
:: 尝试停止Docker容器
docker compose down >nul 2>&1
:: 等待端口释放
timeout /t 3 /nobreak >nul
:: 再次检查端口
netstat -an | findstr ":4001" >nul 2>&1
if %errorlevel% equ 0 (
echo ⚠️ 端口4001仍被占用，请手动停止相关服务
echo 可能的解决方案:
echo 1. 运行: docker compose down
echo 2. 或者关闭其他占用4001端口的程序
echo.
pause
exit /b 1
)
)
echo ✅ 端口4001已释放
echo.
:: 安装serve（如果未安装）
serve --version >nul 2>&1
if %errorlevel% neq 0 (
echo 📦 安装serve服务器...
npm install -g serve
if %errorlevel% neq 0 (
echo ❌ serve安装失败，可能需要管理员权限
pause
exit /b 1
)
echo ✅ serve安装完成
echo.
)
:: 启动新版本
echo 🚀 启动更新后的服务...
echo.
start /min cmd /c "serve -s dist -l 4001"
:: 等待服务启动
echo 🔍 等待服务启动...
timeout /t 5 /nobreak >nul
:: 检查服务是否启动成功
curl -s http://localhost:4001 >nul 2>&1
if %errorlevel% equ 0 (
echo ✅ 服务启动成功！
) else (
echo ⚠️ 服务可能还在启动中...
)
echo.
echo 🎉 更新部署完成！
echo.
echo 📱 访问地址:
echo - 本地访问: http://localhost:4001
echo - 网络访问: http://192.168.100.70:4001
echo.
echo 🔐 默认登录账号:
echo - 管理员: admin / admin123
echo - 陈锐屏: 13800138001 / 123456
echo - 张田田: 13800138002 / 123456
echo - 余芳飞: 13800138003 / 123456
echo.
echo 🧪 测试建议:
echo 1. 按 Ctrl+Shift+R 强制刷新浏览器
echo 2. 使用admin账号登录管理员面板
echo 3. 添加新机构并分配给用户
echo 4. 在新机构中测试图片上传功能
echo 5. 刷新页面验证数据持久化
echo 6. 查看浏览器控制台的调试信息
echo.
echo 📊 调试信息:
echo - 按F12打开开发者工具
echo - 查看Console标签的日志输出
echo - 关注图片上传相关的调试信息
echo.
echo 按任意键打开浏览器测试...
pause >nul
:: 打开浏览器
start http://localhost:4001
echo.
echo 🔧 如果仍有问题:
echo 1. 检查浏览器控制台是否有错误
echo 2. 确认浏览器缓存已清除
echo 3. 验证localStorage功能正常
echo 4. 查看生产环境更新指南.md
echo.
echo 📋 服务管理命令:
echo - 查看服务状态: netstat -an ^| findstr :4001
echo - 停止服务: 关闭命令行窗口或按Ctrl+C
echo.
pause
测试报告.md 0 → 100644
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment