优化
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>
|
||||
Reference in New Issue
Block a user