feat: v0.8.x 功能更新与数据维护优化

- MAC地址格式统一为小写 xxxx-xxxx-xxxx，支持三种格式输入
- 更换设备MAC时自动清理OLT新发现列表中的冲突ONU记录
- 设备编辑新增场所类型字段（手动输入），区域改为下拉快速填充
- 编辑/更换设备时自动移除new_devices中同MAC的待入库记录
- 新增登录过期自动跳转（401拦截 + 过期提示）
- 新增关于页面（/about），支持Markdown渲染，管理员可在设置中编辑内容
- 新增device_status_history每日自动清理任务（保留30天）
- 更新README.md和about.md

README.md

@@ -1,282 +1,148 @@
-# H3C ONU设备管理系统
+# H3C ONU 设备管理系统
 
-基于Python FastAPI + Vue 3的H3C OLT设备监控管理系统，用于监控和管理4000+ ONU设备的在线状态。
+基于 Python FastAPI + Vue 3 的 H3C OLT 设备监控管理系统，用于监控和管理大规模 ONU 设备的在线状态。
 
 ## 功能特性
 
-### 核心功能
-- ✅ H3C OLT设备SSH连接和状态查询
-- ✅ ONU设备在线状态监控（4000+设备）
-- ✅ Excel数据导入和批量管理
-- ✅ 定时自动状态检查（每30分钟）
-- ✅ 手动刷新功能（5分钟冷却限制）
-- ✅ 90天状态历史记录
+### 设备监控与管理
+- H3C OLT 设备 SSH 连接和状态查询
+- ONU 设备在线状态监控（支持 4000+ 设备）
+- 定时自动状态检查（可配置间隔，最小 5 分钟）
+- 手动刷新功能（5 分钟冷却限制）
+- 设备信息编辑（区域、学校、楼宇、场所类型、备注）
+- 设备 MAC 地址更换，保留完整变更历史
+- OLT 扫描新发现设备自动入库流程
+
+### 数据管理
+- Excel 批量导入设备信息
+- 设备状态历史记录（保留 30 天）
+- 每日状态快照（用于趋势图）
+- 重复 MAC 地址检测
+
+### 统计分析
+- 实时在线率统计
+- 7 天趋势折线图
+- 区域分布饼图
 
 ### 权限管理
-- ✅ Casdoor统一认证集成
-- ✅ 基于RBAC的多级权限控制
-- ✅ 区域/学校级别的数据隔离
-- ✅ 设备信息变更审核流程
-- ✅ 用户角色和权限管理
+- Casdoor 统一认证（OIDC）
+- 基于 RBAC 的多级权限控制（管理员 / 区域管理员 / 学校管理员 / 普通用户）
+- 区域 / 学校级别的数据隔离
+- 角色权限精细配置
 
-### 界面功能
-- ✅ 响应式Web界面
-- ✅ 设备列表表格展示
-- ✅ 高级筛选和搜索
-- ✅ 实时统计图表
-- ✅ 设备详情和历史趋势
-- ✅ 数据导入和管理界面
+### 运维功能
+- 用户操作审计日志（保留 90 天）
+- 业务下发（ONU 服务配置）
+- 库存序列号管理
+- 关于页面（支持 Markdown，管理员可编辑）
+- 登录过期自动跳转
 
 ## 技术栈
 
-### 后端
-- **Python FastAPI** - 高性能异步Web框架
-- **PostgreSQL** - 关系型数据库
-- **Paramiko** - SSH连接库
-- **Celery + Redis** - 异步任务队列
-- **Pandas** - Excel数据处理
-- **SQLAlchemy** - ORM框架
-- **Casdoor SDK** - 统一认证
-
-### 前端
-- **Vue 3 + Composition API** - 前端框架
-- **Element Plus** - UI组件库
-- **Axios** - HTTP客户端
-- **Vue Router** - 路由管理
-- **Pinia** - 状态管理
-- **ECharts** - 图表库
-
-### 部署
-- **Docker + Docker Compose** - 容器化部署
-- **Nginx** - 反向代理
-- **外部PostgreSQL/Redis** - 数据库服务
+| 层级 | 技术 |
+|------|------|
+| 后端 | Python · FastAPI · SQLAlchemy · Celery · Redis · Paramiko · Pandas |
+| 前端 | Vue 3 · Element Plus · ECharts · marked |
+| 数据库 | PostgreSQL |
+| 认证 | Casdoor（OIDC） |
+| 部署 | Docker Compose · Nginx |
 
 ## 快速开始
 
 ### 环境要求
 - Docker 20.10+
 - Docker Compose 2.0+
-- 外部PostgreSQL数据库
-- 外部Redis服务
-- Casdoor认证服务器
+- 外部 PostgreSQL 数据库
+- 外部 Redis 服务
+- Casdoor 认证服务器
 
-### 配置步骤
+### 启动步骤
 
-1. **克隆项目**
+1. 克隆项目
    ```bash
    git clone <repository-url>
    cd H3ConuMS2
    ```
 
-2. **配置环境变量**
+2. 配置环境变量
    ```bash
    cp deploy/.env.example deploy/.env
-   # 编辑deploy/.env文件，配置数据库和Casdoor信息
+   # 编辑 deploy/.env，填写数据库、Redis、Casdoor 等配置
    ```
 
-3. **启动服务**
+3. 启动服务
    ```bash
-   cd deploy
-   docker-compose up -d
+   docker compose up -d
    ```
 
-4. **访问系统**
-   - 前端界面: http://localhost:8080
-   - API文档: http://localhost:8000/docs
-   - 健康检查: http://localhost:8000/health
+4. 运行数据库迁移
+   ```bash
+   docker compose exec backend alembic upgrade head
+   ```
+
+5. 访问系统
+   - 前端界面：http://localhost:8080
+   - API 文档：http://localhost:8000/docs
 
 ## 项目结构
 
 ```
 H3ConuMS2/
-├── backend/                    # Python后端代码
+├── backend/
 │   ├── app/
-│   │   ├── api/              # API路由
-│   │   ├── core/             # 核心配置
-│   │   ├── models/           # 数据模型
-│   │   ├── schemas/          # Pydantic模式
-│   │   ├── services/         # 业务逻辑
-│   │   ├── tasks/            # Celery任务
-│   │   └── utils/            # 工具函数
-│   ├── alembic/              # 数据库迁移
-│   ├── tests/                # 测试代码
-│   ├── requirements.txt      # Python依赖
-│   └── Dockerfile           # 后端Dockerfile
-├── frontend/                  # Vue前端代码
-│   ├── public/               # 静态资源
+│   │   ├── api/          # API 路由
+│   │   ├── core/         # 配置、数据库、Celery
+│   │   ├── middleware/   # 权限、审计中间件
+│   │   ├── models/       # 数据模型
+│   │   ├── services/     # 业务逻辑
+│   │   └── tasks/        # Celery 定时任务
+│   ├── alembic/          # 数据库迁移
+│   └── Dockerfile
+├── frontend/
 │   ├── src/
-│   │   ├── api/              # API调用
-│   │   ├── assets/           # 资源文件
-│   │   ├── components/       # 组件
-│   │   ├── router/           # 路由配置
-│   │   ├── stores/           # 状态管理
-│   │   ├── views/            # 页面组件
-│   │   └── utils/            # 工具函数
-│   ├── package.json          # 前端依赖
-│   └── Dockerfile           # 前端Dockerfile
-├── deploy/                    # 部署配置
-│   ├── docker-compose.yml    # Docker编排
-│   ├── nginx.conf            # Nginx配置
-│   └── .env.example          # 环境变量示例
-├── docs/                      # 文档
-│   ├── api/                  # API文档
-│   ├── deployment/           # 部署文档
-│   └── user-guide/           # 用户指南
-├── scripts/                   # 脚本文件
-│   ├── init-db.sh            # 数据库初始化
-│   ├── backup.sh             # 数据备份
-│   └── monitor.sh            # 系统监控
-└── 系统设计文档.md            # 详细设计文档
+│   │   ├── api/          # API 调用
+│   │   ├── components/   # 公共组件
+│   │   ├── router/       # 路由配置
+│   │   ├── views/        # 页面组件
+│   │   └── utils/        # 工具函数
+│   └── Dockerfile
+├── deploy/               # 部署配置（docker-compose、nginx、.env）
+└── about.md              # 系统介绍（关于页面内容）
 ```
 
-## 数据库初始化
+## 定时任务
 
-1. **创建数据库**
-   ```sql
-   CREATE DATABASE h3c_onu_ms;
-   CREATE USER h3c_user WITH PASSWORD 'your_password';
-   GRANT ALL PRIVILEGES ON DATABASE h3c_onu_ms TO h3c_user;
-   ```
-
-2. **运行迁移**
-   ```bash
-   cd backend
-   alembic upgrade head
-   ```
-
-3. **初始化数据**
-   ```bash
-   python scripts/init_data.py
-   ```
+| 任务 | 执行时间 | 说明 |
+|------|----------|------|
+| 设备状态检查 | 每 5 分钟触发，内部节流 | 轮询所有 OLT 采集 ONU 状态 |
+| 每日快照聚合 | 每天凌晨 1:00 | 生成趋势图数据 |
+| 审计日志清理 | 每天凌晨 2:00 | 删除 90 天前的审计记录 |
+| 状态历史清理 | 每天凌晨 3:00 | 删除 30 天前的状态历史 |
 
 ## 配置说明
 
-### Casdoor配置
-1. 在Casdoor中创建应用
-2. 配置回调地址: `http://your-domain/api/auth/callback`
-3. 获取Client ID、Client Secret和Certificate
-4. 在.env文件中配置Casdoor参数
+### Casdoor
+1. 在 Casdoor 中创建应用
+2. 配置回调地址：`http://your-domain/api/auth/callback`
+3. 在 `.env` 中填写 Client ID、Client Secret 和 Certificate
 
-### OLT设备配置
-1. 通过系统界面添加OLT设备
-2. 配置SSH连接信息（IP、用户名、密码）
-3. 设置插槽命令（如`display onu slot 1`）
-
-### 权限配置
-1. 在Casdoor中配置用户角色
-2. 在系统中配置角色权限映射
-3. 分配用户区域和学校权限
-
-## 开发指南
-
-### 后端开发
-```bash
-cd backend
-python -m venv venv
-source venv/bin/activate  # Linux/Mac
-# venv\Scripts\activate   # Windows
-pip install -r requirements.txt
-uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
-```
-
-### 前端开发
-```bash
-cd frontend
-npm install
-npm run dev
-```
-
-### 测试
-```bash
-# 后端测试
-cd backend
-pytest
-
-# 前端测试
-cd frontend
-npm run test
-```
-
-## API文档
-
-启动后端服务后，访问以下地址查看API文档：
-- Swagger UI: http://localhost:8000/docs
-- ReDoc: http://localhost:8000/redoc
-
-## 监控和日志
-
-### 健康检查
-```
-GET /health
-```
-
-### 指标监控
-```
-GET /metrics
-```
-
-### 日志查看
-```bash
-# 查看后端日志
-docker-compose logs backend
-
-# 查看Celery日志
-docker-compose logs celery-worker
-
-# 查看Nginx日志
-docker-compose logs nginx
-```
-
-## 故障排除
-
-### 常见问题
-
-1. **SSH连接失败**
-   - 检查网络连通性
-   - 验证SSH凭证
-   - 检查防火墙设置
-
-2. **数据库连接失败**
-   - 检查数据库服务状态
-   - 验证连接字符串
-   - 检查网络权限
-
-3. **Casdoor登录失败**
-   - 检查Casdoor服务状态
-   - 验证应用配置
-   - 检查回调地址配置
-
-### 日志级别
-- DEBUG: 开发环境详细日志
-- INFO: 生产环境常规日志
-- ERROR: 错误信息记录
-
-## 贡献指南
-
-1. Fork项目
-2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 创建Pull Request
-
-## 许可证
-
-本项目采用MIT许可证 - 查看LICENSE文件了解详情。
-
-## 联系方式
-
-- 项目维护者: [Your Name]
-- 问题反馈: [GitHub Issues]
-- 文档更新: [GitHub Wiki]
+### OLT 设备
+通过系统界面添加 OLT 设备，配置 SSH 连接信息（IP、用户名、密码）和插槽命令。
 
 ## 更新日志
 
-### v1.0.0 (计划中)
-- 基础设备监控功能
-- Casdoor认证集成
-- 权限管理系统
-- Docker化部署
+### v0.8.0
+- 新增审计日志功能
+- 新增关于页面（Markdown 编辑，管理员可配置）
+- 新增登录过期自动跳转提示
+- 设备编辑支持场所类型字段，区域改为下拉快速填充
+- MAC 地址统一格式为 `xxxx-xxxx-xxxx`（小写）
+- 更换设备 MAC 时自动清理 OLT 新发现列表中的冲突记录
+- 状态历史自动清理（保留 30 天）
+
+### v0.7.x 及以前
+- 基础设备监控、OLT 管理、权限系统、Excel 导入、库存管理等核心功能
 
 ---
 
-**重要提示**: 生产环境部署前，请务必修改默认密码和密钥，并配置适当的防火墙规则。
+**注意**：生产环境部署前请修改默认密码和密钥，并配置适当的防火墙规则。

about.md

@@ -0,0 +1,37 @@
+# H3C ONU 管理系统
+
+H3C ONU 管理系统（H3ConuMS）是一套面向校园网络运维团队的 ONU 设备集中管理平台，支持对接多台 H3C OLT 设备，实现大规模 ONU 的状态监控、信息管理与运维操作。
+
+## 主要功能
+
+**设备监控**
+系统通过 SSH 定期轮询 OLT 设备，自动采集所有 ONU 的在线状态、光功率、距离、端口等信息，并以列表和卡片两种视图展示。支持手动触发刷新，状态变化实时可见。
+
+**设备管理**
+支持按区域、学校、楼宇、场所类型等维度对 ONU 设备进行分类管理。可通过 Excel 批量导入设备信息，也可在界面中逐条编辑。设备更换时记录完整的 MAC 地址变更历史。
+
+**OLT 管理**
+统一管理多台 OLT 设备的连接信息，支持端口级别的设备发现。OLT 扫描到的新设备会进入待入库列表，由运维人员补全信息后正式纳管。
+
+**统计分析**
+提供实时在线率统计、7 天趋势折线图、区域分布饼图等可视化报表，帮助运维团队快速掌握全网设备健康状况。
+
+**权限管理**
+基于 Casdoor 统一认证，支持管理员、区域管理员、学校管理员、普通用户等多级角色，数据访问范围按角色自动隔离。
+
+**审计日志**
+记录所有用户的写操作，包括设备编辑、更换、导入、权限变更等，保留 90 天供追溯查询。
+
+## 技术栈
+
+| 层级 | 技术 |
+|------|------|
+| 后端 | Python · FastAPI · SQLAlchemy · Celery · Redis |
+| 前端 | Vue 3 · Element Plus · ECharts |
+| 数据库 | PostgreSQL |
+| 认证 | Casdoor（OIDC） |
+| 部署 | Docker Compose · Nginx |
+
+## 版本
+
+当前版本：v0.8.0

backend/app/api/v1/devices.py

@@ -265,6 +265,7 @@ class DeviceUpdate(BaseModel):
     school_name: Optional[str] = None
     building: Optional[str] = None
     room_number: Optional[str] = None
+    place_type: Optional[str] = None
     notes: Optional[str] = None
 
 
@@ -299,7 +300,17 @@ def update_device(
     device.school_name = body.school_name
     device.building = body.building or None
     device.room_number = body.room_number or None
+    device.place_type = body.place_type or None
     device.notes = body.notes or None
+
+    # 若该设备 MAC 在 new_devices 待入库列表中，自动移除（已在设备列表中补全信息）
+    from app.models.device import NewDevice
+    dup_new = db.query(NewDevice).join(
+        ONUDevice, NewDevice.onu_device_id == ONUDevice.id
+    ).filter(ONUDevice.mac_address == device.mac_address).all()
+    for nd in dup_new:
+        db.delete(nd)
+
     db.commit()
     return {"message": "更新成功"}
 
@@ -317,16 +328,47 @@ def replace_device(
     if not device:
         raise HTTPException(status_code=404, detail="设备不存在")
 
-    new_mac = body.new_mac.upper().strip()
-    # 校验 MAC 格式（允许 XX:XX:XX:XX:XX:XX 或 XXXXXXXXXXXX）
+    new_mac_raw = body.new_mac.strip()
+    # 接受 xxxx-xxxx-xxxx、xx:xx:xx:xx:xx:xx、xxxxxxxxxxxx 三种格式，统一标准化为小写 xxxx-xxxx-xxxx
     import re
-    if not re.match(r'^([0-9A-F]{2}[:-]){5}[0-9A-F]{2}$|^[0-9A-F]{12}$', new_mac):
-        raise HTTPException(status_code=400, detail="MAC 地址格式不正确")
+    hex_only = re.sub(r'[:\-]', '', new_mac_raw).lower()
+    if not re.match(r'^[0-9a-f]{12}$', hex_only):
+        raise HTTPException(status_code=400, detail="MAC 地址格式不正确，支持 xxxx-xxxx-xxxx、xx:xx:xx:xx:xx:xx 或 xxxxxxxxxxxx")
+    new_mac = f"{hex_only[0:4]}-{hex_only[4:8]}-{hex_only[8:12]}"
 
-    # 检查新 MAC 是否已被其他设备使用
-    existing = db.query(ONUDevice).filter(
-        ONUDevice.mac_address == new_mac,
+    # 同时匹配大小写和各种分隔符格式，兼容数据库旧数据
+    hex_variants = [
+        new_mac,
+        hex_only,
+        ':'.join(hex_only[i:i+2] for i in range(0, 12, 2)),
+        '-'.join(hex_only[i:i+2] for i in range(0, 12, 2)),
+        new_mac.upper(),
+        hex_only.upper(),
+        ':'.join(hex_only[i:i+2].upper() for i in range(0, 12, 2)),
+        '-'.join(hex_only[i:i+2].upper() for i in range(0, 12, 2)),
+    ]
+
+    # 若新 MAC 在 new_devices 待入库列表中，先删除（更换后该记录已无意义）
+    from app.models.device import NewDevice
+    conflict_news = db.query(NewDevice).join(
+        ONUDevice, NewDevice.onu_device_id == ONUDevice.id
+    ).filter(
+        ONUDevice.mac_address.in_(hex_variants),
         ONUDevice.id != device_id
+    ).all()
+    conflict_new_onu_ids = {nd.onu_device_id for nd in conflict_news}
+    for nd in conflict_news:
+        db.delete(nd)
+    # 同时删除对应的空白 ONU 记录，避免设备列表出现重复 MAC
+    if conflict_new_onu_ids:
+        db.query(ONUDevice).filter(ONUDevice.id.in_(conflict_new_onu_ids)).delete(synchronize_session=False)
+    db.flush()
+
+    # 检查新 MAC 是否已被其他 ONU 设备使用（排除刚刚从 new_devices 删除的临时 ONU）
+    existing = db.query(ONUDevice).filter(
+        ONUDevice.mac_address.in_(hex_variants),
+        ONUDevice.id != device_id,
+        ONUDevice.id.notin_(conflict_new_onu_ids) if conflict_new_onu_ids else True,
     ).first()
     if existing:
         raise HTTPException(status_code=400, detail="该 MAC 地址已被其他设备使用")

backend/app/api/v1/settings.py

@@ -74,3 +74,27 @@ def update_check_interval(
     _get_redis().delete("check_all_devices:last_run")
 
     return {"key": "check_interval_seconds", "value": seconds}
+
+
+@router.get("/about")
+def get_about(db: Session = Depends(get_db)):
+    """获取关于页面内容（公开接口，无需登录）"""
+    setting = db.query(SystemSetting).filter_by(key='about_content').first()
+    return {"content": setting.value if setting else ""}
+
+
+@router.put("/about")
+def update_about(
+    body: dict,
+    db: Session = Depends(get_db),
+    _: dict = Depends(require_permission('*')),
+):
+    """更新关于页面内容（仅管理员）"""
+    content = body.get("content", "")
+    setting = db.query(SystemSetting).filter_by(key='about_content').first()
+    if setting:
+        setting.value = content
+    else:
+        db.add(SystemSetting(key='about_content', value=content, description='关于页面内容（Markdown）'))
+    db.commit()
+    return {"key": "about_content", "value": content}

backend/app/core/celery_app.py

@@ -34,5 +34,10 @@ celery_app.conf.update(
             'schedule': crontab(hour=2, minute=0),  # 每天凌晨 2:00
             'options': {'queue': 'h3c_onu_ms'},
         },
+        'cleanup-status-history': {
+            'task': 'app.tasks.check_tasks.cleanup_status_history',
+            'schedule': crontab(hour=3, minute=0),  # 每天凌晨 3:00
+            'options': {'queue': 'h3c_onu_ms'},
+        },
     },
 )

backend/app/tasks/check_tasks.py

@@ -174,3 +174,19 @@ def aggregate_daily_snapshot():
         return {'success': False, 'error': str(e), 'traceback': traceback.format_exc()}
     finally:
         db.close()
+
+
+@celery_app.task
+def cleanup_status_history():
+    """清理 30 天前的设备状态历史记录（每天凌晨执行）"""
+    from app.models.device import DeviceStatusHistory
+    db = SessionLocal()
+    try:
+        cutoff = datetime.utcnow() - timedelta(days=30)
+        deleted = db.query(DeviceStatusHistory).filter(
+            DeviceStatusHistory.checked_at < cutoff
+        ).delete(synchronize_session=False)
+        db.commit()
+        return {"deleted": deleted}
+    finally:
+        db.close()

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.6.5",
         "echarts": "^5.6.0",
         "element-plus": "^2.5.0",
+        "marked": "^18.0.2",
         "pinia": "^2.1.7",
         "vue": "^3.4.0",
         "vue-router": "^4.2.5"
@@ -1452,6 +1453,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-18.0.2.tgz",
+      "integrity": "sha512-NsmlUYBS/Zg57rgDWMYdnre6OTj4e+qq/JS2ot3KrYLSoHLw+sDu0Nm1ZGpRgYAq6c+b1ekaY5NzVchMCQnzcg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
     "axios": "^1.6.5",
     "echarts": "^5.6.0",
     "element-plus": "^2.5.0",
+    "marked": "^18.0.2",
     "pinia": "^2.1.7",
     "vue": "^3.4.0",
     "vue-router": "^4.2.5"

frontend/src/components/Layout.vue

@@ -301,6 +301,14 @@ const allNavItems = [
       <polyline points="10 9 9 9 8 9"/>
     </svg>`
   },
+  {
+    path: '/about',
+    label: '关于',
+    icon: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+      <circle cx="12" cy="12" r="10"/>
+      <line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+    </svg>`
+  },
 ]
 
 const navItems = computed(() =>
@@ -314,7 +322,7 @@ const mobileNavItems = computed(() => navItems.value.slice(0, 3))
 const extraNavItems = computed(() =>
   navItems.value.slice(3).map((item, i) => ({
     ...item,
-    desc: ['7天趋势与区域分布', '物料出入库台账', '管理系统用户', '配置角色权限', '定时检查等系统配置', '查看操作审计记录'][i] || ''
+    desc: ['7天趋势与区域分布', '物料出入库台账', '管理系统用户', '配置角色权限', '定时检查等系统配置', '查看操作审计记录', '系统信息与说明'][i] || ''
   }))
 )
 

frontend/src/router/index.js

@@ -68,6 +68,11 @@ const routes = [
         component: () => import('../views/AuditLog.vue'),
         meta: { requiresRole: 'admin' }
       },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('../views/About.vue')
+      },
     ]
   }
 ]

frontend/src/utils/request.js

@@ -13,4 +13,18 @@ request.interceptors.request.use(config => {
   return config
 })
 
+request.interceptors.response.use(
+  res => res,
+  err => {
+    if (err.response?.status === 401) {
+      localStorage.removeItem('token')
+      // 避免在登录/回调页重复跳转
+      if (!window.location.pathname.startsWith('/login') && !window.location.pathname.startsWith('/callback')) {
+        window.location.href = '/login?expired=1'
+      }
+    }
+    return Promise.reject(err)
+  }
+)
+
 export default request

frontend/src/views/About.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="about-page">
+    <div class="page-header">
+      <div class="page-title-group">
+        <h1 class="page-title">关于</h1>
+        <span class="page-subtitle">系统信息与说明</span>
+      </div>
+    </div>
+
+    <div class="about-card">
+      <div v-if="loading" class="about-loading">
+        <div class="spin-ring"></div>
+      </div>
+      <div v-else-if="content" class="markdown-body" v-html="renderedContent"></div>
+      <div v-else class="about-empty">暂无内容</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { marked } from 'marked'
+import request from '../utils/request'
+
+const content = ref('')
+const loading = ref(true)
+
+const renderedContent = computed(() => {
+  if (!content.value) return ''
+  return marked.parse(content.value)
+})
+
+onMounted(async () => {
+  try {
+    const { data } = await request.get('/settings/about')
+    content.value = data.content || ''
+  } catch {}
+  loading.value = false
+})
+</script>
+
+<style scoped>
+.about-page {
+  padding: 24px 28px;
+  max-width: 860px;
+}
+
+.page-header {
+  margin-bottom: 20px;
+}
+
+.page-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 2px;
+}
+
+.page-subtitle {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.about-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius);
+  padding: 28px 32px;
+  min-height: 200px;
+}
+
+.about-loading {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.spin-ring {
+  width: 28px;
+  height: 28px;
+  border: 2px solid var(--border-default);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.about-empty {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 40px 0;
+}
+
+/* Markdown 渲染样式 */
+.markdown-body {
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.markdown-body :deep(h1),
+.markdown-body :deep(h2),
+.markdown-body :deep(h3),
+.markdown-body :deep(h4) {
+  color: var(--text-primary);
+  font-weight: 600;
+  margin: 1.4em 0 0.6em;
+  line-height: 1.4;
+}
+
+.markdown-body :deep(h1) { font-size: 1.5em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3em; }
+.markdown-body :deep(h2) { font-size: 1.25em; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.2em; }
+.markdown-body :deep(h3) { font-size: 1.1em; }
+
+.markdown-body :deep(p) { margin: 0.8em 0; }
+
+.markdown-body :deep(a) {
+  color: var(--accent);
+  text-decoration: none;
+}
+.markdown-body :deep(a:hover) { text-decoration: underline; }
+
+.markdown-body :deep(code) {
+  font-family: var(--font-mono);
+  font-size: 0.88em;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 1px 5px;
+}
+
+.markdown-body :deep(pre) {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  padding: 14px 16px;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.markdown-body :deep(pre code) {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 13px;
+}
+
+.markdown-body :deep(ul),
+.markdown-body :deep(ol) {
+  padding-left: 1.6em;
+  margin: 0.6em 0;
+}
+
+.markdown-body :deep(li) { margin: 0.3em 0; }
+
+.markdown-body :deep(blockquote) {
+  border-left: 3px solid var(--accent);
+  margin: 1em 0;
+  padding: 6px 16px;
+  color: var(--text-secondary);
+  background: var(--accent-dim);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+
+.markdown-body :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1em 0;
+  font-size: 13px;
+}
+
+.markdown-body :deep(th),
+.markdown-body :deep(td) {
+  border: 1px solid var(--border-default);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.markdown-body :deep(th) {
+  background: var(--bg-elevated);
+  font-weight: 600;
+}
+
+.markdown-body :deep(tr:nth-child(even) td) {
+  background: var(--bg-elevated);
+}
+
+.markdown-body :deep(hr) {
+  border: none;
+  border-top: 1px solid var(--border-default);
+  margin: 1.5em 0;
+}
+
+@media (max-width: 767px) {
+  .about-page { padding: 16px 12px; }
+  .about-card { padding: 20px 16px; }
+}
+</style>

frontend/src/views/DeviceList.vue

@@ -361,7 +361,7 @@
       </div>
       <el-form :model="replaceForm" label-width="80px">
         <el-form-item label="新 MAC 地址" required>
-          <el-input v-model="replaceForm.new_mac" placeholder="例：AABBCCDDEEFF 或 AA:BB:CC:DD:EE:FF" clearable />
+          <el-input v-model="replaceForm.new_mac" placeholder="例：AABB-CCDD-EEFF" clearable @input="formatMacInput" />
         </el-form-item>
         <el-form-item label="更换原因">
           <el-input v-model="replaceForm.reason" type="textarea" :rows="2" placeholder="可选，填写更换原因" />
@@ -385,10 +385,23 @@
     <!-- 编辑对话框 -->
     <el-dialog v-model="editVisible" title="编辑设备信息" width="460px" destroy-on-close>
       <el-form :model="editForm" label-width="70px">
-        <el-form-item label="区域"><el-input v-model="editForm.region" /></el-form-item>
+        <el-form-item label="区域">
+          <el-select
+            v-model="editForm.region"
+            filterable
+            allow-create
+            placeholder="选择或输入区域"
+            style="width: 100%"
+          >
+            <el-option v-for="r in regionOptions" :key="r" :label="r" :value="r" />
+          </el-select>
+        </el-form-item>
         <el-form-item label="学校"><el-input v-model="editForm.school_name" /></el-form-item>
         <el-form-item label="楼宇"><el-input v-model="editForm.building" /></el-form-item>
         <el-form-item label="房间号"><el-input v-model="editForm.room_number" /></el-form-item>
+        <el-form-item label="场所类型">
+          <el-input v-model="editForm.place_type" placeholder="如：宿舍、教室、办公室…" />
+        </el-form-item>
         <el-form-item label="备注"><el-input v-model="editForm.notes" type="textarea" :rows="2" /></el-form-item>
       </el-form>
       <template #footer>
@@ -526,7 +539,8 @@ let cooldownTimer = null
 const clearing = ref(false)
 
 const editVisible = ref(false)
-const editForm = ref({ region: '', school_name: '', building: '', room_number: '', notes: '' })
+const editForm = ref({ region: '', school_name: '', building: '', room_number: '', place_type: '', notes: '' })
+const regionOptions = ref([])
 const editSaving = ref(false)
 
 const replaceVisible = ref(false)
@@ -602,8 +616,10 @@ const openEditFromCard = (device) => {
     school_name: device.school_name || '',
     building: device.building || '',
     room_number: device.room_number || '',
+    place_type: device.place_type || '',
     notes: device.notes || '',
   }
+  loadRegionOptions()
   editVisible.value = true
 }
 
@@ -727,6 +743,18 @@ const openReplace = async () => {
   replaceVisible.value = true
 }
 
+// 输入时自动格式化为 xxxx-xxxx-xxxx（小写）
+const formatMacInput = () => {
+  const raw = replaceForm.value.new_mac.toLowerCase().replace(/[^0-9a-f]/g, '')
+  if (raw.length <= 4) {
+    replaceForm.value.new_mac = raw
+  } else if (raw.length <= 8) {
+    replaceForm.value.new_mac = raw.slice(0, 4) + '-' + raw.slice(4)
+  } else {
+    replaceForm.value.new_mac = raw.slice(0, 4) + '-' + raw.slice(4, 8) + '-' + raw.slice(8, 12)
+  }
+}
+
 const doReplace = async () => {
   if (!replaceForm.value.new_mac.trim()) {
     ElMessage.warning('请输入新 MAC 地址')
@@ -753,12 +781,21 @@ const openEdit = () => {
     school_name: selectedDevice.value.school_name || '',
     building: selectedDevice.value.building || '',
     room_number: selectedDevice.value.room_number || '',
+    place_type: selectedDevice.value.place_type || '',
     notes: selectedDevice.value.notes || '',
   }
+  loadRegionOptions()
   detailVisible.value = false
   editVisible.value = true
 }
 
+const loadRegionOptions = async () => {
+  try {
+    const { data } = await deviceApi.getRegions()
+    regionOptions.value = data
+  } catch {}
+}
+
 const saveEdit = async () => {
   editSaving.value = true
   try {

frontend/src/views/Login.vue

@@ -20,6 +20,13 @@
         </div>
       </div>
 
+      <div v-if="expired" class="expired-tip">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        登录已过期，请重新登录
+      </div>
+
       <div v-if="!error" class="login-status">
         <div class="spin-ring"></div>
         <p class="status-text">正在跳转到登录页面…</p>
@@ -49,6 +56,7 @@ import { ref, onMounted } from 'vue'
 import { getLoginUrl } from '../api/auth'
 
 const error = ref('')
+const expired = ref(new URLSearchParams(window.location.search).get('expired') === '1')
 
 const doRedirect = async () => {
   error.value = ''
@@ -225,4 +233,18 @@ onMounted(doRedirect)
   border: 1px solid var(--border-subtle);
   border-radius: 10px;
 }
+
+.expired-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--warning, #f59e0b);
+  background: rgba(245,158,11,0.08);
+  border: 1px solid rgba(245,158,11,0.2);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  width: 100%;
+  box-sizing: border-box;
+}
 </style>

frontend/src/views/Settings.vue

@@ -70,6 +70,35 @@
         </div>
       </div>
     </div>
+
+    <!-- 关于页面编辑 -->
+    <div class="settings-card" style="margin-top: 20px">
+      <div class="card-header">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px; margin-right: 8px">
+          <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        关于页面内容
+      </div>
+      <div class="card-body">
+        <p class="setting-desc">支持 Markdown 格式，保存后在「关于」页面展示。</p>
+        <div class="about-editor-wrap">
+          <textarea
+            v-model="aboutContent"
+            class="about-textarea"
+            placeholder="在此输入 Markdown 内容，例如：&#10;# 系统名称&#10;&#10;版本、联系方式、使用说明等…"
+            :disabled="aboutSaving"
+          ></textarea>
+        </div>
+        <div class="form-footer">
+          <button class="save-btn" :disabled="aboutSaving" @click="saveAbout">
+            <svg v-if="aboutSaving" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spinning">
+              <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+            </svg>
+            {{ aboutSaving ? '保存中…' : '保存内容' }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -77,6 +106,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { ElMessage } from '../utils/message'
 import { getSettings, updateCheckInterval } from '../api/settings'
+import request from '../utils/request'
 
 const intervalMinutes = ref(30)
 const currentSeconds = ref(1800)
@@ -148,9 +178,32 @@ const save = async () => {
 
 onMounted(() => {
   load()
+  loadAbout()
   const timer = setInterval(load, 10000)
   onUnmounted(() => clearInterval(timer))
 })
+
+const aboutContent = ref('')
+const aboutSaving = ref(false)
+
+const loadAbout = async () => {
+  try {
+    const { data } = await request.get('/settings/about')
+    aboutContent.value = data.content || ''
+  } catch {}
+}
+
+const saveAbout = async () => {
+  aboutSaving.value = true
+  try {
+    await request.put('/settings/about', { content: aboutContent.value })
+    ElMessage.success('关于页面内容已保存')
+  } catch (e) {
+    ElMessage.error(e?.response?.data?.detail || '保存失败')
+  } finally {
+    aboutSaving.value = false
+  }
+}
 </script>
 
 <style scoped>
@@ -344,6 +397,36 @@ onMounted(() => {
   animation: spin 0.8s linear infinite;
 }
 
+.about-editor-wrap {
+  margin: 12px 0;
+}
+
+.about-textarea {
+  width: 100%;
+  min-height: 280px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.7;
+  padding: 12px 14px;
+  resize: vertical;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.about-textarea:focus {
+  border-color: var(--accent);
+}
+
+.about-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 @media (max-width: 767px) {
   .settings-page {
     padding: 16px 12px;