From f0e36381d3a470866b4ec27df96566d42485eab4 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Tue, 26 May 2026 16:01:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/ChatList.vue    | 141 ++++
 src/views/home/components/CommandList.vue | 164 ++++
 src/views/home/components/DiaryList.vue   | 171 +++++
 src/views/home/components/FileList.vue    | 199 +++++
 src/views/home/components/InputBar.vue    | 216 ++++++
 src/views/home/components/MainContent.vue | 113 +++
 src/views/home/components/ReplyList.vue   | 207 +++++
 src/views/home/components/Sidebar.vue     | 250 ++++++
 src/views/home/index.vue                  | 894 +++++++---------------
 9 files changed, 1718 insertions(+), 637 deletions(-)
 create mode 100644 src/views/home/components/ChatList.vue
 create mode 100644 src/views/home/components/CommandList.vue
 create mode 100644 src/views/home/components/DiaryList.vue
 create mode 100644 src/views/home/components/FileList.vue
 create mode 100644 src/views/home/components/InputBar.vue
 create mode 100644 src/views/home/components/MainContent.vue
 create mode 100644 src/views/home/components/ReplyList.vue
 create mode 100644 src/views/home/components/Sidebar.vue

diff --git a/src/views/home/components/ChatList.vue b/src/views/home/components/ChatList.vue
new file mode 100644
index 0000000..1c1f74e
--- /dev/null
+++ b/src/views/home/components/ChatList.vue
@@ -0,0 +1,141 @@
+<template>
+	<div class="chat-list">
+		<div class="chat-divider">今天 15:14</div>
+
+		<div v-for="msg in messages" :key="msg.id" class="message-row" :class="{ 'is-user': msg.isUser }">
+			<div v-if="!msg.isUser" class="avatar-wrap">
+				<div class="ai-avatar">AI</div>
+			</div>
+
+			<div class="bubble-wrap">
+				<div class="bubble">{{ msg.content }}</div>
+				<div class="time">{{ msg.time }}</div>
+			</div>
+
+			<div v-if="msg.isUser" class="avatar-wrap">
+				<el-avatar :size="28" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Message {
+	id: number;
+	content: string;
+	time: string;
+	isUser: boolean;
+}
+
+const messages = ref<Message[]>([
+	{
+		id: 1,
+		content: '你好！我叫知子，很高兴为您服务。您今天想聊些什么呢？',
+		time: '09:30',
+		isUser: false,
+	},
+	{
+		id: 2,
+		content: '你好！我想了解下这个系统都能做什么。',
+		time: '09:31',
+		isUser: true,
+	},
+	{
+		id: 3,
+		content: '当然可以，这个系统提供了多种功能：日记、文件、快捷指令、快捷回复，以及技能管理和模型管理入口。你想先看哪一块？',
+		time: '09:31',
+		isUser: false,
+	},
+]);
+</script>
+
+<style scoped lang="scss">
+.chat-list {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	gap: 16px;
+	padding: 28px 0 10px;
+}
+
+.chat-divider {
+	align-self: center;
+	font-size: 12px;
+	color: #8b95a7;
+	line-height: 1;
+	padding: 0 12px;
+	letter-spacing: 0.2px;
+}
+
+.message-row {
+	display: flex;
+	align-items: flex-end;
+	gap: 10px;
+	max-width: 100%;
+
+	&.is-user {
+		justify-content: flex-end;
+	}
+}
+
+.avatar-wrap {
+	width: 30px;
+	height: 30px;
+	flex-shrink: 0;
+}
+
+.ai-avatar {
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 11px;
+	font-weight: 700;
+	color: #53607a;
+	background: linear-gradient(145deg, #f7f9fc 0%, #e9eef6 100%);
+	border: 1px solid #dfe6f0;
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+}
+
+.bubble-wrap {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	max-width: min(84%, 1120px);
+}
+
+.bubble {
+	font-size: 14px;
+	line-height: 1.75;
+	padding: 12px 14px;
+	border-radius: 12px;
+	word-break: break-word;
+	color: #1f2937;
+	background: rgba(255, 255, 255, 0.84);
+	border: 1px solid rgba(226, 233, 244, 0.95);
+	backdrop-filter: blur(8px);
+	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+
+	.message-row.is-user & {
+		background: linear-gradient(135deg, #58a6ff 0%, #3b82f6 52%, #2563eb 100%);
+		border-color: rgba(59, 130, 246, 0.32);
+		color: #fff;
+		box-shadow: 0 8px 20px rgba(37, 99, 235, 0.33);
+	}
+}
+
+.time {
+	font-size: 11px;
+	color: #8f9aae;
+	padding: 0 4px;
+
+	.message-row.is-user & {
+		text-align: right;
+	}
+}
+</style>
diff --git a/src/views/home/components/CommandList.vue b/src/views/home/components/CommandList.vue
new file mode 100644
index 0000000..deecb52
--- /dev/null
+++ b/src/views/home/components/CommandList.vue
@@ -0,0 +1,164 @@
+<template>
+	<div class="command-list">
+		<div v-for="command in commandList" :key="command.id" class="command-card" @click="handleCommandClick(command)">
+			<div class="command-icon">
+				<el-icon :size="32" color="#3b82f6">
+					<Lightning />
+				</el-icon>
+			</div>
+			<div class="command-content">
+				<h3 class="command-name">{{ command.name }}</h3>
+				<p class="command-desc">{{ command.description }}</p>
+				<div class="command-trigger">
+					<el-tag size="small" type="info">{{ command.trigger }}</el-tag>
+				</div>
+			</div>
+			<div class="command-actions">
+				<el-button text size="small" @click.stop="handleEdit(command)">
+					<el-icon><Edit /></el-icon>
+				</el-button>
+				<el-button text size="small" type="danger" @click.stop="handleDelete(command)">
+					<el-icon><Delete /></el-icon>
+				</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Lightning, Edit, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Command {
+	id: number;
+	name: string;
+	description: string;
+	trigger: string;
+	action: string;
+}
+
+const commandList = ref<Command[]>([
+	{
+		id: 1,
+		name: '快速创建组件',
+		description: '快速创建一个 Vue 组件模板，包含基础结构和样式',
+		trigger: '/component',
+		action: 'create_component',
+	},
+	{
+		id: 2,
+		name: '生成 API 接口',
+		description: '根据接口文档快速生成 API 请求函数',
+		trigger: '/api',
+		action: 'generate_api',
+	},
+	{
+		id: 3,
+		name: '代码格式化',
+		description: '格式化当前文件的代码，统一代码风格',
+		trigger: '/format',
+		action: 'format_code',
+	},
+	{
+		id: 4,
+		name: '添加类型定义',
+		description: '为 JavaScript 代码添加 TypeScript 类型定义',
+		trigger: '/types',
+		action: 'add_types',
+	},
+	{
+		id: 5,
+		name: '生成测试用例',
+		description: '为当前组件或函数生成单元测试代码',
+		trigger: '/test',
+		action: 'generate_test',
+	},
+	{
+		id: 6,
+		name: '优化性能',
+		description: '分析代码并提供性能优化建议',
+		trigger: '/optimize',
+		action: 'optimize_code',
+	},
+]);
+
+const handleCommandClick = (command: Command) => {
+	ElMessage.success(`执行指令: ${command.name}`);
+};
+
+const handleEdit = (command: Command) => {
+	ElMessage.info(`编辑指令: ${command.name}`);
+};
+
+const handleDelete = (command: Command) => {
+	ElMessage.warning(`删除指令: ${command.name}`);
+};
+</script>
+
+<style scoped lang="scss">
+.command-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+	gap: 16px;
+}
+
+.command-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: flex;
+	gap: 16px;
+	align-items: flex-start;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+		background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
+	}
+}
+
+.command-icon {
+	flex-shrink: 0;
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+	border-radius: 12px;
+}
+
+.command-content {
+	flex: 1;
+	min-width: 0;
+}
+
+.command-name {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 8px 0;
+}
+
+.command-desc {
+	font-size: 13px;
+	color: #6b7280;
+	line-height: 1.5;
+	margin: 0 0 12px 0;
+}
+
+.command-trigger {
+	display: inline-block;
+}
+
+.command-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+</style>
diff --git a/src/views/home/components/DiaryList.vue b/src/views/home/components/DiaryList.vue
new file mode 100644
index 0000000..660d781
--- /dev/null
+++ b/src/views/home/components/DiaryList.vue
@@ -0,0 +1,171 @@
+<template>
+	<div class="diary-list">
+		<div v-for="diary in diaryList" :key="diary.id" class="diary-card" @click="handleDiaryClick(diary)">
+			<div class="diary-header">
+				<div class="diary-date">
+					<el-icon><Calendar /></el-icon>
+					{{ diary.date }}
+				</div>
+				<el-tag :type="diary.mood === 'happy' ? 'success' : diary.mood === 'sad' ? 'danger' : 'warning'" size="small">
+					{{ getMoodText(diary.mood) }}
+				</el-tag>
+			</div>
+			<h3 class="diary-title">{{ diary.title }}</h3>
+			<p class="diary-content">{{ diary.content }}</p>
+			<div class="diary-footer">
+				<div class="diary-tags">
+					<el-tag v-for="tag in diary.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
+				</div>
+				<div class="diary-actions">
+					<el-button text size="small" @click.stop="handleEdit(diary)">
+						<el-icon><Edit /></el-icon>
+					</el-button>
+					<el-button text size="small" type="danger" @click.stop="handleDelete(diary)">
+						<el-icon><Delete /></el-icon>
+					</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Calendar, Edit, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Diary {
+	id: number;
+	title: string;
+	content: string;
+	date: string;
+	mood: 'happy' | 'sad' | 'normal';
+	tags: string[];
+}
+
+const diaryList = ref<Diary[]>([
+	{
+		id: 1,
+		title: '今天学习了 Vue 3 新特性',
+		content: '今天深入学习了 Vue 3 的 Composition API，感觉比 Options API 更加灵活和强大。特别是 setup 函数和响应式系统的改进，让代码组织更加清晰...',
+		date: '2026-05-26',
+		mood: 'happy',
+		tags: ['学习', 'Vue3', '前端'],
+	},
+	{
+		id: 2,
+		title: '项目进度顺利',
+		content: '今天完成了首页重构的基础布局，整体效果不错。明天继续完善功能模块和样式细节...',
+		date: '2026-05-25',
+		mood: 'happy',
+		tags: ['工作', '项目'],
+	},
+	{
+		id: 3,
+		title: '遇到了一些技术难题',
+		content: '在处理复杂组件通信时遇到了一些问题，花了不少时间调试。最后通过重新设计数据流解决了...',
+		date: '2026-05-24',
+		mood: 'normal',
+		tags: ['技术', '调试'],
+	},
+]);
+
+const getMoodText = (mood: string) => {
+	const moodMap: Record<string, string> = {
+		happy: '😊 开心',
+		sad: '😢 难过',
+		normal: '😐 平静',
+	};
+	return moodMap[mood] || '平静';
+};
+
+const handleDiaryClick = (diary: Diary) => {
+	ElMessage.info(`查看日记: ${diary.title}`);
+};
+
+const handleEdit = (diary: Diary) => {
+	ElMessage.info(`编辑日记: ${diary.title}`);
+};
+
+const handleDelete = (diary: Diary) => {
+	ElMessage.warning(`删除日记: ${diary.title}`);
+};
+</script>
+
+<style scoped lang="scss">
+.diary-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.diary-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+	}
+}
+
+.diary-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.diary-date {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: 13px;
+	color: #6b7280;
+}
+
+.diary-title {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 12px 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.diary-content {
+	font-size: 14px;
+	color: #6b7280;
+	line-height: 1.6;
+	margin: 0 0 16px 0;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.diary-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 12px;
+	border-top: 1px solid #f3f4f6;
+}
+
+.diary-tags {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+}
+
+.diary-actions {
+	display: flex;
+	gap: 4px;
+}
+</style>
diff --git a/src/views/home/components/FileList.vue b/src/views/home/components/FileList.vue
new file mode 100644
index 0000000..27bc341
--- /dev/null
+++ b/src/views/home/components/FileList.vue
@@ -0,0 +1,199 @@
+<template>
+	<div class="file-list">
+		<div v-for="file in fileList" :key="file.id" class="file-card" @click="handleFileClick(file)">
+			<div class="file-icon">
+				<el-icon :size="40" :color="getFileColor(file.type)">
+					<component :is="getFileIcon(file.type)" />
+				</el-icon>
+			</div>
+			<div class="file-info">
+				<h3 class="file-name">{{ file.name }}</h3>
+				<div class="file-meta">
+					<span class="file-size">{{ file.size }}</span>
+					<span class="file-date">{{ file.date }}</span>
+				</div>
+				<div class="file-tags">
+					<el-tag v-for="tag in file.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
+				</div>
+			</div>
+			<div class="file-actions">
+				<el-button text size="small" @click.stop="handleDownload(file)">
+					<el-icon><Download /></el-icon>
+				</el-button>
+				<el-button text size="small" type="danger" @click.stop="handleDelete(file)">
+					<el-icon><Delete /></el-icon>
+				</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Document, Picture, VideoPlay, Folder, Download, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface FileItem {
+	id: number;
+	name: string;
+	type: 'document' | 'image' | 'video' | 'folder';
+	size: string;
+	date: string;
+	tags: string[];
+}
+
+const fileList = ref<FileItem[]>([
+	{
+		id: 1,
+		name: 'Vue3 学习笔记.pdf',
+		type: 'document',
+		size: '2.5 MB',
+		date: '2026-05-26',
+		tags: ['学习', '文档'],
+	},
+	{
+		id: 2,
+		name: '项目截图.png',
+		type: 'image',
+		size: '856 KB',
+		date: '2026-05-25',
+		tags: ['截图', '项目'],
+	},
+	{
+		id: 3,
+		name: '演示视频.mp4',
+		type: 'video',
+		size: '15.3 MB',
+		date: '2026-05-24',
+		tags: ['视频', '演示'],
+	},
+	{
+		id: 4,
+		name: '项目文档',
+		type: 'folder',
+		size: '12 个文件',
+		date: '2026-05-23',
+		tags: ['文件夹'],
+	},
+	{
+		id: 5,
+		name: 'API 接口文档.docx',
+		type: 'document',
+		size: '1.2 MB',
+		date: '2026-05-22',
+		tags: ['文档', 'API'],
+	},
+	{
+		id: 6,
+		name: 'UI 设计稿.sketch',
+		type: 'image',
+		size: '4.8 MB',
+		date: '2026-05-21',
+		tags: ['设计', 'UI'],
+	},
+]);
+
+const getFileIcon = (type: string) => {
+	const iconMap: Record<string, any> = {
+		document: Document,
+		image: Picture,
+		video: VideoPlay,
+		folder: Folder,
+	};
+	return iconMap[type] || Document;
+};
+
+const getFileColor = (type: string) => {
+	const colorMap: Record<string, string> = {
+		document: '#3b82f6',
+		image: '#10b981',
+		video: '#f59e0b',
+		folder: '#8b5cf6',
+	};
+	return colorMap[type] || '#6b7280';
+};
+
+const handleFileClick = (file: FileItem) => {
+	ElMessage.info(`打开文件: ${file.name}`);
+};
+
+const handleDownload = (file: FileItem) => {
+	ElMessage.success(`下载文件: ${file.name}`);
+};
+
+const handleDelete = (file: FileItem) => {
+	ElMessage.warning(`删除文件: ${file.name}`);
+};
+</script>
+
+<style scoped lang="scss">
+.file-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+	gap: 16px;
+}
+
+.file-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: flex;
+	gap: 16px;
+	align-items: flex-start;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+	}
+}
+
+.file-icon {
+	flex-shrink: 0;
+	width: 60px;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #f3f4f6;
+	border-radius: 8px;
+}
+
+.file-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.file-name {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 8px 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.file-meta {
+	display: flex;
+	gap: 12px;
+	font-size: 13px;
+	color: #6b7280;
+	margin-bottom: 8px;
+}
+
+.file-tags {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+}
+
+.file-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+</style>
diff --git a/src/views/home/components/InputBar.vue b/src/views/home/components/InputBar.vue
new file mode 100644
index 0000000..56b44cf
--- /dev/null
+++ b/src/views/home/components/InputBar.vue
@@ -0,0 +1,216 @@
+<template>
+	<div class="input-shell">
+		<div class="input-card">
+			<el-input
+				v-model="message"
+				type="textarea"
+				:rows="1"
+				:autosize="{ minRows: 2, maxRows: 5 }"
+				placeholder="多说说你的偏好和要求，我会越用越懂你"
+				class="message-input"
+				@keydown.enter.exact="handleSend"
+			/>
+
+			<div class="input-toolbar">
+				<div class="toolbar-left">
+					<el-button circle class="tool-btn" @click="handleAttachment">
+						<el-icon><Plus /></el-icon>
+					</el-button>
+					<el-dropdown trigger="click" @command="handleCommandSelect">
+						<el-button class="pill-btn">快捷指令</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="rewrite">帮我润色这段文案</el-dropdown-item>
+								<el-dropdown-item command="summary">总结当前对话重点</el-dropdown-item>
+								<el-dropdown-item command="todo">整理下一步 TODO</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+
+					<el-dropdown trigger="click" @command="handleReplySelect">
+						<el-button class="pill-btn">快捷回复</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="ok">收到，我马上处理</el-dropdown-item>
+								<el-dropdown-item command="confirm">这个方向可以，继续</el-dropdown-item>
+								<el-dropdown-item command="adjust">这个比例还要再调一下</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+				</div>
+
+				<div class="toolbar-right">
+					<el-button class="mode-btn">启动</el-button>
+					<el-button circle class="send-btn" :disabled="!message.trim()" @click="handleSend">
+						<el-icon><Top /></el-icon>
+					</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Top, Plus } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Emits {
+	(e: 'send', message: string): void;
+}
+
+const emit = defineEmits<Emits>();
+const message = ref('');
+
+const quickCommands: Record<string, string> = {
+	rewrite: '请帮我润色下面这段内容，保持原意并提升表达质感：',
+	summary: '请总结我们当前对话的重点，并给出 3 条执行建议。',
+	todo: '请把当前需求拆解成可执行的 TODO 列表。',
+};
+
+const quickReplies: Record<string, string> = {
+	ok: '收到，我马上处理。',
+	confirm: '这个方向可以，继续。',
+	adjust: '这个比例还要再调一下。',
+};
+
+const handleSend = (event?: KeyboardEvent) => {
+	if (event) event.preventDefault();
+	const msg = message.value.trim();
+	if (!msg) return;
+	emit('send', msg);
+	message.value = '';
+};
+
+const handleAttachment = () => {
+	ElMessage.info('附件上传功能开发中...');
+};
+
+const handleCommandSelect = (key: string | number | object) => {
+	const k = String(key);
+	message.value = quickCommands[k] || message.value;
+};
+
+const handleReplySelect = (key: string | number | object) => {
+	const k = String(key);
+	message.value = quickReplies[k] || message.value;
+};
+</script>
+
+<style scoped lang="scss">
+.input-shell {
+	position: relative;
+	z-index: 12;
+	margin-top: -20px;
+	padding: 0 0 50px;
+	background: transparent;
+}
+
+.input-card {
+	width: min(1060px, 82%);
+	margin: 0 auto;
+	background:
+		linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 100%),
+		radial-gradient(120% 180% at 0% 0%, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 38%);
+	border: 1px solid rgba(191, 219, 254, 0.62);
+	border-radius: 18px;
+	box-shadow:
+		0 20px 44px rgba(15, 23, 42, 0.14),
+		0 0 0 1px rgba(59, 130, 246, 0.09) inset,
+		0 10px 24px rgba(37, 99, 235, 0.16);
+	padding: 14px 16px 12px;
+	backdrop-filter: blur(14px);
+}
+
+.message-input {
+	:deep(.el-textarea__inner) {
+		border: none;
+		box-shadow: none;
+		resize: none;
+		padding: 8px 6px 14px;
+		font-size: 15px;
+		line-height: 1.65;
+		color: #0f172a;
+		background: transparent;
+		min-height: 50px;
+		font-weight: 500;
+
+		&::placeholder {
+			color: #90a1b7;
+			font-weight: 400;
+		}
+	}
+}
+
+.input-toolbar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 10px;
+	padding-top: 2px;
+}
+
+.toolbar-left,
+.toolbar-right {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.tool-btn {
+	width: 30px;
+	height: 30px;
+	border: 1px solid #d9e4f5;
+	color: #5b6b84;
+	background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+
+	&:hover {
+		color: #2b4d8f;
+		background: #f3f8ff;
+	}
+}
+
+.pill-btn {
+	height: 30px;
+	padding: 0 12px;
+	border-radius: 999px;
+	border: 1px solid #dbe7f7;
+	color: #30435f;
+	background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
+	font-size: 12px;
+	font-weight: 600;
+}
+
+.mode-btn {
+	height: 30px;
+	padding: 0 13px;
+	border-radius: 999px;
+	border: 1px solid #dbe7f7;
+	color: #30435f;
+	background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
+	font-size: 12px;
+	font-weight: 600;
+	letter-spacing: 0.2px;
+}
+
+.send-btn {
+	width: 30px;
+	height: 30px;
+	border: none;
+	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
+	color: #fff;
+	box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
+
+	&:hover:not(:disabled) {
+		filter: brightness(1.06);
+		transform: translateY(-1px);
+	}
+
+	&:disabled {
+		opacity: 0.55;
+		box-shadow: none;
+		background: #cbd5e1;
+	}
+}
+</style>
diff --git a/src/views/home/components/MainContent.vue b/src/views/home/components/MainContent.vue
new file mode 100644
index 0000000..0fde11a
--- /dev/null
+++ b/src/views/home/components/MainContent.vue
@@ -0,0 +1,113 @@
+<template>
+	<div class="main-content">
+		<div v-if="activeMenu !== 'chat'" class="content-header">
+			<h2 class="content-title">{{ currentTitle }}</h2>
+			<div class="content-actions">
+				<el-button v-if="showAddButton" type="primary" size="small" @click="handleAdd">
+					<el-icon><Plus /></el-icon>
+					新建
+				</el-button>
+			</div>
+		</div>
+
+		<div class="content-body">
+			<ChatList v-if="activeMenu === 'chat'" />
+			<DiaryList v-else-if="activeMenu === 'diary'" />
+			<FileList v-else-if="activeMenu === 'files'" />
+			<CommandList v-else-if="activeMenu === 'commands'" />
+			<ReplyList v-else-if="activeMenu === 'replies'" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import ChatList from './ChatList.vue';
+import DiaryList from './DiaryList.vue';
+import FileList from './FileList.vue';
+import CommandList from './CommandList.vue';
+import ReplyList from './ReplyList.vue';
+
+interface Props {
+	activeMenu: string;
+}
+
+const props = defineProps<Props>();
+
+const menuTitles: Record<string, string> = {
+	chat: '对话',
+	diary: '我的日记',
+	files: '文件管理',
+	commands: '快捷指令',
+	replies: '快捷回复',
+};
+
+const currentTitle = computed(() => menuTitles[props.activeMenu] || '首页');
+
+const showAddButton = computed(() => ['diary', 'files', 'commands', 'replies'].includes(props.activeMenu));
+
+const handleAdd = () => {
+	console.log('新建:', props.activeMenu);
+};
+</script>
+
+<style scoped lang="scss">
+.main-content {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	background: #ffffff;
+	overflow: hidden;
+}
+
+.content-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20px 24px;
+	border-bottom: 1px solid #e5e7eb;
+	background: #ffffff;
+}
+
+.content-title {
+	font-size: 20px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0;
+}
+
+.content-actions {
+	display: flex;
+	gap: 12px;
+}
+
+.content-body {
+	flex: 1;
+	overflow-y: auto;
+	background:
+		radial-gradient(1200px 420px at 58% -120px, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 65%),
+		radial-gradient(900px 320px at 20% 120%, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 68%),
+		linear-gradient(180deg, #f8fbff 0%, #f5f7fb 100%);
+
+	/* 隐藏滚动条但保持滚动功能 */
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	// 聊天界面的特殊样式
+	&:has(.chat-list) {
+		padding: 0 8% 130px;
+		display: block;
+	}
+
+	// 其他列表的样式
+	&:not(:has(.chat-list)) {
+		padding: 20px 24px;
+		background: #f9fafb;
+	}
+}
+</style>
diff --git a/src/views/home/components/ReplyList.vue b/src/views/home/components/ReplyList.vue
new file mode 100644
index 0000000..530bb8a
--- /dev/null
+++ b/src/views/home/components/ReplyList.vue
@@ -0,0 +1,207 @@
+<template>
+	<div class="reply-list">
+		<div v-for="reply in replyList" :key="reply.id" class="reply-card" @click="handleReplyClick(reply)">
+			<div class="reply-header">
+				<div class="reply-category">
+					<el-tag :type="getCategoryType(reply.category)" size="small">{{ reply.category }}</el-tag>
+				</div>
+				<div class="reply-usage">
+					<el-icon><ChatDotRound /></el-icon>
+					<span>{{ reply.usageCount }} 次使用</span>
+				</div>
+			</div>
+			<h3 class="reply-title">{{ reply.title }}</h3>
+			<p class="reply-content">{{ reply.content }}</p>
+			<div class="reply-footer">
+				<div class="reply-tags">
+					<el-tag v-for="tag in reply.tags" :key="tag" size="small" effect="plain">{{ tag }}</el-tag>
+				</div>
+				<div class="reply-actions">
+					<el-button text size="small" @click.stop="handleCopy(reply)">
+						<el-icon><CopyDocument /></el-icon>
+					</el-button>
+					<el-button text size="small" @click.stop="handleEdit(reply)">
+						<el-icon><Edit /></el-icon>
+					</el-button>
+					<el-button text size="small" type="danger" @click.stop="handleDelete(reply)">
+						<el-icon><Delete /></el-icon>
+					</el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ChatDotRound, CopyDocument, Edit, Delete } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+interface Reply {
+	id: number;
+	title: string;
+	content: string;
+	category: string;
+	tags: string[];
+	usageCount: number;
+}
+
+const replyList = ref<Reply[]>([
+	{
+		id: 1,
+		title: '欢迎语',
+		content: '您好！很高兴为您服务。请问有什么可以帮助您的吗？',
+		category: '问候',
+		tags: ['欢迎', '问候'],
+		usageCount: 156,
+	},
+	{
+		id: 2,
+		title: '感谢回复',
+		content: '非常感谢您的反馈！我们会继续努力为您提供更好的服务。',
+		category: '感谢',
+		tags: ['感谢', '反馈'],
+		usageCount: 89,
+	},
+	{
+		id: 3,
+		title: '技术支持',
+		content: '我已经收到您的问题，正在为您查询相关信息。请稍等片刻，我会尽快回复您。',
+		category: '支持',
+		tags: ['技术', '支持'],
+		usageCount: 234,
+	},
+	{
+		id: 4,
+		title: '道歉回复',
+		content: '非常抱歉给您带来不便。我们会立即处理这个问题，并尽快给您一个满意的答复。',
+		category: '道歉',
+		tags: ['道歉', '问题'],
+		usageCount: 45,
+	},
+	{
+		id: 5,
+		title: '结束语',
+		content: '如果您还有其他问题，随时欢迎联系我们。祝您生活愉快！',
+		category: '结束',
+		tags: ['结束', '祝福'],
+		usageCount: 178,
+	},
+	{
+		id: 6,
+		title: '产品介绍',
+		content: '我们的产品采用最新技术，为您提供高效、稳定、安全的服务体验。',
+		category: '介绍',
+		tags: ['产品', '介绍'],
+		usageCount: 67,
+	},
+]);
+
+const getCategoryType = (category: string) => {
+	const typeMap: Record<string, any> = {
+		问候: 'success',
+		感谢: 'primary',
+		支持: 'warning',
+		道歉: 'danger',
+		结束: 'info',
+		介绍: '',
+	};
+	return typeMap[category] || '';
+};
+
+const handleReplyClick = (reply: Reply) => {
+	ElMessage.success(`使用快捷回复: ${reply.title}`);
+};
+
+const handleCopy = (reply: Reply) => {
+	navigator.clipboard.writeText(reply.content);
+	ElMessage.success('已复制到剪贴板');
+};
+
+const handleEdit = (reply: Reply) => {
+	ElMessage.info(`编辑回复: ${reply.title}`);
+};
+
+const handleDelete = (reply: Reply) => {
+	ElMessage.warning(`删除回复: ${reply.title}`);
+};
+</script>
+
+<style scoped lang="scss">
+.reply-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+	gap: 16px;
+}
+
+.reply-card {
+	background: #ffffff;
+	border-radius: 12px;
+	padding: 20px;
+	border: 1px solid #e5e7eb;
+	cursor: pointer;
+	transition: all 0.3s ease;
+
+	&:hover {
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+		transform: translateY(-2px);
+		border-color: #3b82f6;
+	}
+}
+
+.reply-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.reply-category {
+	flex-shrink: 0;
+}
+
+.reply-usage {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	font-size: 12px;
+	color: #6b7280;
+}
+
+.reply-title {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1f2937;
+	margin: 0 0 12px 0;
+}
+
+.reply-content {
+	font-size: 14px;
+	color: #6b7280;
+	line-height: 1.6;
+	margin: 0 0 16px 0;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.reply-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 12px;
+	border-top: 1px solid #f3f4f6;
+}
+
+.reply-tags {
+	display: flex;
+	gap: 6px;
+	flex-wrap: wrap;
+}
+
+.reply-actions {
+	display: flex;
+	gap: 4px;
+}
+</style>
diff --git a/src/views/home/components/Sidebar.vue b/src/views/home/components/Sidebar.vue
new file mode 100644
index 0000000..64a1a07
--- /dev/null
+++ b/src/views/home/components/Sidebar.vue
@@ -0,0 +1,250 @@
+<template>
+	<div class="sidebar">
+		<div class="sidebar-header">
+			<div class="brand-dot"></div>
+			<div class="user-info">
+				<el-avatar :size="42" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+				<div class="user-details">
+					<div class="user-name">助手</div>
+					<div class="user-status">在线</div>
+				</div>
+			</div>
+			<el-button class="new-chat-btn" @click="handleNewChat">
+				<el-icon><Plus /></el-icon>
+				新增对话
+			</el-button>
+		</div>
+
+		<div class="sidebar-menu">
+			<div v-for="item in menuItems" :key="item.key" class="menu-item" :class="{ active: activeMenu === item.key }" @click="handleMenuClick(item)">
+				<el-icon :size="18" class="menu-icon">
+					<component :is="item.icon" />
+				</el-icon>
+				<span class="menu-label">{{ item.label }}</span>
+				<el-badge v-if="item.badge" :value="item.badge" class="menu-badge" />
+			</div>
+		</div>
+
+		<div class="sidebar-footer">
+			<el-button text class="footer-btn" @click="handleSettings">
+				<el-icon><Setting /></el-icon>
+				设置
+			</el-button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Document, Folder, ChatDotRound, MagicStick, Cpu, VideoPlay, Setting, Plus } from '@element-plus/icons-vue';
+import { useRouter } from 'vue-router';
+
+interface MenuItem {
+	key: string;
+	label: string;
+	icon: any;
+	badge?: number;
+	route?: string;
+}
+
+interface Props {
+	activeMenu: string;
+}
+
+interface Emits {
+	(e: 'menu-change', key: string): void;
+	(e: 'new-chat'): void;
+}
+
+defineProps<Props>();
+const emit = defineEmits<Emits>();
+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' },
+];
+
+const handleMenuClick = (item: MenuItem) => {
+	if (item.route) {
+		router.push(item.route);
+	} else {
+		emit('menu-change', item.key);
+	}
+};
+
+const handleNewChat = () => {
+	emit('new-chat');
+};
+
+const handleSettings = () => {
+	router.push('/personal');
+};
+</script>
+
+<style scoped lang="scss">
+.sidebar {
+	width: 252px;
+	background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
+	border-right: 1px solid #e7edf7;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	box-shadow: 6px 0 20px rgba(15, 23, 42, 0.04);
+}
+
+.sidebar-header {
+	padding: 18px 16px 14px;
+	border-bottom: 1px solid #e9eef7;
+	position: relative;
+}
+
+.new-chat-btn {
+	margin-top: 10px;
+	width: 100%;
+	height: 34px;
+	border-radius: 10px;
+	border: 1px solid #dbe7f7;
+	background: linear-gradient(135deg, #f8fbff 0%, #eff6ff 100%);
+	color: #1f4db8;
+	font-weight: 600;
+	letter-spacing: 0.2px;
+
+	&:hover {
+		color: #1e40af;
+		border-color: #bfdbfe;
+		background: linear-gradient(135deg, #eff6ff 0%, #e0eeff 100%);
+	}
+}
+
+.brand-dot {
+	position: absolute;
+	right: 16px;
+	top: 18px;
+	width: 8px;
+	height: 8px;
+	border-radius: 999px;
+	background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
+	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
+}
+
+.user-info {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 8px 8px 6px;
+	border-radius: 12px;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 251, 255, 0.92) 100%);
+	border: 1px solid #e7edf7;
+}
+
+.user-details {
+	flex: 1;
+}
+
+.user-name {
+	font-size: 15px;
+	font-weight: 700;
+	color: #111827;
+	margin-bottom: 4px;
+	letter-spacing: 0.2px;
+}
+
+.user-status {
+	font-size: 12px;
+	color: #10b981;
+	font-weight: 500;
+}
+
+.sidebar-menu {
+	flex: 1;
+	padding: 12px 10px;
+	overflow-y: auto;
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.menu-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 11px 12px;
+	margin-bottom: 6px;
+	border-radius: 11px;
+	cursor: pointer;
+	transition: all 0.22s ease;
+	color: #64748b;
+	position: relative;
+	border: 1px solid transparent;
+
+	&:hover {
+		background: #f3f7ff;
+		color: #1f2937;
+		border-color: #e3ecfb;
+	}
+
+	&.active {
+		background: linear-gradient(135deg, rgba(59, 130, 246, 0.16) 0%, rgba(37, 99, 235, 0.12) 100%);
+		color: #1f4db8;
+		font-weight: 600;
+		border-color: rgba(59, 130, 246, 0.2);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: -2px;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 3px;
+			height: 18px;
+			background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
+			border-radius: 0 4px 4px 0;
+		}
+	}
+}
+
+.menu-icon {
+	opacity: 0.92;
+}
+
+.menu-label {
+	flex: 1;
+	font-size: 13px;
+}
+
+.menu-badge {
+	:deep(.el-badge__content) {
+		background: #ef4444;
+		border: none;
+		box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25);
+	}
+}
+
+.sidebar-footer {
+	padding: 10px;
+	border-top: 1px solid #e9eef7;
+}
+
+.footer-btn {
+	width: 100%;
+	justify-content: flex-start;
+	gap: 8px;
+	color: #64748b;
+	font-size: 13px;
+	border-radius: 10px;
+	padding: 10px 12px;
+
+	&:hover {
+		background: #f4f7fd;
+		color: #1f2937;
+	}
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 5f3227d..6688a33 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,654 +1,274 @@
 <template>
-	<div class="home-container">
-		<el-row :gutter="15" class="home-card-one mb15">
-			<el-col
-				:xs="24"
-				:sm="12"
-				:md="12"
-				:lg="6"
-				:xl="6"
-				v-for="(v, k) in homeOne"
-				:key="k"
-				:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
-			>
-				<div class="home-card-item flex">
-					<div class="flex-margin flex w100" :class="` home-one-animation${k}`">
-						<div class="flex-auto">
-							<span class="font30">{{ v.num1 }}</span>
-							<span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}%</span>
-							<div class="mt10">{{ v.num3 }}</div>
-						</div>
-						<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
-							<i class="flex-margin font32" :class="v.num4" :style="{ color: `var(${v.color3})` }"></i>
+	<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>
-			</el-col>
-		</el-row>
-		<el-row :gutter="15" class="home-card-two mb15">
-			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homeLineRef"></div>
-				</div>
-			</el-col>
-			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8" class="home-media">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homePieRef"></div>
-				</div>
-			</el-col>
-		</el-row>
-		<el-row :gutter="15" class="home-card-three">
-			<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
-				<div class="home-card-item">
-					<div class="home-card-item-title">快捷导航工具</div>
-					<div class="home-monitor">
-						<div class="flex-warp">
-							<div class="flex-warp-item" v-for="(v, k) in homeThree" :key="k">
-								<div class="flex-warp-item-box" :class="`home-animation${k}`">
-									<div class="flex-margin">
-										<i :class="v.icon" :style="{ color: v.iconColor }"></i>
-										<span class="pl5">{{ v.label }}</span>
-										<div class="mt10">{{ v.value }}</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</el-col>
-			<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16" class="home-media">
-				<div class="home-card-item">
-					<div style="height: 100%" ref="homeBarRef"></div>
-				</div>
-			</el-col>
-		</el-row>
+			</div>
+		</el-drawer>
 	</div>
 </template>
 
-<script lang="ts">
-import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated, onUnmounted } from 'vue';
-import * as echarts from 'echarts';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+<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';
 
-let global: any = {
-	homeChartOne: null,
-	homeChartTwo: null,
-	homeCharThree: null,
-	dispose: [null, '', undefined],
+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;
 };
 
-export default defineComponent({
-	name: 'home',
-	setup() {
-		const homeLineRef = ref();
-		const homePieRef = ref();
-		const homeBarRef = ref();
-		const storesTagsViewRoutes = useTagsViewRoutes();
-		const storesThemeConfig = useThemeConfig();
-		const { themeConfig } = storeToRefs(storesThemeConfig);
-		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
-		const state = reactive({
-			homeOne: [
-				{
-					num1: '125,12',
-					num2: '-12.32',
-					num3: '订单统计信息',
-					num4: 'fa fa-meetup',
-					color1: '#FF6462',
-					color2: '--next-color-primary-lighter',
-					color3: '--el-color-primary',
-				},
-				{
-					num1: '653,33',
-					num2: '+42.32',
-					num3: '月度计划信息',
-					num4: 'iconfont icon-ditu',
-					color1: '#6690F9',
-					color2: '--next-color-success-lighter',
-					color3: '--el-color-success',
-				},
-				{
-					num1: '125,65',
-					num2: '+17.32',
-					num3: '年度计划信息',
-					num4: 'iconfont icon-zaosheng',
-					color1: '#6690F9',
-					color2: '--next-color-warning-lighter',
-					color3: '--el-color-warning',
-				},
-				{
-					num1: '520,43',
-					num2: '-10.01',
-					num3: '访问统计信息',
-					num4: 'fa fa-github-alt',
-					color1: '#FF6462',
-					color2: '--next-color-danger-lighter',
-					color3: '--el-color-danger',
-				},
-			],
-			homeThree: [
-				{
-					icon: 'iconfont icon-yangan',
-					label: '浅粉红',
-					value: '2.1%OBS/M',
-					iconColor: '#F72B3F',
-				},
-				{
-					icon: 'iconfont icon-wendu',
-					label: '深红(猩红)',
-					value: '30℃',
-					iconColor: '#91BFF8',
-				},
-				{
-					icon: 'iconfont icon-shidu',
-					label: '淡紫红',
-					value: '57%RH',
-					iconColor: '#88D565',
-				},
-				{
-					icon: 'iconfont icon-shidu',
-					label: '弱紫罗兰红',
-					value: '107w',
-					iconColor: '#88D565',
-				},
-				{
-					icon: 'iconfont icon-zaosheng',
-					label: '中紫罗兰红',
-					value: '57DB',
-					iconColor: '#FBD4A0',
-				},
-				{
-					icon: 'iconfont icon-zaosheng',
-					label: '紫罗兰',
-					value: '57PV',
-					iconColor: '#FBD4A0',
-				},
-				{
-					icon: 'iconfont icon-zaosheng',
-					label: '暗紫罗兰',
-					value: '517Cpd',
-					iconColor: '#FBD4A0',
-				},
-				{
-					icon: 'iconfont icon-zaosheng',
-					label: '幽灵白',
-					value: '12kg',
-					iconColor: '#FBD4A0',
-				},
-				{
-					icon: 'iconfont icon-zaosheng',
-					label: '海军蓝',
-					value: '64fm',
-					iconColor: '#FBD4A0',
-				},
-			],
-			myCharts: [],
-			charts: {
-				theme: '',
-				bgColor: '',
-				color: '#303133',
-			},
-		});
-		// 折线图
-		const initLineChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose();
-			global.homeChartOne = <any>echarts.init(homeLineRef.value, state.charts.theme);
-			const option = {
-				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '政策补贴额度',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				grid: { top: 70, right: 20, bottom: 30, left: 30 },
-				tooltip: { trigger: 'axis' },
-				legend: { data: ['预购队列', '最新成交价'], right: 0 },
-				xAxis: {
-					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '价格',
-						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-					},
-				],
-				series: [
-					{
-						name: '预购队列',
-						type: 'line',
-						symbolSize: 6,
-						symbol: 'circle',
-						smooth: true,
-						data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
-						lineStyle: { color: '#fe9a8b' },
-						itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: '#fe9a8bb3' },
-								{ offset: 1, color: '#fe9a8b03' },
-							]),
-						},
-					},
-					{
-						name: '最新成交价',
-						type: 'line',
-						symbolSize: 6,
-						symbol: 'circle',
-						smooth: true,
-						data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
-						lineStyle: { color: '#9E87FF' },
-						itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' },
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: '#9E87FFb3' },
-								{ offset: 1, color: '#9E87FF03' },
-							]),
-						},
-						emphasis: {
-							itemStyle: {
-								color: {
-									type: 'radial',
-									x: 0.5,
-									y: 0.5,
-									r: 0.5,
-									colorStops: [
-										{ offset: 0, color: '#9E87FF' },
-										{ offset: 0.4, color: '#9E87FF' },
-										{ offset: 0.5, color: '#fff' },
-										{ offset: 0.7, color: '#fff' },
-										{ offset: 0.8, color: '#fff' },
-										{ offset: 1, color: '#fff' },
-									],
-								},
-								borderColor: '#9E87FF',
-								borderWidth: 2,
-							},
-						},
-					},
-				],
-			};
-			(<any>global.homeChartOne).setOption(option);
-			(<any>state.myCharts).push(global.homeChartOne);
-		};
-		// 饼图
-		const initPieChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose();
-			global.homeChartTwo = <any>echarts.init(homePieRef.value, state.charts.theme);
-			var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
-			var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05];
-			var data = [];
-			for (var i = 0; i < getname.length; i++) {
-				data.push({ name: getname[i], value: getvalue[i] });
-			}
-			const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8'];
-			const option = {
-				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '房屋建筑工程',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				tooltip: { trigger: 'item', formatter: '{b} <br/> {c}%' },
-				graphic: {
-					elements: [
-						{
-							type: 'image',
-							z: -1,
-							style: {
-								image: themeConfig.value.isIsDark
-									? ''
-									: 'data:image/png;base64,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',
-								width: 230,
-								height: 230,
-							},
-							left: '16.5%',
-							top: 'center',
-						},
-					],
-				},
-				legend: {
-					type: 'scroll',
-					orient: 'vertical',
-					right: '0%',
-					left: '65%',
-					top: 'center',
-					itemWidth: 14,
-					itemHeight: 14,
-					data: getname,
-					textStyle: {
-						rich: {
-							name: {
-								fontSize: 14,
-								fontWeight: 400,
-								width: 200,
-								height: 35,
-								padding: [0, 0, 0, 60],
-								color: state.charts.color,
-							},
-							rate: {
-								fontSize: 15,
-								fontWeight: 500,
-								height: 35,
-								width: 40,
-								padding: [0, 0, 0, 30],
-								color: state.charts.color,
-							},
-						},
-					},
-				},
-				series: [
-					{
-						type: 'pie',
-						radius: ['82', themeConfig.value.isIsDark ? '50' : '102'],
-						center: ['32%', '50%'],
-						itemStyle: {
-							color: function (params: any) {
-								return colorList[params.dataIndex];
-							},
-						},
-						label: { show: false },
-						labelLine: { show: false },
-						data: data,
-					},
-				],
-			};
-			(<any>global.homeChartTwo).setOption(option);
-			(<any>state.myCharts).push(global.homeChartTwo);
-		};
-		// 柱状图
-		const initBarChart = () => {
-			if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
-			global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
-			const option = {
-				backgroundColor: state.charts.bgColor,
-				title: {
-					text: '地热开发利用',
-					x: 'left',
-					textStyle: { fontSize: '15', color: state.charts.color },
-				},
-				tooltip: { trigger: 'axis' },
-				legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 },
-				grid: { top: 70, right: 80, bottom: 30, left: 80 },
-				xAxis: [
-					{
-						type: 'category',
-						data: ['1km', '2km', '3km', '4km', '5km', '6km'],
-						boundaryGap: true,
-						axisTick: { show: false },
-					},
-				],
-				yAxis: [
-					{
-						name: '供回温度(℃）',
-						nameLocation: 'middle',
-						nameTextStyle: { padding: [3, 4, 50, 6] },
-						splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
-						axisLine: { show: false },
-						axisTick: { show: false },
-						axisLabel: { color: state.charts.color, formatter: '{value} ' },
-					},
-					{
-						name: '压力值(Mpa)',
-						nameLocation: 'middle',
-						nameTextStyle: { padding: [50, 4, 5, 6] },
-						splitLine: { show: false },
-						axisLine: { show: false },
-						axisTick: { show: false },
-						axisLabel: { color: state.charts.color, formatter: '{value} ' },
-					},
-				],
-				series: [
-					{
-						name: '供温',
-						type: 'line',
-						smooth: true,
-						showSymbol: true,
-						// 矢量画五角星
-						symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z',
-						symbolSize: 12,
-						yAxisIndex: 0,
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(250,180,101,0.3)' },
-								{ offset: 1, color: 'rgba(250,180,101,0)' },
-							]),
-							shadowColor: 'rgba(250,180,101,0.2)',
-							shadowBlur: 20,
-						},
-						itemStyle: { color: '#FF8000' },
-						// data中可以使用对象，value代表相应的值，另外可加入自定义的属性
-						data: [
-							{ value: 1, stationName: 's1' },
-							{ value: 3, stationName: 's2' },
-							{ value: 4, stationName: 's3' },
-							{ value: 9, stationName: 's4' },
-							{ value: 3, stationName: 's5' },
-							{ value: 2, stationName: 's6' },
-						],
-					},
-					{
-						name: '回温',
-						type: 'line',
-						smooth: true,
-						showSymbol: true,
-						symbol: 'emptyCircle',
-						symbolSize: 12,
-						yAxisIndex: 0,
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(
-								0,
-								0,
-								0,
-								1,
-								[
-									{ offset: 0, color: 'rgba(199, 237, 250,0.5)' },
-									{ offset: 1, color: 'rgba(199, 237, 250,0.2)' },
-								],
-								false
-							),
-						},
-						itemStyle: {
-							color: '#3bbc86',
-						},
-						data: [
-							{ value: 31, stationName: 's1' },
-							{ value: 36, stationName: 's2' },
-							{ value: 54, stationName: 's3' },
-							{ value: 24, stationName: 's4' },
-							{ value: 73, stationName: 's5' },
-							{ value: 22, stationName: 's6' },
-						],
-					},
-					{
-						name: '压力值(Mpa)',
-						type: 'bar',
-						barWidth: 30,
-						yAxisIndex: 1,
-						itemStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{ offset: 0, color: 'rgba(108,80,243,0.3)' },
-								{ offset: 1, color: 'rgba(108,80,243,0)' },
-							]),
-							//柱状图圆角
-							borderRadius: [30, 30, 0, 0],
-						},
-						data: [
-							{ value: 11, stationName: 's1' },
-							{ value: 34, stationName: 's2' },
-							{ value: 54, stationName: 's3' },
-							{ value: 39, stationName: 's4' },
-							{ value: 63, stationName: 's5' },
-							{ value: 24, stationName: 's6' },
-						],
-					},
-				],
-			};
-			(<any>global.homeCharThree).setOption(option);
-			(<any>state.myCharts).push(global.homeCharThree);
-		};
-		// 批量设置 echarts resize
-		const initEchartsResizeFun = () => {
-			nextTick(() => {
-				for (let i = state.myCharts.length - 1; i >= 0; i--) {
-					const chart = state.myCharts[i] as any;
-					if (!chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) {
-						state.myCharts.splice(i, 1);
-						continue;
-					}
-					setTimeout(() => {
-						if (chart && typeof chart.resize === 'function' && !(chart.isDisposed && chart.isDisposed())) {
-							chart.resize();
-						}
-					}, (state.myCharts.length - 1 - i) * 200);
-				}
-			});
-		};
-		// 批量设置 echarts resize
-		const initEchartsResize = () => {
-			window.addEventListener('resize', initEchartsResizeFun);
-		};
-		// 页面加载时
-		onMounted(() => {
-			initEchartsResize();
-		});
-		onUnmounted(() => {
-			window.removeEventListener('resize', initEchartsResizeFun);
-			state.myCharts.length = 0;
-		});
-		// 由于页面缓存原因，keep-alive
-		onActivated(() => {
-			initEchartsResizeFun();
-		});
-		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
-		watch(
-			() => isTagsViewCurrenFull.value,
-			() => {
-				initEchartsResizeFun();
-			}
-		);
-		// 监听 vuex 中是否开启深色主题
-		watch(
-			() => themeConfig.value.isIsDark,
-			(isIsDark) => {
-				nextTick(() => {
-					state.charts.theme = isIsDark ? 'dark' : '';
-					state.charts.bgColor = isIsDark ? 'transparent' : '';
-					state.charts.color = isIsDark ? '#dadada' : '#303133';
-					setTimeout(() => {
-						initLineChart();
-					}, 500);
-					setTimeout(() => {
-						initPieChart();
-					}, 700);
-					setTimeout(() => {
-						initBarChart();
-					}, 1000);
-				});
-			},
-			{
-				deep: true,
-				immediate: true,
-			}
-		);
-		return {
-			homeLineRef,
-			homePieRef,
-			homeBarRef,
-			...toRefs(state),
-		};
-	},
-});
+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">
-$homeNavLengh: 8;
-.home-container {
+.home-chat-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
 	overflow: hidden;
-	.home-card-one,
-	.home-card-two,
-	.home-card-three {
-		.home-card-item {
-			width: 100%;
-			height: 130px;
-			border-radius: 4px;
-			transition: all ease 0.3s;
-			padding: 20px;
-			overflow: hidden;
-			background: var(--el-color-white);
-			color: var(--el-text-color-primary);
-			border: 1px solid var(--next-border-color-light);
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				transition: all ease 0.3s;
-			}
-			&-icon {
-				width: 70px;
-				height: 70px;
-				border-radius: 100%;
-				flex-shrink: 1;
-				i {
-					color: var(--el-text-color-placeholder);
-				}
-			}
-			&-title {
-				font-size: 15px;
-				font-weight: bold;
-				height: 30px;
-			}
-		}
-	}
-	.home-card-one {
-		@for $i from 0 through 3 {
-			.home-one-animation#{$i} {
-				opacity: 0;
-				animation-name: error-num;
-				animation-duration: 0.5s;
-				animation-fill-mode: forwards;
-				animation-delay: calc($i/10) + s;
-			}
-		}
-	}
-	.home-card-two,
-	.home-card-three {
-		.home-card-item {
-			height: 400px;
-			width: 100%;
-			overflow: hidden;
-			.home-monitor {
-				height: 100%;
-				.flex-warp-item {
-					width: 25%;
-					height: 111px;
-					display: flex;
-					.flex-warp-item-box {
-						margin: auto;
-						text-align: center;
-						color: var(--el-text-color-primary);
-						display: flex;
-						border-radius: 5px;
-						background: var(--next-bg-color);
-						cursor: pointer;
-						transition: all 0.3s ease;
-						&:hover {
-							background: var(--el-color-primary-light-9);
-							transition: all 0.3s ease;
-						}
-					}
-					@for $i from 0 through $homeNavLengh {
-						.home-animation#{$i} {
-							opacity: 0;
-							animation-name: error-num;
-							animation-duration: 0.5s;
-							animation-fill-mode: forwards;
-							animation-delay: calc($i/10) + s;
-						}
-					}
-				}
-			}
-		}
+	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>