sion/sionrui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
sion123
2026-02-26 21:22:32 +08:00
parent 6ec2a0aa6c
commit 9c4d39e29d
2 changed files with 645 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/app/web-gold/src/components/SidebarNav.vue
View File

@@ -20,6 +20,21 @@ function filterVisibleGroups(config, isLoggedIn) {
const visibleNavConfig = computed(() => { const visibleNavConfig = computed(() => {
return filterVisibleGroups(navConfig, userStore.isLoggedIn) 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> </script>
<template> <template>
@@ -43,6 +58,17 @@ const visibleNavConfig = computed(() => {
</router-link> </router-link>
</div> </div>
</nav> </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> </aside>
</template> </template>
@@ -54,10 +80,13 @@ const visibleNavConfig = computed(() => {
width: 220px; width: 220px;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
background: var(--color-surface); background: var(--color-surface);
overflow-y: auto; display: flex;
flex-direction: column;
} }
.sidebar__nav { .sidebar__nav {
flex: 1;
overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 12px;
@@ -125,4 +154,37 @@ const visibleNavConfig = computed(() => {
.nav-item__label { .nav-item__label {
font-size: 14px; 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> </style>

757
frontend/app/web-gold/src/components/agents/HistoryPanel.vue
View File

@@ -1,13 +1,30 @@
<template> <template>
<transition name="history-slide"> <teleport to="body">
<div v-if="visible" class="history-panel"> <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 -->
<header class="panel-header"> <header class="modal-header">
<div class="header-left"> <div class="header-content">
<button v-if="selectedConversation" class="back-btn" @click="backToList"> <div v-if="selectedConversation" class="header-nav">
<button class="nav-back" @click="backToList">
<LeftOutlined /> <LeftOutlined />
<span>返回列表</span>
</button> </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> </div>
<button class="close-btn" @click="handleClose"> <button class="close-btn" @click="handleClose">
<CloseOutlined /> <CloseOutlined />
@@ -15,48 +32,55 @@
</header> </header>
<!-- Content --> <!-- Content -->
<div class="panel-content"> <div class="modal-body">
<!-- Conversation List --> <!-- Conversation List View -->
<div v-if="!selectedConversation" class="conversation-view"> <div v-if="!selectedConversation" class="list-view">
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<!-- Empty State --> <!-- Empty State -->
<div v-if="groupedConversations.length === 0 && !loading" class="empty-state"> <div v-if="groupedConversations.length === 0 && !loading" class="empty-state">
<div class="empty-visual"> <div class="empty-illustration">
<div class="visual-ring"></div> <div class="illustration-ring"></div>
<HistoryOutlined class="empty-icon" /> <div class="illustration-ring delay-1"></div>
<HistoryOutlined class="illustration-icon" />
</div> </div>
<p class="empty-text">暂无历史记录</p> <h3 class="empty-title">暂无历史记录</h3>
<p class="empty-hint">开始对话后，记录将保存在这里</p> <p class="empty-desc">开始对话后，记录将保存在这里</p>
</div> </div>
<!-- Grouped List --> <!-- Grouped Conversations -->
<div v-else class="conversation-groups"> <div v-else class="conversation-groups">
<div <div
v-for="group in groupedConversations" v-for="(group, groupIndex) in groupedConversations"
:key="group.label" :key="group.label"
class="conversation-group" class="conversation-group"
:style="{ '--group-index': groupIndex }"
> >
<div class="group-header"> <div class="group-header">
<span class="group-dot"></span>
<span class="group-label">{{ group.label }}</span> <span class="group-label">{{ group.label }}</span>
<span class="group-count">{{ group.items.length }}</span> <span class="group-count">{{ group.items.length }}</span>
</div> </div>
<div class="group-list"> <div class="group-items">
<button <button
v-for="item in group.items" v-for="(item, itemIndex) in group.items"
:key="item.id" :key="item.id"
class="conversation-card" class="conversation-item"
:style="{ '--item-index': itemIndex }"
@click="selectConversation(item)" @click="selectConversation(item)"
> >
<div class="card-main"> <div class="item-indicator"></div>
<h4 class="card-title">{{ item.name || '未命名会话' }}</h4> <div class="item-content">
<p class="card-preview">{{ item.preview || '暂无预览' }}</p> <h4 class="item-title">{{ item.name || '未命名会话' }}</h4>
<p class="item-preview">{{ item.preview || '暂无预览内容' }}</p>
</div> </div>
<div class="card-meta"> <div class="item-meta">
<span class="meta-time"> <span class="meta-time">
<ClockCircleOutlined /> <ClockCircleOutlined />
{{ formatTime(item.updatedAt || item.createdAt) }} {{ formatTime(item.updatedAt || item.createdAt) }}
</span> </span>
<RightOutlined class="meta-arrow" /> <div class="meta-arrow">
<RightOutlined />
</div>
</div> </div>
</button> </button>
</div> </div>
@@ -65,32 +89,49 @@
</a-spin> </a-spin>
</div> </div>
<!-- Message Detail --> <!-- Message Detail View -->
<div v-else class="message-view"> <div v-else class="detail-view">
<a-spin :spinning="messageLoading"> <a-spin :spinning="messageLoading">
<div v-if="messageList.length === 0 && !messageLoading" class="empty-state"> <div v-if="messageList.length === 0 && !messageLoading" class="empty-state">
<CommentOutlined class="empty-icon" /> <CommentOutlined class="empty-icon-single" />
<p>暂无消息</p> <p>暂无消息记录</p>
</div> </div>
<div v-else class="message-list">
<div v-for="(msg, index) in messageList" :key="msg.id" class="message-item"> <div v-else class="message-timeline">
<div class="message-bubble message-bubble--user"> <div
<div class="bubble-header"> v-for="(msg, index) in messageList"
<UserOutlined class="bubble-avatar" /> :key="msg.id"
<span class="bubble-label">你的问题</span> class="timeline-item"
<span class="bubble-time">{{ formatTime(msg.createdAt) }}</span> :style="{ '--msg-index': index }"
>
<!-- User Message -->
<div class="message-block message-block--user">
<div class="message-avatar">
<UserOutlined />
</div> </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>
<div class="message-bubble message-bubble--ai"> <div class="message-content">{{ msg.query }}</div>
<div class="bubble-header"> </div>
<RobotOutlined class="bubble-avatar" /> </div>
<span class="bubble-label">AI 回答</span>
<button class="bubble-copy" @click="copyContent(msg.answer)"> <!-- 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 /> <CopyOutlined />
</button> </button>
</div> </div>
<p class="bubble-content">{{ msg.answer }}</p> <div class="message-content">{{ msg.answer }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -98,7 +139,9 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</transition> </transition>
</teleport>
</template> </template>
<script setup> <script setup>
@@ -210,7 +253,7 @@ const handleClose = () => {
const copyContent = async (content) => { const copyContent = async (content) => {
const success = await copyToClipboard(content) const success = await copyToClipboard(content)
success ? message.success('已复制') : message.error('复制失败') success ? message.success('已复制到剪贴板') : message.error('复制失败')
} }
const formatTime = (timestamp) => { const formatTime = (timestamp) => {
@@ -239,212 +282,367 @@ watch(() => props.visible, (val) => {
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
// 使用设计系统变量 // ========================================
// Overlay & Modal Container
.history-panel { // ========================================
position: absolute; .history-overlay {
position: fixed;
inset: 0; inset: 0;
background: var(--color-bg-page); background: rgba(15, 23, 42, 0.4);
z-index: 20; backdrop-filter: blur(8px);
display: flex; z-index: 2000;
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;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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 { &:hover {
background: var(--color-gray-100); background: var(--color-gray-200);
color: var(--color-gray-900); color: var(--color-gray-900);
} }
} }
.header-title { .header-title-group {
font-size: 15px; display: flex;
font-weight: 600; 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); color: var(--color-gray-900);
margin: 0; 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 { .close-btn {
width: 32px; flex-shrink: 0;
height: 32px; width: 36px;
border-radius: var(--radius-sm); height: 36px;
border: none; border: none;
background: transparent; background: var(--color-gray-100);
color: var(--color-gray-600); border-radius: 10px;
color: var(--color-gray-500);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all var(--duration-fast); transition: all 0.2s ease;
&:hover { &:hover {
background: var(--color-error-100); background: var(--color-error-100);
color: var(--color-error-500); color: var(--color-error-500);
transform: scale(1.05);
} }
} }
// Content // ========================================
.panel-content { // Modal Body
// ========================================
.modal-body {
flex: 1; flex: 1;
overflow-y: auto; 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
// ========================================
.empty-state { .empty-state {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 80px 20px; padding: 60px 20px;
text-align: center; text-align: center;
} }
.empty-visual { .empty-illustration {
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin-bottom: 24px; margin-bottom: 24px;
} }
.visual-ring { .illustration-ring {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 50%; border-radius: 50%;
border: 2px dashed var(--color-gray-300); border: 2px solid var(--color-gray-200);
animation: ringRotate 20s linear infinite; animation: ringPulse 3s ease-in-out infinite;
&.delay-1 {
inset: 8px;
animation-delay: 0.5s;
}
} }
@keyframes ringRotate { @keyframes ringPulse {
to { transform: rotate(360deg); } 0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 1;
}
} }
.empty-icon { .illustration-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 32px; font-size: 28px;
color: var(--color-gray-500); color: var(--color-gray-400);
} }
.empty-text { .empty-title {
font-size: 15px; font-size: 16px;
font-weight: 500; font-weight: 600;
color: var(--color-gray-900); color: var(--color-gray-900);
margin: 0 0 6px; margin: 0 0 6px;
} }
.empty-hint { .empty-desc {
font-size: 13px; font-size: 14px;
color: var(--color-gray-500); color: var(--color-gray-500);
margin: 0; margin: 0;
} }
.empty-icon-single {
font-size: 40px;
color: var(--color-gray-300);
margin-bottom: 16px;
}
// ========================================
// Conversation Groups // Conversation Groups
// ========================================
.conversation-groups { .conversation-groups {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 24px;
} }
.conversation-group { .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 { .group-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
margin-bottom: 10px; margin-bottom: 12px;
padding: 0 4px; padding: 0 4px;
} }
.group-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary-500);
}
.group-label { .group-label {
font-size: 12px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--color-gray-600); color: var(--color-gray-700);
text-transform: uppercase; letter-spacing: 0.02em;
letter-spacing: 0.5px;
} }
.group-count { .group-count {
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 600;
color: var(--color-gray-500); color: var(--color-gray-500);
background: var(--color-gray-100); background: var(--color-gray-100);
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
} }
.group-list { .group-items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
// Conversation Card // ========================================
.conversation-card { // Conversation Item
// ========================================
.conversation-item {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; gap: 16px;
padding: 14px 16px; padding: 16px 18px;
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-gray-200); border: 1px solid var(--color-gray-200);
border-radius: var(--radius-lg); border-radius: 14px;
cursor: pointer; cursor: pointer;
transition: all var(--duration-fast);
text-align: left; 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 { &:hover {
border-color: var(--color-primary-500); border-color: var(--color-primary-300);
box-shadow: var(--shadow-primary); background: rgba(59, 130, 246, 0.02);
transform: translateY(-1px); 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 { .meta-arrow {
color: var(--color-primary-500); 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; flex: 1;
min-width: 0; min-width: 0;
} }
.card-title { .item-title {
font-size: 14px; font-size: 15px;
font-weight: 600; font-weight: 600;
color: var(--color-gray-900); color: var(--color-gray-900);
margin: 0 0 4px; margin: 0 0 4px;
@@ -453,135 +651,262 @@ watch(() => props.visible, (val) => {
white-space: nowrap; white-space: nowrap;
} }
.card-preview { .item-preview {
font-size: 12px; font-size: 13px;
color: var(--color-gray-500); color: var(--color-gray-500);
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
line-height: 1.4;
} }
.card-meta { .item-meta {
display: flex; display: flex;
flex-direction: column; align-items: center;
align-items: flex-end; gap: 12px;
gap: 4px;
flex-shrink: 0; flex-shrink: 0;
margin-left: 12px;
} }
.meta-time { .meta-time {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 5px;
font-size: 11px; font-size: 12px;
color: var(--color-gray-500); color: var(--color-gray-400);
white-space: nowrap;
} }
.meta-arrow { .meta-arrow {
font-size: 10px; width: 24px;
color: var(--color-gray-500); height: 24px;
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 {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: center;
padding: 10px 14px; color: var(--color-gray-300);
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 {
font-size: 10px; font-size: 10px;
color: var(--color-gray-500); transition: all 0.25s ease;
margin-left: auto;
} }
.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; margin-left: auto;
width: 24px; width: 24px;
height: 24px; height: 24px;
border: none; border: none;
background: transparent; background: transparent;
color: var(--color-gray-500); color: var(--color-gray-400);
border-radius: var(--radius-sm); border-radius: 6px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all var(--duration-fast); font-size: 12px;
transition: all 0.2s ease;
&:hover { &:hover {
background: rgba(59, 130, 246, 0.1); background: var(--color-primary-100);
color: var(--color-primary-500); color: var(--color-primary-500);
} }
} }
.bubble-content { .message-content {
margin: 0; padding: 14px 16px;
padding: 12px 14px; border-radius: 12px;
font-size: 13px; font-size: 14px;
line-height: 1.7; line-height: 1.7;
color: var(--color-gray-900); color: var(--color-gray-800);
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
.message-block--user & {
background: var(--color-gray-100);
border: 1px solid var(--color-gray-200);
}
.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);
}
} }
// Transition // ========================================
.history-slide-enter-active, // Transitions
.history-slide-leave-active { // ========================================
transition: transform var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1); .history-modal-enter-active {
animation: modalIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
} }
.history-slide-enter-from, .history-modal-leave-active {
.history-slide-leave-to { animation: modalOut 0.25s cubic-bezier(0.32, 0.72, 0, 1);
transform: translateX(100%); }
@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> </style>