# 诊断报告模板编辑功能设计文档

## 📋 功能概述

实现诊断报告模板的完整管理功能，包括诊断报告模板的创建、编辑、删除、应用等操作。用户可以通过诊断报告模板快速填充报告内容，提高工作效率。

## 🎯 详细需求

### 1. 功能需求

#### 1.1 诊断报告模板列表展示（TemplatePanel）
- **FR-1.1.1** 在侧边栏的"诊断报告模板"卡片中展示诊断报告模板列表
- **FR-1.1.2** 筛选条功能
  - `[常用]` 按钮：只显示常用诊断报告模板
  - `[全部]` 按钮：显示所有诊断报告模板
  - `[管理]` 按钮：打开诊断报告模板管理对话框
- **FR-1.1.3** 搜索功能：支持按诊断报告模板名称搜索
- **FR-1.1.4** 显示常用诊断报告模板标记（星标）
- **FR-1.1.5** 点击诊断报告模板可以应用到当前报告

#### 1.2 诊断报告模板管理对话框
- **FR-1.2.1** 显示所有诊断报告模板的列表（表格形式）
- **FR-1.2.2** 支持创建新的诊断报告模板
- **FR-1.2.3** 支持编辑现有诊断报告模板
- **FR-1.2.4** 支持删除诊断报告模板（带确认）
- **FR-1.2.5** 支持复制现有诊断报告模板（自动添加"- 副本"后缀）
- **FR-1.2.6** 支持切换常用诊断报告模板状态
- **FR-1.2.7** 支持按标签过滤诊断报告模板

#### 1.3 诊断报告模板编辑功能
- **FR-1.3.1** 输入诊断报告模板名称（必填）
- **FR-1.3.2** 输入影像所见内容（必填）
- **FR-1.3.3** 输入诊断意见内容（必填）
- **FR-1.3.4** 输入标签（可选）
- **FR-1.3.5** 设置是否为常用诊断报告模板（复选框）
- **FR-1.3.6** 表单验证

#### 1.4 "另存为诊断报告模板"功能
- **FR-1.4.1** 从"影像所见"区域点击"另存为诊断报告模板"按钮
- **FR-1.4.2** 自动填充当前的影像所见和诊断意见内容
- **FR-1.4.3** 打开诊断报告模板编辑区域，用户补充诊断报告模板名称等信息

#### 1.5 应用诊断报告模板功能
- **FR-1.5.1** 点击诊断报告模板列表中的诊断报告模板
- **FR-1.5.2** 将诊断报告模板的影像所见和诊断意见内容填充到对应的输入框
- **FR-1.5.3** 提供确认提示（如果当前已有内容）

### 2. 非功能需求

- **NFR-2.1** 响应时间：所有操作响应时间 < 500ms
- **NFR-2.2** 用户体验：操作流畅，提示清晰
- **NFR-2.3** 数据安全：删除操作需要二次确认
- **NFR-2.4** 错误处理：网络错误、API错误需要友好提示

## 🎨 UI结构设计

### 1. 诊断报告页面-和诊断报告模板相关

```
DiagnosticReport 页面
├── ReportHeader（报告头部）
├── ReportMain（报告主体）
│   ├── MainContent（左侧,16列）
│   │   ├── 基本信息卡片
│   │   ├── 图像卡片
│   │   ├── 影像所见卡片
│   │   │   ├── 标题："影像所见"
│   │   │   ├── **【"另存为诊断报告模板"按钮】** ← 🎯 入口1
│   │   │   └── 文本输入框
│   │   └── 诊断意见卡片
│   │       ├── 标题："影像诊断"
│   │       └── 文本输入框
│   └── SidePanel（右侧,8列）
│       ├── 检查过滤卡片
│       └── **【诊断报告模板卡片】** ← 🎯 主要功能区域
│           ├── 筛选条：[常用] [全部] [管理] ← 🎯 入口2（管理按钮）
│           ├── 搜索框
│           └── 诊断报告模板列表
│               └── 诊断报告模板项（可点击应用）
└── ReportFooter（报告底部）
```

### 2. 诊断报告模板管理对话框（TemplateManagementModal）

```
┌─────────────────────────────────────────────────────────────────────────┐
│ 诊断报告模板管理                                                    [X] │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  左侧：诊断报告模板列表          │  右侧：编辑区域                   │
│  ┌─────────────────────────────┐  │  ┌─────────────────────────────┐  │
│  │ [+ 新建诊断报告模板]        │  │  │ 诊断报告模板名称 *          │  │
│  │ [标签过滤: 全部 ▼]         │  │  │ ┌─────────────────────────┐ │  │
│  │                             │  │  │ │                         │ │  │
│  │ ┌─────────────────────────┐ │  │  │ └─────────────────────────┘ │  │
│  │ │ 名称  │ 标签 │ 常用     │ │  │  │                             │  │
│  │ ├─────────────────────────┤ │  │  │ 影像所见 *                  │  │
│  │ │ 模板1 │ 胸部 │ ⭐       │ │  │  │ ┌─────────────────────────┐ │  │
│  │ │ 模板2 │ 腹部 │          │ │  │  │ │                         │ │  │
│  │ │ ...   │ ...  │ ...      │ │  │  │ │                         │ │  │
│  │ └─────────────────────────┘ │  │  │ └─────────────────────────┘ │  │
│  │                             │  │  │                             │  │
│  │                             │  │  │ 诊断意见 *                  │  │
│  │                             │  │  │ ┌─────────────────────────┐ │  │
│  │                             │  │  │ │                         │ │  │
│  │                             │  │  │ │                         │ │  │
│  │                             │  │  │ └─────────────────────────┘ │  │
│  │                             │  │  │                             │  │
│  │                             │  │  │ 标签                        │  │
│  │                             │  │  │ ┌─────────────────────────┐ │  │
│  │                             │  │  │ │                         │ │  │
│  │                             │  │  │ └─────────────────────────┘ │  │
│  │                             │  │  │                             │  │
│  │                             │  │  │ ☐ 设为常用模板              │  │
│  │                             │  │  │                             │  │
│  └─────────────────────────────┘  │  │ [删除] [保存]               │  │
│                                    │  └─────────────────────────────┘  │
│                                                                         │
│                                                        [关闭]           │
└─────────────────────────────────────────────────────────────────────────┘
```

**说明：**
- **左侧诊断报告模板列表**：
  - 操作按钮组（根据选中状态动态显示）：
    - `[新建]` 按钮：始终显示，点击后右侧显示空白编辑表单
    - `[复制]` 按钮：仅在选中模板时显示，点击后复制当前模板（名称自动添加"- 副本"后缀）
    - `[删除]` 按钮（红色危险按钮）：仅在选中模板时显示，点击后删除当前选中的诊断报告模板
  - 标签搜索框（用于按标签过滤表格中的诊断报告模板，支持手动输入）
  - 诊断报告模板列表（表格形式）：点击某行可在右侧编辑该诊断报告模板
- **右侧编辑区域**：
  - 诊断报告模板名称输入框（必填）
  - 影像所见文本域（必填）
  - 诊断意见文本域（必填）
  - 标签输入框（可选）
  - 常用诊断报告模板复选框
  - `[删除]` 按钮：仅在编辑现有模板时显示，删除当前选中的诊断报告模板
  - `[保存]` 按钮：保存编辑内容

### 3. 诊断报告模板面板（TemplatePanel）

```
┌─────────────────────────────────────┐
│ 诊断报告模板                    [X] │
├─────────────────────────────────────┤
│ 筛选条:                             │
│ [常用] [全部] [管理]               │
│                                     │
│ 搜索:                               │
│ ┌─────────────────────────────────┐ │
│ │ 🔍 搜索诊断报告模板...          │ │
│ └─────────────────────────────────┘ │
│                                     │
│ 诊断报告模板列表:                   │
│ ┌─────────────────────────────────┐ │
│ │ ⭐ 胸部正位诊断报告模板         │ │
│ │    标签: 胸部                   │ │
│ ├─────────────────────────────────┤ │
│ │ 腹部平扫诊断报告模板            │ │
│ │    标签: 腹部                   │ │
│ ├─────────────────────────────────┤ │
│ │ ...                             │ │
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```

**说明：**
- **筛选条**：包含三个按钮
  - `[常用]` - 只显示常用诊断报告模板
  - `[全部]` - 显示所有诊断报告模板
  - `[管理]` - 打开诊断报告模板管理对话框
- **搜索条**：输入框，支持按诊断报告模板名称搜索
- **诊断报告模板列表**：显示过滤后的诊断报告模板列表，可点击应用

## 👥 参与者列表

### 1. 组件层（Components）

#### 1.1 新建组件
- **TemplateManagementModal** - 诊断报告模板管理对话框（左右分栏布局）
  - **左侧：诊断报告模板列表**
    - "新建诊断报告模板"按钮
    - 标签搜索框（用于按标签过滤表格，支持手动输入）
    - 诊断报告模板列表（表格形式）
    - 点击某行可在右侧编辑
  - **右侧：编辑区域**
    - 表单输入（名称、影像所见、诊断意见、标签、常用标记）
    - 表单验证
    - 删除/保存按钮

- **TemplateListItem** - 诊断报告模板列表项组件
  - 显示诊断报告模板名称、标签、常用标记
  - 点击应用诊断报告模板
  - 悬停显示预览

#### 1.2 修改组件
- **TemplatePanel** - 诊断报告模板面板（需要完整实现）
  - 筛选条：三个按钮（[常用] [全部] [管理]）
  - 搜索框（按诊断报告模板名称搜索）
  - 诊断报告模板列表展示
  - 应用诊断报告模板功能
  - 常用诊断报告模板标记显示

- **FindingsSection** - 影像所见区域（需要修改）
  - "另存为诊断报告模板"按钮功能实现

### 2. 状态管理层（Redux Slices）

#### 2.1 新建/修改 Slices
- **templateSlice** - 诊断报告模板状态管理（需要完整实现）
  - State:
    - `templates: ReportTemplate[]` - 诊断报告模板列表
    - `loading: boolean` - 加载状态
    - `error: string | null` - 错误信息
    - `filterMode: 'all' | 'staple'` - 筛选模式（全部/常用）
    - `searchKeyword: string` - 搜索关键词
  - Actions:
    - `fetchTemplates()` - 获取诊断报告模板列表
    - `createTemplate(template)` - 创建诊断报告模板
    - `updateTemplate(id, template)` - 更新诊断报告模板
    - `deleteTemplate(id)` - 删除诊断报告模板
    - `setFilterMode(mode)` - 设置筛选模式
    - `setSearchKeyword(keyword)` - 设置搜索关键词
  - Thunks:
    - `fetchTemplatesThunk()` - 异步获取诊断报告模板
    - `createTemplateThunk(template)` - 异步创建诊断报告模板
    - `updateTemplateThunk(id, template)` - 异步更新诊断报告模板
    - `deleteTemplateThunk(id)` - 异步删除诊断报告模板

- **findingsSlice** - 影像所见状态（需要修改）
  - 实现 `saveTemplate()` action（保存为诊断报告模板）

### 3. API层（已存在）

- **ReportTemplateActions.ts**
  - `getReportTemplateList(params?)` - 获取诊断报告模板列表
  - `createReportTemplate(template)` - 创建诊断报告模板
  - `updateReportTemplate(templateId, template)` - 更新诊断报告模板
  - `deleteReportTemplate(templateId)` - 删除诊断报告模板

### 4. 类型定义（Types）

- **ReportTemplate** - 诊断报告模板数据结构（已存在）
  ```typescript
  interface ReportTemplate {
    id?: string;
    name: string;
    findings: string;
    impression: string;
    tag: string;
    staple: boolean;
  }
  ```

## 📝 实现TodoList

### Phase 1: Redux状态管理
- [ ] 实现诊断报告模板状态管理 `templateSlice.ts`
  - [ ] 定义 state 结构（诊断报告模板列表、加载状态等）
  - [ ] 实现同步 actions（设置筛选、搜索等）
  - [ ] 实现异步 thunks（CRUD操作诊断报告模板）
  - [ ] 添加到 store

### Phase 2: 核心组件开发
- [ ] 实现诊断报告模板管理对话框 `TemplateManagementModal` 组件
  - [ ] 创建组件文件
  - [ ] 实现左右分栏布局
  - [ ] 实现左侧诊断报告模板列表（表格）
  - [ ] 实现右侧编辑表单
  - [ ] 实现标签过滤
  - [ ] 实现新建/编辑/删除诊断报告模板操作
  - [ ] 实现表单验证
  - [ ] 连接 Redux

- [ ] 实现诊断报告模板列表项 `TemplateListItem` 组件
  - [ ] 创建组件文件
  - [ ] 实现列表项布局
  - [ ] 实现点击应用诊断报告模板功能
  - [ ] 实现悬停预览

### Phase 3: 集成现有组件
- [ ] 完善诊断报告模板面板 `TemplatePanel` 组件
  - [ ] 实现诊断报告模板列表展示
  - [ ] 添加"管理诊断报告模板"按钮
  - [ ] 实现标签过滤
  - [ ] 连接 Redux
  - [ ] 实现应用诊断报告模板功能

- [ ] 修改影像所见区域 `FindingsSection` 组件
  - [ ] 实现"另存为诊断报告模板"功能
  - [ ] 连接诊断报告模板编辑对话框

### Phase 4: 功能完善
- [ ] 实现应用诊断报告模板确认提示
- [ ] 实现删除诊断报告模板确认提示
- [ ] 实现错误处理和提示
- [ ] 实现加载状态显示

### Phase 5: 测试和优化
- [ ] 单元测试
- [ ] 集成测试
- [ ] 用户体验优化
- [ ] 性能优化

## 🔄 交互流程（泳道图）

```mermaid
sequenceDiagram
    participant U as 用户
    participant TP as TemplatePanel
    participant TMM as TemplateManagementModal
    participant Redux as Redux Store
    participant API as Backend API

    Note over U,API: 场景1: 查看和应用模板
    U->>TP: 打开诊断报告页面
    TP->>Redux: dispatch(fetchTemplatesThunk())
    Redux->>API: getReportTemplateList()
    API-->>Redux: 返回模板列表
    Redux-->>TP: 更新模板列表
    TP->>U: 显示模板列表
    U->>TP: 点击某个模板
    TP->>Redux: 获取模板内容
    TP->>U: 确认是否应用模板？
    U->>TP: 确认
    TP->>Redux: dispatch(updateInputValue(findings))
    TP->>Redux: dispatch(setDiagnosisDescription(impression))
    Redux-->>U: 更新报告内容

    Note over U,API: 场景2: 管理模板（新建）
    U->>TP: 点击"编辑"按钮
    TP->>TMM: 打开模板管理对话框
    TMM->>U: 显示左侧模板列表
    U->>TMM: 点击"新建模板"
    TMM->>TMM: 右侧显示空白编辑表单
    U->>TMM: 在右侧填写模板信息
    U->>TMM: 点击"保存"
    TMM->>TMM: 表单验证
    TMM->>Redux: dispatch(createTemplateThunk(template))
    Redux->>API: createReportTemplate(template)
    API-->>Redux: 返回创建结果
    Redux-->>TMM: 更新状态
    TMM->>U: 显示成功提示
    TMM->>Redux: 刷新左侧模板列表
    TMM->>U: 更新显示

    Note over U,API: 场景3: 编辑模板
    U->>TMM: 点击左侧列表中的某个模板
    TMM->>Redux: 获取模板数据
    TMM->>TMM: 右侧显示预填充表单
    TMM->>U: 显示模板详情
    U->>TMM: 在右侧修改模板信息
    U->>TMM: 点击"保存"
    TMM->>Redux: dispatch(updateTemplateThunk(id, template))
    Redux->>API: updateReportTemplate(id, template)
    API-->>Redux: 返回更新结果
    Redux-->>TMM: 更新状态
    TMM->>U: 显示成功提示
    TMM->>U: 刷新左侧列表

    Note over U,API: 场景4: 删除模板
    U->>TMM: 在右侧点击"删除"按钮
    TMM->>U: 显示确认对话框
    U->>TMM: 确认删除
    TMM->>Redux: dispatch(deleteTemplateThunk(id))
    Redux->>API: deleteReportTemplate(id)
    API-->>Redux: 返回删除结果
    Redux-->>TMM: 更新状态
    TMM->>U: 显示成功提示并刷新列表
    TMM->>TMM: 右侧清空编辑区域

    Note over U,API: 场景5: 另存为模板
    U->>U: 填写影像所见和诊断意见
    U->>TP: 点击"另存为模板"按钮
    TP->>TMM: 打开模板管理对话框
    TMM->>Redux: 获取当前报告内容
    TMM->>TMM: 右侧显示预填充表单
    TMM->>U: 显示预填充的findings和impression
    U->>TMM: 补充模板名称等信息
    U->>TMM: 点击"保存"
    TMM->>Redux: dispatch(createTemplateThunk(template))
    Redux->>API: createReportTemplate(template)
    API-->>Redux: 返回创建结果
    Redux-->>TMM: 更新状态
    TMM->>U: 显示成功提示
    TMM->>U: 刷新左侧模板列表
```

## 📊 数据流设计

### 1. 数据流向图

```mermaid
graph TB
    subgraph "用户界面层"
        TP[TemplatePanel]
        TMM[TemplateManagementModal<br/>左侧:列表 右侧:编辑区]
        FS[FindingsSection]
        DS[DiagnosisSection]
    end

    subgraph "状态管理层"
        TS[templateSlice]
        FiS[findingsSlice]
        DiS[diagnosisSlice]
        Store[Redux Store]
    end

    subgraph "API层"
        API[ReportTemplateActions]
    end

    subgraph "后端"
        Backend[Backend Server]
    end

    %% 查询流程
    TP -->|dispatch fetchTemplatesThunk| TS
    TMM -->|dispatch fetchTemplatesThunk| TS
    TS -->|调用| API
    API -->|HTTP GET| Backend
    Backend -->|返回数据| API
    API -->|返回| TS
    TS -->|更新state| Store
    Store -->|订阅更新| TP
    Store -->|订阅更新| TMM

    %% 创建/更新流程
    TMM -->|dispatch createTemplateThunk| TS
    TMM -->|dispatch updateTemplateThunk| TS
    TS -->|调用| API
    API -->|HTTP POST/PUT| Backend
    Backend -->|返回结果| API
    API -->|返回| TS
    TS -->|更新state| Store

    %% 删除流程
    TMM -->|dispatch deleteTemplateThunk| TS
    TS -->|调用| API
    API -->|HTTP DELETE| Backend
    Backend -->|返回结果| API
    API -->|返回| TS

    %% 应用模板流程
    TP -->|应用模板| FiS
    TP -->|应用模板| DiS
    FiS -->|更新| Store
    DiS -->|更新| Store
    Store -->|订阅更新| FS
    Store -->|订阅更新| DS

    %% 另存为模板流程
    FS -->|获取当前内容| FiS
    FS -->|获取当前内容| DiS
    FS -->|打开对话框| TMM
```

### 2. Redux State 结构

```typescript
// Redux Store 结构
{
  // ... 其他 slices
  template: {
    templates: ReportTemplate[],      // 模板列表
    loading: boolean,                  // 加载状态
    error: string | null,              // 错误信息
    selectedTag: string,               // 选中的标签过滤
  },
  findings: {
    diagnosticDescriptionFromImage: string,  // 影像所见内容
  },
  diagnosis: {
    diagnosisDescription: string,      // 诊断意见内容
  },
  // ... 其他 slices
}
```

## 🗂️ 数据结构定义

### 1. 核心数据结构

```typescript
// 报告模板
export interface ReportTemplate {
  id?: string;           // 模板ID（可选，创建时不需要）
  name: string;          // 模板名称
  findings: string;      // 影像所见内容
  impression: string;    // 诊断意见内容
  tag: string;           // 标签（用于分类）
  staple: boolean;       // 是否为常用模板
}

// 模板查询参数
export interface ReportTemplateQueryParams {
  tag?: string;          // 按标签过滤
  is_staple?: boolean;   // 是否只查询常用模板
  is_pre_install?: boolean; // 是否只查询预装模板
}

// API响应结构
export interface ReportTemplateResponse {
  code: string;
  description: string;
  solution: string;
  data: any;
}

export interface ReportTemplateListResponse {
  code: string;
  description: string;
  solution: string;
  data: {
    templates: ReportTemplate[];
    count?: number;
  };
}
```

### 2. Redux State 类型

```typescript
// templateSlice state
export interface TemplateState {
  templates: ReportTemplate[];
  loading: boolean;
  error: string | null;
  selectedTag: string;
}

// findingsSlice state
export interface FindingsState {
  diagnosticDescriptionFromImage: string;
}

// diagnosisSlice state
export interface DiagnosisState {
  diagnosisDescription: string;
}
```

### 3. 组件 Props 类型

```typescript
// TemplateEditModal Props
export interface TemplateEditModalProps {
  visible: boolean;
  template?: ReportTemplate;  // 编辑时传入，新建时为undefined
  onSave: (template: ReportTemplate) => void;
  onCancel: () => void;
}

// TemplateManagementModal Props
export interface TemplateManagementModalProps {
  visible: boolean;
  onClose: () => void;
}

// TemplateListItem Props
export interface TemplateListItemProps {
  template: ReportTemplate;
  onClick: (template: ReportTemplate) => void;
}
```

## 🚀 执行流程

### 1. 功能起点

#### 起点1: 用户打开诊断报告页面
```
用户操作: 从患者列表或其他入口进入诊断报告页面
↓
触发: DiagnosticReport 组件挂载
↓
执行: useEffect 初始化报告数据
↓
执行: TemplatePanel 组件挂载
↓
触发: dispatch(fetchTemplatesThunk())
↓
执行: 调用 API 获取模板列表
↓
结果: 模板列表显示在侧边栏
```

#### 起点2: 用户点击"管理模板"按钮
```
用户操作: 点击 TemplatePanel 中的"管理模板"按钮
↓
触发: 打开 TemplateManagementModal
↓
执行: 显示模板列表（表格形式）
↓
用户可以: 新建/编辑/删除模板
```

#### 起点3: 用户点击"另存为模板"按钮
```
用户操作: 在 FindingsSection 中点击"另存为模板"按钮
↓
触发: 获取当前报告内容（findings + impression）
↓
触发: 打开 TemplateEditModal
↓
执行: 预填充表单（findings 和 impression）
↓
用户操作: 补充模板名称等信息并保存
```

#### 起点4: 用户点击模板列表中的模板
```
用户操作: 在 TemplatePanel 中点击某个模板
↓
触发: 检查当前报告是否有内容
↓
如果有内容: 显示确认对话框
↓
用户确认: 应用模板
↓
执行: dispatch(updateInputValue(template.findings))
执行: dispatch(setDiagnosisDescription(template.impression))
↓
结果: 报告内容被模板内容替换
```

### 2. 详细执行流程图

```mermaid
flowchart TD
    Start([用户进入诊断报告页面]) --> Init[DiagnosticReport组件初始化]
    Init --> LoadTemplates[TemplatePanel加载模板列表]
    LoadTemplates --> FetchAPI[调用fetchTemplatesThunk]
    FetchAPI --> DisplayList[显示模板列表]
    
    DisplayList --> UserAction{用户操作}
    
    UserAction -->|点击管理模板| OpenManagement[打开TemplateManagementModal]
    UserAction -->|点击模板项| ApplyTemplate[应用模板流程]
    UserAction -->|点击另存为模板| SaveAsTemplate[另存为模板流程]
    
    OpenManagement --> ManagementActions{管理操作}
    ManagementActions -->|新建| CreateNew[打开TemplateEditModal<br/>空表单]
    ManagementActions -->|编辑| EditExisting[打开TemplateEditModal<br/>预填充数据]
    ManagementActions -->|删除| DeleteConfirm[显示删除确认]
    
    CreateNew --> FillForm[用户填写表单]
    EditExisting --> FillForm
    FillForm --> Validate{表单验证}
    Validate -->|失败| ShowError[显示错误提示]
    ShowError --> FillForm
    Validate -->|成功| SaveAPI[调用API保存]
    SaveAPI --> RefreshList[刷新模板列表]
    RefreshList --> DisplayList
    
    DeleteConfirm --> ConfirmDelete{用户确认?}
    ConfirmDelete -->|是| CallDeleteAPI[调用deleteTemplateThunk]
    ConfirmDelete -->|否| DisplayList
    CallDeleteAPI --> RefreshList
    
    ApplyTemplate --> CheckContent{当前有内容?}
    CheckContent -->|是| ConfirmApply[显示确认对话框]
    CheckContent -->|否| ApplyDirectly[直接应用]
    ConfirmApply --> UserConfirm{用户确认?}
    UserConfirm -->|是| ApplyDirectly
    UserConfirm -->|否| DisplayList
    ApplyDirectly --> UpdateFindings[更新影像所见]
    UpdateFindings --> UpdateDiagnosis[更新诊断意见]
    UpdateDiagnosis --> DisplayList
    
    SaveAsTemplate --> GetCurrentContent[获取当前报告内容]
    GetCurrentContent --> OpenEditModal[打开TemplateEditModal<br/>预填充findings和impression]
    OpenEditModal --> FillForm
```

## 🧪 测试方案

### 1. 功能测试场景

#### 场景1: 模板列表加载
**测试步骤：**
1. 打开诊断报告页面
2. 观察右侧模板面板

**预期结果：**
- 模板列表正确显示
- 常用模板显示星标
- 标签正确显示
- 加载状态正确显示

**测试数据：**
- 至少3个不同标签的模板
- 至少1个常用模板

#### 场景2: 应用模板（无内容）
**测试步骤：**
1. 打开诊断报告页面（空白报告）
2. 点击模板列表中的某个模板

**预期结果：**
- 影像所见输入框填充模板的findings内容
- 诊断意见输入框填充模板的impression内容
- 无确认对话框

#### 场景3: 应用模板（有内容）
**测试步骤：**
1. 打开诊断报告页面
2. 在影像所见和诊断意见中输入一些内容
3. 点击模板列表中的某个模板

**预期结果：**
- 显示确认对话框："当前报告已有内容，是否替换为模板内容？"
- 点击确认后，内容被替换
- 点击取消后，内容保持不变

#### 场景4: 创建新模板
**测试步骤：**
1. 点击"管理模板"按钮
2. 点击"新建模板"按钮
3. 填写表单：
   - 模板名称：测试模板
   - 影像所见：测试所见内容
   - 诊断意见：测试诊断内容
   - 标签：测试
   - 勾选"设为常用模板"
4. 点击"保存"

**预期结果：**
- 表单验证通过
- API调用成功
- 显示成功提示
- 模板列表刷新，新模板出现
- 新模板显示星标（常用）

#### 场景5: 编辑模板
**测试步骤：**
1. 点击"管理模板"按钮
2. 点击某个模板的"编辑"按钮
3. 修改模板名称
4. 点击"保存"

**预期结果：**
- 表单预填充原有数据
- 修改后保存成功
- 模板列表刷新，显示修改后的名称

#### 场景6: 删除模板
**测试步骤：**
1. 点击"管理模板"按钮
2. 点击某个模板的"删除"按钮
3. 在确认对话框中点击"确认"

**预期结果：**
- 显示确认对话框："确定要删除此模板吗？"
- 点击确认后，模板被删除
- 模板列表刷新，该模板消失
- 显示成功提示

#### 场景7: 另存为模板
**测试步骤：**
1. 在影像所见中输入："胸部正位片显示..."
2. 在诊断意见中输入："未见明显异常"
3. 点击"另存为模板"按钮
4. 在弹出的对话框中：
   - 输入模板名称："胸部正常模板"
   - 输入标签："胸部"
   - 勾选"设为常用模板"
5. 点击"保存"

**预期结果：**
- 对话框自动填充影像所见和诊断意见
- 保存成功
- 模板列表刷新，新模板出现

#### 场景8: 标签过滤
**测试步骤：**
1. 在模板面板中选择标签过滤："胸部"
2. 观察模板列表

**预期结果：**
- 只显示标签为"胸部"的模板
- 其他标签的模板被隐藏

#### 场景9: 复制诊断报告模板
**测试步骤：**
1. 点击"管理诊断报告模板"按钮
2. 点击选择一个已有的诊断报告模板
3. 点击"复制"按钮
4. 修改模板名称（自动添加"- 副本"后缀）
5. 点击"保存"

**预期结果：**
- 复制按钮仅在选中模板时显示
- 右侧表单预填充选中模板的所有内容
- 模板名称自动添加"- 副本"后缀
- 保存成功后，列表中出现新的复制模板
- 原模板不受影响

#### 场景10: 表单验证
**测试步骤：**
1. 点击"管理模板"→"新建模板"
2. 不填写任何内容，直接点击"保存"

**预期结果：**
- 显示验证错误提示
- 必填字段标红
- 无法保存

### 2. 边界情况测试

#### 测试用例1: 空模板列表
**场景：** 后端返回空模板列表
**预期：** 显示"暂无模板"提示

#### 测试用例2: API错误
**场景：** 网络错误或API返回错误
**预期：** 显示友好的错误提示，不影响其他功能

#### 测试用例3: 长文本内容
**场景：** 模板内容超过1000字
**预期：** 正确保存和显示，文本框支持滚动

#### 测试用例4: 特殊字符
**场景：** 模板名称包含特殊字符（如：<>、&、"）
**预期：** 正确转义和显示

#### 测试用例5: 并发操作
**场景：** 快速连续点击保存按钮
**预期：** 防抖处理，只发送一次请求

### 3. 性能测试

#### 测试用例1: 大量模板
**场景：** 模板列表包含100+个模板
**预期：** 
- 列表渲染流畅
- 滚动无卡顿
- 考虑虚拟滚动优化

#### 测试用例2: 响应时间
**场景：** 所有操作
**预期：** 响应时间 < 500ms

### 4. 用户体验测试

#### 测试用例1: 加载状态
**场景：** API调用期间
**预期：** 显示加载指示器（Spin）

#### 测试用例2: 成功提示
**场景：** 创建/编辑/删除成功
**预期：** 显示Toast提示，3秒后自动消失

#### 测试用例3: 错误提示
**场景：** 操作失败
**预期：** 显示清晰的错误信息和解决建议

## 🐛 潜在问题分析

### 1. 数据一致性问题

**问题：** 多个用户同时编辑同一个模板
**影响：** 数据覆盖，后保存的覆盖先保存的
**解决方案：**
- 实现乐观锁机制（版本号）
- 保存前检查版本号
- 如果版本号不匹配，提示用户刷新后再编辑

### 2. 网络错误处理

**问题：** API调用失败（网络断开、超时等）
**影响：** 用户操作失败，体验差
**解决方案：**
- 实现重试机制（最多3次）
- 显示友好的错误提示
- 提供手动重试按钮
- 离线状态检测

### 3. 内存泄漏

**问题：** 组件卸载时未清理订阅
**影响：** 内存占用增加，性能下降
**解决方案：**
- 使用useEffect清理函数
- 取消未完成的API请求
- 清理事件监听器

### 4. 表单状态管理

**问题：** 表单数据与Redux状态不同步
**影响：** 数据不一致，保存失败
**解决方案：**
- 使用受控组件
- 统一状态管理
- 表单验证在提交前进行

### 5. 性能问题

**问题：** 大量模板导致列表渲染慢
**影响：** 页面卡顿，用户体验差
**解决方案：**
- 实现虚拟滚动（react-window）
- 分页加载
- 懒加载
- 防抖和节流

### 6. 并发问题

**问题：** 用户快速连续点击保存按钮
**影响：** 发送多次重复请求
**解决方案：**
- 按钮防抖处理
- 保存期间禁用按钮
- 显示加载状态

### 7. 数据验证

**问题：** 前端验证不足，后端返回错误
**影响：** 用户体验差
**解决方案：**
- 完善前端验证规则
- 与后端验证规则保持一致
- 显示清晰的错误提示

### 8. 浏览器兼容性

**问题：** 某些浏览器不支持特定API
**影响：** 功能异常
**解决方案：**
- 使用Polyfill
- 特性检测
- 降级方案

## 📐 组件架构图

```mermaid
graph TB
    subgraph "DiagnosticReport Page"
        DR[DiagnosticReport]
        RH[ReportHeader]
        RM[ReportMain]
        RF[ReportFooter]
    end
    
    subgraph "ReportMain"
        MC[MainContent]
        SP[SidePanel]
    end
    
    subgraph "MainContent"
        BI[BaseInfo]
        IL[ImageList]
        FS[FindingsSection]
        DS[DiagnosisSection]
    end
    
    subgraph "SidePanel"
        SF[StudyFilter]
        TP[TemplatePanel]
    end
    
    subgraph "TemplatePanel"
        TPList[模板列表]
        TPFilter[标签过滤]
        TPManage[管理模板按钮]
    end
    
    subgraph "Modals"
        TMM[TemplateManagementModal<br/>左:列表 右:编辑]
    end
    
    DR --> RH
    DR --> RM
    DR --> RF
    RM --> MC
    RM --> SP
    MC --> BI
    MC --> IL
    MC --> FS
    MC --> DS
    SP --> SF
    SP --> TP
    TP --> TPList
    TP --> TPFilter
    TP --> TPManage
    TPManage -.打开.-> TMM
    FS -.打开.-> TMM
    TPList -.应用模板.-> FS
    TPList -.应用模板.-> DS
```

## 🔧 技术实现细节

### 1. Redux Thunk 实现示例

```typescript
// templateSlice.ts
export const fetchTemplatesThunk = createAsyncThunk(
  'template/fetchTemplates',
  async (params?: ReportTemplateQueryParams, { rejectWithValue }) => {
    try {
      const response = await getReportTemplateList(params);
      return response.data.templates;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
  }
);

export const createTemplateThunk = createAsyncThunk(
  'template/createTemplate',
  async (template: ReportTemplate, { rejectWithValue }) => {
    try {
      const response = await createReportTemplate(template);
      return response.data;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
  }
);
```

### 2. 表单验证规则

```typescript
const validateTemplate = (template: ReportTemplate): string[] => {
  const errors: string[] = [];
  
  if (!template.name || template.name.trim() === '') {
    errors.push('模板名称不能为空');
  }
  
  if (template.name && template.name.length > 50) {
    errors.push('模板名称不能超过50个字符');
  }
  
  if (!template.findings || template.findings.trim() === '') {
    errors.push('影像所见不能为空');
  }
  
  if (!template.impression || template.impression.trim() === '') {
    errors.push('诊断意见不能为空');
  }
  
  return errors;
};
```

### 3. 应用模板确认逻辑

```typescript
const handleApplyTemplate = (template: ReportTemplate) => {
  const hasContent = 
    findings.diagnosticDescriptionFromImage.trim() !== '' ||
    diagnosis.diagnosisDescription.trim() !== '';
  
  if (hasContent) {
    Modal.confirm({
      title: '确认应用模板',
      content: '当前报告已有内容，是否替换为模板内容？',
      onOk: () => {
        dispatch(updateInputValue(template.findings));
        dispatch(setDiagnosisDescription(template.impression));
        message.success('模板已应用');
      },
    });
  } else {
    dispatch(updateInputValue(template.findings));
    dispatch(setDiagnosisDescription(template.impression));
    message.success('模板已应用');
  }
};
```

## 📱 响应式设计考虑

虽然当前主要针对桌面端，但需要考虑：

1. **对话框尺寸**
   - 大屏：宽度800px
   - 中屏：宽度90%
   - 小屏：全屏显示

2. **模板列表**
   - 大屏：显示完整信息
   - 小屏：简化显示，点击展开详情

3. **表单布局**
   - 大屏：两列布局
   - 小屏：单列布局

## 🎯 实现优先级

### P0 - 核心功能（必须实现）
1. ✅ Redux templateSlice 实现
2. ✅ TemplateEditModal 组件
3. ✅ TemplatePanel 基本功能
4. ✅ 应用模板功能
5. ✅ 创建/编辑/删除模板

### P1 - 重要功能（应该实现）
1. TemplateManagementModal 组件
2. 标签过滤功能
3. 常用模板标记
4. 另存为模板功能
5. 确认对话框

### P2 - 增强功能（可以实现）
1. 模板预览
2. 模板搜索
3. 模板排序
4. 批量操作
5. 模板导入/导出

## 📚 参考文档

- [Ant Design Modal](https://ant.design/components/modal-cn/)
- [Ant Design Form](https://ant.design/components/form-cn/)
- [Ant Design Table](https://ant.design/components/table-cn/)
- [Redux Toolkit Async Thunks](https://redux-toolkit.js.org/api/createAsyncThunk)
- [React Hooks](https://react.dev/reference/react)

## 📝 总结

本文档详细描述了诊断报告模板编辑功能的完整设计方案，包括：

1. **需求分析** - 明确了功能需求和非功能需求
2. **UI设计** - 提供了详细的界面布局和交互设计
3. **架构设计** - 定义了组件结构、状态管理和数据流
4. **实现计划** - 制定了分阶段的实现TodoList
5. **测试方案** - 覆盖了功能测试、边界测试和性能测试
6. **风险分析** - 识别了潜在问题并提供了解决方案

通过本文档，开发团队可以清晰地了解功能的全貌，按照计划有序地实现各个模块，确保功能的质量和用户体验。

---

**文档版本：** v1.0  
**创建日期：** 2025-12-25  
**最后更新：** 2025-12-25  
**作者：** Cline AI Assistant