From 4b39bbb2a58dd51290f9ffc4fbffb2740541599a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=98=89=E6=82=A6?= <hejiayue520zzy@gmail.com>
Date: Wed, 28 May 2025 02:45:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E6=A8=A1=E5=9E=8B=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/index.ts                      |   7 ++
 src/api/model/types.ts                      |  14 +++
 src/assets/icons/svg/models.svg             |   1 +
 src/components/ModelSelect/index.vue        | 116 ++++++++++++++++++++
 src/pages/chat/layouts/chatDefaul/index.vue |   3 +
 src/stores/modules/model.ts                 |  35 ++++++
 src/styles/element-plus.scss                |   8 ++
 types/components.d.ts                       |   4 +-
 8 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 src/api/model/index.ts
 create mode 100644 src/api/model/types.ts
 create mode 100644 src/assets/icons/svg/models.svg
 create mode 100644 src/components/ModelSelect/index.vue
 create mode 100644 src/stores/modules/model.ts

diff --git a/src/api/model/index.ts b/src/api/model/index.ts
new file mode 100644
index 0000000..46e5f5d
--- /dev/null
+++ b/src/api/model/index.ts
@@ -0,0 +1,7 @@
+import type { GetSessionListVO } from './types';
+import { get } from '@/utils/request';
+
+// 获取当前用户的模型列表
+export function getModelList() {
+  return get<GetSessionListVO[]>('/system/model/modelList');
+}
diff --git a/src/api/model/types.ts b/src/api/model/types.ts
new file mode 100644
index 0000000..a6eb856
--- /dev/null
+++ b/src/api/model/types.ts
@@ -0,0 +1,14 @@
+// 查询用户模型列表返回的数据结构
+export interface GetSessionListVO {
+  id?: number;
+  category?: string;
+  modelName?: string;
+  modelDescribe?: string;
+  modelPrice?: number;
+  modelType?: string;
+  modelShow?: string;
+  systemPrompt?: string;
+  apiHost?: string;
+  apiKey?: string;
+  remark?: string;
+}
diff --git a/src/assets/icons/svg/models.svg b/src/assets/icons/svg/models.svg
new file mode 100644
index 0000000..9b9a937
--- /dev/null
+++ b/src/assets/icons/svg/models.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748367817456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10388" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M800 1008V720l224-112v288zM576 576l192-96 32-16 192 96-224 112z m-32-304l224-112v256L544 528V272zM288 112L512 0l224 112-224 112z m192 416L256 416V160l224 112v256z m-256 480L0 896V608l224 112v288z m32 16h-0.352 0.672z m0-352L32 560l192-96 32 16 192 96z m224 240l-192 96V720l192-96v288z m256 96l-192-96V624l192 96v288z m32 16h-0.352 0.672z" p-id="10389"></path></svg>
\ No newline at end of file
diff --git a/src/components/ModelSelect/index.vue b/src/components/ModelSelect/index.vue
new file mode 100644
index 0000000..098f1fa
--- /dev/null
+++ b/src/components/ModelSelect/index.vue
@@ -0,0 +1,116 @@
+<!-- 切换模型 -->
+<script setup lang="ts">
+import type { GetSessionListVO } from '@/api/model/types';
+import Popover from '@/components/Popover/index.vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import { useModelStore } from '@/stores/modules/model';
+
+const modelStore = useModelStore();
+
+onMounted(async () => {
+  await modelStore.requestModelList();
+  // 设置默认模型
+  if (
+    modelStore.modelList.length > 0
+    && (!modelStore.currentModelInfo || !modelStore.currentModelInfo.modelName)
+  ) {
+    modelStore.setCurrentModelInfo(modelStore.modelList[0]);
+  }
+});
+
+const currentModelName = computed(
+  () => modelStore.currentModelInfo && modelStore.currentModelInfo.modelName,
+);
+const popoverList = computed(() => modelStore.modelList);
+
+/* 弹出面板 开始 */
+const popoverStyle = ref({
+  width: '200px',
+  padding: '4px',
+  height: 'fit-content',
+});
+const popoverRef = ref();
+
+// 显示
+async function showPopover() {
+  // 获取最新的模型列表
+  await modelStore.requestModelList();
+}
+
+// 点击
+function handleClick(item: GetSessionListVO) {
+  modelStore.setCurrentModelInfo(item);
+  popoverRef.value.hide();
+}
+</script>
+
+<template>
+  <div class="model-switch">
+    <Popover
+      ref="popoverRef"
+      position="top-start"
+      :offset="[-14, 14]"
+      :trigger-style="{ cursor: 'pointer' }"
+      popover-class="popover-content"
+      :popover-style="popoverStyle"
+      @show="showPopover"
+    >
+      <!-- 触发元素插槽 -->
+      <template #trigger>
+        <div
+          class="model-switch-box select-none flex items-center gap-4px px-10px py-8px rounded-15px cursor-pointer font-size-12px"
+        >
+          <div class="model-switch-box-icon">
+            <SvgIcon name="models" size="12" />
+          </div>
+          <div class="model-switch-box-text font-size-12px">
+            {{ currentModelName }}
+          </div>
+        </div>
+      </template>
+
+      <div class="popover-content-box">
+        <div v-for="item in popoverList" :key="item.id" class="popover-content-box-items h-full">
+          <el-tooltip
+            popper-class="rounded-tooltip"
+            effect="dark"
+            placement="right"
+            trigger="hover"
+            :offset="10"
+            :show-arrow="false"
+          >
+            <template #content>
+              <div class="popover-content-box-item-text text-wrap max-w-200px rounded-lg">
+                {{ item.remark }}
+              </div>
+            </template>
+            <div
+              class="popover-content-box-item select-none transition-all transition-duration-300 flex items-center h-full gap-8px p-8px pl-10px pr-12px rounded-lg hover:cursor-pointer hover:bg-[rgba(0,0,0,.04)]"
+              :class="{ 'bg-[rgba(0,0,0,.04)] is-select': item.modelName === currentModelName }"
+              @click="handleClick(item)"
+            >
+              <div
+                class="popover-content-box-item-text font-size-12px text-overflow max-h-120px line-height-snug"
+              >
+                {{ item.modelName }}
+              </div>
+            </div>
+          </el-tooltip>
+        </div>
+      </div>
+    </Popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.model-switch-box {
+  color: var(--el-color-primary, #409eff);
+  border: 1px solid var(--el-color-primary, #409eff);
+  border-radius: 15px;
+}
+
+.popover-content-box-item.is-select {
+  color: var(--el-color-primary, #409eff);
+  font-weight: 700;
+}
+</style>
diff --git a/src/pages/chat/layouts/chatDefaul/index.vue b/src/pages/chat/layouts/chatDefaul/index.vue
index 25662fd..294e325 100644
--- a/src/pages/chat/layouts/chatDefaul/index.vue
+++ b/src/pages/chat/layouts/chatDefaul/index.vue
@@ -1,5 +1,6 @@
 <!-- 默认消息列表页 -->
 <script setup lang="ts">
+import ModelSelect from '@/components/ModelSelect/index.vue';
 import WelecomeText from '@/components/WelecomeText/index.vue';
 import { useUserStore } from '@/stores';
 import { useChatStore } from '@/stores/modules/chat';
@@ -45,6 +46,8 @@ function setIsDeepThinking() {
     >
       <template #prefix>
         <div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
+          <ModelSelect />
+
           <div
             class="flex items-center gap-4px px-12px py-8px rounded-15px cursor-pointer font-size-12px border-1px border-gray border-solid hover:bg-[rgba(0,0,0,.04)]"
           >
diff --git a/src/stores/modules/model.ts b/src/stores/modules/model.ts
new file mode 100644
index 0000000..079c6d6
--- /dev/null
+++ b/src/stores/modules/model.ts
@@ -0,0 +1,35 @@
+import type { GetSessionListVO } from '@/api/model/types';
+import { defineStore } from 'pinia';
+import { getModelList } from '@/api/model/index';
+
+// 模型管理
+export const useModelStore = defineStore('model', () => {
+  // 当前模型
+  const currentModelInfo = ref<GetSessionListVO>({});
+
+  // 设置当前模型
+  const setCurrentModelInfo = (modelInfo: GetSessionListVO) => {
+    currentModelInfo.value = modelInfo;
+  };
+
+  // 模型菜单列表
+  const modelList = ref<GetSessionListVO[]>([]);
+  // 请求模型菜单列表
+  const requestModelList = async () => {
+    try {
+      const res = await getModelList();
+      modelList.value = res.data;
+      console.log('模型列表', res.data);
+    }
+    catch (error) {
+      console.error('requestModelList错误', error);
+    }
+  };
+
+  return {
+    currentModelInfo,
+    setCurrentModelInfo,
+    modelList,
+    requestModelList,
+  };
+});
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index bff706e..ffa3dd1 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -19,3 +19,11 @@
     border-radius: 16px;
   }
 }
+
+// rounded-tooltip
+.rounded-tooltip {
+  border-radius: 10px !important;
+  display: flex;
+  align-items: center;
+  height: fit-content;
+}
diff --git a/types/components.d.ts b/types/components.d.ts
index cae2719..e9ad9a3 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {}
+export {};
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -21,8 +21,10 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
     LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']
+    ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
     Popover: typeof import('./../src/components/Popover/index.vue')['default']
     QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']