Auto Commit

package.json

@@ -17,7 +17,8 @@
     "mysql": "^2.18.1",
     "view-ui-plus": "^1.3.12",
     "vue": "^3.2.37",
-    "vue-router": "^4.0.0-beta.13"
+    "vue-router": "^4.0.0-beta.13",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/Home.vue

+<template>
+  <router-view/>
+  <div class="container ivu-p">
+    <a >欢迎使用可爱又聪明的机器人!</a>
+    <a  @click="goto" style="color:chartreuse;">前往登录注册!</a>
+    <!-- <div><span style="color:chartreuse;">用户：</span> <span style="color:chartreuse;">{{username}}</span></div> -->
+    <!-- <div class="dialog">
+      <template v-for="(item, index) in dialogs" :key="index">
+        <div class="dialog-item" :class="{ 'dialog-item-me': item.role === 'me', 'dialog-item-ai': item.role === 'ai' }">
+          <div class="dialog-item-main">{{ item.text }}</div>
+        </div>
+      </template>
+    </div> -->
+      
+    <!-- <div class="question ivu-mt">
+      <Input v-model="question" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="输入你的问题" />
+      <Row class="ivu-mt">
+        <Col>
+          <Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">发送</Button>
+        </Col>
+        <Col>
+          <Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button>
+        </Col>
+        <Col>
+          <Button size="large" class="ivu-ml" icon="md-arrow-up" :disabled="loading" @click="handleHistoryChat">历史记录</Button>
+        </Col>
+        <Col>
+          <Button type="large" class="ivu-ml" icon="md-log-out" :disabled="loading" @click="logout">退出</Button> 
+        </Col>
+ 
+      </Row> -->
+    <!-- </div> -->
+  </div>
+</template>
+<script>
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { apiKey, apiUrl } from './api';
+import axios from 'axios'
+export default {
+  data() {
+    return {
+      username: '',
+      question: '',
+      loading: false,
+      dialogs: []
+    }
+  },
+  mounted(){   
+    return this.username = sessionStorage.getItem("username")
+    // console.log(this.username)
+    // if(this.username = 'null'){
+    //   this.username = '未登录'
+    // }         
+    // return this.username
+  },
+  methods: {
+    goto() {
+      this.$router.push("/login"); 
+    },
+    handleSend() {
+      if (this.loading || this.question === '') return;
+      this.loading = true;
+
+      const question = this.question;
+      this.question = '';
+
+      this.dialogs.push({
+        id: this.dialogs.length + 1,
+        role: 'me',
+        text: question
+      });
+
+      const aiDialogID = this.dialogs.length + 1;
+
+      this.dialogs.push({
+        id: aiDialogID,
+        role: 'ai',
+        text: '我要思考一下再回答你...'
+      });
+
+      const dialog = this.dialogs.find(item => item.id === aiDialogID);
+
+      /**
+       * 发送请求，InsCode 已经集成了 GPT 能力
+       * 在 vite.config.js 中已通过环境变量写入了 apiKey（该 key 是动态写入使用者的，在 IDE 中是作者，发布到社区是运行该作品的用户）
+       * 发布到社区后，将消耗运行者的额度
+       * 注意：如果部署应用，任何人通过部署后的域名访问应用时，都将消耗部署者的额度
+       */
+      const body = {
+        messages: [
+          {
+            role: 'user',
+            content: question
+          }
+        ],
+        apikey: apiKey
+      }
+
+      const source = fetchEventSource(apiUrl, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body),
+        onopen: (response) => {
+          dialog.text = '';
+        },
+        onmessage: (msg) => {
+          if (msg.data === '[DONE]') {
+            this.loading = false;
+            return;
+          };
+          const data = JSON.parse(msg.data);
+          const finish_reason = data.choices[0].finish_reason;
+          const finish = finish_reason === 'stop' || finish_reason === 'length';
+          const content = data.choices[0].delta.content;
+
+          if (finish) {
+            this.loading = false;
+          } else if (content) {
+            const text = content;
+            dialog.text += text;
+          }
+        },
+        onerror: (err) => {
+          console.log("error", err);
+        }
+      });
+    },
+    handleNewChat() {
+      this.dialogs = [];
+    },
+    handleHistoryChat() {  
+      if (JSON.stringify(this.dialogs) === '[]') {
+        alert("无对话内容！");
+        return;
+      }
+      alert(JSON.stringify(this.dialogs));         
+    },
+    logout(){
+      sessionStorage.removeItem('username')
+      axios({          
+                method: "get",
+                url: "https://flask-wujiaping.inscode.cc/logout",               
+              }).then((res) => {
+                console.log(res.data)
+                if(200==res.data['code']){
+                  this.$router.push("/login");
+                }else{
+                  alert(res.data['msg']);
+                }    
+            });
+    }
+    
+
+  }
+}
+</script>
+<style>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  /* background-color:gainsboro; */
+  background-image:url(../src/assets/background.jpg);
+}
+
+.dialog {
+  flex: 1;
+  overflow: auto;
+}
+
+.dialog-item {
+  display: flex;
+}
+
+.dialog-item-main {
+  display: flex;
+  max-width: 80%;
+  padding: 8px;
+  word-wrap: break-word;
+  margin-top: 16px;
+  border-radius: 4px;
+}
+
+.dialog-item-me {
+  justify-content: flex-end;
+}
+
+.dialog-item-me .dialog-item-main {
+  background-color: antiquewhite;
+}
+
+.dialog-item-ai .dialog-item-main {
+  background-color:aqua;
+}
+</style>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import ViewUIPlus from 'view-ui-plus'
 import router from './router'
-import App from './App.vue'
+import App from './Home.vue'
 import axios from './plugins/axiosInstance.js'
 import 'view-ui-plus/dist/styles/viewuiplus.css'
 import './assets/main.css'

src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
+    {
+        path: '/app',
+        name: 'App',
+        component: () => import('../views/App.vue')
+    },
     {
         path: '/login',
         name: 'Login',

src/App.vue → src/views/App.vue

 <template>
   <router-view/>
-  <div class="container ivu-p">
-    <span style="color:chartreuse;">用户：</span> 
-    <Button type="large" class="ivu-ml" icon="md-log-out" :disabled="loading" @click="username">当前用户</Button>  
+  <div class="container1 ivu-p">
+    <!-- <div><span style="color:chartreuse;">用户：</span> <span style="color:chartreuse;">{{username}}</span></div> -->
     <div class="dialog">
       <template v-for="(item, index) in dialogs" :key="index">
         <div class="dialog-item" :class="{ 'dialog-item-me': item.role === 'me', 'dialog-item-ai': item.role === 'ai' }">
@@ -21,7 +20,7 @@
           <Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button>
         </Col>
         <Col>
-          <Button size="large" class="ivu-ml" icon="md-arrow-up" :disabled="loading" @click="handleExportChat">导出</Button>
+          <Button size="large" class="ivu-ml" icon="md-arrow-up" :disabled="loading" @click="handleHistoryChat">历史记录</Button>
         </Col>
         <Col>
           <Button type="large" class="ivu-ml" icon="md-log-out" :disabled="loading" @click="logout">退出</Button> 
@@ -33,18 +32,29 @@
 </template>
 <script>
 import { fetchEventSource } from '@microsoft/fetch-event-source';
-import { apiKey, apiUrl } from './api';
+import { apiKey, apiUrl } from '../api';
 import axios from 'axios'
-
 export default {
   data() {
     return {
+      username: '',
       question: '',
       loading: false,
       dialogs: []
     }
   },
+  mounted(){   
+    return this.username = sessionStorage.getItem("username")
+    // console.log(this.username)
+    // if(this.username = 'null'){
+    //   this.username = '未登录'
+    // }         
+    // return this.username
+  },
   methods: {
+    create() {
+
+    },
     handleSend() {
       if (this.loading || this.question === '') return;
       this.loading = true;
@@ -118,7 +128,7 @@ export default {
     handleNewChat() {
       this.dialogs = [];
     },
-    handleExportChat() {  
+    handleHistoryChat() {  
       if (JSON.stringify(this.dialogs) === '[]') {
         alert("无对话内容！");
         return;
@@ -126,6 +136,7 @@ export default {
       alert(JSON.stringify(this.dialogs));         
     },
     logout(){
+      sessionStorage.removeItem('username')
       axios({          
                 method: "get",
                 url: "https://flask-wujiaping.inscode.cc/logout",               
@@ -137,21 +148,14 @@ export default {
                   alert(res.data['msg']);
                 }    
             });
-    },
-    username(){
-      axios({          
-                method: "get",
-                url: "https://flask-wujiaping.inscode.cc/username",               
-              }).then((res) => {
-                console.log(res.data)  
-            });
     }
+    
 
   }
 }
 </script>
 <style>
-.container {
+.container1 {
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -169,6 +173,7 @@ export default {
 }
 
 .dialog-item-main {
+  display: flex;
   max-width: 80%;
   padding: 8px;
   word-wrap: break-word;

src/views/Login.vue

@@ -41,7 +41,8 @@
               }).then((res) => {
                 console.log(res.data)
                 if(200==res.data['code']){
-                  this.$router.push("/");
+                  sessionStorage.setItem("username", this.loginForm.username)
+                  this.$router.push({ path:"/app"});
                 }else{
                   alert(res.data['msg']);
                 }    
@@ -60,6 +61,7 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-image:url(../src/assets/background.jpg);
 }
 
 .box {

src/views/Register.vue

@@ -39,7 +39,7 @@
                 data: this.registerForm,
               }).then((res) => {
                   if(200==res.data['code']){
-                    this.$router.push("/login"); 
+                    this.$router.push("/"); 
                     alert("请使用刚注册的账号进行登录")
                   }else{
                     alert(res.data['msg'])