update some web details

2024-07-27 14:32:57 +08:00 · 2024-07-27 14:32:57 +08:00 · 613b33251b
commit 613b33251b
parent 9e082e8ab1
6 changed files with 93 additions and 87 deletions
--- 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
--- 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;
+    }
+  }
+


 }
--- 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;
      }
    }
  }
--- a/web/src/stores/counter.js
+++ b/web/src/stores/counter.js
--- 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>
--- 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;