fix(template): 模板弹窗改宽并修复合并配置与桌面布局

- 弹窗宽度 720 → 980，去掉硬编码宽度覆盖
- 合并配置改为单行横排，标签按文字宽度自适应并缩小间距
- 移除弹窗内全部渐变，左侧蓝条改为 28px 纯色并垂直居中
- 移动端单列样式限定在 ≤992px，桌面恢复双列表头识别项
- 每页条数选项统一为「20条/页」格式

ai-electron/frontend/src/case/views/data/components/CaseTemplateLibraryModal.vue

@@ -34,7 +34,7 @@
     :confirmLoading="templateCreateSaving"
     :closable="true"
     :centered="true"
-    width="720px"
+    width="980px"
     wrapClassName="case-template-create-modal"
     @ok="handleTemplateCreateSave"
     @cancel="handleTemplateCreateCancel"
@@ -1754,7 +1754,10 @@
     ],
   };
   const templateRows = ref<any[]>([]);
-  const templatePageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({ label: value, value }));
+  const templatePageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
+    label: `${value}条/页`,
+    value: Number(value),
+  }));
   const templatePagination = ref({
     page: 1,
     limit: componentSetting.table.defaultPageSize,
@@ -1943,7 +1946,7 @@
 
   .case-template-create-modal {
     .ant-modal {
-      width: min(720px, calc(100vw - 48px)) !important;
+      width: min(980px, calc(100vw - 48px)) !important;
       top: 56px;
     }
 
@@ -1976,7 +1979,7 @@
       min-height: 0;
       overflow-y: auto;
       padding: 16px;
-      background: linear-gradient(180deg, #f8fbff 0%, #ffffff 112px);
+      background: #f8fbff;
       overscroll-behavior: contain;
 
       &::-webkit-scrollbar {
@@ -2017,7 +2020,7 @@
       justify-content: center;
       border-radius: 9px;
       color: #fff;
-      background: linear-gradient(135deg, #316dff 0%, #4f8bff 100%);
+      background: #316dff;
       box-shadow: 0 10px 20px rgba(49, 109, 255, 0.22);
 
       .jeesite-icon {
@@ -2037,18 +2040,19 @@
       padding: 14px 16px 14px 18px;
       border: 1px solid #deebff;
       border-radius: 14px;
-      background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 72%);
+      background: #f5f9ff;
       box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
 
       &::before {
         content: '';
         position: absolute;
         left: 0;
-        top: 14px;
-        bottom: 14px;
+        top: 50%;
         width: 4px;
+        height: 28px;
         border-radius: 999px;
-        background: linear-gradient(180deg, #5b8cff 0%, #2f65f5 100%);
+        background: #2f65f5;
+        transform: translateY(-50%);
       }
     }
 
@@ -2211,7 +2215,7 @@
     .template-header-builder {
       border: 1px solid #dce6f3;
       border-radius: 14px;
-      background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
+      background: #f9fbff;
       padding: 8px 10px;
       display: flex;
       flex-direction: column;
@@ -2248,7 +2252,7 @@
       &.is-merge-disabled {
         .template-header-builder__preview {
           border-color: #d7e4f3;
-          background: linear-gradient(180deg, #f6f8fb 0%, #edf2f7 100%);
+          background: #f6f8fb;
           color: #64748b;
         }
       }
@@ -2260,7 +2264,7 @@
       padding: 0 10px;
       border: 1px solid #dce5f1;
       border-radius: 8px;
-      background: linear-gradient(180deg, #f6f9fd 0%, #eef3f8 100%);
+      background: #f6f9fd;
       color: #334155;
       font-size: 13px;
       font-weight: 600;
@@ -2271,7 +2275,7 @@
 
       &.is-required {
         border-color: #f6c7c7;
-        background: linear-gradient(180deg, #fff7f7 0%, #fff1f1 100%);
+        background: #fff7f7;
       }
     }
 
@@ -2357,7 +2361,7 @@
       padding: 0 10px;
       border: 1px solid #dce5f1;
       border-radius: 8px;
-      background: linear-gradient(180deg, #f8fbff 0%, #f2f7fd 100%);
+      background: #f8fbff;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -2451,7 +2455,7 @@
     .template-create-merge-panel {
       border: 1px solid #dce6f3;
       border-radius: 14px;
-      background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
+      background: #f9fbff;
       padding: 12px;
     }
 
@@ -2553,7 +2557,7 @@
       width: 48px;
       height: 40px;
       border-radius: 10px;
-      background: linear-gradient(180deg, #f6f9fd 0%, #eef4ff 100%);
+      background: #eef4ff;
       color: #315efb;
       font-size: 13px;
       font-weight: 700;
@@ -2571,25 +2575,35 @@
     .template-create-merge-field {
       min-width: 0;
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
+      align-items: center;
       gap: 6px;
     }
 
     .template-create-merge-field__label {
+      flex: 0 0 auto;
       color: #64748b;
       font-size: 12px;
       font-weight: 600;
       line-height: 1.4;
+      white-space: nowrap;
+    }
+
+    .template-create-merge-field .ant-input {
+      flex: 1 1 auto;
+      min-width: 0;
     }
 
     .template-create-merge-field__readonly {
       display: flex;
+      flex: 1 1 auto;
       align-items: center;
+      min-width: 0;
       min-height: 32px;
       padding: 0 12px;
       border: 1px solid #d7e4f3;
       border-radius: 8px;
-      background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
+      background: #f8fbff;
       color: #1f2937;
       font-size: 13px;
       font-weight: 500;
@@ -2658,66 +2672,69 @@
     z-index: 1200 !important;
   }
 
-  .case-template-create-modal {
-    .template-create-intro {
-      padding-left: 12px;
-      padding-right: 12px;
-    }
+  /* 窄屏（≤992px）才切换为堆叠布局；桌面保持双列，避免宽弹窗把表单拉成长条 */
+  @media screen and (max-width: 992px) {
+    .case-template-create-modal {
+      .template-create-intro {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
 
-    .template-create-row {
-      grid-template-columns: 1fr;
-      gap: 6px;
-    }
+      .template-create-row {
+        grid-template-columns: 1fr;
+        gap: 6px;
+      }
 
-    .template-create-label {
-      text-align: left;
-      line-height: 1.6;
-    }
+      .template-create-label {
+        text-align: left;
+        line-height: 1.6;
+      }
 
-    .template-create-field-head {
-      align-items: flex-start;
-      flex-wrap: wrap;
-    }
+      .template-create-field-head {
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
 
-    .template-header-builder__head {
-      display: none;
-    }
+      .template-header-builder__head {
+        display: none;
+      }
 
-    .template-header-builder__row {
-      grid-template-columns: 1fr;
-      gap: 8px;
-    }
+      .template-header-builder__row {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
 
-    .template-header-builder__direction-config,
-    .template-header-builder__direction-main,
-    .template-header-builder__source-config {
-      grid-template-columns: 1fr;
-    }
+      .template-header-builder__direction-config,
+      .template-header-builder__direction-main,
+      .template-header-builder__source-config {
+        grid-template-columns: 1fr;
+      }
 
-    .template-create-merge-head {
-      align-items: flex-start;
-      flex-wrap: wrap;
-    }
+      .template-create-merge-head {
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
 
-    .template-create-merge-actions {
-      width: auto;
-      justify-content: flex-end;
-    }
+      .template-create-merge-actions {
+        width: auto;
+        justify-content: flex-end;
+      }
 
-    .template-create-merge-item {
-      grid-template-columns: 1fr;
-      gap: 10px;
-    }
+      .template-create-merge-item {
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
 
-    .template-create-merge-item__index {
-      width: 100%;
-      justify-content: flex-start;
-      padding: 0 12px;
-    }
+      .template-create-merge-item__index {
+        width: 100%;
+        justify-content: flex-start;
+        padding: 0 12px;
+      }
 
-    .template-create-merge-item__content {
-      grid-template-columns: 1fr;
-      gap: 10px;
+      .template-create-merge-item__content {
+        grid-template-columns: 1fr;
+        gap: 10px;
+      }
     }
   }
 </style>