增加审批组件

frontend/src/components/FormDesigner/Preview.tsx

@@ -90,7 +90,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
 
   if (fields.length === 0) {
     return (
-      <div style={{ padding: 40, textAlign: 'center', color: '#8c8c8c' }}>
+      <div className="form-empty-state">
         表单为空
       </div>
     );
@@ -101,7 +101,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
   const wrapperColSpan = formConfig.labelAlign === 'left' || formConfig.labelAlign === 'right' ? 18 : undefined;
 
   return (
-    <div style={{ padding: '24px 40px' }}>
+    <div className="form-container-padding form-preview-compact">
       <Form
         form={form}
         layout={formLayout}
@@ -124,7 +124,7 @@ const FormPreview = forwardRef<FormPreviewRef, FormPreviewProps>(({ fields, form
       </Form>
 
       {Object.keys(formData).length > 0 && (
-        <div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 4 }}>
+        <div className="form-data-display">
           <h4>表单数据：</h4>
           <pre>{JSON.stringify(formData, null, 2)}</pre>
         </div>

frontend/src/components/FormDesigner/Renderer.tsx

@@ -224,7 +224,7 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
 
   if (fields.length === 0) {
     return (
-      <div style={{ padding: 40, textAlign: 'center', color: '#8c8c8c' }}>
+      <div className="form-empty-state">
         表单为空
       </div>
     );
@@ -236,7 +236,7 @@ const FormRenderer = forwardRef<FormRendererRef, FormRendererProps>((props, ref)
 
   return (
     <ComponentsContext.Provider value={allComponents}>
-      <div style={{ padding: '24px 40px' }}>
+      <div className="form-container-padding form-renderer-compact">
         <Form
           form={form}
           layout={formLayout}

frontend/src/components/FormDesigner/components/FormFieldsRenderer.tsx

@@ -40,7 +40,7 @@ const FormFieldsRenderer: React.FC<FormFieldsRendererProps> = ({
       // 布局组件：文本、分割线
       if (field.type === 'text' || field.type === 'divider') {
         return (
-          <div key={field.id}>
+          <div key={field.id} style={{ marginBottom: 8 }}>
             <FieldRenderer field={field} isPreview={true} />
           </div>
         );

frontend/src/components/FormDesigner/components/GridFieldPreview.tsx

@@ -125,7 +125,7 @@ const GridFieldPreview: React.FC<GridFieldPreviewProps> = ({
   };
 
   return (
-    <div style={{ marginBottom: 16 }}>
+    <div style={{ marginBottom: 8 }}>
       <Row gutter={field.gutter || 16}>
         {children.map((columnFields, colIndex) => {
           const colSpan = getColSpan(colIndex);

frontend/src/components/FormDesigner/components/LinkageRuleEditor.tsx

@@ -127,7 +127,7 @@ const LinkageRuleEditor: React.FC<LinkageRuleEditorProps> = ({
       </div>
 
       {value.length === 0 ? (
-        <div style={{ padding: '24px 0', textAlign: 'center', color: '#8c8c8c', fontSize: 12 }}>
+        <div className="form-empty-list-hint">
           暂无联动规则，点击上方按钮添加
         </div>
       ) : (

frontend/src/components/FormDesigner/components/PropertyPanel.tsx

@@ -178,7 +178,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
   const renderFieldProperties = () => {
     if (!selectedField) {
       return (
-        <div style={{ padding: 24, textAlign: 'center', color: '#8c8c8c' }}>
+        <div className="form-property-panel-empty">
           请从画布中选择一个字段
         </div>
       );
@@ -202,7 +202,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
       const CustomConfig = componentMeta.PropertyConfigComponent;
       console.log('✅ 使用自定义配置组件:', componentMeta.type);
       return (
-        <div style={{ padding: 16 }}>
+        <div className="form-property-panel-content">
           <CustomConfig 
             field={selectedField} 
             onChange={onFieldChange}
@@ -221,7 +221,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
         form={form}
         layout="vertical"
         onValuesChange={handleFieldUpdate}
-        style={{ padding: 16 }}
+        className="form-property-panel-content"
       >
         {/* 布局组件不显示字段标签和字段名称 */}
         {selectedField.type !== 'divider' && selectedField.type !== 'grid' && selectedField.type !== 'text' && (
@@ -498,7 +498,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
               </Radio.Group>
             </Form.Item>
 
-            <div style={{ padding: '8px 12px', background: '#f0f5ff', borderRadius: 4, marginBottom: 16 }}>
+            <div className="form-property-info-box">
               <Text type="secondary" style={{ fontSize: 12 }}>
                 • 单人审批：仅需一人审批<br />
                 • 会签：所有审批人都必须同意<br />
@@ -746,7 +746,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
         layout="vertical"
         initialValues={formConfig}
         onValuesChange={(_, allValues) => onFormConfigChange(allValues)}
-        style={{ padding: 16 }}
+        className="form-property-panel-content"
       >
         <Form.Item label="标签对齐方式" name="labelAlign">
           <Radio.Group buttonStyle="solid">
@@ -796,7 +796,7 @@ const PropertyPanel: React.FC<PropertyPanelProps> = ({
 
       <Tabs 
         defaultActiveKey="field" 
-        style={{ padding: '0 0 0 16px' }}
+        className="form-property-nested-indent"
         items={[
           {
             key: 'field',

frontend/src/components/FormDesigner/components/ValidationRuleEditor.tsx

@@ -91,7 +91,7 @@ const ValidationRuleEditor: React.FC<ValidationRuleEditorProps> = ({ value = [],
       </div>
 
       {value.length === 0 ? (
-        <div style={{ padding: '24px 0', textAlign: 'center', color: '#8c8c8c', fontSize: 12 }}>
+        <div className="form-empty-list-hint">
           暂无验证规则，点击上方按钮添加
         </div>
       ) : (

frontend/src/components/FormDesigner/styles.css

@@ -293,3 +293,73 @@
   }
 }
 
+/* 表单渲染器和预览器的紧凑间距样式 */
+.form-renderer-compact .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-preview-compact .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+/* 栅格内部的字段间距也需要调整 */
+.form-renderer-compact .ant-row .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+.form-preview-compact .ant-row .ant-form-item {
+  margin-bottom: 8px !important;
+}
+
+/* 布局组件的间距 */
+.form-renderer-compact > div > div,
+.form-preview-compact > div > div {
+  margin-bottom: 8px;
+}
+
+/* 通用内边距类 */
+.form-container-padding {
+  padding: 24px 40px;
+}
+
+.form-empty-state {
+  padding: 40px;
+  text-align: center;
+  color: #8c8c8c;
+}
+
+.form-data-display {
+  margin-top: 24px;
+  padding: 16px;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.form-property-panel-empty {
+  padding: 24px;
+  text-align: center;
+  color: #8c8c8c;
+}
+
+.form-property-panel-content {
+  padding: 16px;
+}
+
+.form-property-info-box {
+  padding: 8px 12px;
+  background: #f0f5ff;
+  border-radius: 4px;
+  margin-bottom: 16px;
+}
+
+.form-property-nested-indent {
+  padding: 0 0 0 16px;
+}
+
+.form-empty-list-hint {
+  padding: 24px 0;
+  text-align: center;
+  color: #8c8c8c;
+  font-size: 12px;
+}
+

frontend/src/pages/Form/Definition/components/CreateModal.tsx

@@ -212,10 +212,7 @@ const CreateModal: React.FC<CreateModalProps> = ({ visible, onClose, onSuccess }
                 <SelectContent>
                   {categories.map(cat => (
                     <SelectItem key={cat.id} value={cat.id.toString()}>
-                      <div className="flex items-center gap-2">
+                      {cat.name}
-                        <Folder className="h-3.5 w-3.5" />
-                        {cat.name}
-                      </div>
                     </SelectItem>
                   ))}
                 </SelectContent>

frontend/src/pages/Form/Definition/components/EditBasicInfoModal.tsx

@@ -189,10 +189,7 @@ const EditBasicInfoModal: React.FC<EditBasicInfoModalProps> = ({ visible, record
                 <SelectContent>
                   {categories.map(cat => (
                     <SelectItem key={cat.id} value={cat.id.toString()}>
-                      <div className="flex items-center gap-2">
+                      {cat.name}
-                        <Folder className="h-3.5 w-3.5" />
-                        {cat.name}
-                      </div>
                     </SelectItem>
                   ))}
                 </SelectContent>