From 9d0b28cdec43c02a1d0d5da815e958fd728e9973 Mon Sep 17 00:00:00 2001
From: dengqichen <dengqichen@iscmtech.com>
Date: Sat, 25 Oct 2025 12:29:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AE=A1=E6=89=B9=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/FormDesigner/Designer.tsx |  4 ++--
 .../FormDesigner/components/FieldRenderer.tsx     | 15 ++++++++++++++-
 .../FormDesigner/components/PropertyPanel.tsx     | 14 ++++++++++++++
 frontend/src/components/FormDesigner/config.ts    |  6 +++++-
 frontend/src/components/FormDesigner/types.ts     |  3 +++
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FormDesigner/Designer.tsx b/frontend/src/components/FormDesigner/Designer.tsx
index 0a86accd..9e3a66fa 100644
--- a/frontend/src/components/FormDesigner/Designer.tsx
+++ b/frontend/src/components/FormDesigner/Designer.tsx
@@ -354,10 +354,10 @@ const FormDesigner: React.FC<FormDesignerProps> = ({
           if (over.id === 'canvas' || over.id === 'canvas-bottom' || overData?.isBottom) {
             newFields.push(newField);
           } else {
-            // 如果拖到某个字段上，插入到该字段之后
+            // 如果拖到某个字段上，插入到该字段之前（修复拖拽插入位置bug）
             const overIndex = newFields.findIndex((f) => f.id === over.id);
             if (overIndex >= 0) {
-              newFields.splice(overIndex + 1, 0, newField); // 插入到目标字段之后
+              newFields.splice(overIndex, 0, newField); // 插入到目标字段之前
             } else {
               newFields.push(newField);
             }
diff --git a/frontend/src/components/FormDesigner/components/FieldRenderer.tsx b/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
index 665f2957..96f2b65d 100644
--- a/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
+++ b/frontend/src/components/FormDesigner/components/FieldRenderer.tsx
@@ -86,7 +86,20 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
 
   // 布局组件特殊处理
   if (field.type === 'divider') {
-    return <Divider>{field.label}</Divider>;
+    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,
+        }}
+      >
+        {showText ? dividerText : null}
+      </Divider>
+    );
   }
 
   if (field.type === 'text') {
diff --git a/frontend/src/components/FormDesigner/components/PropertyPanel.tsx b/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
index 2b485475..cf663a5e 100644
--- a/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
+++ b/frontend/src/components/FormDesigner/components/PropertyPanel.tsx
@@ -352,6 +352,20 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
           </>
         )}
 
+        {selectedField.type === 'divider' && (
+          <>
+            <Form.Item label="显示文字" name="showText" valuePropName="checked">
+              <Switch />
+            </Form.Item>
+            <Form.Item label="分割线文字" name="dividerText">
+              <Input placeholder="请输入分割线文字" />
+            </Form.Item>
+            <Form.Item label="分割线颜色" name="dividerColor">
+              <Input type="color" style={{ width: '100%' }} />
+            </Form.Item>
+          </>
+        )}
+
         {selectedField.type === 'grid' && (
           <>
             <Divider style={{ margin: '16px 0' }} />
diff --git a/frontend/src/components/FormDesigner/config.ts b/frontend/src/components/FormDesigner/config.ts
index d1f8bffb..2dd46bef 100644
--- a/frontend/src/components/FormDesigner/config.ts
+++ b/frontend/src/components/FormDesigner/config.ts
@@ -73,7 +73,11 @@ export const COMPONENT_LIST: ComponentMeta[] = [
     label: '分割线',
     icon: MinusOutlined,
     category: '布局字段',
-    defaultConfig: {},
+    defaultConfig: {
+      showText: true,      // 是否显示文字
+      dividerText: '分割线', // 分割线中间的文字
+      dividerColor: 'rgba(5, 5, 5, 0.06)', // 分割线颜色（默认为 Ant Design 的分割线颜色）
+    },
   },
   // 基础字段
   {
diff --git a/frontend/src/components/FormDesigner/types.ts b/frontend/src/components/FormDesigner/types.ts
index 91e98306..51d71836 100644
--- a/frontend/src/components/FormDesigner/types.ts
+++ b/frontend/src/components/FormDesigner/types.ts
@@ -135,6 +135,9 @@ export interface FieldConfig {
   textAlign?: 'left' | 'center' | 'right'; // 文字对齐方式（用于 text 组件）
   fontSize?: number; // 文字大小（用于 text 组件）
   textColor?: string; // 文字颜色（用于 text 组件）
+  showText?: boolean; // 是否显示文字（用于 divider 组件）
+  dividerText?: string; // 分割线文字（用于 divider 组件）
+  dividerColor?: string; // 分割线颜色（用于 divider 组件）
   checkboxLayout?: 'horizontal' | 'vertical'; // 多选框布局方式（horizontal:行内，vertical:块级）
   columns?: number; // 栅格列数（用于 grid 组件）
   columnSpans?: number[]; // 栅格每列宽度（用于 grid 组件，如 [2, 18, 2]，总和不超过24）