refactor(agent): 重构智能对话页面布局和样式
- 重新设计了页面布局，分为左、右两个主要区域 - 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等 - 右侧区域保留聊天窗口，并增加了顶部栏 -优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示 - 调整了颜色、字体等样式，提升了页面视觉效果
This commit is contained in:
林志军
@ -30,7 +30,7 @@
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
|
||||
|
||||
// .header {
|
||||
// align-self: stretch;
|
||||
// height: 160px;
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
placeholder="搜索智能体"
|
||||
size="large"
|
||||
allow-clear
|
||||
class="absolute right-0 top-0 !w-400px"
|
||||
class="absolute right-0 top-0 !w-400px"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search @click="getData()" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<p class="span-title mb-16px">{{ item.name }}</p>
|
||||
<a-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0">
|
||||
<a-col :xs="24"
|
||||
|
||||
@ -1,36 +1,4 @@
|
||||
<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 class="">
|
||||
<img class="status-icon" :src="workflow" />
|
||||
</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>
|
||||
|
||||
@ -38,38 +38,38 @@
|
||||
</div>
|
||||
<div class="history-item" v-for="(item, index) in history">
|
||||
<div class="item-body">
|
||||
<div class="text" @click="getHistoryInfo(item)">
|
||||
<div class="text ellipsis-title" @click="getHistoryInfo(item)">
|
||||
{{ item.title }}
|
||||
<a-trigger position="bottom" :auto-fit-position="false" :unmount-on-close="true">
|
||||
<SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />
|
||||
<template #content>
|
||||
<div class="">
|
||||
<div class="history-item-dropdown">
|
||||
<div class="dropdown-item header-item">
|
||||
<SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />
|
||||
<div @click="(event) => handleTop(item.id, item.sort, event)" class="text">
|
||||
{{ item.sort > 1 ? '取消置顶' : '置顶' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="dropdown-item">-->
|
||||
<!-- <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
|
||||
<!-- <div @click="editTitle(item)" class="text">重命名</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="dropdown-item">
|
||||
<SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />
|
||||
<a-popconfirm
|
||||
content="你确认删除该历史对话吗"
|
||||
@ok="deleteHistory(item.id, index)"
|
||||
type="error"
|
||||
>
|
||||
<div class="text delete">删除</div>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
<a-trigger trigger="click" position="bottom" :auto-fit-position="true" :unmount-on-close="true">
|
||||
<SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />
|
||||
<template #content>
|
||||
<div class="">
|
||||
<div class="history-item-dropdown">
|
||||
<div class="dropdown-item ">
|
||||
<SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />
|
||||
<div @click="(event) => handleTop(item.id, item.sort, event)" class="text">
|
||||
{{ item.sort > 1 ? '取消置顶' : '置顶' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="dropdown-item">-->
|
||||
<!-- <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
|
||||
<!-- <div @click="editTitle(item)" class="text">重命名</div>-->
|
||||
<!-- </div>-->
|
||||
<div class="dropdown-item">
|
||||
<SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />
|
||||
<a-popconfirm
|
||||
content="你确认删除该历史对话吗"
|
||||
@ok="deleteHistory(item.id, index)"
|
||||
type="error"
|
||||
>
|
||||
<div class="text delete">删除</div>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -219,6 +219,16 @@
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.ellipsis-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #E6E6E8);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -300,6 +310,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-item-dropdown {
|
||||
width: 125px;
|
||||
padding-top: 8px;
|
||||
@ -328,7 +339,7 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
&.header-item {
|
||||
&:hover {
|
||||
background: var(--BG-200, #F2F3F5);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user