From 35997f8669908bb8004dc67f8726191747c3801c Mon Sep 17 00:00:00 2001
From: Wee <1275919414@qq.com>
Date: Sun, 5 May 2024 02:27:42 +0800
Subject: [PATCH] feat: fix chat style and add login page

---
 components.d.ts                       |  10 --
 src/lang/enUS.ts                      |   9 ++
 src/lang/zhCN.ts                      |   9 ++
 src/layout/components/chatbot-box.vue | 199 ++++++++++++--------------
 src/main.ts                           |  15 +-
 src/router/basic.ts                   |  45 ++++++
 src/router/guards.ts                  |  26 ++++
 src/router/index.ts                   |  48 ++-----
 src/store/userStore.ts                |  27 ++--
 src/views/login/index.vue             | 106 ++++++++++++++
 10 files changed, 326 insertions(+), 168 deletions(-)
 create mode 100644 src/router/basic.ts
 create mode 100644 src/router/guards.ts
 create mode 100644 src/views/login/index.vue

diff --git a/components.d.ts b/components.d.ts
index ec15470c..23bb044b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,17 +8,11 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AppProvider: typeof import('./src/components/AppProvider.vue')['default']
-    CodeBlock: typeof import('./src/components/code-block.vue')['default']
     MarkdownRender: typeof import('./src/components/MarkdownRender.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
-    NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NButtonGroup: typeof import('naive-ui')['NButtonGroup']
     NCard: typeof import('naive-ui')['NCard']
-    'NCard:': typeof import('naive-ui')['NCard:']
-    NCardBody: typeof import('naive-ui')['NCardBody']
-    NCardFooter: typeof import('naive-ui')['NCardFooter']
-    NCardHeader: typeof import('naive-ui')['NCardHeader']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
@@ -43,13 +37,9 @@ declare module 'vue' {
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
-    NSpace: typeof import('naive-ui')['NSpace']
     NSplit: typeof import('naive-ui')['NSplit']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
-    NTooltip: typeof import('naive-ui')['NTooltip']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterMain: typeof import('./src/components/RouterMain.vue')['default']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index dcd48fd5..e37d3e9b 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -85,4 +85,13 @@ export const enUS = {
     skip: 'Skip this version',
     later: 'Later',
   },
+  login: {
+    title: 'Log In',
+    name: 'User Name',
+    password: 'User Password',
+    forget: 'Forgot password?',
+    register: 'No account? Register Now',
+    enterName: 'Please enter one user name',
+    enterPwd: 'Please enter password',
+  },
 };
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index 8c0d1d15..2b0f3884 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -85,4 +85,13 @@ export const zhCN = {
     download: '下载',
     later: '忽略',
   },
+  login: {
+    title: '登录',
+    name: '用户名',
+    password: '密码',
+    forget: '忘记密码？',
+    register: '没有账号？立即注册',
+    enterName: '请输入用户名',
+    enterPwd: '请输入密码',
+  },
 };
diff --git a/src/layout/components/chatbot-box.vue b/src/layout/components/chatbot-box.vue
index 890214fe..26f21ae5 100644
--- a/src/layout/components/chatbot-box.vue
+++ b/src/layout/components/chatbot-box.vue
@@ -1,30 +1,25 @@
 <template>
-  <n-card
-    class="chat-box-container"
-    :title="$t('aside.chatBot')"
-    content-class="chat-box-content"
-    :segmented="{
-      content: true,
-      footer: 'segmented',
-    }"
-  >
-    <div class="message-list-box">
-      <n-scrollbar ref="scrollbar" :style="scrollBarStyle">
+  <div class="chat-box-container">
+    <div class="header-title">
+      {{ $t('aside.chatBot') }}
+    </div>
+    <div class="message-list">
+      <n-scrollbar ref="scrollbarRef" style="height: 100%">
         <div v-for="msg in chats[0]?.messages" :key="msg.id">
           <div
             :class="[
-              msg.role === ChatMessageRole.USER ? 'message-item-container-user' : '',
-              'message-item-container',
+              'message-row',
+              msg.role === ChatMessageRole.USER ? 'user' : '',
             ]"
           >
-            <div class="message-item-header">
+            <div class="message-row-header">
               <n-icon size="26">
                 <bot v-if="msg.role === ChatMessageRole.BOT" />
                 <face-cool v-else />
               </n-icon>
               <span>{{ msg.role }}</span>
             </div>
-            <div class="message-item-content">
+            <div class="message-row-content">
               <markdown-render :markdown="msg.content" />
             </div>
           </div>
@@ -36,52 +31,53 @@
         </div>
       </n-scrollbar>
     </div>
-    <template #footer>
-      <div class="message-box">
+    <div class="message-footer">
+      <div class="chat-input">
         <n-input
-          v-model:value="message"
+          v-model:value="chatMsg"
           type="textarea"
           :autosize="{
             minRows: 3,
+            maxRows: 6,
           }"
+          @keyup.enter="submitMsg"
           placeholder="Type your message here..."
         />
-        <n-button-group class="message-action-box">
-          <n-button text>
-            <template #icon></template>
-          </n-button>
-          <n-button text @click="submitMsg">
-            <template #icon>
-              <n-icon size="26">
-                <send-alt />
-              </n-icon>
-            </template>
-          </n-button>
-        </n-button-group>
       </div>
-    </template>
-  </n-card>
+      <div class="footer-opration">
+        <n-button type="primary" :disabled="!chatMsg" @click="submitMsg">
+          <n-icon size="26">
+            <SendAlt />
+          </n-icon>
+        </n-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ChatMessageRole, useChatStore } from '../../store';
-import { ref } from 'vue';
-import { Bot, FaceCool, SendAlt } from '@vicons/carbon';
 import { storeToRefs } from 'pinia';
+import { Bot, SendAlt } from '@vicons/carbon';
+import { ChatMessageRole, useChatStore } from '../../store';
 import MarkdownRender from '../../components/MarkdownRender.vue';
 
 const chatStore = useChatStore();
-const { sendMessage, fetchChats } = chatStore;
 const { chats } = storeToRefs(chatStore);
+const { sendMessage, fetchChats } = chatStore;
 
-const chatBotNotification = ref({ enabled: false, level: '', message: '' });
-
-const message = ref(''); // to hold the message
-const scrollbar = ref(null);
-const submitMsg = async () => {
+const scrollbarRef = ref(null);
+const chatMsg = ref(''); // 聊天消息
+const chatBotNotification = ref({
+  enabled: false,
+  level: '',
+  message: '',
+});
+// 提交消息
+const submitMsg = () => {
+  console.log(chatMsg.value);
   chatBotNotification.value = { enabled: false, level: '', message: '' };
-  if (message.value.trim().length < 1) return;
-  sendMessage(message.value)
+  if (!chatMsg.value.trim().length) return;
+  sendMessage(chatMsg.value)
     .catch(err => {
       chatBotNotification.value = {
         enabled: true,
@@ -90,34 +86,13 @@ const submitMsg = async () => {
       };
     })
     .finally(() => {
-      scrollbar.value.scrollTo({ top: 999999 });
+      scrollbarRef.value.scrollTo({ top: 999999 });
     });
-  message.value = '';
-};
-
-const msgBoxHeight = ref(449);
-const scrollBarStyle = computed(() => `max-height: ${msgBoxHeight.value}px`);
-
-const updateHeight = () => {
-  const chatMsgContent = document.querySelector('.chat-box-container .message-list-box');
-  if (chatMsgContent.clientHeight > window.innerHeight - 200) {
-    msgBoxHeight.value = 449;
-    return;
-  }
-  msgBoxHeight.value = chatMsgContent.clientHeight;
+  chatMsg.value = '';
 };
-
-onMounted(() => {
-  window.addEventListener('resize', updateHeight);
-  updateHeight();
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateHeight);
-});
 fetchChats()
   .then(() => {
-    scrollbar.value.scrollTo({ top: 999999 });
+    scrollbarRef.value.scrollTo({ top: 999999 });
   })
   .catch(err => {
     chatBotNotification.value = {
@@ -130,60 +105,74 @@ fetchChats()
 
 <style lang="scss" scoped>
 .chat-box-container {
-  width: 500px;
-
-  .n-card__content {
-    margin: 0;
-    padding: 0;
+  height: 100%;
+  width: 460px;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--border-color);
+  .header-title {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+    font-size: 18px;
+    font-weight: bold;
+    border-bottom: 1px solid var(--border-color);
   }
-
-  .message-list-box {
-    height: 100%;
-    padding: 0;
-    margin: 0;
-
-    .message-item-container {
+  .message-list {
+    flex: 1;
+    height: 0;
+    padding: 10px;
+    .message-row {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       padding: 10px;
-
-      .message-item-header {
+      &.user {
+        background-color: var(--bg-color);
+        border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
+      }
+      &-header {
         display: flex;
         align-items: center;
-
         span {
           font-weight: bold;
         }
-
         .n-icon {
           margin-right: 10px;
         }
       }
-    }
-
-    .message-item-container-user {
-      background-color: var(--bg-color);
-      border-top: 1px solid var(--border-color);
-      border-bottom: 1px solid var(--border-color);
-    }
-    .message-item-content > pre {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      white-space: pre-wrap;
-      text-wrap: wrap;
+      &-content {
+        pre {
+          width: 100%;
+          margin: 0;
+          padding: 0;
+          white-space: pre-wrap;
+          text-wrap: wrap;
+        }
+      }
     }
   }
-
-  .message-box {
-    background-color: var(--border-color);
-
-    .message-action-box {
-      display: flex;
-      justify-content: space-between;
-      height: 20px;
-      padding: 10px;
+  .message-footer {
+    padding: 0 10px 10px 10px;
+    position: relative;
+    z-index: 1;
+    .chat-input {
+      height: fit-content;
+    }
+    .footer-opration {
+      position: absolute;
+      bottom: 13px;
+      right: 13px;
+      z-index: 2;
+      height: 30px;
+      .n-button {
+        width: 40px;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        color: #fff;
+      }
     }
   }
 }
diff --git a/src/main.ts b/src/main.ts
index 6ba392bd..82bf28a5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,16 +1,19 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import router from './router';
 import store from './store';
+import { setupRouter } from './router';
 import { lang } from './lang';
 
 import './assets/styles/normalize.css';
 import './assets/styles/theme.scss';
 
-const app = createApp(App);
+async function bootstrap() {
+  const app = createApp(App);
 
-app.use(router);
-app.use(store);
-app.use(lang);
+  setupRouter(app);
+  app.use(store);
+  app.use(lang);
 
-app.mount('#app');
+  app.mount('#app');
+}
+bootstrap();
diff --git a/src/router/basic.ts b/src/router/basic.ts
new file mode 100644
index 00000000..60456a0b
--- /dev/null
+++ b/src/router/basic.ts
@@ -0,0 +1,45 @@
+export const basicRoutes = [
+  {
+    path: '/login',
+    name: 'Login',
+    meta: {
+      keepAlive: false,
+    },
+    component: () => import('../views/login/index.vue'),
+  },
+  {
+    path: '/',
+    name: 'Layout',
+    meta: {
+      keepAlive: false,
+    },
+    component: () => import('../layout/index.vue'),
+    redirect: '/connect',
+    children: [
+      {
+        name: 'Connect',
+        path: '/connect',
+        meta: {
+          keepAlive: false,
+        },
+        component: () => import('../views/connect/index.vue'),
+      },
+      {
+        name: 'History',
+        path: '/history',
+        meta: {
+          keepAlive: false,
+        },
+        component: () => import('../views/history/index.vue'),
+      },
+      {
+        name: 'Setting',
+        path: '/setting',
+        meta: {
+          keepAlive: false,
+        },
+        component: () => import('../views/setting/index.vue'),
+      },
+    ],
+  },
+];
diff --git a/src/router/guards.ts b/src/router/guards.ts
new file mode 100644
index 00000000..7673b51f
--- /dev/null
+++ b/src/router/guards.ts
@@ -0,0 +1,26 @@
+import { Router } from 'vue-router';
+import { useUserStore } from './../store';
+
+const LOGIN_PATH = '/login';
+
+export function createRouterGuards(router: Router) {
+  router.beforeEach(async (to, from, next) => {
+    const userStore = useUserStore();
+    const token = userStore.getToken;
+    if (token) {
+      // 有token
+      if (to.path === LOGIN_PATH) {
+        next('/');
+      } else {
+        next();
+      }
+    } else {
+      // 无token，跳转到登录页
+      if (to.path === LOGIN_PATH) {
+        next();
+      } else {
+        next(LOGIN_PATH);
+      }
+    }
+  });
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 2dc53dd4..a27c54ee 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,44 +1,14 @@
 import { createMemoryHistory, createRouter } from 'vue-router';
+import { basicRoutes } from './basic';
+import { createRouterGuards } from './guards';
 
-const router = createRouter({
+export const router = createRouter({
   history: createMemoryHistory(),
   scrollBehavior: () => ({ left: 0, top: 0 }),
-  routes: [
-    {
-      path: '/',
-      name: 'Layout',
-      meta: {
-        keepAlive: false,
-      },
-      component: () => import('../layout/index.vue'),
-      redirect: '/connect',
-      children: [
-        {
-          name: 'Connect',
-          path: '/connect',
-          meta: {
-            keepAlive: false,
-          },
-          component: () => import('../views/connect/index.vue'),
-        },
-        {
-          name: 'History',
-          path: '/history',
-          meta: {
-            keepAlive: false,
-          },
-          component: () => import('../views/history/index.vue'),
-        },
-        {
-          name: 'Setting',
-          path: '/setting',
-          meta: {
-            keepAlive: false,
-          },
-          component: () => import('../views/setting/index.vue'),
-        },
-      ],
-    },
-  ],
+  routes: basicRoutes,
 });
-export default router;
+
+export async function setupRouter(app: App) {
+  createRouterGuards(router);
+  app.use(router);
+}
diff --git a/src/store/userStore.ts b/src/store/userStore.ts
index c079e3cd..28fd4900 100644
--- a/src/store/userStore.ts
+++ b/src/store/userStore.ts
@@ -1,13 +1,24 @@
 import { defineStore } from 'pinia';
 
 export const useUserStore = defineStore('user', {
-  state() {
-    return {
-      userInfo: {
-        id: 1,
-      },
-    };
+  state: () => ({
+    accessToken: '', // 访问令牌
+  }),
+  getters: {
+    getToken(): string {
+      return this.accessToken;
+    },
+  },
+  actions: {
+    setToken(accessToken: string): void {
+      this.accessToken = accessToken;
+    },
+    resetToken(): void {
+      this.accessToken = '';
+    },
+  },
+  persist: {
+    paths: ['accessToken'],
+    storage: localStorage,
   },
-  getters: {},
-  actions: {},
 });
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 00000000..95b72334
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="login-container">
+    <div class="login-form-content">
+      <h1>DocKit</h1>
+      <n-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginRules"
+        :show-label="false"
+      >
+        <n-form-item path="name">
+          <n-input
+            v-model:value="loginForm.name"
+            clearable
+            :placeholder="$t('login.enterName')"
+          />
+        </n-form-item>
+        <n-form-item path="password">
+          <n-input v-model:value="loginForm.password"
+            type="password"
+            show-password-on="mousedown"
+            :placeholder="$t('login.enterPwd')"
+          />
+        </n-form-item>
+        <n-button type="primary" @click="handleLogin">
+          {{ $t('login.title') }}
+        </n-button>
+      </n-form>
+      <div class="opration">
+        <div class="left">{{ $t('login.forget') }}</div>
+        <div class="right">{{ $t('login.register') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FormRules } from 'naive-ui'
+import { useUserStore } from './../../store'
+import { router } from './../../router';
+import { useLang } from './../../lang';
+
+const userStore = useUserStore()
+const lang = useLang();
+
+const loginFormRef = ref(null);
+const loginForm = ref({
+  name: '',
+  password: '',
+})
+const loginRules: FormRules = ref({
+  name: [
+    {
+      required: true,
+      message: lang.t('login.enterName'),
+      trigger: ['input', 'blur'],
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: lang.t('login.enterPwd'),
+      trigger: ['input', 'blur'],
+    }
+  ]
+})
+
+const handleLogin = (e: MouseEvent) => {
+  e.preventDefault()
+  loginFormRef.value.validate((errors) => {
+    if (!errors) {
+      userStore.setToken('setToken')
+      router.push('/')
+    }
+  })
+}
+
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .login-form-content {
+    width: 280px;
+    text-align: center;
+    .n-button {
+      width: 100%;
+    }
+    .opration {
+      height: 40px;
+      line-height: 40px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+      .left,
+      .right {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file