登录页UI及长时间未操作锁定逻辑优化

docs/plans/2026-03-04-ctms-enterprise-ui-design.md

@@ -0,0 +1,152 @@
+# CTMS 企业级 UI 改造设计方案（第一阶段）
+
+## 1. 目标与边界
+
+### 1.1 North Star（1-2 周）
+将 CTMS 从“功能可用”升级为“管理层一眼认可的企业级系统”，聚焦：
+
+1. 视觉统一：10 个核心页面采用同一套视觉语言。
+2. 信息层级清晰：标题、指标、风险、操作区一眼分层。
+3. 专业可信：克制、高密度但不混乱、细节一致。
+
+### 1.2 In Scope（第一阶段）
+
+1. 全局壳层：侧边栏、顶栏、面包屑、页面头、卡片容器。
+2. 设计基础：色彩/字体/间距/圆角/阴影/状态色 token 统一。
+3. 高曝光 10 页：
+   - `/project/overview`
+   - `/project/milestones`
+   - `/subjects`
+   - `/risk-issues/sae`
+   - `/risk-issues/pd`
+   - `/risk-issues/monitoring-visits`
+   - `/fees/contracts`
+   - `/fees/special`
+   - `/file-versions`
+   - `/admin/projects/:projectId`
+4. 轻交互：筛选区、表格工具栏、主次按钮层级、空态/加载态统一。
+
+### 1.3 Out of Scope（第一阶段不做）
+
+1. 业务流程重构和权限逻辑改动。
+2. 新增复杂图表引擎或大规模前端架构迁移。
+3. 全量页面一次性翻新。
+
+## 2. 视觉方向与设计系统基线
+
+### 2.1 视觉方向
+
+**Executive Clinical Minimalism（管理层临床极简）**
+
+关键词：克制、秩序、可信、少而精。
+避免：花哨渐变、互联网运营感、过度装饰。
+
+### 2.2 品牌识别锚点
+
+1. 深海军蓝 + 冷灰主色体系，传达管理层报告感。
+2. 高对比标题 + 低饱和数据面，强化信息主次。
+3. 统一壳层卡片语言，确保跨页面一致识别。
+
+### 2.3 最小设计系统（MDS）
+
+1. Tokens
+   - Color：`brand / text / bg / border / status`
+   - Type：`Display（标题） + UI（正文）` 双字体体系
+   - Space：8pt 网格（`4/8/12/16/24/32`）
+   - Radius/Shadow：统一 3 档，页面禁止自定义分叉
+2. 组件皮肤（Element Plus 主题化）
+   - Button（主/次/危险/幽灵）
+   - Input/Select/DatePicker
+   - Table（表头、行高、hover、密度）
+   - Card/Section Header/Tag
+3. 交互规则
+   - 页面主按钮固定在右上主操作区
+   - 筛选条统一（左筛选、右动作）
+   - 表格区统一“工具栏-表格-分页”三段结构
+
+### 2.4 第一阶段质量门槛
+
+1. 10 页视觉一致性 >= 90%。
+2. 不出现第三套颜色、第三套圆角、第三套按钮风格。
+3. 1366 桌面与 iPad 宽度保持结构稳定。
+
+## 3. 优先级与里程碑
+
+### 3.1 优先级
+
+#### P0（必须完成）
+1. 全局壳层统一：`Layout.vue + main.css + unified-page.css`。
+2. 10 个核心页面统一改造（见 In Scope）。
+3. 统一状态体系：加载态、空态、错误态、禁用态、风险高亮态。
+
+#### P1（有余量时）
+1. `/workbench` 视觉升级。
+2. 表单页统一（新建/编辑页头、分组、主次按钮）。
+3. 克制型关键动效（入场/hover）。
+
+#### P2（后续阶段）
+1. 全模块扩展（知识库、启动授权细分页）。
+2. 深度交互优化（跨页筛选记忆、快捷操作）。
+3. 主题扩展（暗色/品牌变体，按需）。
+
+### 3.2 两周里程碑
+
+#### M1（第 1-3 天）：视觉基线锁定
+1. 冻结 tokens（颜色/字体/间距/阴影/圆角）。
+2. 产出 3 类样板页（概览、列表、详情）。
+3. 评审后锁定不可随意改动项。
+
+#### M2（第 4-7 天）：高曝光页面落地（第一批）
+1. 完成 P0 页面中的 6 页。
+2. 统一页面头、筛选条、表格工具栏、分页区。
+3. 首轮一致性巡检与收敛。
+
+#### M3（第 8-10 天）：P0 收敛（第二批）
+1. 完成剩余 4 页。
+2. 统一空态/加载态/错误态。
+3. 窄屏最小可用适配。
+
+#### M4（第 11-14 天）：验收与打磨
+1. 演示路径串联：概览 -> 风险 -> 进度 -> 费用。
+2. 视觉一致性检查（目标 >= 90%）。
+3. 性能与可访问性快速校验并修复阻断项。
+
+## 4. 执行架构与风险控制
+
+### 4.1 双轨并行执行
+
+1. 轨道 A（20%）：Design System 底座
+   - 固化 token、组件皮肤、壳层规范。
+2. 轨道 B（80%）：核心页面改造
+   - 严格按 P0 页面推进，仅做视觉 + 轻交互。
+
+### 4.2 工作机制
+
+1. 每日节奏：样板页 -> 批量套用 -> 巡检收敛。
+2. 每 2 天一次统一性评审（跨页面对齐）。
+3. 决策优先级：统一性 > 局部美化。
+
+### 4.3 主要风险与控制
+
+1. 风格分叉
+   - 控制：样式入口收敛到全局 token 与统一壳层 class。
+2. 时间被细节吞没
+   - 控制：先结构统一，后细节打磨；P1 不挤占 P0。
+3. 观感升级但管理层不买账
+   - 控制：围绕高管路径做演示脚本。
+4. 样式改动引入回归
+   - 控制：每页改造后执行关键路径 smoke（筛选/跳转/分页/导出）。
+
+## 5. 第一阶段验收清单
+
+1. 统一性：10 页通过同一套视觉检查项。
+2. 观感：15 分钟演示无明显风格跳变与信息噪声。
+3. 可用性：主操作、筛选、列表关系明确。
+4. 稳定性：桌面与窄屏无结构破坏。
+5. 风险控制：无新增业务逻辑缺陷。
+
+## 6. 决策结论
+
+1. 采用“Design System 20% + 页面改造 80%”双轨并行。
+2. 第一阶段严格完成 P0；P1 仅在余量下执行。
+3. 下一步进入实施计划拆解（writing-plans）。

docs/plans/2026-03-04-ctms-enterprise-ui-implementation.md

@@ -0,0 +1,465 @@
+# CTMS Enterprise UI Refresh Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Deliver a management-grade, visually unified CTMS UI across 10 core pages in 1-2 weeks, without changing business logic.
+
+**Architecture:** Use a dual-track rollout: (A) minimal design-system hardening (tokens + shell + shared states), then (B) apply the same UI contract across prioritized pages. All page work must consume centralized CSS variables and shared shell patterns; page-local visual forks are disallowed.
+
+**Tech Stack:** Vue 3, TypeScript, Vite, Element Plus, CSS variables
+
+---
+
+Skills to apply during execution: `@test-driven-development`, `@frontend-design`, `@verification-before-completion`, `@requesting-code-review`.
+
+### Task 1: Add UI Contract Guardrails (Automated Checks)
+
+**Files:**
+- Create: `frontend/scripts/verify-ui-contract.mjs`
+- Modify: `frontend/package.json`
+- Test: `frontend/scripts/verify-ui-contract.mjs`
+
+**Step 1: Write the failing test**
+
+Create `frontend/scripts/verify-ui-contract.mjs`:
+
+```js
+import { readFileSync } from "node:fs";
+
+const main = readFileSync("src/styles/main.css", "utf8");
+const unified = readFileSync("src/styles/unified-page.css", "utf8");
+
+const requiredMainTokens = [
+  "--ctms-primary",
+  "--ctms-text-main",
+  "--ctms-bg-base",
+  "--ctms-radius",
+  "--ctms-shadow"
+];
+
+const requiredUnifiedTokens = [
+  "--unified-shell-bg",
+  "--unified-shell-radius",
+  ".unified-action-bar",
+  ".unified-section"
+];
+
+const missing = [
+  ...requiredMainTokens.filter((t) => !main.includes(t)),
+  ...requiredUnifiedTokens.filter((t) => !unified.includes(t))
+];
+
+if (missing.length) {
+  console.error("UI contract check failed. Missing:", missing.join(", "));
+  process.exit(1);
+}
+
+console.log("UI contract check passed");
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && node scripts/verify-ui-contract.mjs`
+Expected: FAIL (`ENOENT` for script file before creation, then missing-token failures until Task 2/3 done)
+
+**Step 3: Write minimal implementation**
+
+Update `frontend/package.json` scripts:
+
+```json
+{
+  "scripts": {
+    "ui:contract": "node scripts/verify-ui-contract.mjs"
+  }
+}
+```
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: PASS with `UI contract check passed` after Tasks 2/3 complete.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/scripts/verify-ui-contract.mjs frontend/package.json
+git commit -m "chore(ui): add enterprise ui contract checks"
+```
+
+### Task 2: Harden Global Design Tokens (Single Source of Truth)
+
+**Files:**
+- Modify: `frontend/src/styles/main.css`
+- Test: `frontend/scripts/verify-ui-contract.mjs`
+
+**Step 1: Write the failing test**
+
+Add new required tokens into `requiredMainTokens` in `verify-ui-contract.mjs`:
+
+```js
+"--ctms-brand-900",
+"--ctms-brand-700",
+"--ctms-neutral-100",
+"--ctms-neutral-300",
+"--ctms-focus-ring"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL listing the newly required tokens as missing.
+
+**Step 3: Write minimal implementation**
+
+In `frontend/src/styles/main.css`, define enterprise tokens in `:root`:
+
+```css
+:root {
+  --ctms-brand-900: #13243a;
+  --ctms-brand-700: #24496f;
+  --ctms-neutral-100: #f5f7fa;
+  --ctms-neutral-300: #d5dce5;
+  --ctms-focus-ring: 0 0 0 3px rgba(36, 73, 111, 0.2);
+}
+```
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: PASS for these tokens.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/styles/main.css frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): add enterprise token baseline"
+```
+
+### Task 3: Standardize Shell Layout & Page Container Contract
+
+**Files:**
+- Modify: `frontend/src/styles/unified-page.css`
+- Modify: `frontend/src/components/Layout.vue`
+- Test: `frontend/scripts/verify-ui-contract.mjs`
+
+**Step 1: Write the failing test**
+
+Extend `requiredUnifiedTokens` with:
+
+```js
+".ctms-page-shell",
+".ctms-page-header-row",
+".ctms-page-content-grid"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL showing missing shell classes.
+
+**Step 3: Write minimal implementation**
+
+Add shell classes in `unified-page.css`:
+
+```css
+.ctms-page-shell { padding: 16px 20px 20px; }
+.ctms-page-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+.ctms-page-content-grid { display: grid; gap: 12px; }
+```
+
+In `Layout.vue`, ensure routed views are wrapped by a stable shell root class.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/styles/unified-page.css frontend/src/components/Layout.vue frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): enforce shared page shell contract"
+```
+
+### Task 4: Create Shared List-Page Visual Pattern
+
+**Files:**
+- Modify: `frontend/src/views/ia/ProjectMilestones.vue`
+- Modify: `frontend/src/views/ia/SubjectManagement.vue`
+- Modify: `frontend/src/views/ia/RiskIssueSae.vue`
+- Modify: `frontend/src/views/ia/RiskIssuePd.vue`
+- Modify: `frontend/src/views/ia/RiskIssueMonitoringVisits.vue`
+- Test: `frontend/src/views/ia/*.vue`
+
+**Step 1: Write the failing test**
+
+In `verify-ui-contract.mjs`, add per-page checks that each target file includes:
+
+```js
+"ctms-page-shell",
+"unified-action-bar",
+"ctms-table-card"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL on one or more target views.
+
+**Step 3: Write minimal implementation**
+
+Refactor each page template to the same structure:
+
+```vue
+<div class="ctms-page-shell">
+  <section class="unified-action-bar">...</section>
+  <section class="unified-shell ctms-table-card">...</section>
+</div>
+```
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/views/ia/ProjectMilestones.vue frontend/src/views/ia/SubjectManagement.vue frontend/src/views/ia/RiskIssueSae.vue frontend/src/views/ia/RiskIssuePd.vue frontend/src/views/ia/RiskIssueMonitoringVisits.vue frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): unify list-page enterprise visual pattern"
+```
+
+### Task 5: Upgrade Executive Dashboard Surfaces
+
+**Files:**
+- Modify: `frontend/src/views/ia/ProjectOverview.vue`
+- Modify: `frontend/src/components/KpiCard.vue`
+- Modify: `frontend/src/styles/unified-page.css`
+- Test: `frontend/src/views/ia/ProjectOverview.vue`
+
+**Step 1: Write the failing test**
+
+Add checks requiring overview page contains:
+
+```js
+"ctms-page-shell",
+"kpi",
+"unified-section"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL until overview/kpi structure is aligned.
+
+**Step 3: Write minimal implementation**
+
+- Ensure KPI cards use unified spacing, title scale, value prominence.
+- Add deterministic class contract to KPI root:
+
+```vue
+<article class="kpi-card kpi-enterprise">...</article>
+```
+
+- Add style rules in `unified-page.css` for KPI rhythm and hierarchy.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/views/ia/ProjectOverview.vue frontend/src/components/KpiCard.vue frontend/src/styles/unified-page.css frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): elevate project overview for executive readout"
+```
+
+### Task 6: Standardize Finance & File Management Pages
+
+**Files:**
+- Modify: `frontend/src/views/fees/ContractFees.vue`
+- Modify: `frontend/src/views/fees/SpecialExpenses.vue`
+- Modify: `frontend/src/views/ia/FileVersionManagement.vue`
+- Test: `frontend/src/views/fees/*.vue`, `frontend/src/views/ia/FileVersionManagement.vue`
+
+**Step 1: Write the failing test**
+
+Require common classes in target pages:
+
+```js
+"ctms-page-shell",
+"unified-action-bar",
+"unified-shell"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL for non-conforming pages.
+
+**Step 3: Write minimal implementation**
+
+Refactor templates to shared contract and align action hierarchy:
+- Primary action right-aligned.
+- Secondary actions grouped.
+- Filter and table blocks separated by unified sections.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/views/fees/ContractFees.vue frontend/src/views/fees/SpecialExpenses.vue frontend/src/views/ia/FileVersionManagement.vue frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): unify finance and file management surfaces"
+```
+
+### Task 7: Standardize Admin High-Visibility Project Page
+
+**Files:**
+- Modify: `frontend/src/views/admin/ProjectDetail.vue`
+- Modify: `frontend/src/styles/unified-page.css`
+- Test: `frontend/src/views/admin/ProjectDetail.vue`
+
+**Step 1: Write the failing test**
+
+Add contract checks for `ProjectDetail.vue` requiring:
+
+```js
+"ctms-page-shell",
+"unified-action-bar",
+"unified-section"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL until shell contract is applied.
+
+**Step 3: Write minimal implementation**
+
+- Normalize section titles, spacing, card treatment.
+- Remove page-specific visual overrides that conflict with token system.
+- Keep business fields and logic unchanged.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/views/admin/ProjectDetail.vue frontend/src/styles/unified-page.css frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): align admin project detail with enterprise system"
+```
+
+### Task 8: Unify Loading / Empty / Error States
+
+**Files:**
+- Modify: `frontend/src/components/StateLoading.vue`
+- Modify: `frontend/src/components/StateEmpty.vue`
+- Modify: `frontend/src/components/StateError.vue`
+- Modify: `frontend/src/styles/main.css`
+- Test: `frontend/src/components/State*.vue`
+
+**Step 1: Write the failing test**
+
+Add checks requiring all three state components include:
+
+```js
+"ctms-state",
+"ctms-state-title",
+"ctms-state-desc"
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run ui:contract`
+Expected: FAIL for missing class contract.
+
+**Step 3: Write minimal implementation**
+
+Refactor each component to common structure:
+
+```vue
+<section class="ctms-state">
+  <h3 class="ctms-state-title">...</h3>
+  <p class="ctms-state-desc">...</p>
+</section>
+```
+
+Add shared state styles in `main.css`.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check`
+Expected: PASS.
+
+**Step 5: Commit**
+
+```bash
+git add frontend/src/components/StateLoading.vue frontend/src/components/StateEmpty.vue frontend/src/components/StateError.vue frontend/src/styles/main.css frontend/scripts/verify-ui-contract.mjs
+git commit -m "feat(ui): unify loading empty error states"
+```
+
+### Task 9: Verification, Demo Path, and Release Gate
+
+**Files:**
+- Create: `docs/ui/enterprise-ui-acceptance-checklist.md`
+- Modify: `docs/release-checklist.md`
+- Test: manual smoke + build checks
+
+**Step 1: Write the failing test**
+
+Create acceptance checklist with explicit pass/fail items. Mark all as pending initially.
+
+```md
+- [ ] Overview and milestones visual consistency
+- [ ] Risk pages visual consistency
+- [ ] Finance pages visual consistency
+- [ ] File/admin detail visual consistency
+- [ ] Desktop and iPad width checks
+- [ ] Management demo path continuity
+```
+
+**Step 2: Run test to verify it fails**
+
+Run: `cd frontend && npm run type-check && npm run build`
+Expected: PASS technically, but acceptance checklist remains FAIL/PENDING.
+
+**Step 3: Write minimal implementation**
+
+- Execute manual smoke on target routes.
+- Update checklist to PASS with reviewer/date notes.
+- Add release gating notes to `docs/release-checklist.md`.
+
+**Step 4: Run test to verify it passes**
+
+Run: `cd frontend && npm run ui:contract && npm run type-check && npm run build`
+Expected: PASS for all commands and checklist completed.
+
+**Step 5: Commit**
+
+```bash
+git add docs/ui/enterprise-ui-acceptance-checklist.md docs/release-checklist.md
+git commit -m "docs(ui): add enterprise refresh acceptance and release gates"
+```
+
+## Milestone Mapping
+
+1. **M1 (Day 1-3):** Tasks 1-3 + sample page alignment.
+2. **M2 (Day 4-7):** Tasks 4-5 (first 6 core pages).
+3. **M3 (Day 8-10):** Tasks 6-8 (remaining 4 pages + states).
+4. **M4 (Day 11-14):** Task 9 + demo rehearsal + release gate.
+
+## Definition of Done
+
+1. `npm run ui:contract` passes.
+2. `npm run type-check` passes.
+3. `npm run build` passes.
+4. Acceptance checklist fully marked PASS with reviewer/date.
+5. No business logic behavior regressions in smoke path.

docs/plans/2026-03-05-rd-monitor-design.md

@@ -0,0 +1,97 @@
+# 研发项目进展监测系统（rd-monitor）设计文档
+
+## 1. 目标与范围
+- 基于现有 CTMS 的界面/组件经验，建设一个完全独立的研发项目进展监测系统。
+- 新系统独立前后端、独立数据库、独立鉴权与权限体系。
+- 首期仅实现 PDF《项目进度概览 v2》中的核心功能：概览展示、进度录入、历史变更、导出、项目隐藏规则。
+
+## 2. 系统边界
+- 独立仓库：`rd-monitor`
+- 技术栈：Vue3 + Element Plus + FastAPI + SQLAlchemy + Alembic + PostgreSQL
+- 与 CTMS 关系：仅复用可迁移的组件/样式实现，不依赖 CTMS API 与 CTMS 数据表。
+
+## 3. 数据模型
+### 3.1 users
+- `id`
+- `username`
+- `email`
+- `password_hash`
+- `role` (`ADMIN`/`PM`/`VIEWER`)
+- `is_active`
+- `created_at`
+
+### 3.2 projects
+- `id`
+- `project_code`（如 HP-001）
+- `project_name`
+- `regulatory_path`
+- `status`（`ACTIVE`/`APPROVED`/`TERMINATED`）
+- `created_at`
+
+### 3.3 stage_templates
+- `id`
+- `stage_key`
+- `stage_name`
+- `order_no`
+- `regulatory_paths`（JSON 数组；空表示通用）
+- `is_active`
+
+### 3.4 project_stages
+- `id`
+- `project_id`
+- `stage_template_id`
+- `order_no`
+- `planned_start_date`
+- `planned_end_date`
+- `actual_finish_date`
+- `actual_finish_flag`（`DONE`/`NOT_APPLICABLE`/`PENDING`）
+- `adjust_reason`
+- `remark`
+- `updated_at`
+
+### 3.5 project_stage_change_logs
+- `id`
+- `project_stage_id`
+- `changed_by`
+- `before_json`
+- `after_json`
+- `comment`
+- `created_at`
+
+## 4. 状态规则（按 PDF）
+- `已完成`：`actual_finish_flag = DONE` 且 `actual_finish_date` 有值。
+- `未进行`：`actual_finish_flag = NOT_APPLICABLE`（“此阶段不开展”）。
+- `正进行`：当前阶段未完成/未进行，且上一阶段状态为 `已完成`。
+- `未开始`：其余情况。
+- 概览显示日期：使用 `planned_end_date`。
+- 项目隐藏：`APPROVED` 或 `TERMINATED` 不在概览列表中显示。
+
+## 5. 页面与交互
+- 登录页（JWT）
+- 概览页：按项目展示阶段节点、计划完成日期、状态图例
+- 录入页：项目阶段表格编辑，支持“此阶段不开展”
+- 历史页：阶段变更历史时间线/表格
+- 导出：授权用户导出 CSV
+
+## 6. 权限模型
+- `ADMIN`：用户/项目/模板管理 + 全部导出
+- `PM`：项目进度录入、历史查看、导出
+- `VIEWER`：只读（概览、历史）
+
+## 7. API（首期）
+- `POST /api/v1/auth/login`
+- `GET /api/v1/auth/me`
+- `GET /api/v1/projects`
+- `POST /api/v1/projects`（ADMIN）
+- `GET /api/v1/stage-templates`
+- `POST /api/v1/stage-templates`（ADMIN）
+- `GET /api/v1/projects/{id}/stages`
+- `PATCH /api/v1/projects/{id}/stages/{stageId}`（PM/ADMIN）
+- `GET /api/v1/projects/{id}/stages/history`
+- `GET /api/v1/projects/stages/export?format=csv`（PM/ADMIN）
+
+## 8. 验收标准
+- 状态计算规则与 PDF 一致
+- 录入保存会生成历史记录
+- 导出字段与录入字段一致
+- `APPROVED/TERMINATED` 项目不在概览展示

docs/plans/2026-03-05-rd-monitor-implementation.md

@@ -0,0 +1,137 @@
+# rd-monitor Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** 搭建独立仓库 `rd-monitor`，实现研发项目进展监测 MVP（独立鉴权、项目阶段录入、状态计算、历史留痕、CSV 导出、前端可用界面）。
+
+**Architecture:** 后端采用 FastAPI + SQLAlchemy + PostgreSQL，提供鉴权、项目阶段、历史、导出 API；前端采用 Vue3 + Element Plus，提供登录、概览、录入、历史页面。通过 Docker Compose 启动前后端与独立 PostgreSQL。
+
+**Tech Stack:** Vue3, Vite, Element Plus, FastAPI, SQLAlchemy, Alembic, PostgreSQL, JWT, Pytest
+
+---
+
+### Task 1: 初始化仓库结构与运行骨架
+
+**Files:**
+- Create: `/Users/zcc/MyCTMS/rd-monitor/README.md`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/docker-compose.yml`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/backend/requirements.txt`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/backend/.env.example`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/package.json`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/vite.config.ts`
+
+**Step 1: Write the failing test**
+- 编写后端 smoke 测试，断言 `/healthz` 返回 200（此时接口不存在，应失败）。
+
+**Step 2: Run test to verify it fails**
+- Run: `cd /Users/zcc/MyCTMS/rd-monitor/backend && pytest -q`
+- Expected: FAIL（缺少 app 或路由）。
+
+**Step 3: Write minimal implementation**
+- 建立 FastAPI app 与 `/healthz` 路由，补全基础依赖与 compose。
+
+**Step 4: Run test to verify it passes**
+- Run: `cd /Users/zcc/MyCTMS/rd-monitor/backend && pytest -q`
+- Expected: PASS。
+
+**Step 5: Commit**
+- `git add ... && git commit -m "chore: bootstrap rd-monitor skeleton"`
+
+### Task 2: 实现后端核心领域模型与状态计算
+
+**Files:**
+- Create: `/Users/zcc/MyCTMS/rd-monitor/backend/app/models/*.py`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/backend/app/services/progress.py`
+- Test: `/Users/zcc/MyCTMS/rd-monitor/backend/tests/test_progress_status.py`
+
+**Step 1: Write the failing test**
+- 用测试覆盖阶段状态计算（已完成/未进行/正进行/未开始）与项目过滤规则。
+
+**Step 2: Run test to verify it fails**
+- Run: `pytest tests/test_progress_status.py -q`
+- Expected: FAIL。
+
+**Step 3: Write minimal implementation**
+- 实现状态计算函数与项目过滤函数。
+
+**Step 4: Run test to verify it passes**
+- Run: `pytest tests/test_progress_status.py -q`
+- Expected: PASS。
+
+**Step 5: Commit**
+- `git commit -m "feat: add progress status domain rules"`
+
+### Task 3: 实现鉴权、项目阶段 API、历史记录与导出
+
+**Files:**
+- Create/Modify: `/Users/zcc/MyCTMS/rd-monitor/backend/app/api/*.py`
+- Create/Modify: `/Users/zcc/MyCTMS/rd-monitor/backend/app/schemas/*.py`
+- Create/Modify: `/Users/zcc/MyCTMS/rd-monitor/backend/app/core/security.py`
+- Test: `/Users/zcc/MyCTMS/rd-monitor/backend/tests/test_stage_api.py`
+
+**Step 1: Write the failing test**
+- 测试登录、查询项目阶段、更新阶段后历史新增、导出 CSV、权限拦截。
+
+**Step 2: Run test to verify it fails**
+- Run: `pytest tests/test_stage_api.py -q`
+- Expected: FAIL。
+
+**Step 3: Write minimal implementation**
+- 完成相关 API 与依赖。
+
+**Step 4: Run test to verify it passes**
+- Run: `pytest tests/test_stage_api.py -q`
+- Expected: PASS。
+
+**Step 5: Commit**
+- `git commit -m "feat: implement progress APIs with auth history and export"`
+
+### Task 4: 实现前端登录、概览、录入、历史页面
+
+**Files:**
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/src/views/*.vue`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/src/router/index.ts`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/src/api/*.ts`
+- Create: `/Users/zcc/MyCTMS/rd-monitor/frontend/src/components/*.vue`
+
+**Step 1: Write the failing test**
+- 首期用类型检查/构建作为回归保护，先运行应失败（页面未实现）。
+
+**Step 2: Run test to verify it fails**
+- Run: `cd /Users/zcc/MyCTMS/rd-monitor/frontend && npm run build`
+- Expected: FAIL。
+
+**Step 3: Write minimal implementation**
+- 实现可登录、可浏览项目阶段、可编辑阶段、可看历史、可导出。
+
+**Step 4: Run test to verify it passes**
+- Run: `npm run build`
+- Expected: PASS。
+
+**Step 5: Commit**
+- `git commit -m "feat: add frontend pages for monitoring workflow"`
+
+### Task 5: 联调与最终验证
+
+**Files:**
+- Modify: `/Users/zcc/MyCTMS/rd-monitor/README.md`
+
+**Step 1: Write the failing test**
+- 先运行端到端 smoke（未配置好前应失败）。
+
+**Step 2: Run test to verify it fails**
+- Run: `docker compose up --build -d && curl -f http://localhost:8010/healthz`
+- Expected: 初次 FAIL 或服务未就绪。
+
+**Step 3: Write minimal implementation**
+- 修正配置/环境变量/文档。
+
+**Step 4: Run test to verify it passes**
+- Run: `docker compose up --build -d`
+- Run: `curl -f http://localhost:8010/healthz`
+- Run: `cd backend && pytest -q`
+- Run: `cd frontend && npm run build`
+- Expected: 全部 PASS。
+
+**Step 5: Commit**
+- `git commit -m "docs: finalize rd-monitor setup and verification"`

frontend/package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "test:unit": "vitest run --environment jsdom",
     "type-check": "vue-tsc --noEmit",
     "ui:contract": "node scripts/verify-ui-contract.mjs"
   },
@@ -21,8 +22,10 @@
   "devDependencies": {
     "@types/node": "^20.10.5",
     "@vitejs/plugin-vue": "^6.0.3",
+    "jsdom": "^26.1.0",
     "typescript": "^5.3.3",
     "vite": "^7.3.1",
+    "vitest": "^3.2.4",
     "vue-tsc": "^3.2.2"
   }
 }

frontend/src/components/LockScreenModal.vue

@@ -51,7 +51,7 @@ const pad2 = (value: number) => String(value).padStart(2, "0");
 
 const autoLogoutCountdown = computed(() => {
   const fallbackDeadlineAt =
-    Math.min(session.lastUserActiveAt, session.lastNetworkActiveAt) + AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
+    Math.max(session.lastUserActiveAt, session.lastNetworkActiveAt) + AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
   const deadlineAt = session.lockAutoLogoutDeadlineAt || fallbackDeadlineAt;
   const remainMs = Math.max(0, deadlineAt - nowTs.value);
   const remainSec = Math.floor(remainMs / 1000);

frontend/src/session/sessionManager.test.ts

@@ -0,0 +1,86 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+vi.mock("../router", () => ({
+  default: {
+    replace: vi.fn(),
+  },
+}));
+
+vi.mock("../api/authClient", () => ({
+  extendToken: vi.fn(),
+  unlockSession: vi.fn(),
+}));
+
+describe("session manager idle recovery", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.useFakeTimers();
+    setActivePinia(createPinia());
+    const storage = (() => {
+      const data = new Map<string, string>();
+      return {
+        getItem: (key: string) => data.get(key) ?? null,
+        setItem: (key: string, value: string) => {
+          data.set(key, String(value));
+        },
+        removeItem: (key: string) => {
+          data.delete(key);
+        },
+        clear: () => {
+          data.clear();
+        },
+      };
+    })();
+    Object.defineProperty(window, "localStorage", {
+      value: storage,
+      configurable: true,
+    });
+    Object.defineProperty(window, "sessionStorage", {
+      value: storage,
+      configurable: true,
+    });
+    Object.defineProperty(window, "BroadcastChannel", {
+      value: class {
+        onmessage: ((event: MessageEvent) => void) | null = null;
+        postMessage() {}
+        close() {}
+      },
+      configurable: true,
+    });
+  });
+
+  it("locks instead of refreshing activity after long inactivity when user activity resumes", async () => {
+    vi.setSystemTime(new Date("2026-03-10T01:00:00.000Z"));
+    const { useSessionStore } = await import("../store/session");
+    const { IDLE_TIMEOUT_MINUTES, AUTO_LOGOUT_TIMEOUT_HOURS, markUserActive } = await import("./sessionManager");
+    const session = useSessionStore();
+    const oldTs = Date.now() - (IDLE_TIMEOUT_MINUTES * 60 * 1000 + 1_000);
+
+    session.recordUserActivity(oldTs);
+    session.recordNetworkActivity(oldTs);
+
+    markUserActive(Date.now());
+
+    expect(session.locked).toBe(true);
+    expect(session.lockReason).toBe("idle");
+    expect(session.lockAutoLogoutDeadlineAt).toBe(oldTs + AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000);
+  });
+
+  it("locks instead of refreshing activity after long inactivity when network activity resumes", async () => {
+    vi.setSystemTime(new Date("2026-03-10T01:00:00.000Z"));
+    const { useSessionStore } = await import("../store/session");
+    const { IDLE_TIMEOUT_MINUTES, AUTO_LOGOUT_TIMEOUT_HOURS, markNetworkActive } = await import("./sessionManager");
+    const session = useSessionStore();
+    const oldTs = Date.now() - (IDLE_TIMEOUT_MINUTES * 60 * 1000 + 1_000);
+
+    session.recordUserActivity(oldTs);
+    session.recordNetworkActivity(oldTs);
+
+    markNetworkActive(Date.now());
+
+    expect(session.locked).toBe(true);
+    expect(session.lockReason).toBe("idle");
+    expect(session.lockAutoLogoutDeadlineAt).toBe(oldTs + AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000);
+  });
+});

frontend/src/session/sessionManager.ts

@@ -25,6 +25,26 @@ let extendPromise: Promise<{ token: string | null; authFailed: boolean }> | null
 let initialized = false;
 const channel = typeof BroadcastChannel !== "undefined" ? new BroadcastChannel("ctms-auth") : null;
 
+const getLastActiveAt = (session: ReturnType<typeof useSessionStore>) =>
+  Math.max(session.lastUserActiveAt, session.lastNetworkActiveAt);
+
+const reconcileSessionState = (now: number = Date.now()) => {
+  const session = useSessionStore();
+  if (session.locked) return false;
+  const idleTimeoutMs = IDLE_TIMEOUT_MINUTES * 60 * 1000;
+  const autoLogoutMs = AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
+  const lastActiveAt = getLastActiveAt(session);
+  if (now - lastActiveAt > autoLogoutMs) {
+    forceLogout(LOGOUT_REASON_TIMEOUT);
+    return false;
+  }
+  if (now - lastActiveAt > idleTimeoutMs) {
+    lockSession("idle");
+    return false;
+  }
+  return true;
+};
+
 const broadcast = (message: BroadcastMessage) => {
   if (channel) {
     channel.postMessage(message);
@@ -81,9 +101,9 @@ const scheduleIdleCheck = () => {
   }
   const idleTimeoutMs = IDLE_TIMEOUT_MINUTES * 60 * 1000;
   const autoLogoutMs = AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
-  const baseActiveAt = Math.min(session.lastUserActiveAt, session.lastNetworkActiveAt);
-  const idleRemain = baseActiveAt + idleTimeoutMs - now;
-  const logoutRemain = baseActiveAt + autoLogoutMs - now;
+  const lastActiveAt = getLastActiveAt(session);
+  const idleRemain = lastActiveAt + idleTimeoutMs - now;
+  const logoutRemain = lastActiveAt + autoLogoutMs - now;
   const nextCheck = Math.min(idleRemain, logoutRemain);
   if (nextCheck <= 0) {
     checkIdle();
@@ -103,19 +123,7 @@ const checkIdle = () => {
     scheduleIdleCheck();
     return;
   }
-  const idleTimeoutMs = IDLE_TIMEOUT_MINUTES * 60 * 1000;
-  const autoLogoutMs = AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
-  const now = Date.now();
-  const idleElapsed = now - session.lastUserActiveAt > idleTimeoutMs && now - session.lastNetworkActiveAt > idleTimeoutMs;
-  const autoLogoutElapsed =
-    now - session.lastUserActiveAt > autoLogoutMs && now - session.lastNetworkActiveAt > autoLogoutMs;
-  if (autoLogoutElapsed) {
-    forceLogout(LOGOUT_REASON_TIMEOUT);
-    return;
-  }
-  if (idleElapsed) {
-    lockSession("idle");
-  }
+  if (!reconcileSessionState(Date.now())) return;
   scheduleIdleCheck();
 };
 
@@ -131,6 +139,14 @@ export const initSessionManager = () => {
     markUserActive(now);
   };
   events.forEach((event) => window.addEventListener(event, onUserActivity, { passive: true }));
+  window.addEventListener("focus", () => {
+    checkIdle();
+  });
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) {
+      checkIdle();
+    }
+  });
   if (channel) {
     channel.onmessage = (event) => handleBroadcast(event.data as BroadcastMessage);
   }
@@ -150,6 +166,7 @@ export const initSessionManager = () => {
 export const markUserActive = (at: number = Date.now()) => {
   const session = useSessionStore();
   if (session.locked) return;
+  if (!reconcileSessionState(at)) return;
   session.recordUserActivity(at);
   broadcast({ type: "ACTIVE", at });
   scheduleIdleCheck();
@@ -158,6 +175,7 @@ export const markUserActive = (at: number = Date.now()) => {
 export const markNetworkActive = (at: number = Date.now()) => {
   const session = useSessionStore();
   if (session.locked) return;
+  if (!reconcileSessionState(at)) return;
   session.recordNetworkActivity(at);
   broadcast({ type: "NETWORK", at });
   scheduleIdleCheck();
@@ -169,7 +187,7 @@ export const lockSession = (reason: "idle" | "extend_failed" | "token_invalid")
   if (session.locked) return;
   const email = auth.user?.email || "";
   const autoLogoutMs = AUTO_LOGOUT_TIMEOUT_HOURS * 60 * 60 * 1000;
-  const deadlineAt = Math.min(session.lastUserActiveAt, session.lastNetworkActiveAt) + autoLogoutMs;
+  const deadlineAt = getLastActiveAt(session) + autoLogoutMs;
   session.lock(reason, email, deadlineAt);
   broadcast({ type: "LOCK", reason, email, deadlineAt });
   scheduleIdleCheck();
@@ -264,7 +282,7 @@ export const startTokenKeepAlive = () => {
     if (!expAt) return;
     const remaining = expAt - Date.now();
     const timeoutMs = IDLE_TIMEOUT_MINUTES * 60 * 1000;
-    const active = Date.now() - session.lastUserActiveAt < timeoutMs || Date.now() - session.lastNetworkActiveAt < timeoutMs;
+    const active = Date.now() - getLastActiveAt(session) < timeoutMs;
     if (active && remaining < EXTEND_EARLY_SECONDS * 1000) {
       void extendAccessToken("early");
     }

frontend/src/store/auth.test.ts

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { createPinia, setActivePinia } from "pinia";
+
+type StorageLike = {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+  removeItem: (key: string) => void;
+  clear: () => void;
+};
+
+const createStorage = (): StorageLike => {
+  const data = new Map<string, string>();
+  return {
+    getItem: (key) => data.get(key) ?? null,
+    setItem: (key, value) => {
+      data.set(key, String(value));
+    },
+    removeItem: (key) => {
+      data.delete(key);
+    },
+    clear: () => {
+      data.clear();
+    },
+  };
+};
+
+describe("auth store logout", () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    Object.defineProperty(window, "localStorage", {
+      value: createStorage(),
+      configurable: true,
+    });
+  });
+
+  it("clears session lock state when logging out", async () => {
+    const { useAuthStore } = await import("./auth");
+    const { useSessionStore } = await import("./session");
+    const session = useSessionStore();
+    const auth = useAuthStore();
+
+    session.lock("token_invalid", "demo@example.com", Date.now() + 60_000);
+    auth.logout();
+
+    expect(session.locked).toBe(false);
+    expect(session.lockReason).toBeNull();
+    expect(session.lockEmail).toBe("");
+  });
+});

frontend/src/store/auth.ts

@@ -43,11 +43,13 @@ export const useAuthStore = defineStore("auth", () => {
 
   const logout = () => {
     const studyStore = useStudyStore();
+    const sessionStore = useSessionStore();
     const userKey = user.value?.email || localStorage.getItem(LAST_LOGIN_EMAIL_KEY) || "";
     studyStore.rememberCurrentStudyForUser(userKey);
     token.value = null;
     user.value = null;
     forceLogin.value = false;
+    sessionStore.unlock();
     clearToken();
     studyStore.clearCurrentStudy();
   };

frontend/src/views/Login.vue

@@ -1,117 +1,101 @@
 <template>
-  <div class="login-container">
-    <!-- Vanta.js 网络背景 -->
-    <div ref="vantaCanvas" id="vanta-canvas" class="vanta-background"></div>
-    
-    <!-- 登录卡片 -->
-    <div class="login-wrapper">
-      <div class="max-w-md w-full card-container">
-        <div class="card-content">
-          <!-- 顶部装饰区域 -->
-          <div class="login-header" id="vanta-header">
-            <!-- 左上角：安全访问 -->
-            <div class="header-left">
-              <span class="secure-badge">安全访问</span>
-            </div>
-            
-            <!-- 中间：CTMS -->
-            <div class="header-center">
-              <div class="ctms-logo">CTMS</div>
-              <div class="header-divider"></div>
-            </div>
-          </div>
-          
-          <!-- 登录表单内容 -->
-          <div class="login-form-section">
-            <div class="form-label-section">
-              <span class="auth-badge">身份验证</span>
-              <h3 class="form-title">账户登录</h3>
-            </div>
-            
-            <el-form 
-              ref="formRef"
-              :model="form" 
-              :rules="rules"
-              @keyup.enter="onSubmit"
-              class="login-form"
+  <div class="login-wrapper">
+    <div class="login-bg-shape shape-1"></div>
+    <div class="login-bg-shape shape-2"></div>
+
+    <div class="login-container">
+      <div class="login-card">
+        <div class="login-header">
+          <div class="logo-box">
+            <svg
+              width="28"
+              height="28"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="logo-icon"
             >
-              <!-- 邮箱字段 -->
-              <div class="form-group">
-                <label for="email" class="input-label">邮箱</label>
-                <el-form-item prop="email">
-                  <el-input 
-                    id="email"
-                    v-model="form.email"
-                    type="email"
-                    placeholder="your@email.com"
-                    autocomplete="email"
-                    class="custom-input"
-                  />
-                </el-form-item>
-              </div>
-              
-              <!-- 密码字段 -->
-              <div class="form-group">
-                <div class="password-label-row">
-                  <label for="password" class="input-label">密码</label>
-                  <a href="#" class="forgot-link">忘记密码？</a>
-                </div>
-                <el-form-item prop="password">
-                  <el-input 
-                    id="password"
-                    v-model="form.password"
-                    type="password"
-                    placeholder="••••••••"
-                    autocomplete="current-password"
-                    show-password
-                    class="custom-input"
-                  />
-                </el-form-item>
-              </div>
-              
-              <!-- 记住设备 -->
-              <div class="remember-row">
-                <el-checkbox id="remember" v-model="form.remember" class="custom-checkbox">
-                  <span class="remember-text">记住此设备</span>
-                </el-checkbox>
-              </div>
-              
-              <!-- 登录按钮 -->
-              <div class="button-group">
-                <el-button 
-                  type="primary"
-                  :loading="loading"
-                  @click="onSubmit"
-                  class="login-btn"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" class="btn-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
-                  </svg>
-                  登录
-                </el-button>
-              </div>
-            </el-form>
-            
-            <!-- 底部信息 -->
-            <div class="footer-section">
-              <div class="footer-divider"></div>
-              <p class="footer-text">
-                还没有账户？ <RouterLink to="/register" class="footer-link">立即注册</RouterLink>
-              </p>
-              <div class="status-row">
-                <span class="status-dot"></span>
-                <span class="status-text">系统状态：正常运行</span>
-              </div>
-            </div>
+              <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
+              <path d="M2 17l10 5 10-5"></path>
+              <path d="M2 12l10 5 10-5"></path>
+            </svg>
           </div>
+          <h2 class="sys-title">CTMS 临床试验管理系统</h2>
+          <p class="sys-subtitle">Log in to your account</p>
         </div>
+
+        <el-form
+          ref="formRef"
+          :model="form"
+          :rules="rules"
+          @keyup.enter="onSubmit"
+          label-position="top"
+          class="login-form"
+        >
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              id="email"
+              v-model="form.email"
+              type="email"
+              placeholder="请输入邮箱"
+              size="large"
+              autocomplete="email"
+              class="login-input"
+            >
+              <template #prefix>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                  <circle cx="12" cy="7" r="4"></circle>
+                </svg>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="密码" prop="password">
+            <el-input
+              id="password"
+              v-model="form.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+              size="large"
+              autocomplete="current-password"
+              class="login-input"
+            >
+              <template #prefix>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                </svg>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <div class="remember-row">
+            <el-checkbox id="remember" v-model="form.remember" class="remember-checkbox">
+              <span class="remember-text">记住此设备</span>
+            </el-checkbox>
+          </div>
+
+          <el-button type="primary" :loading="loading" @click="onSubmit" size="large" class="login-btn">
+            登 录
+          </el-button>
+        </el-form>
+
+        <p class="footer-text">
+          还没有账户？
+          <RouterLink to="/register" class="footer-link">立即注册</RouterLink>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted, onUnmounted } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, type FormInstance, type FormRules } from "element-plus";
 import { useAuthStore } from "../store/auth";
@@ -124,7 +108,6 @@ const auth = useAuthStore();
 const router = useRouter();
 
 const formRef = ref<FormInstance>();
-const vantaCanvas = ref<HTMLDivElement>();
 const form = reactive({
   email: "",
   password: "",
@@ -140,9 +123,7 @@ const rules: FormRules<typeof form> = {
 };
 
 const loading = ref(false);
-let vantaEffect: any = null;
 
-// 初始化 Vanta.js 效果
 onMounted(() => {
   const logoutReason = consumeLogoutReason();
   if (logoutReason === LOGOUT_REASON_TIMEOUT) {
@@ -154,61 +135,8 @@ onMounted(() => {
     form.password = cached.password;
     form.remember = true;
   }
-  
-  // 动态加载 Three.js 和 Vanta.js
-  loadVantaEffect();
 });
 
-onUnmounted(() => {
-  if (vantaEffect) {
-    vantaEffect.destroy();
-  }
-});
-
-// 加载 Vanta.js 网络效果
-const loadVantaEffect = () => {
-  // 检查是否已加载
-  if ((window as any).VANTA && (window as any).THREE) {
-    initVanta();
-    return;
-  }
-
-  // 加载 Three.js
-  const threeScript = document.createElement('script');
-  threeScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js';
-  threeScript.onload = () => {
-    // 加载 Vanta.js NET 效果
-    const vantaScript = document.createElement('script');
-    vantaScript.src = 'https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js';
-    vantaScript.onload = () => {
-      initVanta();
-    };
-    document.head.appendChild(vantaScript);
-  };
-  document.head.appendChild(threeScript);
-};
-
-const initVanta = () => {
-  if (vantaCanvas.value && (window as any).VANTA) {
-    vantaEffect = (window as any).VANTA.NET({
-      el: vantaCanvas.value,
-      mouseControls: true,
-      touchControls: true,
-      gyroControls: false,
-      minHeight: 200.00,
-      minWidth: 200.00,
-      scale: 1.00,
-      scaleMobile: 1.00,
-      color: 0xd1d5db,
-      backgroundColor: 0x171717,
-      points: 8,
-      maxDistance: 20.00,
-      spacing: 18.00,
-      showDots: true
-    });
-  }
-};
-
 const onSubmit = async () => {
   if (!formRef.value) return;
   const valid = await formRef.value.validate();
@@ -251,364 +179,219 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
-/* 导入 Inter 字体 */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-/* 主容器 */
-.login-container {
-  position: fixed;
-  inset: 0;
-  background: #0a0a0a;
+.login-wrapper {
+  position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
-  font-family: 'Inter', sans-serif;
-}
-
-/* Vanta 背景 */
-.vanta-background {
-  position: fixed;
-  inset: 0;
+  background-color: #f8fafc;
   overflow: hidden;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
 
-/* 登录包装器 */
-.login-wrapper {
+.login-bg-shape {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  z-index: 0;
+  opacity: 0.6;
+  animation: float 10s ease-in-out infinite alternate;
+}
+
+.shape-1 {
+  width: 400px;
+  height: 400px;
+  background: #c0cdd7;
+  top: -100px;
+  left: -100px;
+}
+
+.shape-2 {
+  width: 500px;
+  height: 500px;
+  background: #dde5ec;
+  bottom: -150px;
+  right: -100px;
+  animation-delay: -5s;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  100% {
+    transform: translate(30px, 50px) scale(1.1);
+  }
+}
+
+.login-container {
   position: relative;
   z-index: 10;
   width: 100%;
-  max-width: 28rem;
+  max-width: 440px;
+  padding: 0 20px;
 }
 
-/* 卡片容器 - 带渐变边框效果 */
-.card-container {
-  position: relative;
-  z-index: 0;
+.login-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: 48px 40px 28px;
+  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
+  border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
-.card-container::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  background: linear-gradient(to bottom right, #525252, transparent, #262626);
-  border-radius: 0.75rem;
-  z-index: -1;
-}
-
-/* 卡片内容 */
-.card-content {
-  border-radius: 0.75rem;
-  overflow: hidden;
-  background: #171717;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-}
-
-/* 登录头部 */
 .login-header {
-  height: 140px;
-  position: relative;
-  background: #171717;
-  overflow: hidden;
+  text-align: center;
+  margin-bottom: 36px;
 }
 
-/* 左上角 */
-.header-left {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 10;
-}
-
-/* 中间区域 */
-.header-center {
-  position: absolute;
-  top: 70%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
+.logo-box {
+  display: inline-flex;
   align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: linear-gradient(135deg, #3f5d75, #24496f);
+  color: #ffffff;
+  border-radius: 16px;
+  margin-bottom: 20px;
+  box-shadow: 0 8px 20px -6px rgba(63, 93, 117, 0.4);
 }
 
-/* CTMS Logo */
-.ctms-logo {
-  font-size: 3.5rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 0.1em;
-  margin-bottom: 0.5rem;
-  text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
-  animation: glow 3s ease-in-out infinite;
+.sys-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0 0 8px;
+  letter-spacing: -0.5px;
 }
 
-@keyframes glow {
-  0%, 100% {
-    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.4));
-  }
-  50% {
-    filter: drop-shadow(0 0 16px rgba(102, 126, 234, 0.6));
-  }
-}
-
-.secure-badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  background: rgba(38, 38, 38, 0.8);
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  color: #a3a3a3;
-}
-
-.header-divider {
-  height: 0.25rem;
-  width: 3rem;
-  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
-  margin-top: 0.5rem;
-  border-radius: 9999px;
-}
-
-/* 登录表单区域 */
-.login-form-section {
-  padding: 1.5rem 1.5rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  background: #171717;
-}
-
-.form-label-section {
-  margin-bottom: 1.5rem;
-}
-
-.auth-badge {
-  display: inline-block;
-  padding: 0.25rem 0.5rem;
-  background: #262626;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  color: #a3a3a3;
-  margin-bottom: 0.5rem;
-}
-
-.form-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #e5e5e5;
+.sys-subtitle {
+  font-size: 14px;
+  color: #64748b;
   margin: 0;
 }
 
-/* 表单样式 */
-.login-form {
-  margin-bottom: 1.5rem;
+.login-form :deep(.el-form-item) {
+  margin-bottom: 22px;
 }
 
-.login-form :deep(.el-form-item) {
-  margin-bottom: 1rem;
+.login-form :deep(.el-form-item__label) {
+  font-weight: 600;
+  color: #475569;
+  font-size: 14px;
+  padding-bottom: 8px;
+  line-height: 1;
 }
 
 .login-form :deep(.el-form-item__error) {
-  color: #f87171;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
+  margin-top: 6px;
 }
 
-.form-group {
-  margin-bottom: 1rem;
+.login-input :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px #e2e8f0;
+  border-radius: 10px;
+  padding: 2px 14px;
+  background-color: #ffffff;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.input-label {
-  display: block;
-  color: #d4d4d4;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.login-input :deep(.el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px #cbd5e1;
 }
 
-.password-label-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.25rem;
+.login-input :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 2px #3f5d75 !important;
+  background-color: #ffffff;
 }
 
-.forgot-link {
-  color: #a3a3a3;
-  font-size: 0.75rem;
-  text-decoration: none;
-  transition: color 0.2s;
+.login-input :deep(.el-input__prefix) {
+  color: #94a3b8;
+  margin-right: 8px;
 }
 
-.forgot-link:hover {
-  color: #d4d4d4;
+.login-input :deep(.el-input__inner) {
+  height: 44px;
+  font-size: 15px;
+  color: #1e293b;
 }
 
-/* 自定义输入框样式 */
-.custom-input :deep(.el-input__wrapper) {
-  background: #262626;
-  border: 1px solid #404040;
-  border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
-  box-shadow: none;
-  transition: all 0.2s;
+.login-input :deep(.el-input__inner:-webkit-autofill),
+.login-input :deep(.el-input__inner:-webkit-autofill:hover),
+.login-input :deep(.el-input__inner:-webkit-autofill:focus) {
+  -webkit-box-shadow: 0 0 0 100px white inset !important;
+  -webkit-text-fill-color: #1e293b !important;
+  transition: background-color 5000s ease-in-out 0s;
 }
 
-.custom-input :deep(.el-input__wrapper:hover) {
-  background: #262626;
-  border-color: #525252;
-}
-
-.custom-input :deep(.el-input__wrapper.is-focus) {
-  background: #262626;
-  border-color: #525252;
-  box-shadow: 0 0 0 2px rgba(82, 82, 82, 0.2);
-}
-
-.custom-input :deep(.el-input__inner) {
-  color: #e5e5e5;
-  font-size: 0.875rem;
-}
-
-.custom-input :deep(.el-input__inner::placeholder) {
-  color: #737373;
-}
-
-.custom-input :deep(.el-icon) {
-  color: #a3a3a3;
-}
-
-/* 记住设备行 */
 .remember-row {
   display: flex;
   align-items: center;
-  margin-bottom: 1rem;
+  justify-content: flex-start;
+  margin: -6px 0 18px;
 }
 
-.custom-checkbox :deep(.el-checkbox__inner) {
-  width: 1rem;
-  height: 1rem;
-  background: #262626;
-  border-color: #404040;
-}
-
-.custom-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
-  background: #262626;
-  border-color: #404040;
-}
-
-.custom-checkbox :deep(.el-checkbox__inner::after) {
-  border-color: #e5e5e5;
+.remember-checkbox :deep(.el-checkbox__label) {
+  padding-left: 8px;
 }
 
 .remember-text {
-  color: #a3a3a3;
-  font-size: 0.75rem;
-  margin-left: 0.5rem;
-}
-
-/* 按钮组 */
-.button-group {
-  display: flex;
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.btn-icon {
-  width: 1rem;
-  height: 1rem;
-  margin-right: 0.5rem;
+  color: #64748b;
+  font-size: 13px;
 }
 
 .login-btn {
   width: 100%;
-  height: 2.75rem;
-  background: #262626;
+  height: 48px;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  background: linear-gradient(135deg, #3f5d75, #4a6d87);
   border: none;
-  border-radius: 0.5rem;
-  color: #e5e5e5;
-  font-weight: 500;
-  font-size: 0.875rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  box-shadow: 0 8px 16px -4px rgba(63, 93, 117, 0.3);
   transition: all 0.2s;
-  cursor: pointer;
 }
 
 .login-btn:hover {
-  background: #404040;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 20px -6px rgba(63, 93, 117, 0.4);
+  background: linear-gradient(135deg, #365067, #3f5d75);
 }
 
-
-
-/* 底部区域 */
-.footer-section {
-  padding-top: 1rem;
-  text-align: center;
-}
-
-.footer-divider {
-  height: 1px;
-  background: linear-gradient(to right, transparent, #525252, transparent);
-  margin-bottom: 1rem;
+.login-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 4px 8px -2px rgba(63, 93, 117, 0.3);
 }
 
 .footer-text {
-  color: #a3a3a3;
-  font-size: 0.75rem;
-  margin: 0 0 1rem 0;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 13px;
+  margin: 18px 0 0;
 }
 
 .footer-link {
-  color: #d4d4d4;
+  color: #3f5d75;
   text-decoration: none;
-  transition: text-decoration 0.2s;
+  font-weight: 600;
 }
 
 .footer-link:hover {
-  text-decoration: underline;
+  color: #365067;
 }
 
-.status-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.status-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background: #22c55e;
-}
-
-.status-text {
-  color: #a3a3a3;
-  font-size: 0.75rem;
-}
-
-/* 响应式设计 */
 @media (max-width: 640px) {
-  .login-wrapper {
-    padding: 0.5rem;
+  .login-card {
+    padding: 36px 24px 24px;
+    border-radius: 18px;
   }
-  
-  .login-header {
-    height: 120px;
-  }
-  
-  .login-form-section {
-    padding: 1.25rem;
+
+  .sys-title {
+    font-size: 22px;
   }
 }
 </style>