style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局

- 新增全局弹窗灰底背景色，提升视觉一致性
- 新增通用分组白卡组件 section-card，标题融入卡头，支持额外插槽
- 统一 Avue 弹窗表单及分组为白卡样式
- 调整 common-route.vue 弹窗，使用 section-card 分组包裹查询条件与常用地址
- 改造 loading-manage.vue 弹窗所有分区，采用 section-card 统一风格
- 全局样式调整弹窗内容区表单项间距及两列表单布局工具类
- 在 main.js 全局注册 section-card 组件，便于项目统一复用

src/components/section-card/main.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="section-card">
+    <div v-if="title || $slots.title || $slots.extra" class="section-card__header">
+      <span class="section-card__bar" />
+      <span class="section-card__title">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <span class="section-card__extra">
+        <slot name="extra" />
+      </span>
+    </div>
+    <div class="section-card__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SectionCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

src/main.js

@@ -39,6 +39,8 @@ import codeSetting from './views/tool/codesetting.vue';
 import formSetting from './views/tool/formsetting.vue';
 import tenantPackage from './views/system/tenantpackage.vue';
 import tenantDatasource from './views/system/tenantdatasource.vue';
+// 通用弹窗分组白卡（灰底弹窗内使用，标题在卡内）
+import sectionCard from './components/section-card/main.vue';
 
 window.$crudCommon = crudCommon;
 debug();
@@ -61,6 +63,7 @@ app.component('codeSetting', codeSetting);
 app.component('formSetting', formSetting);
 app.component('tenantPackage', tenantPackage);
 app.component('tenantDatasource', tenantDatasource);
+app.component('sectionCard', sectionCard);
 app.config.globalProperties.$app = app;
 app.config.globalProperties.$dayjs = dayjs;
 app.config.globalProperties.website = website;

src/styles/element-ui.scss

@@ -207,6 +207,101 @@
   justify-content: center;
 }
 
+// =====================================================================
+// 弹窗标准（与 business/project-apply 弹窗视觉一致）
+// 灰底弹窗体 + 分组白卡（标题融入卡头，4px 主色竖条 + 8px 间距）
+// =====================================================================
+
+// 1) 所有弹窗内容区统一灰底
+.el-dialog__body {
+  background-color: #f5f6fa;
+}
+
+// 2) Avue 默认弹窗表单自动包成白卡，无需逐页改 option 即统一标准
+.el-dialog .avue-form {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  padding: 16px;
+}
+
+// 3) Avue 弹窗内分组（option.group）渲染为白卡，标题在卡内
+.el-dialog .avue-form__group {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  margin-bottom: 16px;
+  overflow: hidden;
+
+  .avue-group__header {
+    border-bottom: none;
+    padding: 14px 16px 4px;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  .avue-group__item {
+    padding: 14px 16px 4px;
+  }
+}
+
+// 4) 弹窗内表单项默认上下间距 16px（覆盖默认 18px / 22px）
+.el-dialog .el-form-item {
+  margin-bottom: 16px;
+}
+
+// 5) 通用分组白卡组件（<section-card>）：标题融入卡头
+.section-card {
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  margin-bottom: 16px;
+  overflow: hidden;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 16px 4px;
+    font-weight: 500;
+    color: #303133;
+  }
+
+  &__bar {
+    flex: none;
+    width: 4px;
+    height: 16px;
+    border-radius: 2px;
+    background-color: var(--el-color-primary);
+  }
+
+  &__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__extra {
+    margin-left: auto;
+    flex: none;
+  }
+
+  &__body {
+    padding: 14px 16px 4px;
+  }
+}
+
+// 6) 弹窗内两列表单栅格工具类（与 project-apply 一致）
+.form-grid-2 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  column-gap: 72px;
+  row-gap: 0;
+}
+
 .avue-crud__dialog .avue-dialog__footer > .el-button {
   margin-left: 12px;
 }

src/views/business/common-route.vue

@@ -141,98 +141,102 @@
       class="common-route-page__address-dialog"
       @opened="loadAddressList"
     >
-      <div class="common-route-page__address-search">
-        <el-form :model="addressQuery" label-position="right" label-width="86px">
-          <el-row :gutter="16">
-            <el-col :span="6">
-              <el-form-item label="地址名称">
-                <el-input v-model="addressQuery.addressName" clearable placeholder="请输入" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="地址类型">
-                <el-select
-                  v-model="addressQuery.addressType"
-                  clearable
-                  placeholder="请选择"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in addressTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="详细地址">
-                <el-input v-model="addressQuery.detailAddress" clearable placeholder="请输入" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6" class="common-route-page__address-search-actions">
-              <el-button type="primary" @click="handleAddressSearch">查询</el-button>
-              <el-button @click="handleAddressReset">重置</el-button>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="组织">
-                <el-select
-                  v-model="addressQuery.deptId"
-                  clearable
-                  filterable
-                  placeholder="请选择"
-                  style="width: 100%"
-                >
-                  <el-option
-                    v-for="item in deptOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
+      <section-card title="查询条件">
+        <div class="common-route-page__address-search">
+          <el-form :model="addressQuery" label-position="right" label-width="86px">
+            <el-row :gutter="16">
+              <el-col :span="6">
+                <el-form-item label="地址名称">
+                  <el-input v-model="addressQuery.addressName" clearable placeholder="请输入" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="地址类型">
+                  <el-select
+                    v-model="addressQuery.addressType"
+                    clearable
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in addressTypeOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="详细地址">
+                  <el-input v-model="addressQuery.detailAddress" clearable placeholder="请输入" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" class="common-route-page__address-search-actions">
+                <el-button type="primary" @click="handleAddressSearch">查询</el-button>
+                <el-button @click="handleAddressReset">重置</el-button>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="组织">
+                  <el-select
+                    v-model="addressQuery.deptId"
+                    clearable
+                    filterable
+                    placeholder="请选择"
+                    style="width: 100%"
+                  >
+                    <el-option
+                      v-for="item in deptOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </section-card>
 
-      <el-table
-        border
-        :data="addressData"
-        v-loading="addressLoading"
-        height="310"
-        highlight-current-row
-        @row-click="selectAddressRow"
-      >
-        <el-table-column type="index" label="序号" width="80" align="center" />
-        <el-table-column prop="addressName" label="地址名称" min-width="150" />
-        <el-table-column prop="addressCode" label="地址编号" min-width="150" />
-        <el-table-column prop="addressType" label="类型" min-width="150" />
-        <el-table-column label="站点编码" min-width="170">
-          <template #default="{ row }">
-            {{ row.addressType === '常规地址' ? '/' : row.siteCodeDisplay || row.siteCode || '' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="detailAddress" label="详细地址" min-width="220" />
-        <el-table-column label="操作" width="120" fixed="right">
-          <template #default="{ row }">
-            <el-link type="primary" @click.stop="selectAddressRow(row)">选择</el-link>
-          </template>
-        </el-table-column>
-      </el-table>
+      <section-card title="常用地址">
+        <el-table
+          border
+          :data="addressData"
+          v-loading="addressLoading"
+          height="310"
+          highlight-current-row
+          @row-click="selectAddressRow"
+        >
+          <el-table-column type="index" label="序号" width="80" align="center" />
+          <el-table-column prop="addressName" label="地址名称" min-width="150" />
+          <el-table-column prop="addressCode" label="地址编号" min-width="150" />
+          <el-table-column prop="addressType" label="类型" min-width="150" />
+          <el-table-column label="站点编码" min-width="170">
+            <template #default="{ row }">
+              {{ row.addressType === '常规地址' ? '/' : row.siteCodeDisplay || row.siteCode || '' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="detailAddress" label="详细地址" min-width="220" />
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-link type="primary" @click.stop="selectAddressRow(row)">选择</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
 
-      <div class="common-route-page__address-pagination">
-        <el-pagination
-          v-model:current-page="addressPage.currentPage"
-          v-model:page-size="addressPage.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          layout="total, prev, pager, next, sizes"
-          :total="addressPage.total"
-          @size-change="handleAddressSizeChange"
-          @current-change="handleAddressCurrentChange"
-        />
-      </div>
+        <div class="common-route-page__address-pagination">
+          <el-pagination
+            v-model:current-page="addressPage.currentPage"
+            v-model:page-size="addressPage.pageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, prev, pager, next, sizes"
+            :total="addressPage.total"
+            @size-change="handleAddressSizeChange"
+            @current-change="handleAddressCurrentChange"
+          />
+        </div>
+      </section-card>
 
       <template #footer>
         <el-button @click="addressDialogVisible = false">关闭</el-button>

src/views/business/loading-manage.vue

@@ -358,8 +358,8 @@
           label-width="auto"
           class="loading-manage-dialog__form"
         >
-          <div class="dialog-section-title">配载基本信息</div>
-          <div class="loading-manage-dialog__grid">
+          <section-card title="配载基本信息">
+            <div class="loading-manage-dialog__grid">
             <el-form-item label="配载单号">
               <el-input v-model="dialogForm.loadingNo" disabled placeholder="系统自动生成" />
             </el-form-item>
@@ -449,12 +449,13 @@
               />
             </el-form-item>
           </div>
+          </section-card>
 
-          <div class="dialog-section-title loading-manage-dialog__title-action">
-            <span>筛选待配载运单</span>
-            <el-link v-if="!dialogReadonly" type="primary" @click="loadCandidateWaybills">筛选</el-link>
-          </div>
-          <div class="loading-manage-dialog__candidate-search" v-if="candidateSearchVisible">
+          <section-card title="筛选待配载运单">
+            <template #extra>
+              <el-link v-if="!dialogReadonly" type="primary" @click="loadCandidateWaybills">筛选</el-link>
+            </template>
+            <div class="loading-manage-dialog__candidate-search" v-if="candidateSearchVisible">
             <el-row :gutter="16">
               <el-col :span="6">
                 <el-form-item label="运单号">
@@ -733,13 +734,14 @@
               @current-change="handleCandidateCurrentChange"
             />
           </div>
+          </section-card>
 
-          <div class="dialog-section-title">待配载列表</div>
-          <el-table
-            :data="selectedWaybillRows"
-            border
-            class="loading-manage-dialog__selected-table"
-          >
+          <section-card title="待配载列表">
+            <el-table
+              :data="selectedWaybillRows"
+              border
+              class="loading-manage-dialog__selected-table"
+            >
             <el-table-column type="index" label="序号" width="70" align="center" />
             <el-table-column prop="waybillNo" label="运单号" min-width="150">
               <template #default="{ row }">
@@ -768,10 +770,11 @@
                 >移除</el-link>
               </template>
             </el-table-column>
-          </el-table>
+            </el-table>
+          </section-card>
 
-          <div class="dialog-section-title">路线信息</div>
-          <div class="loading-manage-dialog__route-list" v-if="routeNodes.length">
+          <section-card title="路线信息">
+            <div class="loading-manage-dialog__route-list" v-if="routeNodes.length">
             <div
               v-for="(node, index) in routeNodes"
               :key="node.key"
@@ -788,11 +791,12 @@
                 <el-tag v-for="tag in node.tags" :key="tag" size="small">{{ tag }}</el-tag>
               </span>
             </div>
-          </div>
-          <el-empty v-else description="添加待配载运单后自动生成路线" :image-size="72" />
+            </div>
+            <el-empty v-else description="添加待配载运单后自动生成路线" :image-size="72" />
+          </section-card>
 
-          <div class="dialog-section-title">货物信息</div>
-          <el-table :data="cargoRows" border class="loading-manage-dialog__cargo-table">
+          <section-card title="货物信息">
+            <el-table :data="cargoRows" border class="loading-manage-dialog__cargo-table">
             <el-table-column type="index" label="序号" width="70" align="center" fixed="left" />
             <el-table-column prop="projectName" label="项目名称" min-width="150" />
             <el-table-column prop="cargoName" label="货物名称" min-width="140" />
@@ -806,10 +810,11 @@
             <el-table-column prop="materialCode" label="物料编码" min-width="130" />
             <el-table-column prop="equipmentCode" label="设备编码" min-width="130" />
             <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
-          </el-table>
+            </el-table>
+          </section-card>
 
-          <div class="dialog-section-title">任务信息</div>
-          <div class="loading-manage-dialog__carrier-tabs">
+          <section-card title="任务信息">
+            <div class="loading-manage-dialog__carrier-tabs">
             <el-segmented
               v-model="dialogForm.carrierType"
               :options="carrierTypeOptions"
@@ -913,6 +918,7 @@
               />
             </el-form-item>
           </div>
+          </section-card>
         </el-form>
       </div>
 
@@ -1882,10 +1888,8 @@ export default {
   }
 
   .loading-manage-dialog__candidate-search {
-    padding: 12px 12px 4px;
+    padding: 4px 0;
     margin-bottom: 8px;
-    background: #fff;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 
   .loading-manage-dialog__candidate-actions,