# RMO 网站架构文档

本文档基于当前已完成的代码，描述 RMO 一站式临床试验风险管理网站的前端架构。

---

## 一、项目概述

### 1.1 项目定位
- **名称**：RMO 一站式临床试验风险管理网站（rmo-website）
- **技术形态**：单页应用（SPA），分为**免登录浏览区**和**登录后系统区**两部分。
  - **免登录浏览区**：首页、风险职责、风险数据、风险活动（临床试验、上市应用）、海外风险、资源中心等公开内容；主导航为**三级菜单结构**。
  - **登录后系统区**：工作台、信息资讯、项目列表、保障评估、智能工具等功能模块，根据用户角色呈现有权限的内容。
- **设计原则**：统一布局与交互、简洁可维护、模块化可扩展、基于角色的权限控制。

### 1.2 技术栈
| 类别 | 技术 | 版本 | 说明 |
|------|------|------|------|
| 框架 | React | ^18.2.0 | UI 框架 |
| 语言 | TypeScript | ^5.2.2 | 类型与工程化 |
| 构建 | Vite | ^5.0.8 | 开发与生产构建 |
| 路由 | react-router-dom | ^6.20.0 | 客户端路由 |
| 样式 | 原生 CSS | - | 无 UI 组件库，CSS 变量 + 模块化 CSS |

**说明**：
- 当前无全局状态管理库（如 Redux/Pinia）、无 UI 组件库；页面级状态以 React 本地 state 为主。
- **登录后系统需要引入全局状态管理**：用于存储用户信息、角色权限、登录状态等，建议使用 Context API 或 Zustand/Redux Toolkit。
- **路由守卫**：登录后路由需要权限验证，未登录用户访问登录后页面应重定向到登录页。

---

## 二、目录结构

```
RMO网站/
├── index.html                 # 入口 HTML
├── package.json
├── vite.config.ts
├── tsconfig.json
├── public/                     # 静态资源（复制到构建输出）
│   └── pic/                    # 图片（含 logo 等）
├── pic/                        # 开发阶段图片引用（与 public 对应）
├── src/
│   ├── main.tsx                # 应用入口，挂载 #root
│   ├── App.tsx                 # 根组件：Router + Layout + Routes
│   ├── index.css               # 全局样式与 CSS 变量
│   ├── styles/
│   │   └── common.css          # 公共页面样式（PageContainer、PageHeader 等）
│   ├── components/             # 公共组件
│   │   ├── Layout.tsx          # 整体布局（Header + main + Footer）
│   │   ├── Layout.css
│   │   ├── Header.tsx           # 顶部导航（含下拉菜单）
│   │   ├── Header.css
│   │   ├── Footer.tsx           # 页脚
│   │   ├── Footer.css
│   │   ├── PageContainer.tsx   # 页面根容器（规范必用）
│   │   ├── PageHeader.tsx      # 页面头部（标题、描述、操作区）
│   │   ├── ProtectedRoute.tsx  # 路由守卫组件（登录后路由使用）
│   │   ├── DashboardLayout.tsx # 登录后系统布局（侧边栏 + 主内容区）
│   │   └── DashboardLayout.css
│   ├── contexts/                # Context API（用户状态、权限等）
│   │   └── AuthContext.tsx      # 认证上下文（用户信息、角色、登录状态）
│   └── pages/                  # 页面级组件（按业务模块）
│       ├── Home.tsx / Home.css
│       ├── Login.tsx / Login.css
│       ├── RiskDutiesOverview.tsx / RiskDutiesOverview.css   # 风险职责总览
│       ├── Sponsor.tsx / Sponsor.css
│       ├── Holder.tsx / Holder.css
│       ├── Institution.tsx / Institution.css
│       ├── Participant.tsx / Participant.css
│       ├── ServiceProvider.tsx / ServiceProvider.css
│       ├── RmoMode.tsx / RmoMode.css                         # 临床试验（含子页路由）
│       ├── RmoModeOverview.tsx                                # 临床试验模块首页
│       ├── PostMarket.tsx / PostMarket.css
│       ├── Overseas.tsx / Overseas.css
│       ├── SmartAcquisition.tsx                               # 风险数据-智能获取
│       ├── PVReport.tsx                                       # 风险数据-PV报告
│       ├── DrugSafetyDict.tsx                                 # 风险数据-药安字典
│       ├── RiskData.css                                       # 风险数据页面共用样式
│       ├── ResourceCenter.tsx / ResourceCenter.css           # 资源中心（含子页路由）
│       ├── ResourceCenterOverview.tsx                        # 资源中心模块首页
│       ├── FAQ.tsx / FAQ.css
│       ├── Company.tsx / Company.css                          # 未接入路由
│       ├── Services.tsx / Services.css                        # 未接入路由
│       └── dashboard/                                         # 登录后系统页面
│           ├── Dashboard.tsx / Dashboard.css                  # 工作台
│           ├── News.tsx / News.css                            # 信息资讯
│           ├── ProjectList.tsx / ProjectList.css             # 项目列表
│           ├── ProjectDetail.tsx / ProjectDetail.css          # 项目明细
│           ├── CoverageAssessment.tsx / CoverageAssessment.css # 保障评估
│           ├── Tools.tsx / Tools.css                          # 智能工具
│           ├── PremiumCalculator.tsx / PremiumCalculator.css # 保费测算工具
│           ├── ICFEditor.tsx / ICFEditor.css                 # ICF智能修改
│           └── RiskScoring.tsx / RiskScoring.css             # 方案风险评分
├── ReferenceBook/              # 参考资料（文档等）
├── RMO网站需求文档.md
├── 前端技术设计规范.md
├── 快速启动指南.md
└── 网站架构.md                 # 本文件
```

---

## 三、应用入口与路由架构

### 3.1 入口链路
```
index.html
  → <script type="module" src="/src/main.tsx">
main.tsx
  → 引入 index.css、styles/common.css
  → ReactDOM.createRoot(#root).render(<App />)
App.tsx
  → <Router> → <Layout> → <Routes>（定义所有 Route）
```

### 3.2 路由一览

| 路径 | 组件 | 说明 |
|------|------|------|
| `/` | Home | 首页 |
| `/concern` | RiskDutiesOverview | 风险职责总览 |
| `/sponsor` | Sponsor | 申办者职责 |
| `/holder` | Holder | 持有人职责 |
| `/institution` | Institution | 研究中心 |
| `/service-provider` | ServiceProvider | CXO 职责 |
| `/participant` | Participant | 受试者专区 |
| `/risk-data/smart-acquisition` | SmartAcquisition | 风险数据-智能获取 |
| `/risk-data/pv-report` | PVReport | 风险数据-PV报告 |
| `/risk-data/drug-safety-dict` | DrugSafetyDict | 风险数据-药安字典 |
| `/rmo-mode` | RmoMode（内部渲染 RmoModeOverview） | 风险活动-临床试验模块首页 |
| `/rmo-mode/insurance` | RmoMode（内部渲染 Insurance） | 临床试验-保险方案 |
| `/rmo-mode/guarantee` | RmoMode（内部渲染 Guarantee） | 临床试验-保证方案 |
| `/rmo-mode/insurance-guarantee` | RmoMode（内部渲染 InsuranceGuarantee） | 临床试验-保险保证 |
| `/post-market` | PostMarket | 风险活动-上市应用 |
| `/overseas` | Overseas | 海外风险 |
| `/system-management` | ResourceCenter（内部渲染 ResourceCenterOverview） | 资源中心首页 |
| `/system-management/practice-guide` | ResourceCenter（内部渲染 PracticeGuide） | 实践指南 |
| `/system-management/training` | ResourceCenter（内部渲染 Training） | 培训材料 |
| `/system-management/faq` | FAQ | 常见问题（资源中心下） |
| `/faq` | FAQ | 常见问题（兼容旧路径） |
| `/login` | Login | 登录 |

### 3.2.1 主导航三级菜单结构

- **一级菜单**：首页 | 风险职责 | 风险数据 | 风险活动 | 海外风险 | 资源中心
- **二级菜单**（下拉）：
  - **风险职责**：申办者职责、持有人职责、受试者专区、研究中心、CXO职责
  - **风险数据**：智能获取、PV报告、药安字典
  - **风险活动**：临床试验（含三级）、上市应用
  - **资源中心**：实践指南、培训材料、常见问题
- **三级菜单**（风险活动 → 临床试验 下）：
  - 模块首页、保险方案、保证方案、保险保证

### 3.3 复合路由页（单 Route 多子视图）
- **RmoMode**：根据 `location.pathname` 在 RmoModeOverview / Insurance / Guarantee / InsuranceGuarantee 间切换，无嵌套 `<Routes>`。
- **ResourceCenter**：根据 `location.pathname` 在 ResourceCenterOverview / PracticeGuide / Training 间切换；FAQ 为独立 Route，不在 ResourceCenter 内部渲染。
- **Tools**：智能工具入口页，内部可包含子路由或通过条件渲染切换 PremiumCalculator / ICFEditor / RiskScoring。

### 3.4 路由守卫与权限控制
- **ProtectedRoute 组件**：检查用户登录状态，未登录则重定向到 `/login`，已登录则渲染目标组件。
- **角色权限验证**：在页面组件内部或通过高阶组件（HOC）进行角色权限检查，无权限则显示提示或重定向。
- **路由结构建议**：
  ```tsx
  <Route path="/dashboard/*" element={<ProtectedRoute><DashboardLayout /></ProtectedRoute>}>
    <Route index element={<Dashboard />} />
    <Route path="news" element={<News />} />
    <Route path="projects" element={<ProjectList />} />
    <Route path="projects/:id" element={<ProjectDetail />} />
    <Route path="coverage" element={<CoverageAssessment />} />
    <Route path="tools" element={<Tools />} />
    <Route path="tools/premium-calculator" element={<PremiumCalculator />} />
    <Route path="tools/icf-editor" element={<ICFEditor />} />
    <Route path="tools/risk-scoring" element={<RiskScoring />} />
  </Route>
  ```

---

## 四、布局与公共组件

### 4.1 整体布局（Layout）
- **结构**：`<div class="layout">` = Header + `<main class="main-content">`（children）+ Footer。
- **职责**：所有通过路由渲染的页面均为 Layout 的 children，保证全站统一的顶栏与页脚。
- **登录后布局**：登录后系统使用 `DashboardLayout`（侧边栏导航 + 主内容区），不使用全局 Header/Footer，或 Header 仅保留用户信息与退出登录。

### 4.2 Header（三级菜单）
- **内容**：Logo（链接首页）、主导航（三级菜单结构，参照 vdano.com）、登录入口（未登录时显示"登录"，已登录时显示用户信息与退出）。
- **导航结构**（与路由对应）：
  - **首页**（一级）
  - **风险职责**（一级，二级下拉）：申办者职责、持有人职责、受试者专区、研究中心、CXO职责
  - **风险数据**（一级，二级下拉）：智能获取、PV报告、药安字典
  - **风险活动**（一级，二级+三级下拉）：临床试验（三级：模块首页、保险方案、保证方案、保险保证）、上市应用
  - **海外风险**（一级）
  - **资源中心**（一级，二级下拉）：实践指南、培训材料、常见问题
  - 登录/用户信息（根据登录状态切换）
- **交互**：下拉菜单由本地 state（`concernOpen`、`riskDataOpen`、`riskActivitiesOpen`、`resourceOpen`）控制，hover 展开/收起；风险活动下“临床试验”为分组标题，其下为三级子项；当前路由高亮通过 `useLocation` 与 path 匹配实现。
- **登录后**：已登录用户点击 Logo 或"工作台"可进入 `/dashboard`；Header 显示用户角色、姓名，提供退出登录入口。

### 4.3 Footer
- **内容**：关于我们、联系方式、合作伙伴、版权信息；静态展示，无路由或状态。

### 4.4 页面级规范组件
- **PageContainer**：页面根容器，所有页面内容应置于其内；支持 `compact` 控制内边距。
- **PageHeader**：页面标题区，支持 `title`、`description`、`actions`；`variant="module"` 时使用模块首页样式（如风险职责、资源中心首页）。
- **ProtectedRoute**：路由守卫组件，检查用户登录状态，未登录则重定向到 `/login`。
- **DashboardLayout**：登录后系统布局组件，包含侧边栏导航（工作台、信息资讯、项目列表、保障评估、智能工具）和主内容区；侧边栏根据用户角色动态显示有权限的菜单项。

---

## 五、页面模块与职责

### 5.1 首页与登录
- **Home**：Banner（保险/保证入口）、风险管理体系图示、各方职责快捷入口（卡片链向 Sponsor/Holder/Institution/Participant/ServiceProvider）。
- **Login**：登录页（账号、密码），登录成功后根据用户角色跳转到 `/dashboard`；登录失败显示错误提示。

### 5.7 登录后系统页面

#### 5.7.1 工作台（Dashboard）
- **路径**：`/dashboard`
- **布局**：DashboardLayout（侧边栏 + 主内容区）
- **内容模块**：
  - **我的保障**：卡片展示当前用户的保障信息（保障数量、保障状态等）
  - **我的项目**：卡片展示当前用户参与的项目数量、状态统计
  - **待办任务**：列表展示待处理任务（如待审核的理赔申请、待确认的保障评估等）
  - **快捷方式**：
    - 申请保障：跳转到保障评估页面或申请表单
    - 申请理赔：跳转到理赔申请页面（需关联项目）
- **权限**：所有登录用户可见，但内容根据角色过滤（如投保人看到自己的保障和项目，保险人看到分配给自己的任务等）。

#### 5.7.2 信息资讯（News）
- **路径**：`/dashboard/news`
- **内容**：仅登录后可阅读的信息列表（与公开资源中心区分）
  - 列表展示：标题、发布时间、分类、摘要
  - 详情页：完整内容展示
- **权限**：所有登录用户可见。

#### 5.7.3 项目列表（ProjectList）
- **路径**：`/dashboard/projects`
- **列表字段**：
  - 试验项目编号
  - 试验题目
  - 保障范围
  - 承保公司
  - 承保状态（如：已承保、待审核、已过期等）
  - 操作按钮：查看明细、申请理赔
- **权限控制**：根据用户角色过滤可见项目
  - **投保人**：仅看到自己作为投保人的项目
  - **保险人**：看到分配给自己的项目
  - **经纪人**：看到自己参与的项目
  - **TPA**：看到需要自己处理的项目
  - **研究中心**：看到自己机构参与的项目
  - **CxO**：看到自己服务商参与的项目
  - **患者**：看到自己作为受试者参与的项目（如有）
- **交互**：点击"查看明细"跳转到 `/dashboard/projects/:id`（ProjectDetail）；点击"申请理赔"跳转到理赔申请页面（需关联项目ID）。

#### 5.7.4 项目明细（ProjectDetail）
- **路径**：`/dashboard/projects/:id`
- **内容**：项目详细信息展示
  - 基本信息：项目编号、题目、申办者、保障范围等
  - 保障信息：承保公司、承保状态、保障期限、保障金额等
  - 相关文档：保险合同、评估报告等（可下载或预览）
  - 操作按钮：申请理赔、修改保障（需权限）
- **权限**：需有项目查看权限（与项目列表的权限逻辑一致）。

#### 5.7.5 保障评估（CoverageAssessment）
- **路径**：`/dashboard/coverage`
- **列表字段**：
  - 申办者名称
  - 项目编号
  - 试验题目
  - 保障条款
  - 特别约定
  - 成交情况（如：已成交、待确认、已拒绝等）
- **权限**：投保人、保险人、经纪人、TPA 可见；其他角色不可见。
- **交互**：可查看评估详情、修改评估（需权限）、确认成交等。

#### 5.7.6 智能工具（Tools）
- **路径**：`/dashboard/tools`
- **工具入口页**：展示三个工具的入口卡片
  - 保费测算工具
  - ICF智能修改
  - 方案风险评分
- **权限**：所有登录用户可见工具入口页，但各工具内部有角色权限限制。

##### 5.7.6.1 保费测算工具（PremiumCalculator）
- **路径**：`/dashboard/tools/premium-calculator`
- **功能**：根据项目信息、风险等级等参数计算保费
- **权限**：投保人、保险人、经纪人可见。

##### 5.7.6.2 ICF智能修改（ICFEditor）
- **路径**：`/dashboard/tools/icf-editor`
- **功能**：智能辅助修改知情同意书（ICF）内容
- **权限**：投保人、研究中心、CxO 可见。

##### 5.7.6.3 方案风险评分（RiskScoring）
- **路径**：`/dashboard/tools/risk-scoring`
- **功能**：对试验方案进行风险评分
- **权限**：投保人、保险人、经纪人、TPA 可见。

### 5.2 风险职责（原“各方关注”）
- **RiskDutiesOverview**：模块首页，`PageHeader variant="module"` + 各方职责卡片导航。
- **Sponsor / Holder / Institution / Participant / ServiceProvider**：各角色职责说明页，结构为 PageContainer + PageHeader + 内容区。

### 5.3 临床试验（原 RMO 模式）
- **RmoMode**：容器页，根据 path 渲染 RmoModeOverview、Insurance、Guarantee、InsuranceGuarantee 之一。
- **RmoModeOverview**：模块首页，介绍临床试验保险与保证方案入口。
- **Insurance / Guarantee / InsuranceGuarantee**：子页，各自独立大块内容（如保险方案网格、保证基金逻辑图、服务供应商 logo 等）。

### 5.4 上市应用与海外风险
- **PostMarket**：上市应用相关说明。
- **Overseas**：海外风险相关说明。

### 5.5 资源中心（原“体系管理”）
- **ResourceCenter**：容器页，根据 path 渲染 ResourceCenterOverview、PracticeGuide、Training 之一。
- **ResourceCenterOverview**：模块首页。
- **PracticeGuide / Training**：子页，实践指南与培训材料内容。
- **FAQ**：独立页面，同时挂载在 `/system-management/faq` 与 `/faq`。

### 5.6 未接入路由的页面
- **Company**、**Services**：已实现页面组件，当前未在 `App.tsx` 的 Routes 中配置，如需使用需新增路由并在 Header 中增加入口。

---

## 六、样式体系

### 6.1 样式文件分层
- **index.css**：全局重置、`:root` 下的 CSS 变量（品牌色、间距、布局高度等）、body 基础样式。
- **styles/common.css**：页面容器（`.page-container`）、页面头部（`.page-header`、`.module-home-header`）、模块首页布局等，被 `main.tsx` 全局引入。
- **各页面 \*.css**：仅被对应页面组件引入，采用类名与页面根类（如 `.home`、`.rmo-mode`）限定作用域，避免污染。

### 6.2 设计令牌（index.css :root）
- 品牌主色：`--brand-primary`、`--brand-primary-dark`、`--brand-primary-light` 等。
- 文本与背景：`--brand-text-default`、`--text-color`、`--bg-color` 等。
- 间距：`--padding-xs` ～ `--padding-xl`。
- 布局：`--navbar-height`、`--page-container-padding`、`--page-header-height`、`--page-body-height` 等，用于统一计算内容区高度。

### 6.3 布局约定
- 主内容区使用 `.container` 限制宽度并居中。
- 列表/卡片区常用 `.section`、`.card`、`.nav-grid`、`.page-body` 等类，与 common.css 及各页面 CSS 配合使用。

---

## 七、数据与状态

### 7.1 状态管理架构

#### 7.1.1 全局状态（登录后系统必需）
- **用户认证状态**：使用 Context API（`AuthContext`）或 Zustand/Redux Toolkit 管理
  - 用户信息：用户ID、姓名、邮箱等
  - 角色：投保人、保险人、经纪人、TPA、患者、研究中心、CxO
  - 登录状态：`isAuthenticated`、`token`（如使用 JWT）
  - 权限列表：用户拥有的功能权限（可选，也可基于角色推导）
- **状态更新时机**：
  - 登录成功：设置用户信息和登录状态
  - 退出登录：清空用户信息和登录状态
  - Token 刷新：更新 token（如使用 JWT）
  - 权限变更：更新权限列表（如管理员修改用户权限）

#### 7.1.2 路由状态
- 由 react-router-dom 的 `useLocation`、`Link`、`Routes`/`Route` 管理。

#### 7.1.3 组件状态
- 局部 state（如 Header 的下拉菜单开关、表单输入等）。
- 页面级数据：项目列表、保障评估列表等，可通过 React Query 或 SWR 管理服务端数据缓存与同步。

### 7.2 数据来源与接口

#### 7.2.1 免登录浏览区
- 页面内容以静态文案与静态结构为主，未对接后端 API。

#### 7.2.2 登录后系统
- **认证接口**：
  - `POST /api/auth/login`：账号密码登录，返回用户信息、角色、token
  - `POST /api/auth/logout`：退出登录
  - `GET /api/auth/me`：获取当前用户信息（用于刷新或验证 token）
- **业务接口**（需根据实际后端设计）：
  - 工作台数据：`GET /api/dashboard/summary`
  - 项目列表：`GET /api/projects`（需根据角色过滤）
  - 项目明细：`GET /api/projects/:id`
  - 保障评估：`GET /api/coverage-assessments`
  - 信息资讯：`GET /api/news`
  - 保费测算：`POST /api/tools/premium-calculator`
  - ICF修改：`POST /api/tools/icf-editor`
  - 风险评分：`POST /api/tools/risk-scoring`
  - 理赔申请：`POST /api/claims`

### 7.3 权限控制实现

#### 7.3.1 角色定义
- **投保人**：申办者，可申请保障、查看自己的项目和保障、使用保费测算等工具
- **保险人**：保险公司，可查看分配给自己的项目、进行保障评估、使用保费测算和风险评分
- **经纪人**：保险经纪人，可查看参与的项目、进行保障评估、使用保费测算和风险评分
- **TPA**：第三方服务提供商，可查看需要处理的项目、进行保障评估、使用风险评分
- **患者**：受试者，可查看自己参与的项目信息（如有）
- **研究中心**：研究机构，可查看自己机构参与的项目、使用 ICF 修改工具
- **CxO**：CRO/CDMO/SMO 等服务商，可查看自己参与的项目、使用 ICF 修改工具

#### 7.3.2 权限验证层级
1. **路由级**：`ProtectedRoute` 检查登录状态
2. **页面级**：页面组件内部检查角色权限，无权限则显示提示或重定向
3. **功能级**：按钮、操作等根据角色动态显示/隐藏
4. **数据级**：API 请求时后端根据用户角色过滤返回数据

### 7.4 推荐技术选型（待实现）
- **状态管理**：Context API（轻量）或 Zustand（推荐，简单易用）
- **数据请求**：axios + React Query 或 SWR（用于服务端数据缓存、同步、重试）
- **表单管理**：React Hook Form（如需要复杂表单）

---

## 八、构建与运行

- **开发**：`npm run dev`（Vite，默认 port 3000，可配置 open）。
- **构建**：`npm run build`（先 `tsc` 再 `vite build`，输出到 `dist/`）。
- **预览构建结果**：`npm run preview`。
- **静态资源**：`public/` 下资源在构建时原样复制到根路径，页面中引用如 `/pic/logo/xxx.png`。

---

## 九、与需求/规范的对应关系

- **需求文档**（RMO网站需求文档.md）：当前路由与导航结构已按“首页、风险职责、临床试验、上市应用、海外风险、资源中心、常见问题、登录”的架构实现；命名上“风险职责”对应原“各方关注”，“资源中心”对应原“体系管理”，“临床试验”对应原 RMO 模式相关模块。
- **前端技术设计规范**（前端技术设计规范.md）：规范中部分内容针对 Vue/Element Plus 项目；本仓库为 React 项目，实际遵循的约定为：页面使用 PageContainer、页面头部使用 PageHeader、样式使用 CSS 变量与 common.css、路由集中在 App.tsx。

---

---

## 十、登录后系统实现要点

### 10.1 布局切换
- **免登录区**：使用 `Layout`（Header + Footer）
- **登录后系统**：使用 `DashboardLayout`（侧边栏 + 主内容区），Header 仅保留用户信息与退出

### 10.2 侧边栏导航结构
```
工作台
信息资讯
项目列表
保障评估（需权限：投保人、保险人、经纪人、TPA）
智能工具
  ├── 保费测算工具（需权限：投保人、保险人、经纪人）
  ├── ICF智能修改（需权限：投保人、研究中心、CxO）
  └── 方案风险评分（需权限：投保人、保险人、经纪人、TPA）
```

### 10.3 权限控制实现建议
1. **AuthContext**：提供 `user`、`role`、`isAuthenticated`、`login`、`logout` 等
2. **ProtectedRoute**：检查 `isAuthenticated`，未登录重定向到 `/login`
3. **角色权限 HOC/组件**：`withRolePermission(Component, allowedRoles)` 或 `<RoleGuard allowedRoles={[...]}>`
4. **API 拦截器**：axios 拦截器在请求头添加 token，响应拦截器处理 401 未授权

### 10.4 页面数据加载
- 工作台：加载"我的保障"、"我的项目"、"待办任务"的汇总数据
- 项目列表：根据角色调用 API，后端返回该角色可见的项目
- 保障评估：仅特定角色可见，列表数据需按角色过滤
- 智能工具：各工具独立页面，提交表单后调用对应 API

---

**文档版本**：基于 2025年2月 前已完成代码整理，已更新登录后系统架构。  
**维护建议**：
- 路由或主导航变更时同步更新本文档第三节与第四节
- 新增全局状态或 API 层时在第七节补充说明
- 登录后系统功能变更时更新第五节（5.7）与第十节
- 角色权限变更时更新第七节（7.3）与第十节（10.2、10.3）