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

<template>
	<div class="home-chat-container">
		<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>
</template>

<script setup lang="ts">
import { ref } from '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 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(1000px 500px at 70% -180px, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 65%),
		radial-gradient(800px 400px at 10% 10%, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0) 60%),
		radial-gradient(600px 300px at 90% 110%, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0) 60%),
		linear-gradient(180deg, #f8fbff 0%, #f0f4fa 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.35) 0%, rgba(255, 255, 255, 0) 32%),
			radial-gradient(900px 360px at 15% 115%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0) 70%);
	}
}
</style>