ydy0615/llm-in-text
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
统一采用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:
ydy0615
2026-04-07 12:46:00 +08:00
parent e5fcde6940
commit 12ae077ac7
4 changed files with 40 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/FileTree.vue
View File

@@ -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,

24
src/style.css
View File

@@ -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;

37
src/views/DocsView.vue
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;

42
src/views/EditorView.vue
View File

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