首页优化
This commit is contained in:
@@ -1,46 +1,18 @@
|
||||
<template>
|
||||
<div class="home-chat-container">
|
||||
<Sidebar :active-menu="activeMenu" @menu-change="handleMenuChange" @new-chat="handleCreateHistory" />
|
||||
<Sidebar
|
||||
:active-menu="activeMenu"
|
||||
:active-history-id="activeHistoryId"
|
||||
:history-list="historyList"
|
||||
@menu-change="handleMenuChange"
|
||||
@new-chat="handleCreateHistory"
|
||||
@select-history="handleSelectHistory"
|
||||
@delete-history="handleDeleteHistory"
|
||||
/>
|
||||
<div class="main-wrapper">
|
||||
<MainContent :active-menu="activeMenu" />
|
||||
<InputBar @send="handleSend" />
|
||||
</div>
|
||||
|
||||
<div class="history-float" @click="historyDrawerVisible = true">
|
||||
<el-icon :size="16"><Clock /></el-icon>
|
||||
<span>历史对话</span>
|
||||
<em>{{ historyList.length }}</em>
|
||||
</div>
|
||||
|
||||
<el-drawer v-model="historyDrawerVisible" direction="rtl" :with-header="false" size="360px" class="history-drawer">
|
||||
<div class="drawer-panel">
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-title">历史对话</div>
|
||||
<el-button type="primary" class="new-btn" @click="handleCreateHistory">
|
||||
<el-icon><Plus /></el-icon>
|
||||
新建会话
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="history-list">
|
||||
<div
|
||||
v-for="item in historyList"
|
||||
:key="item.id"
|
||||
class="history-item"
|
||||
:class="{ active: activeHistoryId === item.id }"
|
||||
@click="handleSelectHistory(item.id)"
|
||||
>
|
||||
<div class="history-main">
|
||||
<div class="history-title">{{ item.title }}</div>
|
||||
<div class="history-meta">{{ item.time }}</div>
|
||||
</div>
|
||||
<el-button text class="delete-btn" @click.stop="handleDeleteHistory(item.id)">
|
||||
<el-icon><Delete /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -59,7 +31,6 @@ interface HistoryItem {
|
||||
}
|
||||
|
||||
const activeMenu = ref('chat');
|
||||
const historyDrawerVisible = ref(false);
|
||||
const activeHistoryId = ref(1);
|
||||
|
||||
const historyList = ref<HistoryItem[]>([
|
||||
@@ -138,137 +109,4 @@ const handleDeleteHistory = (id: number) => {
|
||||
radial-gradient(1000px 380px at 10% 110%, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 72%);
|
||||
}
|
||||
}
|
||||
|
||||
.history-float {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
top: 52%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
color: #1e3a8a;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(239, 246, 255, 0.96) 100%);
|
||||
border: 1px solid #dbeafe;
|
||||
box-shadow: 0 10px 24px rgba(30, 64, 175, 0.16);
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-50%) translateX(-2px);
|
||||
box-shadow: 0 14px 30px rgba(30, 64, 175, 0.22);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
em {
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.history-drawer .el-drawer) {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
|
||||
}
|
||||
|
||||
.drawer-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e6eef9;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #cfe0fb;
|
||||
background: #f5f9ff;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #bcd5fa;
|
||||
background: linear-gradient(135deg, rgba(219, 234, 254, 0.8) 0%, rgba(239, 246, 255, 0.9) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.history-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #334155;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.history-meta {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
opacity: 0;
|
||||
color: #94a3b8;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.history-item:hover .delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user