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

-调整了智能体卡片的布局结构,优化了标题和描述的显示方式
- 改进了历史对话的展示样式,增加了滚动指示器
- 统一了标签和图标的样式,提升了视觉一致性
- 优化了搜索框和卡片列表的样式,提高了用户体验
This commit is contained in:
林志军
2025-07-28 20:20:47 +08:00
parent f13384309a
commit f307588cc5
4 changed files with 22 additions and 36 deletions

View File

@ -7,28 +7,28 @@
</div> </div>
<div class="info-section"> <div class="info-section">
<div class="title-group"> <div class="title-group">
<div class="title">{{cozeInfo.name}}</div> <div class="title">{{ cozeInfo.name }}</div>
<div class="tag"> <div class="tag">
<div> <div>
<img <img class="status-icon" :src="chatbotIcon" />
class="status-icon"
:src="chatbotIcon"
/>
</div> </div>
<div class="text">对话式</div> <div class="text">对话式</div>
</div> </div>
</div> </div>
<div class="usage-info"> <div class="usage-info">
<div class="count">{{cozeInfo.views}}</div> <a-space>
<div class="label">次使用</div> <span class="count">{{ cozeInfo.views }}</span>
</a-space>
<a-space>
<span class="label"> 次使用 </span>
</a-space>
</div> </div>
</div> </div>
<div class="description-section"> <div class="description-section">
<div class="description"> <div class="description">
{{cozeInfo.description}} {{ cozeInfo.description }}
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -64,8 +64,7 @@ const truncateText = (text: string, maxLength = 30) => {
return text.slice(0, maxLength) + '...'; return text.slice(0, maxLength) + '...';
}; };
onMounted(() => { onMounted(() => {});
});
</script> </script>
<style scoped> <style scoped>

View File

@ -94,14 +94,9 @@
} }
.usage-info { .usage-info {
width: 79px; padding: 12px;
height: 34px; margin-right: 12px;
position: relative;
.count { .count {
left: 0px;
top: 10px;
position: absolute;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 16px; font-size: 16px;
font-family: 'Alibaba PuHuiTi', sans-serif; font-family: 'Alibaba PuHuiTi', sans-serif;
@ -110,9 +105,6 @@
} }
.label { .label {
left: 22px;
top: 10px;
position: absolute;
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 12px; font-size: 12px;
font-family: 'Alibaba PuHuiTi', sans-serif; font-family: 'Alibaba PuHuiTi', sans-serif;

View File

@ -19,10 +19,15 @@
</div> </div>
</div> </div>
<div class="usage-info"> <div class="usage-info">
<div class="count">{{cozeInfo.views}}</div> <a-space>
<div class="label">次使用</div> <span class="count">{{ cozeInfo.views }}</span>
</a-space>
<a-space>
<span class="label"> 次使用 </span>
</a-space>
</div> </div>
</div> </div>
<div class="description-section"> <div class="description-section">
<div class="description"> <div class="description">
{{cozeInfo.description}} {{cozeInfo.description}}

View File

@ -90,17 +90,10 @@
} }
} }
} }
.usage-info { .usage-info {
width: 79px; padding: 12px;
height: 34px; margin-right: 12px;
position: relative;
margin-top: 10px;
margin-right: 24px;
.count { .count {
left: 20px;
top: 10px;
position: absolute;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 16px; font-size: 16px;
font-family: 'Alibaba PuHuiTi', sans-serif; font-family: 'Alibaba PuHuiTi', sans-serif;
@ -109,9 +102,6 @@
} }
.label { .label {
left: 43px;
top: 10px;
position: absolute;
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 12px; font-size: 12px;
font-family: 'Alibaba PuHuiTi', sans-serif; font-family: 'Alibaba PuHuiTi', sans-serif;