6-25更新

.env.production

@@ -5,4 +5,4 @@ VUE_APP_TITLE = 元宇宙
 ENV = 'production'
 
 # 元宇宙/生产环境
-VUE_APP_BASE_API = 'http://aitest.api.rongcyl.cn'
+VUE_APP_BASE_API = 'http://192.168.0.105:8086'

src/api/user.js

@@ -9,4 +9,12 @@ export function updateUserInfoApi(data) {
     data
   })
 }
+// 查询用户消耗记录
+export function queryRecordApi(data) {
+  return request({
+    url: `/appUser/queryRecord`,
+    method: 'post',
+    data
+  })
+}
 

src/store/modules/user.js

@@ -42,6 +42,7 @@ const user = {
           console.log(res, 'res')
           setToken(res.data.userToken)
           commit('SET_TOKEN', res.data.userToken)
+          commit('SET_USERID', res.data.id)
           resolve()
         }).catch(error => {
           reject(error)

src/views/chat/index.vue

@@ -260,7 +260,7 @@
                   />
                 </div>
                 <div class="messageRight">
-                  <div class="message mt-4 ml-4 p-2 rounded-r-md rounded-bl-md text-xs" >
+                  <div class="message mt-4 ml-4 p-4 rounded-r-md rounded-bl-md text-xs relative" >
                     <div v-if="item.voiceFilePosition" class="yyPlayBg mb-2 w-16 p-1 cursor-pointer" >
                       <img v-if="audioPlayIndex == index" class="yyPlay" src="@/assets/images/播放/yyPlay1.png" alt="" >
                       <img v-else class="yyPlay" src="@/assets/images/播放/yyPlay.png" alt="" @click="playAudio(item.voiceFilePosition, index)">
@@ -275,9 +275,16 @@
                         {{ item.chatGuidance }}
                       </div>
                     </div>
+                    <el-dropdown v-if="index != 0" class="messageDropdown" @command="handleCommand" placement="top-end">
+                      <el-button class="messageButton" icon="el-icon-more" circle></el-button>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="1">编辑</el-dropdown-item>
+                        <el-dropdown-item command="2">删除</el-dropdown-item>
+                        <el-dropdown-item v-if="index == returnMessage.length - 1" command="3">重新生成</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
                   </div>
                 </div>
-
               </div>
               <!-- 用户发送的信息 -->
               <div v-if="item.role == 'user'" class="mb-4 flex me" :key="index">
@@ -307,15 +314,15 @@
                 v-model="content"
                 @keydown="Enterkey"
               />
-            <div class="flex pt-6 justify-between" v-if="canChat">
+            <div class="flex pt-6 justify-between" v-if="canChat" style="height: 70px;">
               <div class="tools w-36 flex justify-between">
                 <i class="el-icon-setting text-2xl cursor-pointer" @click="showConfig = true"></i>
-                <i class="el-icon-picture-outline text-2xl cursor-pointer"></i>
-                <i class="el-icon-s-opportunity text-2xl cursor-pointer"></i>
+                <!-- <i class="el-icon-picture-outline text-2xl cursor-pointer"></i> -->
+                <!-- <i class="el-icon-s-opportunity text-2xl cursor-pointer"></i> -->
               </div>
-              <button @click.prevent="getStreamChatWithWeb" class="px-4 rounded-r-lg text-sm text-gray-400" :class="content && 'planeColor'">
-                <v-icon name="paper-plane" scale="1.5"/>
-              </button>
+              <el-button type="text" :loading="chatLoading" @click.prevent="getStreamChatWithWeb" class="px-4 rounded-r-lg text-sm text-gray-400" :class="content && 'planeColor'">
+                <v-icon v-show="!chatLoading" name="paper-plane" scale="1.5"/>
+              </el-button>
             </div>
             <div v-if="!canChat" class=" flex w-full text-sm text-gray-400">
               当前角色或场景已被设定为私有或被创作者删除，但你任然可以查看历史对话。
@@ -332,7 +339,7 @@
         :visible.sync="showConfig"
         width="500px"
       >
-        <p class="text-base">身分</p>
+        <!-- <p class="text-base">身分</p>
         <p class="text-sm text-gray-400">选择你和角色聊天的身份</p>
         <div class="flex items-start py-3 border-b border-gray-200">
           <el-radio-group class="radio" v-model="configForm.radio1">
@@ -341,7 +348,7 @@
           <el-button>
             <i class="el-icon-sort" style="transform: rotate(90deg);"></i>
           </el-button>
-        </div>
+        </div> -->
         <p class="text-base mt-3">选择模型</p>
         <p class="text-sm text-gray-400">每个模型可能有不同的效果，仅对当前对话有影响</p>
         <div class="flex items-start py-3 border-b border-gray-200">
@@ -349,7 +356,7 @@
             <el-radio-button v-for="(item, index) in modelList" :key="index" :label="item.id">{{ item.model }}</el-radio-button>
           </el-radio-group>
         </div>
-        <p class="text-base mt-3">角色语言</p>
+        <!-- <p class="text-base mt-3">角色语言</p>
         <p class="text-sm text-gray-400">请选择角色的回复语言</p>
         <div class="flex items-start py-3">
           <el-radio-group class="radio" v-model="configForm.radio3">
@@ -359,7 +366,7 @@
             <el-radio-button label="English"></el-radio-button>
             <el-radio-button label="Español"></el-radio-button>
           </el-radio-group>
-        </div>
+        </div> -->
         <span slot="footer" class="dialog-footer">
           <el-button @click="showConfig = false">取 消</el-button>
           <el-button type="primary" @click="showConfig = false">确 定</el-button>
@@ -393,6 +400,8 @@ export default {
   },
   data() {
     return {
+      // 聊天等待
+      chatLoading: false,
       // 是否全屏
       fullScreen: false,
       // 角色所有聊天列表
@@ -502,7 +511,7 @@ export default {
         await this.getDetail(this.allRecords[0].id)
       }
       // 查找当前角色是否有对话记录
-      this.searchHistory(this.info.id)
+      // this.searchHistory(this.info.id)
     },
     // 左侧面板变化
     showInfoChange(index) {
@@ -698,6 +707,7 @@ export default {
           })
           this.returnMessage = [...this.returnMessage, ...history]
         }
+        this.configForm.radio2 = res.data[res.data.length - 1].modelId
       })
     },
     searchHistory(characterId) {
@@ -865,6 +875,9 @@ export default {
     },
     Enterkey(e) {
       if (e.keyCode == 13) {
+        if (this.chatLoading) {
+          return
+        }
         this.getStreamChatWithWeb()
       }
     },
@@ -940,12 +953,13 @@ export default {
       }, 50)
     },
     async getStreamChatWithWeb() {
-      this.textCache = ''
-      this.resError = false
-      this.messageLoading = true
       if (!this.content) {
         return
       }
+      this.textCache = ''
+      this.resError = false
+      this.messageLoading = true
+      this.chatLoading = true
       // 初始化定时器和audio的状态
       if (this.videoLoop) {
         clearInterval(this.videoLoop)
@@ -997,6 +1011,7 @@ export default {
       if (res.status != 200) {
         this.$message.error(res.statusText)
         this.returnMessage.splice(this.returnMessage.length - 1, 2)
+        this.chatLoading = false
         return
       }
       const reader = res.body.getReader()
@@ -1006,6 +1021,7 @@ export default {
         // console.log(done, 'done');
         if(done){
           console.log(value, '结束value');
+          this.chatLoading = false
           // if (typeof(value) == "undefined") {
           //   this.$message.error('错误')
           //   this.returnMessage.splice(this.returnMessage.length - 1, 1)
@@ -1050,6 +1066,7 @@ export default {
           if(JSON.parse(element).code == 401) {
             this.returnMessage.splice(this.returnMessage.length - 1, 1)
             this.noLogin(element)
+            this.chatLoading = false
             break;
           }
           if(JSON.parse(element).code == 500) {
@@ -1057,6 +1074,7 @@ export default {
             this.returnMessage.splice(this.returnMessage.length - 2, 2)
             this.$message.error(JSON.parse(element).content || '系统错误请联系管理员')
             this.resError = true
+            this.chatLoading = false
             break;
           }
           let txt = JSON.parse(element).content
@@ -1443,4 +1461,19 @@ export default {
     -webkit-box-shadow: -1px 0 0 0 var(--bg-color1);
     box-shadow: -1px 0 0 0 var(--bg-color1);
   }
+  .message:hover >>> .messageButton {
+    display: block;
+  }
+  .messageButton {
+    display: none;
+    
+    width: 25px;
+    height: 25px;
+    padding: 0;
+  }
+  .messageDropdown {
+    position: absolute;
+    bottom: -12px;
+    right: 10px;
+  }
 </style>

src/views/create/createScene.vue

@@ -149,6 +149,7 @@ import {
 import { characterListApi } from "@/api/home.js"
 import { addSceneApi, getSceneDetailApi, editSceneApi } from "@/api/create.js"
 import { detailApi } from "@/api/detail.js"
+// import { queryCharacterAndSceneApi } from "@/api/profile.js"
 export default {
   data() {
     return {
@@ -209,6 +210,9 @@ export default {
     }
   },
   methods: {
+    queryCharacterAndScene() {
+
+    },
     getCharacterList(query) {
       let params = {
         pageSize: 10,

src/views/homeComponents/Header.vue

@@ -63,7 +63,7 @@
         </div>
       </div>
     </div>
-    <!-- <el-dialog
+    <el-dialog
       class="dialog"
       :visible.sync="showPopup"
       append-to-body
@@ -116,7 +116,7 @@
           </button>
         </el-form-item>
       </el-form>
-    </el-dialog> -->
+    </el-dialog>
   </div>
 </template>
 

src/views/homeComponents/login.vue

@@ -1,56 +1,48 @@
 <template>
   <div class="login">
     <!-- 登录表单 -->
-    <el-form class="form" :rules="loginRules" ref="formLogin" :model="formLogin" label-width="0">
-      <el-form-item label="" prop="mobile">
-        <el-input v-model="formLogin.mobile" placeholder="手机号">
-          <template slot="prepend">+86</template>
-        </el-input>
+    <el-form class="form" v-show="popupType == 'login'" :rules="loginRules" ref="formLogin" :model="formLogin" label-width="0">
+      <el-form-item label="" prop="account">
+        <el-input v-model="formLogin.account" placeholder="账号(邮箱)"></el-input>
       </el-form-item>
-      <el-form-item label="" prop="code">
-        <el-input v-model="formLogin.code" placeholder="验证码">
-          <template slot="append">
-            <el-button :disabled="codeTime > -1" @click="getCode" style="width: 112px;">
-              {{ codeTime > -1 ? `${codeTime}s` : '获取验证码' }}
-            </el-button>
-          </template>
-        </el-input>
-      </el-form-item>
-      <!-- <el-form-item label="" prop="password">
+      <el-form-item label="" prop="password">
         <el-input v-model="formLogin.password" placeholder="密码" show-password></el-input>
-      </el-form-item> -->
+      </el-form-item>
       <!-- <el-form-item label="">
         <span class="textButton">忘记密码</span>
       </el-form-item> -->
       <el-form-item label="">
-        <button
+        <el-button
+          type="primary"
           class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
           style="background-color: var(--bg-color1);"
           @click.prevent="clickLogin"
+          :loading="loading"
         >
           登录
-        </button>
+        </el-button>
       </el-form-item>
       <el-form-item label="" prop="checked">
         <el-checkbox class="checkbox" v-model="checked"></el-checkbox>
         勾选即代表您已同意<span class="text-blue-500">《用户协议》</span>和<span class="text-blue-500">《隐私政策》</span>
       </el-form-item>
-      <!-- <el-form-item label="">
+      <el-form-item label="">
         <span style="font-size: 1rem;">
           还没有账号吗？
-          <span class="textButton" @click="popupType = 'register'">注册</span>
+          <span class="textButton" @click="toRegister">注册</span>
         </span>
-      </el-form-item> -->
+      </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import { getSendVerificationCode, phoneLogin } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 export default {
   data() {
     return {
+      loading: false,
+      popupType: 'login',
       codeTime: -1,
       codeInterval: null,
       checked: true,
@@ -59,13 +51,9 @@ export default {
         password: null,
       },
       loginRules: {
-        mobile: [
-          { required: true, message: '请输入手机号', trigger: 'blur' },
-          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
-        ],
-        code: [
-          { required: true, message: '请输入验证码', trigger: 'blur' },
-          // { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码', trigger: 'blur' },
+        account: [
+          { required: true, message: '请输入用户账号(邮箱)', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
         ],
         password: [
           { required: true, message: '请输入用户密码', trigger: 'blur' },
@@ -90,41 +78,6 @@ export default {
   mounted() {
   },
   methods: {
-    getCode() {
-      this.codeTime = 60
-      this.codeInterval = setInterval(() => {
-        this.codeTime = this.codeTime - 1
-        if (this.codeTime < 0) {
-          clearInterval(this.codeInterval)
-        }
-      }, 1000)
-      let params = {
-        mobile: this.formLogin.mobile
-      }
-      getSendVerificationCode(params).then(res =>{
-        if (res.code === 200) {
-          this.$message({
-            message: '验证码发送成功',
-            type: 'success'
-          });
-        } else {
-          clearInterval(this.codeInterval)
-          this.codeTime = -1
-          this.$message({
-            message: res.msg,
-            type: 'error'
-          });
-        }
-      })
-      .catch((err) => {
-        clearInterval(this.codeInterval)
-        this.codeTime = -1
-        this.$message({
-          message: res.msg,
-          type: 'error'
-        });
-      })
-    },
     clickLogin() {
       this.$refs.formLogin.validate((valid) => {
         if (valid) {
@@ -136,12 +89,8 @@ export default {
             }).then(() => {})
             return
           }
-          phoneLogin(this.formLogin).then((res) => {
-            console.log(res, '手机登录成功');
-            setToken(res.data.userToken)
-            this.$store.commit('SET_TOKEN', res.data.userToken)
-            this.$store.commit('SET_USERID', res.data.id)
-            console.log(this.$store.state.user.userId, 'userId>>>>');
+          this.loading = true
+          this.$store.dispatch('Login', this.formLogin).then(() => {
             this.$message({
               message: '登录成功',
               type: 'success'
@@ -149,17 +98,16 @@ export default {
             this.$store.commit('app/TOGGLE_POPUP', false)
             this.$router.push({ path: '/' })
             this.$store.dispatch("GetInfo")
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
           })
-          // this.$store.dispatch('Login', this.formLogin).then(() => {
-          //   this.$message({
-          //     message: '登录成功',
-          //     type: 'success'
-          //   });
-          //   this.showPopup = false
-          // })
         }
       })
     },
+    toRegister() {
+      this.$emit('showRegister', true)
+    }
   }
 }
 </script>

src/views/homeComponents/loginPopup.vue

@@ -1,32 +1,51 @@
 <template>
   <el-dialog
     class="dialog"
+    :close-on-click-modal="false"
     :visible.sync="$store.state.app.showPopup"
     append-to-body
     top="50vh"
     width="450px"
     :before-close="handleClose">
     <div slot="title" class="popupTitle">
-      手机号快捷登录
+      {{ popupType == 'login' ? '登录' : '注册'}}
     </div>
-    <LoginContent />
+    <LoginContent v-if="popupType == 'login'" @showRegister="showRegister" />
+    <RegisterContent v-if="popupType == 'register'" />
   </el-dialog>
 </template>
 
 <script>
 import LoginContent from '@/views/homeComponents/login.vue'
+import RegisterContent from '@/views/homeComponents/register.vue'
 export default {
   components: {
-    LoginContent
+    LoginContent,
+    RegisterContent
+  },
+  data() {
+    return {
+      popupType: 'login',
+    }
   },
-  
   mounted() {
   },
+  watch: {
+    '$store.state.app.showPopup': {
+      handler: function (value) {
+        this.popupType = 'login'
+      },
+      immediate: true,
+    }
+  },
   methods: {
     
     handleClose() {
       this.$store.commit('app/TOGGLE_POPUP', false)
     },
+    showRegister(value) {
+      this.popupType = 'register'
+    }
   }
 }
 </script>

src/views/homeComponents/login_phone.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="login">
+    <!-- 登录表单 -->
+    <el-form class="form" :rules="loginRules" ref="formLogin" :model="formLogin" label-width="0">
+      <el-form-item label="" prop="mobile">
+        <el-input v-model="formLogin.mobile" placeholder="手机号">
+          <template slot="prepend">+86</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="" prop="code">
+        <el-input v-model="formLogin.code" placeholder="验证码">
+          <template slot="append">
+            <el-button :disabled="codeTime > -1" @click="getCode" style="width: 112px;">
+              {{ codeTime > -1 ? `${codeTime}s` : '获取验证码' }}
+            </el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- <el-form-item label="" prop="password">
+        <el-input v-model="formLogin.password" placeholder="密码" show-password></el-input>
+      </el-form-item> -->
+      <!-- <el-form-item label="">
+        <span class="textButton">忘记密码</span>
+      </el-form-item> -->
+      <el-form-item label="">
+        <button
+          class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
+          style="background-color: var(--bg-color1);"
+          @click.prevent="clickLogin"
+        >
+          登录
+        </button>
+      </el-form-item>
+      <el-form-item label="" prop="checked">
+        <el-checkbox class="checkbox" v-model="checked"></el-checkbox>
+        勾选即代表您已同意<span class="text-blue-500">《用户协议》</span>和<span class="text-blue-500">《隐私政策》</span>
+      </el-form-item>
+      <!-- <el-form-item label="">
+        <span style="font-size: 1rem;">
+          还没有账号吗？
+          <span class="textButton" @click="popupType = 'register'">注册</span>
+        </span>
+      </el-form-item> -->
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getSendVerificationCode, phoneLogin } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+export default {
+  data() {
+    return {
+      codeTime: -1,
+      codeInterval: null,
+      checked: true,
+      formLogin: {
+        account: null,
+        password: null,
+      },
+      loginRules: {
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },
+        ],
+        code: [
+          { required: true, message: '请输入验证码', trigger: 'blur' },
+          // { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入用户密码', trigger: 'blur' },
+        ],
+      },
+    }
+  },
+  computed: {
+    showPopup() {
+      return this.$store.state.app.showPopup
+    }
+  },
+  watch: {
+    showPopup(value) {
+      if (value) {
+        this.$nextTick(() =>{
+            this.$refs.formLogin.resetFields()
+        })
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    getCode() {
+      this.codeTime = 60
+      this.codeInterval = setInterval(() => {
+        this.codeTime = this.codeTime - 1
+        if (this.codeTime < 0) {
+          clearInterval(this.codeInterval)
+        }
+      }, 1000)
+      let params = {
+        mobile: this.formLogin.mobile
+      }
+      getSendVerificationCode(params).then(res =>{
+        if (res.code === 200) {
+          this.$message({
+            message: '验证码发送成功',
+            type: 'success'
+          });
+        } else {
+          clearInterval(this.codeInterval)
+          this.codeTime = -1
+          this.$message({
+            message: res.msg,
+            type: 'error'
+          });
+        }
+      })
+      .catch((err) => {
+        clearInterval(this.codeInterval)
+        this.codeTime = -1
+        this.$message({
+          message: res.msg,
+          type: 'error'
+        });
+      })
+    },
+    clickLogin() {
+      this.$refs.formLogin.validate((valid) => {
+        if (valid) {
+          if (!this.checked) {
+            this.$confirm('请阅读并接受用户协议和隐私政策', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {})
+            return
+          }
+          phoneLogin(this.formLogin).then((res) => {
+            console.log(res, '手机登录成功');
+            setToken(res.data.userToken)
+            this.$store.commit('SET_TOKEN', res.data.userToken)
+            this.$store.commit('SET_USERID', res.data.id)
+            console.log(this.$store.state.user.userId, 'userId>>>>');
+            this.$message({
+              message: '登录成功',
+              type: 'success'
+            });
+            this.$store.commit('app/TOGGLE_POPUP', false)
+            this.$router.push({ path: '/' })
+            this.$store.dispatch("GetInfo")
+          })
+          // this.$store.dispatch('Login', this.formLogin).then(() => {
+          //   this.$message({
+          //     message: '登录成功',
+          //     type: 'success'
+          //   });
+          //   this.showPopup = false
+          // })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .textButton {
+    font-size: 1rem;
+    color: var(--bg-color1);
+    cursor: pointer;
+  }
+  .formButton {
+    letter-spacing: 4px;
+  }
+  .form >>> .el-input__inner {
+    font-size: 1rem;
+    padding: 5px 15px;
+    height: 40px;
+  }
+</style>

src/views/homeComponents/register.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="login">
+    <!-- 注册表单 -->
+    <el-form class="form" :rules="registerRules" ref="formRegister" :model="formRegister" label-width="0">
+      <el-form-item label="" prop="account"> 
+        <el-input v-model="formRegister.account" placeholder="邮箱"></el-input>
+      </el-form-item>
+      <el-form-item label="" prop="password">
+        <el-input v-model="formRegister.password" placeholder="密码"></el-input>
+      </el-form-item>
+      <el-form-item label="" prop="repeatPassword">
+        <el-input v-model="formRegister.repeatPassword" placeholder="确认密码"></el-input>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button
+          class="formButton text-white text-lg mr-3 cursor-pointer px-3 py-2 rounded-md w-full"
+          type="primary"
+          style="background-color: var(--bg-color1);"
+          @click="clickRegister"
+          :loading="loading"
+        >
+          注册
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { register } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+export default {
+  data() {
+    return {
+      loading: false,
+      codeTime: -1,
+      codeInterval: null,
+      checked: true,
+      formRegister: {
+        account: null,
+        password: null,
+        repeatPassword: null,
+      },
+      registerRules: {
+        account: [
+          { required: true, message: '请输入邮箱', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change'] }
+        ],
+        password: [
+          { required: true, message: '请输入用户密码', trigger: 'blur' },
+        ],
+        repeatPassword: [
+          { required: true, message: '请输入确认用户密码', trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  computed: {
+    showPopup() {
+      return this.$store.state.app.showPopup
+    }
+  },
+  watch: {
+    showPopup(value) {
+      if (value) {
+        this.$nextTick(() =>{
+            this.$refs.formLogin.resetFields()
+        })
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickRegister() {
+      this.$refs.formRegister.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          register(this.formRegister).then(res => {
+            console.log(res, '注册结果');
+            setToken(res.data.userToken)
+            this.$store.commit('SET_TOKEN', res.data.userToken)
+            this.$message({
+              message: '注册成功',
+              type: 'success'
+            });
+            this.$store.commit('SET_USERID', res.data.id)
+            this.$store.commit('app/TOGGLE_POPUP', false)
+            this.$router.push({ path: '/' })
+            this.$store.dispatch("GetInfo")
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .textButton {
+    font-size: 1rem;
+    color: var(--bg-color1);
+    cursor: pointer;
+  }
+  .formButton {
+    letter-spacing: 4px;
+  }
+  .form >>> .el-input__inner {
+    font-size: 1rem;
+    padding: 5px 15px;
+    height: 40px;
+  }
+</style>

src/views/user/components/consume.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="user-info py-10 px-20 w-full h-full">
+    <div class=" text-xl mb-4">消费明细</div>
+    <div class=" w-full rounded-xl w-full overflow-hidden">
+      <div class="p-6 bg-white form">
+        <el-table
+          :data="tableData"
+          style="width: 100%">
+          <el-table-column
+            prop="createTime"
+            label="时间"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="modelName"
+            label="模型"
+            width="180">
+          </el-table-column>
+          <el-table-column
+            prop="consumeToken"
+            label="tokens">
+          </el-table-column>
+          <el-table-column
+            prop="consumeFee"
+            label="额度">
+          </el-table-column>
+        </el-table>
+        <div class="w-full pt-4 flex justify-center">
+          <el-pagination
+            background
+            layout="prev, pager, next"
+            :total="total"
+            @current-change="currentChange"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfo } from '@/api/login'
+import { queryRecordApi } from '@/api/user'
+export default {
+  data() {
+    return {
+      params: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      total: 0,
+      tableData: []
+    }
+  },
+  mounted() {
+    this.queryRecord()
+  },
+  methods: {
+    currentChange(value) {
+      this.params.pageNum = value
+      this.queryRecord()
+    },
+    queryRecord() {
+      queryRecordApi(this.params).then(res => {
+        console.log(res, 'queryRecordApi')
+        this.tableData = res.rows
+        this.total = res.total
+      })
+    }
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .top {
+    background: linear-gradient(rgba(0, 0, 0, 0) 23.28%, rgba(0, 0, 0, 0.72) 100%), url(https://cdn-az.rochat.tech/avatar/131__c9103616-e103-11ee-bef2-66a40ff97e79.png) center center / cover no-repeat;
+  }
+</style>
+<style scoped>
+
+</style>

src/views/user/index.vue

@@ -18,28 +18,36 @@
         @click="menuClick('2')"
       >
         <i class="el-icon-setting text-xl mr-2"></i>
-        用户偏好设定
+        消费明细
       </div>
       <div 
         class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
         :class="active === '3' ? 'bg-gray-100' : ''"
         @click="menuClick('3')"
       >
-        <i class="el-icon-medal text-xl mr-2"></i>
-        会员
+        <i class="el-icon-setting text-xl mr-2"></i>
+        用户偏好设定
       </div>
       <div 
         class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
         :class="active === '4' ? 'bg-gray-100' : ''"
         @click="menuClick('4')"
       >
-        <i class="el-icon-present text-xl mr-2"></i>
-        邀请有礼
+        <i class="el-icon-medal text-xl mr-2"></i>
+        会员
       </div>
       <div 
         class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
         :class="active === '5' ? 'bg-gray-100' : ''"
         @click="menuClick('5')"
+      >
+        <i class="el-icon-present text-xl mr-2"></i>
+        邀请有礼
+      </div>
+      <div 
+        class="w-full px-2 py-2 mb-2 flex items-center rounded-md cursor-pointer"
+        :class="active === '6' ? 'bg-gray-100' : ''"
+        @click="menuClick('6')"
       >
         <i class="el-icon-message text-xl mr-2"></i>
         意见反馈
@@ -61,16 +69,20 @@
       </div>
     </div>
     <div class=" flex-1 h-full bg-gray-50">
-      <UserInfo />
+      <UserInfo v-if="active == 1" />
+      <Consume  v-if="active == 2" />
     </div>
   </div>
 </template>
 
 <script>
 import UserInfo from "./components/userInfo.vue"
+import Consume from "./components/consume.vue"
+
 export default {
   components: {
-    UserInfo
+    UserInfo,
+    Consume
   },
   data() {
     return {

vue.config.js

@@ -36,6 +36,7 @@ module.exports = {
     open: true,
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
+        // target: `http://aitest.api.rongcyl.cn`,
         target: `http://aitest.api.rongcyl.cn`,
         // target: `http://192.168.0.107:8086`,
         changeOrigin: true,