From 51c270fb2999a1691a5e7e2830b7d4128b1f4ad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E6=9F=AF?=
 <10691891+qing_ke@user.noreply.gitee.com>
Date: Fri, 25 Apr 2025 03:06:22 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A8=A1=E5=9E=8B=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package-lock.json             |  65 ++++-
 web/src/views/ChatPlus.vue        | 432 +++++++++++++++++++++++++++++-
 web/src/views/Index.vue           |  23 +-
 web/src/views/admin/ChatModel.vue |  26 +-
 4 files changed, 518 insertions(+), 28 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 90514b12..82dd37b7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,8 +8,12 @@
       "name": "geekai-web",
       "version": "0.1.0",
       "dependencies": {
+        "@better-scroll/core": "^2.5.1",
+        "@better-scroll/mouse-wheel": "^2.5.1",
+        "@better-scroll/observe-dom": "^2.5.1",
+        "@better-scroll/pull-up": "^2.5.1",
+        "@better-scroll/scroll-bar": "^2.5.1",
         "@element-plus/icons-vue": "^2.3.1",
-        "@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
         "animate.css": "^4.1.1",
         "axios": "^0.27.2",
         "clipboard": "^2.0.11",
@@ -35,7 +39,6 @@
         "qs": "^6.11.1",
         "sortablejs": "^1.15.0",
         "three": "^0.128.0",
-        "v3-waterfall": "^1.3.3",
         "vant": "^4.5.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.15",
@@ -1728,6 +1731,51 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@better-scroll/core": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/core/-/core-2.5.1.tgz",
+      "integrity": "sha512-koKOuYA55dQ04FJRIVUpMGDr1hbCfWmfX0MGp1hKagkQSWSRpwblqACiwtggVauoj9aaJRJZ9hDsTM4weaavlg==",
+      "dependencies": {
+        "@better-scroll/shared-utils": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/mouse-wheel": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/mouse-wheel/-/mouse-wheel-2.5.1.tgz",
+      "integrity": "sha512-DGnrirRMY6zMM7xwgx09D/cA9A//3J1/uDkq8iBVEyE5p0sEr/keQpjEfFHGkBRa505BnbBwdbN6f5lugEDSPw==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/observe-dom": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/observe-dom/-/observe-dom-2.5.1.tgz",
+      "integrity": "sha512-TCMGFLRfpXBPIwtUV/efliUmfmrhSNI7NXdSyjdWjsLOS7dh3eFkmcom5ERVWMaXVELSmujGXLqobT+dT0C/jg==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/pull-up": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/pull-up/-/pull-up-2.5.1.tgz",
+      "integrity": "sha512-1hu3xSMxdB8T391KffpNZ7g93lMwZEHjfb1F1Y4KvIkciDt8nXqkGpqrZF+YwR+EJTgYcWqUO8kgmI6XXu7Pkg==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/scroll-bar": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/scroll-bar/-/scroll-bar-2.5.1.tgz",
+      "integrity": "sha512-i6r60pWG/ztkFK2j5Gj54I0LJb2jGh5TWJNQBoW0gUkp28B+0JvBFTwZn9tF7beZCBorKR7Hvvu4O9A1TJy94Q==",
+      "dependencies": {
+        "@better-scroll/core": "^2.5.1"
+      }
+    },
+    "node_modules/@better-scroll/shared-utils": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.5.1.tgz",
+      "integrity": "sha512-AplkfSjXVYP9LZiD6JsKgmgQJ/mG4uuLmBuwLz8W5OsYc7AYTfN8kw6GqZ5OwCGoXkVhBGyd8NeC4xwYItp0aw=="
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -2133,13 +2181,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@openai/realtime-api-beta": {
-      "version": "0.0.0",
-      "resolved": "git+ssh://git@github.com/openai/openai-realtime-api-beta.git#a5cb94824f625423858ebacb9f769226ca98945f",
-      "dependencies": {
-        "ws": "^8.18.0"
-      }
-    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -12711,11 +12752,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/v3-waterfall": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/v3-waterfall/-/v3-waterfall-1.3.3.tgz",
-      "integrity": "sha512-jUmp0xpHGkEcUxaYKGRtI5b2NvogxI/UrfoCLmpTi0UbQndDdqjwufxJvWwiJjwZQyOIPpnq9ZOFtkBwxchq3Q=="
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz",
@@ -13531,6 +13567,7 @@
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
       "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "dev": true,
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 89df83a4..59b3fa12 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -85,12 +85,107 @@
               </el-option>
             </el-select>
 
-            <el-select v-model="modelID" filterable placeholder="模型" @change="_newChat" :disabled="disableModel" style="width: 150px">
-              <el-option v-for="item in models" :key="item.id" :label="item.name" :value="item.id">
-                <span>{{ item.name }}</span>
-                <el-tag style="margin-left: 5px; position: relative; top: -2px" type="info" size="small">{{ item.power }}算力 </el-tag>
-              </el-option>
-            </el-select>
+            <el-popover
+              placement="bottom"
+              :width="800"
+              trigger="click"
+              popper-class="model-selector-popover"
+            >
+              <template #reference>
+                <div class="model-selector-trigger">
+                  <el-button 
+                    type="primary" 
+                    :disabled="disableModel" 
+                    class="adaptive-width-button"
+                  >
+                    <div class="selected-model-display">
+                      <span class="model-name-text">{{ getSelectedModelName() }}</span>
+                      <el-tag v-if="getSelectedModel()" size="small" type="info" style="margin-left: 8px; flex-shrink: 0;">
+                        {{ getSelectedModel()?.power }}算力
+                      </el-tag>
+                    </div>
+                  </el-button>
+                </div>
+              </template>
+              
+              <div class="model-selector-container">
+                <div class="model-search">
+                  <el-input
+                    v-model="modelSearchKeyword"
+                    placeholder="搜索模型"
+                    prefix-icon="el-icon-search"
+                    clearable
+                    style="width: 200px"
+                  />
+                  <el-button 
+                    :type="showFreeModelsOnly ? 'primary' : 'default'" 
+                    size="default" 
+                    @click="toggleFreeModels"
+                    style="margin-left: 10px;"
+                  >
+                    <i class="iconfont icon-free" style="margin-right: 4px;"></i>
+                    免费模型
+                  </el-button>
+                </div>
+                
+                <div class="category-tabs">
+                  <div 
+                    class="category-tab" 
+                    :class="{ 'active': activeCategory === '' }"
+                    @click="activeCategory = ''"
+                  >
+                    全部
+                  </div>
+
+                  <div 
+                    v-for="category in modelCategories" 
+                    :key="category"
+                    class="category-tab"
+                    :class="{ 'active': activeCategory === category }"
+                    @click="activeCategory = category"
+                  >
+                    {{ category }}
+                  </div>
+                  <div 
+                    v-if="activeCategory && modelCategories.length > 0"
+                    class="category-tab reset-filter"
+                    @click="activeCategory = ''"
+                  >
+                    <i class="el-icon-close"></i> 清除筛选
+                  </div>
+                </div>
+                
+                <div v-if="displayedModels.length === 0" class="no-results">
+                  <el-empty description="没有找到匹配的模型" />
+                </div>
+                
+                <div v-else class="models-grid">
+                  <div 
+                    v-for="model in displayedModels" 
+                    :key="model.id"
+                    class="model-card"
+                    :class="{ 'selected': model.id === modelID }"
+                    @click="selectModel(model)"
+                  >
+                    <div class="model-card-header">
+                      <span class="model-name" :title="model.name">{{ model.name }}</span>
+                      <el-tag size="small" :type="getTagType(model.power)" style="flex-shrink: 0;">
+                        {{ model.power > 0 ? `${model.power}算力` : '免费' }}
+                      </el-tag>
+                    </div>
+                    <div class="model-description" :title="model.description || '暂无描述' ">{{ model.description || '暂无描述' }}</div>
+                    <!-- 暂时屏蔽此信息展示，或许用户不想展示此信息 -->
+                    <!-- <div class="model-metadata">
+                      <div class="model-detail">
+                        <div>响应: {{ model.max_tokens }}</div>
+                        <div>上下文: {{ model.max_context }}</div>
+                      </div>
+                    </div> -->
+                  </div>
+                </div>
+              </div>
+            </el-popover>
+
             <div class="flex-center">
               <el-dropdown :hide-on-click="false" trigger="click">
                 <span class="setting"><i class="iconfont icon-plugin"></i></span>
@@ -232,7 +327,7 @@
   </div>
 </template>
 <script setup>
-import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { nextTick, onMounted, onUnmounted, ref, watch, computed} from "vue";
 import ChatPrompt from "@/components/ChatPrompt.vue";
 import ChatReply from "@/components/ChatReply.vue";
 import { Delete, Edit, InfoFilled, More, Promotion, Search, Share, VideoPause } from "@element-plus/icons-vue";
@@ -283,15 +378,141 @@ const showChatSetting = ref(false);
 const listStyle = ref(store.chatListStyle);
 const config = ref({ advance_voice_power: 0 });
 const voiceChatUrl = ref("");
+const modelSearchKeyword = ref(""); // 模型搜索关键词
+const selectedCategory = ref("");
+const modelCategories = ref([]);
+const groupedModels = ref([]);
+const activeCategory = ref(""); // 当前激活的分类标签
+const showFreeModelsOnly = ref(false); // 是否只显示免费模型
+
+const tools = ref([]);
+const toolSelected = ref([]);
+const stream = ref(store.chatStream);
+
+// 过滤后的模型列表
+const filteredModels = computed(() => {
+  if (!modelSearchKeyword.value && !showFreeModelsOnly.value && !activeCategory.value) {
+    return models.value;
+  }
+
+  return models.value.filter(model => {
+    // 搜索关键词匹配
+    const matchesSearch = !modelSearchKeyword.value || 
+      model.name.toLowerCase().includes(modelSearchKeyword.value.toLowerCase()) || 
+      (model.description && model.description.toLowerCase().includes(modelSearchKeyword.value.toLowerCase()));
+    
+    // 分类匹配
+    const matchesCategory = !activeCategory.value || model.category === activeCategory.value;
+    
+    // 免费模型匹配
+    const matchesFree = !showFreeModelsOnly.value || model.power <= 0;
+    
+    return matchesSearch && matchesCategory && matchesFree;
+  });
+});
+
+// 最终展示的模型列表
+const displayedModels = computed(() => {
+  return filteredModels.value;
+});
+
+// 切换是否只显示免费模型
+const toggleFreeModels = () => {
+  showFreeModelsOnly.value = !showFreeModelsOnly.value;
+  if (showFreeModelsOnly.value) {
+    activeCategory.value = ''
+  }
+};
+
+// 提取所有模型分类
+const updateModelCategories = () => {
+  const categories = new Set();
+  models.value.forEach(model => {
+    if (model.category) {
+      categories.add(model.category);
+    }
+  });
+  modelCategories.value = Array.from(categories);
+};
+
+// 按分类对模型进行分组
+const updateGroupedModels = () => {
+  const filtered = filteredModels.value;
+  
+  // 如果已经指定分类，则只显示该分类
+  if (selectedCategory.value) {
+    groupedModels.value = [{
+      category: selectedCategory.value,
+      models: filtered
+    }];
+    return;
+  }
+  
+  // 否则按分类分组展示
+  const groups = {};
+  filtered.forEach(model => {
+    const category = model.category || '未分类';
+    if (!groups[category]) {
+      groups[category] = [];
+    }
+    groups[category].push(model);
+  });
+  
+  groupedModels.value = Object.keys(groups).map(category => ({
+    category,
+    models: groups[category]
+  }));
+  
+  // 对分组进行排序（未分类放最后）
+  groupedModels.value.sort((a, b) => {
+    if (a.category === '未分类') return 1;
+    if (b.category === '未分类') return -1;
+    return a.category.localeCompare(b.category);
+  });
+};
+
+// 当筛选条件变化时更新分组
+watch([filteredModels, selectedCategory], () => {
+  updateGroupedModels();
+});
+
+// 监听模型数据变化，更新分类列表
+watch(() => models.value, () => {
+  updateModelCategories();
+  updateGroupedModels();
+}, { deep: true });
+
+// 获取选中的模型名称
+const getSelectedModelName = () => {
+  const model = getSelectedModel();
+  return model ? model.name : '选择模型';
+};
+
+// 获取选中的模型
+const getSelectedModel = () => {
+  return models.value.find(model => model.id === modelID.value);
+};
+
+// 选择模型
+const selectModel = (model) => {
+  modelID.value = model.id;
+  _newChat();
+};
+
+// 根据算力获取标签类型
+const getTagType = (power) => {
+  const powerNum = Number(power);
+  if (powerNum <= 5) return 'info';
+  if (powerNum <= 15) return 'warning';
+  return 'danger';
+};
+
 watch(
   () => store.chatListStyle,
   (newValue) => {
     listStyle.value = newValue;
   }
 );
-const tools = ref([]);
-const toolSelected = ref([]);
-const stream = ref(store.chatStream);
 
 watch(
   () => store.chatStream,
@@ -456,6 +677,10 @@ onMounted(() => {
       localStorage.setItem("chat_id", chatId.value);
     });
   });
+
+  // 初始化模型分类和分组
+  updateModelCategories();
+  updateGroupedModels();
 });
 
 onUnmounted(() => {
@@ -1012,4 +1237,191 @@ const realtimeChat = () => {
     }
   }
 }
+
+
+.model-selector-popover {
+  max-width: 820px !important;
+}
+
+.el-popper.model-selector-popover {
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+}
+
+.model-selector-container {
+  padding: 16px;
+  
+  .model-search {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .category-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 1px solid #E4E7ED;
+    margin-bottom: 16px;
+    
+    .category-tab {
+      padding: 8px 16px;
+      cursor: pointer;
+      margin-right: 8px;
+      margin-bottom: -1px;
+      font-size: 14px;
+      color: #606266;
+      transition: all 0.2s;
+      border-bottom: 2px solid transparent;
+      
+      &:hover {
+        color: #409EFF;
+      }
+      
+      &.active {
+        color: #409EFF;
+        border-bottom-color: #409EFF;
+        font-weight: 500;
+      }
+      
+      &.reset-filter {
+        color: #F56C6C;
+        margin-left: auto;
+        
+        &:hover {
+          color: darken(#F56C6C, 10%);
+        }
+      }
+    }
+  }
+  
+  .no-results {
+    padding: 30px;
+    text-align: center;
+  }
+  
+  .models-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    max-height: 450px;
+    overflow-y: auto;
+    padding: 4px 4px 16px 4px;
+  }
+  
+  .model-card {
+    border: 1px solid #DCDFE6;
+    border-radius: 6px;
+    padding: 14px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    min-width: 0; /* 防止内容溢出 */
+    
+    &:hover {
+      border-color: #409eff;
+      transform: translateY(-2px);
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.selected {
+      border-color: #409eff;
+      background-color: #ecf5ff;
+    }
+    
+    .model-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 8px;
+      
+      .model-name {
+        font-weight: bold;
+        word-break: break-word;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        line-height: 1.3;
+        max-width: 170px;
+        margin-right: 8px;
+      }
+    }
+    
+    .model-description {
+      font-size: 12px;
+      color: #606266;
+      margin-bottom: 10px;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.4;
+      flex-grow: 1;
+    }
+    
+    //.model-metadata {
+    //  display: flex;
+    //  flex-direction: column;
+    //  margin-top: auto;
+    //}
+    
+    .model-detail {
+      display: flex;
+      justify-content: space-between;
+      font-size: 12px;
+      color: #909399;
+    }
+  }
+}
+
+.adaptive-width-button {
+  min-width: 180px;
+  max-width: 350px;
+  width: auto !important;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.selected-model-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  .model-name-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 280px;
+  }
+}
+
+.customer-service-content {
+  text-align: center;
+  padding: 10px 0;
+  
+  .service-tip {
+    font-size: 16px;
+    color: #303133;
+    margin-bottom: 15px;
+  }
+  
+  .qrcode-image {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+  }
+  
+  .service-note {
+    font-size: 14px;
+    color: #909399;
+    margin-top: 15px;
+  }
+}
+
+.customer-service-btn {
+  margin-left: 8px;
+}
 </style>
diff --git a/web/src/views/Index.vue b/web/src/views/Index.vue
index 501f003b..b9cdb48b 100644
--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, onUnmounted } from "vue";
 import { useRouter } from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 import ThemeChange from "@/components/ThemeChange.vue";
@@ -134,7 +134,9 @@ onMounted(() => {
       title.value = res.data.title;
       logo.value = res.data.logo;
       slogan.value = res.data.slogan;
-      if (timer) clearInterval(timer); // 清除定时器
+
+      // 确保获取数据后再启动定时器
+      if (timer) clearInterval(timer); // 清除已有定时器
       timer = setInterval(setContent, interTime.value);
     })
     .catch((e) => {
@@ -164,8 +166,23 @@ onMounted(() => {
     })
     .catch(() => {});
 });
+
+// 组件销毁时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
+
 // 打字机内容逐字符显示
 const setContent = () => {
+  if (!slogan.value) {
+    if (timer) clearInterval(timer);
+    timer = setTimeout(setContent, 100);
+    return;
+  }
+  
   if (initAnimation.value.length >= slogan.value.length) {
     // 文本已全部输出
     initAnimation.value = "";
@@ -174,7 +191,7 @@ const setContent = () => {
     timer = setInterval(setContent, interTime.value);
   } else {
     const nextChar = slogan.value.charAt(initAnimation.value.length);
-    initAnimation.value += slogan.value.charAt(initAnimation.value.length); // 逐字符追加
+    initAnimation.value += nextChar; // 逐字符追加
     displayedChars.value.push(nextChar);
     interTime.value = interArr[Math.floor(Math.random() * interArr.length)]; // 设置随机间隔
     if (timer) clearInterval(timer);
diff --git a/web/src/views/admin/ChatModel.vue b/web/src/views/admin/ChatModel.vue
index c9c579a1..27348786 100644
--- a/web/src/views/admin/ChatModel.vue
+++ b/web/src/views/admin/ChatModel.vue
@@ -24,6 +24,8 @@
             <el-tag type="success" v-else>聊天</el-tag>
           </template>
         </el-table-column>
+
+        <el-table-column prop="category" label="模型类别" />
         <el-table-column prop="value" label="模型值">
           <template #default="scope">
             <span>{{ scope.row.value }}</span>
@@ -32,6 +34,13 @@
             </el-icon>
           </template>
         </el-table-column>
+        <el-table-column prop="description" label="模型描述" width="180">
+          <template #default="scope">
+            <el-tooltip :content="scope.row.description || ''" placement="top" :show-after="200">
+              <div class="description-cell">{{ scope.row.description }}</div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
         <el-table-column prop="power" label="费率" />
         <el-table-column prop="max_tokens" label="最大响应长度" />
         <el-table-column prop="max_context" label="最大上下文长度" />
@@ -78,6 +87,10 @@
           <el-input v-model="item.value" autocomplete="off" />
         </el-form-item>
 
+        <el-form-item label="模型类别" prop="category">
+          <el-input v-model="item.category" autocomplete="off" />
+        </el-form-item>
+
         <el-form-item label="消耗算力：" prop="power">
           <template #label>
             <div class="flex items-center">
@@ -111,6 +124,10 @@
             <el-input v-model.number="item.max_context" autocomplete="off" placeholder="模型最大上下文长度" />
           </el-form-item>
 
+          <el-form-item label="模型描述" prop="description">
+            <el-input v-model="item.description" autocomplete="off" />
+          </el-form-item>
+
           <el-form-item label="创意度：" prop="temperature">
             <template #label>
               <div class="flex items-center">
@@ -289,7 +306,7 @@ onUnmounted(() => {
 const add = function () {
   title.value = "新增模型";
   showDialog.value = true;
-  item.value = { enabled: true, power: 1, open: true, max_tokens: 1024, max_context: 8192, temperature: 0.9, options: {} };
+  item.value = { enabled: true, power: 1, open: true, description: "", max_tokens: 1024, max_context: 8192, temperature: 0.9 };
 };
 
 const edit = function (row) {
@@ -361,6 +378,13 @@ const remove = function (row) {
     }
   }
 
+  .description-cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
   .el-select {
     width: 100%
   }