Browse Source

6-20更新,用户中心界面编辑删除新增

chenrong 1 year ago
parent
commit
684bbedb92

+ 46 - 9
src/api/create.js

@@ -8,6 +8,30 @@ export function addCharacterApi(data) {
     data
   })
 }
+// 修改角色
+export function updateCharacterApi(data) {
+  return request({
+    url: `/appUser/updateCharacter`,
+    method: 'post',
+    data
+  })
+}
+
+// 修改角色可见性
+export function setCharacterShowApi(characaterId, type) {
+  return request({
+    url: `/appUser/updatetype/${characaterId}/${type}`,
+    method: 'get',
+  })
+}
+
+// 删除角色
+export function deleteCharacterApi(id) {
+  return request({
+    url: `/appUser/deleteCharacter/${id}`,
+    method: 'delete',
+  })
+}
 
 // 创建场景
 export function addSceneApi(data) {
@@ -17,12 +41,25 @@ export function addSceneApi(data) {
     data
   })
 }
-
-// export function personalityListApi(params) {
-//   return request({
-//     url: `/system/personality/list`,
-//     method: 'get',
-//     params
-//   })
-// }
-
+// 修改场景
+export function editSceneApi(data) {
+  return request({
+    url: `/appUser`,
+    method: 'put',
+    data
+  })
+}
+// 获取场景详情
+export function getSceneDetailApi(sceneId) {
+  return request({
+    url: `/appUser/searchScene/${sceneId}`,
+    method: 'get',
+  })
+}
+// 删除场景
+export function deleteSceneApi(sceneId) {
+  return request({
+    url: `/appUser/${sceneId}`,
+    method: 'delete',
+  })
+}

+ 0 - 3
src/api/detail.js

@@ -4,9 +4,6 @@ import request from '@/utils/request'
 export function detailApi(id) {
   return request({
     url: `/system/app/${id}`,
-    headers: {
-      isToken: false
-    },
     method: 'get',
   })
 }

+ 21 - 8
src/views/chat/index.vue

@@ -21,7 +21,10 @@
             <!-- <transition name="el-zoom-in-top"> -->
               <div class="dialogueList mt-4" v-show="item.open">
                 <div class="flex justify-between mb-2">
-                  <el-button type="primary" class="flex-1" round @click="newStart_juese(item)">新的对话</el-button>
+                  <el-button v-if="item.isDelete == 0 && item.type == 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>
                   <el-dropdown 
                     class="flex justify-end items-center ml-2"
                     trigger="click" 
@@ -432,6 +435,17 @@ export default {
     this.init()
   },
   watch: {
+    '$route.query.characterId': {
+      handler(newVal, lodVal) {
+        console.log(newVal, 'newVal');
+        if (!newVal) {
+          this.$nextTick(() => {
+            this.showInfoChange(0)
+          })
+        }
+      },
+      deep: true
+    },
     returnMessage: {
       handler(newVal, lodVal) {
         this.$nextTick(() => {
@@ -823,9 +837,7 @@ export default {
       this.$router.push({
         name: 'CreateScene',
         query: {
-          id: this.info.id,
-          picture: this.info.picture,
-          characterName: this.info.characterName,
+          characterId: this.info.id,
         }
       })
     },
@@ -906,8 +918,9 @@ export default {
         role: 'user',
         content: this.content
       })
-      let HistoryMessage = this.returnMessage
-      
+      let HistoryMessage = JSON.parse(JSON.stringify(this.returnMessage))
+      HistoryMessage = HistoryMessage.slice(0, -1)
+      console.log(HistoryMessage, 'HistoryMessage');
       // 历史记录取最新的20条传给后端
       if (HistoryMessage && HistoryMessage.length > 20) {
         HistoryMessage = HistoryMessage.slice(HistoryMessage.length - 1, 20)
@@ -1109,14 +1122,14 @@ export default {
   width: 375px;
   height: 100%;
   padding: 32px 24px;
-  
+  overflow-y: auto;
 
   >.history {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
+    
     >.historyBox {
       padding: 8px;
       border-radius: 15px;

+ 0 - 2
src/views/components/NavMenu.vue

@@ -49,8 +49,6 @@
             <div class="text">创建</div>
           </div>
         </el-popover>
-
-        
         <div v-show="haveToken" class="menu" :class="$route.path == '/profile' && 'menuActive'" @click="routeTo('/profile')">
           <i class="icon el-icon-files"></i>
           <div class="text">个人中心</div>

+ 48 - 16
src/views/create/createScene.vue

@@ -147,7 +147,8 @@ import {
   getModelListApi,
 } from "@/api/chat.js"
 import { characterListApi } from "@/api/home.js"
-import { addSceneApi } from "@/api/create.js"
+import { addSceneApi, getSceneDetailApi, editSceneApi } from "@/api/create.js"
+import { detailApi } from "@/api/detail.js"
 export default {
   data() {
     return {
@@ -191,13 +192,15 @@ export default {
   mounted() {
     this.getModelList()
     this.getCharacterList()
-    if (this.$route.query.id) {
-      this.character = {
-        id: this.$route.query.id,
-        picture: this.$route.query.picture,
-        characterName: this.$route.query.characterName,
-      }
-      this.form.characterId = this.$route.query.id
+    if (this.$route.query.characterId) {
+      this.getDetail(this.$route.query.characterId)
+      // this.character = {
+      //   id: this.$route.query.characterId,
+      // }
+      this.form.characterId = this.$route.query.characterId
+    }
+    if (this.$route.query.sceneId) {
+      this.getSceneDetai(this.$route.query.sceneId)
     }
   },
   computed: {
@@ -225,6 +228,22 @@ export default {
         this.modelList = res.data
       })
     },
+    // 获取角色详情
+    getDetail(id) {
+      detailApi(id).then(res => {
+        console.log(res, '角色详情');
+        this.character = res.data
+      })
+    },
+    // 获取场景详情
+    getSceneDetai(id) {
+      getSceneDetailApi(id).then(res => {
+        console.log(res, '场景详情');
+        this.form = res.data
+        let backgroundArr = res.data.background.split('/')
+        this.uploadList.push({ name: backgroundArr[backgroundArr.length - 1], url: res.data.background });
+      })
+    },
     // 选择角色
     selectCharacter(value) {
       console.log(value, 'value');
@@ -241,14 +260,27 @@ export default {
     },
     submit() {
       this.form.background = this.uploadList[this.bgActive].url
-      addSceneApi(this.form).then(res => {
-        console.log(res, 'res>>>>>');
-        this.$message({
-          type: 'success',
-          message: '发布成功!'
-        });
-        this.$router.push('/profile')
-      })
+      if (this.form.sceneId) {
+        // 修改
+        editSceneApi(this.form).then(res => {
+          console.log(res, 'res>>>>>');
+          this.$message({
+            type: 'success',
+            message: '修改成功!'
+          });
+          this.$router.push('/profile')
+        })
+      } else {
+        // 新增
+        addSceneApi(this.form).then(res => {
+          console.log(res, 'res>>>>>');
+          this.$message({
+            type: 'success',
+            message: '发布成功!'
+          });
+          this.$router.push('/profile')
+        })
+      }
     },
     handleClickTab(tab, event) {
 

+ 31 - 11
src/views/create/index.vue

@@ -5,7 +5,7 @@
     <div class="mx-auto" style="width: 60%;">
       <div class="container mx-auto p-4">
         <div class="flex flex-col gap-6">
-          <div class="text-2xl mt-6 font-semibold">创建角色</div>
+          <div class="text-2xl mt-6 font-semibold">{{$route.query.id ? '编辑角色' : '创建角色'}}</div>
           <div class="text-xl font-medium">基本信息</div>
           <div class="text-xs text-gray-400">
             这些信息在机器人描述中供其他用户查看
@@ -130,8 +130,9 @@
 
 <script>
 import Header from "@/views/homeComponents/Header.vue"
-import { addCharacterApi, personalityListApi } from "@/api/create.js"
+import { addCharacterApi, personalityListApi, updateCharacterApi } from "@/api/create.js"
 import { labelListApi } from "@/api/home.js"
+import { detailApi } from "@/api/detail.js"
 import {
   getModelListApi,
 } from "@/api/chat.js"
@@ -189,7 +190,14 @@ export default {
   mounted() {
     this.getModelList()
     this.getLabelList()
-    this.getPersonalityList()
+    // this.getPersonalityList()
+    console.log(this.$route.query.id, 'this.$route.query.id');
+    if (this.$route.query.id) {
+      detailApi(this.$route.query.id).then(res => {
+        console.log(res, '详情');
+        this.form = res.data
+      })
+    }
     // console.log(this.$route.params.searchValue, 'this.$route.params.searchValue');
   },
   methods: {
@@ -234,14 +242,26 @@ export default {
     submitForm() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          addCharacterApi(this.form).then(() => {
-            this.$message({
-              message: '创建成功',
-              type: 'success'
-            });
-            this.$refs.form.resetFields()
-            this.$router.push('/profile')
-          })
+          if (this.form.id) {
+            updateCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '编辑成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          } else {
+            addCharacterApi(this.form).then(() => {
+              this.$message({
+                message: '创建成功',
+                type: 'success'
+              });
+              this.$refs.form.resetFields()
+              this.$router.push('/profile')
+            })
+          }
+          
         }
       })
     },

+ 150 - 12
src/views/profile/index.vue

@@ -58,10 +58,35 @@
             <i class="el-icon-question"></i>
             操作指南
           </div>
-          <div class=" text-gray-800 cursor-pointer ml-4">
-            <i class="el-icon-plus"></i>
-            创建
-          </div>
+          <el-popover
+            placement="bottom"
+            width="160"
+            v-model="popoverVisible"
+          >
+            <div class="flex flex-col">
+              <div class="submenu w-full text-gray-600 text-center py-2 rounded cursor-pointer"
+                @click="() => {
+                  popoverVisible = false
+                  routeTo('/createScene')
+                }"
+              >
+                创建场景
+              </div>
+              <div class="submenu w-full text-gray-600 text-center py-2 rounded cursor-pointer" 
+                @click="() => {
+                  popoverVisible = false
+                  routeTo('/create')
+                }"
+              >
+                创建角色
+              </div>
+            </div>
+            <div slot="reference" class=" text-gray-800 cursor-pointer ml-4">
+              <i class="el-icon-plus"></i>
+              创建
+            </div>
+          </el-popover>
+          
         </div>
       </div>
       <div class="list mt-4">
@@ -102,19 +127,30 @@
     <el-dialog
       title="提示"
       :visible.sync="dialogVisible"
-      width="30%"
+      width="500px"
     >
-      <div class="flex justify-between px-2 py-3 border-b border-gray-200">
-        <div>角色</div>
+      <div class="flex justify-between px-2 py-3 border-b border-gray-200" v-if="selectObj.scene == 1">
+        <div>场景</div>
         <div>{{ selectObj.name }}</div>
       </div>
       <div class="flex justify-between px-2 py-3 border-b border-gray-200">
         <div>角色</div>
-        <div>{{ selectObj.name }}</div>
+        <div>{{ selectObj.scene == 1 ? selectObj.characerName : selectObj.name }}</div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="toChat">聊 天</el-button>
-        <el-button type="primary">编 辑</el-button>
+      <div class="flex justify-between px-2 py-3 border-b border-gray-200">
+        <div>可见性</div>
+        <el-radio-group v-model="selectObj.type" @input="typeChange">
+          <el-radio :label="0">公开</el-radio>
+          <el-radio :label="1">私密</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="flex justify-between px-2 py-3 border-b border-gray-200">
+        <div></div>
+        <el-button round type="danger" @click="deleteData">删 除</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer flex justify-around">
+        <el-button class="flex-1" round @click="toChat">聊 天</el-button>
+        <el-button class="flex-1" round type="primary" @click="toCreate">编 辑</el-button>
       </span>
     </el-dialog>
     
@@ -123,11 +159,16 @@
 
 <script>
 import { queryCharacterAndSceneApi } from "@/api/profile.js"
-import { labelListApi, characterListApi } from "@/api/home.js"
+import { deleteSceneApi, 
+  deleteCharacterApi,
+  setCharacterShowApi,
+  editSceneApi 
+} from "@/api/create.js"
 import 'vue-awesome/icons/fire'
 export default {
   data() {
     return {
+      popoverVisible: false,
       dialogVisible: false,
       selectObj: {},
       active: 0,
@@ -138,11 +179,38 @@ export default {
     this.getCharacterList()
   },
   methods: {
+    routeTo(url) {
+      this.$router.push(url)
+    },
+
     toDetail(item) {
       console.log(item, 'item');
       this.selectObj = item
       this.dialogVisible = true
     },
+    // 前往编辑页面
+    toCreate() {
+      if (this.selectObj.scene == 0) {
+        // 点击是角色
+        this.$router.push({
+          path: '/create',
+          query: {
+            id: this.selectObj.id
+          }
+        })
+      } else if (this.selectObj.scene == 1) {
+        // 点击是场景
+        this.$router.push({
+          path: '/createScene',
+          query: {
+            sceneId: this.selectObj.id,
+            characterId: this.selectObj.characterId
+          }
+        })
+      }
+      
+    },
+    // 前往聊天页面
     toChat() {
       let query = {}
       if (this.selectObj.scene == 0) {
@@ -158,6 +226,76 @@ export default {
         query: query
       })
     },
+    // 修改公开私密状态
+    typeChange() {
+      console.log(this.selectObj, 'this.selectObj');
+      if (this.selectObj.scene == 0) {
+        // 点击是角色
+        let params = {
+          id: this.selectObj.id,
+          type: this.selectObj.type
+        }
+        setCharacterShowApi(this.selectObj.id, this.selectObj.type).then(res => {
+          this.$message({
+            type: 'success',
+            message: '修改成功!'
+          });
+          this.dialogVisible = false
+          this.getCharacterList()
+        })
+      } else if (this.selectObj.scene == 1) {
+        // 点击是场景
+        let params = {
+          sceneId: this.selectObj.id,
+          type: this.selectObj.type
+        }
+        editSceneApi(params).then(res => {
+          this.$message({
+            type: 'success',
+            message: '修改成功!'
+          });
+          this.dialogVisible = false
+          this.getCharacterList()
+        })
+      }
+    },
+    // 删除
+    deleteData() {
+      if (this.selectObj.scene == 0) {
+        // 删除角色
+        this.$confirm('此操作将永久删除该角色及其所有聊天记录, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteCharacterApi(this.selectObj.id).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.dialogVisible = false
+            this.getCharacterList()
+          })
+        })
+      } else if (this.selectObj.scene == 1) {
+        // 删除场景
+        this.$confirm('此操作将永久删除该场景及其所有聊天记录, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteSceneApi(this.selectObj.id).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.dialogVisible = false
+            this.getCharacterList()
+          })
+        })
+        
+      }
+    },
     tabChange(index) {
       this.active = index
       this.getCharacterList()

+ 48 - 2
src/views/user/components/userInfo.vue

@@ -1,7 +1,46 @@
 <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-lg ">
+    <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-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="">
+          </div>
+          <div class=" flex flex-col ml-4 justify-center">
+            <div class=" text-2xl text-white">用户名</div>
+            <div class=" text-sm text-white">
+              UID: 89942000
+              <i class="el-icon-copy-document cursor-pointer"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <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>
+        </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>
+        </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>
+        </div>
+        <div class="flex justify-between items-center py-6">
+          <div class="w-52">更换封面</div>
+          <el-button round>默认按钮</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>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -13,5 +52,12 @@ export default {
 </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>
+  .form >>> .el-input__inner {
+    height: 50px;
+  }
 </style>

+ 1 - 1
vue.config.js

@@ -37,7 +37,7 @@ module.exports = {
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         target: `http://aitest.api.rongcyl.cn`,
-        // target: `http://192.168.0.106:8086`,
+        // target: `http://192.168.0.107:8086`,
         changeOrigin: true,
         pathRewrite: {
           ["^" + process.env.VUE_APP_BASE_API]: "",