Главная Обзор Помощь
Вход
ddx
/
dros
2
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Дерево: 2d5d4e56ec
Ветки Метки
dros
/
src
/
pages
/
system
/
SettingsModal
/
sections
/
Preferences
/
首选项-新建检查-布局与组件结构描述.md

首选项-新建检查-布局与组件结构描述.md 5.8 KB
История Исходник

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

页面层次结构分析

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)

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

交互设计

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

实现步骤

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

扩展功能建议

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