From df7d4d5b94e64d254a00be31797c0aca3d67f19a Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Fri, 7 Apr 2023 19:26:24 +0800
Subject: [PATCH] the new skin is ready

---
 server/chat_handler.go                 |  12 +--
 web/src/components/plus/ChatPrompt.vue |  10 +-
 web/src/components/plus/ChatReply.vue  |  91 +++++++++---------
 web/src/main.js                        |   8 +-
 web/src/views/ChatPlus.vue             | 122 ++++++++++++++-----------
 5 files changed, 134 insertions(+), 109 deletions(-)

diff --git a/server/chat_handler.go b/server/chat_handler.go
index 1aca89f..4754755 100644
--- a/server/chat_handler.go
+++ b/server/chat_handler.go
@@ -57,13 +57,13 @@ func (s *Server) ChatHandle(c *gin.Context) {
 			}
 
 			logger.Info("Receive a message: ", string(message))
-			replyMessage(client, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
-			replyMessage(client, "![](images/wx.png)", true)
+			//replyMessage(client, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
+			//replyMessage(client, "![](images/wx.png)", true)
 			// TODO: 当前只保持当前会话的上下文，部保存用户的所有的聊天历史记录，后期要考虑保存所有的历史记录
-			//err = s.sendMessage(session, chatRole, string(message), client, false)
-			//if err != nil {
-			//	logger.Error(err)
-			//}
+			err = s.sendMessage(session, chatRole, string(message), client, false)
+			if err != nil {
+				logger.Error(err)
+			}
 		}
 	}()
 }
diff --git a/web/src/components/plus/ChatPrompt.vue b/web/src/components/plus/ChatPrompt.vue
index 33c70e7..e615bb0 100644
--- a/web/src/components/plus/ChatPrompt.vue
+++ b/web/src/components/plus/ChatPrompt.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .chat-line-right {
   justify-content: flex-end;
 
@@ -40,7 +40,7 @@ export default defineComponent({
     margin-left 5px;
 
     img {
-      border-radius 5px;
+      border-radius 50%;
     }
   }
 
@@ -52,9 +52,9 @@ export default defineComponent({
     .triangle {
       width: 0;
       height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 5px solid #223A34;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-left: 10px solid #223A34;
       position: absolute;
       right: 0;
       top: 10px;
diff --git a/web/src/components/plus/ChatReply.vue b/web/src/components/plus/ChatReply.vue
index 5e3860e..2bc2deb 100644
--- a/web/src/components/plus/ChatReply.vue
+++ b/web/src/components/plus/ChatReply.vue
@@ -33,58 +33,63 @@ export default defineComponent({
 </script>
 
 <style lang="stylus">
-.chat-line-left {
-  justify-content: flex-start;
+.body-plus {
+  .chat-line-left {
+    justify-content: flex-start;
 
-  .chat-icon {
-    margin-right 5px;
+    .chat-icon {
+      margin-right 5px;
 
-    img {
-      border-radius 5px;
-    }
-  }
-
-  .chat-item {
-    display: inline-block;
-    position: relative;
-    padding: 0 0 0 5px;
-    overflow: hidden;
-
-    .triangle {
-      width: 0;
-      height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-right: 5px solid #404042;
-      position: absolute;
-      left: 0;
-      top: 13px;
+      img {
+        border-radius 50%;
+      }
     }
 
-    .content {
-      min-height 20px;
-      word-break break-word;
-      padding: 12px 15px;
-      color var(--content-color)
-      background-color: #404042;
-      font-size: var(--content-font-size);
-      border-radius: 5px;
+    .chat-item {
+      display: inline-block;
+      position: relative;
+      padding: 0 0 0 5px;
+      overflow: hidden;
 
-      p {
-        line-height 1.5
+      .triangle {
+        width: 0;
+        height: 0;
+        border-top: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-right: 10px solid #404042;
+        position: absolute;
+        left: 0;
+        top: 13px;
       }
 
-      p:last-child {
-        margin-bottom: 0
-      }
+      .content {
+        min-height 20px;
+        word-break break-word;
+        padding: 12px 15px;
+        color var(--content-color)
+        background-color: #404042;
+        font-size: var(--content-font-size);
+        border-radius: 5px;
 
-      p:first-child {
-        margin-top 0
-      }
+        p {
+          line-height 1.5
+
+          code {
+            color #f1f1f1
+            background-color #202121
+            padding 0 3px;
+            border-radius 5px;
+          }
+        }
+
+        p:last-child {
+          margin-bottom: 0
+        }
+
+        p:first-child {
+          margin-top 0
+        }
 
-      p > code {
-        color #cc0000
-        background-color #f1f1f1
       }
     }
   }
diff --git a/web/src/main.js b/web/src/main.js
index 9bb8c20..7684346 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -4,6 +4,7 @@ import ElementPlus from "element-plus"
 import "element-plus/dist/index.css"
 import App from './App.vue'
 import ChatPlus from "@/views/ChatPlus.vue";
+import Chat from "@/views/Chat.vue";
 import NotFound from './views/404.vue'
 import TestPage from './views/Test.vue'
 import './utils/prototype'
@@ -11,7 +12,12 @@ import './utils/prototype'
 const routes = [
     {
         name: 'chat-plus', path: '/', component: ChatPlus, meta: {
-            title: 'ChatGPT-Plus'
+            title: 'ChatGPT-Plus for PC'
+        }
+    },
+    {
+        name: 'chat-mobile', path: '/mobile', component: Chat, meta: {
+            title: 'ChatGPT-Plus for Mobile'
         }
     },
     {
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 2a6d859..baa7849 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="body">
+  <div class="body-plus">
     <el-row>
       <div class="chat-head">
         <el-row class="row-center">
@@ -31,8 +31,13 @@
     </el-row>
     <el-row>
       <div class="left-box">
-        <div class="grid-content">
-
+        <div class="content">
+          <el-row v-for="item in chatRoles" :key="item.key">
+            <div :class="item.key === this.role?'chat-role-item active':'chat-role-item'" @click="changeRole(item)">
+              <el-image :src="item.icon" class="avatar"/>
+              <span>{{ item.name }}</span>
+            </div>
+          </el-row>
         </div>
       </div>
       <div class="right-box" :style="{height: mainWinHeight+'px'}">
@@ -236,7 +241,7 @@ export default defineComponent({
             }
             // 将聊天框的滚动条滑动到最底部
             nextTick(() => {
-              document.getElementById('container').scrollTo(0, document.getElementById('container').scrollHeight)
+              document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
             })
           };
         }
@@ -286,17 +291,13 @@ export default defineComponent({
     },
 
     // 更换角色
-    changeRole: function () {
+    changeRole: function (item) {
       this.loading = true
+      this.role = item.key;
+      this.replyIcon = item.icon;
       // 清空对话列表
       this.chatData = [];
       this.connect();
-      for (const key in this.chatRoles) {
-        if (this.chatRoles[key].key === this.role) {
-          this.replyIcon = this.chatRoles[key].icon;
-          break;
-        }
-      }
     },
 
     // 从后端获取聊天历史记录
@@ -439,7 +440,7 @@ export default defineComponent({
 #app {
   height: 100%;
 
-  .body {
+  .body-plus {
     height 100%;
 
     .chat-head {
@@ -496,6 +497,39 @@ export default defineComponent({
         background-color: #28292A
         border-top: 1px solid #2F3032
         border-right: 1px solid #2F3032
+
+        .content {
+          display flex
+          flex-wrap: wrap;
+          flex-direction column
+          width 100%
+
+          .chat-role-item {
+            display flex
+            width 100%
+            justify-content flex-start
+            padding 10px 18px
+            border-bottom: 1px solid #3c3c3c
+            cursor pointer
+
+
+            .avatar {
+              width 36px;
+              height 36px;
+              border-radius 50%;
+            }
+
+            span {
+              color #c1c1c1
+              padding 8px 10px;
+            }
+          }
+
+
+          .chat-role-item.active {
+            background-color: #363535;
+          }
+        }
       }
 
       .right-box {
@@ -506,6 +540,7 @@ export default defineComponent({
       }
     }
 
+
     #container {
       overflow hidden;
       width 100%;
@@ -560,7 +595,7 @@ export default defineComponent({
       .input-box {
         background-color #232425
         display: flex;
-        justify-content: start;
+        justify-content: flex-start;
         align-items: center;
 
         .input-container {
@@ -584,27 +619,6 @@ export default defineComponent({
             height: 0;
           }
         }
-
-        .btn-container {
-          margin-left 10px;
-
-          .el-row {
-            flex-wrap nowrap
-            //width 106px;
-            align-items center
-          }
-
-          .send {
-            width 60px;
-            height 40px;
-            background-color: var(--el-color-success)
-          }
-
-          .is-disabled {
-            background-color: var(--el-button-disabled-bg-color);
-            border-color: var(--el-button-disabled-border-color);
-          }
-        }
       }
     }
 
@@ -617,32 +631,32 @@ export default defineComponent({
       justify-content center
     }
   }
-}
 
-.el-message-box {
-  width 90%;
-  max-width 420px;
-}
+  .el-message-box {
+    width 90%;
+    max-width 420px;
+  }
 
-.el-message {
-  min-width: 100px;
-  max-width 600px;
-}
+  .el-message {
+    min-width: 100px;
+    max-width 600px;
+  }
 
-.token-dialog {
-  .el-dialog {
-    --el-dialog-width 90%;
-    max-width 400px;
+  .token-dialog {
+    .el-dialog {
+      --el-dialog-width 90%;
+      max-width 400px;
 
-    .el-dialog__body {
-      padding 10px 10px 20px 10px;
-    }
+      .el-dialog__body {
+        padding 10px 10px 20px 10px;
+      }
 
-    .el-row {
-      flex-wrap nowrap
+      .el-row {
+        flex-wrap nowrap
 
-      button {
-        margin-left 5px;
+        button {
+          margin-left 5px;
+        }
       }
     }
   }