From e0cb01eb8db678a4cbd081057925f40ec85c7ebf Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 28 Sep 2024 00:41:02 +0800
Subject: [PATCH] update the ui

---
 web/src/assets/base.css                      | 17 ++++---
 web/src/components/ChatComponent.vue         | 49 +++++++++++++-------
 web/src/components/RefsComponent.vue         | 11 +++--
 web/src/components/TextChunkingComponent.vue |  9 ++--
 web/src/layouts/AppLayout.vue                |  7 ++-
 web/src/views/ChatView.vue                   | 11 +++--
 web/src/views/DataBaseView.vue               |  9 ++--
 web/src/views/ToolsView.vue                  |  2 +-
 8 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/web/src/assets/base.css b/web/src/assets/base.css
index c4c02eec..1ab2bfe0 100644
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -16,18 +16,21 @@
   --main-10: #F5FDFF;
   --main-5: #FAFCFD;
 
+  --gray-10000: #000000;
   --gray-2000: #0C1214;
   --gray-1000: #171C1F;
   --gray-900: #212729;
   --gray-800: #42484A;
   --gray-700: #616161;
-  --gray-600: #8C9194;
-  --gray-500: #A7ACAF;
-  --gray-400: #C2C7CA;
-  --gray-300: #DEE3E6;
-  --gray-200: #EFF1F4;
-  --gray-100: #F8FAFD;
-  --gray-50: #FBFDFF;
+  --gray-600: #8C9193;
+  --gray-500: #A7ACAD;
+  --gray-400: #C4C7C8;
+  --gray-300: #DFE3E4;
+  --gray-200: #EFF1F2;
+  --gray-100: #F8FAFB;
+  --gray-50: #FBFDFE;
+  --gray-10: #FDFEFF;
+  --gray-0: #FFFFFF;
 
   --main-color: #1c6586;
   --main-color-dark: #004d5c;
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index f3b516c9..cac8ad65 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -10,12 +10,11 @@
         >
           <MenuOutlined />
         </div>
-        <div
-          class="newchat nav-btn"
-          @click="$emit('newconv')"
-        >
-          <PlusCircleOutlined /> <span class="text">{{ configStore.config?.model_name }}</span>
-        </div>
+        <a-tooltip :title="configStore.config?.model_name">
+          <div class="newchat nav-btn" @click="$emit('newconv')">
+            <PlusCircleOutlined /> <span class="text">新对话</span>
+          </div>
+        </a-tooltip>
       </div>
       <div class="header__right">
         <!-- <div class="nav-btn text metas">
@@ -39,10 +38,10 @@
             </a-menu>
           </template>
         </a-dropdown>
-        <div class="nav-btn text " @click="opts.showPanel = !opts.showPanel">
+        <div class="nav-btn text" @click="opts.showPanel = !opts.showPanel">
           <component :is="opts.showPanel ? FolderOpenOutlined : FolderOutlined" /> <span class="text">选项</span>
         </div>
-        <div v-if="opts.showPanel" class="my-panal swing-in-top-fwd" ref="panel">
+        <div v-if="opts.showPanel" class="my-panal r0 top100 swing-in-top-fwd" ref="panel">
           <div class="flex-center" v-if="configStore.config.enable_knowledge_base">
             知识库
             <div @click.stop>
@@ -93,7 +92,7 @@
           class="opt__button"
           v-for="(exp, key) in examples"
           :key="key"
-          @click="autoSend(exp)"
+          @click="conv.inputText = exp"
         >
           {{ exp }}
         </div>
@@ -113,11 +112,10 @@
           <div></div>
         </div>
         <div v-else-if="message.text.length == 0 || message.status == 'error'" class="err-msg">请求错误，请重试</div>
-        <p v-else
+        <div v-else
           v-html="renderMarkdown(message)"
           class="message-md"
-          @click="consoleMsg(message)"></p>
-
+          @click="consoleMsg(message)"></div>
         <RefsComponent v-if="message.role=='received' && message.status=='finished'" :message="message" />
       </div>
     </div>
@@ -180,11 +178,11 @@ const { conv, state } = toRefs(props)
 const chatContainer = ref(null)
 const isStreaming = ref(false)
 const panel = ref(null)
+const modelCard = ref(null)
 const examples = ref([
   '写一个冒泡排序',
   '肉碱的分子量是多少？直接回答',
-  '简述大蒜的功效是什么？',
-  'A大于B，B小于C，A和C哪个大？',
+  '总结大蒜的功效是什么？',
   '今天天气怎么样？',
   '吃饭吃出苍蝇可以索赔吗？',
   '帮我写一个请假条',
@@ -192,6 +190,7 @@ const examples = ref([
 
 const opts = reactive({
   showPanel: false,
+  showModelCard: false,
   openDetail: false,
   databases: [],
 })
@@ -221,9 +220,10 @@ const marked = new Marked(
   })
 );
 
-
 const consoleMsg = (message) => console.log(message)
 onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30))
+onClickOutside(modelCard, () => setTimeout(() => opts.showModelCard = false, 30))
+
 const renderMarkdown = (message) => {
   if (message.status === 'loading') {
     return marked.parse(message.text + '🟢')
@@ -523,8 +523,6 @@ watch(
 
 .my-panal {
   position: absolute;
-  top: 100%;
-  right: 0;
   margin-top: 5px;
   background-color: white;
   border: 1px solid #ccc;
@@ -550,6 +548,15 @@ watch(
   }
 }
 
+.my-panal.r0.top100 {
+  top: 100%;
+  right: 0;
+}
+
+.my-panal.l0.top100 {
+  top: 100%;
+  left: 0;
+}
 
 .chat-examples {
   padding: 0 50px;
@@ -572,7 +579,7 @@ watch(
     gap: 10px;
 
     .opt__button {
-      background-color: #f2f5f5;
+      background-color: var(--gray-200);
       color: #333;
       padding: .5rem 1.5rem;
       border-radius: 2rem;
@@ -869,4 +876,10 @@ watch(
     padding: 0;
   }
 }
+
+.message-md {
+  h1, h2, h3, h4, h5, h6 {
+    font-size: 1rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/web/src/components/RefsComponent.vue b/web/src/components/RefsComponent.vue
index 22c60354..78f874ac 100644
--- a/web/src/components/RefsComponent.vue
+++ b/web/src/components/RefsComponent.vue
@@ -164,24 +164,25 @@ const getPercent = (value) => {
 .refs {
   display: flex;
   margin-bottom: 20px;
-  color: var(--c-text-light-4);
+  color: var(--gray-500);
   font-size: 14px;
   gap: 10px;
 
   .item {
-    background: var(--main-25);
-    color: var(--main-500);
+    background: var(--gray-100);
+    color: var(--gray-800);
     padding: 2px 8px;
     border-radius: 8px;
     font-size: 14px;
+    user-select: none;
 
     &.btn {
       cursor: pointer;
       &:hover {
-        background: var(--main-25);
+        background: var(--gray-200);
       }
       &:active {
-        background: var(--main-50);
+        background: var(--gray-300);
       }
     }
   }
diff --git a/web/src/components/TextChunkingComponent.vue b/web/src/components/TextChunkingComponent.vue
index 1afd812e..dc1d5811 100644
--- a/web/src/components/TextChunkingComponent.vue
+++ b/web/src/components/TextChunkingComponent.vue
@@ -30,7 +30,7 @@
     <div class="result-container">
       <div class="input-container">
         <div class="actions">
-          <span :class="{'active': !state.useFile}" @click="state.useFile = false">上传文本</span>
+          <span :class="{'active': !state.useFile}" @click="state.useFile = false">输入文本</span>
           <span :class="{'active': state.useFile}" @click="state.useFile = true">上传文件</span>
         </div>
         <div class="upload" v-if="state.useFile">
@@ -189,18 +189,19 @@ const chunkText = async () => {
         margin-bottom: 10px;
         width: fit-content;
         background-color: var(--gray-200);
-        padding: 8px 6px;
-        border-radius: 8px;
+        padding: 4px;
+        border-radius: 4px;
 
         span {
           color: var(--gray-900);
           cursor: pointer;
           padding: 4px 10px;
-          border-radius: 8px;
+          border-radius: 4px;
           transition: background-color 0.3s;
 
           &.active {
             background-color: white;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)
           }
         }
       }
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index f519d108..f1f74ca2 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -175,10 +175,10 @@ div.header, #app-router-view {
   flex: 0 0 70px;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--main-light-4);
+  background-color: var(--gray-100);
   height: 100%;
   width: 74px;
-  border-right: 1px solid var(--main-light-3);
+  border-right: 1px solid var(--gray-300);
 
   .logo {
     width: 40px;
@@ -237,8 +237,7 @@ div.header, #app-router-view {
     &.active {
       font-weight: bold;
       color: var(--main-600);
-      background-color: rgba(255, 255, 255, 0.8);
-      backdrop-filter: blur(10px);
+      background-color: white;
       border: 1px solid white;
     }
 
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index 10912054..fc982936 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -182,6 +182,7 @@ onMounted(() => {
     cursor: pointer;
     width: 100%;
     user-select: none;
+    transition: background-color 0.2s ease-in-out;
 
     &__title {
       color: var(--gray-700);
@@ -192,7 +193,8 @@ onMounted(() => {
 
     &__delete {
       display: none;
-      color: #7D7D7D;
+      color: var(--gray-500);
+      transition: all 0.2s ease-in-out;
 
       &:hover {
         color: #F93A37;
@@ -203,20 +205,21 @@ onMounted(() => {
     &.active {
       border-right: 3px solid var(--main-500);
       padding-right: 13px;
-      background-color: var(--main-light-3);
+      background-color: var(--gray-200);
 
       & .conversation__title {
-        color: var(--main-900);
+        color: var(--gray-1000);
       }
     }
 
-    &:hover {
+    &:not(.active):hover {
       background-color: var(--main-light-3);
 
       & .conversation__delete {
         display: block;
       }
     }
+
   }
 }
 
diff --git a/web/src/views/DataBaseView.vue b/web/src/views/DataBaseView.vue
index fe54bfb2..98ee15eb 100644
--- a/web/src/views/DataBaseView.vue
+++ b/web/src/views/DataBaseView.vue
@@ -197,8 +197,8 @@ onMounted(() => {
 }
 .databases {
   padding: 20px;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 16px;
 
   .new-database {
@@ -207,7 +207,6 @@ onMounted(() => {
 }
 
 .database, .graphbase {
-  flex: 1 1 380px;
   background-color: white;
   box-shadow: 0px 1px 2px 0px rgba(16,24,40,.06),0px 1px 3px 0px rgba(16,24,40,.1);
   border: 2px solid white;
@@ -219,14 +218,12 @@ onMounted(() => {
 }
 
 .dbcard, .database {
+  width: 100%;
   padding: 10px;
   border-radius: 12px;
-  width: 340px;
   height: 160px;
   padding: 20px;
   cursor: pointer;
-  flex: 1 1 380px;
-  max-width: 450px;
 
   .top {
     display: flex;
diff --git a/web/src/views/ToolsView.vue b/web/src/views/ToolsView.vue
index 84a9569c..98df0d32 100644
--- a/web/src/views/ToolsView.vue
+++ b/web/src/views/ToolsView.vue
@@ -83,7 +83,7 @@ onMounted(() => {
     cursor: pointer;
 
     &:hover {
-      transform: translateY(-3px);
+      transform: translateY(-1px);
       box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }