优化
This commit is contained in:
674
frontend/app/web-gold/src/views/agents/Agents.vue
Normal file
674
frontend/app/web-gold/src/views/agents/Agents.vue
Normal file
@@ -0,0 +1,674 @@
|
||||
<template>
|
||||
<FullWidthLayout :show-padding="false" class="agents-layout">
|
||||
<div class="agents-container">
|
||||
<!-- 筛选器区域 -->
|
||||
<aside class="agents-sidebar">
|
||||
<div class="sidebar-content">
|
||||
<h3 class="sidebar-title">领域分类</h3>
|
||||
<nav class="category-nav">
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="category-btn"
|
||||
:class="{ 'category-btn--active': activeCategory === category.id }"
|
||||
@click="handleCategoryChange(category.id)"
|
||||
>
|
||||
<span>{{ category.name }}</span>
|
||||
<span class="category-count">{{ category.count }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="agents-main">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<div class="search-input-wrapper">
|
||||
<SearchOutlined class="search-icon" />
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
type="text"
|
||||
placeholder="搜索智能体风格，如：文案、数据分析..."
|
||||
class="search-input"
|
||||
@keydown.enter="handleSearch"
|
||||
/>
|
||||
<CloseOutlined v-if="searchKeyword" class="search-clear" @click="searchKeyword = ''; handleSearch()" />
|
||||
</div>
|
||||
<div class="sort-info">
|
||||
排序：<span class="sort-active">热度 <i class="icon-arrow-down"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 智能体卡片网格 -->
|
||||
<div class="agents-content">
|
||||
<a-spin :spinning="loading" tip="加载中...">
|
||||
<template v-if="agentList.length > 0">
|
||||
<div class="agents-grid">
|
||||
<div
|
||||
v-for="agent in agentList"
|
||||
:key="agent.id"
|
||||
class="agent-card"
|
||||
@click="handleAgentClick(agent)"
|
||||
>
|
||||
<!-- 头部：头像 + 标签 -->
|
||||
<div class="card-header">
|
||||
<div class="agent-avatar">
|
||||
<img v-if="agent.avatar" :src="agent.avatar" :alt="agent.name" />
|
||||
<RobotOutlined v-else class="avatar-placeholder" />
|
||||
</div>
|
||||
<span class="agent-tag" :class="`agent-tag--${agent.tagColor}`">
|
||||
{{ agent.categoryName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 名称 -->
|
||||
<h3 class="card-title">{{ agent.name }}</h3>
|
||||
|
||||
<!-- 描述 -->
|
||||
<p class="card-description">{{ agent.description }}</p>
|
||||
|
||||
<!-- 底部：使用量 + 按钮 -->
|
||||
<div class="card-footer">
|
||||
<span class="usage-count">🔥 {{ formatNumber(agent.usage) }}+ 使用</span>
|
||||
<button class="chat-btn" @click.stop="handleChat(agent)">
|
||||
开始对话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-empty v-else description="暂无智能体" />
|
||||
</a-spin>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="agentList.length > 0" class="pagination-wrapper">
|
||||
<a-pagination
|
||||
v-model:current="pagination.current"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
:show-total="(total) => `共 ${total} 个智能体`"
|
||||
@change="handlePageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 对话抽屉 -->
|
||||
<ChatDrawer
|
||||
v-model:visible="chatDrawerVisible"
|
||||
:agent="currentAgent"
|
||||
@send="handleSendMessage"
|
||||
/>
|
||||
</FullWidthLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RobotOutlined,
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
|
||||
import ChatDrawer from '@/components/agents/ChatDrawer.vue'
|
||||
|
||||
// 状态管理
|
||||
const loading = ref(false)
|
||||
const activeCategory = ref('all')
|
||||
const searchKeyword = ref('')
|
||||
const chatDrawerVisible = ref(false)
|
||||
const currentAgent = ref(null)
|
||||
|
||||
// 分类数据
|
||||
const categories = ref([
|
||||
{ id: 'all', name: '全部智能体', count: 0 },
|
||||
{ id: 'writing', name: '文案创作', count: 0 },
|
||||
{ id: 'analysis', name: '数据分析', count: 0 },
|
||||
{ id: 'coding', name: '代码助手', count: 0 },
|
||||
{ id: 'design', name: '设计创作', count: 0 },
|
||||
{ id: 'education', name: '教育学习', count: 0 }
|
||||
])
|
||||
|
||||
// 智能体列表数据
|
||||
const agentList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: '文案写作助手',
|
||||
description: '专业的内容创作智能体，帮助您撰写各类文案，包括广告语、产品介绍、营销文案等。',
|
||||
avatar: '',
|
||||
categoryId: 'writing',
|
||||
categoryName: '文案创作',
|
||||
tagColor: 'blue',
|
||||
usage: 12580
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '数据分析专家',
|
||||
description: '强大的数据分析工具，支持多种数据格式，提供专业的数据洞察和可视化建议。',
|
||||
avatar: '',
|
||||
categoryId: 'analysis',
|
||||
categoryName: '数据分析',
|
||||
tagColor: 'green',
|
||||
usage: 8920
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '代码生成器',
|
||||
description: '智能代码生成工具，支持多种编程语言，提高开发效率，减少重复工作。',
|
||||
avatar: '',
|
||||
categoryId: 'coding',
|
||||
categoryName: '代码助手',
|
||||
tagColor: 'purple',
|
||||
usage: 15230
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '海报设计助手',
|
||||
description: '专业的海报设计工具，提供丰富的模板和设计建议，轻松制作精美海报。',
|
||||
avatar: '',
|
||||
categoryId: 'design',
|
||||
categoryName: '设计创作',
|
||||
tagColor: 'pink',
|
||||
usage: 6750
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '英语学习伙伴',
|
||||
description: '个性化英语学习助手，提供口语练习、语法讲解、词汇积累等功能。',
|
||||
avatar: '',
|
||||
categoryId: 'education',
|
||||
categoryName: '教育学习',
|
||||
tagColor: 'amber',
|
||||
usage: 9840
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '短视频脚本',
|
||||
description: '专业的短视频脚本创作工具，支持多种视频类型，助您打造爆款内容。',
|
||||
avatar: '',
|
||||
categoryId: 'writing',
|
||||
categoryName: '文案创作',
|
||||
tagColor: 'blue',
|
||||
usage: 7680
|
||||
}
|
||||
])
|
||||
|
||||
// 分页
|
||||
const pagination = reactive({
|
||||
current: 1,
|
||||
pageSize: 12,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleCategoryChange = (categoryId) => {
|
||||
activeCategory.value = categoryId
|
||||
pagination.current = 1
|
||||
loadAgentList()
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.current = 1
|
||||
loadAgentList()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.current = page
|
||||
loadAgentList()
|
||||
}
|
||||
|
||||
const handleAgentClick = (agent) => {
|
||||
console.log('查看智能体详情:', agent)
|
||||
// TODO: 跳转到智能体详情页
|
||||
}
|
||||
|
||||
const handleChat = (agent) => {
|
||||
currentAgent.value = agent
|
||||
chatDrawerVisible.value = true
|
||||
}
|
||||
|
||||
const handleSendMessage = (data) => {
|
||||
console.log('发送消息:', data)
|
||||
// TODO: 调用 API 发送消息
|
||||
}
|
||||
|
||||
const formatNumber = (num) => {
|
||||
if (num >= 10000) {
|
||||
return (num / 10000).toFixed(0) + 'w'
|
||||
}
|
||||
return (num / 1000).toFixed(1) + 'w'
|
||||
}
|
||||
|
||||
const loadAgentList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// TODO: 调用 API 获取数据
|
||||
// 模拟筛选
|
||||
let filteredList = agentList.value
|
||||
if (activeCategory.value !== 'all') {
|
||||
filteredList = agentList.value.filter(a => a.categoryId === activeCategory.value)
|
||||
}
|
||||
if (searchKeyword.value) {
|
||||
filteredList = filteredList.filter(a =>
|
||||
a.name.includes(searchKeyword.value) || a.description.includes(searchKeyword.value)
|
||||
)
|
||||
}
|
||||
pagination.total = filteredList.length
|
||||
} catch (error) {
|
||||
console.error('加载智能体列表失败:', error)
|
||||
message.error('加载失败，请重试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
// 更新分类数量
|
||||
categories.value.forEach(cat => {
|
||||
if (cat.id === 'all') {
|
||||
cat.count = agentList.value.length
|
||||
} else {
|
||||
cat.count = agentList.value.filter(a => a.categoryId === cat.id).length
|
||||
}
|
||||
})
|
||||
pagination.total = agentList.value.length
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.agents-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.agents-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background: #F8FAFC;
|
||||
}
|
||||
|
||||
// 侧边栏
|
||||
.agents-sidebar {
|
||||
width: 260px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #E2E8F0;
|
||||
flex-shrink: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #94A3B8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.category-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.category-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background: #F1F5F9;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #EFF6FF;
|
||||
color: #1D4ED8;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 10px;
|
||||
background: #E2E8F0;
|
||||
color: #64748B;
|
||||
padding: 2px 6px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
.category-btn--active & {
|
||||
background: #BFDBFE;
|
||||
color: #1E40AF;
|
||||
}
|
||||
}
|
||||
|
||||
// 主内容区域
|
||||
.agents-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: #F8FAFC;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #F1F5F9;
|
||||
margin: 0 12px;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
width: 380px;
|
||||
max-width: 100%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94A3B8;
|
||||
font-size: 14px;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #94A3B8;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 40px 0 42px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
color: #1E293B;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&::placeholder {
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #3B82F6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #CBD5E1;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-info {
|
||||
font-size: 12px;
|
||||
color: #94A3B8;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sort-active {
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-arrow-down {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
// 智能体内容区域
|
||||
.agents-content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.agents-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// 智能体卡片
|
||||
.agent-card {
|
||||
background: #fff;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
||||
border-color: #93C5FD;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.agent-tag {
|
||||
font-size: 10px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid;
|
||||
|
||||
&--blue {
|
||||
background: #EFF6FF;
|
||||
color: #1D4ED8;
|
||||
border-color: #BFDBFE;
|
||||
}
|
||||
|
||||
&--green {
|
||||
background: #F0FDF4;
|
||||
color: #16A34A;
|
||||
border-color: #BBF7D0;
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background: #FAF5FF;
|
||||
color: #9333EA;
|
||||
border-color: #E9D5FF;
|
||||
}
|
||||
|
||||
&--pink {
|
||||
background: #FDF2F8;
|
||||
color: #DB2777;
|
||||
border-color: #FBCFE8;
|
||||
}
|
||||
|
||||
&--amber {
|
||||
background: #FFFBEB;
|
||||
color: #D97706;
|
||||
border-color: #FDE68A;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
margin: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-size: 12px;
|
||||
color: #64748B;
|
||||
margin: 0 0 16px 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.usage-count {
|
||||
font-size: 10px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
background: #F1F5F9;
|
||||
color: #64748B;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.agent-card:hover & {
|
||||
background: #3B82F6;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页
|
||||
.pagination-wrapper {
|
||||
padding-top: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.ant-pagination) {
|
||||
.ant-pagination-item {
|
||||
border-radius: 6px;
|
||||
border-color: #E2E8F0;
|
||||
|
||||
a {
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #3B82F6;
|
||||
|
||||
a {
|
||||
color: #3B82F6;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
background: #3B82F6;
|
||||
border-color: #3B82F6;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
.ant-pagination-item-link {
|
||||
border-radius: 6px;
|
||||
border-color: #E2E8F0;
|
||||
|
||||
&:hover {
|
||||
border-color: #3B82F6;
|
||||
color: #3B82F6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user