优化

src/modules/overseas-business/components/TransportDemandForm.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import '@/styles/adminWorkbench.css'
+import '@/styles/adminDensity.css'
 import { computed, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
+import FormSection from '@/shared/components/FormSection.vue'
 import { transportDemandRules, type TransportDemandForm, type TransportDemandKind } from '../transportDemandForm'
 
 const props = withDefaults(defineProps<{
@@ -22,10 +24,9 @@ defineExpose({
 </script>
 
 <template>
-  <el-form ref="formRef" class="transport-demand-form admin-workbench" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
+  <el-form ref="formRef" class="transport-demand-form admin-density admin-workbench density-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
     <slot name="customer" />
-    <section class="transport-demand-section">
-      <h3>运输信息</h3>
+    <FormSection class="density-form-section" title="运输信息">
       <div class="transport-demand-grid">
         <el-form-item v-if="kind === 'truck'" class="transport-demand-wide" label="车辆类型" prop="vehicleType">
           <el-select v-model="model.vehicleType" placeholder="请选择车辆类型"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
@@ -39,9 +40,8 @@ defineExpose({
         <el-form-item label="起运详细地址"><el-input v-model.trim="model.originAddress" maxlength="500" /></el-form-item>
         <el-form-item label="目的详细地址"><el-input v-model.trim="model.destinationAddress" maxlength="500" /></el-form-item>
       </div>
-    </section>
-    <section class="transport-demand-section">
-      <h3>货物信息</h3>
+    </FormSection>
+    <FormSection class="density-form-section" title="货物信息">
       <div class="transport-demand-grid" :class="kind === 'looseboard' ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
         <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" /></el-form-item>
         <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" /></el-form-item>
@@ -50,9 +50,8 @@ defineExpose({
         <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" /></el-form-item>
         <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" /></el-form-item>
       </div>
-    </section>
-    <section class="transport-demand-section">
-      <h3>费用与时效</h3>
+    </FormSection>
+    <FormSection class="density-form-section" title="费用与时效">
       <div class="transport-demand-grid">
         <el-form-item label="预算总价" prop="budgetAmount"><div class="transport-demand-budget">
           <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" />
@@ -63,8 +62,8 @@ defineExpose({
         <el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择送货日期和时间" /></el-form-item>
         <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit /></el-form-item>
       </div>
-    </section>
-    <footer class="transport-demand-actions">
+    </FormSection>
+    <footer class="transport-demand-actions density-actions">
       <el-button :disabled="submitting" @click="emit('cancel')">取消</el-button>
       <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="disabled" @click="emit('submit')">{{ editing ? '保存修改' : '提交订单' }}</el-button>
     </footer>
@@ -72,17 +71,12 @@ defineExpose({
 </template>
 
 <style scoped>
-.transport-demand-form { --el-component-size: 36px; width: 100%; max-width: 1180px; margin: 0; background: var(--workbench-surface); }
-.transport-demand-section { padding: 20px 24px 0; border-bottom: 1px solid var(--workbench-border); }
-.transport-demand-section h3 { margin: 0 0 16px; color: var(--workbench-text); font-size: 14px; font-weight: 600; }
-.transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
+.transport-demand-form { width: 100%; min-width: 0; margin: 0; }
+.transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6); }
 .transport-demand-cargo-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .transport-demand-cargo-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .transport-demand-wide { grid-column: 1 / -1; }
-.transport-demand-form :deep(.el-form-item) { min-width: 0; margin-bottom: 18px; }
-.transport-demand-form :deep(.el-form-item__label) { height: auto; padding-bottom: 6px; font-size: 13px; line-height: 20px; }
-.transport-demand-form :deep(.el-input), .transport-demand-form :deep(.el-input-number), .transport-demand-form :deep(.el-select), .transport-demand-form :deep(.el-date-editor) { width: 100%; }
-.transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
-.transport-demand-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
-.transport-demand-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.transport-demand-form :deep(.el-form-item) { min-width: 0; }
+.transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: var(--admin-space-3); }
+.transport-demand-actions { justify-content: flex-end; flex-wrap: wrap; padding: var(--admin-space-5) 0; }
 </style>