admin-ui/src/views/home/index.vue

<template>
	<div class="home-chat-container">
		<Sidebar :active-menu="activeMenu" @menu-change="handleMenuChange" @new-chat="handleCreateHistory" />
		<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>

<script setup lang="ts">
import { ref } from 'vue';
import { Clock, Plus, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import Sidebar from './components/Sidebar.vue';
import MainContent from './components/MainContent.vue';
import InputBar from './components/InputBar.vue';

interface HistoryItem {
	id: number;
	title: string;
	time: string;
}

const activeMenu = ref('chat');
const historyDrawerVisible = ref(false);
const activeHistoryId = ref(1);

const historyList = ref<HistoryItem[]>([
	{ id: 1, title: '首页风格优化方案', time: '刚刚' },
	{ id: 2, title: '模型配置逻辑检查', time: '今天 11:20' },
	{ id: 3, title: '技能管理模块梳理', time: '昨天' },
	{ id: 4, title: '快捷回复产品设计', time: '2 天前' },
]);

const handleMenuChange = (menu: string) => {
	activeMenu.value = menu;
};

const handleSend = (_message: string) => {
	// 预留发送逻辑
};

const handleSelectHistory = (id: number) => {
	activeHistoryId.value = id;
	activeMenu.value = 'chat';
	ElMessage.success('已切换会话');
};

const handleCreateHistory = () => {
	const id = Date.now();
	historyList.value.unshift({
		id,
		title: `新会话 ${historyList.value.length + 1}`,
		time: '刚刚',
	});
	activeHistoryId.value = id;
	activeMenu.value = 'chat';
	ElMessage.success('已新建会话');
};

const handleDeleteHistory = (id: number) => {
	const idx = historyList.value.findIndex((item) => item.id === id);
	if (idx < 0) return;
	historyList.value.splice(idx, 1);
	if (activeHistoryId.value === id && historyList.value.length) {
		activeHistoryId.value = historyList.value[0].id;
	}
	ElMessage.success('已删除会话');
};
</script>

<style scoped lang="scss">
.home-chat-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
	background:
		radial-gradient(1200px 460px at 65% -140px, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 68%),
		linear-gradient(180deg, #f7faff 0%, #f4f7fc 100%);
}

.main-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 28%),
			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>