refactor(agent): 重构智能体页面布局和样式

-调整了智能体卡片的布局结构，优化了标题和描述的显示方式 - 改进了历史对话的展示样式，增加了滚动指示器 - 统一了标签和图标的样式，提升了视觉一致性 - 优化了搜索框和卡片列表的样式，提高了用户体验
2025-07-28 13:47:40 +08:00
parent 7cdc7c1e44
commit 8ed40110ae
8 changed files with 294 additions and 226 deletions
--- a/src/router/routes/modules/agent.ts
+++ b/src/router/routes/modules/agent.ts
@ -22,19 +22,11 @@ const COMPONENTS: AppRouteRecordRaw[] = [
        name: 'AgentIndex',
        component: () => import('@/views/agent/index'),
        meta: {
+          locale:'ai应用',
          requiresAuth: false,
          requireLogin: true,
        },
-      },
-      {
-        path: 'index',
-        name: 'AgentIndex',
-        component: () => import('@/views/agent/index'),
-        meta: {
-          requiresAuth: false,
-          requireLogin: true,
-        },
-      },
+      }
    ],
  },
 ];
--- a/src/views/agent/chat/components/history.scss
+++ b/src/views/agent/chat/components/history.scss
@ -22,14 +22,16 @@
    .image-container {
      height: 400px;
      overflow: hidden;
-      border-radius: 8px;
+      border-radius: 10px;
    }

    .image-container img {
      width: 100%;
      height: auto;
+      padding: 24px;
      aspect-ratio: 1 / 1;
      object-fit: cover;
+      border-radius: 10px;
    }
  }

@ -94,12 +96,12 @@

    .usage-info {
      width: 79px;
-      height: 24px;
+      height: 34px;
      position: relative;

      .count {
        left: 0px;
-        top: 0px;
+        top: 10px;
        position: absolute;
        color: var(--Text-2, #3C4043);
        font-size: 16px;
@ -110,7 +112,7 @@

      .label {
        left: 43px;
-        top: 3px;
+        top: 10px;
        position: absolute;
        color: var(--Text-3, #737478);
        font-size: 12px;
--- a/src/views/agent/chat/index.vue
+++ b/src/views/agent/chat/index.vue
@ -83,12 +83,12 @@ const initChat = async () => {

  Object.assign(cozeInfo, data.info);
  await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
-  let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth);
+  let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
  cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
  showChatPage();
 };

-const cozeWebSdkConfig = (botId, name, auth) => {
+const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
  auth.onRefreshToken = function () {
    return '';
  };
@ -109,10 +109,11 @@ const cozeWebSdkConfig = (botId, name, auth) => {
        zIndex: 1000,
      },
      footer: {
-        expressionText:"内容由AI生成，无法确保真实准确，仅供参考。",
+        expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
      },
    },
    auth: auth,
+    userInfo: userInfo,
    header: {
      isShow: true,
      isNeedClose: false,
--- a/src/views/agent/index/index.vue
+++ b/src/views/agent/index/index.vue
@ -1,7 +1,7 @@
 <template>
  <div class="agent-wrap">
    <a-input
-      style="float: right; width: 300px"
+      style="float: right; width: 400px"
      v-model="query.name"
      @blur="getData()"
      placeholder="搜索智能体"
@ -32,7 +32,7 @@
            <div class="card-footer">
              <div
                :class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
-                :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #E6F3FF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
+                :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
                data-size="mini-20px"
              >
                <img
--- a/src/views/agent/index/style.scss
+++ b/src/views/agent/index/style.scss
@ -34,29 +34,42 @@
  }

  .card-image-container {
-    width: 99%; // 设置宽度
-    height: 200px; // 设置高度，与宽度一致，保持正方形比例
+    width: 99%;
+    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
-    overflow: hidden; // 防止图片超出容器
+    overflow: hidden;
  }

  .card-image {
    width: 100%;
    height: 100%;
    border-radius: 7px;
-    object-fit: cover; // 确保图片按比例缩放并裁剪
+    object-fit: cover;
  }
+
  .card-content {
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: 4px;
+    flex: 1;
+    overflow: hidden;
+
+    .card-title {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
    }

+    .card-description {
+      height: 40px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+
  .card-title {
    color: var(--Text-1, #211f24);
    font-size: 16px;
@ -124,7 +137,7 @@

    .blue-tag {
      .status-text {
-        color: var(--Functional-Blue-6, #007BFF);
+        color: var(--Functional-Blue-6, #6D4CFE);
      }
    }

--- a/src/views/agent/work-flow/components/HistoryChat.vue
+++ b/src/views/agent/work-flow/components/HistoryChat.vue
@ -1,12 +1,13 @@
 <template>
-  <div class="container">
-    <div class="header-image-container">
-      <div class="header-image">
-        <img :src="cozeInfo?.icon_url" alt="Header Image" />
+  <div class="agent-card">
+    <div class="header-section">
+      <div class="image-container">
+        <img :src="cozeInfo.icon_url" alt="" />
      </div>
    </div>
-    <div class="title-container">
-      <div class="title">{{cozeInfo?.name}}</div>
+    <div class="info-section">
+      <div class="title-group">
+        <div class="title">{{cozeInfo.name}}</div>
        <div class="tag">
          <div class="">
            <img
@ -14,21 +15,37 @@
              :src="workflow"
            />
          </div>
-        <div class="tag-text">工作流</div>
-      </div>
-      <div class="usage-stats">
-        <div class="usage-count">{{cozeInfo?.views}}</div>
-        <div class="usage-label">次使用</div>
+          <div class="text">工作流</div>
        </div>
      </div>
+      <div class="usage-info">
+        <div class="count">{{cozeInfo.views}}</div>
+        <div class="label">次使用</div>
+      </div>
+    </div>
+    <div class="description-section">
      <div class="description">
-      {{cozeInfo?.description}}
+        {{cozeInfo.description}}
      </div>
+    </div>
+    <div class="divider"></div>
+    <!--    <div class="history-section">-->
+    <!--      <div class="history-title">-->
+    <!--        <div class="text">历史对话</div>-->
+    <!--      </div>-->
+    <!--      <div class="history-list">-->
+    <!--        <div class="history-item">-->
+    <!--          <div class="item-text">梳理这次舆情的时间线和关键节点</div>-->
+    <!--        </div>-->

+    <!--      </div>-->
+    <!--    </div>-->
  </div>
 </template>
+
 <script lang="ts" setup>
 import { defineProps } from 'vue';
+import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
 import workflow from '@/assets/svg/workflow.svg';

 const props = defineProps({
@ -36,16 +53,32 @@ const props = defineProps({
    type: Object as () => any,
    default: () => ({}),
  },
-  botId: {
-    type: String,
-    default: '',
-  },
 });

+const delMessage = async (chatId, conversationId) => {
+  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
+  if (code === 200) {
+    console.log(data, 'data');
+  }
+};
+
+const conversations = ref([]);
+
+const getHistoryChatData = async (botId) => {
+  const { code, data } = await getHistoryChat({ bot_id: botId });
+  if (code === 200) {
+    conversations.value = data.list;
+  }
+};
+const truncateText = (text: string, maxLength = 30) => {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + '...';
+};
+
 onMounted(() => {
 });
 </script>

 <style scoped>
-@import "./history.scss";
+@import './history.scss';
 </style>
--- a/src/views/agent/work-flow/components/history.scss
+++ b/src/views/agent/work-flow/components/history.scss
@ -1,140 +1,144 @@
-.container {
+
+.agent-card {
  width: 100%;
  height: 100%;
  background: var(--BG-100, #F7F8FA);
  overflow: hidden;
  border-radius: 8px;
+  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
-  display: inline-flex;
-}

-.header-image-container {
+  .header-section {
    align-self: stretch;
-  height: 160px;
+    height: 300px;
+    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
-  display: flex;
-}

-.header-image {
-  align-self: stretch;
-  flex: 1 1 0;
-  position: relative;
-  background: #FFEDED;
+    .image-container {
+      height: 400px;
      overflow: hidden;
      border-radius: 8px;
    }

-.header-image img {
-  width: 408.90px;
-  height: 218px;
-  left: -24.45px;
-  top: -29px;
-  position: absolute;
+    .image-container img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1 / 1;
+      object-fit: cover;
+    }
  }

-.title-container {
+  .info-section {
    align-self: stretch;
    padding-top: 15px;
    padding-bottom: 15px;
+    display: flex;
    justify-content: space-between;
    align-items: flex-start;
-  display: inline-flex;
-}
+
+    .title-group {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 4px;

      .title {
-  justify-content: center;
-  display: flex;
-  flex-direction: column;
        color: var(--Text-1, #211F24);
        font-size: 18px;
-  padding: 5px;
-  font-family: Alibaba PuHuiTi;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
        font-weight: 400;
        line-height: 26px;
-  word-wrap: break-word;
+        padding: 10px;
      }

      .tag {
        height: 20px;
-  padding-left: 8px;
-  padding-right: 8px;
+        padding: 0 8px;
        background: var(--Functional-Red-1, #FFE9E7);
-  overflow: hidden;
        border-radius: 2px;
+        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
-  display: flex;
-}

-.tag-icon {
+        .icon {
          width: 12px;
          height: 12px;
          position: relative;
-}

-.tag-icon-inner {
-  width: 11.50px;
-  height: 10.75px;
-  left: 0.25px;
-  top: 0.63px;
+          &::before {
+            content: '';
+            width: 10.74px;
+            height: 10.50px;
+            left: 0.63px;
+            top: 0.75px;
            position: absolute;
-  background: var(--Functional-Red-6, #F64B31);
+            background: var(--Brand-6, #6D4CFE);
+          }
        }

-.tag-text {
+        .text {
          color:  var(--Functional-Red-6, #F64B31);
          font-size: 12px;
-  font-family: Alibaba PuHuiTi;
+          font-family: 'Alibaba PuHuiTi', sans-serif;
          font-weight: 400;
          line-height: 20px;
-  word-wrap: break-word;
+        }
+      }
    }

-.usage-stats {
+    .usage-info {
      width: 79px;
-  height: 24px;
+      height: 34px;
      position: relative;
-}

-.usage-count {
+      .count {
        left: 0px;
-  top: 0px;
+        top: 10px;
        position: absolute;
        color: var(--Text-2, #3C4043);
        font-size: 16px;
-  font-family: Alibaba PuHuiTi;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
        font-weight: 400;
        line-height: 24px;
-  word-wrap: break-word;
      }

-.usage-label {
+      .label {
        left: 43px;
-  top: 3px;
+        top: 10px;
        position: absolute;
        color: var(--Text-3, #737478);
        font-size: 12px;
-  font-family: Alibaba PuHuiTi;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
        font-weight: 400;
        line-height: 20px;
-  word-wrap: break-word;
      }
+    }
+  }
+
+  .description-section {
+    align-self: stretch;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;

    .description {
      align-self: stretch;
      color: var(--Text-2, #3C4043);
      font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+      font-family: 'Alibaba PuHuiTi', sans-serif;
      font-weight: 400;
      line-height: 22px;
-  word-wrap: break-word;
-  padding-inline: 5px;
+      padding: 10px;
+    }
  }

  .divider {
@ -144,55 +148,78 @@
    outline-offset: -0.50px;
  }

+  .history-section {
+    align-self: stretch;
+    flex: 1 1 0;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+
    .history-title {
-  color: var(--Text-3, #737478);
+      align-self: stretch;
+      height: 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 10px;
+
+      .text {
+        color: var(--Functional-Red-6, #F64B31);
        font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+        font-family: 'Alibaba PuHuiTi', sans-serif;
        font-weight: 400;
        line-height: 22px;
-  word-wrap: break-word;
      }
+    }
+
+    .history-list {
+      align-self: stretch;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;

      .history-item {
        align-self: stretch;
        height: 40px;
        padding: 8px;
        border-radius: 8px;
+        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
-  display: inline-flex;
-}

-.history-item-text {
+        .item-text {
          flex: 1 1 0;
          color: var(--Text-1, #211F24);
          font-size: 14px;
-  font-family: Alibaba PuHuiTi;
+          font-family: 'Alibaba PuHuiTi', sans-serif;
          font-weight: 400;
          line-height: 22px;
-  word-wrap: break-word;
+        }
+      }
    }

    .scroll-indicator {
      width: 8px;
      height: 240px;
-  padding-left: 1px;
-  padding-right: 1px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+      padding: 8px 1px;
+      position: absolute;
      left: 362px;
      top: 40px;
-  position: absolute;
+      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 10px;
-  display: inline-flex;
-}

-.scroll-indicator-bar {
+      .indicator-bar {
        flex: 1 1 0;
        height: 80px;
        background: var(--BG-600, #939499);
        border-radius: 4px;
      }
+    }
+  }
+}