f307588cc5
-调整了智能体卡片的布局结构，优化了标题和描述的显示方式 - 改进了历史对话的展示样式，增加了滚动指示器 - 统一了标签和图标的样式，提升了视觉一致性 - 优化了搜索框和卡片列表的样式，提高了用户体验
73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div class="agent-card">
|
|
<div class="header-section">
|
|
<div class="image-container">
|
|
<img :src="cozeInfo.icon_url" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="info-section">
|
|
<div class="title-group">
|
|
<div class="title">{{ cozeInfo.name }}</div>
|
|
<div class="tag">
|
|
<div>
|
|
<img class="status-icon" :src="chatbotIcon" />
|
|
</div>
|
|
<div class="text">对话式</div>
|
|
</div>
|
|
</div>
|
|
<div class="usage-info">
|
|
<a-space>
|
|
<span class="count">{{ cozeInfo.views }}</span>
|
|
</a-space>
|
|
<a-space>
|
|
<span class="label"> 次使用 </span>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
<div class="description-section">
|
|
<div class="description">
|
|
{{ cozeInfo.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineProps } from 'vue';
|
|
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
|
|
import chatbotIcon from '@/assets/svg/chatbot.svg';
|
|
|
|
const props = defineProps({
|
|
cozeInfo: {
|
|
type: Object as () => any,
|
|
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';
|
|
</style>
|