refactor(agent): 重构智能体页面布局和样式
-调整了智能体卡片的布局结构，优化了标题和描述的显示方式 - 改进了历史对话的展示样式，增加了滚动指示器 - 统一了标签和图标的样式，提升了视觉一致性 - 优化了搜索框和卡片列表的样式，提高了用户体验
This commit is contained in:
林志军
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="agent-card">
|
||||
<div class="header-section">
|
||||
<div class="image-container">
|
||||
<img :src="cozeInfo.icon_url" alt="" />
|
||||
<img :src="cozeInfo.icon_url" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 '';
|
||||
};
|
||||
@ -108,11 +108,12 @@ const cozeWebSdkConfig = (botId, name, auth) => {
|
||||
icon: '',
|
||||
zIndex: 1000,
|
||||
},
|
||||
footer:{
|
||||
expressionText:"内容由AI生成，无法确保真实准确，仅供参考。",
|
||||
footer: {
|
||||
expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
|
||||
},
|
||||
},
|
||||
auth: auth,
|
||||
userInfo: userInfo,
|
||||
header: {
|
||||
isShow: true,
|
||||
isNeedClose: false,
|
||||
|
||||
@ -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="搜索智能体"
|
||||
@ -12,7 +12,7 @@
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<span class="span-title">{{ item.name }}</span>
|
||||
<a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
|
||||
<a-col :span="3" v-for="(product, k) in item.agent_products">
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,34 +1,51 @@
|
||||
<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="tag">
|
||||
<div class="">
|
||||
<img
|
||||
class="status-icon"
|
||||
:src="workflow"
|
||||
/>
|
||||
<div class="info-section">
|
||||
<div class="title-group">
|
||||
<div class="title">{{cozeInfo.name}}</div>
|
||||
<div class="tag">
|
||||
<div class="">
|
||||
<img
|
||||
class="status-icon"
|
||||
:src="workflow"
|
||||
/>
|
||||
</div>
|
||||
<div class="text">工作流</div>
|
||||
</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="usage-info">
|
||||
<div class="count">{{cozeInfo.views}}</div>
|
||||
<div class="label">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
{{cozeInfo?.description}}
|
||||
<div class="description-section">
|
||||
<div class="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>
|
||||
|
||||
@ -1,198 +1,225 @@
|
||||
.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 {
|
||||
align-self: stretch;
|
||||
height: 160px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: flex;
|
||||
}
|
||||
.header-section {
|
||||
align-self: stretch;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.header-image {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
background: #FFEDED;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.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 {
|
||||
align-self: stretch;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
}
|
||||
.info-section {
|
||||
align-self: stretch;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.title {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.title-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.tag {
|
||||
height: 20px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
background: var(--Functional-Red-1, #FFE9E7);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
}
|
||||
.title {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
background: var(--Functional-Red-1, #FFE9E7);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.tag-icon-inner {
|
||||
width: 11.50px;
|
||||
height: 10.75px;
|
||||
left: 0.25px;
|
||||
top: 0.63px;
|
||||
position: absolute;
|
||||
background: var(--Functional-Red-6, #F64B31);
|
||||
}
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
.tag-text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
width: 10.74px;
|
||||
height: 10.50px;
|
||||
left: 0.63px;
|
||||
top: 0.75px;
|
||||
position: absolute;
|
||||
background: var(--Brand-6, #6D4CFE);
|
||||
}
|
||||
}
|
||||
|
||||
.usage-stats {
|
||||
width: 79px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usage-count {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.usage-info {
|
||||
width: 79px;
|
||||
height: 34px;
|
||||
position: relative;
|
||||
|
||||
.usage-label {
|
||||
left: 43px;
|
||||
top: 3px;
|
||||
position: absolute;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.count {
|
||||
left: 0px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
.label {
|
||||
left: 43px;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
align-self: stretch;
|
||||
height: 0px;
|
||||
outline: 1px var(--Border-2, #E6E6E8) solid;
|
||||
outline-offset: -0.50px;
|
||||
}
|
||||
.description-section {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.history-title {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-item {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.divider {
|
||||
align-self: stretch;
|
||||
height: 0px;
|
||||
outline: 1px var(--Border-2, #E6E6E8) solid;
|
||||
outline-offset: -0.50px;
|
||||
}
|
||||
|
||||
.history-item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.history-section {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding-left: 1px;
|
||||
padding-right: 1px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
position: absolute;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
}
|
||||
.history-title {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.scroll-indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
.text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding: 8px 1px;
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user