新版UI对话页面开发

liudong

2024-08-16 ab731748ca873ce980d10001fdb12ae319191ab3

 src/views/sessionManager/components/chatMenu.vue

@@ -2,91 +2,99 @@
  <div class="layoutNavMoveCenter">
    <div class="layoutNavMove___j5ets">
      <div class="myAgent___djnd_ myAgentAnim myAgentlight___yK7Gk">
<!--        <div data-testid="msh-sidebar-main" class="myAgentHome___PG6IZ"></div>-->
        <div data-testid="msh-sidebar-main" class="myAgentHome___PG6IZ"></div>
        <div class="myAgentLine___Isl6E"></div>
        <div class="myAgentTool___Y1_mC" data-testid="msh-sidebar-new">
        <div class="myAgentTool___Y1_mC" data-testid="msh-sidebar-new" @click="()=>{
          EventBus.emit('newChat')
        }">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconNew___DBZrW">
            <img
            src="../../../assets/images/talkbg.svg"
            style="width: 24px"
            alt=""></div>
        </div>
        <div data-testid="msh-sidebar-history" class="myAgentTool___Y1_mC">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconHistory___GTLWk">
        <div data-testid="msh-sidebar-history" class="myAgentTool___Y1_mC"  @click="()=>{
          EventBus.emit('history')
        }">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconHistory___GTLWk" >
            <img
              src="../../../assets/images/history.svg"
              style="width: 24px"
            alt="">
          </div>
        </div>
        <div data-testid="msh-sidebar-square" class="myAgentTool___Y1_mC myAgentToolSquare___dbLm1">
        <div data-testid="msh-sidebar-square" class="myAgentTool___Y1_mC myAgentToolSquare___dbLm1" @click="()=>{
          EventBus.emit('smartAi')
        }">
          <div class="myAgentToolIcon___gaAKI myAgentToolIconSquare___Rj1o_"><img
            src="../../../assets/images/agentbg.svg"
            style="width: 24px"
            alt=""></div>
        </div>
        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>
        <div class="myAgentBox___zrCit myAgentBoxhistoryconph28t7lagf3d1bhq0">
          <div class="myAgentBoxImg___Mgu9e">
            <div class="myAgentBoxImgLayout___u69B_">
              <div class="MuiBox-root css-5nczy5"><img
                src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt=""
                style="border-radius: 50%; width: 100%; height: 100%;"></div>
              <span class="myAgentBoxImgLayoutTip___xHV4m">学术搜索</span></div>
            <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
              <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
        <div id="myAgentBox">
          <div class="myAgentBox___zrCit">
            <div class="myAgentBoxImg___Mgu9e">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5"><img
                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt=""
                  style="border-radius: 50%; width: 100%; height: 100%;"></div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">学术搜索</span></div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
          <div class="myAgentBox___zrCit">
            <div class="myAgentBoxImg___Mgu9e">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5"><img
                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt=""
                  style="border-radius: 50%; width: 100%; height: 100%;"></div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">论文改写</span></div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
          <div class="myAgentBox___zrCit">
            <div class="myAgentBoxImg___Mgu9e">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5"><img
                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt=""
                  style="border-radius: 50%; width: 100%; height: 100%;"></div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">提示词专家</span></div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
          <div class="myAgentBox___zrCit">
            <div class="myAgentBoxImg___Mgu9e">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5"><img
                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt=""
                  style="border-radius: 50%; width: 100%; height: 100%;"></div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">塔罗师</span></div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
          <div class="myAgentBox___zrCit">
            <div class="myAgentBoxImg___Mgu9e">
              <div class="myAgentBoxImgLayout___u69B_">
                <div class="MuiBox-root css-5nczy5"><img
                  src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/guess.png" alt=""
                  style="border-radius: 50%; width: 100%; height: 100%;"></div>
                <span class="myAgentBoxImgLayoutTip___xHV4m">猜猜我在想谁</span></div>
              <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
                <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="myAgentBox___zrCit myAgentBoxhistoryconpgu0t7lagecg63730">
          <div class="myAgentBoxImg___Mgu9e">
            <div class="myAgentBoxImgLayout___u69B_">
              <div class="MuiBox-root css-5nczy5"><img
                src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt=""
                style="border-radius: 50%; width: 100%; height: 100%;"></div>
              <span class="myAgentBoxImgLayoutTip___xHV4m">论文改写</span></div>
            <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
              <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
            </div>
          </div>
        </div>
        <div class="myAgentBox___zrCit myAgentBoxhistoryconpg00t7lagbbsfqkq0">
          <div class="myAgentBoxImg___Mgu9e">
            <div class="myAgentBoxImgLayout___u69B_">
              <div class="MuiBox-root css-5nczy5"><img
                src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt=""
                style="border-radius: 50%; width: 100%; height: 100%;"></div>
              <span class="myAgentBoxImgLayoutTip___xHV4m">提示词专家</span></div>
            <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
              <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
            </div>
          </div>
        </div>
        <div class="myAgentBox___zrCit myAgentBoxhistoryconpgbgt7lagcavlq340">
          <div class="myAgentBoxImg___Mgu9e">
            <div class="myAgentBoxImgLayout___u69B_">
              <div class="MuiBox-root css-5nczy5"><img
                src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt=""
                style="border-radius: 50%; width: 100%; height: 100%;"></div>
              <span class="myAgentBoxImgLayoutTip___xHV4m">塔罗师</span></div>
            <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
              <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
            </div>
          </div>
        </div>
        <div class="myAgentBox___zrCit myAgentBoxhistoryconpgbot7lagcavlq34g">
          <div class="myAgentBoxImg___Mgu9e">
            <div class="myAgentBoxImgLayout___u69B_">
              <div class="MuiBox-root css-5nczy5"><img
                src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/guess.png" alt=""
                style="border-radius: 50%; width: 100%; height: 100%;"></div>
              <span class="myAgentBoxImgLayoutTip___xHV4m">猜猜我在想谁</span></div>
            <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">
              <div class="myAgentBoxImgDeleteInner____Hawc">从侧边栏移除</div>
            </div>
          </div>
        </div>
        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>
<!--        <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>-->
      </div>
    </div>
  </div>
@@ -101,13 +109,14 @@
import { computed, nextTick, onMounted, watch, reactive, ref } from "vue";

import { Message } from "@arco-design/web-vue";
import { EventSourceParserStream } from "eventsource-parser/stream";
import {
  chatApi,
  getDialogListApi,
  getSessionDetailsApi,
  sessionListApi
} from "@/api/session";
import EventBus from '@/utils/EventBus';








</script>
<style scoped lang="less">
@@ -119,8 +128,10 @@
    height: calc(100vh - 160px); /* 或者指定高度 */
    position: relative;
  }
  .layoutNavMove___j5ets{

  #myAgentBox{
    //width: 100%;
    //max-height: 220px;
    //overflow: hidden;
  }