用户登录信息头像展示，个人信息修改

src/api/chat.js

@@ -63,7 +63,13 @@ export function addChatApi(data) {
     data
   })
 }
-
+export function getVoiceFileApi(params) {
+  return request({
+    url: `/appUser/getVoiceFile`,
+    method: 'get',
+    params
+  })
+}
 // ai对话AXIOS
 // export function streamChatWithWebApi(data) {
 //   return request({

src/api/user.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+
+// 更新用户信息
+export function updateUserInfoApi(data) {
+  return request({
+    url: `/appUser/updateUserInfo`,
+    method: 'post',
+    data
+  })
+}
+

src/permission.js

@@ -19,30 +19,21 @@ router.beforeEach((to, from, next) => {
       next({ path: "/" });
       NProgress.done();
     } else {
-      next();
-      // next({ ...to, replace: true })
-      // if (store.getters.roles.length === 0) {
-      //   isRelogin.show = true;
-      //   // 判断当前用户是否已拉取完user_info信息
-      //   store
-      //     .dispatch("GetInfo")
-      //     .then(() => {
-      //       isRelogin.show = false;
-      //       store.dispatch("GenerateRoutes").then((accessRoutes) => {
-      //         // 根据roles权限生成可访问的路由表
-      //         router.addRoutes(accessRoutes); // 动态添加可访问路由表
-      //         next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
-      //       });
-      //     })
-      //     .catch((err) => {
-      //       store.dispatch("LogOut").then(() => {
-      //         Message.error(err);
-      //         next({ path: "/" });
-      //       });
-      //     });
-      // } else {
-      //   next();
-      // }
+      if(!store.state.user.name) {
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            next();
+          })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
+      } else {
+        next();
+      }
     }
   } else {
     // 没有token

src/store/modules/user.js

@@ -1,12 +1,13 @@
 import { login, logout, getInfo } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
+import Cookies from 'js-cookie'
 
 const user = {
   state: {
-    userId: '',
+    userId: Cookies.get('UserId'),
     token: getToken(),
     name: '',
-    avatar: '',
+    avatar: require("@/assets/images/default_avatar_user.png"),
     roles: [],
     permissions: []
   },
@@ -14,6 +15,7 @@ const user = {
   mutations: {
     SET_USERID: (state, value) => {
       state.userId = value
+      Cookies.set('UserId', value)
     },
     SET_TOKEN: (state, token) => {
       state.token = token
@@ -55,14 +57,14 @@ const user = {
         }
         getInfo(params).then(res => {
           console.log(res, 'resUserInfo')
-          const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
+          const user = res.data
+          const avatar = (user.profilePicture == "" || user.profilePicture == null) ? require("@/assets/images/default_avatar_user.png") : process.env.VUE_APP_BASE_API + user.profilePicture;
+          // if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+          //   commit('SET_ROLES', res.roles)
+          //   commit('SET_PERMISSIONS', res.permissions)
+          // } else {
+          //   commit('SET_ROLES', ['ROLE_DEFAULT'])
+          // }
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
           resolve(res)
@@ -95,6 +97,10 @@ const user = {
     FedLogOut({ commit }) {
       return new Promise(resolve => {
         commit('SET_TOKEN', '')
+        commit('SET_USERID', '')
+        commit('SET_USERID', '')
+        commit('SET_NAME', '')
+        commit('SET_AVATAR', require("@/assets/images/default_avatar_user.png"))
         removeToken()
         resolve()
       })

src/views/chat/index.vue

@@ -21,7 +21,7 @@
             <!-- <transition name="el-zoom-in-top"> -->
               <div class="dialogueList mt-4" v-show="item.open">
                 <div class="flex justify-between mb-2">
-                  <el-button v-if="item.isDelete == 0 && item.type == 0" type="primary" class="flex-1" round @click="newStart_juese(item)">新的对话</el-button>
+                  <el-button v-if="item.isDelete == 0" type="primary" class="flex-1" round @click="newStart_juese(item)">新的对话</el-button>
                   <div v-else class="flex-1 rounded border border-gray-200 text-sm p-2 text-gray-600">
                     {{item.characterName}}已经被设定为私有或被创建者删除。
                   </div>
@@ -140,11 +140,14 @@
               </div>
               <div class="mt-3 text-sm max-h-48">
                 <div v-if="info.sceneList && info.sceneList.length > 0" class="grid grid-cols-2 gap-2 mb-4 cursor-pointer">
-                  <div class="flex flex-col justify-center" v-for="(item, index) in info.sceneList" :key="index"  @click="sceneChange(item)">
-                    <img class=" rounded w-full h-24 object-cover" :src="baseApi + item.background" alt="">
-                    <div>{{ item.sceneName }}</div>
-                    <div class=" text-gray-400">{{ item.sceneDescription }}</div>
-                  </div>
+                  <template v-for="(item, index) in info.sceneList" >
+                    <div v-if="item.isDelete == 0" class="flex flex-col justify-center" :key="index" @click="sceneChange(item)">
+                      <img class=" rounded w-full h-24 object-cover" :src="baseApi + item.background" alt="">
+                      <div>{{ item.sceneName }}</div>
+                      <div class=" text-gray-400">{{ item.sceneDescription }}</div>
+                    </div>
+                  </template>
+                  
                 </div>
                 <el-empty v-else description="暂无场景"></el-empty>
                 <div class="flex justify-center mt-10">
@@ -258,15 +261,15 @@
                 </div>
                 <div class="messageRight">                  
                   <div class="message mt-4 ml-4 p-2 rounded-r-md rounded-bl-md text-xs" >
-                    <div class="yyPlayBg mb-2 w-16 p-1 cursor-pointer" >
+                    <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(index)">
+                      <img v-else class="yyPlay" src="@/assets/images/播放/yyPlay.png" alt="" @click="playAudio(item.voiceFilePosition, index)">
                       <!-- <svg-icon class="icon" class-name="speech-icon" icon-class="speech" @click.stop="click" /> -->
                     </div>
                     <div v-show="!item.content" class="loadingMessage" >
                       <div v-loading="!item.content" element-loading-background="rgba(0, 0, 0, 0.0)"></div>
                     </div>
-                    <p v-show="item.content">{{ item.content }} </p>
+                    <p style="white-space: pre-line;" v-show="item.content">{{ item.content }} </p>
                     <div class="messageOptions" v-show="returnMessage.length == 1">
                       <div class="option" v-for="(item, index) in messageOptions" :key="index" @click="messageOptionClick(item.chatGuidance)">
                         {{ item.chatGuidance }}
@@ -280,7 +283,7 @@
               <div v-if="item.role == 'user'" class="mb-4 flex me" :key="index">
                 <div class="pt-2 photo">
                   <img
-                    src="@/assets/images/default_avatar_user.png"
+                    :src="$store.state.user.avatar"
                     class="rounded-full w-14 h-14 object-cover"
                   />
                 </div>
@@ -296,6 +299,7 @@
           
           <div class="inputBox absolute left-2 right-2 bottom-4 " @click="inputBoxClick">
             <input
+                v-if="canChat"
                 ref="input"
                 type="text"
                 placeholder="输入消息..."
@@ -303,7 +307,7 @@
                 v-model="content"
                 @keydown="Enterkey"
               />
-            <div class="flex pt-6 justify-between">
+            <div class="flex pt-6 justify-between" v-if="canChat">
               <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>
@@ -313,6 +317,9 @@
                 <v-icon name="paper-plane" scale="1.5"/>
               </button>
             </div>
+            <div v-if="!canChat" class=" flex w-full text-sm text-gray-400">
+              当前角色或场景已被设定为私有或被创作者删除，但你任然可以查看历史对话。
+            </div>
           </div>
         </div>
       </div>
@@ -372,7 +379,8 @@ import {
   getChatCharacterRecordsApi,
   getChatRecordApi,
   updateTitleApi,
-  clearRecordApi
+  clearRecordApi,
+  getVoiceFileApi
 } from "@/api/chat.js"
 import { detailApi } from "@/api/detail.js"
 import { Message, MessageBox, Notification, Loading } from 'element-ui'
@@ -416,17 +424,27 @@ export default {
         value1: false,
         value2: false,
       },
-      
+      //音频相关↓
       //音频地址
       audioUrl: '',
+      videoLoop: null,
+      videoLoopTime: 0,
       //场景下拉菜单
       dropdown3Show: false,
       // 场景对话相关
       sceneId: null,
-      sceneInfo: {}
+      sceneInfo: {},
     }
   },
   computed: {
+    canChat() {
+      // console.log(this.info.isDelete, 'this.info.isDelete');
+      if (!this.sceneId) {
+        return this.info.isDelete == 0
+      } else {
+        return this.sceneInfo.isDelete == 0
+      }
+    },
     showNodata() {
       return this.allRecords.length == 0 && !this.$route.query.characterId
     }
@@ -458,6 +476,8 @@ export default {
   },
   methods: {
     async init() {
+      // 获取模型列表
+      this.getModelList()
       // 获取用户所有聊天记录
       await this.getChatCharacterRecords()
       // 如果用角色id获取角色详情
@@ -473,8 +493,6 @@ export default {
       }
       // 查找当前角色是否有对话记录
       this.searchHistory(this.info.id)
-      // 获取模型列表
-      this.getModelList()
     },
     // 左侧面板变化
     showInfoChange(index) {
@@ -662,7 +680,13 @@ export default {
         this.historyRes = res.data
         for (let i = 0; i < array.length; i++) {
           const element = array[i];
-          this.returnMessage = [...this.returnMessage, ...JSON.parse(element.history)]
+          let history = JSON.parse(element.history)
+          history.map(item => {
+            if (item.role == 'assistant') {
+              item.voiceFilePosition = element.voiceFilePosition
+            }
+          })
+          this.returnMessage = [...this.returnMessage, ...history]
         }
       })
     },
@@ -910,6 +934,14 @@ export default {
       if (!this.content) {
         return
       }
+      // 初始化定时器和audio的状态
+      if (this.videoLoop) {
+        clearInterval(this.videoLoop)
+        this.videoLoop = null
+        this.audioUrl = ''
+        this.$refs.audio.currentTime = 0;
+        this.$refs.audio.pause()
+      }
       // 如果没有对话记录id，新增对话记录
       if (!this.recordId) {
         this.recordId = await this.addChat()
@@ -939,7 +971,8 @@ export default {
       // 新增一条ai信息
       this.returnMessage.push({
         role: 'assistant',
-        content: ''
+        content: '',
+        voiceFilePosition: '',
       })
       
       // 清空输入框的值
@@ -951,7 +984,7 @@ export default {
       
       if (res.status != 200) {
         this.$message.error(res.statusText)
-        this.returnMessage.splice(this.returnMessage.length - 1, 1)
+        this.returnMessage.splice(this.returnMessage.length - 1, 2)
         return
       }
       const reader = res.body.getReader()
@@ -974,9 +1007,10 @@ export default {
           let historyRes = await getChatRecordApi(params)
           this.historyRes = historyRes.data
           // 如果开启自动播放，则查询并播放语音
-          if (this.setting.value1 && !this.resError) {
+          this.audioUrl = ""
+          if (!this.resError) {
             let index = this.historyRes.length * 2
-            this.playAudio(index)
+            this.initAudio(index)
           }
           console.log('结束');
           break;
@@ -1008,7 +1042,7 @@ export default {
           }
           if(JSON.parse(element).code == 500) {
             console.log(JSON.parse(element), 'JSON.parse(element)');
-            this.returnMessage.splice(this.returnMessage.length - 1, 1)
+            this.returnMessage.splice(this.returnMessage.length - 2, 2)
             this.$message.error(JSON.parse(element).content || '系统错误请联系管理员')
             this.resError = true
             break;
@@ -1057,20 +1091,63 @@ export default {
       this.getStreamChatWithWeb()
     },
     // 播放聊天语音
-    playAudio(index) {
-      console.log(index, 'index');
-      console.log(this.historyRes, 'this.historyRes');
+    initAudio(index) {
+      // 从聊天记录获取id
       let history = this.historyRes[ index / 2 - 1]
       console.log(history, 'history');
+      
+      this.loopGetVoice(history.id, index)
+    },
+    playAudio(url, index) {
+      this.audioUrl = url
       this.audioPlayIndex = index
-      this.audioUrl = history.voiceFilePosition
-      console.log(this.audioUrl, 'this.audioUrl');
-      console.log(this.$refs.audio, 'this.$refs.audio');
       this.$refs.audio.volume = 1
       setTimeout(() => {
-        this.$refs.audio.play()
+        if (this.audioUrl) {
+          this.$refs.audio.play()
+        }
       }, 1000)
     },
+    async loopGetVoice(id, index) {
+      
+      // 获取语音文件
+      let params = {
+        id: id
+      }
+      let fileRes = await getVoiceFileApi(params)
+      console.log(fileRes, 'file>>>');
+      if (fileRes.data) {
+        console.log(this.returnMessage[index], 'sssssssssss');
+        this.returnMessage[index].voiceFilePosition = fileRes.data.voiceFilePosition
+        // 有语音文件则直接播放
+        if (this.setting.value1) {
+          this.playAudio(fileRes.data.voiceFilePosition, index)
+        }
+      } else {
+        // 没有语音文件则开启定时器每两秒查询一次
+        this.videoLoopTime = 0
+        this.videoLoop = setInterval(() => {
+          console.log(this.videoLoopTime, '定时器');
+          // 如果计时器超过20秒则关闭不再获取语音文件
+          if (this.videoLoopTime >= 20) {
+            clearInterval(this.videoLoop)
+            this.videoLoop = null
+          }
+          this.videoLoopTime += 2
+          getVoiceFileApi(params).then(res => {
+            // 如果获取到语音文件则关闭计时器并播放语音
+            if (res.data) {
+              clearInterval(this.videoLoop)
+              this.videoLoop = null
+              this.returnMessage[index].voiceFilePosition = res.data.voiceFilePosition
+              if (this.setting.value1) {
+                this.playAudio(res.data.voiceFilePosition, index)
+              }
+            }
+          })
+        }, 2000)
+      }
+    },
     audioEnd() {
       // console.log('播放结束');
       this.audioPlayIndex = null

src/views/components/NavMenu.vue

@@ -61,7 +61,7 @@
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="账户" placement="right">
         <div class="photo my-2 cursor-pointer" @click="toUser">
-          <img class="img" src="@/assets/images/default_avatar_user.png" alt="">
+          <img class="img" :src="$store.state.user.avatar" alt="">
         </div>
       </el-tooltip>
       

src/views/homeComponents/login.vue

@@ -148,7 +148,7 @@ export default {
             });
             this.$store.commit('app/TOGGLE_POPUP', false)
             this.$router.push({ path: '/' })
-            // this.$store.dispatch("GetInfo")
+            this.$store.dispatch("GetInfo")
           })
           // this.$store.dispatch('Login', this.formLogin).then(() => {
           //   this.$message({

src/views/profile/index.vue

@@ -2,14 +2,15 @@
 <template>
   <div class=" h-full w-full">
     <div class="h-72 relative text-white bg">
+      <img class=" absolute object-cover w-full h-full" v-if="userInfo.cover" :src="baseApi + userInfo.cover" alt="">
       <div class="flex absolute bottom-0 w-full px-28 justify-between items-end">
         <div class=" h-36 ">
           <div class="flex justify-center">
             <div class="w-24 h-24">
-              <img class="w-full h-full rounded-full" src="@/assets/images/default_avatar_user.png" alt="">
+              <img class="w-full h-full rounded-full" :src="$store.state.user.avatar" alt="">
             </div>
             <div class="flex flex-col justify-center ml-3">
-              <div class="font-medium text-2xl ">用户名称</div>
+              <div class="font-medium text-2xl ">{{ userInfo.userName }}</div>
               <div class=" text-base">UID:1231235 <i class="el-icon-copy-document text-base"></i></div>
             </div>
           </div>
@@ -26,7 +27,7 @@
           <div class=" w-10 h-10 rounded-full button flex justify-center items-center cursor-pointer mr-4">
             <i class="el-icon-share text-xl"></i>
           </div>
-          <div class="w-32 h-10 flex justify-center items-center rounded-full button cursor-pointer">
+          <div class="w-32 h-10 flex justify-center items-center rounded-full button cursor-pointer" @click="$router.push({ name: 'user' })">
             <i class="el-icon-edit"></i>
             编辑资料
           </div>
@@ -158,6 +159,7 @@
 </template>
 
 <script>
+import { getInfo } from '@/api/login'
 import { queryCharacterAndSceneApi } from "@/api/profile.js"
 import { deleteSceneApi, 
   deleteCharacterApi,
@@ -168,6 +170,7 @@ import 'vue-awesome/icons/fire'
 export default {
   data() {
     return {
+      userInfo: {},
       popoverVisible: false,
       dialogVisible: false,
       selectObj: {},
@@ -176,9 +179,19 @@ export default {
     }
   },
   mounted() {
+    this.getUserInfo()
     this.getCharacterList()
   },
   methods: {
+    getUserInfo() {
+      let params = {
+        userId: this.$store.state.user.userId
+      }
+      getInfo(params).then(res => {
+        console.log(res, 'resUserInfo')
+        this.userInfo = res.data
+      })
+    },
     routeTo(url) {
       this.$router.push(url)
     },

src/views/user/components/userInfo.vue

@@ -2,13 +2,14 @@
   <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=" w-full h-52 top flex items-end">
-        <div class="p-6 flex">
+      <div class=" w-full h-52 top flex items-end relative overflow-hidden">
+        <img class=" absolute object-cover w-full h-full" v-if="userInfo.cover" :src="baseApi + userInfo.cover" alt="">
+        <div class="p-6 flex relative">
           <div class="w-20 h-20 border-2 border-gray-50 rounded-full">
-            <img class="w-full h-full rounded-full" src="@/assets/images/default_avatar_user.png" alt="">
+            <img class="w-full h-full rounded-full" :src="$store.state.user.avatar" alt="">
           </div>
           <div class=" flex flex-col ml-4 justify-center">
-            <div class=" text-2xl text-white">用户名</div>
+            <div class=" text-2xl text-white">{{ userInfo.userName }}</div>
             <div class=" text-sm text-white">
               UID: 89942000
               <i class="el-icon-copy-document cursor-pointer"></i>
@@ -19,35 +20,116 @@
       <div class="px-6 bg-white form">
         <div class="flex justify-between items-center border-b border-gray-200 py-6">
           <div class="w-52">用户名</div>
-          <el-input v-model="input" placeholder="请输入内容" maxlength="10"></el-input>
+          <el-input @focus="showButton = true" v-model="form.userName" placeholder="请输入内容" maxlength="10"></el-input>
         </div>
         <div class="flex justify-between border-b border-gray-200 py-6">
           <div class="w-52">个人简介</div>
-          <el-input v-model="input" type="textarea" placeholder="请输入内容" maxlength="30" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
+          <el-input @focus="showButton = true" v-model="form.selfIntroduction" type="textarea" placeholder="请输入内容" maxlength="30" :autosize="{ minRows: 4, maxRows: 4}"></el-input>
         </div>
         <div class="flex justify-between items-center border-b border-gray-200 py-6">
           <div class="w-52">更换头像</div>
-          <el-button round>默认按钮</el-button>
+          <el-button round @click="showUpload(1)">上传</el-button>
         </div>
         <div class="flex justify-between items-center py-6">
           <div class="w-52">更换封面</div>
-          <el-button round>默认按钮</el-button>
+          <el-button round @click="showUpload(2)">上传</el-button>
         </div>
         <div class="flex justify-between items-center py-6">
           <div class="w-52"></div>
-          <div>
-            <el-button round>取消</el-button>
-            <el-button type="primary" round>保存</el-button>
+          <div v-if="showButton">
+            <el-button round @click="showButton = false">取消</el-button>
+            <el-button type="primary" round @click="updateUserInfo">保存</el-button>
           </div>
         </div>
       </div>
     </div>
+    <el-dialog :title="uploadTitle" :visible.sync="dialogVisible" width="30%">
+      <div>
+        <ImageUpload v-model="picture" class="imgUp" :limit="1" />
+      </div>
+      <div class="mt-4 flex justify-end">
+        <el-button  @click="dialogVisible = true">取消</el-button>
+        <el-button type="primary" @click="imgConfirm">确认</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getInfo } from '@/api/login'
+import { updateUserInfoApi } from '@/api/user'
 export default {
-
+  data() {
+    return {
+      showButton: false,
+      dialogVisible: false,
+      userInfo: {},
+      form: {},
+      picture: '',
+      uploadIndex: null,
+      uploadTitle: ''
+    }
+  },
+  mounted() {
+    this.getUserInfo()
+  },
+  methods: {
+    getUserInfo() {
+      console.log(this.$store, 'this.$store');
+      let params = {
+        userId: this.$store.state.user.userId
+      }
+      getInfo(params).then(res => {
+        console.log(res, 'resUserInfo')
+        this.userInfo = res.data
+        this.form = JSON.parse(JSON.stringify(res.data))
+      })
+    },
+    updateUserInfo() {
+      updateUserInfoApi(this.form).then(res => {
+        console.log(res, '用户更新数据');
+        this.$message({
+          type: 'success',
+          message: '修改成功!'
+        });
+        this.$store.dispatch("GetInfo")
+      })
+    },
+    showUpload(index) {
+      this.picture = ''
+      this.uploadIndex = index
+      if (index == 1) {
+        this.uploadTitle = '上传头像'
+      } else {
+        this.uploadTitle = '上传封面'
+      }
+      this.dialogVisible = true
+    },
+    imgConfirm() {
+      let params = {}
+      if (!this.picture) {
+        this.$message({
+          type: 'warning',
+          message: '请先上传图片'
+        });
+        return
+      }
+      if (this.uploadIndex == 1) {
+        params.profilePicture = this.picture
+      } else {
+        params.cover = this.picture
+      }
+      updateUserInfoApi(params).then(res => {
+        console.log(res, '用户更新数据');
+        this.$message({
+          type: 'success',
+          message: '修改成功!'
+        });
+        this.dialogVisible = false
+        this.$store.dispatch("GetInfo")
+      })
+    }
+  }
 }
 </script>
 
@@ -60,4 +142,10 @@ export default {
   .form >>> .el-input__inner {
     height: 50px;
   }
+  .imgUp >>> .upload {
+    text-align: center;
+  }
+  .imgUp >>> .el-upload__tip {
+    text-align: center;
+  }
 </style>

src/views/user/index.vue

@@ -89,10 +89,9 @@ export default {
           this.$router.push('/')
           break
         case '6':
-          this.$store.dispatch('LogOut').then(() => {
+          this.$store.dispatch('FedLogOut').then(() => {
             this.$router.push('/')
           })
-          
           break
       }
     }