From 12ae077ac7a204d84dc0b0982d127bb0b0b0b1ec Mon Sep 17 00:00:00 2001
From: ydy0615 <allenyuan410@gmail.com>
Date: Tue, 7 Apr 2026 12:46:00 +0800
Subject: [PATCH] refactor(frontend): adopt GitHub-style file tree design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/components/FileTree.vue | 23 +++++++++++---------
 src/style.css               | 24 +++++++++++++++++++++
 src/views/DocsView.vue      | 37 +++-----------------------------
 src/views/EditorView.vue    | 42 -------------------------------------
 4 files changed, 40 insertions(+), 86 deletions(-)

diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index bf84580..0d119c7 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -99,8 +99,8 @@ function getIconClass(type, name) {
 
 <template>
   <div class="file-tree">
-    <div class="tree-header">
-      <span class="tree-title">文件</span>
+  <div class="tree-header">
+      <span class="tree-title">Code</span>
       <div class="tree-header-actions">
         <button class="header-action-btn" title="新建文件" @click="emit('create-file', null)">
           <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor"><path d="M3.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H3.75zM3 1.75C3 .784 3.784 0 4.75 0h5.339c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113 16H4.75A1.75 1.75 0 013 14.25V1.75z"/><path d="M8.5 4V1.5H10a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H9a.5.5 0 01-.5-.5zM6 8.5a.5.5 0 01.5-.5h3a.5.5 0 010 1h-3a.5.5 0 01-.5-.5zm.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z"/></svg>
@@ -221,7 +221,8 @@ export const TreeNodeItem = {
     return () => {
       const node = props.node
       const children = node.type === 'folder' ? (node.children || []) : []
-      const paddingLeft = `${props.level * 16 + 8}px`
+  // GitHub-style indentation: 16px per level
+  const paddingLeft = `${props.level * 16 + 16}px`
 
       const nodeVNode = h('div', {
         class: ['tree-node', { selected: isSelected(), clipped: isClipped() }],
@@ -337,16 +338,17 @@ export const TreeNodeItem = {
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  border-bottom: 1px solid var(--panel-border);
-  min-height: 40px;
+  height: 40px;
+  border-bottom: 1px solid var(--github-border);
   flex-shrink: 0;
+  background: var(--github-bg);
 }
 
 .tree-title {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
-  color: var(--muted-text);
+  color: var(--github-text-secondary);
   letter-spacing: 0.05em;
 }
 
@@ -424,7 +426,8 @@ export const TreeNodeItem = {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 2px 8px;
+  height: 28px;
+  padding: 0 8px;
   cursor: pointer;
   font-size: 13px;
   line-height: 28px;
@@ -434,12 +437,12 @@ export const TreeNodeItem = {
 }
 
 .tree-node:hover {
-  background: var(--ghost-code-bg);
+  background: var(--github-hover);
 }
 
 .tree-node.selected {
-  background: var(--focus-ring);
-  color: #fff;
+  background: var(--github-selected);
+  color: var(--github-text);
 }
 
 .tree-node.selected .chevron,
diff --git a/src/style.css b/src/style.css
index 4b5b5b7..b14cd14 100644
--- a/src/style.css
+++ b/src/style.css
@@ -72,6 +72,30 @@
   --crepe-color-inline-area: #cacaca;
 }
 
+/* GitHub-like light tokens (used by DocsView.gitHub styled components) */
+:root {
+  --github-bg: #ffffff;
+  --github-border: #d0d7de;
+  --github-text: #24292f;
+  --github-text-secondary: #57606a;
+  --github-accent: #54aeff;
+  --github-hover: #f6f8fa;
+  --github-selected: #ddf4ff;
+  --github-code-bg: #f6f8fa;
+}
+
+/* Dark theme variants for GitHub-like tokens. Keep parity with project colors. */
+:root[data-theme='dark'] {
+  --github-bg: #0f1117;
+  --github-border: #2f3644;
+  --github-text: #e5e7eb;
+  --github-text-secondary: #a9b0bd;
+  --github-accent: #58a6ff;
+  --github-hover: #1b2130;
+  --github-selected: #1e2a4c;
+  --github-code-bg: #111827;
+}
+
 :root[data-theme='dark'] {
   color-scheme: dark;
   --app-bg: #0f1117;
diff --git a/src/views/DocsView.vue b/src/views/DocsView.vue
index 37d6f87..a69fe84 100644
--- a/src/views/DocsView.vue
+++ b/src/views/DocsView.vue
@@ -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;
diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
index 5737a8e..9710134 100644
--- a/src/views/EditorView.vue
+++ b/src/views/EditorView.vue
@@ -1,9 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import { defineAsyncComponent } from 'vue'
-import { useRouter } from 'vue-router'
 
-const router = useRouter()
 const MilkdownEditor = defineAsyncComponent(() => import('../components/MilkdownEditor.vue'))
 
 const markdown = ref('')
@@ -11,14 +9,6 @@ const markdown = ref('')
 
 <template>
   <div class="editor-view">
-    <div class="editor-toolbar">
-      <button class="docs-toggle" @click="router.push('/docs')" title="切换到文档模式">
-        <svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
-          <path d="M0 2.5A1.5 1.5 0 011.5 1h2.793a.5.5 0 01.353.146l1.5 1.5a.5.5 0 00.354.146H13.5A1.5 1.5 0 0115 4.5v7.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 12v-9.5z"/>
-        </svg>
-        <span class="toggle-label">文档</span>
-      </button>
-    </div>
     <MilkdownEditor v-model:markdown="markdown" />
   </div>
 </template>
@@ -31,36 +21,4 @@ const markdown = ref('')
   display: flex;
   flex-direction: column;
 }
-
-.editor-toolbar {
-  position: absolute;
-  top: 8px;
-  right: 16px;
-  z-index: 10;
-}
-
-.docs-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  border: 1px solid var(--panel-border);
-  background: var(--app-bg);
-  color: var(--muted-text);
-  cursor: pointer;
-  border-radius: 6px;
-  font-size: 13px;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.docs-toggle:hover {
-  color: var(--focus-ring);
-  border-color: var(--focus-ring);
-  background: var(--ghost-code-bg);
-}
-
-.toggle-label {
-  font-weight: 500;
-}
 </style>