添加新建检查相关的页面、文档、层次化描述

src/pages/system/SettingsModal/sections/Preferences/NewInspection.tsx

@@ -0,0 +1,208 @@
+/**
+ * 新建检查 - 工作流检查设置组件
+ */
+import React, { useState } from 'react';
+import { Form, Card, Switch, Input, Select, Table, Button, Space, Checkbox } from 'antd';
+import { SPACING } from '../../constants';
+
+const { Option } = Select;
+
+// 字段配置数据类型
+interface FieldConfig {
+  key: string;
+  field: string;
+  visible: boolean;
+  required: boolean;
+}
+
+/**
+ * 新建检查组件
+ * 实现自动生成动物ID设置和输入字段配置功能
+ */
+const NewInspection: React.FC = () => {
+  const [form] = Form.useForm();
+
+  // 字段配置数据
+  const [fieldConfigs, setFieldConfigs] = useState<FieldConfig[]>([
+    { key: '1', field: '主人', visible: true, required: true },
+    { key: '2', field: '动物名称', visible: true, required: true },
+    { key: '3', field: '动物ID', visible: true, required: false },
+    { key: '4', field: '芯片号', visible: true, required: false },
+    { key: '5', field: '动物类型', visible: true, required: false },
+    { key: '6', field: '出生日期', visible: true, required: true },
+    { key: '7', field: '年龄', visible: true, required: false },
+    { key: '8', field: '动物体型', visible: true, required: false },
+    { key: '9', field: '性别', visible: true, required: false },
+    { key: '10', field: '体重/体长', visible: true, required: false },
+    { key: '11', field: '登记号', visible: true, required: true },
+    { key: '12', field: '兽医师', visible: true, required: false },
+    { key: '13', field: '操作技师', visible: true, required: false },
+    { key: '14', field: '动物注意', visible: true, required: false },
+    { key: '15', field: '麻醉', visible: true, required: false },
+    { key: '16', field: '镇定', visible: true, required: false },
+  ]);
+
+  // 表格列配置
+  const columns = [
+    {
+      title: '可见',
+      dataIndex: 'visible',
+      key: 'visible',
+      width: 80,
+      render: (visible: boolean, record: FieldConfig) => (
+        <Checkbox
+          checked={visible}
+          onChange={(e) => handleFieldConfigChange(record.key, 'visible', e.target.checked)}
+        />
+      ),
+    },
+    {
+      title: '必填',
+      dataIndex: 'required',
+      key: 'required',
+      width: 80,
+      render: (required: boolean, record: FieldConfig) => (
+        <Checkbox
+          checked={required}
+          onChange={(e) => handleFieldConfigChange(record.key, 'required', e.target.checked)}
+        />
+      ),
+    },
+    {
+      title: '输入字段列表',
+      dataIndex: 'field',
+      key: 'field',
+    },
+  ];
+
+  // 处理字段配置变更
+  const handleFieldConfigChange = (key: string, field: 'visible' | 'required', value: boolean) => {
+    setFieldConfigs(prev =>
+      prev.map(config =>
+        config.key === key ? { ...config, [field]: value } : config
+      )
+    );
+  };
+
+  // 处理保存
+  const handleSave = () => {
+    form.validateFields().then(values => {
+      console.log('保存设置:', { ...values, fieldConfigs });
+      // TODO: 调用API保存设置
+    });
+  };
+
+  // 处理取消
+  const handleCancel = () => {
+    form.resetFields();
+    // 重置字段配置到初始状态
+    setFieldConfigs([
+      { key: '1', field: '主人', visible: true, required: true },
+      { key: '2', field: '动物名称', visible: true, required: true },
+      { key: '3', field: '动物ID', visible: true, required: false },
+      { key: '4', field: '芯片号', visible: true, required: false },
+      { key: '5', field: '动物类型', visible: true, required: false },
+      { key: '6', field: '出生日期', visible: true, required: true },
+      { key: '7', field: '年龄', visible: true, required: false },
+      { key: '8', field: '动物体型', visible: true, required: false },
+      { key: '9', field: '性别', visible: true, required: false },
+      { key: '10', field: '体重/体长', visible: true, required: false },
+      { key: '11', field: '登记号', visible: true, required: true },
+      { key: '12', field: '兽医师', visible: true, required: false },
+      { key: '13', field: '操作技师', visible: true, required: false },
+      { key: '14', field: '动物注意', visible: true, required: false },
+      { key: '15', field: '麻醉', visible: true, required: false },
+      { key: '16', field: '镇定', visible: true, required: false },
+    ]);
+  };
+
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {/* 主内容区 - 分割视图 */}
+      <div style={{ flex: 1, display: 'flex', gap: SPACING.LG, padding: SPACING.LG }}>
+        {/* 左侧面板 - 表单设置 */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: SPACING.MD }}>
+          <Form
+            form={form}
+            layout="vertical"
+            initialValues={{
+              autoGenerateAnimalId: false,
+              autoGeneratePrefix: false,
+              detailedInput: '',
+              defaultAnimalType: 'Cat',
+            }}
+          >
+            {/* 自动生成动物ID的设置 */}
+            <Card title="自动生成动物ID的设置" size="small">
+              <Space direction="vertical" style={{ width: '100%' }}>
+                <Form.Item
+                  label="自动生成动物ID"
+                  name="autoGenerateAnimalId"
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>
+
+                <Form.Item
+                  label="自动生成动物ID的前缀"
+                  name="autoGeneratePrefix"
+                  valuePropName="checked"
+                >
+                  <Switch />
+                </Form.Item>
+
+                <Form.Item
+                  label="详细输入内容"
+                  name="detailedInput"
+                >
+                  <Input placeholder="请输入详细规则" />
+                </Form.Item>
+              </Space>
+            </Card>
+
+            {/* 默认动物类型 */}
+            <Card title="默认动物类型" size="small">
+              <Form.Item
+                label="默认连中的动物类型"
+                name="defaultAnimalType"
+              >
+                <Select style={{ width: '100%' }}>
+                  <Option value="Cat">Cat</Option>
+                  <Option value="Dog">Dog</Option>
+                  <Option value="Other">Other</Option>
+                </Select>
+              </Form.Item>
+            </Card>
+          </Form>
+        </div>
+
+        {/* 右侧面板 - 字段配置表格 */}
+        <div style={{ flex: 1 }}>
+          <Card title="输入字段配置" size="small">
+            <Table
+              columns={columns}
+              dataSource={fieldConfigs}
+              pagination={false}
+              size="small"
+              scroll={{ y: 400 }}
+            />
+          </Card>
+        </div>
+      </div>
+
+      {/* 底部操作区 */}
+      <div style={{
+        padding: SPACING.LG,
+        borderTop: '1px solid #f0f0f0',
+        display: 'flex',
+        justifyContent: 'flex-end',
+        gap: SPACING.MD
+      }}>
+        <Button onClick={handleCancel}>取消</Button>
+        <Button type="primary" onClick={handleSave}>保存</Button>
+      </div>
+    </div>
+  );
+};
+
+export default NewInspection;

src/pages/system/SettingsModal/sections/Preferences/index.tsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import PlaceholderSection from '../PlaceholderSection';
+import NewInspection from './NewInspection';
 
 // 通用设置
 export const GeneralSettings: React.FC = () => (
@@ -10,9 +11,7 @@ export const GeneralSettings: React.FC = () => (
 );
 
 // 流程检查
-export const WorkflowInspection: React.FC = () => (
-  <PlaceholderSection title="流程检査" />
-);
+export const WorkflowInspection: React.FC = () => <NewInspection />;
 
 // 工作流
 export const Workflow: React.FC = () => (

src/pages/system/SettingsModal/sections/Preferences/首选项-新建检查-布局与组件结构描述.md

@@ -0,0 +1,187 @@
+# 首选项-新建检查-布局与组件结构描述
+
+## 页面层次结构分析
+
+### 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. **导入导出**: 支持配置的导入和导出功能

src/pages/system/SettingsModal/sections/Preferences/首选项-新建检查.json

@@ -0,0 +1,120 @@
+{
+  "page": {
+    "header": {
+      "title": "Mgr",
+      "menuBar": {
+        "items": [
+          "通用设置",
+          "新建检查",
+          "工作流",
+          "四台供热",
+          "添加备注",
+          "查看和处理",
+          "报告"
+        ]
+      },
+      "topRightIcons": [
+        "语言切换",
+        "退出登录"
+      ]
+    },
+    "sidebar": {
+      "sections": [
+        {
+          "title": "系统之家",
+          "icon": "home"
+        },
+        {
+          "title": "首选项",
+          "icon": "settings",
+          "active": true
+        },
+        {
+          "title": "硬件配置",
+          "icon": "hardware"
+        },
+        {
+          "title": "网络设置",
+          "icon": "network"
+        },
+        {
+          "title": "协议设置",
+          "icon": "protocol"
+        },
+        {
+          "title": "统计分析",
+          "icon": "chart"
+        }
+      ]
+    },
+    "mainContent": {
+      "section": "新建检查",
+      "layout": {
+        "leftPanel": {
+          "groups": [
+            {
+              "title": "自动生成动物ID的设置",
+              "fields": [
+                {
+                  "label": "自动生成动物ID",
+                  "type": "toggle",
+                  "value": false
+                },
+                {
+                  "label": "自动生成动物ID的前缀",
+                  "type": "toggle",
+                  "value": false
+                },
+                {
+                  "label": "详细输入内容",
+                  "type": "textField",
+                  "value": ""
+                }
+              ]
+            },
+            {
+              "title": "默认动物类型",
+              "fields": [
+                {
+                  "label": "默认连中的动物类型",
+                  "type": "dropdown",
+                  "value": "Cat",
+                  "options": ["Cat", "Dog", "Other"]
+                }
+              ]
+            }
+          ]
+        },
+        "rightPanel": {
+          "table": {
+            "columns": ["可见", "必填", "输入字段列表"],
+            "rows": [
+              { "field": "主人", "visible": true, "required": true },
+              { "field": "动物名称", "visible": true, "required": true },
+              { "field": "动物ID", "visible": true, "required": false },
+              { "field": "芯片号", "visible": true, "required": false },
+              { "field": "动物类型", "visible": true, "required": false },
+              { "field": "出生日期", "visible": true, "required": true },
+              { "field": "年龄", "visible": true, "required": false },
+              { "field": "动物体型", "visible": true, "required": false },
+              { "field": "性别", "visible": true, "required": false },
+              { "field": "体重/体长", "visible": true, "required": false },
+              { "field": "登记号", "visible": true, "required": true },
+              { "field": "兽医师", "visible": true, "required": false },
+              { "field": "操作技师", "visible": true, "required": false },
+              { "field": "动物注意", "visible": true, "required": false },
+              { "field": "麻醉", "visible": true, "required": false },
+              { "field": "镇定", "visible": true, "required": false }
+            ]
+          }
+        }
+      },
+      "footer": {
+        "buttons": [
+          { "label": "取消", "action": "cancel" },
+          { "label": "保存", "action": "save" }
+        ]
+      }
+    }
+  }
+}