From 27f35a56799ef8e25e5bf9715d3310bd9b0317f1 Mon Sep 17 00:00:00 2001
From: 2910410219 <2910410219@qq.com>
Date: Wed, 17 Jun 2026 09:55:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=92=8C=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                             |   1 +
 CLAUDE.md                              |  60 +++
 src/views/home/components/InputBar.vue |  22 +-
 src/views/home/components/Sidebar.vue  | 621 +++++++++++++++----------
 4 files changed, 432 insertions(+), 272 deletions(-)

diff --git a/.gitignore b/.gitignore
index 28c7f59..2cd356c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ pnpm-debug.log*
 *.sln
 *.sw?
 /admin-ui.iml
+.gstack/
diff --git a/CLAUDE.md b/CLAUDE.md
index 675c767..b69be64 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -221,6 +221,66 @@ These rules capture long-term repository preferences confirmed by the user and s
 - `VITE_PUBLIC_PATH` - Public base path for production build
 - `VITE_OPEN_CDN` - Enable CDN for external dependencies
 
+## AI Skills
+
+本项目已全局安装 **gstack** 和 **Superpowers** 两组技能（skill），通过斜杠命令调用。
+
+### gstack — 浏览器验证与发布
+
+负责 QA 测试、浏览器自动化、安全审计、代码审查和发布部署。
+
+| 阶段 | 命令 | 功能 |
+|------|------|------|
+| **审查** | `/gstack-review` | 代码审查，自动修复明显问题，标记完整性缺口 |
+| | `/gstack-cso` | 安全审计（OWASP Top 10 + STRIDE），含漏洞验证 |
+| **QA 测试** | `/gstack-qa <url>` | 打开浏览器进行功能测试，发现 bug 并自动修复 |
+| | `/gstack-qa-only <url>` | 仅检测并报告 bug，不修改代码 |
+| | `/gstack-browse` | AI 浏览网页内容（通过 Playwright + 系统 Chrome） |
+| | `/gstack-scrape` | 抓取网页内容 |
+| **性能** | `/gstack-benchmark` | 页面加载性能基准测试 |
+| | `/gstack-canary` | 部署后监控：控制台错误、性能回归、页面故障 |
+| **发布** | `/gstack-ship` | 同步主分支、运行测试、推送、创建 PR |
+| | `/gstack-land-and-deploy` | 合并 PR、等待 CI、部署、验证生产环境 |
+| **诊断** | `/gstack-investigate` | 系统性根因调试 |
+| | `/gstack-retro` | 迭代回顾分析 |
+
+浏览器功能依赖 Playwright，已配置使用系统 Chrome（`C:\Program Files\Google\Chrome\Application\chrome.exe`），无需额外下载浏览器。
+
+### Superpowers — 思考与计划
+
+负责头脑风暴、方案设计、计划编写与执行、系统性调试。
+
+| 阶段 | 命令 | 功能 |
+|------|------|------|
+| **构思** | `/sp-brainstorm` | 交互式头脑风暴，梳理需求和方案 |
+| | `/sp-using-superpowers` | Superpowers 使用指南 |
+| **计划** | `/sp-write-plan` | 编写实现计划 |
+| | `/sp-execute-plan` | 按批次执行计划 |
+| **开发** | `/sp-subagent-dev` | 子代理驱动开发：规范→审查→实现→验证 |
+| | `/sp-tdd` | 测试驱动开发工作流 |
+| | `/sp-dispatch-agents` | 并行分发子代理任务 |
+| **调试** | `/sp-debug` | 系统性调试方法论 |
+| **审查** | `/sp-request-review` | 请求代码审查 |
+| | `/sp-receive-review` | 接收并处理审查反馈 |
+| **完成** | `/sp-verify` | 完成前验证检查 |
+| | `/sp-finish-branch` | 完成开发分支 |
+| **工具** | `/sp-write-skills` | 编写自定义 skill |
+| | `/sp-git-worktrees` | Git 工作树使用指南 |
+
+### 工作流建议
+
+推荐开发流程按此顺序使用两组 skill：
+
+```
+/sp-brainstorm          →  梳理需求
+/sp-write-plan          →  编写实现计划
+(编码实现)
+/gstack-review          →  代码审查
+/gstack-qa <url>        →  QA 测试
+/gstack-cso             →  安全检查
+/gstack-ship            →  发布
+```
+
 ## Development Notes
 
 - The project uses `/@` alias for `src/`
diff --git a/src/views/home/components/InputBar.vue b/src/views/home/components/InputBar.vue
index 00ca493..e3be96d 100644
--- a/src/views/home/components/InputBar.vue
+++ b/src/views/home/components/InputBar.vue
@@ -32,20 +32,16 @@
 			<div class="input-toolbar">
 				<div class="toolbar-left">
 					<!-- 上传附件 -->
-					<el-tooltip content="上传文件" placement="top">
-						<button class="tool-icon-btn" @click="handleAttachment">
-							<el-icon><Paperclip /></el-icon>
-						</button>
-					</el-tooltip>
+					<button class="tool-icon-btn" title="上传文件" @click="handleAttachment">
+						<el-icon><Paperclip /></el-icon>
+					</button>
 
 					<!-- 选择技能 -->
 					<el-dropdown trigger="click" placement="top-start" @command="handleSkillSelect">
-						<el-tooltip content="选择技能" placement="top">
-							<button class="tool-icon-btn" :class="{ active: selectedSkill !== 'default' }">
-								<el-icon><MagicStick /></el-icon>
-								<span class="tool-label">技能</span>
-							</button>
-						</el-tooltip>
+						<button class="tool-icon-btn" :class="{ active: selectedSkill !== 'default' }" title="选择技能">
+							<el-icon><MagicStick /></el-icon>
+							<span class="tool-label">技能</span>
+						</button>
 						<template #dropdown>
 							<el-dropdown-menu>
 								<el-dropdown-item command="default">
@@ -145,10 +141,6 @@ const handleSkillSelect = (key: string | number | object | null) => {
 	selectedSkill.value = String(key ?? 'default');
 };
 
-const handleWorkflowSelect = (id: number | null) => {
-	selectedWorkflowId.value = id;
-};
-
 const toggleWorkflow = (id: number) => {
 	selectedWorkflowId.value = selectedWorkflowId.value === id ? null : id;
 };
diff --git a/src/views/home/components/Sidebar.vue b/src/views/home/components/Sidebar.vue
index 803b0e3..44499c5 100644
--- a/src/views/home/components/Sidebar.vue
+++ b/src/views/home/components/Sidebar.vue
@@ -1,17 +1,33 @@
 <template>
 	<div class="sidebar">
-		<div class="sidebar-header">
-			<el-button class="new-chat-btn" @click="handleNewChat">
-				<el-icon>
-					<Plus />
-				</el-icon>
-				新增对话
-			</el-button>
+		<!-- 顶部品牌区 -->
+		<div class="sidebar-brand">
+			<div class="brand-logo">
+				<el-icon class="brand-icon"><ChatDotRound /></el-icon>
+				<span class="brand-name">AI 助手</span>
+			</div>
+			<el-tooltip content="新建对话" placement="right">
+				<button class="new-chat-icon-btn" @click="handleNewChat">
+					<el-icon><EditPen /></el-icon>
+				</button>
+			</el-tooltip>
 		</div>
 
-		<div v-if="historyList.length" class="history-section">
-			<div class="history-title">历史对话</div>
-			<div class="history-list">
+		<!-- Tab 切换 -->
+		<div class="sidebar-tabs">
+			<button class="tab-btn" :class="{ active: activeTab === 'history' }" @click="activeTab = 'history'">
+				<el-icon><ChatLineRound /></el-icon>
+				对话记录
+			</button>
+			<button class="tab-btn" :class="{ active: activeTab === 'workspace' }" @click="activeTab = 'workspace'">
+				<el-icon><FolderOpened /></el-icon>
+				工作空间
+			</button>
+		</div>
+
+		<!-- 对话记录面板 -->
+		<div v-show="activeTab === 'history'" class="panel">
+			<div v-if="historyList.length" class="panel-list">
 				<div
 					v-for="item in visibleHistory"
 					:key="item.id"
@@ -19,56 +35,58 @@
 					: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>
+					<el-icon class="item-icon"><ChatLineRound /></el-icon>
+					<div class="item-body">
+						<div class="item-title">{{ item.title }}</div>
+						<div class="item-time">{{ item.time }}</div>
 					</div>
-					<el-button text class="delete-btn" @click.stop="handleDeleteHistory(item.id)">
-						<el-icon>
-							<Delete />
-						</el-icon>
-					</el-button>
+					<button class="item-del-btn" @click.stop="handleDeleteHistory(item.id)">
+						<el-icon><Delete /></el-icon>
+					</button>
 				</div>
+				<button v-if="historyShowCount < historyList.length" class="load-more-btn" @click="historyShowCount += HISTORY_PAGE">
+					<el-icon><ArrowDown /></el-icon>
+					展开更多 ({{ historyList.length - historyShowCount }} 条)
+				</button>
 			</div>
+			<div v-else class="panel-empty">暂无对话记录</div>
 		</div>
 
-		<div class="workspace-section">
-			<div class="workspace-title">工作流</div>
-			<div class="workspace-tree-wrap" v-loading="treeLoading">
-				<el-empty v-if="!treeLoading && treeNodes.length === 0" description="暂无作品数据" />
-				<el-tree
-					v-else
-					:data="treeNodes"
-					node-key="id"
-					:props="treeProps"
-					:highlight-current="true"
-					:expand-on-click-node="true"
-				>
-					<template #default="{ data }">
-						<div
-							class="tree-node"
-							:class="[
-								data.nodeType === 'date' ? 'level-date' :
-								data.nodeType === 'contentType' ? 'level-flow' : 'level-file',
-								data.fileType ? data.fileType.replace(/\//g, ' ').split(' ')[0] : ''
-							]"
-						>
-							<span class="ellipsis">{{ data.label }}</span>
-							<div v-if="data.nodeType === 'title' && data.fileUrl" class="tree-node-actions">
-								<el-button type="primary" link size="small" @click.stop="handlePreviewNode(data)"> 预览 </el-button>
-								<el-button type="primary" link size="small" @click.stop="handleDownloadNode(data)"> 下载 </el-button>
+		<!-- 工作空间面板 -->
+		<div v-show="activeTab === 'workspace'" class="panel" v-loading="treeLoading">
+			<el-empty v-if="!treeLoading && treeNodes.length === 0" :image-size="48" description="暂无内容" />
+			<div v-else class="panel-list">
+				<div v-for="dateNode in visibleWorkspace" :key="dateNode.id" class="tree-date-group">
+					<div class="tree-date-label">{{ dateNode.label }}</div>
+					<div v-for="flowNode in dateNode.children" :key="flowNode.id" class="tree-flow-group">
+						<div class="tree-flow-label">
+							<el-icon><Promotion /></el-icon>
+							<span>{{ flowNode.label }}</span>
+						</div>
+						<div v-for="fileNode in flowNode.children" :key="fileNode.id" class="tree-file-item">
+							<el-icon class="file-type-icon">
+								<component :is="getFileIcon(fileNode.fileType)" />
+							</el-icon>
+							<span class="file-name">{{ fileNode.label }}</span>
+							<div v-if="fileNode.fileUrl" class="file-actions">
+								<button class="file-action-btn" @click.stop="handlePreviewNode(fileNode)">预览</button>
+								<button class="file-action-btn" @click.stop="handleDownloadNode(fileNode)">下载</button>
 							</div>
 						</div>
-					</template>
-				</el-tree>
+					</div>
+				</div>
+				<button v-if="workspaceShowCount < treeNodes.length" class="load-more-btn" @click="workspaceShowCount += WORKSPACE_PAGE">
+					<el-icon><ArrowDown /></el-icon>
+					展开更多 ({{ treeNodes.length - workspaceShowCount }} 条)
+				</button>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { Plus, Delete } from '@element-plus/icons-vue';
+import { ref, computed } from 'vue';
+import { Delete, ChatDotRound, ChatLineRound, EditPen, ArrowDown, Promotion, Document, VideoPlay, Headset, Picture, FolderOpened } from '@element-plus/icons-vue';
 
 interface TreeNode {
 	id: string;
@@ -107,9 +125,24 @@ interface Emits {
 const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
-const treeProps = { children: 'children', label: 'label' };
+const HISTORY_PAGE = 10;
+const WORKSPACE_PAGE = 5;
 
-const visibleHistory = computed(() => props.historyList);
+const activeTab = ref<'history' | 'workspace'>('history');
+const historyShowCount = ref(HISTORY_PAGE);
+const workspaceShowCount = ref(WORKSPACE_PAGE);
+
+const visibleHistory = computed(() => props.historyList.slice(0, historyShowCount.value));
+const visibleWorkspace = computed(() => props.treeNodes.slice(0, workspaceShowCount.value));
+
+const getFileIcon = (fileType?: string) => {
+	if (!fileType) return Document;
+	const t = fileType.toLowerCase();
+	if (t.includes('image') || t.includes('png') || t.includes('jpg') || t.includes('gif')) return Picture;
+	if (t.includes('video') || t.includes('mp4') || t.includes('webm')) return VideoPlay;
+	if (t.includes('audio') || t.includes('mp3') || t.includes('wav')) return Headset;
+	return Document;
+};
 
 const handleNewChat = () => emit('new-chat');
 const handleSelectHistory = (id: number) => emit('select-history', id);
@@ -120,275 +153,349 @@ const handleDownloadNode = (data: TreeNode) => emit('download-node', data);
 
 <style scoped lang="scss">
 .sidebar {
-	width: 252px;
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 251, 255, 0.92) 100%);
-	border-right: 1px solid #e7edf7;
+	width: 240px;
+	flex-shrink: 0;
+	background: #f8fafc;
+	border-right: 1px solid #e2e8f0;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-	box-shadow: 8px 0 30px rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(10px);
+	overflow: hidden;
 }
 
-.sidebar-header {
-	padding: 18px 16px 14px;
-	border-bottom: 1px solid #e9eef7;
-	position: relative;
+/* 品牌区 */
+.sidebar-brand {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16px 12px 12px;
+	border-bottom: 1px solid #e2e8f0;
+	flex-shrink: 0;
 }
 
-.new-chat-btn {
-	margin-top: 0;
-	width: 100%;
-	height: 40px;
-	border-radius: 12px;
-	border: 1px solid rgba(59, 130, 246, 0.28);
-	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-	color: #ffffff;
-	font-weight: 600;
-	letter-spacing: 0.2px;
-	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.26);
-	transition: all 0.2s ease;
+.brand-logo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.brand-icon {
+	font-size: 20px;
+	color: #2563eb;
+}
+
+.brand-name {
+	font-size: 15px;
+	font-weight: 700;
+	color: #0f172a;
+	letter-spacing: -0.2px;
+}
+
+.new-chat-icon-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	border: none;
+	border-radius: 8px;
+	background: transparent;
+	color: #64748b;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+	outline: none;
+
+	.el-icon {
+		font-size: 16px;
+	}
 
 	&:hover {
-		transform: translateY(-1px);
-		color: #ffffff;
-		border-color: rgba(59, 130, 246, 0.4);
-		background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
-		box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32);
+		background: #e2e8f0;
+		color: #0f172a;
 	}
 }
 
-.history-section {
+/* Tab 切换 */
+.sidebar-tabs {
 	display: flex;
-	flex-direction: column;
-	margin-top: 8px;
-	padding-bottom: 8px;
-	border-bottom: 1px solid rgba(59, 130, 246, 0.08);
+	padding: 8px 8px 0;
+	gap: 4px;
+	flex-shrink: 0;
+	border-bottom: 1px solid #e2e8f0;
 }
 
-.history-title {
-	padding: 12px 12px 8px;
-	font-size: 11px;
-	font-weight: 600;
+.tab-btn {
+	flex: 1;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
+	height: 34px;
+	border: none;
+	border-radius: 8px 8px 0 0;
+	background: transparent;
 	color: #64748b;
-	text-transform: uppercase;
-	letter-spacing: 0.8px;
+	font-size: 12px;
+	font-weight: 500;
+	cursor: pointer;
+	transition: background 0.15s, color 0.15s;
+	outline: none;
+	border-bottom: 2px solid transparent;
+	margin-bottom: -1px;
+
+	.el-icon {
+		font-size: 14px;
+	}
+
+	&:hover:not(.active) {
+		background: #f1f5f9;
+		color: #334155;
+	}
+
+	&.active {
+		color: #2563eb;
+		font-weight: 600;
+		background: #fff;
+		border-bottom-color: #2563eb;
+	}
 }
 
-.history-list {
-	padding: 0 8px 4px;
-	max-height: 255px;
+/* 面板通用 */
+.panel {
+	flex: 1;
 	overflow-y: auto;
+	padding: 8px 8px 12px;
 	scrollbar-width: none;
-	-ms-overflow-style: none;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
 }
 
+.panel-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.panel-empty {
+	font-size: 12px;
+	color: #cbd5e1;
+	text-align: center;
+	padding: 32px 0;
+}
+
+/* 历史记录条目 */
 .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;
+	padding: 8px;
+	border-radius: 8px;
 	cursor: pointer;
-	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-	background: rgba(255, 255, 255, 0.6);
+	transition: background 0.15s;
+	margin-bottom: 1px;
 
 	&: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);
-	}
+		background: #f1f5f9;
 
-	&.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;
+		.item-del-btn {
+			opacity: 1;
 		}
 	}
 
-	&:hover .delete-btn {
-		opacity: 1;
+	&.active {
+		background: #eff6ff;
+
+		.item-icon {
+			color: #2563eb;
+		}
+
+		.item-title {
+			color: #1d4ed8;
+			font-weight: 600;
+		}
 	}
 }
 
-.history-main {
-	min-width: 0;
-	flex: 1;
+.item-icon {
+	font-size: 14px;
+	color: #94a3b8;
+	flex-shrink: 0;
 }
 
-.history-name {
-	font-size: 12px;
+.item-body {
+	flex: 1;
+	min-width: 0;
+}
+
+.item-title {
+	font-size: 13px;
 	font-weight: 500;
 	color: #1e293b;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	line-height: 1.4;
+}
+
+.item-time {
+	font-size: 11px;
+	color: #94a3b8;
+	margin-top: 1px;
+}
+
+.item-del-btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	border: none;
+	border-radius: 5px;
+	background: transparent;
+	color: #94a3b8;
+	cursor: pointer;
+	opacity: 0;
+	transition: opacity 0.15s, background 0.15s, color 0.15s;
+	flex-shrink: 0;
+	outline: none;
+
+	.el-icon {
+		font-size: 13px;
+	}
+
+	&:hover {
+		background: #fee2e2;
+		color: #ef4444;
+	}
+}
+
+/* 展开更多按钮 */
+.load-more-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
+	width: 100%;
+	height: 32px;
+	margin-top: 4px;
+	border: 1px dashed #cbd5e1;
+	border-radius: 8px;
+	background: transparent;
+	color: #64748b;
+	font-size: 12px;
+	cursor: pointer;
+	transition: border-color 0.15s, color 0.15s, background 0.15s;
+	outline: none;
+
+	.el-icon {
+		font-size: 12px;
+	}
+
+	&:hover {
+		border-color: #93c5fd;
+		color: #2563eb;
+		background: #eff6ff;
+	}
+}
+
+/* 工作空间树节点 */
+.tree-date-group {
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 4px;
+}
+
+.tree-date-label {
+	font-size: 11px;
+	font-weight: 600;
+	color: #94a3b8;
+	padding: 6px 4px 2px;
+	letter-spacing: 0.4px;
+	text-transform: uppercase;
+}
+
+.tree-flow-group {
 	margin-bottom: 2px;
 }
 
-.history-time {
-	font-size: 11px;
-	color: #94a3b8;
-}
-
-.workspace-section {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	margin-top: 8px;
-}
-
-.workspace-title {
-	padding: 4px 12px 8px;
-	font-size: 11px;
-	font-weight: 600;
-	color: #64748b;
-	text-transform: uppercase;
-	letter-spacing: 0.8px;
-}
-
-.workspace-tree-wrap {
-	flex: 1;
-	padding: 0 8px 12px;
-	overflow-y: auto;
-	scrollbar-width: none;
-	-ms-overflow-style: none;
-
-	&::-webkit-scrollbar {
-		display: none;
-	}
-
-	:deep(.el-tree) {
-		background: transparent;
-
-		.el-tree-node {
-			padding: 4px 0;
-		}
-
-		.el-tree-node__content {
-			height: 38px;
-			line-height: 38px;
-			border-radius: 8px;
-			margin: 2px 0;
-			backdrop-filter: blur(8px);
-			transition: all 0.2s ease;
-
-			&:hover {
-				border-width: 2px;
-				transform: translateX(2px);
-				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-			}
-		}
-
-		.el-tree-node.is-current > .el-tree-node__content {
-			border-width: 2px;
-			box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
-		}
-
-		.el-tree-node__expand-icon {
-			color: rgba(59, 130, 246, 0.7);
-		}
-	}
-
-	:deep(.level-date) .el-tree-node__content {
-		height: 42px;
-		background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(59, 130, 246, 0.05) 100%);
-		border: 1px solid rgba(59, 130, 246, 0.28);
-		font-weight: 600;
-	}
-
-	:deep(.level-flow) .el-tree-node__content {
-		margin-left: 8px;
-		background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.03) 100%);
-		border: 1px solid rgba(139, 92, 246, 0.18);
-	}
-
-	:deep(.level-file.image) .el-tree-node__content,
-	:deep(.level-file.jpg) .el-tree-node__content,
-	:deep(.level-file.png) .el-tree-node__content,
-	:deep(.level-file.gif) .el-tree-node__content {
-		margin-left: 16px;
-		background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.04) 100%);
-		border: 1px solid rgba(16, 185, 129, 0.15);
-	}
-
-	:deep(.level-file.video) .el-tree-node__content,
-	:deep(.level-file.mp4) .el-tree-node__content,
-	:deep(.level-file.webm) .el-tree-node__content {
-		margin-left: 16px;
-		background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(245, 158, 11, 0.04) 100%);
-		border: 1px solid rgba(245, 158, 11, 0.15);
-	}
-
-	:deep(.level-file.audio) .el-tree-node__content,
-	:deep(.level-file.mp3) .el-tree-node__content,
-	:deep(.level-file.wav) .el-tree-node__content {
-		margin-left: 16px;
-		background: linear-gradient(135deg, rgba(236, 72, 153, 0.18) 0%, rgba(236, 72, 153, 0.04) 100%);
-		border: 1px solid rgba(236, 72, 153, 0.15);
-	}
-
-	:deep(.level-file.text) .el-tree-node__content,
-	:deep(.level-file.md) .el-tree-node__content,
-	:deep(.level-file.txt) .el-tree-node__content,
-	:deep(.level-file.markdown) .el-tree-node__content {
-		margin-left: 16px;
-		background: linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(79, 70, 229, 0.04) 100%);
-		border: 1px solid rgba(79, 70, 229, 0.15);
-	}
-
-	:deep(.level-file:not(.image):not(.video):not(.audio):not(.text)) .el-tree-node__content {
-		margin-left: 16px;
-		background: linear-gradient(135deg, rgba(100, 116, 139, 0.15) 0%, rgba(100, 116, 139, 0.04) 100%);
-		border: 1px solid rgba(100, 116, 139, 0.15);
-	}
-}
-
-.tree-node {
+.tree-flow-label {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	width: 100%;
 	gap: 6px;
+	padding: 6px 8px;
+	border-radius: 6px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #475569;
 
-	.ellipsis {
+	.el-icon {
+		font-size: 13px;
+		color: #7c3aed;
+		flex-shrink: 0;
+	}
+
+	span {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		font-size: 13px;
-		font-weight: 500;
-		color: #1e293b;
 	}
+}
 
-	.tree-node-actions {
-		flex-shrink: 0;
+.tree-file-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 5px 8px 5px 24px;
+	border-radius: 6px;
+	cursor: pointer;
+	transition: background 0.15s;
 
-		.el-button {
-			font-size: 11px;
-			padding: 2px 4px;
-			margin: 0;
-			line-height: 1;
+	&:hover {
+		background: #f1f5f9;
+
+		.file-actions {
+			opacity: 1;
 		}
 	}
 }
+
+.file-type-icon {
+	font-size: 13px;
+	color: #64748b;
+	flex-shrink: 0;
+}
+
+.file-name {
+	flex: 1;
+	font-size: 12px;
+	color: #334155;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.file-actions {
+	display: flex;
+	gap: 2px;
+	opacity: 0;
+	transition: opacity 0.15s;
+	flex-shrink: 0;
+}
+
+.file-action-btn {
+	border: none;
+	background: transparent;
+	color: #3b82f6;
+	font-size: 11px;
+	cursor: pointer;
+	padding: 2px 4px;
+	border-radius: 4px;
+	outline: none;
+	transition: background 0.15s;
+
+	&:hover {
+		background: #dbeafe;
+	}
+}
 </style>