优化
This commit is contained in:
@@ -20,6 +20,21 @@ function filterVisibleGroups(config, isLoggedIn) {
|
||||
const visibleNavConfig = computed(() => {
|
||||
return filterVisibleGroups(navConfig, userStore.isLoggedIn)
|
||||
})
|
||||
|
||||
// 脱敏手机号
|
||||
const maskedMobile = computed(() => {
|
||||
const mobile = userStore.mobile
|
||||
if (!mobile) return '未设置'
|
||||
return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
})
|
||||
|
||||
// 剩余额度百分比
|
||||
const remainingPercent = computed(() => {
|
||||
const total = userStore.totalStorage
|
||||
const remaining = userStore.remainingStorage
|
||||
if (total === 0) return 0
|
||||
return Math.min(100, Math.round((remaining / total) * 100))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -43,6 +58,17 @@ const visibleNavConfig = computed(() => {
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- 底部用户信息卡片 -->
|
||||
<router-link
|
||||
v-if="userStore.isLoggedIn"
|
||||
to="/user/profile"
|
||||
class="sidebar__footer"
|
||||
>
|
||||
<div class="user-card">
|
||||
<div class="user-card__mobile">{{ maskedMobile }}</div>
|
||||
<div class="user-card__quota">剩余额度 {{ remainingPercent }}%</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -54,10 +80,13 @@ const visibleNavConfig = computed(() => {
|
||||
width: 220px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar__nav {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
@@ -125,4 +154,37 @@ const visibleNavConfig = computed(() => {
|
||||
.nav-item__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 底部用户信息卡片 */
|
||||
.sidebar__footer {
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--color-slate-50);
|
||||
cursor: pointer;
|
||||
transition: background .2s ease, transform .12s ease;
|
||||
}
|
||||
|
||||
.user-card:hover {
|
||||
background: var(--color-slate-100);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.user-card__mobile {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-slate-700);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.user-card__quota {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,13 +1,30 @@
|
||||
<template>
|
||||
<transition name="history-slide">
|
||||
<div v-if="visible" class="history-panel">
|
||||
<teleport to="body">
|
||||
<transition name="history-modal">
|
||||
<div v-if="visible" class="history-overlay" @click.self="handleClose">
|
||||
<!-- Modal Container -->
|
||||
<div class="history-modal">
|
||||
<!-- Decorative Elements -->
|
||||
<div class="modal-glow"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="panel-header">
|
||||
<div class="header-left">
|
||||
<button v-if="selectedConversation" class="back-btn" @click="backToList">
|
||||
<header class="modal-header">
|
||||
<div class="header-content">
|
||||
<div v-if="selectedConversation" class="header-nav">
|
||||
<button class="nav-back" @click="backToList">
|
||||
<LeftOutlined />
|
||||
<span>返回列表</span>
|
||||
</button>
|
||||
<h3 class="header-title">{{ selectedConversation ? '对话详情' : '历史记录' }}</h3>
|
||||
</div>
|
||||
<div class="header-title-group">
|
||||
<h2 class="modal-title">
|
||||
<HistoryOutlined class="title-icon" />
|
||||
{{ selectedConversation ? '对话详情' : '历史记录' }}
|
||||
</h2>
|
||||
<p v-if="!selectedConversation" class="modal-subtitle">
|
||||
查看你与 AI 的所有对话
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @click="handleClose">
|
||||
<CloseOutlined />
|
||||
@@ -15,48 +32,55 @@
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="panel-content">
|
||||
<!-- Conversation List -->
|
||||
<div v-if="!selectedConversation" class="conversation-view">
|
||||
<div class="modal-body">
|
||||
<!-- Conversation List View -->
|
||||
<div v-if="!selectedConversation" class="list-view">
|
||||
<a-spin :spinning="loading">
|
||||
<!-- Empty State -->
|
||||
<div v-if="groupedConversations.length === 0 && !loading" class="empty-state">
|
||||
<div class="empty-visual">
|
||||
<div class="visual-ring"></div>
|
||||
<HistoryOutlined class="empty-icon" />
|
||||
<div class="empty-illustration">
|
||||
<div class="illustration-ring"></div>
|
||||
<div class="illustration-ring delay-1"></div>
|
||||
<HistoryOutlined class="illustration-icon" />
|
||||
</div>
|
||||
<p class="empty-text">暂无历史记录</p>
|
||||
<p class="empty-hint">开始对话后，记录将保存在这里</p>
|
||||
<h3 class="empty-title">暂无历史记录</h3>
|
||||
<p class="empty-desc">开始对话后，记录将保存在这里</p>
|
||||
</div>
|
||||
|
||||
<!-- Grouped List -->
|
||||
<!-- Grouped Conversations -->
|
||||
<div v-else class="conversation-groups">
|
||||
<div
|
||||
v-for="group in groupedConversations"
|
||||
v-for="(group, groupIndex) in groupedConversations"
|
||||
:key="group.label"
|
||||
class="conversation-group"
|
||||
:style="{ '--group-index': groupIndex }"
|
||||
>
|
||||
<div class="group-header">
|
||||
<span class="group-dot"></span>
|
||||
<span class="group-label">{{ group.label }}</span>
|
||||
<span class="group-count">{{ group.items.length }}</span>
|
||||
</div>
|
||||
<div class="group-list">
|
||||
<div class="group-items">
|
||||
<button
|
||||
v-for="item in group.items"
|
||||
v-for="(item, itemIndex) in group.items"
|
||||
:key="item.id"
|
||||
class="conversation-card"
|
||||
class="conversation-item"
|
||||
:style="{ '--item-index': itemIndex }"
|
||||
@click="selectConversation(item)"
|
||||
>
|
||||
<div class="card-main">
|
||||
<h4 class="card-title">{{ item.name || '未命名会话' }}</h4>
|
||||
<p class="card-preview">{{ item.preview || '暂无预览' }}</p>
|
||||
<div class="item-indicator"></div>
|
||||
<div class="item-content">
|
||||
<h4 class="item-title">{{ item.name || '未命名会话' }}</h4>
|
||||
<p class="item-preview">{{ item.preview || '暂无预览内容' }}</p>
|
||||
</div>
|
||||
<div class="card-meta">
|
||||
<div class="item-meta">
|
||||
<span class="meta-time">
|
||||
<ClockCircleOutlined />
|
||||
{{ formatTime(item.updatedAt || item.createdAt) }}
|
||||
</span>
|
||||
<RightOutlined class="meta-arrow" />
|
||||
<div class="meta-arrow">
|
||||
<RightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -65,32 +89,49 @@
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- Message Detail -->
|
||||
<div v-else class="message-view">
|
||||
<!-- Message Detail View -->
|
||||
<div v-else class="detail-view">
|
||||
<a-spin :spinning="messageLoading">
|
||||
<div v-if="messageList.length === 0 && !messageLoading" class="empty-state">
|
||||
<CommentOutlined class="empty-icon" />
|
||||
<p>暂无消息</p>
|
||||
<CommentOutlined class="empty-icon-single" />
|
||||
<p>暂无消息记录</p>
|
||||
</div>
|
||||
<div v-else class="message-list">
|
||||
<div v-for="(msg, index) in messageList" :key="msg.id" class="message-item">
|
||||
<div class="message-bubble message-bubble--user">
|
||||
<div class="bubble-header">
|
||||
<UserOutlined class="bubble-avatar" />
|
||||
<span class="bubble-label">你的问题</span>
|
||||
<span class="bubble-time">{{ formatTime(msg.createdAt) }}</span>
|
||||
|
||||
<div v-else class="message-timeline">
|
||||
<div
|
||||
v-for="(msg, index) in messageList"
|
||||
:key="msg.id"
|
||||
class="timeline-item"
|
||||
:style="{ '--msg-index': index }"
|
||||
>
|
||||
<!-- User Message -->
|
||||
<div class="message-block message-block--user">
|
||||
<div class="message-avatar">
|
||||
<UserOutlined />
|
||||
</div>
|
||||
<p class="bubble-content">{{ msg.query }}</p>
|
||||
<div class="message-body">
|
||||
<div class="message-header">
|
||||
<span class="message-author">你</span>
|
||||
<span class="message-time">{{ formatTime(msg.createdAt) }}</span>
|
||||
</div>
|
||||
<div class="message-bubble message-bubble--ai">
|
||||
<div class="bubble-header">
|
||||
<RobotOutlined class="bubble-avatar" />
|
||||
<span class="bubble-label">AI 回答</span>
|
||||
<button class="bubble-copy" @click="copyContent(msg.answer)">
|
||||
<div class="message-content">{{ msg.query }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Response -->
|
||||
<div class="message-block message-block--ai">
|
||||
<div class="message-avatar">
|
||||
<RobotOutlined />
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<div class="message-header">
|
||||
<span class="message-author">AI 助手</span>
|
||||
<button class="copy-btn" @click="copyContent(msg.answer)" title="复制">
|
||||
<CopyOutlined />
|
||||
</button>
|
||||
</div>
|
||||
<p class="bubble-content">{{ msg.answer }}</p>
|
||||
<div class="message-content">{{ msg.answer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,7 +139,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -210,7 +253,7 @@ const handleClose = () => {
|
||||
|
||||
const copyContent = async (content) => {
|
||||
const success = await copyToClipboard(content)
|
||||
success ? message.success('已复制') : message.error('复制失败')
|
||||
success ? message.success('已复制到剪贴板') : message.error('复制失败')
|
||||
}
|
||||
|
||||
const formatTime = (timestamp) => {
|
||||
@@ -239,212 +282,367 @@ watch(() => props.visible, (val) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
// 使用设计系统变量
|
||||
|
||||
.history-panel {
|
||||
position: absolute;
|
||||
// ========================================
|
||||
// Overlay & Modal Container
|
||||
// ========================================
|
||||
.history-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--color-bg-page);
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Header
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--duration-fast);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.history-modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
max-height: calc(100vh - 80px);
|
||||
background: var(--color-bg-page);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.1),
|
||||
0 20px 50px -12px rgba(0, 0, 0, 0.25),
|
||||
0 8px 20px -8px rgba(0, 0, 0, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
circle at 30% 20%,
|
||||
rgba(59, 130, 246, 0.08) 0%,
|
||||
transparent 40%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Header
|
||||
// ========================================
|
||||
.modal-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 24px 28px 20px;
|
||||
border-bottom: 1px solid var(--color-gray-200);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-gray-600);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-gray-100);
|
||||
background: var(--color-gray-200);
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
.header-title-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--color-gray-900);
|
||||
margin: 0;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 18px;
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-500);
|
||||
margin: 0;
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-gray-600);
|
||||
background: var(--color-gray-100);
|
||||
border-radius: 10px;
|
||||
color: var(--color-gray-500);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--duration-fast);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-100);
|
||||
color: var(--color-error-500);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.panel-content {
|
||||
// ========================================
|
||||
// Modal Body
|
||||
// ========================================
|
||||
.modal-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
padding: 20px 28px 28px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--color-gray-300);
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-gray-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Empty State
|
||||
// ========================================
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 20px;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-visual {
|
||||
.empty-illustration {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.visual-ring {
|
||||
.illustration-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 2px dashed var(--color-gray-300);
|
||||
animation: ringRotate 20s linear infinite;
|
||||
border: 2px solid var(--color-gray-200);
|
||||
animation: ringPulse 3s ease-in-out infinite;
|
||||
|
||||
&.delay-1 {
|
||||
inset: 8px;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ringRotate {
|
||||
to { transform: rotate(360deg); }
|
||||
@keyframes ringPulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
.illustration-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 32px;
|
||||
color: var(--color-gray-500);
|
||||
font-size: 28px;
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
.empty-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-900);
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 13px;
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-500);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-icon-single {
|
||||
font-size: 40px;
|
||||
color: var(--color-gray-300);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Conversation Groups
|
||||
// ========================================
|
||||
.conversation-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.conversation-group {
|
||||
// Group styling
|
||||
animation: groupFadeIn 0.4s ease-out backwards;
|
||||
animation-delay: calc(var(--group-index) * 0.1s);
|
||||
}
|
||||
|
||||
@keyframes groupFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.group-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary-500);
|
||||
}
|
||||
|
||||
.group-label {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-600);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--color-gray-700);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-500);
|
||||
background: var(--color-gray-100);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
.group-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// Conversation Card
|
||||
.conversation-card {
|
||||
// ========================================
|
||||
// Conversation Item
|
||||
// ========================================
|
||||
.conversation-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 16px;
|
||||
gap: 16px;
|
||||
padding: 16px 18px;
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast);
|
||||
text-align: left;
|
||||
transition: all 0.25s ease;
|
||||
animation: itemFadeIn 0.3s ease-out backwards;
|
||||
animation-delay: calc(var(--group-index) * 0.1s + var(--item-index) * 0.05s);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary-500);
|
||||
box-shadow: var(--shadow-primary);
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--color-primary-300);
|
||||
background: rgba(59, 130, 246, 0.02);
|
||||
box-shadow:
|
||||
0 4px 12px rgba(59, 130, 246, 0.08),
|
||||
0 0 0 1px rgba(59, 130, 246, 0.1);
|
||||
transform: translateY(-2px);
|
||||
|
||||
.item-indicator {
|
||||
background: var(--color-primary-500);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.meta-arrow {
|
||||
color: var(--color-primary-500);
|
||||
transform: translateX(2px);
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-main {
|
||||
@keyframes itemFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.item-indicator {
|
||||
width: 4px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-gray-200);
|
||||
flex-shrink: 0;
|
||||
transition: all 0.25s ease;
|
||||
transform: scaleY(0.6);
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
.item-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-900);
|
||||
margin: 0 0 4px;
|
||||
@@ -453,135 +651,262 @@ watch(() => props.visible, (val) => {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
font-size: 12px;
|
||||
.item-preview {
|
||||
font-size: 13px;
|
||||
color: var(--color-gray-500);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
.item-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.meta-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--color-gray-500);
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
color: var(--color-gray-400);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta-arrow {
|
||||
font-size: 10px;
|
||||
color: var(--color-gray-500);
|
||||
transition: all var(--duration-fast);
|
||||
}
|
||||
|
||||
// Message View
|
||||
.message-view {
|
||||
// Message view container
|
||||
}
|
||||
|
||||
.message-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
|
||||
&--user {
|
||||
background: linear-gradient(135deg, var(--color-bg-page), var(--color-gray-100));
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
&--ai {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-header {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.bubble-avatar {
|
||||
font-size: 14px;
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.bubble-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-600);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.bubble-time {
|
||||
justify-content: center;
|
||||
color: var(--color-gray-300);
|
||||
font-size: 10px;
|
||||
color: var(--color-gray-500);
|
||||
margin-left: auto;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.bubble-copy {
|
||||
// ========================================
|
||||
// Message Detail View
|
||||
// ========================================
|
||||
.detail-view {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.message-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
animation: msgFadeIn 0.35s ease-out backwards;
|
||||
animation-delay: calc(var(--msg-index) * 0.08s);
|
||||
}
|
||||
|
||||
@keyframes msgFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.message-block {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
|
||||
.message-block--user & {
|
||||
background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
|
||||
color: var(--color-gray-600);
|
||||
}
|
||||
|
||||
.message-block--ai & {
|
||||
background: linear-gradient(135deg, var(--color-primary-500), #8b5cf6);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.message-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.message-author {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--color-gray-700);
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 11px;
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
margin-left: auto;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-gray-500);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-gray-400);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all var(--duration-fast);
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
background: var(--color-primary-100);
|
||||
color: var(--color-primary-500);
|
||||
}
|
||||
}
|
||||
|
||||
.bubble-content {
|
||||
margin: 0;
|
||||
padding: 12px 14px;
|
||||
font-size: 13px;
|
||||
.message-content {
|
||||
padding: 14px 16px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--color-gray-900);
|
||||
color: var(--color-gray-800);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
||||
.message-block--user & {
|
||||
background: var(--color-gray-100);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
// Transition
|
||||
.history-slide-enter-active,
|
||||
.history-slide-leave-active {
|
||||
transition: transform var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1);
|
||||
.message-block--ai & {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.04));
|
||||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.history-slide-enter-from,
|
||||
.history-slide-leave-to {
|
||||
transform: translateX(100%);
|
||||
// ========================================
|
||||
// Transitions
|
||||
// ========================================
|
||||
.history-modal-enter-active {
|
||||
animation: modalIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.history-modal-leave-active {
|
||||
animation: modalOut 0.25s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
@keyframes modalIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
||||
.history-modal {
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
|
||||
.history-modal {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.history-modal-enter-active .history-modal {
|
||||
animation: modalScaleIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.history-modal-leave-active .history-modal {
|
||||
animation: modalScaleOut 0.25s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
@keyframes modalScaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modalScaleOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.98) translateY(5px);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Responsive
|
||||
// ========================================
|
||||
@media (max-width: 768px) {
|
||||
.history-overlay {
|
||||
padding: 20px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.history-modal {
|
||||
max-height: calc(100vh - 40px);
|
||||
border-radius: 20px 20px 12px 12px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 20px 20px 16px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 16px 20px 24px;
|
||||
}
|
||||
|
||||
.conversation-item {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.item-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user