From 4b46d847f0dd89fa5c7fe07b4d99c9882081c61a Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Fri, 8 Sep 2023 22:14:58 +0800
Subject: [PATCH] opt: refactor the web page's router and layout

---
 api/handler/chat_handler.go       |  7 +++-
 web/src/assets/css/chat-plus.styl |  3 +-
 web/src/router.js                 | 41 +++++++++++-----------
 web/src/views/ChatPlus.vue        |  4 +--
 web/src/views/Home.vue            | 57 +++++++++++++++----------------
 5 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/api/handler/chat_handler.go b/api/handler/chat_handler.go
index baaa1e86..83378e03 100644
--- a/api/handler/chat_handler.go
+++ b/api/handler/chat_handler.go
@@ -134,6 +134,7 @@ func (h *ChatHandler) ChatHandle(c *gin.Context) {
 			err = h.sendMessage(ctx, session, chatRole, message, client)
 			if err != nil {
 				logger.Error(err)
+				utils.ReplyChunkMessage(client, types.WsMessage{Type: types.WsEnd})
 			} else {
 				utils.ReplyChunkMessage(client, types.WsMessage{Type: types.WsEnd})
 				logger.Info("回答完毕: " + string(message))
@@ -272,7 +273,11 @@ func (h *ChatHandler) sendMessage(ctx context.Context, session *types.ChatSessio
 	case types.ChatGLM:
 		return h.sendChatGLMMessage(chatCtx, req, userVo, ctx, session, role, prompt, ws)
 	}
-	return fmt.Errorf("not supported platform: %s", session.Model.Platform)
+	utils.ReplyChunkMessage(ws, types.WsMessage{
+		Type:    types.WsMiddle,
+		Content: fmt.Sprintf("Not supported platform: %s", session.Model.Platform),
+	})
+	return nil
 }
 
 // Tokens 统计 token 数量
diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.styl
index b097fc4e..6e48525b 100644
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -19,7 +19,7 @@ $borderColor = #4676d0;
         font-size: 20px;
 
         .logo {
-          background-color: #ffffff
+          //background-color: #ffffff
           border-radius: 8px;
           width: 35px;
           height: 35px;
@@ -41,6 +41,7 @@ $borderColor = #4676d0;
         .search-box {
           flex-wrap: wrap
           padding: 10px 15px;
+          //background-color #343540
 
           .el-input__wrapper {
             background-color: #363535;
diff --git a/web/src/router.js b/web/src/router.js
index 40d4f21a..5f938f2f 100644
--- a/web/src/router.js
+++ b/web/src/router.js
@@ -4,8 +4,30 @@ const routes = [
     {
         name: 'home',
         path: '/',
+        redirect: '/chat',
         meta: {title: '首页'},
         component: () => import('@/views/Home.vue'),
+        children: [
+            {
+                name: 'chat',
+                path: '/chat',
+                meta: {title: '创作中心'},
+                component: () => import('@/views/ChatPlus.vue'),
+            },
+            {
+                name: 'chat-id',
+                path: '/chat/:id',
+                meta: {title: '创作中心'},
+                component: () => import('@/views/ChatPlus.vue'),
+                props: true // 将路由参数传递给组件的 props
+            },
+            {
+                name: 'chat-export',
+                path: '/chat/export',
+                meta: {title: '导出会话记录'},
+                component: () => import('@/views/ChatExport.vue'),
+            },
+        ]
     },
     {
         name: 'login',
@@ -20,25 +42,6 @@ const routes = [
         meta: {title: '用户注册'},
         component: () => import('@/views/Register.vue'),
     },
-    {
-        name: 'chat',
-        path: '/chat',
-        meta: {title: '创作中心'},
-        component: () => import('@/views/ChatPlus.vue'),
-    },
-    {
-        name: 'chat-id',
-        path: '/chat/:id',
-        meta: {title: '创作中心'},
-        component: () => import('@/views/ChatPlus.vue'),
-        props: true // 将路由参数传递给组件的 props
-    },
-    {
-        name: 'chat-export',
-        path: '/chat/export',
-        meta: {title: '导出会话记录'},
-        component: () => import('@/views/ChatExport.vue'),
-    },
     {
         path: '/admin/login',
         name: 'admin-login',
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 17294ae7..0b97a3ce 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="common-layout theme-white">
     <el-container>
-      <el-aside width="320px">
+      <el-aside>
         <div class="title-box">
           <el-image :src="logo" class="logo"/>
           <span>{{ title }}</span>
@@ -47,7 +47,7 @@
                           <el-icon><ArrowDown/></el-icon>
                         </span>
             <template #dropdown>
-              <el-dropdown-menu style="width: 315px;">
+              <el-dropdown-menu style="width: 296px;">
                 <el-dropdown-item @click="showConfig">
                   <el-icon>
                     <Tools/>
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 10a1a362..45a13fc2 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,50 +1,49 @@
 <template>
   <div class="home">
-    <div class="inner">
-      <h1>HI <br/> ChatGPT-PLUS</h1>
+    <div class="navigator"></div>
+    <div class="content">
+      <router-view v-slot="{ Component }">
+        <transition name="move" mode="out-in">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
     </div>
   </div>
 </template>
 
 <script setup>
-import {useRouter} from "vue-router";
-import {checkSession} from "@/action/session";
-import {isMobile} from "@/utils/libs";
 
-const router = useRouter();
-checkSession().then(() => {
-  if (isMobile()) {
-    router.push("/mobile")
-  } else {
-    router.push("/chat")
-  }
-}).catch(() => {
-  router.push("/login")
-})
+// const router = useRouter();
+// checkSession().then(() => {
+//   if (isMobile()) {
+//     router.push("/mobile")
+//   } else {
+//     router.push("/chat")
+//   }
+// }).catch(() => {
+//   router.push("/login")
+// })
 
 </script>
 
 <style lang="stylus" scoped>
 .home {
   display: flex;
-  justify-content: center;
-  background-color: #282c34;
+  background-color: #343540;
   height 100vh
+  width 100%
 
-  .inner {
-    text-align center
+  .navigator {
     display flex
-    justify-content center
-    max-width 400px
-    align-items center
+    width 30px
+    padding 10px 6px
+  }
 
-    h1 {
-      color: #202020;
-      font-size: 55px;
-      line-height 1.5
-      font-weight: bold;
-      text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
-    }
+  .content {
+    width: 100%;
+    height: 100vh;
+    overflow-y: scroll;
+    box-sizing: border-box;
   }
 
 }