From 262eed31b261ce7c6144666fa52cd19e8840d843 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sun, 29 Sep 2024 16:13:47 +0800
Subject: [PATCH] ui

---
 web/src/components/ChatComponent.vue |  2 +-
 web/src/views/SettingView.vue        | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index cac8ad65..1135ce30 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -10,7 +10,7 @@
         >
           <MenuOutlined />
         </div>
-        <a-tooltip :title="configStore.config?.model_name">
+        <a-tooltip :title="configStore.config?.model_name" placement="rightTop">
           <div class="newchat nav-btn" @click="$emit('newconv')">
             <PlusCircleOutlined /> <span class="text">新对话</span>
           </div>
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 6a3324b8..d67a6801 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -83,7 +83,7 @@
       <div class="setting" v-if="state.section == 'model'">
         <h3>模型配置</h3>
         <p>请在 <code>src/.env</code> 文件中配置对应的 APIKEY</p>
-        <div class="model-provider-card" v-for="(item, key) in modelKeys" :key="key">
+        <div class="model-provider-card" v-for="(item, key) in modelKeys" :key="key" :style="{backgroundColor: modelProvider == item ? colorMap[item] : white }">
           <div class="card-header">
             <h3>{{ modelNames[item].name }}</h3>
             <a :href="modelNames[item].url" target="_blank">详情</a>
@@ -138,6 +138,16 @@ const state = reactive({
   section: 'base'
 })
 
+const colorMap = reactive({
+  siliconflow: '#FFECFF',
+  zhipu: '#EFF1FE',
+  qianfan: '#E8F5FE',
+  deepseek: '#D3DCFF',
+  openai: '#E5E7EB',
+  vllm: '#E5E7EB',
+  bailian: '#EFF1FE',
+})
+
 // 筛选 modelStatus 中为真的key
 const modelKeys = computed(() => {
   return Object.keys(modelStatus.value).filter(key => modelStatus.value[key])
@@ -320,7 +330,7 @@ const sendRestart = () => {
         height: 1rem;
         background-color: green;
         border-radius: 50%;
-        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 0 10px 1px rgba(  0,128,  0, 0.5);
         border: 2px solid white;
       }
 
@@ -349,6 +359,7 @@ const sendRestart = () => {
         align-items: center;
         cursor: pointer;
         box-sizing: border-box;
+        background-color: rgba(255, 255, 255, 0.6);
         &:hover {
           border-color: var(--gray-400);
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);