侧边栏样式调整完成
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
{
|
{
|
||||||
"topic_20260630-144952_fd0584fe8f266d6a": 1782830992641
|
"topic_20260630-144952_fd0584fe8f266d6a": 1782830992641,
|
||||||
|
"topic_20260703-022850_50330b4eb93f116d": 1783045730616
|
||||||
}
|
}
|
||||||
@@ -12,5 +12,9 @@
|
|||||||
"topic_20260702-161756_b6c7f476849c7ee1": "auto",
|
"topic_20260702-161756_b6c7f476849c7ee1": "auto",
|
||||||
"topic_20260702-161832_f8157b81a77b9bfe": "auto",
|
"topic_20260702-161832_f8157b81a77b9bfe": "auto",
|
||||||
"topic_20260702-163743_d97b7189a52644d4": "auto",
|
"topic_20260702-163743_d97b7189a52644d4": "auto",
|
||||||
"topic_20260702-165156_738d9dd96d08e07c": "auto"
|
"topic_20260702-165156_738d9dd96d08e07c": "auto",
|
||||||
|
"topic_20260703-022850_50330b4eb93f116d": "auto",
|
||||||
|
"topic_20260703-025626_29ad0ca0ec1414e3": "auto",
|
||||||
|
"topic_20260703-031103_9a945dac33ad9fd9": "auto",
|
||||||
|
"topic_20260703-031922_1d2031ca5f2c0dd5": "auto"
|
||||||
}
|
}
|
||||||
@@ -12,5 +12,9 @@
|
|||||||
"topic_20260702-161756_b6c7f476849c7ee1": "打开的应用设置一个最小的高度是600…",
|
"topic_20260702-161756_b6c7f476849c7ee1": "打开的应用设置一个最小的高度是600…",
|
||||||
"topic_20260702-161832_f8157b81a77b9bfe": "左侧的工作目录,我希望除了名称之外…",
|
"topic_20260702-161832_f8157b81a77b9bfe": "左侧的工作目录,我希望除了名称之外…",
|
||||||
"topic_20260702-163743_d97b7189a52644d4": "tiptap-editor 里的区域…",
|
"topic_20260702-163743_d97b7189a52644d4": "tiptap-editor 里的区域…",
|
||||||
"topic_20260702-165156_738d9dd96d08e07c": "帮我引入@tiptap/markdo…"
|
"topic_20260702-165156_738d9dd96d08e07c": "帮我引入@tiptap/markdo…",
|
||||||
|
"topic_20260703-022850_50330b4eb93f116d": "侧边栏展开 的时候在131行的hea…",
|
||||||
|
"topic_20260703-025626_29ad0ca0ec1414e3": "第174行,用户选中的工作空间目录没…",
|
||||||
|
"topic_20260703-031103_9a945dac33ad9fd9": "添加一个重要的更新功能,现在侧边栏在…",
|
||||||
|
"topic_20260703-031922_1d2031ca5f2c0dd5": "我希望第126-228行的内容,在用…"
|
||||||
}
|
}
|
||||||
@@ -1,2 +1,2 @@
|
|||||||
[permissions]
|
[permissions]
|
||||||
allow = ["Bash(pnpm approve-builds:*)"]
|
allow = ["Bash(pnpm approve-builds:*)", "Edit"]
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from "vue";
|
import {ref, computed} from "vue";
|
||||||
import TreeEntry from "./TreeEntry.vue";
|
import TreeEntry from "./TreeEntry.vue";
|
||||||
|
|
||||||
interface DirEntry {
|
interface DirEntry {
|
||||||
@@ -27,34 +27,36 @@ const emit = defineEmits<{
|
|||||||
openFolder: [];
|
openFolder: [];
|
||||||
toggleFolder: [path: string];
|
toggleFolder: [path: string];
|
||||||
openFile: [path: string];
|
openFile: [path: string];
|
||||||
|
createFile: [];
|
||||||
|
createFolder: [];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
// Wrap the workspace root as a top-level tree node
|
||||||
|
const rootEntry = computed<DirEntry | null>(() => {
|
||||||
|
if (!props.folderPath) return null;
|
||||||
|
const name = props.folderPath.split(/[/\\]/).pop() || props.folderPath;
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
path: props.folderPath,
|
||||||
|
is_dir: true,
|
||||||
|
children: props.entries,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
// ---- sidebar view mode ----
|
// ---- sidebar view mode ----
|
||||||
type ViewMode = "folder" | "search" | "outline";
|
type ViewMode = "folder" | "search" | "outline";
|
||||||
const activeView = ref<ViewMode>("folder");
|
const activeView = ref<ViewMode>("folder");
|
||||||
const collapsed = ref(true);
|
const expanded = ref(true);
|
||||||
|
|
||||||
const viewLabels: Record<ViewMode, string> = {
|
|
||||||
folder: "文件",
|
|
||||||
search: "搜索",
|
|
||||||
outline: "大纲",
|
|
||||||
};
|
|
||||||
|
|
||||||
function switchView(view: ViewMode) {
|
function switchView(view: ViewMode) {
|
||||||
if (collapsed.value) {
|
if (activeView.value === view) {
|
||||||
collapsed.value = false;
|
expanded.value = !expanded.value;
|
||||||
activeView.value = view;
|
|
||||||
} else if (activeView.value === view) {
|
|
||||||
collapsed.value = true;
|
|
||||||
} else {
|
} else {
|
||||||
activeView.value = view;
|
activeView.value = view;
|
||||||
|
expanded.value = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function collapseSidebar() {
|
|
||||||
collapsed.value = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---- outline state ----
|
// ---- outline state ----
|
||||||
interface OutlineItem {
|
interface OutlineItem {
|
||||||
text: string;
|
text: string;
|
||||||
@@ -72,14 +74,14 @@ const headings = computed<OutlineItem[]>(() => {
|
|||||||
// Strip any remaining markdown formatting from the heading text
|
// Strip any remaining markdown formatting from the heading text
|
||||||
const text = match[2].replace(/\*{1,3}|_{1,3}|`+|~~|\[([^\]]*)\]\([^)]*\)/g, (_, linkText) => linkText || "").trim();
|
const text = match[2].replace(/\*{1,3}|_{1,3}|`+|~~|\[([^\]]*)\]\([^)]*\)/g, (_, linkText) => linkText || "").trim();
|
||||||
if (text) {
|
if (text) {
|
||||||
result.push({ text, level, id: `heading-${result.length}` });
|
result.push({text, level, id: `heading-${result.length}`});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
});
|
});
|
||||||
|
|
||||||
function onHeadingClick(item: OutlineItem) {
|
function onHeadingClick(item: OutlineItem) {
|
||||||
emit("headingClick", { text: item.text, level: item.level });
|
emit("headingClick", {text: item.text, level: item.level});
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- settings modal ----
|
// ---- settings modal ----
|
||||||
@@ -88,14 +90,10 @@ const showSettings = ref(false);
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<aside
|
<aside
|
||||||
:class="[
|
:class="['flex flex-row border-r border-[#e8e4da] bg-[#f4f1eb]/80 transition-all duration-300 ease-in-out overflow-hidden shrink-0', expanded ? 'w-72' : 'w-12']"
|
||||||
'flex flex-col border-r border-[#e8e4da] bg-[#f4f1eb]/80 transition-all duration-300 ease-in-out overflow-hidden shrink-0',
|
|
||||||
collapsed ? 'w-12' : 'w-56',
|
|
||||||
]"
|
|
||||||
>
|
>
|
||||||
<!-- ============ COLLAPSED: icon bar ============ -->
|
<!-- ============ Icon bar ============ -->
|
||||||
<template v-if="collapsed">
|
<div class="w-12 shrink-0 flex flex-col items-center gap-1 py-3">
|
||||||
<div class="flex flex-col items-center gap-1 py-3 flex-1">
|
|
||||||
<!-- Folder -->
|
<!-- Folder -->
|
||||||
<button
|
<button
|
||||||
class="p-2 rounded-md transition-colors"
|
class="p-2 rounded-md transition-colors"
|
||||||
@@ -123,37 +121,31 @@ const showSettings = ref(false);
|
|||||||
>
|
>
|
||||||
<i class="ri-menu-line text-base"></i>
|
<i class="ri-menu-line text-base"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<!-- ===== Settings ===== -->
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- ============ EXPANDED: full sidebar ============ -->
|
|
||||||
<template v-else>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="flex items-center justify-between px-3 py-3 border-b border-[#e8e4da]">
|
|
||||||
<span class="text-xs font-semibold text-[#8c877d] uppercase tracking-wider">
|
|
||||||
{{ viewLabels[activeView] }}
|
|
||||||
</span>
|
|
||||||
<button
|
<button
|
||||||
class="p-1 rounded-md text-[#8c877d] hover:text-[#38342e] hover:bg-[#e0dbcf] transition-colors"
|
class="p-2 rounded-md transition-colors mt-auto"
|
||||||
title="折叠侧边栏"
|
:class="activeView === 'outline' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
|
||||||
@click="collapseSidebar"
|
title="设置"
|
||||||
|
@click="showSettings = true"
|
||||||
>
|
>
|
||||||
<i class="ri-arrow-left-double-line text-base"></i>
|
<i class="ri-settings-line text-sm"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ============ Expanded panel ============ -->
|
||||||
|
<div v-show="expanded" class="flex-1 flex flex-col overflow-hidden border-l border-[#e8e4da]">
|
||||||
<!-- ===== FOLDER VIEW ===== -->
|
<!-- ===== FOLDER VIEW ===== -->
|
||||||
<div v-if="activeView === 'folder'" class="flex flex-col flex-1 overflow-hidden">
|
<div v-if="activeView === 'folder'" class="flex flex-col flex-1 overflow-hidden">
|
||||||
<!-- File tree -->
|
<!-- File tree -->
|
||||||
<div class="flex-1 overflow-y-auto px-2 py-2 space-y-0.5">
|
<div class="flex-1 overflow-y-auto px-2 py-2 space-y-0.5">
|
||||||
<!-- Folder path indicator -->
|
<!-- Workspace root as top-level tree node -->
|
||||||
<div
|
<TreeEntry
|
||||||
v-if="folderPath"
|
v-if="rootEntry"
|
||||||
class="px-2 py-1 text-xs text-[#b8b3a8] truncate mb-2 border-b border-[#e8e4da] pb-2"
|
:entry="rootEntry"
|
||||||
:title="folderPath"
|
:depth="0"
|
||||||
>
|
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
||||||
📁 {{ folderPath.split(/[/\\]/).pop() || folderPath }}
|
@open-file="(path: string) => emit('openFile', path)"
|
||||||
</div>
|
/>
|
||||||
|
|
||||||
<!-- Empty state -->
|
<!-- Empty state -->
|
||||||
<div
|
<div
|
||||||
@@ -169,15 +161,6 @@ const showSettings = ref(false);
|
|||||||
打开文件夹
|
打开文件夹
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TreeEntry
|
|
||||||
v-for="entry in entries"
|
|
||||||
:key="entry.path"
|
|
||||||
:entry="entry"
|
|
||||||
:depth="0"
|
|
||||||
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
|
||||||
@open-file="(path: string) => emit('openFile', path)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -209,7 +192,7 @@ const showSettings = ref(false);
|
|||||||
</template>
|
</template>
|
||||||
<template v-else-if="headings.length === 0">
|
<template v-else-if="headings.length === 0">
|
||||||
<p class="text-xs text-[#b8b3a8] px-2 py-4 text-center leading-relaxed">
|
<p class="text-xs text-[#b8b3a8] px-2 py-4 text-center leading-relaxed">
|
||||||
暂无标题<br />使用 H1-H3 标题<br />自动生成大纲
|
暂无标题<br/>使用 H1-H3 标题<br/>自动生成大纲
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
@@ -241,18 +224,7 @@ const showSettings = ref(false);
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ===== BOTTOM: Settings ===== -->
|
|
||||||
<div class="border-t border-[#e8e4da] px-3 py-2">
|
|
||||||
<button
|
|
||||||
class="w-full flex items-center gap-2 px-2 py-1.5 text-xs text-[#8c877d] hover:text-[#38342e] hover:bg-[#ede8de] rounded-md transition-colors"
|
|
||||||
@click="showSettings = true"
|
|
||||||
>
|
|
||||||
<i class="ri-settings-line text-sm"></i>
|
|
||||||
设置
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<!-- ===== SETTINGS MODAL ===== -->
|
<!-- ===== SETTINGS MODAL ===== -->
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ const emit = defineEmits<{
|
|||||||
openFile: [path: string];
|
openFile: [path: string];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const expanded = ref(false);
|
const expanded = ref(true);
|
||||||
|
|
||||||
// Auto-expand when children are loaded for the first time
|
// Auto-expand when children are loaded for the first time
|
||||||
watch(
|
watch(
|
||||||
|
|||||||
Reference in New Issue
Block a user