perf: webui styles

web/src/app/home/components/home-sidebar/HomeSidebar.module.css

@@ -14,22 +14,33 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
+    gap: 0.8rem;
 
     .langbotIcon {
-        width: 54px;
-        height: 54px;
-        border-radius: 12px;
-        background: #2288ee;
+        width: 2.8rem;
+        height: 2.8rem;
         color: #fbfbfb;
-        font-weight: 600;
-        font-size: 36px;
-        line-height: 54px;
-        text-align: center;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .langbotTextContainer {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        gap: 0.1rem;
     }
 
     .langbotText {
-        font-size: 26px;
+        font-size: 1.4rem;
+        font-weight: 500;
+    }
+
+    .langbotVersion {
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: #6C6C6C;
     }
 }
 

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/app/home/components/home-sidebar/HomeSidebarChild';
 import { useRouter, usePathname } from 'next/navigation';
 import { sidebarConfigList } from '@/app/home/components/home-sidebar/sidbarConfigList';
+import langbotIcon from '../../assets/langbot-logo.webp';
 
 // TODO 侧边导航栏要加动画
 export default function HomeSidebar({
@@ -72,8 +73,12 @@ export default function HomeSidebar({
       {/* LangBot、ICON区域 */}
       <div className={`${styles.langbotIconContainer}`}>
         {/* icon */}
-        <div className={`${styles.langbotIcon}`}>L</div>
-        <div className={`${styles.langbotText}`}>Langbot</div>
+        <img className={`${styles.langbotIcon}`} src={langbotIcon.src} alt="langbot-icon" />
+        {/* 文字 */}
+        <div className={`${styles.langbotTextContainer}`}>
+          <div className={`${styles.langbotText}`}>LangBot</div>
+          <div className={`${styles.langbotVersion}`}>v4.0.0</div>
+        </div>
       </div>
       {/* 菜单列表，后期可升级成配置驱动 */}
       <div>

web/src/app/home/models/component/llm-card/LLMCard.module.css

@@ -3,8 +3,13 @@
     height: 10rem;
     background-color: #fff;
     border-radius: 10px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
     padding: 1.2rem;
+    cursor: pointer;
+}
+
+.cardContainer:hover {
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
 }
 
 .iconBasicInfoContainer {
@@ -50,7 +55,7 @@
 
 .providerLabel {
     font-size: 1.2rem;
-    font-weight: bold;
+    font-weight: 600;
     color: #626262;
 }
 

web/src/app/home/models/page.tsx

@@ -21,7 +21,15 @@ export default function LLMConfigPage() {
     getLLMModelList();
   }, []);
 
-  function getLLMModelList() {
+  async function getLLMModelList() {
+    const requesterNameListResp = await httpClient.getProviderRequesters();
+    const requesterNameList = requesterNameListResp.requesters.map((item) => {
+      return {
+        label: item.label.zh_CN,
+        value: item.name,
+      };
+    });
+
     httpClient
       .getProviderLLMModels()
       .then((resp) => {
@@ -31,7 +39,7 @@ export default function LLMConfigPage() {
             id: model.uuid,
             iconURL: httpClient.getProviderRequesterIconURL(model.requester),
             name: model.name,
-            providerLabel: model.requester.substring(0, 10),
+            providerLabel: requesterNameList.find((item) => item.value === model.requester)?.label || model.requester.substring(0, 10),
             baseURL: model.requester_config?.base_url,
             abilities: model.abilities,
           });

web/src/app/infra/basic-component/create-card-component/createCartComponent.module.css

@@ -1,11 +1,16 @@
 .cardContainer {
     background-color: #FFF;
     border-radius: 9px;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
+    cursor: pointer;
+}
+
+.cardContainer:hover {
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
 }
 
 .createCardContainer {