# 首选项-新建检查-布局与组件结构描述

## 页面层次结构分析

### Page (页面)
- **Layout**: Split View (分割视图) - 主内容区分为左右两个面板
- **Header**: 顶部工具栏，包含标题和操作按钮
- **Footer**: 底部操作区，包含取消和保存按钮

### Main Content (主内容区)
- **Left Panel (左侧面板)**: Flexbox Layout (弹性布局)，垂直排列
  - **Container**: 表单容器，包含多个表单组
  - **Section**: 自动生成动物ID的设置组
    - **Component**: Switch (开关) - 自动生成动物ID
    - **Component**: Switch (开关) - 自动生成动物ID的前缀
    - **Component**: Input (输入框) - 详细输入内容
  - **Section**: 默认动物类型组
    - **Component**: Select (下拉选择) - 默认连中的动物类型

- **Right Panel (右侧面板)**: 表格展示区
  - **Component**: Table (表格) - 输入字段配置表
    - **Columns**: 可见 (Checkbox), 必填 (Checkbox), 输入字段列表 (Text)
    - **Rows**: 16个字段配置行

### Footer (底部)
- **Container**: 按钮组容器，水平排列
- **Component**: Button (按钮) - 取消
- **Component**: Button (按钮) - 保存

## 布局类型
- **Primary Layout**: Split View (分割视图) - 左右面板分割
- **Left Panel**: Flexbox Layout (弹性布局) - 垂直堆叠表单组
- **Right Panel**: Fixed Layout (固定布局) - 表格固定宽度
- **Footer**: Flexbox Layout (弹性布局) - 水平排列按钮

## 组件选择理由 (使用Ant Design组件)

### 基础组件选择
1. **Switch (开关)**: 用于布尔值设置，替代Checkbox在空间受限时的更好选择
   - 理由: 视觉上更直观，用户体验更好，符合现代UI设计趋势

2. **Input (输入框)**: 用于文本输入
   - 理由: Ant Design的Input组件提供完整的表单验证、状态管理等功能

3. **Select (下拉选择)**: 用于选项选择
   - 理由: 支持搜索、自定义选项渲染，易用性强

4. **Table (表格)**: 用于字段配置展示
   - 理由: 支持行选择、排序、分页等高级功能，数据展示清晰

5. **Button (按钮)**: 用于操作触发
   - 理由: 提供多种类型(主要、次要、危险等)，支持加载状态

### 布局组件选择
1. **Form (表单)**: 整体表单容器
   - 理由: 提供表单验证、提交处理、布局管理等完整功能

2. **Card (卡片)**: 用于分组设置
   - 理由: 提供清晰的视觉分组，符合Material Design原则

3. **Space (间距)**: 用于元素间距控制
   - 理由: 提供一致的间距系统，避免手动计算margin/padding

## 页面涉及的可能功能

### 核心功能
1. **动物ID自动生成设置**
   - 启用/禁用自动生成
   - 配置前缀设置
   - 自定义详细输入规则

2. **默认动物类型配置**
   - 选择默认动物类型
   - 支持预定义选项(Cat, Dog, Other)

3. **输入字段配置管理**
   - 字段可见性控制
   - 必填字段设置
   - 字段列表管理

### 辅助功能
1. **表单验证**: 确保输入数据的有效性
2. **数据持久化**: 保存设置到后端或本地存储
3. **重置功能**: 恢复默认设置
4. **实时预览**: 显示当前配置的效果

## 功能思考与需求描述

### 用户需求分析
1. **简化操作流程**: 通过自动生成ID减少手动输入，提高效率
2. **灵活配置**: 允许用户根据具体业务场景调整字段配置
3. **数据完整性**: 通过必填字段确保关键信息不遗漏
4. **用户友好**: 直观的界面设计，降低学习成本

### 业务场景考虑
1. **兽医诊所**: 需要记录动物基本信息、主人信息、医疗信息
2. **批量检查**: 自动生成ID适用于大量动物检查场景
3. **合规要求**: 某些字段为必填以满足法规要求
4. **个性化设置**: 不同诊所可根据自身需求调整字段

### 技术需求
1. **响应式设计**: 支持不同屏幕尺寸
2. **状态管理**: 需要保存用户设置并在应用中生效
3. **数据验证**: 前端和后端双重验证
4. **性能优化**: 大量字段配置时的渲染性能

## 后续实现建议

### Slice设计 (Redux Toolkit)
```typescript
// src/states/preferencesSlice.ts
interface PreferencesState {
  workflowInspection: {
    autoGenerateAnimalId: boolean;
    autoGeneratePrefix: boolean;
    detailedInput: string;
    defaultAnimalType: 'Cat' | 'Dog' | 'Other';
    fieldConfigurations: Array<{
      field: string;
      visible: boolean;
      required: boolean;
    }>;
  };
}

// Actions
- setAutoGenerateAnimalId
- setAutoGeneratePrefix
- setDetailedInput
- setDefaultAnimalType
- updateFieldConfiguration
- savePreferences
- loadPreferences
```

### 状态结构
```typescript
interface WorkflowInspectionConfig {
  // 自动生成设置
  autoGenerate: {
    enabled: boolean;
    prefix: {
      enabled: boolean;
      value: string;
    };
    rules: string;
  };

  // 默认值设置
  defaults: {
    animalType: AnimalType;
  };

  // 字段配置
  fields: FieldConfig[];
}

interface FieldConfig {
  key: string;
  label: string;
  visible: boolean;
  required: boolean;
  order: number;
}
```

### 交互设计
1. **实时保存**: 用户修改设置后自动保存草稿
2. **批量操作**: 表格支持批量设置可见性和必填状态
3. **拖拽排序**: 字段列表支持拖拽调整顺序
4. **搜索过滤**: 字段列表支持搜索和过滤
5. **撤销重做**: 支持设置的撤销和重做操作

### 实现步骤
1. 创建Redux slice管理状态
2. 实现表单组件和验证逻辑
3. 添加表格编辑功能
4. 实现数据持久化
5. 添加响应式布局
6. 编写单元测试
7. 集成到主应用中

### 扩展功能建议
1. **模板管理**: 保存和加载不同的字段配置模板
2. **角色权限**: 不同用户角色有不同的字段配置权限
3. **历史记录**: 查看和恢复之前的配置版本
4. **导入导出**: 支持配置的导入和导出功能