重构首页

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>