refactor(frontend): adopt GitHub-style file tree design

统一采用GitHub风格的UI设计:文件树标题改为'Code',调整缩进和悬停样式,移除视图切换按钮,使用GitHub配色变量。

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
2026-04-07 12:46:00 +08:00
parent e5fcde6940
commit 12ae077ac7
4 changed files with 40 additions and 86 deletions
+3 -34
View File
@@ -166,13 +166,6 @@ const isSelectedOfficeFile = computed(() => {
<button class="sidebar-toggle" @click="sidebarCollapsed = !sidebarCollapsed" :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'">
<svg v-if="!sidebarCollapsed" viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M4.5 3.5a.5.5 0 00-.707.707L6.586 7l-2.793 2.793a.5.5 0 10.707.707l3-3a.5.5 0 000-.707l-3-3z"/><path d="M9.5 3.5a.5.5 0 01.707.707L7.414 7l2.793 2.793a.5.5 0 01-.707.707l-3-3a.5.5 0 010-.707l3-3z"/></svg>
<svg v-else viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M11.5 3.5a.5.5 0 01.707.707L9.414 7l2.793 2.793a.5.5 0 01-.707.707l-3-3a.5.5 0 010-.707l3-3z"/><path d="M4.5 3.5a.5.5 0 00-.707.707L6.586 7l-2.793 2.793a.5.5 0 10.707.707l3-3a.5.5 0 000-.707l-3-3z"/></svg>
</button>
<button class="editor-toggle" @click="router.push('/')" title="返回编辑器">
<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
<path d="M2 2.5A1.5 1.5 0 013.5 1h9A1.5 1.5 0 0114 2.5v11a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 012 13.5v-11z"/>
<path fill="var(--app-bg)" d="M4 4h8v1H4zm0 2h8v1H4zm0 2h6v1H4zm0 2h8v1H4zm0 2h5v1H4z"/>
</svg>
<span class="toggle-label">编辑器</span>
</button>
<div class="breadcrumb-bar">
<span
@@ -281,7 +274,8 @@ const isSelectedOfficeFile = computed(() => {
min-width: 200px;
max-width: 400px;
height: 100%;
border-right: 1px solid var(--panel-border);
border-right: 1px solid var(--github-border);
background: var(--github-bg);
flex-shrink: 0;
overflow: hidden;
}
@@ -299,7 +293,7 @@ const isSelectedOfficeFile = computed(() => {
align-items: center;
gap: 8px;
padding: 8px 16px;
border-bottom: 1px solid var(--panel-border);
border-bottom: 1px solid var(--github-border);
min-height: 44px;
flex-shrink: 0;
}
@@ -324,31 +318,6 @@ const isSelectedOfficeFile = computed(() => {
border-color: var(--focus-ring);
}
.editor-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border: 1px solid var(--panel-border);
background: var(--app-bg);
color: var(--muted-text);
cursor: pointer;
border-radius: 6px;
font-size: 13px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.editor-toggle:hover {
color: var(--focus-ring);
border-color: var(--focus-ring);
background: var(--ghost-code-bg);
}
.toggle-label {
font-weight: 500;
}
.breadcrumb-bar {
flex: 1;
display: flex;