From 21c0fe5cb1fe0e5169e81fcbfe9d75db5812e995 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 7 Aug 2024 17:25:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/base.css              |  1 -
 web/src/components/ChatComponent.vue |  8 ++++++--
 web/src/views/ChatView.vue           | 22 +++++++++++++++-------
 web/src/views/SettingView.vue        |  1 +
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/web/src/assets/base.css b/web/src/assets/base.css
index 3d4e5f0e..6e5c9c8d 100644
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -45,7 +45,6 @@
   --main-light-6: #FAFDFD;
   --min-width: 400px;
   --min-header-width: 80px;
-  --min-sider-width: 100px;
   --error-color: #f50a0d;
 }
 
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index cdfae57d..b7a7ac0c 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -39,10 +39,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" ref="panel">
+        <div v-if="opts.showPanel" class="my-panal swing-in-top-fwd" ref="panel">
           <div class="graphbase flex-center" v-if="configStore.config.enable_knowledge_base">
             知识库
             <div @click.stop>
@@ -776,6 +776,10 @@ button:disabled {
   border-radius: 4px;
 }
 
+.slide-out-left{-webkit-animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both}
+.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;}
+@-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}
+@-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}
 
 @media (max-width: 520px) {
   .chat {
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index dd0a00f3..d924aa94 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chat-container">
-    <div v-if="state.isSidebarOpen" class="conversations">
+    <div class="conversations" :class="['conversations', { 'is-open': state.isSidebarOpen }]">
       <div class="actions">
         <!-- <div class="action new" @click="addNewConv"><FormOutlined /></div> -->
          <span style="font-weight: bold;">对话历史</span>
@@ -120,20 +120,29 @@ onMounted(() => {
   position: relative;
 }
 
-.chat-container .conversations {
-  flex: 1 1 auto;
+.chat-container .conversations:not(.is-open) {
+  width: 0;
+  opacity: 0;
+  flex: 0 0 0;
 }
 
+.chat-container .conversations.is-open {
+  overflow: hidden; /* 确保内容不溢出 */
+  white-space: nowrap; /* 防止文本换行 */
+  flex: 1 1 auto; /* 当侧边栏打开时，占据可用空间 */
+}
 .conversations {
   display: flex;
   flex-direction: column;
-  width: 100px;
+  width: 230px; /* 初始宽度 */
   height: 100%;
+  max-width: 230px;
   overflow-y: auto;
   border-right: 1px solid var(--main-light-3);
-  min-width: var(--min-sider-width);
-  max-width: 200px;
   background-color: #FAFCFD;
+  overflow: hidden; /* 确保内容不溢出 */
+  white-space: nowrap; /* 防止文本换行 */
+  transition: all 0.2s ease-out;
 
   & .actions {
     height: var(--header-height);
@@ -234,7 +243,6 @@ onMounted(() => {
   border-radius: 4px;
 }
 
-
 @media (max-width: 520px) {
   .conversations {
     position: absolute;
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 3022df9e..7c6353fb 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -3,6 +3,7 @@
     <div class="setting">
       <h2>设置</h2>
       <h3>模型配置</h3>
+      <p>请在 <code>src/.env</code> 文件中配置对应的 APIKEY，可参考 <code>src/.env.template</code></p>
       <div class="section">
         <div class="card">
           <span class="label">