Skip to content

feat: add custom panel for editer #1082

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanglbme merged 1 commit into from
Oct 19, 2025
Merged

feat: add custom panel for editer #1082

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 3 additions & 78 deletions apps/web/src/components/editor/RightSlider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,12 @@ import {
fontSizeOptions,
legendOptions,
themeOptions,
widthOptions,
} from '@md/shared/configs'
import { Moon, Sun, X } from 'lucide-vue-next'
import { X } from 'lucide-vue-next'
import PickColors from 'vue-pick-colors'
import { useDisplayStore, useStore } from '@/stores'
import { useStore } from '@/stores'

const store = useStore()
const displayStore = useDisplayStore()

// 控制是否启用动画
const enableAnimation = ref(false)
Expand All @@ -32,11 +30,7 @@ watch(() => store.isMobile, () => {
enableAnimation.value = false
})

const { isDark, primaryColor } = storeToRefs(store)

function customStyle() {
displayStore.toggleShowCssEditor()
}
const { primaryColor } = storeToRefs(store)

const isOpen = ref(false)

Expand Down Expand Up @@ -282,75 +276,6 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
</Button>
</div>
</div>
<div class="space-y-2">
<h2>自定义 CSS 面板</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': displayStore.isShowCssEditor,
}" @click="!displayStore.isShowCssEditor && customStyle()"
>
开启
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
}" @click="displayStore.isShowCssEditor && customStyle()"
>
关闭
</Button>
</div>
</div>
<div class="space-y-2">
<h2>编辑区位置</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': store.isEditOnLeft,
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
>
左侧
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !store.isEditOnLeft,
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
>
右侧
</Button>
</div>
</div>
<div class="space-y-2">
<h2>预览模式</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': store.previewWidth === value,
}" @click="store.previewWidthChanged(value)"
>
{{ label }}
</Button>
</div>
</div>
<div class="space-y-2">
<h2>模式</h2>
<div class="grid grid-cols-5 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !isDark,
}" @click="store.toggleDark(false)"
>
<Sun class="h-4 w-4" />
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': isDark,
}" @click="store.toggleDark(true)"
>
<Moon class="h-4 w-4" />
</Button>
</div>
</div>
<div class="space-y-2">
<h2>样式配置</h2>
<Button variant="destructive" @click="store.resetStyleConfirm">
Expand Down
96 changes: 96 additions & 0 deletions apps/web/src/components/editor/ThemeCustomizer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<script setup lang="ts">
import { widthOptions } from '@md/shared/configs'
import { Moon, Sun } from 'lucide-vue-next'
import { useDisplayStore, useStore } from '@/stores'

const store = useStore()
const displayStore = useDisplayStore()

const { isDark } = storeToRefs(store)

function customStyle() {
displayStore.toggleShowCssEditor()
}
</script>

<template>
<div class="theme-customizer space-y-4">
<div class="space-y-2 hidden sm:block">
<h2 class="text-sm font-medium">
编辑区位置
</h2>
<div class="grid grid-cols-2 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': store.isEditOnLeft,
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
>
左侧
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !store.isEditOnLeft,
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
>
右侧
</Button>
</div>
</div>
<div class="space-y-2 hidden sm:block">
<h2 class="text-sm font-medium">
预览模式
</h2>
<div class="grid grid-cols-2 justify-items-center gap-2">
<Button
v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': store.previewWidth === value,
}" @click="store.previewWidthChanged(value)"
>
{{ label }}
</Button>
</div>
</div>
<div class="space-y-2">
<h2 class="text-sm font-medium">
自定义 CSS 面板
</h2>
<div class="grid grid-cols-2 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': displayStore.isShowCssEditor,
}" @click="!displayStore.isShowCssEditor && customStyle()"
>
开启
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
}" @click="displayStore.isShowCssEditor && customStyle()"
>
关闭
</Button>
</div>
</div>
<div class="space-y-2">
<h2 class="text-sm font-medium">
模式
</h2>
<div class="grid grid-cols-2 justify-items-center gap-2">
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': !isDark,
}" @click="store.toggleDark(false)"
>
<Sun class="h-4 w-4" />
</Button>
<Button
class="w-full" variant="outline" :class="{
'border-black dark:border-white border-2': isDark,
}" @click="store.toggleDark(true)"
>
<Moon class="h-4 w-4" />
</Button>
</div>
</div>
</div>
</template>
14 changes: 13 additions & 1 deletion apps/web/src/components/editor/editor-header/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ChevronDownIcon, Menu, Settings } from 'lucide-vue-next'
import { ChevronDownIcon, Menu, Paintbrush, Settings } from 'lucide-vue-next'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { useDisplayStore, useStore } from '@/stores'
import { addPrefix, generatePureHTML, processClipboardContent } from '@/utils'
import FormatDropdown from './FormatDropdown.vue'
Expand Down Expand Up @@ -265,6 +266,17 @@ async function copy() {
<!-- 文章信息（移动端隐藏） -->
<PostInfo class="hidden md:inline-flex" />

<Popover>
<PopoverTrigger as-child>
<Button variant="outline" size="icon" class="mr-1">
<Paintbrush class="size-4" />
</Button>
</PopoverTrigger>
<PopoverContent align="end">
<ThemeCustomizer />
</PopoverContent>
</Popover>

<!-- 设置按钮 -->
<Button
variant="outline"
Expand Down