From b0304fd87504b45d043c54bf2782f578f426639c Mon Sep 17 00:00:00 2001
From: Ran_Chen <1908198662@qq.com>
Date: Thu, 27 Mar 2025 11:54:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E2=80=9C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E2=80=9D=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddModelDialog.vue         | 177 +++++++++---------
 1 file changed, 90 insertions(+), 87 deletions(-)

diff --git a/main/manager-web/src/components/AddModelDialog.vue b/main/manager-web/src/components/AddModelDialog.vue
index f8370a5f..074be175 100644
--- a/main/manager-web/src/components/AddModelDialog.vue
+++ b/main/manager-web/src/components/AddModelDialog.vue
@@ -1,16 +1,25 @@
 <template>
   <el-dialog
       :visible.sync="visible"
-      width="1000px"
+      width="975px"
       center
       custom-class="custom-dialog"
       :show-close="false"
+      class="center-dialog"
+
   >
-    <div style="margin: 0 30px 20px; text-align: left; padding: 20px; border-radius: 10px;">
-      <div style="font-size: 27px; color: #3d4566; margin-bottom: 15px; text-align: center;">添加模型</div>
+    <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
+      <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
+        添加模型
+      </div>
+
+      <!-- 关闭按钮 -->
+      <button class="custom-close-btn" @click="handleClose">
+        ×
+      </button>
 
       <!-- 模型信息部分 -->
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
         <div style="font-size: 20px; font-weight: bold; color: #3d4566;">模型信息</div>
         <div style="display: flex; align-items: center; gap: 20px;">
           <div style="display: flex; align-items: center;">
@@ -24,35 +33,35 @@
         </div>
       </div>
 
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
+      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
 
       <el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
         <!-- 第一行：模型名称和模型编码 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
-          <el-form-item label="模型名称" prop="modelName" style="flex: 1; margin-bottom: 0;">
+        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+          <el-form-item label="模型名称" prop="modelName" style="flex: 1;">
             <el-input
-              v-model="formData.modelName"
-              placeholder="请输入模型名称"
-              class="custom-input-bg"
+                v-model="formData.modelName"
+                placeholder="请输入模型名称"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
-          <el-form-item label="模型编码" prop="modelCode" style="flex: 1; margin-bottom: 0;">
+          <el-form-item label="模型编码" prop="modelCode" style="flex: 1;">
             <el-input
-              v-model="formData.modelCode"
-              placeholder="请输入模型编码"
-              class="custom-input-bg"
+                v-model="formData.modelCode"
+                placeholder="请输入模型编码"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 第二行：供应器和排序号 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
-          <el-form-item label="供应器" prop="supplier" style="flex: 1; margin-bottom: 0;">
+        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+          <el-form-item label="供应器" prop="supplier" style="flex: 1;">
             <el-select
-              v-model="formData.supplier"
-              placeholder="请选择"
-              class="custom-select custom-input-bg"
-              style="width: 100%;"
+                v-model="formData.supplier"
+                placeholder="请选择"
+                class="custom-select custom-input-bg"
+                style="width: 100%;"
             >
               <el-option label="硅基流动" value="硅基流动"></el-option>
               <el-option label="智脑科技" value="智脑科技"></el-option>
@@ -60,26 +69,26 @@
               <el-option label="其他" value="其他"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="排序号" prop="sortOrder" style="flex: 1; margin-bottom: 0;">
+          <el-form-item label="排序号" prop="sortOrder" style="flex: 1;">
             <el-input
-              v-model="formData.sort"
-              placeholder="请输入排序号"
-              class="custom-input-bg"
+                v-model="formData.sort"
+                placeholder="请输入排序号"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 文档地址 -->
-        <el-form-item label="文档地址" prop="docLink" style="margin-bottom: 15px;">
+        <el-form-item label="文档地址" prop="docLink" style="margin-bottom: 27px;">
           <el-input
-            v-model="formData.docLink"
-            placeholder="请输入文档地址"
-            class="custom-input-bg"
+              v-model="formData.docLink"
+              placeholder="请输入文档地址"
+              class="custom-input-bg"
           ></el-input>
         </el-form-item>
 
         <!-- 备注 -->
-        <el-form-item label="备注" prop="remark" style="margin-bottom: 15px;">
+        <el-form-item label="备注" prop="remark" class="prop-remark">
           <el-input
               v-model="formData.remark"
               type="textarea"
@@ -92,29 +101,29 @@
 
       <!-- 调用信息部分 -->
       <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
+      <div style="height: 2px; background: #e9e9e9; margin-bottom: 15px;"></div>
 
       <el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
         <!-- 第一行：模型名称和接口地址 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
+        <div style="display: flex; gap: 10px; margin-bottom: 15px;">
           <el-form-item label="模型名称" prop="param1" style="flex: 0.5; margin-bottom: 0;">
             <el-input
-              v-model="formData.configJson.param1"
-              placeholder="请输入model_name"
-              class="custom-input-bg"
+                v-model="formData.configJson.param1"
+                placeholder="请输入model_name"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
           <el-form-item label="接口地址" prop="param2" style="flex: 1; margin-bottom: 0;">
             <el-input
-              v-model="formData.configJson.param2"
-              placeholder="请输入base_url"
-              class="custom-input-bg"
+                v-model="formData.configJson.param2"
+                placeholder="请输入base_url"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 秘钥信息 -->
-        <el-form-item label="秘钥信息" prop="apiKey" style="margin-bottom: 15px;">
+        <el-form-item label="秘钥信息" prop="apiKey">
           <el-input
               v-model="formData.configJson.apiKey"
               placeholder="请输入api_key"
@@ -126,7 +135,7 @@
     </div>
 
     <!-- 保存按钮 -->
-    <div style="display: flex; margin: 20px 0; justify-content: center;">
+    <div style="display: flex;justify-content: center;">
       <el-button
           type="primary"
           @click="confirm"
@@ -135,12 +144,6 @@
         保存
       </el-button>
     </div>
-
-    <!-- 关闭按钮 -->
-    <!-- 修改关闭按钮 -->
-    <button class="custom-close-btn" @click="handleClose">
-      ×
-    </button>
   </el-dialog>
 </template>
 
@@ -216,6 +219,7 @@ export default {
   border-radius: 20px;
   overflow: hidden;
   background: white;
+  padding-bottom: 17px;
 }
 
 .custom-dialog .el-dialog__header {
@@ -223,6 +227,18 @@ export default {
   border-bottom: none;
 }
 
+.center-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.center-dialog .el-dialog {
+  margin: 4% 0 auto !important;
+  display: flex;
+  flex-direction: column;
+}
+
 .custom-close-btn {
   position: absolute;
   top: 20px;
@@ -249,19 +265,15 @@ export default {
   border-color: #409EFF;
 }
 
-.custom-select .el-input__inner {
-  padding-right: 30px !important;
-}
-
 .custom-select .el-input__suffix {
   background: #e6e8ea;
-  right: 7px;
-  width: 24px;
-  height: 24px;
+  right: 6px;
+  width: 20px;
+  height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
-  top: 7px;
+  top: 9px;
 }
 
 .custom-select .el-input__suffix-inner {
@@ -276,42 +288,34 @@ export default {
   display: inline-block;
   width: 0;
   height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 8px solid #c0c4cc;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 7px solid #c0c4cc;
   position: relative;
-  top: -1px;
+  top: -2px;
   transform: rotate(180deg);
 }
 
-.custom-select .el-select .el-input .el-select__caret {
-  color: #c0c4cc;
-  font-size: 14px;
-  transition: transform .3s;
-  transform: rotateZ(0deg);
-  cursor: pointer;
-}
-
-.custom-select .el-select .el-input.is-focus .el-icon-arrow-up:before {
-  transform: rotateZ(180deg);
-}
-
-/* 表单样式调整 */
 .custom-form .el-form-item {
-  margin-bottom: 0;
+  margin-bottom: 20px; /* 统一设置所有表单项的间距 */
 }
 
 .custom-form .el-form-item__label {
   color: #3d4566;
   font-weight: normal;
   text-align: right;
-  padding-right: 15px;
+  padding-right: 20px;
+
+}
+
+.custom-form .el-form-item.prop-remark .el-form-item__label {
+  margin-top: -4px;
 }
 
 /* 修改placeholder颜色 */
 .custom-input-bg .el-input__inner::-webkit-input-placeholder,
 .custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
-  color: #9c9f9e ;
+  color: #9c9f9e;
 }
 
 /* 输入框背景色 */
@@ -320,16 +324,6 @@ export default {
   background-color: #f6f8fc;
 }
 
-.custom-form .el-input__inner,
-.custom-form .el-textarea__inner {
-  border-radius: 4px;
-  border: 1px solid #DCDFE6;
-}
-
-.custom-form .el-input__inner:focus,
-.custom-form .el-textarea__inner:focus {
-  border-color: #409EFF;
-}
 
 .save-btn {
   background: #e6f0fd;
@@ -347,10 +341,6 @@ export default {
   border: none;
 }
 
-/* 修复select宽度问题 */
-.el-select {
-  display: block;
-}
 
 /* 修改开关样式 */
 .custom-switch .el-switch__core {
@@ -381,4 +371,17 @@ export default {
   margin-left: -18px;
   background-color: #1b47ee;
 }
+
+
+/* 调整flex布局的gap */
+[style*="display: flex"] {
+  gap: 20px; /* 扩大flex项间距 */
+}
+
+/* 调整输入框高度 */
+.custom-input-bg .el-input__inner {
+  height: 32px; /* 固定输入框高度 */
+}
+
+
 </style>
\ No newline at end of file