首页优化
This commit is contained in:
@@ -25,6 +25,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="historyList.length" class="history-section">
|
||||
<div class="history-title">历史对话</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-name">{{ item.title }}</div>
|
||||
<div class="history-time">{{ 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>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<el-button text class="footer-btn" @click="handleSettings">
|
||||
<el-icon><Setting /></el-icon>
|
||||
@@ -35,7 +56,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Document, Folder, ChatDotRound, MagicStick, Cpu, VideoPlay, Setting, Plus } from '@element-plus/icons-vue';
|
||||
import { Document, Folder, ChatDotRound, MagicStick, Cpu, VideoPlay, Setting, Plus, Delete } from '@element-plus/icons-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
interface MenuItem {
|
||||
@@ -46,13 +67,23 @@ interface MenuItem {
|
||||
route?: string;
|
||||
}
|
||||
|
||||
interface HistoryItem {
|
||||
id: number;
|
||||
title: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
activeMenu: string;
|
||||
activeHistoryId: number;
|
||||
historyList: HistoryItem[];
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'menu-change', key: string): void;
|
||||
(e: 'new-chat'): void;
|
||||
(e: 'select-history', id: number): void;
|
||||
(e: 'delete-history', id: number): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
@@ -61,9 +92,6 @@ const router = useRouter();
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{ key: 'chat', label: '对话', icon: ChatDotRound },
|
||||
{ key: 'diary', label: '日记', icon: Document, badge: 3 },
|
||||
{ key: 'files', label: '文件', icon: Folder },
|
||||
{ key: 'skills', label: '技能管理', icon: MagicStick, route: '/settings/skill' },
|
||||
{ key: 'models', label: '模型管理', icon: Cpu, route: '/settings/modelConfig/modelModule' },
|
||||
{ key: 'creation', label: '内容创作', icon: VideoPlay, route: '/settings/creation' },
|
||||
];
|
||||
@@ -83,6 +111,14 @@ const handleNewChat = () => {
|
||||
const handleSettings = () => {
|
||||
router.push('/personal');
|
||||
};
|
||||
|
||||
const handleSelectHistory = (id: number) => {
|
||||
emit('select-history', id);
|
||||
};
|
||||
|
||||
const handleDeleteHistory = (id: number) => {
|
||||
emit('delete-history', id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -160,15 +196,8 @@ const handleSettings = () => {
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
flex: 1;
|
||||
padding: 12px 10px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
padding: 12px 10px 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@@ -228,7 +257,102 @@ const handleSettings = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.history-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid rgba(233, 238, 247, 0.8);
|
||||
min-height: 0;
|
||||
background: linear-gradient(180deg, rgba(249, 251, 255, 0.5) 0%, rgba(249, 251, 255, 0.9) 100%);
|
||||
}
|
||||
|
||||
.history-title {
|
||||
padding: 12px 12px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
flex: 1;
|
||||
padding: 0 8px 10px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 10px 10px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
border-color: #bfdbfe;
|
||||
background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.7) 100%);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #3b82f6;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.04) 100%);
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
opacity: 0;
|
||||
color: #94a3b8;
|
||||
transition: all 0.2s ease;
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
color: #ef4444;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.history-main {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.history-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.history-time {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
border-top: 1px solid #e9eef7;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user