From 613b33251b27f08763ff5a9877d5f0227f1e4357 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Sat, 27 Jul 2024 14:32:57 +0800
Subject: [PATCH] update some web details

---
 run.sh                                   |   4 +-
 web/src/components/ChatComponent.vue     |  24 ++++-
 web/src/layouts/AppLayout.vue            | 128 ++++++++++-------------
 web/src/stores/{counter.js => config.js} |   0
 web/src/views/ChatView.vue               |   9 ++
 web/src/views/SettingView.vue            |  15 ++-
 6 files changed, 93 insertions(+), 87 deletions(-)
 rename web/src/stores/{counter.js => config.js} (100%)

diff --git a/run.sh b/run.sh
index 34060f8c..4631b502 100644
--- a/run.sh
+++ b/run.sh
@@ -4,7 +4,7 @@
 stop_services() {
     echo "Stopping services..."
     pkill -f "npm run server"
-    pkill -f "flask --app=api run"
+    pkill -f "python api.py"
     exit
 }
 
@@ -13,7 +13,7 @@ trap stop_services SIGINT SIGTERM
 
 # Start the server
 cd src
-python api.py
+python api.py &
 
 # Start the frontend service
 cd ../web
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index eb020973..5e844a45 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -39,7 +39,7 @@
           </template>
         </a-dropdown>
         <div class="nav-btn text" @click="state.showPanel = !state.showPanel">
-          <component :is="state.showPanel ? SettingFilled : SettingOutlined" /> <span class="text">选项</span>
+          <component :is="state.showPanel ? FolderOpenOutlined : FolderOutlined" /> <span class="text">选项</span>
         </div>
         <div v-if="state.showPanel" class="my-panal" ref="panel">
           <div class="graphbase flex-center">
@@ -122,7 +122,7 @@
           <template #icon> <SendOutlined v-if="!isStreaming" /> <LoadingOutlined v-else/> </template>
         </a-button>
       </div>
-      <p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性</p>
+      <p class="note">即便强如雅典娜也可能会出错，请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}</p>
     </div>
   </div>
 </template>
@@ -142,8 +142,11 @@ import {
   SettingOutlined,
   SettingFilled,
   PlusCircleOutlined,
+  FolderOutlined,
+  FolderOpenOutlined,
 } from '@ant-design/icons-vue'
 import { marked } from 'marked';
+import { useConfigStore } from '@/stores/config'
 
 const props = defineProps({
   conv: Object,
@@ -151,6 +154,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['renameTitle'])
+const configStore = useConfigStore()
 
 const { conv, state } = toRefs(props)
 const chatContainer = ref(null)
@@ -666,6 +670,22 @@ button:disabled {
     }
   }
 
+  .bottom {
+    padding: 0.5rem 0.5rem;
+
+    .input-box {
+      border-radius: 8px;
+      padding: 0.5rem;
+
+      textarea.user-input {
+        padding: 0.5rem 0;
+      }
+    }
+    .note {
+      display: none;
+    }
+  }
+
 
 
 }
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 244f340f..85a3ba03 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -7,10 +7,11 @@ import {
   SettingOutlined,
   SettingFilled,
   BookOutlined,
-  BookFilled
+  BookFilled,
+  GithubOutlined,
 } from '@ant-design/icons-vue'
 import { themeConfig } from '@/assets/theme'
-import { useConfigStore } from '@/stores/counter'
+import { useConfigStore } from '@/stores/config'
 
 const configStore = useConfigStore()
 
@@ -39,18 +40,26 @@ console.log(route)
       <div class="nav">
         <RouterLink to="/chat" class="nav-item" active-class="active">
           <component class="icon" :is="route.path === '/chat' ? MessageFilled : MessageOutlined" />
-          <span class="text">对话</span>
         </RouterLink>
         <RouterLink to="/database" class="nav-item" active-class="active">
           <component class="icon" :is="route.path.startsWith('/database') ? BookFilled : BookOutlined" />
-          <span class="text">知识</span>
         </RouterLink>
       </div>
       <div class="fill" style="flex-grow: 1;"></div>
+      <div class="github nav-item">
+        <a href="https://github.com/xerrors/ProjectAthena" target="_blank">
+          <GithubOutlined  class="icon" style="color: #222;"/>
+        </a>
+      </div>
       <RouterLink  class="nav-item setting" to="/setting" active-class="active">
         <component class="icon" :is="route.path === '/setting' ? SettingFilled : SettingOutlined" />
       </RouterLink>
     </div>
+    <div class="header-mobile">
+      <RouterLink to="/chat" class="nav-item" active-class="active">对话</RouterLink>
+      <RouterLink to="/database" class="nav-item" active-class="active">知识</RouterLink>
+      <RouterLink to="/setting" class="nav-item" active-class="active">设置</RouterLink>
+    </div>
     <a-config-provider :theme="themeConfig">
     <router-view v-slot="{ Component }" id="app-router-view">
       <keep-alive>
@@ -70,6 +79,10 @@ console.log(route)
   width: 100%;
   height: 100vh;
   min-width: var(--min-width);
+
+  .header-mobile {
+    display: none;
+  }
 }
 
 div.header, #app-router-view {
@@ -112,6 +125,28 @@ div.header, #app-router-view {
     }
   }
 
+  .nav-item {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    background-color: transparent;
+    color: #222;
+    font-size: 20px;
+    transition: background-color 0.2s ease-in-out;
+    margin: 0 10px;
+
+    &.active {
+      font-weight: bold;
+      color: var(--main-color);
+      background-color: var(--main-light-2);
+    }
+
+    &:hover {
+      background-color: var(--main-light-2);
+      cursor: pointer;
+    }
+  }
+
   .setting {
     width: auto;
     font-size: 20px;
@@ -132,95 +167,38 @@ div.header, #app-router-view {
   position: relative;
   height: 45px;
   gap: 16px;
-
-  .nav-item {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 8px;
-    background-color: transparent;
-    color: #222;
-    font-size: 20px;
-    transition: background-color 0.2s ease-in-out;
-    margin: 0 10px;
-
-    .text {
-      display: none;
-    }
-
-    &.active {
-      font-weight: bold;
-      color: var(--main-color);
-      background-color: var(--main-light-2);
-    }
-
-    &:hover {
-      background-color: var(--main-light-2);
-      cursor: pointer;
-    }
-  }
 }
 
 @media (max-width: 520px) {
   .app-layout {
     flex-direction: column-reverse;
+
+    div.header {
+      display: none;
+    }
   }
 
-  .app-layout div.header {
+  .app-layout div.header-mobile {
+    display: flex;
     flex-direction: row;
     width: 100%;
-    height: 40px;
     padding: 0 20px;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
     flex: 0 0 60px;
     border-right: none;
-    border-top: 1px solid var(--main-light-2);
-
-    .logo {
-      display: none;
-      flex-shrink: 0;
-      width: 40px;
-      height: 40px;
-      margin: 0;
-    }
-
-    .setting {
-      margin: 0;
-      width: 60px;
-    }
-  }
-
-
-
-  .app-layout .nav {
-    flex-direction: row;
-    height: 100%;
-    width: 100%;
-    justify-content: center;
-    gap: 0;
 
     .nav-item {
       text-decoration: none;
-
-      span.text {
-        display: block;
-        color: #333;
-      }
-      span.icon {
-        display: none;
-      }
-    }
-
-    .nav-item:hover {
-      background-color: transparent;
-    }
-
-    .nav-item.active {
+      width: 40px;
+      color: var(--c-text-light-2);
+      font-size: 1rem;
       font-weight: bold;
-      background-color: transparent;
+      transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out;
 
-      span.text {
-        font-weight: bold;
+      &.active {
+        color: black;
+        font-size: 1.1rem;
       }
     }
   }
diff --git a/web/src/stores/counter.js b/web/src/stores/config.js
similarity index 100%
rename from web/src/stores/counter.js
rename to web/src/stores/config.js
diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue
index 78d7ea90..c46b8295 100644
--- a/web/src/views/ChatView.vue
+++ b/web/src/views/ChatView.vue
@@ -222,4 +222,13 @@ onMounted(() => {
   }
 }
 
+@media (max-width: 520px) {
+  .conversations {
+    position: absolute;
+    z-index: 101;
+    width: 300px;
+    border-radius: 0 16px 16px 0;
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
+  }
+}
 </style>
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index 1ba6b100..db340e11 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -11,7 +11,7 @@
               <ReloadOutlined />需要重启
             </a-button>
           </span>
-          <a-select ref="select" style="width: 220px"
+          <a-select ref="select" style="width: 160px"
             :value="configStore.config?.model_provider"
             @change="handleChange('model_provider', $event)"
           >
@@ -27,7 +27,7 @@
               <ReloadOutlined />需要重启
             </a-button>
           </span>
-          <a-select style="width: 220px"
+          <a-select style="width: 160px"
             :value="configStore.config?.embed_model"
             @change="handleChange('embed_model', $event)"
           >
@@ -43,7 +43,7 @@
               <ReloadOutlined />需要重启
             </a-button>
           </span>
-          <a-select style="width: 220px"
+          <a-select style="width: 160px"
             :value="configStore.config?.reranker"
             @change="handleChange('reranker', $event)"
           >
@@ -92,7 +92,7 @@
 <script setup>
 import { message } from 'ant-design-vue';
 import { computed, reactive, ref } from 'vue'
-import { useConfigStore } from '@/stores/counter';
+import { useConfigStore } from '@/stores/config';
 import { ReloadOutlined } from '@ant-design/icons-vue';
 
 const configStore = useConfigStore()
@@ -113,13 +113,12 @@ const handleChange = (key, e) => {
 }
 const sendRestart = () => {
   console.log('Restarting...')
-  state.loading = true
+  message.loading({ content: '重新加载模型中', key: "restart", duration: 0 });
   fetch('/api/restart', {
     method: 'POST',
   }).then(() => {
     console.log('Restarted')
-    state.loading = false
-    message.success('重载成功')
+    message.success({ content: '重新加载完成!', key: "restart", duration: 2 });
     setTimeout(() => {
       window.location.reload()
     }, 1000)
@@ -143,7 +142,7 @@ const sendRestart = () => {
 
   .section {
     margin-top: 20px;
-    background-color: #FAFCFD;
+    background-color: var(--main-light-4);
     padding: 20px;
     border-radius: 8px;
     display: flex;