From 3e40119f0962c5ab1d6c2cae4146b9e24fde89d9 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Mon, 3 Nov 2025 22:38:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BB=A3=E7=A0=81=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E8=A1=A8=E5=8D=95=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/FormDesigner/Preview.tsx   |  13 +-
 .../src/components/FormDesigner/Renderer.tsx  |  18 +-
 .../FormDesigner/components/FieldRenderer.tsx | 236 +++---------------
 .../components/FormFieldsRenderer.tsx         |  45 +++-
 .../FormDesigner/components/GridField.tsx     |  11 +-
 .../components/GridFieldPreview.tsx           | 116 +++------
 .../FormDesigner/components/PropertyPanel.tsx |   8 +
 .../FormDesigner/hooks/useFormCore.ts         |  33 ++-
 .../renderers/FieldRenderStrategyRegistry.ts  |  71 ++++++
 .../renderers/IFieldRenderStrategy.ts         |  34 +++
 .../strategies/BaseFieldStrategy.tsx          |  31 +++
 .../renderers/strategies/CascaderStrategy.tsx |  31 +++
 .../renderers/strategies/CheckboxStrategy.tsx |  32 +++
 .../renderers/strategies/DateStrategy.tsx     |  28 +++
 .../renderers/strategies/DateTimeStrategy.tsx |  29 +++
 .../renderers/strategies/InputStrategy.tsx    |  28 +++
 .../renderers/strategies/NumberStrategy.tsx   |  30 +++
 .../renderers/strategies/RadioStrategy.tsx    |  27 ++
 .../renderers/strategies/RateStrategy.tsx     |  26 ++
 .../renderers/strategies/SelectStrategy.tsx   |  29 +++
 .../renderers/strategies/SliderStrategy.tsx   |  28 +++
 .../renderers/strategies/SwitchStrategy.tsx   |  26 ++
 .../renderers/strategies/TextAreaStrategy.tsx |  31 +++
 .../renderers/strategies/TimeStrategy.tsx     |  28 +++
 .../renderers/strategies/UploadStrategy.tsx   |  28 +++
 .../src/components/FormDesigner/styles.css    |  21 ++
 frontend/src/components/FormDesigner/types.ts |   2 +
 .../FormDesigner/utils/defaultValueHelper.ts  |  41 ---
 .../FormDesigner/utils/fieldStateHelper.ts    |  73 ++++++
 .../FormDesigner/utils/formLayoutHelper.ts    |  60 +++++
 .../dataSource/CascadeDataSourceRegistry.ts   |  54 ++--
 .../dataSource/CascadeDataSourceService.ts    | 145 ++++++-----
 .../domain/dataSource/DataSourceRegistry.ts   |  89 ++++---
 .../domain/dataSource/DataSourceService.ts    |  16 +-
 .../domain/dataSource/core/BaseRegistry.ts    |  47 ++++
 .../domain/dataSource/core/errorHandler.ts    |  37 +++
 .../domain/dataSource/core/requestHelper.ts   |  33 +++
 .../src/domain/dataSource/presets/deploy.ts   |  55 ----
 .../src/domain/dataSource/presets/docker.ts   |  17 --
 frontend/src/domain/dataSource/presets/git.ts |  17 --
 .../dataSource/presets/infrastructure.ts      | 190 ++++++++++++++
 .../src/domain/dataSource/presets/jenkins.ts  |  18 --
 frontend/src/domain/dataSource/presets/k8s.ts |  17 --
 .../domain/dataSource/presets/notification.ts |  25 --
 .../src/domain/dataSource/presets/user.ts     |  43 ----
 45 files changed, 1332 insertions(+), 685 deletions(-)
 create mode 100644 frontend/src/components/FormDesigner/renderers/FieldRenderStrategyRegistry.ts
 create mode 100644 frontend/src/components/FormDesigner/renderers/IFieldRenderStrategy.ts
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/BaseFieldStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/CascaderStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/CheckboxStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/DateStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/DateTimeStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/InputStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/NumberStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/RadioStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/RateStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/SelectStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/SliderStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/SwitchStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/TextAreaStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/TimeStrategy.tsx
 create mode 100644 frontend/src/components/FormDesigner/renderers/strategies/UploadStrategy.tsx
 delete mode 100644 frontend/src/components/FormDesigner/utils/defaultValueHelper.ts
 create mode 100644 frontend/src/components/FormDesigner/utils/fieldStateHelper.ts
 create mode 100644 frontend/src/components/FormDesigner/utils/formLayoutHelper.ts
 create mode 100644 frontend/src/domain/dataSource/core/BaseRegistry.ts
 create mode 100644 frontend/src/domain/dataSource/core/errorHandler.ts
 create mode 100644 frontend/src/domain/dataSource/core/requestHelper.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/deploy.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/docker.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/git.ts
 create mode 100644 frontend/src/domain/dataSource/presets/infrastructure.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/jenkins.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/k8s.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/notification.ts
 delete mode 100644 frontend/src/domain/dataSource/presets/user.ts

diff --git a/frontend/src/components/FormDesigner/Preview.tsx b/frontend/src/components/FormDesigner/Preview.tsx
index 8db383e9..03575272 100644
--- a/frontend/src/components/FormDesigner/Preview.tsx
+++ b/frontend/src/components/FormDesigner/Preview.tsx
@@ -35,6 +35,7 @@ import { useImperativeHandle, forwardRef } from 'react';
 import { Form, message } from 'antd';
 import type { FieldConfig, FormConfig } from './types';
 import { useFormCore } from './hooks/useFormCore';
+import { computeFormLayout } from './utils/formLayoutHelper';
 import FormFieldsRenderer from './components/FormFieldsRenderer';
 import './styles.css';
 
@@ -96,20 +97,18 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
     );
   }
 
-  const formLayout = formConfig.labelAlign === 'top' ? 'vertical' : 'horizontal';
-  const labelColSpan = formConfig.labelAlign === 'left' ? 6 : formConfig.labelAlign === 'right' ? 6 : undefined;
-  const wrapperColSpan = formConfig.labelAlign === 'left' || formConfig.labelAlign === 'right' ? 18 : undefined;
+  const layoutConfig = computeFormLayout(formConfig);
 
   return (
     <div className="form-container-padding form-preview-compact">
       <Form
         form={form}
-        layout={formLayout}
+        layout={layoutConfig.layout}
         size={formConfig.size}
         colon={true}
-        labelAlign={formConfig.labelAlign === 'top' ? undefined : formConfig.labelAlign}
-        labelCol={labelColSpan ? { span: labelColSpan } : undefined}
-        wrapperCol={wrapperColSpan ? { span: wrapperColSpan } : undefined}
+        labelAlign={layoutConfig.labelAlign}
+        labelCol={layoutConfig.labelCol}
+        wrapperCol={layoutConfig.wrapperCol}
         onValuesChange={handleValuesChange}
       >
         {formConfig.title && (
diff --git a/frontend/src/components/FormDesigner/Renderer.tsx b/frontend/src/components/FormDesigner/Renderer.tsx
index 1ca8b9a3..9974af74 100644
--- a/frontend/src/components/FormDesigner/Renderer.tsx
+++ b/frontend/src/components/FormDesigner/Renderer.tsx
@@ -50,6 +50,7 @@ import type { ComponentMeta } from './config';
 import { COMPONENT_LIST } from './config';
 import { ComponentsContext } from './Designer';
 import { useFormCore } from './hooks/useFormCore';
+import { computeFormLayout } from './utils/formLayoutHelper';
 import FormFieldsRenderer from './components/FormFieldsRenderer';
 import './styles.css';
 
@@ -230,21 +231,19 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
     );
   }
 
-  const formLayout = formConfig.labelAlign === 'top' ? 'vertical' : 'horizontal';
-  const labelColSpan = formConfig.labelAlign === 'left' ? 6 : formConfig.labelAlign === 'right' ? 6 : undefined;
-  const wrapperColSpan = formConfig.labelAlign === 'left' || formConfig.labelAlign === 'right' ? 18 : undefined;
+  const layoutConfig = computeFormLayout(formConfig);
 
   return (
     <ComponentsContext.Provider value={allComponents}>
       <div className="form-container-padding form-renderer-compact">
         <Form
           form={form}
-          layout={formLayout}
+          layout={layoutConfig.layout}
           size={formConfig.size}
           colon={true}
-          labelAlign={formConfig.labelAlign === 'top' ? undefined : formConfig.labelAlign}
-          labelCol={labelColSpan ? { span: labelColSpan } : undefined}
-          wrapperCol={wrapperColSpan ? { span: wrapperColSpan } : undefined}
+          labelAlign={layoutConfig.labelAlign}
+          labelCol={layoutConfig.labelCol}
+          wrapperCol={layoutConfig.wrapperCol}
           onValuesChange={handleValuesChange}
         >
         {formConfig.title && (
@@ -260,7 +259,10 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
           {(showSubmit || showCancel) && (
             <Form.Item 
               style={{ marginTop: 32, marginBottom: 0 }}
-              wrapperCol={{ offset: labelColSpan || 0, span: wrapperColSpan || 24 }}
+              wrapperCol={{ 
+                offset: layoutConfig.labelCol?.span || 0, 
+                span: layoutConfig.wrapperCol?.span || 24 
+              }}
             >
               <div style={{ display: 'flex', gap: 8 }}>
                 {showSubmit && (
diff --git a/frontend/src/components/FormDesigner/components/FieldRenderer.tsx b/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
index 96f2b65d..f8e3887d 100644
--- a/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
+++ b/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
@@ -8,32 +8,19 @@ import { ComponentsContext } from '../Designer';
 import {
   Form,
   Input,
-  InputNumber,
-  Select,
-  Radio,
-  Checkbox,
-  DatePicker,
-  TimePicker,
-  Switch,
-  Slider,
-  Rate,
-  Upload,
-  Cascader,
   Divider,
-  Button,
   Typography,
 } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
 import type { FieldConfig } from '../types';
 import GridField from './GridField';
 import { useFieldOptions } from '../hooks/useFieldOptions';
 import { useCascaderOptions, useCascaderLoadData } from '../hooks/useCascaderOptions';
+import { fieldRenderStrategyRegistry } from '../renderers/FieldRenderStrategyRegistry';
+import type { FieldRenderContext } from '../renderers/IFieldRenderStrategy';
 import '../styles.css';
 
 const { Text } = Typography;
 
-const { TextArea } = Input;
-
 interface FieldRendererProps {
   field: FieldConfig;
   value?: any;
@@ -63,40 +50,27 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
   hasClipboard = false,
   duplicateFieldIds = new Set(),
 }) => {
-  // 获取字段选项（支持静态和动态数据源）
+  // 获取字段选项和级联选项（支持静态和动态数据源）
   const options = useFieldOptions(field);
-  
-  // 获取级联选择器选项和懒加载函数
   const cascadeOptions = useCascaderOptions(field);
   const loadData = useCascaderLoadData(field);
 
-  // 🔌 检查是否有自定义渲染组件（插件式扩展）
+  // 🔌 优先检查自定义渲染组件（插件式扩展）
   const allComponents = useContext(ComponentsContext);
   const componentMeta = allComponents.find(c => c.type === field.type);
   
   if (componentMeta?.FieldRendererComponent) {
     const CustomRenderer = componentMeta.FieldRendererComponent;
-    console.log('✅ FieldRenderer: 使用自定义渲染组件', {
-      fieldType: field.type,
-      isPreview,
-      hasRenderer: !!componentMeta.FieldRendererComponent
-    });
     return <CustomRenderer field={field} value={value} onChange={onChange} isPreview={isPreview} />;
   }
 
-  // 布局组件特殊处理
+  // 布局组件特殊处理（这些组件不通过策略模式）
   if (field.type === 'divider') {
-    const showText = field.showText !== false; // 默认显示文字
+    const showText = field.showText !== false;
     const dividerText = field.dividerText || field.label || '分割线';
     const dividerColor = field.dividerColor || 'rgba(5, 5, 5, 0.06)';
-    
     return (
-      <Divider 
-        style={{ 
-          borderColor: dividerColor,
-          color: dividerColor,
-        }}
-      >
+      <Divider style={{ borderColor: dividerColor, color: dividerColor }}>
         {showText ? dividerText : null}
       </Divider>
     );
@@ -104,10 +78,7 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
 
   if (field.type === 'text') {
     return (
-      <div style={{ 
-        padding: '8px 0',
-        textAlign: field.textAlign || 'left',
-      }}>
+      <div style={{ padding: '8px 0', textAlign: field.textAlign || 'left' }}>
         <Text style={{
           fontSize: field.fontSize ? `${field.fontSize}px` : '14px',
           color: field.textColor || '#000000',
@@ -135,171 +106,44 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
     );
   }
 
+  // 使用策略模式渲染字段（工厂模式获取策略）
+  const strategy = fieldRenderStrategyRegistry.get(field.type);
+  
+  // 计算只读样式
+  const isReadonly = field.readonly || false;
+  const readonlyStyle = isReadonly ? {
+    backgroundColor: '#f5f5f5',
+    cursor: 'not-allowed',
+    color: '#00000040',
+  } : undefined;
+
+  // 构造渲染上下文
+  const renderContext: FieldRenderContext = {
+    field,
+    value,
+    onChange,
+    isDisabled: field.disabled || false,
+    isReadonly,
+    readonlyStyle,
+    options,
+    cascadeOptions,
+    loadData,
+  };
+
+  // 渲染字段组件
   const renderField = () => {
-    switch (field.type) {
-      case 'input':
+    if (strategy) {
+      return strategy.render(renderContext);
+    }
+    
+    // 兜底策略：未注册的字段类型使用默认 Input
         return (
           <Input
             placeholder={field.placeholder}
-            disabled={field.disabled}
-            value={value}
-            onChange={(e) => onChange?.(e.target.value)}
+        readOnly={isReadonly}
+        disabled={field.disabled && !isReadonly}
           />
         );
-
-      case 'textarea':
-        return (
-          <TextArea
-            rows={field.rows || 4}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            value={value}
-            onChange={(e) => onChange?.(e.target.value)}
-          />
-        );
-
-      case 'number':
-        return (
-          <InputNumber
-            style={{ width: '100%' }}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            min={field.min}
-            max={field.max}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'select':
-        return (
-          <Select
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            options={options}
-            value={value}
-            onChange={onChange}
-            style={{ width: '100%' }}
-          />
-        );
-
-      case 'radio':
-        return (
-          <Radio.Group
-            options={options}
-            disabled={field.disabled}
-            value={value}
-            onChange={(e) => onChange?.(e.target.value)}
-          />
-        );
-
-      case 'checkbox':
-        return (
-          <Checkbox.Group
-            options={options}
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-            style={{
-              display: 'flex',
-              flexDirection: field.checkboxLayout === 'vertical' ? 'column' : 'row',
-              gap: field.checkboxLayout === 'vertical' ? '8px' : '16px',
-            }}
-          />
-        );
-
-      case 'date':
-        return (
-          <DatePicker
-            style={{ width: '100%' }}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'datetime':
-        return (
-          <DatePicker
-            showTime
-            style={{ width: '100%' }}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'time':
-        return (
-          <TimePicker
-            style={{ width: '100%' }}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'switch':
-        return (
-          <Switch
-            disabled={field.disabled}
-            checked={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'slider':
-        return (
-          <Slider
-            min={field.min}
-            max={field.max}
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'rate':
-        return (
-          <Rate
-            disabled={field.disabled}
-            value={value}
-            onChange={onChange}
-          />
-        );
-
-      case 'upload':
-        return (
-          <Upload
-            maxCount={field.maxCount}
-            disabled={field.disabled}
-          >
-            <Button icon={<UploadOutlined />}>上传文件</Button>
-          </Upload>
-        );
-
-      // approver-selector 等扩展字段已通过插件机制处理，不在此硬编码
-
-      case 'cascader':
-        return (
-          <Cascader
-            style={{ width: '100%' }}
-            placeholder={field.placeholder}
-            disabled={field.disabled}
-            options={cascadeOptions as any}
-            value={value}
-            onChange={onChange}
-            loadData={loadData as any}
-            changeOnSelect={field.dataSourceType === 'predefined'}
-          />
-        );
-
-      default:
-        return <Input placeholder={field.placeholder} />;
-    }
   };
 
   // 预览模式下，外部已经用 Form.Item 包裹了，这里直接返回控件
diff --git a/frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx b/frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx
index daeeb028..f366b2c7 100644
--- a/frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx
+++ b/frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx
@@ -8,9 +8,22 @@ import { Form } from 'antd';
 import type { FieldConfig, FormConfig } from '../types';
 import type { FieldState } from '../utils/linkageHelper';
 import { mergeValidationRules } from '../utils/validationHelper';
+import { computeFieldState, FieldClassifier } from '../utils/fieldStateHelper';
 import FieldRenderer from './FieldRenderer';
 import GridFieldPreview from './GridFieldPreview';
 
+/**
+ * 隐藏字段组件（内部使用）
+ * 用于渲染隐藏字段（不显示任何 UI，但参与表单提交）
+ */
+const HiddenField: React.FC<{ fieldName: string }> = ({ fieldName }) => {
+  return (
+    <Form.Item name={fieldName} noStyle>
+      <input type="hidden" />
+    </Form.Item>
+  );
+};
+
 export interface FormFieldsRendererProps {
   /** 字段列表 */
   fields: FieldConfig[];
@@ -37,8 +50,11 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
 }) => {
   const renderFields = (fieldList: FieldConfig[]): React.ReactNode => {
     return fieldList.map((field) => {
+      // 使用访问者模式：根据字段类型分类处理
+      const fieldType = FieldClassifier.classify(field);
+      
       // 布局组件：文本、分割线
-      if (field.type === 'text' || field.type === 'divider') {
+      if (fieldType === 'layout') {
         return (
           <div key={field.id} style={{ marginBottom: 8 }}>
             <FieldRenderer field={field} isPreview={true} />
@@ -47,7 +63,7 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
       }
 
       // 栅格布局：使用专门的预览组件
-      if (field.type === 'grid') {
+      if (fieldType === 'grid') {
         return (
           <GridFieldPreview
             key={field.id}
@@ -57,19 +73,22 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
         );
       }
 
-      // 获取字段状态（联动规则影响）
+      // 计算字段最终状态（统一处理 hidden, readonly, disabled, visible, required）
       const fieldState = fieldStates[field.name] || {};
-      const isVisible = fieldState.visible !== false;  // 默认显示
-      const isDisabled = fieldState.disabled || field.disabled || false;
-      const isRequired = fieldState.required !== undefined ? fieldState.required : field.required;
+      const computedState = computeFieldState(field, fieldState);
 
-      // 如果字段被隐藏，不渲染
-      if (!isVisible) {
-        return null;
+      // 如果字段被隐藏，使用隐藏字段组件
+      if (!computedState.isVisible) {
+        return (
+          <HiddenField
+            key={field.id}
+            fieldName={field.name}
+          />
+        );
       }
 
       // 合并验证规则
-      const allRules = mergeValidationRules(field, isRequired);
+      const allRules = mergeValidationRules(field, computedState.isRequired);
 
       // 普通表单组件使用 Form.Item 包裹
       return (
@@ -81,7 +100,11 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
           rules={allRules}
         >
           <FieldRenderer
-            field={{ ...field, disabled: isDisabled }}
+            field={{ 
+              ...field, 
+              disabled: computedState.isDisabled, 
+              readonly: computedState.isReadonly 
+            }}
             isPreview={true}
           />
         </Form.Item>
diff --git a/frontend/src/components/FormDesigner/components/GridField.tsx b/frontend/src/components/FormDesigner/components/GridField.tsx
index 84e60e69..b9b86b57 100644
--- a/frontend/src/components/FormDesigner/components/GridField.tsx
+++ b/frontend/src/components/FormDesigner/components/GridField.tsx
@@ -8,6 +8,7 @@ import { useDroppable } from '@dnd-kit/core';
 import { Row, Col, Button, Space, Tooltip } from 'antd';
 import { DeleteOutlined, CopyOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
 import type { FieldConfig } from '../types';
+import { computeGridColSpan } from '../utils/formLayoutHelper';
 import FieldRenderer from './FieldRenderer';
 
 interface GridFieldProps {
@@ -37,21 +38,13 @@ const GridField: React.FC<GridFieldProps> = ({
 }) => {
   const columns = field.columns || 2;
   const children = field.children || Array(columns).fill([]);
-  
-  // 使用自定义列宽度或平均分配
-  const getColSpan = (colIndex: number) => {
-    if (field.columnSpans && field.columnSpans.length > colIndex) {
-      return field.columnSpans[colIndex];
-    }
-    return 24 / columns; // 平均分配
-  };
 
   return (
     <div style={{ padding: '8px 0', width: '100%' }}>
       <Row gutter={field.gutter || 16}>
         {children.map((columnFields, colIndex) => {
           const dropId = `grid-${field.id}-col-${colIndex}`;
-          const colSpan = getColSpan(colIndex);
+          const colSpan = computeGridColSpan(field.columnSpans, columns, colIndex);
           
           return (
             <GridColumn
diff --git a/frontend/src/components/FormDesigner/components/GridFieldPreview.tsx b/frontend/src/components/FormDesigner/components/GridFieldPreview.tsx
index c70b5b29..9acb4a83 100644
--- a/frontend/src/components/FormDesigner/components/GridFieldPreview.tsx
+++ b/frontend/src/components/FormDesigner/components/GridFieldPreview.tsx
@@ -5,10 +5,23 @@
 
 import React from 'react';
 import { Row, Col, Form } from 'antd';
-import type { Rule } from 'antd/es/form';
-import type { FieldConfig, FormConfig, ValidationRule } from '../types';
+import type { FieldConfig, FormConfig } from '../types';
+import { mergeValidationRules } from '../utils/validationHelper';
+import { computeFieldState, FieldClassifier } from '../utils/fieldStateHelper';
+import { computeGridColSpan } from '../utils/formLayoutHelper';
 import FieldRenderer from './FieldRenderer';
 
+/**
+ * 隐藏字段组件（内部使用）
+ */
+const HiddenField: React.FC<{ fieldName: string }> = ({ fieldName }) => {
+  return (
+    <Form.Item name={fieldName} noStyle>
+      <input type="hidden" />
+    </Form.Item>
+  );
+};
+
 interface GridFieldPreviewProps {
   field: FieldConfig;
   formConfig?: FormConfig;
@@ -20,63 +33,25 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
 }) => {
   const columns = field.columns || 2;
   const children = field.children || Array(columns).fill([]);
-  
-  // 使用自定义列宽度或平均分配
-  const getColSpan = (colIndex: number) => {
-    if (field.columnSpans && field.columnSpans.length > colIndex) {
-      return field.columnSpans[colIndex];
-    }
-    return 24 / columns; // 平均分配
-  };
-
-  // 将验证规则转换为Ant Design的Rule数组（和FormPreview保持一致）
-  const convertValidationRules = (validationRules?: ValidationRule[]): Rule[] => {
-    if (!validationRules || validationRules.length === 0) return [];
-
-    return validationRules.map(rule => {
-      const antdRule: Rule = {
-        type: rule.type === 'email' ? 'email' : rule.type === 'url' ? 'url' : undefined,
-        message: rule.message || `请输入正确的${rule.type}`,
-      };
-
-      switch (rule.type) {
-        case 'required':
-          antdRule.required = true;
-          break;
-        case 'pattern':
-          if (rule.value) {
-            antdRule.pattern = new RegExp(rule.value);
-          }
-          break;
-        case 'min':
-          antdRule.type = 'number';
-          antdRule.min = rule.value;
-          break;
-        case 'max':
-          antdRule.type = 'number';
-          antdRule.max = rule.value;
-          break;
-        case 'minLength':
-          antdRule.min = rule.value;
-          break;
-        case 'maxLength':
-          antdRule.max = rule.value;
-          break;
-        case 'phone':
-          antdRule.pattern = /^1[3-9]\d{9}$/;
-          break;
-        case 'idCard':
-          antdRule.pattern = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dX]$/;
-          break;
-      }
-
-      return antdRule;
-    });
-  };
 
   const renderFieldItem = (childField: FieldConfig) => {
-    // 布局组件直接渲染，不需要 Form.Item
-    if (['text', 'divider', 'grid'].includes(childField.type)) {
+    // 计算字段最终状态（这里联动规则状态需要从外层传入，暂时只使用字段自身属性）
+    // TODO: 如果需要支持栅格内的联动规则，需要将 fieldStates 作为 props 传入
+    const computedState = computeFieldState(childField);
+
+    // 如果字段被隐藏，使用隐藏字段组件
+    if (!computedState.isVisible) {
+        return (
+          <HiddenField
+            key={childField.id}
+            fieldName={childField.name}
+          />
+        );
+    }
+
+    // 使用统一的字段分类器判断布局组件
+    const fieldType = FieldClassifier.classify(childField);
+    if (fieldType === 'layout' || fieldType === 'grid') {
       return (
         <div key={childField.id} style={{ marginBottom: 8 }}>
           <FieldRenderer field={childField} isPreview={true} />
@@ -87,25 +62,10 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
     // 根据表单配置决定布局方式
     const isVertical = formConfig?.labelAlign === 'top';
     
-    // 合并基础验证规则和自定义验证规则
-    const customRules = convertValidationRules(childField.validationRules);
-    
-    // 检查自定义验证规则中是否已经包含必填验证
-    const hasRequiredRule = childField.validationRules?.some(rule => rule.type === 'required');
-    
-    // 基础规则：只有在没有自定义必填验证时，才使用字段属性中的"是否必填"
-    const baseRules: Rule[] = [];
-    if (childField.required && !hasRequiredRule) {
-      baseRules.push({
-        required: true,
-        message: `请输入${childField.label}`,
-      });
-    }
-    
-    const allRules = [...baseRules, ...customRules];
+    // 合并验证规则（使用统一的工具函数）
+    const allRules = mergeValidationRules(childField, computedState.isRequired);
     
     // 普通表单字段用 Form.Item 包裹
-    // Form.Item 会自动管理 value 和 onChange，不需要手动传递
     return (
       <Form.Item
         key={childField.id}
@@ -117,7 +77,11 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
         rules={allRules}
       >
         <FieldRenderer
-          field={childField}
+          field={{
+            ...childField,
+            disabled: computedState.isDisabled,
+            readonly: computedState.isReadonly,
+          }}
           isPreview={true}
         />
       </Form.Item>
@@ -128,7 +92,7 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
     <div style={{ marginBottom: 8 }}>
       <Row gutter={field.gutter || 16}>
         {children.map((columnFields, colIndex) => {
-          const colSpan = getColSpan(colIndex);
+          const colSpan = computeGridColSpan(field.columnSpans, columns, colIndex);
           return (
             <Col key={colIndex} span={colSpan}>
               {columnFields.map((childField: FieldConfig) => renderFieldItem(childField))}
diff --git a/frontend/src/components/FormDesigner/components/PropertyPanel.tsx b/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
index 376c3d83..b5f8831c 100644
--- a/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
+++ b/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
@@ -278,6 +278,14 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
               <Switch />
             </Form.Item>
 
+            <Form.Item label="是否隐藏" name="hidden" valuePropName="checked">
+              <Switch />
+            </Form.Item>
+
+            <Form.Item label="是否只读" name="readonly" valuePropName="checked">
+              <Switch />
+            </Form.Item>
+
             <Form.Item label="默认值" name="defaultValue">
               {selectedField.type === 'number' ? (
                 <InputNumber style={{ width: '100%' }} placeholder="请输入默认值" />
diff --git a/frontend/src/components/FormDesigner/hooks/useFormCore.ts b/frontend/src/components/FormDesigner/hooks/useFormCore.ts
index f5c8c3d2..2400237a 100644
--- a/frontend/src/components/FormDesigner/hooks/useFormCore.ts
+++ b/frontend/src/components/FormDesigner/hooks/useFormCore.ts
@@ -5,9 +5,40 @@
 
 import { useState, useEffect } from 'react';
 import type { FormInstance } from 'antd';
+import dayjs from 'dayjs';
 import type { FieldConfig } from '../types';
 import { calculateLinkageStates, evaluateCondition, flattenFields, type FieldState } from '../utils/linkageHelper';
-import { collectDefaultValues } from '../utils/defaultValueHelper';
+
+/**
+ * 收集字段的默认值（内部使用）
+ */
+const collectDefaultValues = (fieldList: FieldConfig[]): Record<string, any> => {
+  const defaultValues: Record<string, any> = {};
+
+  const collect = (fields: FieldConfig[]) => {
+    fields.forEach(field => {
+      // 处理有默认值的字段
+      if (field.defaultValue !== undefined && field.name) {
+        // 日期字段需要转换为 dayjs 对象
+        if (field.type === 'date' && typeof field.defaultValue === 'string') {
+          defaultValues[field.name] = dayjs(field.defaultValue);
+        } else {
+          defaultValues[field.name] = field.defaultValue;
+        }
+      }
+
+      // 递归处理栅格布局内的字段
+      if (field.type === 'grid' && field.children) {
+        field.children.forEach(columnFields => {
+          collect(columnFields);
+        });
+      }
+    });
+  };
+
+  collect(fieldList);
+  return defaultValues;
+};
 
 export interface UseFormCoreOptions {
   /** 字段列表 */
diff --git a/frontend/src/components/FormDesigner/renderers/FieldRenderStrategyRegistry.ts b/frontend/src/components/FormDesigner/renderers/FieldRenderStrategyRegistry.ts
new file mode 100644
index 00000000..2435a544
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/FieldRenderStrategyRegistry.ts
@@ -0,0 +1,71 @@
+/**
+ * 字段渲染策略注册表
+ * 工厂模式：统一管理所有字段类型的渲染策略
+ */
+
+import type { FieldType } from '../types';
+import type { IFieldRenderStrategy } from './IFieldRenderStrategy';
+import { InputStrategy } from './strategies/InputStrategy';
+import { TextAreaStrategy } from './strategies/TextAreaStrategy';
+import { NumberStrategy } from './strategies/NumberStrategy';
+import { SelectStrategy } from './strategies/SelectStrategy';
+import { RadioStrategy } from './strategies/RadioStrategy';
+import { CheckboxStrategy } from './strategies/CheckboxStrategy';
+import { DateStrategy } from './strategies/DateStrategy';
+import { DateTimeStrategy } from './strategies/DateTimeStrategy';
+import { TimeStrategy } from './strategies/TimeStrategy';
+import { SwitchStrategy } from './strategies/SwitchStrategy';
+import { SliderStrategy } from './strategies/SliderStrategy';
+import { RateStrategy } from './strategies/RateStrategy';
+import { UploadStrategy } from './strategies/UploadStrategy';
+import { CascaderStrategy } from './strategies/CascaderStrategy';
+
+/**
+ * 策略注册表
+ */
+class FieldRenderStrategyRegistry {
+  private strategies = new Map<FieldType, IFieldRenderStrategy>();
+
+  constructor() {
+    // 注册所有内置策略
+    this.register('input', new InputStrategy());
+    this.register('textarea', new TextAreaStrategy());
+    this.register('number', new NumberStrategy());
+    this.register('select', new SelectStrategy());
+    this.register('radio', new RadioStrategy());
+    this.register('checkbox', new CheckboxStrategy());
+    this.register('date', new DateStrategy());
+    this.register('datetime', new DateTimeStrategy());
+    this.register('time', new TimeStrategy());
+    this.register('switch', new SwitchStrategy());
+    this.register('slider', new SliderStrategy());
+    this.register('rate', new RateStrategy());
+    this.register('upload', new UploadStrategy());
+    this.register('cascader', new CascaderStrategy());
+  }
+
+  /**
+   * 注册策略
+   */
+  register(fieldType: FieldType, strategy: IFieldRenderStrategy): void {
+    this.strategies.set(fieldType, strategy);
+  }
+
+  /**
+   * 获取策略（工厂方法）
+   */
+  get(fieldType: FieldType): IFieldRenderStrategy | undefined {
+    return this.strategies.get(fieldType);
+  }
+
+  /**
+   * 检查是否已注册
+   */
+  has(fieldType: FieldType): boolean {
+    return this.strategies.has(fieldType);
+  }
+}
+
+// 单例模式：全局唯一的注册表实例
+export const fieldRenderStrategyRegistry = new FieldRenderStrategyRegistry();
+
diff --git a/frontend/src/components/FormDesigner/renderers/IFieldRenderStrategy.ts b/frontend/src/components/FormDesigner/renderers/IFieldRenderStrategy.ts
new file mode 100644
index 00000000..6a2d60dd
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/IFieldRenderStrategy.ts
@@ -0,0 +1,34 @@
+/**
+ * 字段渲染策略接口
+ * 策略模式：每种字段类型有独立的渲染策略
+ */
+
+import React from 'react';
+import type { FieldConfig } from '../types';
+
+/**
+ * 字段渲染上下文
+ */
+export interface FieldRenderContext {
+  field: FieldConfig;
+  value?: any;
+  onChange?: (value: any) => void;
+  isDisabled: boolean;
+  isReadonly: boolean;
+  readonlyStyle?: React.CSSProperties;
+  options?: any[];
+  cascadeOptions?: any[];
+  loadData?: (selectedOptions: any[]) => void;
+}
+
+/**
+ * 字段渲染策略接口
+ */
+export interface IFieldRenderStrategy {
+  /** 渲染字段组件 */
+  render(context: FieldRenderContext): React.ReactNode;
+  
+  /** 是否支持只读属性（如果不支持，将使用 disabled） */
+  supportsReadonly?: boolean;
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/BaseFieldStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/BaseFieldStrategy.tsx
new file mode 100644
index 00000000..989153f4
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/BaseFieldStrategy.tsx
@@ -0,0 +1,31 @@
+/**
+ * 基础字段策略基类
+ * 提供通用的只读和禁用处理逻辑
+ */
+
+import React from 'react';
+import type { IFieldRenderStrategy, FieldRenderContext } from '../IFieldRenderStrategy';
+
+export abstract class BaseFieldStrategy implements IFieldRenderStrategy {
+  supportsReadonly = false;
+
+  /**
+   * 获取组件的禁用/只读状态
+   */
+  protected getDisabledProps(context: FieldRenderContext): { disabled?: boolean; readOnly?: boolean } {
+    const { isDisabled, isReadonly } = context;
+    const supportsReadonly = this.supportsReadonly ?? false;
+    
+    if (supportsReadonly && isReadonly) {
+      return { readOnly: true, disabled: false };
+    }
+    
+    return { disabled: isDisabled || isReadonly };
+  }
+
+  /**
+   * 抽象方法：子类实现具体的渲染逻辑
+   */
+  abstract render(context: FieldRenderContext): React.ReactNode;
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/CascaderStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/CascaderStrategy.tsx
new file mode 100644
index 00000000..45e79b12
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/CascaderStrategy.tsx
@@ -0,0 +1,31 @@
+/**
+ * Cascader 字段渲染策略
+ */
+
+import React from 'react';
+import { Cascader } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class CascaderStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange, cascadeOptions, loadData } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Cascader
+        style={{ width: '100%' }}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        options={cascadeOptions as any}
+        value={value}
+        onChange={onChange}
+        loadData={loadData as any}
+        changeOnSelect={field.dataSourceType === 'predefined'}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/CheckboxStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/CheckboxStrategy.tsx
new file mode 100644
index 00000000..9e680617
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/CheckboxStrategy.tsx
@@ -0,0 +1,32 @@
+/**
+ * Checkbox 字段渲染策略
+ */
+
+import React from 'react';
+import { Checkbox } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class CheckboxStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange, options } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Checkbox.Group
+        {...disabledProps}
+        options={options}
+        value={value}
+        onChange={onChange}
+        style={{
+          display: 'flex',
+          flexDirection: field.checkboxLayout === 'vertical' ? 'column' : 'row',
+          gap: field.checkboxLayout === 'vertical' ? '8px' : '16px',
+        }}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/DateStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/DateStrategy.tsx
new file mode 100644
index 00000000..61b7aec1
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/DateStrategy.tsx
@@ -0,0 +1,28 @@
+/**
+ * Date 字段渲染策略
+ */
+
+import React from 'react';
+import { DatePicker } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class DateStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <DatePicker
+        style={{ width: '100%' }}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/DateTimeStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/DateTimeStrategy.tsx
new file mode 100644
index 00000000..cf03f291
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/DateTimeStrategy.tsx
@@ -0,0 +1,29 @@
+/**
+ * DateTime 字段渲染策略
+ */
+
+import React from 'react';
+import { DatePicker } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class DateTimeStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <DatePicker
+        showTime
+        style={{ width: '100%' }}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/InputStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/InputStrategy.tsx
new file mode 100644
index 00000000..e9199f4e
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/InputStrategy.tsx
@@ -0,0 +1,28 @@
+/**
+ * Input 字段渲染策略
+ */
+
+import React from 'react';
+import { Input } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class InputStrategy extends BaseFieldStrategy {
+  supportsReadonly = true;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange, isReadonly, readonlyStyle } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Input
+        placeholder={field.placeholder}
+        {...disabledProps}
+        style={isReadonly ? readonlyStyle : undefined}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/NumberStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/NumberStrategy.tsx
new file mode 100644
index 00000000..b8ad1402
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/NumberStrategy.tsx
@@ -0,0 +1,30 @@
+/**
+ * Number 字段渲染策略
+ */
+
+import React from 'react';
+import { InputNumber } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class NumberStrategy extends BaseFieldStrategy {
+  supportsReadonly = false; // InputNumber 不支持 readOnly
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <InputNumber
+        style={{ width: '100%' }}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        min={field.min}
+        max={field.max}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/RadioStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/RadioStrategy.tsx
new file mode 100644
index 00000000..9f0ab9ee
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/RadioStrategy.tsx
@@ -0,0 +1,27 @@
+/**
+ * Radio 字段渲染策略
+ */
+
+import React from 'react';
+import { Radio } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class RadioStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { value, onChange, options } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Radio.Group
+        {...disabledProps}
+        options={options}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/RateStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/RateStrategy.tsx
new file mode 100644
index 00000000..6c7353c9
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/RateStrategy.tsx
@@ -0,0 +1,26 @@
+/**
+ * Rate 字段渲染策略
+ */
+
+import React from 'react';
+import { Rate } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class RateStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Rate
+        {...disabledProps}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/SelectStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/SelectStrategy.tsx
new file mode 100644
index 00000000..23aef609
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/SelectStrategy.tsx
@@ -0,0 +1,29 @@
+/**
+ * Select 字段渲染策略
+ */
+
+import React from 'react';
+import { Select } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class SelectStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange, options } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Select
+        placeholder={field.placeholder}
+        {...disabledProps}
+        options={options}
+        value={value}
+        onChange={onChange}
+        style={{ width: '100%' }}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/SliderStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/SliderStrategy.tsx
new file mode 100644
index 00000000..95f83612
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/SliderStrategy.tsx
@@ -0,0 +1,28 @@
+/**
+ * Slider 字段渲染策略
+ */
+
+import React from 'react';
+import { Slider } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class SliderStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Slider
+        {...disabledProps}
+        min={field.min}
+        max={field.max}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/SwitchStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/SwitchStrategy.tsx
new file mode 100644
index 00000000..90afbc97
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/SwitchStrategy.tsx
@@ -0,0 +1,26 @@
+/**
+ * Switch 字段渲染策略
+ */
+
+import React from 'react';
+import { Switch } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class SwitchStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Switch
+        {...disabledProps}
+        checked={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/TextAreaStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/TextAreaStrategy.tsx
new file mode 100644
index 00000000..0858acb1
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/TextAreaStrategy.tsx
@@ -0,0 +1,31 @@
+/**
+ * TextArea 字段渲染策略
+ */
+
+import React from 'react';
+import { Input } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+const { TextArea } = Input;
+
+export class TextAreaStrategy extends BaseFieldStrategy {
+  supportsReadonly = true;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange, isReadonly, readonlyStyle } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <TextArea
+        rows={field.rows || 4}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        style={isReadonly ? readonlyStyle : undefined}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/TimeStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/TimeStrategy.tsx
new file mode 100644
index 00000000..d19b99b1
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/TimeStrategy.tsx
@@ -0,0 +1,28 @@
+/**
+ * Time 字段渲染策略
+ */
+
+import React from 'react';
+import { TimePicker } from 'antd';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class TimeStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field, value, onChange } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <TimePicker
+        style={{ width: '100%' }}
+        placeholder={field.placeholder}
+        {...disabledProps}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/renderers/strategies/UploadStrategy.tsx b/frontend/src/components/FormDesigner/renderers/strategies/UploadStrategy.tsx
new file mode 100644
index 00000000..0c6eb01e
--- /dev/null
+++ b/frontend/src/components/FormDesigner/renderers/strategies/UploadStrategy.tsx
@@ -0,0 +1,28 @@
+/**
+ * Upload 字段渲染策略
+ */
+
+import React from 'react';
+import { Upload, Button } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { BaseFieldStrategy } from './BaseFieldStrategy';
+import type { FieldRenderContext } from '../IFieldRenderStrategy';
+
+export class UploadStrategy extends BaseFieldStrategy {
+  supportsReadonly = false;
+
+  render(context: FieldRenderContext): React.ReactNode {
+    const { field } = context;
+    const disabledProps = this.getDisabledProps(context);
+    
+    return (
+      <Upload
+        {...disabledProps}
+        maxCount={field.maxCount}
+      >
+        <Button icon={<UploadOutlined />}>上传文件</Button>
+      </Upload>
+    );
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/styles.css b/frontend/src/components/FormDesigner/styles.css
index 5f7091c4..4942a759 100644
--- a/frontend/src/components/FormDesigner/styles.css
+++ b/frontend/src/components/FormDesigner/styles.css
@@ -363,3 +363,24 @@
   font-size: 12px;
 }
 
+/* 只读字段样式：灰色背景，不可编辑 */
+.ant-input[readonly],
+.ant-input:read-only {
+  background-color: #f5f5f5 !important;
+  cursor: not-allowed !important;
+  color: #00000040 !important;
+}
+
+.ant-input-number-disabled {
+  background-color: #f5f5f5 !important;
+  cursor: not-allowed !important;
+  color: #00000040 !important;
+}
+
+textarea.ant-input[readonly],
+textarea.ant-input:read-only {
+  background-color: #f5f5f5 !important;
+  cursor: not-allowed !important;
+  color: #00000040 !important;
+}
+
diff --git a/frontend/src/components/FormDesigner/types.ts b/frontend/src/components/FormDesigner/types.ts
index b9932e15..8145b100 100644
--- a/frontend/src/components/FormDesigner/types.ts
+++ b/frontend/src/components/FormDesigner/types.ts
@@ -115,6 +115,8 @@ export interface FieldConfig {
   placeholder?: string;
   required?: boolean;
   disabled?: boolean;
+  hidden?: boolean; // 是否隐藏字段（隐藏字段不显示，但仍参与表单提交）
+  readonly?: boolean; // 是否只读（只读字段显示但不可编辑）
   defaultValue?: any;
   options?: FieldOption[];              // 静态选项数据（select, radio, checkbox 使用）
   cascadeOptions?: CascadeFieldOption[]; // 静态级联选项数据（cascader 静态模式使用）
diff --git a/frontend/src/components/FormDesigner/utils/defaultValueHelper.ts b/frontend/src/components/FormDesigner/utils/defaultValueHelper.ts
deleted file mode 100644
index c36c910e..00000000
--- a/frontend/src/components/FormDesigner/utils/defaultValueHelper.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * 表单默认值处理工具
- * 处理字段的默认值，包括日期类型的特殊处理
- */
-
-import dayjs from 'dayjs';
-import type { FieldConfig } from '../types';
-
-/**
- * 收集字段的默认值
- * @param fieldList 字段列表
- * @returns 默认值对象
- */
-export const collectDefaultValues = (fieldList: FieldConfig[]): Record<string, any> => {
-  const defaultValues: Record<string, any> = {};
-
-  const collect = (fields: FieldConfig[]) => {
-    fields.forEach(field => {
-      // 处理有默认值的字段
-      if (field.defaultValue !== undefined && field.name) {
-        // 日期字段需要转换为 dayjs 对象
-        if (field.type === 'date' && typeof field.defaultValue === 'string') {
-          defaultValues[field.name] = dayjs(field.defaultValue);
-        } else {
-          defaultValues[field.name] = field.defaultValue;
-        }
-      }
-
-      // 递归处理栅格布局内的字段
-      if (field.type === 'grid' && field.children) {
-        field.children.forEach(columnFields => {
-          collect(columnFields);
-        });
-      }
-    });
-  };
-
-  collect(fieldList);
-  return defaultValues;
-};
-
diff --git a/frontend/src/components/FormDesigner/utils/fieldStateHelper.ts b/frontend/src/components/FormDesigner/utils/fieldStateHelper.ts
new file mode 100644
index 00000000..26c64002
--- /dev/null
+++ b/frontend/src/components/FormDesigner/utils/fieldStateHelper.ts
@@ -0,0 +1,73 @@
+/**
+ * 字段状态工具
+ * 统一计算和处理字段的显示状态、禁用状态、只读状态等
+ */
+
+import type { FieldConfig } from '../types';
+import type { FieldState } from './linkageHelper';
+
+/**
+ * 计算字段的最终状态
+ * @param field 字段配置
+ * @param fieldState 联动规则计算的字段状态
+ * @returns 最终字段状态
+ */
+export interface ComputedFieldState {
+  isVisible: boolean;      // 是否可见（考虑 hidden 和联动规则）
+  isDisabled: boolean;     // 是否禁用（考虑 disabled 和联动规则）
+  isReadonly: boolean;     // 是否只读
+  isRequired: boolean;     // 是否必填（考虑 required 和联动规则）
+}
+
+export const computeFieldState = (
+  field: FieldConfig,
+  fieldState: FieldState = {}
+): ComputedFieldState => {
+  // 可见性：联动规则的 visible 优先级高于字段的 hidden
+  // 如果联动规则设置为 visible=false，则隐藏；否则检查字段的 hidden 属性
+  const isVisible = fieldState.visible !== false && !field.hidden;
+
+  // 禁用状态：联动规则的 disabled 或字段的 disabled
+  const isDisabled = fieldState.disabled || field.disabled || false;
+
+  // 只读状态：字段的 readonly（不受联动规则影响）
+  const isReadonly = field.readonly || false;
+
+  // 必填状态：联动规则的 required 优先，否则使用字段的 required
+  const isRequired = fieldState.required !== undefined 
+    ? fieldState.required 
+    : field.required || false;
+
+  return {
+    isVisible,
+    isDisabled,
+    isReadonly,
+    isRequired,
+  };
+};
+
+/**
+ * 字段分类器：根据字段类型判断应该使用哪个渲染方式
+ */
+export class FieldClassifier {
+  /**
+   * 判断字段类型
+   * @returns 'layout' | 'grid' | 'field'
+   * 注意：hidden 字段的判断在 FormFieldsRenderer 中通过 computeFieldState 完成
+   */
+  static classify(field: FieldConfig): 'layout' | 'grid' | 'field' {
+    // 布局字段：文本、分割线
+    if (field.type === 'text' || field.type === 'divider') {
+      return 'layout';
+    }
+    
+    // 栅格布局
+    if (field.type === 'grid') {
+      return 'grid';
+    }
+    
+    // 普通表单字段
+    return 'field';
+  }
+}
+
diff --git a/frontend/src/components/FormDesigner/utils/formLayoutHelper.ts b/frontend/src/components/FormDesigner/utils/formLayoutHelper.ts
new file mode 100644
index 00000000..3975bfa4
--- /dev/null
+++ b/frontend/src/components/FormDesigner/utils/formLayoutHelper.ts
@@ -0,0 +1,60 @@
+/**
+ * 表单布局工具
+ * 统一处理表单布局相关的计算逻辑
+ */
+
+import type { FormConfig } from '../types';
+
+/**
+ * 计算表单布局配置
+ * @param formConfig 表单配置
+ * @returns 表单布局相关配置
+ */
+export interface FormLayoutConfig {
+  /** Form layout 属性 */
+  layout: 'vertical' | 'horizontal';
+  /** labelCol 配置 */
+  labelCol?: { span: number };
+  /** wrapperCol 配置 */
+  wrapperCol?: { span: number };
+  /** labelAlign 属性 */
+  labelAlign?: 'left' | 'right';
+}
+
+export const computeFormLayout = (formConfig: FormConfig): FormLayoutConfig => {
+  const layout = formConfig.labelAlign === 'top' ? 'vertical' : 'horizontal';
+  
+  let labelCol: { span: number } | undefined;
+  let wrapperCol: { span: number } | undefined;
+  
+  if (formConfig.labelAlign === 'left' || formConfig.labelAlign === 'right') {
+    labelCol = { span: 6 };
+    wrapperCol = { span: 18 };
+  }
+
+  return {
+    layout,
+    labelCol,
+    wrapperCol,
+    labelAlign: formConfig.labelAlign === 'top' ? undefined : formConfig.labelAlign,
+  };
+};
+
+/**
+ * 计算栅格列的宽度
+ * @param columnSpans 自定义列宽度数组
+ * @param columns 列数
+ * @param colIndex 当前列索引
+ * @returns 列宽度（0-24）
+ */
+export const computeGridColSpan = (
+  columnSpans: number[] | undefined,
+  columns: number,
+  colIndex: number
+): number => {
+  if (columnSpans && columnSpans.length > colIndex) {
+    return columnSpans[colIndex];
+  }
+  return Math.floor(24 / columns);
+};
+
diff --git a/frontend/src/domain/dataSource/CascadeDataSourceRegistry.ts b/frontend/src/domain/dataSource/CascadeDataSourceRegistry.ts
index f2bf7f0f..bdacd01d 100644
--- a/frontend/src/domain/dataSource/CascadeDataSourceRegistry.ts
+++ b/frontend/src/domain/dataSource/CascadeDataSourceRegistry.ts
@@ -2,7 +2,8 @@
  * 级联数据源注册表
  * 集中管理所有预设级联数据源配置
  */
-import { CascadeDataSourceType, type CascadeDataSourceRegistry } from './types';
+import { CascadeDataSourceType, type CascadeDataSourceConfig, type CascadeDataSourceRegistry } from './types';
+import { BaseRegistry } from './core/BaseRegistry';
 import {
   environmentProjectsConfig,
   jenkinsServerViewsJobsConfig,
@@ -12,39 +13,46 @@ import {
 } from './presets/cascade';
 
 /**
- * 级联数据源配置注册表
+ * 级联数据源注册表实例
  */
-export const CASCADE_DATA_SOURCE_REGISTRY: CascadeDataSourceRegistry = {
-  [CascadeDataSourceType.ENVIRONMENT_PROJECTS]: environmentProjectsConfig,
-  [CascadeDataSourceType.JENKINS_SERVER_VIEWS_JOBS]: jenkinsServerViewsJobsConfig,
-  [CascadeDataSourceType.DEPARTMENT_USERS]: departmentUsersConfig,
-  [CascadeDataSourceType.DEPARTMENT_TREE]: departmentTreeConfig,
-  [CascadeDataSourceType.PROJECT_GROUP_APPS]: projectGroupAppsConfig
-};
+class CascadeDataSourceRegistryImpl extends BaseRegistry<CascadeDataSourceType, CascadeDataSourceConfig> {
+  constructor() {
+    super();
+    // 注册所有预设配置
+    this.register(CascadeDataSourceType.ENVIRONMENT_PROJECTS, environmentProjectsConfig);
+    this.register(CascadeDataSourceType.JENKINS_SERVER_VIEWS_JOBS, jenkinsServerViewsJobsConfig);
+    this.register(CascadeDataSourceType.DEPARTMENT_USERS, departmentUsersConfig);
+    this.register(CascadeDataSourceType.DEPARTMENT_TREE, departmentTreeConfig);
+    this.register(CascadeDataSourceType.PROJECT_GROUP_APPS, projectGroupAppsConfig);
+  }
+
+  /**
+   * 获取注册表对象（向后兼容）
+   */
+  toObject(): CascadeDataSourceRegistry {
+    return this['registry'] as CascadeDataSourceRegistry;
+  }
+}
+
+const registryInstance = new CascadeDataSourceRegistryImpl();
+
+/**
+ * 级联数据源配置注册表（向后兼容）
+ */
+export const CASCADE_DATA_SOURCE_REGISTRY: CascadeDataSourceRegistry = registryInstance.toObject();
 
 /**
  * 获取级联数据源配置
- * @param type 级联数据源类型
- * @returns 级联数据源配置，如果不存在则返回 undefined
  */
-export const getCascadeDataSourceConfig = (type: CascadeDataSourceType) => {
-  return CASCADE_DATA_SOURCE_REGISTRY[type];
-};
+export const getCascadeDataSourceConfig = (type: CascadeDataSourceType) => registryInstance.get(type);
 
 /**
  * 检查级联数据源类型是否已注册
- * @param type 级联数据源类型
- * @returns 是否已注册
  */
-export const hasCascadeDataSource = (type: CascadeDataSourceType): boolean => {
-  return type in CASCADE_DATA_SOURCE_REGISTRY;
-};
+export const hasCascadeDataSource = (type: CascadeDataSourceType): boolean => registryInstance.has(type);
 
 /**
  * 获取所有已注册的级联数据源类型
- * @returns 级联数据源类型列表
  */
-export const getAllCascadeDataSourceTypes = (): CascadeDataSourceType[] => {
-  return Object.keys(CASCADE_DATA_SOURCE_REGISTRY) as CascadeDataSourceType[];
-};
+export const getAllCascadeDataSourceTypes = (): CascadeDataSourceType[] => registryInstance.getAllKeys();
 
diff --git a/frontend/src/domain/dataSource/CascadeDataSourceService.ts b/frontend/src/domain/dataSource/CascadeDataSourceService.ts
index aab329d7..6c7eeeaa 100644
--- a/frontend/src/domain/dataSource/CascadeDataSourceService.ts
+++ b/frontend/src/domain/dataSource/CascadeDataSourceService.ts
@@ -2,9 +2,10 @@
  * 级联数据源服务
  * 提供懒加载级联数据功能
  */
-import request from '@/utils/request';
 import {CascadeDataSourceType, type CascadeOption, type CascadeLevelConfig} from './types';
 import {getCascadeDataSourceConfig} from './CascadeDataSourceRegistry';
+import { loadData } from './core/requestHelper';
+import { warn } from './core/errorHandler';
 
 /**
  * 级联数据源服务类
@@ -26,7 +27,7 @@ class CascadeDataSourceService {
         const config = getCascadeDataSourceConfig(type);
 
         if (!config) {
-            console.error(`❌ 级联数据源类型 ${type} 未配置`);
+            warn(`级联数据源类型 ${type} 未配置`);
             return [];
         }
 
@@ -37,7 +38,7 @@ class CascadeDataSourceService {
 
         // 固定层级模式
         if (!config.levels || config.levels.length === 0) {
-            console.error(`❌ 级联数据源类型 ${type} 未配置层级`);
+            warn(`级联数据源类型 ${type} 未配置层级`);
             return [];
         }
 
@@ -57,7 +58,7 @@ class CascadeDataSourceService {
         const config = getCascadeDataSourceConfig(type);
 
         if (!config) {
-            console.error(`❌ 级联数据源类型 ${type} 未配置`);
+            warn(`级联数据源类型 ${type} 未配置`);
             return [];
         }
 
@@ -76,7 +77,7 @@ class CascadeDataSourceService {
         const levelIndex = selectedOptions.length;
 
         if (levelIndex >= config.levels.length) {
-            console.warn(`⚠️ 级联层级 ${levelIndex} 超出配置范围`);
+            warn(`级联层级 ${levelIndex} 超出配置范围`);
             return [];
         }
 
@@ -97,47 +98,45 @@ class CascadeDataSourceService {
         recursiveConfig: any,
         parentValue: any
     ): Promise<CascadeOption[]> {
-        try {
-            // 构建请求参数
-            const params: Record<string, any> = {...recursiveConfig.params};
+        // 构建请求参数
+        const params: Record<string, any> = {...recursiveConfig.params};
 
-            // 添加父级参数
-            if (parentValue !== null) {
-                params[recursiveConfig.parentParam] = parentValue;
+        // 添加父级参数
+        if (parentValue !== null) {
+            params[recursiveConfig.parentParam] = parentValue;
+        }
+
+        // 使用统一的请求工具加载数据
+        const data = await loadData<any>(
+            recursiveConfig.url,
+            params,
+            `递归级联数据 (${recursiveConfig.url})`
+        );
+
+        // 转换为级联选项格式
+        return data.map((item: any) => {
+            const option: CascadeOption = {
+                label: item[recursiveConfig.labelField],
+                value: item[recursiveConfig.valueField]
+            };
+
+            // 判断是否为叶子节点
+            if (recursiveConfig.hasChildren) {
+                // 使用自定义判断函数
+                option.isLeaf = !recursiveConfig.hasChildren(item);
+            } else if ('isLeaf' in item) {
+                // 使用后端返回的 isLeaf 字段
+                option.isLeaf = item.isLeaf;
+            } else if ('hasChildren' in item) {
+                // 使用后端返回的 hasChildren 字段
+                option.isLeaf = !item.hasChildren;
+            } else {
+                // 默认不是叶子节点（允许继续展开）
+                option.isLeaf = false;
             }
 
-            // 发起请求
-            const response = await request.get(recursiveConfig.url, {params});
-            const data = response || [];
-
-            // 转换为级联选项格式
-            return data.map((item: any) => {
-                const option: CascadeOption = {
-                    label: item[recursiveConfig.labelField],
-                    value: item[recursiveConfig.valueField]
-                };
-
-                // 判断是否为叶子节点
-                if (recursiveConfig.hasChildren) {
-                    // 使用自定义判断函数
-                    option.isLeaf = !recursiveConfig.hasChildren(item);
-                } else if ('isLeaf' in item) {
-                    // 使用后端返回的 isLeaf 字段
-                    option.isLeaf = item.isLeaf;
-                } else if ('hasChildren' in item) {
-                    // 使用后端返回的 hasChildren 字段
-                    option.isLeaf = !item.hasChildren;
-                } else {
-                    // 默认不是叶子节点（允许继续展开）
-                    option.isLeaf = false;
-                }
-
-                return option;
-            });
-        } catch (error) {
-            console.error(`❌ 加载递归级联数据失败:`, error);
-            return [];
-        }
+            return option;
+        });
     }
 
     /**
@@ -152,40 +151,38 @@ class CascadeDataSourceService {
         parentValue: any,
         hasNextLevel: boolean
     ): Promise<CascadeOption[]> {
-        try {
-            // 构建请求参数
-            const params: Record<string, any> = {...levelConfig.params};
+        // 构建请求参数
+        const params: Record<string, any> = {...levelConfig.params};
 
-            // 如果有父级值且配置了父级参数名，添加到请求参数中
-            if (parentValue !== null && levelConfig.parentParam) {
-                params[levelConfig.parentParam] = parentValue;
+        // 如果有父级值且配置了父级参数名，添加到请求参数中
+        if (parentValue !== null && levelConfig.parentParam) {
+            params[levelConfig.parentParam] = parentValue;
+        }
+
+        // 使用统一的请求工具加载数据
+        const data = await loadData<any>(
+            levelConfig.url,
+            params,
+            `级联数据 (${levelConfig.url})`
+        );
+
+        // 转换为级联选项格式
+        return data.map((item: any) => {
+            const option: CascadeOption = {
+                label: item[levelConfig.labelField],
+                value: item[levelConfig.valueField]
+            };
+
+            // 判断是否为叶子节点
+            if (levelConfig.isLeaf) {
+                option.isLeaf = levelConfig.isLeaf(item);
+            } else {
+                // 如果没有下一级配置，则为叶子节点
+                option.isLeaf = !hasNextLevel;
             }
 
-            // 发起请求
-            const response = await request.get(levelConfig.url, {params});
-            const data = response || [];
-
-            // 转换为级联选项格式
-            return data.map((item: any) => {
-                const option: CascadeOption = {
-                    label: item[levelConfig.labelField],
-                    value: item[levelConfig.valueField]
-                };
-
-                // 判断是否为叶子节点
-                if (levelConfig.isLeaf) {
-                    option.isLeaf = levelConfig.isLeaf(item);
-                } else {
-                    // 如果没有下一级配置，则为叶子节点
-                    option.isLeaf = !hasNextLevel;
-                }
-
-                return option;
-            });
-        } catch (error) {
-            console.error(`❌ 加载级联数据失败:`, error);
-            return [];
-        }
+            return option;
+        });
     }
 
     /**
diff --git a/frontend/src/domain/dataSource/DataSourceRegistry.ts b/frontend/src/domain/dataSource/DataSourceRegistry.ts
index c69df3a3..0ffdae58 100644
--- a/frontend/src/domain/dataSource/DataSourceRegistry.ts
+++ b/frontend/src/domain/dataSource/DataSourceRegistry.ts
@@ -2,56 +2,71 @@
  * 数据源注册表
  * 集中管理所有预设数据源配置
  */
-import { DataSourceType, type DataSourceRegistry } from './types';
-import { jenkinsServersConfig } from './presets/jenkins';
-import { k8sClustersConfig } from './presets/k8s';
-import { gitRepositoriesConfig } from './presets/git';
-import { dockerRegistriesConfig } from './presets/docker';
-import { notificationChannelTypesConfig, notificationChannelsConfig } from './presets/notification';
-import { usersConfig, rolesConfig, departmentsConfig } from './presets/user';
-import { environmentsConfig, projectGroupsConfig, applicationsConfig } from './presets/deploy';
+import { DataSourceType, type DataSourceConfig, type DataSourceRegistry } from './types';
+import { BaseRegistry } from './core/BaseRegistry';
+import {
+  jenkinsServersConfig,
+  k8sClustersConfig,
+  gitRepositoriesConfig,
+  dockerRegistriesConfig,
+  environmentsConfig,
+  projectGroupsConfig,
+  applicationsConfig,
+  notificationChannelTypesConfig,
+  notificationChannelsConfig,
+  usersConfig,
+  rolesConfig,
+  departmentsConfig
+} from './presets/infrastructure';
 
 /**
- * 数据源配置注册表
+ * 数据源注册表实例
  */
-export const DATA_SOURCE_REGISTRY: DataSourceRegistry = {
-  [DataSourceType.JENKINS_SERVERS]: jenkinsServersConfig,
-  [DataSourceType.K8S_CLUSTERS]: k8sClustersConfig,
-  [DataSourceType.GIT_REPOSITORIES]: gitRepositoriesConfig,
-  [DataSourceType.DOCKER_REGISTRIES]: dockerRegistriesConfig,
-  [DataSourceType.NOTIFICATION_CHANNEL_TYPES]: notificationChannelTypesConfig,
-  [DataSourceType.NOTIFICATION_CHANNELS]: notificationChannelsConfig,
-  [DataSourceType.USERS]: usersConfig,
-  [DataSourceType.ROLES]: rolesConfig,
-  [DataSourceType.DEPARTMENTS]: departmentsConfig,
-  [DataSourceType.ENVIRONMENTS]: environmentsConfig,
-  [DataSourceType.PROJECT_GROUPS]: projectGroupsConfig,
-  [DataSourceType.APPLICATIONS]: applicationsConfig
-};
+class DataSourceRegistryImpl extends BaseRegistry<DataSourceType, DataSourceConfig> {
+  constructor() {
+    super();
+    // 注册所有预设配置
+    this.register(DataSourceType.JENKINS_SERVERS, jenkinsServersConfig);
+    this.register(DataSourceType.K8S_CLUSTERS, k8sClustersConfig);
+    this.register(DataSourceType.GIT_REPOSITORIES, gitRepositoriesConfig);
+    this.register(DataSourceType.DOCKER_REGISTRIES, dockerRegistriesConfig);
+    this.register(DataSourceType.NOTIFICATION_CHANNEL_TYPES, notificationChannelTypesConfig);
+    this.register(DataSourceType.NOTIFICATION_CHANNELS, notificationChannelsConfig);
+    this.register(DataSourceType.USERS, usersConfig);
+    this.register(DataSourceType.ROLES, rolesConfig);
+    this.register(DataSourceType.DEPARTMENTS, departmentsConfig);
+    this.register(DataSourceType.ENVIRONMENTS, environmentsConfig);
+    this.register(DataSourceType.PROJECT_GROUPS, projectGroupsConfig);
+    this.register(DataSourceType.APPLICATIONS, applicationsConfig);
+  }
+
+  /**
+   * 获取注册表对象（向后兼容）
+   */
+  toObject(): DataSourceRegistry {
+    return this['registry'] as DataSourceRegistry;
+  }
+}
+
+const registryInstance = new DataSourceRegistryImpl();
+
+/**
+ * 数据源配置注册表（向后兼容）
+ */
+export const DATA_SOURCE_REGISTRY: DataSourceRegistry = registryInstance.toObject();
 
 /**
  * 获取数据源配置
- * @param type 数据源类型
- * @returns 数据源配置，如果不存在则返回 undefined
  */
-export const getDataSourceConfig = (type: DataSourceType) => {
-  return DATA_SOURCE_REGISTRY[type];
-};
+export const getDataSourceConfig = (type: DataSourceType) => registryInstance.get(type);
 
 /**
  * 检查数据源类型是否已注册
- * @param type 数据源类型
- * @returns 是否已注册
  */
-export const hasDataSource = (type: DataSourceType): boolean => {
-  return type in DATA_SOURCE_REGISTRY;
-};
+export const hasDataSource = (type: DataSourceType): boolean => registryInstance.has(type);
 
 /**
  * 获取所有已注册的数据源类型
- * @returns 数据源类型列表
  */
-export const getAllDataSourceTypes = (): DataSourceType[] => {
-  return Object.keys(DATA_SOURCE_REGISTRY) as DataSourceType[];
-};
+export const getAllDataSourceTypes = (): DataSourceType[] => registryInstance.getAllKeys();
 
diff --git a/frontend/src/domain/dataSource/DataSourceService.ts b/frontend/src/domain/dataSource/DataSourceService.ts
index b69908e3..231fc27e 100644
--- a/frontend/src/domain/dataSource/DataSourceService.ts
+++ b/frontend/src/domain/dataSource/DataSourceService.ts
@@ -2,9 +2,10 @@
  * 数据源服务
  * 提供数据源加载和管理功能
  */
-import request from '@/utils/request';
 import {DataSourceType, type DataSourceOption} from './types';
 import {getDataSourceConfig, getAllDataSourceTypes} from './DataSourceRegistry';
+import { loadData } from './core/requestHelper';
+import { warn } from './core/errorHandler';
 
 /**
  * 数据源服务类
@@ -20,7 +21,7 @@ class DataSourceService {
 
         if (!config) {
             const registeredTypes = getAllDataSourceTypes();
-            console.warn(`⚠️ 数据源类型 "${type}" 未配置，请检查：
+            warn(`数据源类型 "${type}" 未配置，请检查：
 
 📋 可能的原因：
 1. 节点定义中使用了字符串而非 DataSourceType 枚举（如 "jenkins-servers" 应改为 DataSourceType.JENKINS_SERVERS）
@@ -34,14 +35,9 @@ ${registeredTypes.map(t => `  - ${t}`).join('\n')}
             return [];
         }
 
-        try {
-            const response = await request.get(config.url, {params: config.params});
-            // request 拦截器已经提取了 data 字段，response 直接是数组
-            return config.transform(response || []);
-        } catch (error) {
-            console.error(`❌ 加载数据源 ${type} 失败:`, error);
-            return [];
-        }
+        // 使用统一的请求工具
+        const data = await loadData<any>(config.url, config.params, `数据源 ${type}`);
+        return config.transform(data);
     }
 
     /**
diff --git a/frontend/src/domain/dataSource/core/BaseRegistry.ts b/frontend/src/domain/dataSource/core/BaseRegistry.ts
new file mode 100644
index 00000000..389bfab3
--- /dev/null
+++ b/frontend/src/domain/dataSource/core/BaseRegistry.ts
@@ -0,0 +1,47 @@
+/**
+ * 注册表基类
+ * 统一管理注册表的通用操作
+ */
+
+/**
+ * 通用注册表基类
+ */
+export class BaseRegistry<TKey extends string | number | symbol, TValue> {
+  protected registry: Record<TKey, TValue> = {} as Record<TKey, TValue>;
+
+  /**
+   * 注册配置
+   */
+  register(key: TKey, value: TValue): void {
+    this.registry[key] = value;
+  }
+
+  /**
+   * 获取配置
+   */
+  get(key: TKey): TValue | undefined {
+    return this.registry[key];
+  }
+
+  /**
+   * 检查是否已注册
+   */
+  has(key: TKey): boolean {
+    return key in this.registry;
+  }
+
+  /**
+   * 获取所有已注册的键
+   */
+  getAllKeys(): TKey[] {
+    return Object.keys(this.registry) as TKey[];
+  }
+
+  /**
+   * 获取注册表大小
+   */
+  size(): number {
+    return Object.keys(this.registry).length;
+  }
+}
+
diff --git a/frontend/src/domain/dataSource/core/errorHandler.ts b/frontend/src/domain/dataSource/core/errorHandler.ts
new file mode 100644
index 00000000..025a76a3
--- /dev/null
+++ b/frontend/src/domain/dataSource/core/errorHandler.ts
@@ -0,0 +1,37 @@
+/**
+ * 统一错误处理工具
+ */
+
+/**
+ * 错误处理选项
+ */
+export interface ErrorHandlerOptions {
+  context: string;
+  fallbackValue?: any;
+  silent?: boolean;
+}
+
+/**
+ * 统一错误处理函数
+ */
+export async function handleDataSourceError<T>(
+  operation: () => Promise<T>,
+  options: ErrorHandlerOptions
+): Promise<T> {
+  try {
+    return await operation();
+  } catch (error) {
+    if (!options.silent) {
+      console.error(`❌ ${options.context}失败:`, error);
+    }
+    return options.fallbackValue ?? ([] as T);
+  }
+}
+
+/**
+ * 警告处理函数
+ */
+export function warn(message: string): void {
+  console.warn(`⚠️ ${message}`);
+}
+
diff --git a/frontend/src/domain/dataSource/core/requestHelper.ts b/frontend/src/domain/dataSource/core/requestHelper.ts
new file mode 100644
index 00000000..2d51c4a7
--- /dev/null
+++ b/frontend/src/domain/dataSource/core/requestHelper.ts
@@ -0,0 +1,33 @@
+/**
+ * 请求工具函数
+ * 统一处理数据源请求逻辑
+ */
+
+import request from '@/utils/request';
+import { handleDataSourceError } from './errorHandler';
+
+/**
+ * 通用请求加载函数
+ * @param url 请求地址
+ * @param params 请求参数
+ * @param context 错误上下文（用于错误日志）
+ * @returns 数据数组
+ */
+export async function loadData<T>(
+  url: string,
+  params?: Record<string, any>,
+  context?: string
+): Promise<T[]> {
+  return handleDataSourceError(
+    async () => {
+      const response = await request.get(url, { params });
+      // request 拦截器已经提取了 data 字段，response 直接是数组
+      return (response || []) as T[];
+    },
+    {
+      context: context || `加载数据 (${url})`,
+      fallbackValue: []
+    }
+  );
+}
+
diff --git a/frontend/src/domain/dataSource/presets/deploy.ts b/frontend/src/domain/dataSource/presets/deploy.ts
deleted file mode 100644
index 22d4408e..00000000
--- a/frontend/src/domain/dataSource/presets/deploy.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * 部署相关数据源
- */
-import type { DataSourceConfig } from '../types';
-
-/**
- * 环境列表数据源
- */
-export const environmentsConfig: DataSourceConfig = {
-  url: '/api/v1/environments/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: item.name,
-      value: item.id,
-      code: item.code,
-      type: item.type,
-      description: item.description
-    }));
-  }
-};
-
-/**
- * 项目组列表数据源
- */
-export const projectGroupsConfig: DataSourceConfig = {
-  url: '/api/v1/project-groups/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: item.name,
-      value: item.id,
-      code: item.code,
-      description: item.description
-    }));
-  }
-};
-
-/**
- * 应用列表数据源
- */
-export const applicationsConfig: DataSourceConfig = {
-  url: '/api/v1/applications/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: item.appName,  // ✅ 修正：使用 appName
-      value: item.appCode,
-      code: item.appCode,   // ✅ 修正：使用 appCode
-      projectGroupId: item.projectGroupId,
-      description: item.appDesc || item.description  // ✅ 修正：使用 appDesc
-    }));
-  }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/docker.ts b/frontend/src/domain/dataSource/presets/docker.ts
deleted file mode 100644
index 3fde4a4d..00000000
--- a/frontend/src/domain/dataSource/presets/docker.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Docker 镜像仓库数据源
- */
-import type { DataSourceConfig } from '../types';
-
-export const dockerRegistriesConfig: DataSourceConfig = {
-  url: '/api/v1/docker-registry/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: item.name,
-      value: item.id,
-      url: item.url
-    }));
-  }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/git.ts b/frontend/src/domain/dataSource/presets/git.ts
deleted file mode 100644
index 1385bbf3..00000000
--- a/frontend/src/domain/dataSource/presets/git.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Git 仓库数据源
- */
-import type { DataSourceConfig } from '../types';
-
-export const gitRepositoriesConfig: DataSourceConfig = {
-  url: '/api/v1/git-repo/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `${item.name} (${item.url})`,
-      value: item.id,
-      url: item.url
-    }));
-  }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/infrastructure.ts b/frontend/src/domain/dataSource/presets/infrastructure.ts
new file mode 100644
index 00000000..3fc1575c
--- /dev/null
+++ b/frontend/src/domain/dataSource/presets/infrastructure.ts
@@ -0,0 +1,190 @@
+/**
+ * 基础设施、部署和用户相关数据源
+ * 包含：基础设施（Docker、Git、K8s、Jenkins）、部署相关（环境、项目组、应用）、通知渠道、用户相关（用户、角色、部门）
+ */
+import type { DataSourceConfig } from '../types';
+
+/**
+ * Docker 镜像仓库数据源
+ */
+export const dockerRegistriesConfig: DataSourceConfig = {
+  url: '/api/v1/docker-registry/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: item.name,
+      value: item.id,
+      url: item.url
+    }));
+  }
+};
+
+/**
+ * Git 仓库数据源
+ */
+export const gitRepositoriesConfig: DataSourceConfig = {
+  url: '/api/v1/git-repo/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.name} (${item.url})`,
+      value: item.id,
+      url: item.url
+    }));
+  }
+};
+
+/**
+ * Kubernetes 集群数据源
+ */
+export const k8sClustersConfig: DataSourceConfig = {
+  url: '/api/v1/k8s-cluster/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: item.name,
+      value: item.id,
+      apiServer: item.apiServer
+    }));
+  }
+};
+
+/**
+ * Jenkins 服务器数据源
+ */
+export const jenkinsServersConfig: DataSourceConfig = {
+  url: '/api/v1/external-system/list',
+  params: { type: 'JENKINS', enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.name} (${item.url})`,
+      value: item.id,
+      url: item.url,
+      name: item.name
+    }));
+  }
+};
+
+/**
+ * 环境列表数据源
+ */
+export const environmentsConfig: DataSourceConfig = {
+  url: '/api/v1/environments/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: item.name,
+      value: item.id,
+      code: item.code,
+      type: item.type,
+      description: item.description
+    }));
+  }
+};
+
+/**
+ * 项目组列表数据源
+ */
+export const projectGroupsConfig: DataSourceConfig = {
+  url: '/api/v1/project-groups/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: item.name,
+      value: item.id,
+      code: item.code,
+      description: item.description
+    }));
+  }
+};
+
+/**
+ * 应用列表数据源
+ */
+export const applicationsConfig: DataSourceConfig = {
+  url: '/api/v1/applications/list',
+  params: { enabled: true },
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: item.appName,  // ✅ 修正：使用 appName
+      value: item.appCode,
+      code: item.appCode,   // ✅ 修正：使用 appCode
+      projectGroupId: item.projectGroupId,
+      description: item.appDesc || item.description  // ✅ 修正：使用 appDesc
+    }));
+  }
+};
+
+/**
+ * 通知渠道类型数据源
+ */
+export const notificationChannelTypesConfig: DataSourceConfig = {
+  url: '/api/v1/notification-channel/types',
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.label}`,
+      value: item.code
+    }));
+  }
+};
+
+/**
+ * 通知渠道数据源
+ */
+export const notificationChannelsConfig: DataSourceConfig = {
+  url: '/api/v1/notification-channel/list',
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `(${item.channelType})-${item.name}`,
+      value: item.id
+    }));
+  }
+};
+
+/**
+ * 用户数据源
+ */
+export const usersConfig: DataSourceConfig = {
+  url: '/api/v1/user/list',
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.nickname} (${item.username})`,
+      value: item.username,  // 后台使用 username 进行审批
+      id: item.id,
+      email: item.email,
+      departmentName: item.departmentName
+    }));
+  }
+};
+
+/**
+ * 角色数据源
+ */
+export const rolesConfig: DataSourceConfig = {
+  url: '/api/v1/role/list',
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.name} (${item.code})`,
+      value: item.code,  // 使用 code 作为值
+      id: item.id,
+      description: item.description
+    }));
+  }
+};
+
+/**
+ * 部门数据源
+ */
+export const departmentsConfig: DataSourceConfig = {
+  url: '/api/v1/department/list',
+  transform: (data: any[]) => {
+    return data.map((item: any) => ({
+      label: `${item.name} (${item.code})`,
+      value: item.code,  // 使用 code 作为值
+      id: item.id,
+      description: item.description,
+      parentId: item.parentId
+    }));
+  }
+};
+
diff --git a/frontend/src/domain/dataSource/presets/jenkins.ts b/frontend/src/domain/dataSource/presets/jenkins.ts
deleted file mode 100644
index 774b9fde..00000000
--- a/frontend/src/domain/dataSource/presets/jenkins.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Jenkins 服务器数据源
- */
-import type {DataSourceConfig} from '../types';
-
-export const jenkinsServersConfig: DataSourceConfig = {
-    url: '/api/v1/external-system/list',
-    params: {type: 'JENKINS', enabled: true},
-    transform: (data: any[]) => {
-        return data.map((item: any) => ({
-            label: `${item.name} (${item.url})`,
-            value: item.id,
-            url: item.url,
-            name: item.name
-        }));
-    }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/k8s.ts b/frontend/src/domain/dataSource/presets/k8s.ts
deleted file mode 100644
index 20d3d58e..00000000
--- a/frontend/src/domain/dataSource/presets/k8s.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Kubernetes 集群数据源
- */
-import type { DataSourceConfig } from '../types';
-
-export const k8sClustersConfig: DataSourceConfig = {
-  url: '/api/v1/k8s-cluster/list',
-  params: { enabled: true },
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: item.name,
-      value: item.id,
-      apiServer: item.apiServer
-    }));
-  }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/notification.ts b/frontend/src/domain/dataSource/presets/notification.ts
deleted file mode 100644
index 4b46584c..00000000
--- a/frontend/src/domain/dataSource/presets/notification.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * 通知渠道数据源
- */
-import type { DataSourceConfig } from '../types';
-
-export const notificationChannelTypesConfig: DataSourceConfig = {
-  url: '/api/v1/notification-channel/types',
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `${item.label}`,
-      value: item.code
-    }));
-  }
-};
-
-export const notificationChannelsConfig: DataSourceConfig = {
-  url: '/api/v1/notification-channel/list',
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `(${item.channelType})-${item.name}`,
-      value: item.id
-    }));
-  }
-};
-
diff --git a/frontend/src/domain/dataSource/presets/user.ts b/frontend/src/domain/dataSource/presets/user.ts
deleted file mode 100644
index edf37e31..00000000
--- a/frontend/src/domain/dataSource/presets/user.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * 用户、角色、部门数据源
- */
-import type { DataSourceConfig } from '../types';
-
-export const usersConfig: DataSourceConfig = {
-  url: '/api/v1/user/list',
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `${item.nickname} (${item.username})`,
-      value: item.username,  // 后台使用 username 进行审批
-      id: item.id,
-      email: item.email,
-      departmentName: item.departmentName
-    }));
-  }
-};
-
-export const rolesConfig: DataSourceConfig = {
-  url: '/api/v1/role/list',
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `${item.name} (${item.code})`,
-      value: item.code,  // 使用 code 作为值
-      id: item.id,
-      description: item.description
-    }));
-  }
-};
-
-export const departmentsConfig: DataSourceConfig = {
-  url: '/api/v1/department/list',
-  transform: (data: any[]) => {
-    return data.map((item: any) => ({
-      label: `${item.name} (${item.code})`,
-      value: item.code,  // 使用 code 作为值
-      id: item.id,
-      description: item.description,
-      parentId: item.parentId
-    }));
-  }
-};
-