the new skin is ready

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, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
-			replyMessage(client, "![](images/wx.png)", true)
+			//replyMessage(client, "![](images/wx.png)", true)
 			// TODO: 当前只保持当前会话的上下文，部保存用户的所有的聊天历史记录，后期要考虑保存所有的历史记录
-			//err = s.sendMessage(session, chatRole, string(message), client, false)
+			err = s.sendMessage(session, chatRole, string(message), client, false)
-			//if err != nil {
+			if err != nil {
-			//	logger.Error(err)
+				logger.Error(err)
-			//}
+			}
 		}
 	}()
 }

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-top: 10px solid transparent;
-      border-bottom: 5px solid transparent;
+      border-bottom: 10px solid transparent;
-      border-left: 5px solid #223A34;
+      border-left: 10px solid #223A34;
       position: absolute;
       right: 0;
       top: 10px;

web/src/components/plus/ChatReply.vue

@@ -33,6 +33,7 @@ export default defineComponent({
 </script>
 
 <style lang="stylus">
+.body-plus {
   .chat-line-left {
     justify-content: flex-start;
 
@@ -40,7 +41,7 @@ export default defineComponent({
       margin-right 5px;
 
       img {
-      border-radius 5px;
+        border-radius 50%;
       }
     }
 
@@ -53,9 +54,9 @@ export default defineComponent({
       .triangle {
         width: 0;
         height: 0;
-      border-top: 5px solid transparent;
+        border-top: 10px solid transparent;
-      border-bottom: 5px solid transparent;
+        border-bottom: 10px solid transparent;
-      border-right: 5px solid #404042;
+        border-right: 10px solid #404042;
         position: absolute;
         left: 0;
         top: 13px;
@@ -72,6 +73,13 @@ export default defineComponent({
 
         p {
           line-height 1.5
+
+          code {
+            color #f1f1f1
+            background-color #202121
+            padding 0 3px;
+            border-radius 5px;
+          }
         }
 
         p:last-child {
@@ -82,9 +90,6 @@ export default defineComponent({
           margin-top 0
         }
 
-      p > code {
-        color #cc0000
-        background-color #f1f1f1
       }
     }
   }

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'
         }
     },
     {

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,7 +631,6 @@ export default defineComponent({
       justify-content center
     }
   }
-}
 
   .el-message-box {
     width 90%;
@@ -647,5 +660,6 @@ export default defineComponent({
       }
     }
   }
+}
 
 </style>