增加角色详情页面，增加场景对话

src/views/chat/ChatH5.vue

@@ -4,21 +4,22 @@
       <!-- <img class="absolute h-full" :src="baseApi + info.picture" alt=""> -->
       <div class="top bg-white px-2 flex justify-between">
         <el-button class="tm_button" type="info" icon="el-icon-arrow-left" circle @click="goBack"></el-button>
+        <div v-if="sceneId" class=" text-sm" style="max-width: 50%;">已进入场景：{{ sceneInfo.sceneName }}</div>
         <div class="flex">
           <el-button class="tm_button" type="info" circle>
             <i class="fa-solid fa-volume-high text-sm"></i>
             <!-- <i class="fa-solid fa-volume-xmark text-sm"></i> -->
           </el-button>
-          <el-dropdown trigger="click">
+          <el-dropdown trigger="click" @command="rtHandleCommand">
             <el-button class="tm_button ml-2" type="info" icon="el-icon-more" circle></el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item icon="el-icon-warning-outline">查看详情</el-dropdown-item>
+              <el-dropdown-item command="1" icon="el-icon-warning-outline">查看详情</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
       </div>
       <audio ref="audio" muted v-show="false" :src="audioUrl" autoplay="" @ended="audioEnd" controls></audio>
-      <div class="chatContent">
+      <div class="chatContent" :style="`background-image: url(${baseApi + sceneInfo.background})`">
         <!-- <div class="leftImg">
           <img :src="baseApi + info.picture" alt="">
           <div class="aiInfo">
@@ -38,11 +39,11 @@
         </div> -->
         <div class="chat-box relative">
           <div class="messages" ref="messages">
-            <template v-for="(item, index) in  returnMessage ">
+            <template v-for="(item, index) in returnMessage ">
               <div v-if="item.role == 'assistant'" class="text-white mb-4 flex" :key="index">
                 <!-- ai返回的信息 -->
                 <div class="pt-2 photo">
-                  <img :src="baseApi + info.picture" class="rounded-full w-12 h-12 object-cover" />
+                  <img :src="baseApi + info.picture" class="rounded-full w-12 h-12 object-cover" @click="toDetail" />
                 </div>
                 <div class="message fex-1 ml-2 mt-3 p-2 rounded-r-md rounded-bl-md text-base">
                   <div v-show="!item.content" class="loadingMessage">
@@ -94,19 +95,37 @@
               </div>
             </div>
             <div class="bottom px-2">
-              <div class="button text-white" @click="() => {
+              <div v-if="!sceneId" class="button text-white" @click="() => {
                 this.showBottomPopup = false
                 this.newStart()
-              }">
+              }
+                ">
+                <i class="icon iconfont icon-xinduihua"></i>
+                <div>新的对话</div>
+              </div>
+              <div v-if="sceneId" class="button text-white" @click="() => {
+                this.showBottomPopup = false
+                this.handleCommand3(2)
+              }
+                ">
+                <i class="icon iconfont icon-xinduihua"></i>
+                <div>新建场景对话</div>
+              </div>
+              <div v-if="sceneId" class="button text-white" @click="() => {
+                this.showBottomPopup = false
+                this.handleCommand3(3)
+              }
+                ">
                 <i class="icon iconfont icon-xinduihua"></i>
-                <div class="text-xs">新的对话</div>
+                <div>返回常规对话</div>
               </div>
               <div class="button text-white" @click="() => {
                 this.showBottomPopup = false
                 this.showHistory()
-              }">
+              }
+                ">
                 <i class="icon iconfont icon-lishi"></i>
-                <div class="text-xs">历史对话</div>
+                <div>历史对话</div>
               </div>
             </div>
           </div>
@@ -116,10 +135,11 @@
         <transition name="el-zoom-in-bottom">
           <div class="popupContent popup2" v-show="showBottomPopup2">
             <div class=" w-full text-center py-2 text-base font-semibold">历史对话</div>
-            <div class="historyRow py-2 cursor-pointer" v-for="(item, index) in historyList" :key="index" @click="() => {
+            <div class="historyRow py-2 cursor-pointer" v-for="( item, index ) in  historyList " :key="index" @click="() => {
               showBottomPopup2 = false
               clickDialogue(jsHistory, item, index)
-            }">
+            }
+              ">
               <div class="flex justify-between">
                 <div class="name text-base">{{ item.chatTitle }}</div>
                 <div class="time">{{ item.createTime }}</div>
@@ -272,6 +292,20 @@ export default {
       // 查找当前角色是否有对话记录
       this.searchHistory(this.info.id)
     },
+    rtHandleCommand(value) {
+      // console.log(value);
+      if (value == 1) {
+        this.toDetail()
+      }
+    },
+    toDetail() {
+      this.$router.push({
+        path: '/detailH5',
+        query: {
+          id: this.info.id
+        }
+      })
+    },
     // 显示历史聊天记录
     showHistory() {
       this.showBottomPopup2 = true
@@ -325,7 +359,7 @@ export default {
     handleCommand3(value) {
       if (value == 1) {
       } else if (value == 2) {
-        // 情况聊天记录
+        // 清空聊天记录
         this.returnMessage = []
         // 新建场景对话
         this.newStart()
@@ -1225,7 +1259,9 @@ export default {
 
 .chatContent {
   // margin-top: 30px;
-  background-size: 100% 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   height: calc(100% - 50px - 63px);
   justify-content: center;
@@ -1405,11 +1441,12 @@ export default {
 
     .button {
       height: 100%;
-      width: 60px;
+      width: 80px;
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
+      font-size: 11px;
 
       .icon {
         width: 34px;

src/views/detail/indexH5.vue

@@ -1,97 +1,51 @@
 <template>
-  <div class="detail bg-gray-900 comBg overflow-hidden relative">
-    <img :src="baseApi + info.picture" class="img w-full absolute" />
-    <button class="tm_button absolute text-xs bg-none py-1 px-3 rounded mt-6 ml-2 flex" @click="goBack">
-      <i class="el-icon-arrow-left"></i>
-    </button>
-    <div class="text-white mx-auto absolute infoBottom bg-gray-900 pt-4 px-4 h-full w-full">
-      <div class="flex justify-between">
-        <img :src="baseApi + info.picture" class="photo img w-20 h-20 rounded-full" />
-        <!-- <div class="info ">
-          <div>
-            <button class="text-xs bg-gray-700 py-1 px-2 rounded mt-2 flex">
-              <v-icon name="brands/twitter" class="mx-1" scale="1"/>
-              分享至Twitter
-            </button>
-          </div>
-          <div>
-            <button class="text-xs bg-gray-700 py-1 px-2 rounded mt-2 flex">
-              <v-icon name="brands/reddit" class="mx-1" scale="1"/>
-              分享至Reddit
-            </button>
-          </div>
-        </div> -->
-        <div class="flex-1 ml-4">
-          <div class="flex justify-between w-full">
-            <h3 class="text-lg font-bold">
-              {{ info.characterName }}
-            </h3>
-            <div class="flex items-center justify-end pb-3">
-              <div class="flex items-center mx-1 text-gray-200">
-                <v-icon name="heart" scale="1.2"/>
-                <!-- <div class="ml-1 w-9">{{ info.likeNum }}</div> -->
-              </div>
- 
-              <!-- <div class="flex items-center">
-                <v-icon name="share" scale="1.5"/>
-                <span>{{ item.likeNum }}</span>
-              </div> -->
-            </div>
-          </div>
-          
-          <div class="flex justify-start mt-2">
-            <div class="labels">
-              <div v-for="(item, index) in info.labelArr" :key="index" class="bg-gray-700 px-2 py-1 rounded inline-flex items-center mx-1 text-xs h-8">
-                <!-- <i class="fas fa-smile text-yellow-400 mr-2"></i> -->
-                {{ item }}
-              </div>
-            </div>
-          </div>
-          <!-- onClick={() => navigate('/chat')} -->
-        </div>
+  <div class="detail bg-gray-900 w-full overflow-hidden relative">
+    <img :src="baseApi + info.picture" class="bgImg absolute" />
+    <div class="topTool">
+      <div class="tm_button rounded-full text-white" @click="goBack">
+        <i class="el-icon-arrow-left"></i>
       </div>
-      
-      <!-- <div class="flex items-center space-x-4 mt-4">
-        <div class="flex-1">
-          <h1 class="text-2xl mb-2">
-            {{ info.characterName }}
-          </h1>
-          <h1 class="text-lg  mb-2">
-            性格
-          </h1>
-          <p class="text-sm">
-            {{ info.characterPersonalityTags }}
-          </p>
+      <div class="tm_button rounded-full text-white">
+        <i class="el-icon-more"></i>
+      </div>
+    </div>
+    <div class="content">
+      <div class="info w-full px-4 text-white" style="height: 30%; margin-top: 60px;">
+        <div class="flex pt-4">
+          <img class="w-16 h-16 rounded-full object-cover border-2 border-white mr-2" :src="baseApi + info.picture">
+          <div class="flex flex-col text-white justify-center">
+            <div class=" text-lg font-semibold">{{ info.characterName }}</div>
+            <div class=" text-xs">Xchat No.{{ info.id }}</div>
+          </div>
         </div>
-      </div> -->
-
-      <div class="mt-2">
-        <h2 class="text-lg mb-2">描述</h2>
-        <p class="text-xs">
+        <div class="mt-2 mb-4 text-sm prologue">
           {{ info.prologue }}
-        </p>
+        </div>
+        <div class="text-sm mb-2">创作人 <span class="ml-4">{{ info.author }}</span></div>
+        <div class="text-sm">创建时间 <span class="ml-4">{{ info.createTime }}</span></div>
       </div>
-      <div class="mt-2 h-28 rounded bg-gray-600 p-2">
-        <h2 class="text-base mb-1">开场白</h2>
-        <p class="text-xs ">
-          {{ info.prologue }}
-        </p>
+      <div class="bg-white mx-auto absolute infoBottom pt-4 px-4 w-full" style="height: calc(100vh - 60px);">
+        <div class="scenarioList h-full">
+          <div class=" text-base" style="height: 25px;">场景</div>
+          <div v-if="info.sceneList && info.sceneList.length > 0" class="grid grid-cols-2 gap-2 mb-4 cursor-pointer">
+            <template v-for="(item, index) in info.sceneList">
+              <div v-if="item.isDelete == 0" class="flex flex-col justify-center" :key="index"
+                @click="toChat(item.sceneId)">
+                <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>
       </div>
-      <div class="flex justify-center mt-8">
-        <i class="fas fa-chevron-up text-gray-400"></i>
+      <div class="bottomButtons flex justify-around px-8">
+        <div class="button b1" @click="toCreateScene">创建场景</div>
+        <div class="button b2 bgColor1" @click="toChat()">开始对话</div>
       </div>
     </div>
-    <div class="w-full absolute bottom-0 bg-gray-900 flex justify-center py-2">
-      <button
-        class="bg-pink-600 text-xs py-1 px-4 w-10/12 h-10 text-white font-semibold"
-        style="border-radius: 2.5rem;"
-        @click.prevent="toChat"
-      >
-        隐私聊天
-      </button>
-    </div>
   </div>
-  
 </template>
 
 <script>
@@ -116,17 +70,32 @@ export default {
     if (this.$route.query.id) {
       this.getDetail(this.$route.query.id)
     }
+
   },
   methods: {
     goBack() {
       this.$router.back()
     },
-    toChat() {
+    toChat(sceneId) {
+      let query = {
+        characterId: this.info.id
+      }
+      if (sceneId) {
+        query.sceneId = sceneId
+      }
+      console.log(query, 'query');
       this.$router.push({
         path: '/chatH5',
-        query: {
-          characterId: this.info.id
-        }
+        query: query
+      })
+    },
+    toCreateScene() {
+      let query = {
+        characterId: this.info.id
+      }
+      this.$router.push({
+        path: '/createScene',
+        query: query
       })
     },
     getDetail(id) {
@@ -143,25 +112,112 @@ export default {
 .detail {
   height: 100vh;
 }
+
 .labels {
   width: 100%;
   overflow-x: auto;
 }
-.photo {
 
-}
-.img {
+.photo {}
+
+.bgImg {
   object-fit: cover;
   object-position: top;
+  height: 70%;
+  width: 100%;
 }
+
 .infoBottom {
   overflow: hidden;
   border-radius: 10px;
-  top: 60%;
+  // top: 60%;
 }
-.tm_button {
-  border: 1px solid #FFF;
-  color: #FFF;
-  font-size: 16px;
+
+.content {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  padding-top: 60px;
+  background: rgba(58, 58, 58, 0.3);
+  overflow-y: auto;
+}
+
+.content::-webkit-scrollbar {
+  display: none;
+  /* Chrome Safari */
+}
+
+.content {
+  scrollbar-width: none;
+  /* firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.topTool {
+  position: absolute;
+  width: 100%;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  top: 0;
+  z-index: 5;
+
+  .tm_button {
+    font-size: 16px;
+    width: 30px;
+    height: 30px;
+    background: rgba(23, 23, 23, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .info {
+    .prologue {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+
+.scenarioList {
+  .list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 10px;
+  }
+}
+
+.bottomButtons {
+  position: fixed;
+  bottom: 20px;
+  width: 100%;
+
+  .button {
+    height: 30px;
+    width: 100px;
+    border-radius: 100px;
+    text-align: center;
+    line-height: 30px;
+    font-size: 15px;
+    box-shadow: 0px 0px 2px 1px rgba(117, 117, 117, 0.3);
+  }
+
+  .b1 {
+    border: solid 1px #000;
+  }
+
+  .b2 {
+    color: #fff;
+  }
 }
 </style>

src/views/profile/profileH5.vue

@@ -125,7 +125,7 @@ export default {
         query.characterId = this.selectObj.characterId
         query.sceneId = this.selectObj.id
         this.$router.push({
-          path: '/chat',
+          path: '/chatH5',
           query: query
         })
       }