更新首页布局样式和逻辑
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -25,3 +25,4 @@ pnpm-debug.log*
|
||||
*.sln
|
||||
*.sw?
|
||||
/admin-ui.iml
|
||||
.gstack/
|
||||
|
||||
60
CLAUDE.md
60
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/`
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user