输入表单布局

openspec/changes/remove-tabs-from-workflow-create-dialog/design.md

@@ -0,0 +1,80 @@
+# Design: 移除流程创建弹窗的 Tab 栏布局
+
+## Current Implementation
+
+当前 `WorkflowCreateDialog.vue` 使用 `el-tabs` 组件组织表单字段：
+
+```vue
+<el-tabs v-model="activeTab">
+  <el-tab-pane label="基本信息" name="basic">
+    <!-- 客户内码、客户名称、客户类型、证件类型 -->
+  </el-tab-pane>
+  <el-tab-pane label="贷款信息" name="loan">
+    <!-- 申请金额、贷款利率、担保方式、贷款用途、抵质押类型、是否有经营佐证、抵质押物三方所有 -->
+  </el-tab-pane>
+  <el-tab-pane label="中间业务标识" name="mid">
+    <!-- 个人快捷支付、个人电费代扣、企业电费代扣、企业水费代扣 -->
+  </el-tab-pane>
+  <el-tab-pane label="企业标识" name="ent">
+    <!-- 净身企业、开立基本结算账户、制造业企业、省农担担保贷款、纳税信用等级A级、县级及以上农业龙头企业、普惠小微借款人 -->
+  </el-tab-pane>
+</el-tabs>
+```
+
+## Proposed Implementation
+
+使用 Element UI 的 `el-divider` 组件作为分组标题，移除 `el-tabs` 和 `el-tab-pane`：
+
+```vue
+<el-form ref="form" :model="form" :rules="rules" label-width="140px">
+  <!-- 基本信息 -->
+  <el-divider content-position="left">基本信息</el-divider>
+  <el-row>
+    <el-col :span="12">
+      <el-form-item label="客户内码" prop="custIsn">
+        <el-input v-model="form.custIsn" placeholder="请输入客户内码" />
+      </el-form-item>
+    </el-col>
+    <el-col :span="12">
+      <el-form-item label="客户名称" prop="custName">
+        <el-input v-model="form.custName" placeholder="请输入客户名称" />
+      </el-form-item>
+    </el-col>
+  </el-row>
+  <!-- ... 其他基本信息字段 ... -->
+
+  <!-- 贷款信息 -->
+  <el-divider content-position="left">贷款信息</el-divider>
+  <!-- ... 贷款信息字段 ... -->
+
+  <!-- 中间业务标识 -->
+  <el-divider content-position="left">中间业务标识</el-divider>
+  <!-- ... 中间业务标识字段 ... -->
+
+  <!-- 企业标识 -->
+  <el-divider content-position="left">企业标识</el-divider>
+  <!-- ... 企业标识字段 ... -->
+</el-form>
+```
+
+同时需要移除 `data()` 中的 `activeTab` 属性。
+
+## CSS Styling
+
+为 `el-divider` 添加适当的外边距，确保分组标题与表单字段之间有清晰的视觉分隔：
+
+```css
+.el-divider {
+  margin: 16px 0 20px 0;
+  font-weight: bold;
+}
+```
+
+或使用 `<style scoped>` 在组件内定义。
+
+## Rationale
+
+1. **单一表单布局**：所有字段在同一页面可见，用户可以快速浏览和填写
+2. **分组标题**：使用 `el-divider` 的 `content-position` 属性显示分组标题，保持清晰的视觉层次
+3. **滚动支持**：对话框内容区域可滚动，支持大量字段的显示
+4. **保持验证逻辑**：不需要修改表单验证逻辑，`el-form` 的验证机制仍然有效