feat:模型管理新增静态数据

src/assets/image/management/modelFrame2.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M918.61 591.872 813.937 408.678l44.85-85.995a23.92 23.92 0 0 0 5.244-29.9l-57.59-103.957a24.678 24.678 0 0 0-20.173-11.223H572.416L524.554 93.86a22.446 22.446 0 0 0-17.203-11.96H394.465a23.92 23.92 0 0 0-20.193 11.96v4.505L267.366 281.54H164.884a23.941 23.941 0 0 0-20.93 11.223L84.89 397.414a26.931 26.931 0 0 0 0 23.962l106.168 184.668-47.841 83.763a26.931 26.931 0 0 0 0 23.9l54.579 95.724a24.678 24.678 0 0 0 20.93 11.96H432.58l51.589 89.703a24.678 24.678 0 0 0 18.698 11.98h121.119a23.92 23.92 0 0 0 20.193-11.96l105.431-184.688h94.208a26.194 26.194 0 0 0 20.193-12.698l54.58-96.46a23.183 23.183 0 0 0 0-25.437zm-132.342 11.96L731.69 502.866l-224.317 395.55-61.318-100.925H221.737l53.842-97.956H389.98L165.663 305.5h117.391l111.411-198.902 56.075 97.956-57.57 100.926h448.615l-56.791 100.229L897.7 603.832H786.289z" fill="#605BEC"/><path d="m502.129 641.946 139.837-224.297H361.554l140.575 224.297z" fill="#605BEC"/></svg>

src/assets/image/management/modelFrame3.svg

@@ -0,0 +1 @@
+<svg data-name="图层 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 283.46 283.46"><defs><linearGradient id="a" data-name="未命名的渐变 5" x1="27.03" y1="287.05" x2="253.15" y2="1.14" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e9a85e"/><stop offset="1" stop-color="#f52b76"/></linearGradient><linearGradient id="b" data-name="未命名的渐变 5" x1="25.96" y1="286.21" x2="252.09" y2=".3" xlink:href="#a"/><linearGradient id="c" data-name="未命名的渐变 9" x1="-474.33" y1="476.58" x2="-160.37" y2="476.58" gradientTransform="rotate(33.75 459.64 1064.864)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a0cf5"/><stop offset="1" stop-color="#ab66f3"/></linearGradient></defs><path d="M96.16 145.42c7.71 8.57 16.96 16.66 27.5 23.7 8.96 5.99 18.29 10.89 27.66 14.64a209.64 209.64 0 0 0 43.09-57.84L257.92 0 147.08 87.19a209.703 209.703 0 0 0-50.92 58.23Z" style="fill:url(#a)"/><path d="M87.08 223.86a297.38 297.38 0 0 1-22.59-16.7L26 283.47l69.17-54.4c-2.71-1.69-5.41-3.41-8.09-5.2Z" style="fill:url(#b)"/><path d="M229.81 101.27c20.81 27.65 26.93 58.36 12.79 79.51-20.63 30.88-76.59 29.69-124.98-2.64C69.23 145.8 46.73 94.56 67.37 63.68c14.14-21.15 44.86-27.25 78.36-18.6C87.76 20.46 32.59 22.86 11.22 54.85c-26.86 40.19 9.8 111.82 81.88 159.99 72.08 48.17 152.29 54.64 179.15 14.45 21.38-31.99 2.49-83.88-42.44-128.02Z" style="fill:url(#c)"/></svg>

src/assets/image/management/modelFrame4.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M950.676 419.057a255.347 255.347 0 0 0-22.015-209.482A257.95 257.95 0 0 0 650.915 85.848a258.76 258.76 0 0 0-438.377 92.539A255.347 255.347 0 0 0 41.966 302.114a257.95 257.95 0 0 0 31.7 302.79 255.133 255.133 0 0 0 21.758 209.525 258.163 258.163 0 0 0 277.96 123.727 255.347 255.347 0 0 0 192.373 85.84 258.376 258.376 0 0 0 246.26-179.446 255.56 255.56 0 0 0 170.53-123.727 258.376 258.376 0 0 0-31.871-301.766zM565.757 957.013a190.966 190.966 0 0 1-122.703-44.37l6.016-3.456 203.893-117.67a33.918 33.918 0 0 0 16.725-29.054v-287.43l86.182 49.832a3.03 3.03 0 0 1 1.621 2.219v238.195a192.16 192.16 0 0 1-191.734 191.734zM153.62 780.98a190.71 190.71 0 0 1-22.826-128.59l6.058 3.626 204.065 117.71a32.894 32.894 0 0 0 33.278 0L623.482 629.99v99.494a3.413 3.413 0 0 1-1.408 2.645L415.578 851.206a191.99 191.99 0 0 1-261.96-70.226zM99.86 336.928a191.35 191.35 0 0 1 100.944-84.177v242.206a32.681 32.681 0 0 0 16.554 28.841l248.094 143.14-86.182 49.832a3.242 3.242 0 0 1-3.03 0L170.173 597.907a192.16 192.16 0 0 1-70.31-262.003zM807.963 501.4 559.102 356.895l85.968-49.661a3.242 3.242 0 0 1 3.03 0L854.169 426.31a191.734 191.734 0 0 1-28.841 345.796v-242.25a33.705 33.705 0 0 0-17.365-28.456zm85.756-128.975-6.016-3.627-203.68-118.692a33.108 33.108 0 0 0-33.491 0L401.456 393.842v-99.536a2.816 2.816 0 0 1 1.195-2.602l206.07-118.906a191.99 191.99 0 0 1 284.998 198.816zM354.44 548.842l-86.182-49.661a3.413 3.413 0 0 1-1.621-2.432V259.236a191.99 191.99 0 0 1 314.65-147.32l-6.058 3.413-203.851 117.668a33.918 33.918 0 0 0-16.767 29.055zm46.803-100.901 111.013-63.997 111.226 63.997v127.95l-110.8 63.997-111.226-63.996z"/></svg>

src/assets/image/management/modelFrame5.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M572.3 404.2c-14 24.3-27.6 48-42.3 73.5 141.5 37.9 281.3 75.4 423.8 113.6-8.1 29-16.1 57.4-24.5 87.1-288-77.1-573.8-153.6-860.4-230.4 5.3-37.3 14.7-72.5 29.2-106.3 7.3-17 16.1-33.3 24-50 2.7-5.6 5.9-7.4 12.6-5.6 142.4 38.5 285 76.6 427.5 114.9 3.2 1 6.5 2.1 10.1 3.2zm383.8 72.7c-270.8-72.5-541.6-145-816.1-218.4 21.2-23.9 40-46.7 60.5-67.7 25.8-26.3 55.4-48.2 87.7-66 3.9-2.1 9.6-3.2 13.8-2.1 136 36.2 271.9 72.8 407.9 109.3.6.2 1.1.7 2.9 1.9-25.4 18.2-48.2 38.6-67.3 64.9 28.5 7.7 55.5 15.1 82.5 22.4 67.3 18 134.6 36.1 201.9 53.9 6.2 1.6 10 4.2 11.3 10.7 6.1 29.5 12.4 58.9 18.7 88.4-1.2.9-2.5 1.8-3.8 2.7zm-82.8 303.7c-22.3 22.9-44.5 45.9-67.1 68.5-2.2 2.2-7.8 2.7-11.2 1.8-90.3-23.9-180.6-48.2-270.9-72.3-123.6-33.1-247.2-66.1-370.8-99.1-18.9-5-37.8-10-56.5-15.4-3.2-.9-7.3-3.8-8.3-6.7-20-56.9-27.1-115.5-23.6-175.6.1-1 .7-2 1.6-4.8 140.9 37.8 281.7 75.6 422.8 113.4-6.2 26.4-12.3 52.3-18.7 79.2 134.2 35.9 267.2 71.6 400.2 107.2.8 1.3 1.7 2.6 2.5 3.8zm-201 148.8c-214.4 85.7-475.1-16.2-567.3-233.2 20.9 5.5 41.1 10.8 61.1 16.2 93.7 25.2 187.3 50.6 281.1 75.5 7.1 1.9 8.8 4.5 9.1 11.3.9 21.3 3 42.6 3.8 63.9.3 8.4 4.6 10.6 11.5 12.4 62.5 16.5 125 33.3 187.5 50 3.5 1 7.1 2.2 13.2 3.9zm196-684.7c-176.9-47.3-353.8-94.7-530.7-142 73.5-34 150.4-45.2 230.1-34.5 124.5 16.7 224.8 75.6 300.6 176.5z"/></svg>

src/assets/image/management/modelFrame8.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M320.512 804.864c-274.432-128-242.688-530.432 41.984-530.432 34.816 0 86.016-7.168 114.688-14.336 59.392-16.384 99.328-10.24 69.632 10.24-9.216 7.168-15.36 19.456-13.312 28.672 5.12 20.48 158.72 161.792 177.152 161.792 27.648 0 27.648-32.768 1.024-57.344-43.008-38.912-55.296-90.112-35.84-141.312l9.216-26.624 54.272 52.224c35.84 34.816 58.368 49.152 68.608 44.032 9.216-4.096 30.72-9.216 49.152-12.288 18.432-2.048 38.912-10.24 45.056-18.432 19.456-23.552 43.008-17.408 35.84 9.216-3.072 12.288-6.144 27.648-6.144 34.816 0 23.552-62.464 83.968-92.16 90.112-23.552 5.12-30.72 12.288-30.72 30.72 0 46.08-38.912 148.48-75.776 198.656l-37.888 51.2 36.864 15.36c56.32 23.552 40.96 41.984-37.888 43.008-43.008 1.024-75.776 7.168-92.16 18.432-68.608 45.056-198.656 50.176-281.6 12.288zm251.904-86.016c-24.576-27.648-66.56-79.872-93.184-117.76-69.632-98.304-158.72-150.528-256-150.528-37.888 0-38.912 1.024-38.912 34.816 0 94.208 99.328 240.64 175.104 257.024 38.912 9.216 59.392-7.168 39.936-29.696-7.168-9.216-10.24-23.552-6.144-31.744 5.12-14.336 9.216-14.336 38.912 1.024 18.432 9.216 50.176 29.696 69.632 45.056 35.84 27.648 58.368 37.888 96.256 39.936 14.336 1.024 9.216-10.24-25.6-48.128zM660.48 573.44c8.192-13.312-31.744-78.848-56.32-92.16-10.24-6.144-26.624-10.24-34.816-10.24-23.552 0-20.48 27.648 4.096 33.792 13.312 3.072 20.48 14.336 20.48 29.696 0 13.312 5.12 29.696 12.288 36.864 15.36 15.36 46.08 16.384 54.272 2.048z" fill="#4D6BFE"/></svg>

src/assets/image/management/modelFrame9.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M153.6 128h153.6v153.6H153.6zM768 128h153.6v153.6H768z" fill="#FECE00"/><path d="M153.6 281.6h153.6v153.6H153.6z" fill="#FFA301"/><path d="M153.6 588.8h153.6v153.6H153.6zM460.8 588.8h153.6v153.6H460.8zM768 588.8h153.6v153.6H768z" fill="#FE4900"/><path d="M614.4 281.6H768v153.6H614.4z" fill="#FFA301"/><path d="M153.6 435.2h153.6v153.6H153.6z" fill="#FF6F00"/><path d="M153.6 742.4h153.6V896H153.6zM768 742.4h153.6V896H768z" fill="#FE0107"/><path d="M614.4 435.2H768v153.6H614.4z" fill="#FF6F00"/><path d="M307.2 281.6h153.6v153.6H307.2zM768 281.6h153.6v153.6H768z" fill="#FFA301"/><path d="M307.2 435.2h153.6v153.6H307.2zM768 435.2h153.6v153.6H768zM460.8 435.2h153.6v153.6H460.8z" fill="#FF6F00"/><path d="M102.4 128h51.2v768h-51.2zM716.8 128H768v153.6h-51.2zM563.2 281.6h51.2v153.6h-51.2zM409.6 588.8h51.2v153.6h-51.2zM716.8 588.8H768V896h-51.2z" fill="#191D1D"/></svg>

src/modules/Model/CollapseItem.vue

@@ -26,7 +26,7 @@ const toDelete = () => {};
   padding: 10px 30px;
 }
 .name {
-  min-width: 150px;
+  min-width: 350px;
   font-size: 14px;
   font-weight: bold;
 }

src/modules/Model/MessageBody.vue

@@ -24,9 +24,9 @@
       </div>
       <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
         <div v-if="unadd_show_status" class="card-list">
-          <CardItem v-for="item in un_added_data" :key="item.id" :name="item.name" :img_src="item.img_src">
+          <CardItem v-for="item in un_added_data" :key="item.id" :name="item.name" :img_src="item.img_src" is_model>
             <template #labels>
-              {{ item.keyword }}
+              <div class="labels">{{ item.keyword }}</div>
             </template>
             <template #description>
               {{ item.desc }}
@@ -47,14 +47,6 @@
 import { ref } from 'vue';
 import ModelList from './ModelList.vue';
 import CardItem from '../../views/manage/CardItem.vue';
-import intelligentFrame1 from '../../assets/image/management/intelligent-frame1.png';
-import intelligentFrame2 from '../../assets/image/management/intelligent-frame2.png';
-import intelligentFrame3 from '../../assets/image/management/intelligent-frame3.png';
-import intelligentFrame4 from '../../assets/image/management/intelligent-frame4.png';
-import intelligentFrame5 from '../../assets/image/management/intelligent-frame5.png';
-import intelligentFrame6 from '../../assets/image/management/intelligent-frame6.png';
-import intelligentFrame7 from '../../assets/image/management/intelligent-frame7.png';
-import intelligentFrame8 from '../../assets/image/management/intelligent-frame8.png';
 import { useCollapse } from './use-collapse';
 
 const { beforeEnter, enter, leave } = useCollapse(1000);
@@ -63,42 +55,51 @@ const added_data = ref([
   {
     id: '1',
     name: 'OpenAl-APl-Compatible',
-    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame1,
+    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION ',
+    img_src: 'modelFrame1',
     show_more: false,
     models: [
       {
         id: '1-1',
-        name: 'deepseek-chat2'
+        name: 'qwen-2.5-72b-instruct OpenAl-APl'
       },
       {
         id: '1-2',
-        name: 'deepseek-coder'
-      },
-      {
-        id: '1-3',
-        name: 'deepseek-coder'
+        name: 'qwen-2.5-72b-instruct-gptq-int4 OpenAI-API'
       }
     ]
   },
   {
     id: '2',
-    name: 'OpenAl-APl-Compatible',
+    name: 'Tongyi-Qianwen',
     desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame7,
+    img_src: 'modelFrame2',
     show_more: false,
     models: [
       {
-        id: '1-1',
-        name: 'deepseek-chat2'
+        id: '2-1',
+        name: 'qwen-plus'
       },
       {
-        id: '1-2',
-        name: 'deepseek-coder'
+        id: '2-2',
+        name: 'qwen-turbo'
       },
       {
-        id: '1-3',
-        name: 'deepseek-coder'
+        id: '2-3',
+        name: 'qwen-vl-plus'
+      }
+    ]
+  },
+  {
+    id: '3',
+    name: 'Xinference',
+    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION,TEXT RE-RANK',
+    img_src: 'modelFrame3',
+    show_more: false,
+    models: [
+      {
+        id: '3-1',
+        name: 'basic-bge-large-zh-v1.5'
       }
     ]
   }
@@ -106,59 +107,52 @@ const added_data = ref([
 const un_added_data = ref([
   {
     id: '1',
-    name: 'BaiduYiyan',
+    name: 'OpenAl',
     keyword: 'LLM,TEXT',
     desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame1
+    img_src: 'modelFrame4'
   },
   {
     id: '2',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame2
+    name: 'Moonshot',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame5'
   },
   {
     id: '3',
-    name: 'BaiduYiyan',
+    name: 'ZHIPU-AI',
     keyword: 'LLM,TEXT',
     desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame3
+    img_src: 'modelFrame6'
   },
   {
     id: '4',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame4
+    name: 'BaiChuan',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame7'
   },
   {
     id: '5',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame5
+    name: 'DeepSeek',
+    keyword: 'LLM',
+    desc: '',
+    img_src: 'modelFrame8'
   },
   {
     id: '6',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame6
+    name: 'Mistral',
+    keyword: 'LLM,TEXT EMBEDDING',
+    desc: '',
+    img_src: 'modelFrame9'
   },
   {
     id: '7',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame7
-  },
-  {
-    id: '8',
-    name: 'BaiduYiyan',
-    keyword: 'LLM,TEXT',
-    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
-    img_src: intelligentFrame8
+    name: 'StepFun',
+    keyword: 'LLM',
+    desc: '',
+    img_src: 'modelFrame10'
   }
 ]);
 // 展开收起状态
@@ -212,5 +206,8 @@ const showMoreModel = (item) => {
   grid-template-columns: repeat(5, 1fr);
   gap: 20px;
   transition: all 0.3s ease;
+  .labels {
+    color: var(--color-neutral-6);
+  }
 }
 </style>

src/modules/Model/ModelList.vue

@@ -2,7 +2,7 @@
   <div class="model-list">
     <div class="list-header">
       <div class="list-info">
-        <img :src="model_item.img_src" alt="" />
+        <img class="icon" :src="getIconModel(model_item.img_src)" alt="" />
         <div class="info-desc">
           <div class="name">{{ model_item.name }}</div>
           <div class="desc">{{ model_item.desc }}</div>
@@ -40,6 +40,7 @@
 <script setup>
 import CollapseItem from './CollapseItem.vue';
 import { useCollapse } from './use-collapse';
+import { getIconModel } from '../common/icon-map';
 
 const props = defineProps({
   model_item: {
@@ -73,6 +74,9 @@ const showMoreModel = (item) => {
   flex-direction: row;
   align-items: center;
   gap: 20px;
+  .icon {
+    width: 44px;
+  }
 }
 .info-desc {
   display: flex;

src/modules/common/icon-map.js

@@ -16,6 +16,16 @@ import intellFrame3 from '../../assets/image/management/intellFrame3.png';
 import intellFrame4 from '../../assets/image/management/intellFrame4.png';
 import intellFrame5 from '../../assets/image/management/intellFrame5.png';
 import intellFrame6 from '../../assets/image/management/intellFrame6.png';
+import modelFrame1 from '../../assets/image/management/modelFrame1.svg';
+import modelFrame2 from '../../assets/image/management/modelFrame2.svg';
+import modelFrame3 from '../../assets/image/management/modelFrame3.svg';
+import modelFrame4 from '../../assets/image/management/modelFrame4.svg';
+import modelFrame5 from '../../assets/image/management/modelFrame5.svg';
+import modelFrame6 from '../../assets/image/management/modelFrame6.svg';
+import modelFrame7 from '../../assets/image/management/modelFrame7.svg';
+import modelFrame8 from '../../assets/image/management/modelFrame8.svg';
+import modelFrame9 from '../../assets/image/management/modelFrame9.svg';
+import modelFrame10 from '../../assets/image/management/modelFrame10.svg';
 
 const image_knowLedge_map = {
   knowledgeFrame1: knowledgeFrame1,
@@ -41,6 +51,18 @@ const icon_intelligent_map = {
   intellFrame5: intellFrame5,
   intellFrame6: intellFrame6
 };
+const image_model_map = {
+  modelFrame1: modelFrame1,
+  modelFrame2: modelFrame2,
+  modelFrame3: modelFrame3,
+  modelFrame4: modelFrame4,
+  modelFrame5: modelFrame5,
+  modelFrame6: modelFrame6,
+  modelFrame7: modelFrame7,
+  modelFrame8: modelFrame8,
+  modelFrame9: modelFrame9,
+  modelFrame10: modelFrame10
+};
 
 /**
  * @description: 图片映射表
@@ -55,3 +77,6 @@ export const getImageIntelligent = (avatar) => {
 export const getIconIntelligent = (avatar) => {
   return icon_intelligent_map[avatar] || intellFrame1;
 };
+export const getIconModel = (avatar) => {
+  return image_model_map[avatar] || modelFrame1;
+};

src/views/manage/CardItem.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="card-container" :style="{ height: `${height}px` }">
     <div class="card-name">
-      <img :src="img_src" class="logo" @click.stop="handleClickIcon" />
+      <img v-if="!is_model" :src="img_src" class="logo" @click.stop="handleClickIcon" />
+      <img v-if="is_model" :src="getIconModel(img_src)" class="logo" @click.stop="handleClickIcon" />
       <div class="name">{{ name }}</div>
     </div>
     <div class="card-label">
@@ -23,6 +24,7 @@
 </template>
 
 <script setup>
+import { getIconModel } from '../../modules/common/icon-map';
 const props = defineProps({
   name: {
     type: String
@@ -33,6 +35,10 @@ const props = defineProps({
   height: {
     type: Number,
     default: 175
+  },
+  is_model: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -59,6 +65,9 @@ const handleClickIcon = () => {
   text-overflow: ellipsis;
   overflow: hidden;
 }
+.card-name .logo {
+  width: 44px;
+}
 .card-label {
   width: 100%;
   margin-top: 15px;
@@ -70,7 +79,7 @@ const handleClickIcon = () => {
   overflow: hidden;
   min-height: 32px;
   margin-top: 5px;
-  color: var(--color-neutral-4);
+  color: var(--color-neutral-6);
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;