red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新首页布局样式和逻辑

Browse Source
This commit is contained in:
吴思建
2026-06-17 09:55:30 +08:00
parent 195d219f91
commit 27f35a5679
4 changed files with 432 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -25,3 +25,4 @@ pnpm-debug.log*
*.sln
*.sw?
/admin-ui.iml
.gstack/

60
CLAUDE.md
View File

@@ -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/`

12
src/views/home/components/InputBar.vue
View File

@@ -32,20 +32,16 @@
<div class="input-toolbar">
<div class="toolbar-left">
<!-- 上传附件 -->
<el-tooltip content="上传文件" placement="top">
<button class="tool-icon-btn" @click="handleAttachment">
<button class="tool-icon-btn" title="上传文件" @click="handleAttachment">
<el-icon><Paperclip /></el-icon>
</button>
</el-tooltip>
<!-- 选择技能 -->
<el-dropdown trigger="click" placement="top-start" @command="handleSkillSelect">
<el-tooltip content="选择技能" placement="top">
<button class="tool-icon-btn" :class="{ active: selectedSkill !== 'default' }">
<button class="tool-icon-btn" :class="{ active: selectedSkill !== 'default' }" title="选择技能">
<el-icon><MagicStick /></el-icon>
<span class="tool-label">技能</span>
</button>
</el-tooltip>
<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;
};

633
src/views/home/components/Sidebar.vue
View File

@@ -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;
}
.history-list {
padding: 0 8px 4px;
max-height: 255px;
&:hover:not(.active) {
background: #f1f5f9;
color: #334155;
}
&.active {
color: #2563eb;
font-weight: 600;
background: #fff;
border-bottom-color: #2563eb;
}
}
/* 面板通用 */
.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;
}
}
&:hover .delete-btn {
.item-del-btn {
opacity: 1;
}
}
.history-main {
min-width: 0;
flex: 1;
&.active {
background: #eff6ff;
.item-icon {
color: #2563eb;
}
.history-name {
font-size: 12px;
font-weight: 500;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
.item-title {
color: #1d4ed8;
font-weight: 600;
}
}
}
.history-time {
font-size: 11px;
.item-icon {
font-size: 14px;
color: #94a3b8;
flex-shrink: 0;
}
.workspace-section {
.item-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
margin-top: 8px;
min-width: 0;
}
.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 {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 6px;
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.item-title {
font-size: 13px;
font-weight: 500;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.tree-node-actions {
flex-shrink: 0;
.el-button {
.item-time {
font-size: 11px;
padding: 2px 4px;
margin: 0;
line-height: 1;
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;
}
.tree-flow-label {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #475569;
.el-icon {
font-size: 13px;
color: #7c3aed;
flex-shrink: 0;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.tree-file-item {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px 5px 24px;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
&: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>