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

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

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,