新版UI对话页面开发

liudong

2024-08-16 ab731748ca873ce980d10001fdb12ae319191ab3

 src/views/sessionManager/components/chatMenu.vue

@@ -2,7 +2,7 @@
  <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" @click="()=>{
          EventBus.emit('newChat')
@@ -32,67 +32,69 @@
            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>
@@ -109,6 +111,13 @@
import { Message } from "@arco-design/web-vue";
import EventBus from '@/utils/EventBus';








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

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