UI优化

classfang · Apr 25, 2024 · e78e28e · e78e28e
1 parent 36a618a
commit e78e28e
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aihub",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "An Electron application for AI",
   "main": "./out/main/index.js",
   "author": "junki.cn",

diff --git a/src/renderer/src/assets/css/styles.less b/src/renderer/src/assets/css/styles.less
@@ -133,3 +133,11 @@ img {
 .z-index-max {
   z-index: 999999;
 }
+
+// 选中边框样式
+.before-active-border {
+  border: 2px solid transparent;
+}
+.active-border {
+  border: 2px solid var(--color-fill-3);
+}
diff --git a/src/renderer/src/components/modal/PromptList.vue b/src/renderer/src/components/modal/PromptList.vue
@@ -70,12 +70,12 @@ const selectPrompt = (prompt: string) => {
   overflow-y: auto;
 
   .prompt-item {
-    padding: 10px;
-    transition: all 100ms linear;
+    padding: 8px;
     border-radius: var(--border-radius-small);
+    border: 2px solid transparent;
 
     &:hover {
-      background-color: var(--color-fill-2);
+      border: 2px solid var(--color-fill-3);
     }
 
     &:active {

diff --git a/src/renderer/src/components/views/chat-plugin/chat-plugin-list/ChatPluginItem.vue b/src/renderer/src/components/views/chat-plugin/chat-plugin-list/ChatPluginItem.vue
@@ -17,9 +17,9 @@ const itemActive = () => {
 
 <template>
   <div
-    class="chat-plugin-item"
+    class="chat-plugin-item before-active-border"
     :class="{
-      'chat-plugin-item-active': chatPluginStore.currentChatPluginId === chatPlugin.id
+      'active-border': chatPluginStore.currentChatPluginId === chatPlugin.id
     }"
     @click="itemActive"
   >
@@ -36,7 +36,7 @@ const itemActive = () => {
 .chat-plugin-item {
   width: 100%;
   box-sizing: border-box;
-  padding: 15px;
+  padding: 13px;
   background-color: var(--color-fill-1);
   border-radius: var(--border-radius-small);
   display: flex;
@@ -76,8 +76,4 @@ const itemActive = () => {
     }
   }
 }
-
-.chat-plugin-item-active {
-  background-color: var(--color-fill-3);
-}
 </style>
diff --git a/src/renderer/src/components/views/chat2assistant/assistant-list/AssistantItem.vue b/src/renderer/src/components/views/chat2assistant/assistant-list/AssistantItem.vue
@@ -94,9 +94,9 @@ watch(
 
 <template>
   <div
-    class="assistant-item"
+    class="assistant-item before-active-border"
     :class="{
-      'assistant-item-active':
+      'active-border':
         (isVirtual
           ? assistantStore.currentVirtualAssistantId
           : assistantStore.currentAssistantId) === assistant.id
@@ -157,7 +157,7 @@ watch(
 .assistant-item {
   width: 100%;
   box-sizing: border-box;
-  padding: 15px;
+  padding: 13px;
   background-color: var(--color-fill-1);
   border-radius: var(--border-radius-small);
   display: flex;
@@ -264,8 +264,4 @@ watch(
     }
   }
 }
-
-.assistant-item-active {
-  background-color: var(--color-fill-3);
-}
 </style>
diff --git a/src/renderer/src/components/views/collection-set/CollectionSet.vue b/src/renderer/src/components/views/collection-set/CollectionSet.vue
@@ -110,7 +110,7 @@ const newNote = () => {
         />
       </div>
       <a-button class="new-note-btn" @click="newNote()">
-        <a-space :size="5">
+        <a-space :size="10">
           <icon-plus-circle :size="18" :stroke-width="3" />
           <span>{{ $t('collectionSet.note.new') }}</span>
         </a-space>
@@ -123,8 +123,8 @@ const newNote = () => {
           <div
             v-for="c in collectionItemListFilter"
             :key="c.id"
-            class="collection"
-            :class="{ 'collection-active': c.id === currentCollectionItemId }"
+            class="collection before-active-border"
+            :class="{ 'active-border': c.id === currentCollectionItemId }"
             @click="currentCollectionItemId = c.id"
           >
             <div class="collection-body">
@@ -395,7 +395,7 @@ const newNote = () => {
 
         .collection {
           box-sizing: border-box;
-          padding: 15px;
+          padding: 13px;
           background-color: var(--color-fill-1);
           border-radius: var(--border-radius-small);
           display: flex;
@@ -451,10 +451,6 @@ const newNote = () => {
             }
           }
         }
-
-        .collection-active {
-          background-color: var(--color-fill-3);
-        }
       }
     }
   }

diff --git a/src/renderer/src/components/views/knowledge-base/knowledge-base-list/KnowledgeBaseItem.vue b/src/renderer/src/components/views/knowledge-base/knowledge-base-list/KnowledgeBaseItem.vue
@@ -22,9 +22,9 @@ const itemActive = () => {
 
 <template>
   <div
-    class="knowledge-base-item"
+    class="knowledge-base-item before-active-border"
     :class="{
-      'knowledge-base-item-active': knowledgeBaseStore.currentKnowledgeBaseId === knowledgeBase.id
+      'active-border': knowledgeBaseStore.currentKnowledgeBaseId === knowledgeBase.id
     }"
     @click="itemActive"
   >
@@ -41,7 +41,7 @@ const itemActive = () => {
 .knowledge-base-item {
   width: 100%;
   box-sizing: border-box;
-  padding: 15px;
+  padding: 13px;
   background-color: var(--color-fill-1);
   border-radius: var(--border-radius-small);
   display: flex;
@@ -81,8 +81,4 @@ const itemActive = () => {
     }
   }
 }
-
-.knowledge-base-item-active {
-  background-color: var(--color-fill-3);
-}
 </style>