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

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>