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

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

src/views/payment/receipt-claim-record.vue

@@ -1,6 +1,6 @@
 <template>
   <basic-container class="claim-record-page">
-    <section-card class="claim-record-page__search">
+    <section-card v-if="searchVisible" class="claim-record-page__search">
       <el-form :model="query" label-position="right" label-width="88px" @submit.prevent>
         <div class="claim-record-page__search-grid">
           <el-form-item label="认领通知单">
@@ -80,10 +80,19 @@
     </section-card>
 
     <section class="claim-record-page__table-panel">
-      <el-table v-loading="loading" :data="rows" border>
+      <div class="claim-record-page__toolbar">
+        <table-header-tools
+          :columns="columns"
+          v-model:visible-column-keys="visibleColumnKeys"
+          v-model:table-size="tableSize"
+          v-model:search-visible="searchVisible"
+          @refresh="loadTable"
+        />
+      </div>
+      <el-table v-loading="loading" :data="rows" :size="tableSize" border>
         <el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
         <el-table-column
-          v-for="column in columns"
+          v-for="column in visibleColumns"
           :key="column.prop"
           v-bind="column"
           align="center"
@@ -138,6 +147,7 @@ import { mapGetters } from 'vuex';
 import * as api from '@/api/payment/receiptClaimRecord';
 import { receiptClaimRecordTableColumns } from '@/option/payment/receiptClaimRecord';
 import SectionCard from '@/components/section-card/main.vue';
+import TableHeaderTools from '@/components/table-header-tools/main.vue';
 import { isAdministrator } from '@/utils/auth';
 
 const emptyQuery = () => ({
@@ -156,16 +166,19 @@ const emptyQuery = () => ({
 
 export default {
   name: 'ReceiptClaimRecord',
-  components: { SectionCard },
+  components: { SectionCard, TableHeaderTools },
   data() {
     return {
       ArrowDown,
       ArrowUp,
       query: emptyQuery(),
       searchExpanded: false,
+      searchVisible: true,
+      tableSize: 'default',
       claimStatusOptions: api.claimStatusOptions,
       kingdeeBillStatusOptions: api.kingdeeBillStatusOptions,
       columns: receiptClaimRecordTableColumns,
+      visibleColumnKeys: receiptClaimRecordTableColumns.map(column => column.prop),
       rows: [],
       loading: false,
       page: { current: 1, size: 10, total: 0 },
@@ -173,6 +186,9 @@ export default {
   },
   computed: {
     ...mapGetters(['permission', 'userInfo']),
+    visibleColumns() {
+      return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
+    },
     isAdmin() {
       return isAdministrator(this.userInfo);
     },
@@ -279,6 +295,12 @@ export default {
 .claim-record-page__table-panel {
   margin-top: 8px;
 }
+.claim-record-page__toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 12px 0;
+}
 .claim-record-page__pagination {
   display: flex;
   justify-content: flex-end;