fix: 对话格式兼容改造

Yi.Ai.Vue3/src/components/ModelSelect/index.vue

@@ -29,8 +29,31 @@ onMounted(async () => {
 const currentModelName = computed(
   () => modelStore.currentModelInfo && modelStore.currentModelInfo.modelName,
 );
-const popoverList = computed(() => modelStore.modelList);
 
+// API 类型映射
+const apiTypeNameMap: Record<string, string> = {
+  Completions: 'OpenAI Chat Completion',
+  Responses: 'OpenAI Responses API',
+  Messages: 'Anthropic Claude API',
+  GenerateContent: 'Google Gemini API',
+};
+
+// 按 API 类型分组的模型列表
+const groupedModelList = computed(() => {
+  const groups: Record<string, GetSessionListVO[]> = {};
+
+  modelStore.modelList.forEach((model) => {
+    const apiType = model.modelApiType || 'Completions';
+    if (!groups[apiType]) {
+      groups[apiType] = [];
+    }
+    groups[apiType].push(model);
+  });
+
+  return groups;
+});
+
+console.log('groupedModelList---', groupedModelList.value);
 /* 弹出面板 开始 */
 const popoverStyle = ref({
   width: '200px',
@@ -46,7 +69,8 @@ const popoverRef = ref();
 // 显示
 async function showPopover() {
   // 获取最新的模型列表
-  await modelStore.requestModelList();
+
+  return await modelStore.requestModelList();
 }
 
 // 点击
@@ -176,39 +200,48 @@ function getWrapperClass(item: GetSessionListVO) {
       </template>
 
       <div class="popover-content-box">
-        <div
-          v-for="item in popoverList"
-          :key="item.id"
-          :class="getWrapperClass(item)"
-          @click="handleModelClick(item)"
-        >
-          <Popover
-            trigger-class="popover-trigger-item-text"
-            popover-class="rounded-tooltip"
-            placement="right"
-            trigger="hover"
-            :offset="[12, 0]"
-          >
-            <template #trigger>
-              <span :class="getModelStyleClass(item)">
-                {{ item.modelName }}
-              </span>
-            </template>
-            <div
-              class="popover-content-box-item-text text-wrap max-w-200px rounded-lg p-8px font-size-12px line-height-tight"
-            >
-              {{ item.remark }}
-            </div>
-          </Popover>
+        <!-- 按 API 类型分组展示 -->
+        <template v-for="(models, apiType) in groupedModelList" :key="apiType">
+          <!-- 分组标题 -->
+          <div class="group-title">
+            {{ apiTypeNameMap[apiType] || apiType }}
+          </div>
 
-          <!-- VIP锁定图标 -->
-          <el-icon
-            v-if="!isModelAvailable(item)"
-            class="absolute right-1 top-1/2 transform -translate-y-1/2"
+          <!-- 该分组下的模型列表 -->
+          <div
+            v-for="item in models"
+            :key="item.id"
+            :class="getWrapperClass(item)"
+            @click="handleModelClick(item)"
           >
-            <Lock />
-          </el-icon>
-        </div>
+            <Popover
+              trigger-class="popover-trigger-item-text"
+              popover-class="rounded-tooltip"
+              placement="right"
+              trigger="hover"
+              :offset="[12, 0]"
+            >
+              <template #trigger>
+                <span :class="getModelStyleClass(item)">
+                  {{ item.modelName }}
+                </span>
+              </template>
+              <div
+                class="popover-content-box-item-text text-wrap max-w-200px rounded-lg p-8px font-size-12px line-height-tight"
+              >
+                {{ item.remark }}
+              </div>
+            </Popover>
+
+            <!-- VIP锁定图标 -->
+            <el-icon
+              v-if="!isModelAvailable(item)"
+              class="absolute right-1 top-1/2 transform -translate-y-1/2"
+            >
+              <Lock />
+            </el-icon>
+          </div>
+        </template>
       </div>
     </Popover>
   </div>
@@ -229,6 +262,20 @@ function getWrapperClass(item: GetSessionListVO) {
   height: 300px;
   overflow: hidden auto;
 
+  // 分组标题样式
+  .group-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #409eff;
+    padding: 8px 8px 4px 8px;
+    margin-top: 4px;
+    border-bottom: 1px solid #e4e7ed;
+    position: sticky;
+    top: 0;
+    background: var(--el-bg-color, #fff);
+    z-index: 1;
+  }
+
   :deep(.popover-trigger-item-text) {
     width: 100%;
   }