style(contract): 优化合同管理页面表单样式与布局

- 调整合同管理备注输入框行数和最大长度
- 细化合同变更页面表单项间距和对齐方式
- 统一弹窗表单项的底部间距样式，改为注释禁用
- 调整 port-terminal 和 region 组件的表单项底部间距
- 修改 vite 配置中 API 请求代理地址
- 优化凭证执行详情搜索表单列宽布局
- 在运单管理页面更新型号字段为非必填，调整变更记录内容格式化显示
- 引入并使用 formatRouteChangeContent 工具函数
- 统一明细按钮显示逻辑，草稿状态也显示详情按钮
- 新增路由变更相关工具函数与样式支持

src/views/settlement/components/formal-settlement-editor.vue

@@ -175,6 +175,17 @@
       <section-card title="结算明细">
         <template #extra>
           <div class="formal-editor__actions">
+            <el-button
+              v-if="hasPermission('formal_settlement_export')"
+              type="primary"
+              plain
+              @click="exportDetails"
+            >
+              导出
+            </el-button>
+            <el-button v-if="editable" type="primary" plain @click="openDetailDialog">
+              选择结算明细
+            </el-button>
             <el-button type="primary" text @click="detailCollapsed = !detailCollapsed">
               {{ detailCollapsed ? '展开明细' : '收起明细' }}
             </el-button>
@@ -182,33 +193,46 @@
         </template>
         <el-form
           :model="detailQuery"
-          inline
           label-position="right"
-          label-width="88px"
+          label-width="auto"
           class="formal-editor__detail-filter"
           @submit.prevent
         >
           <el-form-item label="单据号">
-            <el-input v-model="detailQuery.documentNo" clearable @keyup.enter="handleDetailQuery" />
+            <el-input
+              v-model="detailQuery.documentNo"
+              clearable
+              placeholder="请输入"
+              @keyup.enter="handleDetailQuery"
+            />
           </el-form-item>
           <el-form-item label="运单号">
-            <el-input v-model="detailQuery.waybillNo" clearable @keyup.enter="handleDetailQuery" />
+            <el-input
+              v-model="detailQuery.waybillNo"
+              clearable
+              placeholder="请输入"
+              @keyup.enter="handleDetailQuery"
+            />
           </el-form-item>
           <el-form-item label="批次号">
-            <el-input v-model="detailQuery.batchNo" clearable @keyup.enter="handleDetailQuery" />
+            <el-input
+              v-model="detailQuery.batchNo"
+              clearable
+              placeholder="请输入"
+              @keyup.enter="handleDetailQuery"
+            />
           </el-form-item>
           <el-form-item label="货物名称">
-            <el-input v-model="detailQuery.cargoName" clearable @keyup.enter="handleDetailQuery" />
+            <el-input
+              v-model="detailQuery.cargoName"
+              clearable
+              placeholder="请输入"
+              @keyup.enter="handleDetailQuery"
+            />
           </el-form-item>
           <el-form-item class="formal-editor__detail-filter-actions">
             <el-button type="primary" @click="handleDetailQuery">查询</el-button>
             <el-button @click="resetDetailQuery">重置</el-button>
-            <el-button type="primary" :disabled="!details.length" @click="exportDetails">
-              导出
-            </el-button>
-            <el-button v-if="editable" type="primary" @click="openDetailDialog">
-              选择结算明细
-            </el-button>
           </el-form-item>
         </el-form>
         <el-table v-show="!detailCollapsed" :data="pagedDetails" border>
@@ -991,6 +1015,7 @@ import { mapGetters } from 'vuex';
 import { formatContractOptionLabel } from '@/utils/contract';
 import { downloadFileByUrl } from '@/utils/util';
 import * as XLSX from 'xlsx';
+import { isAdministrator } from '@/utils/auth';
 
 export default {
   name: 'FormalSettlementEditor',
@@ -1126,7 +1151,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['userInfo']),
+    ...mapGetters(['permission', 'userInfo']),
     visible: {
       get() {
         return this.modelValue;
@@ -1154,6 +1179,9 @@ export default {
     editable() {
       return !this.readonly;
     },
+    isAdmin() {
+      return isAdministrator(this.userInfo);
+    },
     title() {
       return this.readonly ? '查看正式结算单' : this.recordId ? '编辑正式结算单' : '新增正式结算单';
     },
@@ -1225,6 +1253,9 @@ export default {
   },
   methods: {
     formatContractOptionLabel,
+    hasPermission(code) {
+      return this.isAdmin || this.validData(this.permission?.[code], false);
+    },
     async loadFormalDetail(id) {
       const response = this.publicMode
         ? await getMkPublicDetail('formal-settlement', id)
@@ -2829,20 +2860,24 @@ export default {
 }
 .formal-editor__actions {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 8px;
 }
 .formal-editor__detail-filter {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
+  align-items: center;
   gap: 8px 16px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
   padding: 12px 12px 4px;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 .formal-editor__detail-filter-actions {
-  grid-column: 1 / -1;
+  width: auto;
+  margin-left: 0;
+  white-space: nowrap;
   justify-self: end;
 }
 .formal-editor__page-actions {
@@ -2965,9 +3000,29 @@ export default {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
+/* 结算明细筛选区：覆盖全局 el-form-item 24px 行距，保证筛选控件与「查询/重置」同行居中对齐 */
+.formal-editor__detail-filter :deep(.el-form-item) {
+  display: flex;
+  min-width: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+}
+.formal-editor__detail-filter :deep(.el-form-item__content) {
+  flex: 1;
+  min-width: 0;
+}
+.formal-editor__detail-filter :deep(.el-input) {
+  width: 100%;
+}
+.formal-editor__detail-filter-actions :deep(.el-form-item__content) {
+  flex: none;
+  justify-content: flex-end;
+  flex-wrap: nowrap;
+}
+
 @media (max-width: 1200px) {
   .formal-editor__detail-filter {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
   }
 }
 </style>