style(dialogs): 统一全站自定义表单弹窗样式为客商档案风格

- 新增全局弹窗表单标准类 .dialog-form--carded，实现卡片白底分组风格
- 规范表单标签宽度为 calc(6em + 24px)，右对齐且垂直居中
- 统一 input/select/cascader/tree-select/date-editor/textarea 等控件宽度为 250px
- 保持 radio/checkbox 组宽度自适应
- 应用样式改造多个弹窗组件：流程变更、流程删除、参数编辑、锁定用户、解锁确认、用户编辑与修改密码、新建导入
- 港口码头编辑弹窗内 input 宽度统一为 250px，调整详细地址为单行输入框并放宽宽度
- 调整备注字段文本域高度，优化整体弹窗表单布局与风格统一

.workbuddy/memory/2026-08-12.md

@@ -0,0 +1,31 @@
+# 2026-08-12
+
+## 全站自定义表单弹窗样式统一为客商档案风格
+
+- 新增全局弹窗表单标准类 `.dialog-form--carded`（`src/styles/element-ui.scss`），统一实现：
+  - `section-card` 白底卡片分组
+  - label 固定宽度 `calc(6em + 24px)`、右对齐、上下居中
+  - input/select/cascader/tree-select/date-editor/textarea 等控件固定宽度 250px
+  - radio/checkbox 组宽度自适应
+- 改造文件清单：
+  - `src/views/flow/manager.vue`：流程变更弹窗
+  - `src/views/flow/follow.vue`：流程删除弹窗
+  - `src/views/system/param.vue`：参数编辑弹窗
+  - `src/views/system/authlock.vue`：锁定用户、解锁确认弹窗
+  - `src/views/system/user.vue`：用户编辑、修改密码弹窗
+  - `src/views/business/components/waybill-import-dialog.vue`：新建导入弹窗表单区
+- 已跳过（非编辑表单弹窗）：`system/dept.vue` 承运商选择搜索弹窗、`business/master-order-editor.vue` 页面级组件。
+- `npm run build` 构建通过。
+
+## 港口码头（port-terminal）编辑弹窗 input 宽度统一 250px
+
+- 文件：`src/views/base/port-terminal.vue`
+- 做法：option 加 `dialogCustomClass: 'port-terminal-edit-dialog'`，并在文件末尾新增非 scoped `<style>` 块，`.port-terminal-edit-dialog .el-input { width: 250px !important }`。
+- 说明：弹窗 `append-to-body`，scoped 命中不到，故用全局样式 + 自定义 dialog class 限定作用域；`.el-input` 与 `.el-select` 统一 `width: 250px !important`（含 formslot 内带内联 `width:100%` 的 country/cityCode/districtCode 下拉，!important 覆盖）。`textarea`（详细地址/备注）、类型 `el-radio-group` 维持自适应，未改。新增弹窗复用同一 dialog，故一并生效。
+
+## 港口码头 详细地址/备注字段形态调整（接续上方宽度统一）
+
+- `detailAddress`：移除 `type: 'textarea'` / `minRows: 3` 改单行 input；因属整行字段需放宽，启用 `formslot` + 模板 `#detailAddress-form` 手写 `<el-input class="detail-address-input">`，并用 `.port-terminal-edit-dialog .detail-address-input { width: 100% !important }` 覆盖全局 250px 规则，占满整行。表格列仍由 `slot: true` + `#detailAddress` 显示插槽控制。
+- `remark`：`minRows: 4` → `2`（约 2 行高度），仍为 textarea（本身不受 250px 规则约束，已是整行宽）。
+- 表单字段排序调整：按截图示意重新排为——类型(10) → 名称(20) → 编码(30) → 国家(40) → 城市(50) → 区县(60) → 详细地址(70) → 经度(80) → 纬度(90) → 上级港口(100) → 备注（无 order 置底）。即区县和详细地址插在国家/城市那一行下面。
+- 备注宽度改为 80%：`remark` 加 `formslot: true` + 模板 `#remark-form` 手写 `<el-input type="textarea" class="remark-input" :rows="2" maxlength="200" show-word-limit>`，CSS `.port-terminal-edit-dialog .remark-input { width: 80% !important }`。注意：详细地址 `.detail-address-input` 当前宽度为 81%（用户手动调整，非本次设定）。

src/styles/element-ui.scss

@@ -362,6 +362,40 @@
   row-gap: 0;
 }
 
+// 7) 卡片式弹窗表单标准（与 vehicle/customer-archive 编辑弹窗一致）
+//    在 el-dialog 上添加 class="dialog-form--carded" 即可生效
+.dialog-form--carded {
+  .el-form-item {
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .el-form-item__label {
+    flex: 0 0 calc(6em + 24px) !important;
+    width: calc(6em + 24px) !important;
+    white-space: normal !important;
+    word-break: break-all;
+    overflow-wrap: anywhere;
+    line-height: 18px;
+  }
+
+  .el-form-item__content > .el-input,
+  .el-form-item__content > .el-select,
+  .el-form-item__content > .el-cascader,
+  .el-form-item__content > .el-tree-select,
+  .el-form-item__content > .el-input-number,
+  .el-form-item__content > .el-date-editor,
+  .el-form-item__content > .el-textarea {
+    width: 250px;
+    max-width: 100%;
+  }
+
+  .el-form-item__content > .el-radio-group,
+  .el-form-item__content > .el-checkbox-group {
+    width: auto;
+  }
+}
+
 .avue-crud__dialog .avue-dialog__footer > .el-button {
   margin-left: 12px;
 }

src/views/base/port-terminal.vue

@@ -171,6 +171,27 @@
       <template #detailAddress="{ row }">
         <span class="port-terminal-page__detail-address">{{ row.detailAddress || '-' }}</span>
       </template>
+      <template #detailAddress-form>
+        <el-input
+          v-model="form.detailAddress"
+          class="detail-address-input"
+          clearable
+          maxlength="255"
+          show-word-limit
+          placeholder="请输入"
+        />
+      </template>
+      <template #remark-form>
+        <el-input
+          v-model="form.remark"
+          class="remark-input"
+          type="textarea"
+          :rows="2"
+          maxlength="200"
+          show-word-limit
+          placeholder="请输入"
+        />
+      </template>
       <template #longitude-form>
         <el-input
           v-model="form.longitude"
@@ -195,7 +216,7 @@
       @load="onLoad(page, query)"
     />
 
-    <el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="555px">
+    <el-dialog title="港口码头主数据导入" append-to-body v-model="excelBox" width="500px">
       <avue-form :option="excelOption" v-model="excelForm">
         <template #excelTemplate>
           <el-button type="primary" @click="handleTemplate">
@@ -369,6 +390,7 @@ export default {
         height: 'auto',
         calcHeight: 32,
         dialogWidth: 980,
+        dialogCustomClass: 'port-terminal-edit-dialog',
         labelPosition: 'right',
         labelWidth: 'auto',
         tip: false,
@@ -396,7 +418,7 @@ export default {
             formslot: true,
             width: 140,
             span: 12,
-            order: 70,
+            order: 30,
             placeholder: '请输入编码',
             rules: [
               { required: true, message: '请输入编码', trigger: 'blur' },
@@ -412,7 +434,7 @@ export default {
             search: true,
             searchOrder: 7,
             span: 12,
-            order: 80,
+            order: 20,
             placeholder: '请输入',
             rules: [{ required: true, message: '请输入港口/码头名称', trigger: 'blur' }],
           },
@@ -424,7 +446,7 @@ export default {
             searchOrder: 6,
             formslot: true,
             span: 24,
-            order: 100,
+            order: 10,
             dicData: [
               { label: '全部', value: '' },
               { label: '港口', value: '港口' },
@@ -444,7 +466,7 @@ export default {
             dicData: [],
             hide: true,
             span: 12,
-            order: 90,
+            order: 100,
             placeholder: '请选择',
             rules: [{ required: false, message: '请选择上级港口', trigger: 'change' }],
             change: ({ value }) => this.handleParentChange(value),
@@ -478,7 +500,7 @@ export default {
             filterable: true,
             dicData: [],
             span: 12,
-            order: 60,
+            order: 40,
             minWidth: 140,
             overHidden: false,
             placeholder: '自动带出',
@@ -515,6 +537,7 @@ export default {
             type: 'select',
             formslot: true,
             hide: true,
+            order: 60,
             props: {
               label: 'title',
               value: 'id',
@@ -543,7 +566,7 @@ export default {
             formslot: true,
             minWidth: 130,
             span: 12,
-            order: 20,
+            order: 80,
             placeholder: '请输入',
             overHidden: false,
             rules: [
@@ -557,7 +580,7 @@ export default {
             formslot: true,
             minWidth: 130,
             span: 12,
-            order: 10,
+            order: 90,
             placeholder: '请输入',
             overHidden: false,
             rules: [
@@ -578,13 +601,12 @@ export default {
           {
             label: '详细地址',
             prop: 'detailAddress',
-            type: 'textarea',
             slot: true,
-            minRows: 3,
+            formslot: true,
             span: 24,
             minWidth: 220,
             overHidden: false,
-            order: 30,
+            order: 70,
             placeholder: '请输入',
             maxlength: 255,
             showWordLimit: true,
@@ -611,8 +633,9 @@ export default {
             label: '备注',
             prop: 'remark',
             type: 'textarea',
-            minRows: 4,
+            minRows: 2,
             span: 24,
+            formslot: true,
             hide: true,
             maxlength: 200,
             showWordLimit: true,
@@ -1338,3 +1361,21 @@ export default {
   padding: 4px 0;
 }
 </style>
+
+<style lang="scss">
+/* 港口码头编辑/新增弹窗：所有 input 文本框、select 下拉控件统一宽度 250px */
+.port-terminal-edit-dialog {
+  .el-input,
+  .el-select {
+    width: 250px !important;
+  }
+  /* 详细地址为整行字段，放宽到占满整行 */
+  .detail-address-input {
+    width: 81% !important;
+  }
+  /* 备注宽度 80% */
+  .remark-input {
+    width: 80% !important;
+  }
+}
+</style>

src/views/business/components/waybill-import-dialog.vue

@@ -31,14 +31,14 @@
     <el-pagination v-model:current-page="detailPage.current" v-model:page-size="detailPage.size" layout="total, prev, pager, next, sizes" :page-sizes="[10, 20, 50]" :total="detailPage.total" @current-change="loadDetails" @size-change="loadDetails" />
   </el-dialog>
 
-  <el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create">
+  <el-dialog v-model="createVisible" title="新建导入" width="85%" append-to-body destroy-on-close class="waybill-import-create dialog-form--carded">
-    <section class="waybill-import-create__form-panel">
+    <section-card title="导入信息">
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="auto" class="archive-form">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="calc(6em + 24px)">
-        <el-row :gutter="20"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
+        <el-row :gutter="18"><el-col :span="6"><el-form-item label="项目" prop="projectId"><el-select v-model="form.projectId" filterable clearable placeholder="模糊查询后选择" @change="projectChange"><el-option v-for="item in projects" :key="item.id" :label="item.projectName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="客户" prop="customerName"><el-input v-model="form.customerName" disabled placeholder="自动带出" /></el-form-item></el-col><el-col :span="6"><el-form-item label="客户合同" prop="contractId"><el-select v-model="form.contractId" filterable clearable placeholder="自动带出"><el-option v-for="item in contracts" :key="item.id" :label="item.contractName" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运类型" prop="carrierType"><el-select v-model="form.carrierType"><el-option label="承运商" value="承运商" /><el-option label="自运" value="自运" /><el-option label="网货平台" value="网货平台" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="承运商"><el-select v-model="form.carrierIds" multiple filterable placeholder="自动带出，多个需选择"><el-option v-for="item in carriers" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入状态" prop="status"><el-select v-model="form.status"><el-option label="完成" value="completed" /><el-option label="进行中" value="processing" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="导入类型" prop="importType"><el-select v-model="form.importType"><el-option label="运单" value="waybill" /><el-option label="结算单" value="settlement" /></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="发货计划"><el-select v-model="form.planId" clearable filterable placeholder="请选择"><el-option v-for="item in plans" :key="item.id" :label="item.planName" :value="item.id" /></el-select></el-form-item></el-col></el-row>
         <el-form-item label="运单明细表" prop="file"><el-upload action="#" accept=".xls,.xlsx" :auto-upload="false" :limit="1" :file-list="files" :on-change="fileChange" :on-remove="fileRemove"><el-button type="primary">添加附件</el-button></el-upload><span class="waybill-import-create__file-tip">请上传运单明细表，仅支持 excel 格式</span><el-link type="primary" @click="downloadTemplate">下载模板</el-link></el-form-item>
       </el-form>
       <div class="waybill-import-create__form-actions"><el-button @click="createVisible = false">关闭</el-button><el-button @click="saveDraft">保存草稿</el-button><el-button type="primary" @click="confirmImport">确认导入</el-button></div>
-    </section>
+    </section-card>
     <section class="waybill-import-create__detail-panel" v-if="rows.length"><div class="waybill-import-create__detail-head"><div class="dialog-section-title">导入数据明细</div><el-button type="danger" plain :disabled="!rowSelection.length" @click="removeSelectedRows">批量删除</el-button></div><el-tabs v-model="previewTab"><el-tab-pane :label="`运单数（${rows.length}）`" name="all" /><el-tab-pane :label="`疑似重复（${duplicateRows.length}）`" name="duplicate" /></el-tabs><el-table :data="previewRows" border max-height="440" @selection-change="rowSelection = $event"><el-table-column type="selection" width="55" /><el-table-column type="index" label="序号" width="65" /><el-table-column v-for="column in detailColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="140" show-overflow-tooltip /><el-table-column label="操作" width="180" fixed="right"><template #default="{ row }"><el-link type="primary" @click="cancelRow(row)">取消</el-link><el-link type="primary" @click="saveRow(row)">保存</el-link><el-link type="primary" @click="editRow(row)">编辑</el-link><el-link type="danger" @click="deleteRow(row)">删除</el-link></template></el-table-column></el-table></section>
   </el-dialog>
 </template>
@@ -153,14 +153,14 @@ const confirmImport = async () => { await formRef.value?.validate(); if (!valida
 }
 
 .waybill-import-create {
-  &__form-panel,
-  &__detail-panel {
-    border: 1px solid #eff1f7;
-    padding: 20px 24px;
-  }
-
-  &__detail-panel { margin-top: 12px; }
   &__form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
+  &__detail-panel {
+    background: #fff;
+    border-radius: 6px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+    padding: 14px 16px;
+    margin-top: 8px;
+  }
   &__detail-head { display: flex; align-items: center; gap: 24px; margin-bottom: 8px; }
   &__file-tip { margin: 0 24px; color: #606266; }
 }

src/views/business/project-apply.vue

@@ -1908,7 +1908,7 @@ export default {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     column-gap: 72px;
     row-gap: 0;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 14px 16px 4px;
@@ -1934,7 +1934,7 @@ export default {
 
   &__table {
     width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 12px;
@@ -1952,7 +1952,7 @@ export default {
   }
 
   &__textarea-list {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 14px 16px 4px;
@@ -1975,7 +1975,7 @@ export default {
   }
 
   &__material-card {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     background: #fff;
     border-radius: 6px;
     padding: 14px 16px;
@@ -2016,7 +2016,7 @@ export default {
     margin: 0 0 16px;
     background: #fff;
     border-radius: 6px;
-    padding: 12px;
+    padding: 12px 0;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   }
 

src/views/flow/follow.vue

@@ -21,12 +21,24 @@
         <el-tag>{{ row.suspensionState === 1 ? '激活' : '挂起' }}</el-tag>
       </template>
     </avue-crud>
-    <el-dialog title="流程删除" append-to-body v-model="followBox" width="20%">
+    <el-dialog
-      <el-form :model="form" ref="form" label-width="auto">
+      title="流程删除"
+      append-to-body
+      v-model="followBox"
+      width="400px"
+      class="dialog-form--carded"
+    >
+      <section-card title="删除理由">
+        <el-form :model="form" ref="form" label-position="right" label-width="calc(6em + 24px)">
+          <el-row :gutter="18">
+            <el-col :span="24">
               <el-form-item label="删除理由">
                 <el-input v-model="deleteReason" placeholder="请输入删除理由" />
               </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
+      </section-card>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="followBox = false">关 闭</el-button>

src/views/flow/manager.vue

@@ -81,8 +81,17 @@
         </span>
       </template>
     </el-dialog>
-    <el-dialog title="流程变更" append-to-body v-model="stateBox" width="20%">
+    <el-dialog
-      <el-form :model="form" ref="form" label-width="auto">
+      title="流程变更"
+      append-to-body
+      v-model="stateBox"
+      width="400px"
+      class="dialog-form--carded"
+    >
+      <section-card title="流程状态">
+        <el-form :model="form" ref="form" label-position="right" label-width="calc(6em + 24px)">
+          <el-row :gutter="18">
+            <el-col :span="24">
               <el-form-item label="流程状态">
                 <el-select v-model="flowState" placeholder="请选择" value="">
                   <el-option
@@ -94,7 +103,10 @@
                   </el-option>
                 </el-select>
               </el-form-item>
+            </el-col>
+          </el-row>
         </el-form>
+      </section-card>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="stateBox = false">关 闭</el-button>

src/views/system/authlock.vue

@@ -61,11 +61,28 @@
   </el-drawer>
 
   <!-- 手动锁定用户 -->
-  <el-dialog title="锁定用户" append-to-body v-model="lockUserBox" width="500px">
+  <el-dialog
-    <el-form :model="lockUserForm" label-width="auto" :rules="lockUserRules" ref="lockUserFormRef">
+    title="锁定用户"
+    append-to-body
+    v-model="lockUserBox"
+    width="520px"
+    class="dialog-form--carded"
+  >
+    <section-card title="锁定信息">
+      <el-form
+        :model="lockUserForm"
+        label-position="right"
+        label-width="calc(6em + 24px)"
+        :rules="lockUserRules"
+        ref="lockUserFormRef"
+      >
+        <el-row :gutter="18">
+          <el-col :span="24">
             <el-form-item label="用户账号">
               <el-input :model-value="lockUserForm.account" disabled />
             </el-form-item>
+          </el-col>
+          <el-col :span="24">
             <el-form-item label="锁定原因" prop="lockReason">
               <el-input
                 v-model="lockUserForm.lockReason"
@@ -74,25 +91,30 @@
                 placeholder="请输入锁定原因"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="24">
             <el-form-item label="锁定开始" prop="lockBeginTime">
               <el-date-picker
                 v-model="lockUserForm.lockBeginTime"
                 type="datetime"
                 placeholder="不填则立即生效"
                 value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 100%"
               />
             </el-form-item>
+          </el-col>
+          <el-col :span="24">
             <el-form-item label="锁定结束" prop="lockEndTime">
               <el-date-picker
                 v-model="lockUserForm.lockEndTime"
                 type="datetime"
                 placeholder="不填则永久锁定"
                 value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 100%"
               />
             </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+    </section-card>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="lockUserBox = false">取 消</el-button>
@@ -102,8 +124,21 @@
   </el-dialog>
 
   <!-- 解锁原因确认 -->
-  <el-dialog title="解锁确认" append-to-body v-model="unlockReasonBox" width="450px">
+  <el-dialog
-    <el-form :model="unlockReasonForm" label-width="auto">
+    title="解锁确认"
+    append-to-body
+    v-model="unlockReasonBox"
+    width="520px"
+    class="dialog-form--carded"
+  >
+    <section-card title="解锁原因">
+      <el-form
+        :model="unlockReasonForm"
+        label-position="right"
+        label-width="calc(6em + 24px)"
+      >
+        <el-row :gutter="18">
+          <el-col :span="24">
             <el-form-item label="解锁原因">
               <el-input
                 v-model="unlockReasonForm.unlockReason"
@@ -112,7 +147,10 @@
                 placeholder="请输入解锁原因（可选）"
               />
             </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+    </section-card>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="unlockReasonBox = false">取 消</el-button>

src/views/system/param.vue

@@ -126,37 +126,55 @@
       <el-dialog
         :title="title"
         v-model="box"
-        width="50%"
+        width="560px"
         :before-close="beforeClose"
         append-to-body
+        class="dialog-form--carded"
       >
-        <el-form :disabled="view" ref="form" :model="form" label-width="auto">
+        <section-card title="参数信息">
-          <!-- 表单字段 -->
+          <el-form
-          <el-form-item label="参数名:" prop="paramName">
+            :disabled="view"
+            ref="form"
+            :model="form"
+            label-position="right"
+            label-width="calc(6em + 24px)"
+          >
+            <el-row :gutter="18">
+              <el-col :span="24">
+                <el-form-item label="参数名" prop="paramName">
                   <el-input v-model="form.paramName" placeholder="请输入参数名" />
                 </el-form-item>
+              </el-col>
+              <el-col :span="24">
                 <el-form-item prop="paramKey">
                   <template #label>
                     <el-tooltip content="参数键为系统内部唯一标识，请勿随意修改" placement="top">
                       <el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
                     </el-tooltip>
-              <span>参数键:</span>
+                    <span>参数键</span>
                   </template>
                   <el-input v-model="form.paramKey" placeholder="请输入参数键" />
                 </el-form-item>
+              </el-col>
+              <el-col :span="24">
                 <el-form-item prop="paramValue">
                   <template #label>
                     <el-tooltip content="包含敏感关键词的配置不展示具体数值" placement="top">
                       <el-icon style="margin-right: 4px; vertical-align: middle; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
                     </el-tooltip>
-              <span>参数值:</span>
+                    <span>参数值</span>
                   </template>
                   <el-input v-model="form.paramValue" placeholder="请输入参数值" />
                 </el-form-item>
-          <el-form-item label="备注:" prop="remark">
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注" prop="remark">
                   <el-input v-model="form.remark" placeholder="请输入备注" />
                 </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
+        </section-card>
         <!-- 表单按钮 -->
         <template #footer>
           <span v-if="!view" class="dialog-footer">

src/views/system/user.vue

@@ -181,27 +181,29 @@
           top="5vh"
           append-to-body
           destroy-on-close
-          class="user-edit-dialog"
+          class="user-edit-dialog dialog-form--carded"
         >
           <template #header>
             <span class="dialog-title">{{ userDialogMode === 'add' ? '新增用户' : '编辑用户' }}</span>
           </template>
-          <el-form ref="userFormRef" :model="form" :rules="userRules" label-position="right" label-width="120px">
+          <section-card title="用户信息">
-            <el-row :gutter="20">
+            <el-form ref="userFormRef" :model="form" :rules="userRules" label-position="right" label-width="calc(6em + 24px)">
+              <el-row :gutter="18">
                 <el-col :span="6"><el-form-item label="账号名" prop="account"><el-input v-model="form.account" /></el-form-item></el-col>
                 <el-col :span="6"><el-form-item label="姓名" prop="realName"><el-input v-model="form.realName" /></el-form-item></el-col>
                 <el-col :span="6"><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item></el-col>
                 <el-col :span="6"><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-col>
-              <el-col :span="6"><el-form-item label="性别"><el-select v-model="form.sex" class="full-width"><el-option label="男" :value="1" /><el-option label="女" :value="2" /><el-option label="未知" :value="3" /></el-select></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="性别"><el-select v-model="form.sex"><el-option label="男" :value="1" /><el-option label="女" :value="2" /><el-option label="未知" :value="3" /></el-select></el-form-item></el-col>
-              <el-col :span="6"><el-form-item label="岗位" prop="postId"><el-tree-select v-model="form.postId" :data="postList" :props="{ label: 'postName', value: 'id' }" check-strictly class="full-width" /></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="岗位" prop="postId"><el-tree-select v-model="form.postId" :data="postList" :props="{ label: 'postName', value: 'id' }" check-strictly /></el-form-item></el-col>
-              <el-col :span="6"><el-form-item label="所属组织" prop="deptId"><el-tree-select v-model="form.deptId" :data="permissionDeptTree" :props="{ label: 'title', value: 'id' }" multiple check-strictly show-checkbox class="full-width" /></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="所属组织" prop="deptId"><el-tree-select v-model="form.deptId" :data="permissionDeptTree" :props="{ label: 'title', value: 'id' }" multiple check-strictly show-checkbox /></el-form-item></el-col>
                 <el-col :span="6"><el-form-item label="工号"><el-input v-model="form.code" /></el-form-item></el-col>
-              <el-col :span="6"><el-form-item label="人员类别"><el-select v-model="form.personCategory" class="full-width"><el-option label="内部员工" :value="1" /><el-option label="承运商" :value="2" /></el-select></el-form-item></el-col>
+                <el-col :span="6"><el-form-item label="人员类别"><el-select v-model="form.personCategory"><el-option label="内部员工" :value="1" /><el-option label="承运商" :value="2" /></el-select></el-form-item></el-col>
                 <el-col :span="18"><el-form-item label="数据权限范围"><el-radio-group v-model="form.dataScopeRange"><el-radio :value="1">仅所属组织</el-radio><el-radio :value="2">全部组织</el-radio><el-radio :value="3">自定义</el-radio></el-radio-group></el-form-item></el-col>
                 <el-col :span="18" :offset="6"><el-form-item label="数据层级范围"><el-radio-group v-model="form.dataLevelRange"><el-radio :value="1">包含下级</el-radio><el-radio :value="2">仅本级</el-radio></el-radio-group></el-form-item></el-col>
                 <el-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="200" show-word-limit /></el-form-item></el-col>
               </el-row>
             </el-form>
+          </section-card>
           <el-tabs class="user-permission-tabs">
             <el-tab-pane label="已拥有角色">
               <el-table :data="formRoleList" border>
@@ -288,23 +290,40 @@
         </el-dialog>
 
         <!-- 管理员修改密码 -->
-        <el-dialog title="修改密码" append-to-body v-model="passwordBox" width="460px">
+        <el-dialog
+          title="修改密码"
+          append-to-body
+          v-model="passwordBox"
+          width="520px"
+          class="dialog-form--carded"
+        >
+          <section-card title="密码信息">
             <el-form
               ref="passwordFormRef"
               :model="passwordForm"
               :rules="passwordRules"
-            label-width="auto"
+              label-position="right"
+              label-width="calc(6em + 24px)"
             >
+              <el-row :gutter="18">
+                <el-col :span="24">
                   <el-form-item label="账号名">
                     <el-input v-model="passwordForm.account" disabled />
                   </el-form-item>
+                </el-col>
+                <el-col :span="24">
                   <el-form-item label="新密码" prop="password">
                     <el-input v-model="passwordForm.password" type="password" show-password />
                   </el-form-item>
+                </el-col>
+                <el-col :span="24">
                   <el-form-item label="确认密码" prop="password2">
                     <el-input v-model="passwordForm.password2" type="password" show-password />
                   </el-form-item>
+                </el-col>
+              </el-row>
             </el-form>
+          </section-card>
           <template #footer>
             <span class="dialog-footer">
               <el-button @click="passwordBox = false">取 消</el-button>

vite.config.mjs

@@ -50,26 +50,26 @@ export default ({
       __VUE_I18N_LEGACY_API__: true,
       __INTLIFY_PROD_DEVTOOLS__: false,
     },
-    server: {
-      port: 2888,
-      proxy: {
-        '/api': {
-          target: 'http://localhost',
-          //target: 'https://saber3.bladex.cn/api',
-          changeOrigin: true,
-          rewrite: path => path.replace(/^\/api/, ''),
-        },
-      },
-    },
     // server: {
     //   port: 2888,
     //   proxy: {
     //     '/api': {
-    //       target: 'http://172.16.203.228:8000',
+    //       target: 'http://localhost',
+    //       //target: 'https://saber3.bladex.cn/api',
     //       changeOrigin: true,
+    //       rewrite: path => path.replace(/^\/api/, ''),
     //     },
     //   },
     // },
+    server: {
+      port: 2889,
+      proxy: {
+        '/api': {
+          target: 'http://172.16.203.228:8000',
+          changeOrigin: true,
+        },
+      },
+    },
     resolve: {
       alias: {
         '~': resolve(__dirname, './'),