be3843585a
- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局 - 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示
54 lines
1.2 KiB
Vue
54 lines
1.2 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">
|
|
<a-tooltip :content="cozeInfo.name">
|
|
<div class="title">{{ cozeInfo.name }}</div>
|
|
</a-tooltip>
|
|
<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 chatbotIcon from '@/assets/svg/chatbot.svg';
|
|
|
|
const props = defineProps({
|
|
cozeInfo: {
|
|
type: Object as () => any,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
onMounted(() => {});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import './history.scss';
|
|
</style>
|