From 3347b4c9904dc85c30b727941ac6e2f866bdab1e Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Fri, 16 Jun 2023 13:57:05 +0800
Subject: [PATCH] feat: add footbar for login and register page, add send
 button for chat page

---
 web/src/components/ConfigDialog.vue | 10 ++---
 web/src/components/FooterBar.vue    | 29 +++++++++++--
 web/src/views/ChatPlus.vue          | 63 ++++++++++++++++++-----------
 web/src/views/Login.vue             | 13 ++++++
 web/src/views/Register.vue          | 12 +++++-
 5 files changed, 93 insertions(+), 34 deletions(-)

diff --git a/web/src/components/ConfigDialog.vue b/web/src/components/ConfigDialog.vue
index c5b49e68..5b5d05f1 100644
--- a/web/src/components/ConfigDialog.vue
+++ b/web/src/components/ConfigDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog
-      v-model="$props.show"
+      v-model="show"
       :close-on-click-modal="false"
       :show-close="true"
       :before-close="close"
@@ -28,7 +28,7 @@
         <el-form-item label="Model">
           <el-select v-model="form['chat_config']['model']" placeholder="默认会话模型">
             <el-option
-                v-for="item in props.models"
+                v-for="item in models"
                 :key="item"
                 :label="item.toUpperCase()"
                 :value="item"
@@ -95,13 +95,13 @@ onMounted(() => {
   });
 })
 
-const emits = defineEmits(['update:show']);
+const emits = defineEmits(['hide', 'update-user']);
 const save = function () {
   httpPost('/api/user/profile/update', form.value).then(() => {
     ElMessage.success({
       message: '更新成功',
       appendTo: document.getElementById('user-info'),
-      onClose: () => emits('update:show', false)
+      onClose: () => emits('hide', false)
     })
     // 更新用户数据
     emits('update-user', {nickname:form.value['nickname'], avatar: form.value['avatar']});
@@ -113,7 +113,7 @@ const save = function () {
   })
 }
 const close = function () {
-  emits('update:show', false);
+  emits('hide', false);
 }
 </script>
 
diff --git a/web/src/components/FooterBar.vue b/web/src/components/FooterBar.vue
index a36576a8..a0b3ab71 100644
--- a/web/src/components/FooterBar.vue
+++ b/web/src/components/FooterBar.vue
@@ -1,13 +1,34 @@
 <template>
-    <footer>
-      Powered by [ChatGPT-Plus-V3](https://github.com/yangjian102621/chatgpt-plus)
-      Copyright|极客学长
-    </footer>
+    <div class="container">
+      <div class="footer">
+        Powered by {{author}} @
+        <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">{{title}}</el-link>
+      </div>
+    </div>
 </template>
 <script setup>
 
+import {ref} from "vue";
+
+const title = ref('ChatGPT-Plus-V3')
+const author = ref('极客学长')
 </script>
 
 <style scoped lang="stylus">
+.container {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  display flex;
+  justify-content center
+  .footer {
+    max-width 400px;
+    text-align center;
+    font-size 14px;
+    padding 20px;
+    width 100%
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index e0ce75b9..d0a1941d 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -40,7 +40,6 @@
         </div>
 
         <div class="tool-box">
-
           <el-dropdown :hide-on-click="true" class="user-info" trigger="click" v-if="user">
                         <span class="el-dropdown-link">
                           <el-image :src="user['avatar']"/>
@@ -69,6 +68,13 @@
                   </el-icon>
                   <span>注销</span>
                 </el-dropdown-item>
+
+<!--                <el-dropdown-item>-->
+<!--                  <i class="icon-font icon-github"></i>-->
+<!--                 <span>-->
+<!--                    <el-link type="primary" href="https://github.com/yangjian102621/chatgpt-plus" target="_blank">ChatGPT-Plus-V3</el-link>-->
+<!--                 </span>-->
+<!--                </el-dropdown-item>-->
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -159,7 +165,11 @@
                       :rows="2"
                       placeholder="按 Enter 键发送消息，使用 Ctrl + Enter 换行"
                   />
-
+                  <span class="send-btn">
+                    <el-button @click="sendMessage">
+                      <el-icon><Promotion /></el-icon>
+                    </el-button>
+                  </span>
                 </div>
               </div><!-- end input box -->
 
@@ -169,7 +179,7 @@
       </el-main>
     </el-container>
 
-    <config-dialog v-model:show="showConfigDialog" :models="models" @update-user="updateUser"></config-dialog>
+    <config-dialog :show="showConfigDialog" :models="models" @hide="showConfigDialog = false" @update-user="updateUser" />
   </div>
 
 
@@ -185,7 +195,7 @@ import {
   Delete,
   Edit,
   Monitor,
-  Plus,
+  Plus, Promotion,
   RefreshRight,
   Search,
   Tools,
@@ -200,6 +210,7 @@ import {httpGet, httpPost} from "@/utils/http";
 import {useRouter} from "vue-router";
 import Clipboard from "clipboard";
 import ConfigDialog from "@/components/ConfigDialog.vue";
+import FooterBar from "@/components/FooterBar.vue";
 
 const title = ref('ChatGPT-智能助手');
 const logo = 'images/logo.png';
@@ -543,17 +554,16 @@ const inputKeyDown = function (e) {
       prompt.value += "\n";
       return;
     }
-
     e.preventDefault();
-    if (canSend.value === false) {
-      ElMessage.warning("AI 正在作答中，请稍后...");
-    } else {
-      sendMessage();
-    }
   }
 }
 // 发送消息
 const sendMessage = function () {
+  if (canSend.value === false) {
+    ElMessage.warning("AI 正在作答中，请稍后...");
+    return
+  }
+
   if (prompt.value.trim().length === 0 || canSend.value === false) {
     return false;
   }
@@ -954,38 +964,43 @@ const updateUser = function (data) {
           }
 
           .input-box {
-            background-color: #232425
+            background-color: #ffffff
             display: flex;
-            justify-content: flex-start;
+            justify-content: center;
             align-items: center;
             box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
 
             .input-container {
-              width: 100%
+              max-width 600px;
+              width 100%
               margin: 0;
               border: none;
-              //background-color: #232425
-              background-color: #ffffff
               padding: 10px 0;
               display flex
               justify-content center
+              position relative
 
               .el-textarea {
-                max-width 768px;
-
-                //.el-textarea__inner {
-                //  box-shadow: none
-                //  padding: 5px 0
-                //  background-color: #232425
-                //  color: #B5B7B8
-                //}
-
+                max-width 600px;
                 .el-textarea__inner::-webkit-scrollbar {
                   width: 0;
                   height: 0;
                 }
               }
 
+              .send-btn {
+                position absolute;
+                right 12px;
+                top 20px;
+
+                .el-button {
+                  padding 8px 5px;
+                  border-radius 6px;
+                  background:rgb(25,195,125)
+                  color #ffffff;
+                  font-size 20px;
+                }
+              }
 
             }
           }
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index a421d9fa..4e02cd4d 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -35,6 +35,10 @@
           </el-row>
         </div>
       </div>
+
+      <footer class="footer">
+        <footer-bar />
+      </footer>
     </div>
   </div>
 </template>
@@ -47,6 +51,7 @@ import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {setLoginUser} from "@/utils/storage";
 import {useRouter} from "vue-router";
+import FooterBar from "@/components/FooterBar.vue";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户登录');
@@ -151,5 +156,13 @@ const login = function () {
       }
     }
   }
+
+  .footer {
+    color #ffffff;
+
+    .container {
+      padding 20px;
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/web/src/views/Register.vue b/web/src/views/Register.vue
index af33b133..735f14df 100644
--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -56,7 +56,9 @@
         </div>
       </div>
 
-      <footer-bar />
+      <footer class="footer">
+        <footer-bar />
+      </footer>
     </div>
   </div>
 </template>
@@ -182,5 +184,13 @@ const validateMobile = function (mobile) {
       }
     }
   }
+
+  .footer {
+    color #ffffff;
+
+    .container {
+      padding 20px;
+    }
+  }
 }
 </style>
\ No newline at end of file