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

页面层次结构分析

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组件)

基础组件选择

Switch (开关): 用于布尔值设置，替代Checkbox在空间受限时的更好选择
- 理由: 视觉上更直观，用户体验更好，符合现代UI设计趋势
Input (输入框): 用于文本输入
- 理由: Ant Design的Input组件提供完整的表单验证、状态管理等功能
Select (下拉选择): 用于选项选择
- 理由: 支持搜索、自定义选项渲染，易用性强
Table (表格): 用于字段配置展示
- 理由: 支持行选择、排序、分页等高级功能，数据展示清晰
Button (按钮): 用于操作触发
- 理由: 提供多种类型(主要、次要、危险等)，支持加载状态

布局组件选择

Form (表单): 整体表单容器
- 理由: 提供表单验证、提交处理、布局管理等完整功能
Card (卡片): 用于分组设置
- 理由: 提供清晰的视觉分组，符合Material Design原则
Space (间距): 用于元素间距控制
- 理由: 提供一致的间距系统，避免手动计算margin/padding

页面涉及的可能功能

核心功能

动物ID自动生成设置
- 启用/禁用自动生成
- 配置前缀设置
- 自定义详细输入规则
默认动物类型配置
- 选择默认动物类型
- 支持预定义选项(Cat, Dog, Other)
输入字段配置管理
- 字段可见性控制
- 必填字段设置
- 字段列表管理

辅助功能

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

功能思考与需求描述

用户需求分析

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

业务场景考虑

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

技术需求

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

后续实现建议

Slice设计 (Redux Toolkit)

// 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

状态结构

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;
}

交互设计

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

实现步骤

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

扩展功能建议

模板管理: 保存和加载不同的字段配置模板
角色权限: 不同用户角色有不同的字段配置权限
历史记录: 查看和恢复之前的配置版本
导入导出: 支持配置的导入和导出功能

首选项-新建检查-布局与组件结构描述.md 5.8 KB History Raw

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

页面层次结构分析

Page (页面)

Main Content (主内容区)

Footer (底部)

布局类型

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

基础组件选择

布局组件选择

页面涉及的可能功能

核心功能

辅助功能

功能思考与需求描述

用户需求分析

业务场景考虑

技术需求

后续实现建议

Slice设计 (Redux Toolkit)

状态结构

交互设计

实现步骤

扩展功能建议

首选项-新建检查-布局与组件结构描述.md 5.8 KB

History Raw