优化
This commit is contained in:
@@ -1,129 +0,0 @@
|
||||
<template>
|
||||
<div class="prompt-display" v-html="renderedContent"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick, onUnmounted, onMounted } from 'vue'
|
||||
import { renderMarkdown } from '@/utils/markdown'
|
||||
|
||||
const props = defineProps({
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isStreaming: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
// 内部维护的纯文本内容（用于计算增量和渲染源）
|
||||
const internalContent = ref('')
|
||||
// 最终渲染的 HTML
|
||||
const renderedContent = ref('')
|
||||
|
||||
let debounceTimer = null
|
||||
// 页面可见性状态
|
||||
const isPageVisible = ref(true)
|
||||
|
||||
// 仅在流式时计算并追加增量
|
||||
function appendStreamingDelta(newFullContent) {
|
||||
// 页面不可见时，跳过更新避免重复片段
|
||||
if (!isPageVisible.value) {
|
||||
console.log('[ChatMessageRenderer] 页面不可见，跳过流式更新')
|
||||
return
|
||||
}
|
||||
|
||||
const prev = internalContent.value
|
||||
if (newFullContent.startsWith(prev)) {
|
||||
// 正常情况：新内容包含旧内容 → 只追加差值
|
||||
const delta = newFullContent.slice(prev.length)
|
||||
internalContent.value += delta
|
||||
} else {
|
||||
// 异常情况（如后端重发了不连续的内容），直接覆盖防止乱序
|
||||
console.warn('[ChatMessageRenderer] Streaming content out of order, forcing replace')
|
||||
internalContent.value = newFullContent
|
||||
}
|
||||
}
|
||||
|
||||
// 更新 Markdown 渲染
|
||||
async function updateRendered() {
|
||||
if (!internalContent.value) {
|
||||
renderedContent.value = ''
|
||||
return
|
||||
}
|
||||
// renderMarkdown 可能包含异步操作（如 highlight.js），用 nextTick 确保 DOM 就绪
|
||||
renderedContent.value = await renderMarkdown(internalContent.value)
|
||||
}
|
||||
|
||||
// 主更新逻辑
|
||||
function updateContent(newContent = '') {
|
||||
if (props.isStreaming) {
|
||||
appendStreamingDelta(newContent)
|
||||
} else {
|
||||
internalContent.value = newContent
|
||||
}
|
||||
|
||||
// 流式直接渲染，非流式防抖（避免频繁完整替换导致光标跳动或闪烁）
|
||||
if (props.isStreaming) {
|
||||
updateRendered()
|
||||
} else {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
updateRendered()
|
||||
}, 60) // 60ms 足够平滑且不卡顿
|
||||
}
|
||||
}
|
||||
|
||||
// 监听 content 变化（外部每次推送的都是当前完整内容）
|
||||
watch(() => props.content, (newVal) => {
|
||||
updateContent(newVal || '')
|
||||
}, { immediate: true })
|
||||
|
||||
// 当流式开始时清空，防止旧内容残留
|
||||
watch(() => props.isStreaming, (newVal, oldVal) => {
|
||||
if (newVal && !oldVal) {
|
||||
internalContent.value = ''
|
||||
renderedContent.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 监听页面可见性变化，避免后台时累积重复片段
|
||||
function handleVisibilityChange() {
|
||||
const wasVisible = isPageVisible.value
|
||||
isPageVisible.value = !document.hidden
|
||||
|
||||
if (!wasVisible && isPageVisible.value) {
|
||||
// 页面从不可见变为可见：立即同步最新内容
|
||||
console.log('[ChatMessageRenderer] 页面重新可见，同步最新内容')
|
||||
// 使用外部传入的最新content进行同步，而不是累积的增量
|
||||
if (props.content) {
|
||||
internalContent.value = props.content
|
||||
updateRendered()
|
||||
}
|
||||
} else if (wasVisible && !isPageVisible.value) {
|
||||
console.log('[ChatMessageRenderer] 页面进入后台')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始状态
|
||||
handleVisibilityChange()
|
||||
// 添加监听器
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (debounceTimer) clearTimeout(debounceTimer)
|
||||
// 移除监听器
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.prompt-display {
|
||||
line-height: 1.6;
|
||||
color: var(--color-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
650
frontend/app/web-gold/src/components/agents/ChatDrawer.vue
Normal file
650
frontend/app/web-gold/src/components/agents/ChatDrawer.vue
Normal file
@@ -0,0 +1,650 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<transition name="slide-drawer">
|
||||
<div v-if="visible" class="chat-drawer-overlay" @click="handleOverlayClick">
|
||||
<div class="chat-drawer" :class="{ 'chat-drawer--visible': visible }" @click.stop>
|
||||
<!-- 头部 -->
|
||||
<div class="drawer-header">
|
||||
<div class="header-info">
|
||||
<div class="agent-avatar-small">
|
||||
<img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
|
||||
<RobotOutlined v-else class="avatar-icon" />
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h3 class="header-title">与「{{ agent?.name }}」对话中</h3>
|
||||
<p class="header-subtitle">{{ agent?.categoryName }} • Pro模型已就绪</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @click="handleClose">
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 消息区域 -->
|
||||
<div class="drawer-messages" ref="messagesRef">
|
||||
<div v-if="messages.length === 0" class="welcome-message">
|
||||
<div class="agent-avatar-large">
|
||||
<img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
|
||||
<RobotOutlined v-else class="avatar-icon-large" />
|
||||
</div>
|
||||
<p class="welcome-text">{{ agent?.description || '你好呀，有什么我可以帮你的吗？' }}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(msg, index) in messages"
|
||||
:key="index"
|
||||
class="message-item"
|
||||
:class="`message-item--${msg.role}`"
|
||||
>
|
||||
<!-- 智能体消息 -->
|
||||
<template v-if="msg.role === 'assistant'">
|
||||
<div class="agent-avatar-small msg-avatar">
|
||||
<img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
|
||||
<RobotOutlined v-else class="avatar-icon" />
|
||||
</div>
|
||||
<div class="message-bubble message-bubble--assistant">
|
||||
<div v-if="msg.isPro" class="pro-tag">生成结果 (Pro版):</div>
|
||||
<div class="message-content" v-html="msg.content"></div>
|
||||
<div v-if="msg.actions" class="message-actions">
|
||||
<a-button size="small" @click="handleCopy(msg.content)">
|
||||
<template #icon><CopyOutlined /></template>
|
||||
复制文案
|
||||
</a-button>
|
||||
<a-button size="small" @click="handleRegenerate(index)">
|
||||
<template #icon><ReloadOutlined /></template>
|
||||
重新生成
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<template v-else>
|
||||
<div class="message-bubble message-bubble--user">
|
||||
{{ msg.content }}
|
||||
</div>
|
||||
<div class="user-avatar msg-avatar">{{ userAvatar }}</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 加载中 -->
|
||||
<div v-if="loading" class="message-item message-item--assistant">
|
||||
<div class="agent-avatar-small msg-avatar">
|
||||
<RobotOutlined v-if="!agent?.avatar" class="avatar-icon" />
|
||||
<img v-else :src="agent?.avatar" :alt="agent?.name" />
|
||||
</div>
|
||||
<div class="message-bubble message-bubble--assistant">
|
||||
<div class="typing-indicator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区 -->
|
||||
<div class="drawer-footer">
|
||||
<div class="model-selector">
|
||||
<span class="selector-label">选择模型模式：</span>
|
||||
<div class="model-options">
|
||||
<button
|
||||
class="model-option"
|
||||
:class="{ 'model-option--active': modelMode === 'standard' }"
|
||||
@click="modelMode = 'standard'"
|
||||
>
|
||||
标准版 (-10分)
|
||||
</button>
|
||||
<button
|
||||
class="model-option"
|
||||
:class="{ 'model-option--active': modelMode === 'pro' }"
|
||||
@click="modelMode = 'pro'"
|
||||
>
|
||||
Pro 深度版 (-50分) <ThunderboltFilled class="pro-icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-wrapper">
|
||||
<a-textarea
|
||||
v-model:value="inputText"
|
||||
class="chat-input"
|
||||
placeholder="在这里输入你的需求，例如：帮我写一段关于..."
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
@keydown="handleKeyDown"
|
||||
/>
|
||||
<button class="send-btn" :disabled="!inputText.trim() || loading" @click="handleSend">
|
||||
<SendOutlined />
|
||||
</button>
|
||||
</div>
|
||||
<p class="input-tip">点击发送将扣除对应积分，内容仅供参考。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import {
|
||||
CloseOutlined,
|
||||
RobotOutlined,
|
||||
CopyOutlined,
|
||||
ReloadOutlined,
|
||||
SendOutlined,
|
||||
ThunderboltFilled
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
agent: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'send'])
|
||||
|
||||
// 状态
|
||||
const modelMode = ref('pro')
|
||||
const inputText = ref('')
|
||||
const loading = ref(false)
|
||||
const messages = ref([])
|
||||
const messagesRef = ref(null)
|
||||
const userAvatar = ref('王')
|
||||
|
||||
// 方法
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const handleOverlayClick = () => {
|
||||
handleClose()
|
||||
}
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!inputText.value.trim() || loading.value) return
|
||||
|
||||
const userMessage = {
|
||||
role: 'user',
|
||||
content: inputText.value
|
||||
}
|
||||
messages.value.push(userMessage)
|
||||
|
||||
const question = inputText.value
|
||||
inputText.value = ''
|
||||
loading.value = true
|
||||
|
||||
await scrollToBottom()
|
||||
|
||||
// 模拟 AI 响应
|
||||
setTimeout(() => {
|
||||
const assistantMessage = {
|
||||
role: 'assistant',
|
||||
content: generateMockResponse(question),
|
||||
isPro: modelMode.value === 'pro',
|
||||
actions: true
|
||||
}
|
||||
messages.value.push(assistantMessage)
|
||||
loading.value = false
|
||||
nextTick(() => scrollToBottom())
|
||||
}, 1500)
|
||||
|
||||
emit('send', {
|
||||
agentId: props.agent?.id,
|
||||
content: question,
|
||||
modelMode: modelMode.value
|
||||
})
|
||||
}
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault()
|
||||
handleSend()
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopy = (content) => {
|
||||
navigator.clipboard.writeText(content)
|
||||
message.success('已复制到剪贴板')
|
||||
}
|
||||
|
||||
const handleRegenerate = (index) => {
|
||||
// TODO: 重新生成消息
|
||||
message.info('重新生成中...')
|
||||
}
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const generateMockResponse = (question) => {
|
||||
const responses = [
|
||||
'当夜深人静的时候，我们卸下了一天的铠甲，那才是真实的自己。成年人的世界里，连崩溃都要调成静音模式。',
|
||||
'根据您的需求，我为您生成以下内容：这是一个经过精心设计的文案，结合了情感共鸣和产品卖点。',
|
||||
'让我帮您分析一下这个问题。首先，我们需要考虑目标受众的需求和痛点...'
|
||||
]
|
||||
return responses[Math.floor(Math.random() * responses.length)]
|
||||
}
|
||||
|
||||
// 监听 visible 变化，重置状态
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (newVal) {
|
||||
messages.value = []
|
||||
inputText.value = ''
|
||||
nextTick(() => scrollToBottom())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chat-drawer-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
width: 500px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #E2E8F0;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-drawer-enter-active,
|
||||
.slide-drawer-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-drawer-enter-from,
|
||||
.slide-drawer-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// 头部
|
||||
.drawer-header {
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #F1F5F9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
background: #F8FAFC;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.agent-avatar-small {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
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-icon {
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1E293B;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 10px;
|
||||
color: #94A3B8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #94A3B8;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: #E2E8F0;
|
||||
color: #1E293B;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 消息区域
|
||||
.drawer-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #CBD5E1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.agent-avatar-large {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-icon-large {
|
||||
font-size: 32px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-size: 14px;
|
||||
color: #64748B;
|
||||
max-width: 280px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
&--user {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.msg-avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #4F46E5;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
|
||||
&--assistant {
|
||||
background: #F1F5F9;
|
||||
color: #334155;
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
}
|
||||
|
||||
&--user {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #92400E;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
|
||||
.ant-btn {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// 输入打字动画
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px 0;
|
||||
|
||||
span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #94A3B8;
|
||||
animation: typing 1.4s infinite;
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 60%, 100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-8px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部输入区
|
||||
.drawer-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #E2E8F0;
|
||||
background: #F8FAFC;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.selector-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.model-options {
|
||||
display: flex;
|
||||
background: #E2E8F0;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.model-option {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #64748B;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: #fff;
|
||||
color: #7C3AED;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.pro-icon {
|
||||
font-size: 10px;
|
||||
color: #EAB308;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
width: 100%;
|
||||
|
||||
:deep(.ant-input) {
|
||||
padding-right: 44px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: #7C3AED;
|
||||
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: #7C3AED;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #6D28D9;
|
||||
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-tip {
|
||||
font-size: 10px;
|
||||
color: #94A3B8;
|
||||
text-align: center;
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@ const navConfig = [
|
||||
{ name: '对标分析', path: 'content-style/benchmark', icon: 'grid', component: () => import('../views/content-style/Benchmark.vue') },
|
||||
{ name: '文案创作', path: 'content-style/copywriting', icon: 'text', component: () => import('../views/content-style/Copywriting.vue') },
|
||||
{ name: '热点趋势', path: 'trends/forecast', icon: 'text', component: () => import('../views/trends/Forecast.vue') },
|
||||
{ name: '智能体', path: 'agents', icon: 'robot', component: () => import('../views/agents/Agents.vue') },
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -51,7 +52,8 @@ const navIcons = {
|
||||
user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>',
|
||||
video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
|
||||
folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>',
|
||||
scissors: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg>'
|
||||
scissors: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.59 13.51 15.42 17.49"/><path d="M15.41 6.51 8.59 10.49"/></svg>',
|
||||
robot: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg>'
|
||||
}
|
||||
|
||||
// ============ 辅助函数 ============
|
||||
|
||||
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