首页优化

CLAUDE.md

@@ -0,0 +1,102 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the GFast UI project, a Vue 3 admin management system based on the vue-next-admin template, customized for a digital advertising/trading platform.
+
+## Commands
+
+- `npm install` - Install dependencies (use `npm install --registry=https://registry.npmmirror.com` for China mainland)
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint check
+- `npm run lint-fix` - Fix ESLint issues automatically
+- `npm run type-check` - Run TypeScript type checking
+- `npm run quality` - Run both lint and type-check
+
+## Architecture Overview
+
+**Tech Stack:**
+- Vue 3 with Composition API (script setup)
+- TypeScript
+- Vite
+- Element Plus (UI framework)
+- Pinia (state management)
+- Vue Router (with hash mode)
+- Axios (HTTP client)
+- i18n (internationalization)
+- mitt (event bus)
+
+**Directory Structure:**
+- `src/api/` - API client methods organized by business domain (ads, assets, cid, customerService, digitalHuman, knowledge, login, menu, settings, system, etc.)
+- `src/components/` - Reusable Vue components
+- `src/directives/` - Custom Vue directives
+- `src/i18n/` - Internationalization configuration
+- `src/layout/` - Main layout components
+- `src/router/` - Route configuration
+  - `index.ts` - Router setup and guard
+  - `backEnd.ts` - Backend-controlled route initialization
+  - `frontEnd.ts` - Frontend-controlled route initialization
+  - `route.ts` - Static route definitions
+- `src/stores/` - Pinia state stores
+  - `themeConfig.ts` - Theme and global configuration
+  - `userInfo.ts` - User information
+  - `routesList.ts` - Dynamic route management
+  - `keepAliveNames.ts` - keep-alive cache management
+- `src/theme/` - Theme related styles
+- `src/types/` - TypeScript type definitions
+- `src/utils/` - Utility functions
+  - `request.ts` - Axios instance with interceptors, error handling, and token management
+  - `storage.ts` - Session storage wrapper
+  - `gfast.ts` - GFast-specific helpers (file URL construction, tree building, date formatting)
+  - `diffUtils.ts` - Field change detection for PUT requests
+- `src/views/` - Page components organized by business module
+
+**Key Patterns:**
+
+1. **Routing**: Supports both frontend and backend controlled routing. When backend control is enabled (`isRequestRoutes: true` in themeConfig), routes are fetched from the backend and dynamically added.
+
+2. **API Requests**:
+   - API methods are organized by domain in `src/api/` (each subdomain has its own directory structure)
+   - The Axios instance in `src/utils/request.ts` automatically:
+     - Adds Bearer token from session storage
+     - Sends only changed fields for PUT requests (diff comparison with original data)
+     - Handles token expiration globally with redirect to login
+     - Provides error message extraction from multiple response formats (`message`, `msg`, `error`, `detail`)
+     - Supports error mode configuration via `requestOptions.errorMode`:
+       - `global`: (default) Global error popup with backend message
+       - `page`: No automatic popup, reject the error for page-level handling
+       - `silent`: Completely silent, no error display
+     - Special handling for `code === 402`: Triggers module not enabled subscription flow (except for specific asset endpoints)
+   - Response format expects `code`, `message`/`msg`, and data. Known success codes: `0`, `200`.
+   - Use `getApiErrorMessage(error)` from `/@/utils/request` to extract user-friendly error messages in catch blocks when using `page` or `silent` mode.
+
+3. **Global Properties & Components**:
+   - Helpers registered globally for template use:
+     - `getUpFileUrl`, `handleTree`, `useDict`, `selectDictLabel`, `parseTime`, `getItems`, `setItems`, `getOptionValue`, `isEmpty`
+   - Global components:
+     - `pagination` - Reusable pagination component
+   - Global event bus via mitt: `app.config.globalProperties.mittBus`
+
+4. **Authentication**: Token is stored in session storage via the `Session` utility. 401 responses (HTTP or business code) trigger automatic logout.
+
+5. **Keep-alive**: Route components can be cached via keep-alive, managed by the `useKeepALiveNames` store.
+
+## Environment Variables
+
+- `.env.development` - Development environment settings
+- `.env.production` - Production environment settings
+- `VITE_API_URL` - Backend API base URL
+- `VITE_PORT` - Dev server port
+- `VITE_PUBLIC_PATH` - Public base path for production build
+- `VITE_OPEN_CDN` - Enable CDN for external dependencies
+
+## Development Notes
+
+- The project uses `/@` alias for `src/`
+- Components use the Composition API with `<script setup lang="ts">`
+- Styling is done with SCSS
+- ESLint enforces code quality
+- Node version requirement: `>=16.0.0` (supported: v16.x ~ v20.x)

src/views/home/components/ChatList.vue

@@ -13,7 +13,7 @@
 			</div>
 
 			<div v-if="msg.isUser" class="avatar-wrap">
-				<el-avatar :size="28" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+				<el-avatar :size="36" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
 			</div>
 		</div>
 	</div>
@@ -64,16 +64,20 @@ const messages = ref<Message[]>([
 .chat-divider {
 	align-self: center;
 	font-size: 12px;
-	color: #8b95a7;
+	color: #64748b;
 	line-height: 1;
-	padding: 0 12px;
+	padding: 4px 16px;
+	background: rgba(255, 255, 255, 0.7);
+	border-radius: 999px;
+	border: 1px solid rgba(226, 233, 244, 0.8);
 	letter-spacing: 0.2px;
+	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
 }
 
 .message-row {
 	display: flex;
-	align-items: flex-end;
-	gap: 10px;
+	align-items: flex-start;
+	gap: 12px;
 	max-width: 100%;
 
 	&.is-user {
@@ -82,24 +86,29 @@ const messages = ref<Message[]>([
 }
 
 .avatar-wrap {
-	width: 30px;
-	height: 30px;
+	width: 36px;
+	height: 36px;
 	flex-shrink: 0;
+	display: flex;
+	align-items: flex-start;
+	padding-top: 4px;
 }
 
 .ai-avatar {
-	width: 30px;
-	height: 30px;
+	width: 36px;
+	height: 36px;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 11px;
+	font-size: 12px;
 	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);
+	color: #1e40af;
+	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+	border: 1px solid #93c5fd;
+	box-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.8),
+		0 2px 8px rgba(59, 130, 246, 0.15);
 }
 
 .bubble-wrap {
@@ -112,30 +121,35 @@ const messages = ref<Message[]>([
 .bubble {
 	font-size: 14px;
 	line-height: 1.75;
-	padding: 12px 14px;
-	border-radius: 12px;
+	padding: 14px 16px;
+	border-radius: 16px;
 	word-break: break-word;
 	color: #1f2937;
-	background: rgba(255, 255, 255, 0.84);
+	background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.92) 100%);
 	border: 1px solid rgba(226, 233, 244, 0.95);
 	backdrop-filter: blur(8px);
-	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
+	transition: all 0.2s ease;
 
 	.message-row.is-user & {
-		background: linear-gradient(135deg, #58a6ff 0%, #3b82f6 52%, #2563eb 100%);
-		border-color: rgba(59, 130, 246, 0.32);
+		background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
+		border-color: rgba(59, 130, 246, 0.4);
 		color: #fff;
-		box-shadow: 0 8px 20px rgba(37, 99, 235, 0.33);
+		box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
 	}
 }
 
 .time {
 	font-size: 11px;
 	color: #8f9aae;
-	padding: 0 4px;
+	padding: 4px 6px;
 
 	.message-row.is-user & {
 		text-align: right;
+		color: rgba(148, 163, 184, 0.9);
+	}
+	.message-row:not(.is-user) & {
+		padding-left: 2px;
 	}
 }
 </style>

src/views/home/components/InputBar.vue

@@ -26,7 +26,6 @@
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
-
 					<el-dropdown trigger="click" @command="handleReplySelect">
 						<el-button class="pill-btn">快捷回复</el-button>
 						<template #dropdown>
@@ -37,10 +36,33 @@
 							</el-dropdown-menu>
 						</template>
 					</el-dropdown>
+					<el-dropdown trigger="click" @command="handleSkillSelect">
+						<el-button class="pill-btn">
+							{{ currentSkillDisplay }}
+						</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="default">默认对话</el-dropdown-item>
+								<el-dropdown-item command="code-review">代码审查</el-dropdown-item>
+								<el-dropdown-item command="refactor">代码重构</el-dropdown-item>
+								<el-dropdown-item command="writing">内容写作</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+					<el-dropdown trigger="click" @command="handleWorkflowSelect">
+						<el-button class="pill-btn">
+							{{ currentWorkflowDisplay }}
+						</el-button>
+						<template #dropdown>
+							<el-dropdown-menu>
+								<el-dropdown-item command="none">无</el-dropdown-item>
+								<el-dropdown-item command="review-test">审查+测试</el-dropdown-item>
+								<el-dropdown-item command="doc-then-code">文档再编码</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>
@@ -51,7 +73,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { Top, Plus } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
@@ -61,6 +83,33 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 const message = ref('');
+const selectedSkill = ref('default');
+const selectedWorkflow = ref('none');
+
+const skillLabels: Record<string, string> = {
+	default: '选择技能',
+	'code-review': '代码审查',
+	refactor: '代码重构',
+	writing: '内容写作',
+};
+
+const workflowLabels: Record<string, string> = {
+	none: '选择工作流',
+	'review-test': '审查+测试',
+	'doc-then-code': '文档再编码',
+};
+
+const currentSkillDisplay = computed(() => {
+	return selectedSkill.value === 'default'
+		? '选择技能'
+		: skillLabels[selectedSkill.value];
+});
+
+const currentWorkflowDisplay = computed(() => {
+	return selectedWorkflow.value === 'none'
+		? '选择工作流'
+		: workflowLabels[selectedWorkflow.value];
+});
 
 const quickCommands: Record<string, string> = {
 	rewrite: '请帮我润色下面这段内容，保持原意并提升表达质感：',
@@ -74,11 +123,27 @@ const quickReplies: Record<string, string> = {
 	adjust: '这个比例还要再调一下。',
 };
 
+const skills: Record<string, string> = {
+	default: '',
+	'code-review': '[技能：代码审查] 请帮我审查下面这段代码，找出潜在问题并给出改进建议：\n',
+	refactor: '[技能：代码重构] 请帮我重构下面这段代码，提升可读性和可维护性：\n',
+	writing: '[技能：内容写作] 请根据下面的需求帮我创作内容：\n',
+};
+
+const workflows: Record<string, string> = {
+	none: '',
+	'review-test': '[工作流：审查+测试] 完成后请自动生成单元测试：\n',
+	'doc-then-code': '[工作流：文档再编码] 请先编写接口文档，再实现代码：\n',
+};
+
 const handleSend = (event?: KeyboardEvent) => {
 	if (event) event.preventDefault();
 	const msg = message.value.trim();
 	if (!msg) return;
-	emit('send', msg);
+	const skillPrefix = skills[selectedSkill.value] || '';
+	const workflowPrefix = workflows[selectedWorkflow.value] || '';
+	const finalMessage = (skillPrefix + workflowPrefix + msg).trim();
+	emit('send', finalMessage);
 	message.value = '';
 };
 
@@ -95,6 +160,20 @@ const handleReplySelect = (key: string | number | object) => {
 	const k = String(key);
 	message.value = quickReplies[k] || message.value;
 };
+
+const handleSkillSelect = (key: string | number | object) => {
+	selectedSkill.value = String(key);
+	if (selectedSkill.value !== 'default') {
+		ElMessage.success(`已选择技能：${skillLabels[selectedSkill.value]}`);
+	}
+};
+
+const handleWorkflowSelect = (key: string | number | object) => {
+	selectedWorkflow.value = String(key);
+	if (selectedWorkflow.value !== 'none') {
+		ElMessage.success(`已选择工作流：${workflowLabels[selectedWorkflow.value]}`);
+	}
+};
 </script>
 
 <style scoped lang="scss">
@@ -110,16 +189,17 @@ const handleReplySelect = (key: string | number | object) => {
 	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;
+		linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 100%),
+		radial-gradient(120% 180% at 0% 0%, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 38%),
+		radial-gradient(80% 120% at 100% 100%, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0) 38%);
+	border: 1px solid rgba(59, 130, 246, 0.28);
+	border-radius: 20px;
 	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);
+		0 24px 48px rgba(15, 23, 42, 0.12),
+		0 0 0 1px rgba(59, 130, 246, 0.08) inset,
+		0 8px 16px rgba(37, 99, 235, 0.1);
+	padding: 16px 18px 14px;
+	backdrop-filter: blur(16px);
 }
 
 .message-input {
@@ -158,59 +238,60 @@ const handleReplySelect = (key: string | number | object) => {
 }
 
 .tool-btn {
-	width: 30px;
-	height: 30px;
+	width: 32px;
+	height: 32px;
 	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);
+	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
+	transition: all 0.2s ease;
 
 	&:hover {
 		color: #2b4d8f;
-		background: #f3f8ff;
+		background: linear-gradient(135deg, #f0f7ff 0%, #e0edff 100%);
+		border-color: #bfdbfe;
+		transform: translateY(-1px);
+		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
 	}
 }
 
 .pill-btn {
-	height: 30px;
-	padding: 0 12px;
+	height: 32px;
+	padding: 0 14px;
 	border-radius: 999px;
 	border: 1px solid #dbe7f7;
 	color: #30435f;
 	background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
 	font-size: 12px;
 	font-weight: 600;
-}
+	transition: all 0.2s ease;
 
-.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;
+	&:hover {
+		background: linear-gradient(135deg, #f0f7ff 0%, #e0edff 100%);
+		border-color: #bfdbfe;
+		color: #1d4ed8;
+	}
 }
 
 .send-btn {
-	width: 30px;
-	height: 30px;
+	width: 32px;
+	height: 32px;
 	border: none;
-	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%);
+	background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
 	color: #fff;
-	box-shadow: 0 6px 14px rgba(59, 130, 246, 0.4);
+	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+	transition: all 0.2s ease;
 
 	&:hover:not(:disabled) {
-		filter: brightness(1.06);
+		filter: brightness(1.08);
 		transform: translateY(-1px);
+		box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
 	}
 
 	&:disabled {
-		opacity: 0.55;
+		opacity: 0.5;
 		box-shadow: none;
-		background: #cbd5e1;
+		background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
 	}
 }
 </style>

src/views/home/components/MainContent.vue

@@ -3,31 +3,20 @@
 		<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 class="chat-container" v-if="activeMenu === 'chat'">
+				<ChatList />
+			</div>
 		</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;
@@ -37,19 +26,11 @@ const props = defineProps<Props>();
 
 const menuTitles: Record<string, string> = {
 	chat: '对话',
-	diary: '我的日记',
-	files: '文件管理',
-	commands: '快捷指令',
-	replies: '快捷回复',
+	models: '模型管理',
+	creation: '内容创作',
 };
 
 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">
@@ -97,17 +78,11 @@ const handleAdd = () => {
 	&::-webkit-scrollbar {
 		display: none;
 	}
+}
 
-	// 聊天界面的特殊样式
-	&:has(.chat-list) {
-		padding: 0 8% 130px;
-		display: block;
-	}
-
-	// 其他列表的样式
-	&:not(:has(.chat-list)) {
-		padding: 20px 24px;
-		background: #f9fafb;
-	}
+.chat-container {
+	width: min(1060px, 82%);
+	margin: 0 auto;
+	padding: 20px 0 130px;
 }
 </style>

src/views/home/components/Sidebar.vue

@@ -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;
 }

src/views/home/index.vue

@@ -1,46 +1,18 @@
 <template>
 	<div class="home-chat-container">
-		<Sidebar :active-menu="activeMenu" @menu-change="handleMenuChange" @new-chat="handleCreateHistory" />
+		<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 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>
 
@@ -59,7 +31,6 @@ interface HistoryItem {
 }
 
 const activeMenu = ref('chat');
-const historyDrawerVisible = ref(false);
 const activeHistoryId = ref(1);
 
 const historyList = ref<HistoryItem[]>([
@@ -138,137 +109,4 @@ const handleDeleteHistory = (id: number) => {
 			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>