cirry/yurou
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

侧边栏样式调整

Browse Source
This commit is contained in:
cirry
2026-07-03 11:50:26 +08:00
parent 891cb7df54
commit a37bb0a894
3 changed files with 4 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -209,7 +209,7 @@ listen("menu-event", (event) => {
/>
<!-- Right: Editor area -->
<main class="flex-1 flex flex-col overflow-y-auto p-3">
<main class="flex-1 flex flex-col overflow-y-auto">
<MarkdownEditor
v-model="content"
placeholder="输入 Markdown 内容... 支持标题、粗体、斜体、代码块等 ✨"

4
src/components/DirectorySidebar.vue
View File

@@ -44,7 +44,7 @@ const rootEntry = computed<DirEntry | null>(() => {
});
// ---- sidebar view mode ----
type ViewMode = "folder" | "search" | "outline";
type ViewMode = "folder" | "search" | "outline" | "setting";
const activeView = ref<ViewMode>("folder");
const expanded = ref(true);
@@ -124,7 +124,7 @@ const showSettings = ref(false);
<!-- ===== Settings ===== -->
<button
class="p-2 rounded-md transition-colors mt-auto"
:class="activeView === 'outline' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
:class="activeView === 'setting' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
title="设置"
@click="showSettings = true"
>

151
src/components/MarkdownEditor.vue
View File

@@ -64,157 +64,8 @@ watch(
<template>
<div
class="flex flex-col flex-1 w-full border border-[#e0dbcf] bg-white shadow-2xl overflow-hidden"
class="flex flex-col flex-1 w-full border-[#e0dbcf] bg-white shadow-2xl overflow-y-auto"
>
<!-- Toolbar -->
<div
v-if="editor"
class="flex flex-wrap items-center gap-0.5 px-3 py-2 border-b border-[#e0dbcf] bg-[#f4f1eb]/80 backdrop-blur"
>
<!-- Headings -->
<button
v-for="level in ([1, 2, 3] as const)"
:key="'h' + level"
:class="[
'px-2.5 py-1.5 text-xs font-semibold rounded-md transition-colors',
editor.isActive('heading', { level })
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleHeading({ level }).run()"
>
H{{ level }}
</button>
<span class="w-px h-6 bg-[#d4cfc4] mx-1" />
<!-- Inline formatting -->
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('bold')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleBold().run()"
>
<i class="ri-bold"></i>
</button>
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('italic')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleItalic().run()"
>
<i class="ri-italic"></i>
</button>
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('strike')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleStrike().run()"
>
<i class="ri-strikethrough"></i>
</button>
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('code')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleCode().run()"
>
<i class="ri-code-line"></i>
</button>
<span class="w-px h-6 bg-[#d4cfc4] mx-1" />
<!-- Block elements -->
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('blockquote')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleBlockquote().run()"
>
<i class="ri-double-quotes-l"></i>
</button>
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('codeBlock')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleCodeBlock().run()"
>
<i class="ri-code-box-line"></i>
</button>
<span class="w-px h-6 bg-[#d4cfc4] mx-1" />
<!-- Lists -->
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('bulletList')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleBulletList().run()"
>
<i class="ri-list-unordered"></i>
</button>
<button
:class="[
'px-2.5 py-1.5 text-xs font-medium rounded-md transition-colors',
editor.isActive('orderedList')
? 'bg-[#bf6a3b] text-white'
: 'text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e]',
]"
@click="editor.chain().focus().toggleOrderedList().run()"
>
<i class="ri-list-ordered"></i>
</button>
<span class="w-px h-6 bg-[#d4cfc4] mx-1" />
<!-- Horizontal rule -->
<button
class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors"
@click="editor.chain().focus().setHorizontalRule().run()"
>
<i class="ri-separator"></i>
</button>
<span class="flex-1" />
<!-- Undo / Redo -->
<button
class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
:disabled="!editor.can().chain().focus().undo().run()"
@click="editor.chain().focus().undo().run()"
>
<i class="ri-arrow-go-back-line"></i>
</button>
<button
class="px-2.5 py-1.5 text-xs font-medium rounded-md text-[#5c574e] hover:bg-[#e0dbcf] hover:text-[#38342e] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
:disabled="!editor.can().chain().focus().redo().run()"
@click="editor.chain().focus().redo().run()"
>
<i class="ri-arrow-go-forward-line"></i>
</button>
</div>
<!-- Editor content -->
<EditorContent :editor="editor" class="tiptap-editor flex-1 flex flex-col" />
</div>