Skip to content

Commit ab480a8

Browse files
YangFongYangFong
authored
feat: add custom panel for editer (#1082)
1 parent 438e08f commit ab480a8

3 files changed

Lines changed: 112 additions & 79 deletions

File tree

‎apps/web/src/components/editor/RightSlider.vue‎

Lines changed: 3 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ import {
77
fontSizeOptions,
88
legendOptions,
99
themeOptions,
10-
widthOptions,
1110
} from '@md/shared/configs'
12-
import { Moon, Sun, X } from 'lucide-vue-next'
11+
import { X } from 'lucide-vue-next'
1312
import PickColors from 'vue-pick-colors'
14-
import { useDisplayStore, useStore } from '@/stores'
13+
import { useStore } from '@/stores'
1514
1615
const store = useStore()
17-
const displayStore = useDisplayStore()
1816
1917
// 控制是否启用动画
2018
const enableAnimation = ref(false)
@@ -32,11 +30,7 @@ watch(() => store.isMobile, () => {
3230
enableAnimation.value = false
3331
})
3432
35-
const { isDark, primaryColor } = storeToRefs(store)
36-
37-
function customStyle() {
38-
displayStore.toggleShowCssEditor()
39-
}
33+
const { primaryColor } = storeToRefs(store)
4034
4135
const isOpen = ref(false)
4236
@@ -282,75 +276,6 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
282276
</Button>
283277
</div>
284278
</div>
285-
<div class="space-y-2">
286-
<h2>自定义 CSS 面板</h2>
287-
<div class="grid grid-cols-5 justify-items-center gap-2">
288-
<Button
289-
class="w-full" variant="outline" :class="{
290-
'border-black dark:border-white border-2': displayStore.isShowCssEditor,
291-
}" @click="!displayStore.isShowCssEditor && customStyle()"
292-
>
293-
开启
294-
</Button>
295-
<Button
296-
class="w-full" variant="outline" :class="{
297-
'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
298-
}" @click="displayStore.isShowCssEditor && customStyle()"
299-
>
300-
关闭
301-
</Button>
302-
</div>
303-
</div>
304-
<div class="space-y-2">
305-
<h2>编辑区位置</h2>
306-
<div class="grid grid-cols-5 justify-items-center gap-2">
307-
<Button
308-
class="w-full" variant="outline" :class="{
309-
'border-black dark:border-white border-2': store.isEditOnLeft,
310-
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
311-
>
312-
左侧
313-
</Button>
314-
<Button
315-
class="w-full" variant="outline" :class="{
316-
'border-black dark:border-white border-2': !store.isEditOnLeft,
317-
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
318-
>
319-
右侧
320-
</Button>
321-
</div>
322-
</div>
323-
<div class="space-y-2">
324-
<h2>预览模式</h2>
325-
<div class="grid grid-cols-5 justify-items-center gap-2">
326-
<Button
327-
v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
328-
'border-black dark:border-white border-2': store.previewWidth === value,
329-
}" @click="store.previewWidthChanged(value)"
330-
>
331-
{{ label }}
332-
</Button>
333-
</div>
334-
</div>
335-
<div class="space-y-2">
336-
<h2>模式</h2>
337-
<div class="grid grid-cols-5 justify-items-center gap-2">
338-
<Button
339-
class="w-full" variant="outline" :class="{
340-
'border-black dark:border-white border-2': !isDark,
341-
}" @click="store.toggleDark(false)"
342-
>
343-
<Sun class="h-4 w-4" />
344-
</Button>
345-
<Button
346-
class="w-full" variant="outline" :class="{
347-
'border-black dark:border-white border-2': isDark,
348-
}" @click="store.toggleDark(true)"
349-
>
350-
<Moon class="h-4 w-4" />
351-
</Button>
352-
</div>
353-
</div>
354279
<div class="space-y-2">
355280
<h2>样式配置</h2>
356281
<Button variant="destructive" @click="store.resetStyleConfirm">

‎apps/web/src/components/editor/ThemeCustomizer.vue‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<script setup lang="ts">
2+
import { widthOptions } from '@md/shared/configs'
3+
import { Moon, Sun } from 'lucide-vue-next'
4+
import { useDisplayStore, useStore } from '@/stores'
5+
6+
const store = useStore()
7+
const displayStore = useDisplayStore()
8+
9+
const { isDark } = storeToRefs(store)
10+
11+
function customStyle() {
12+
displayStore.toggleShowCssEditor()
13+
}
14+
</script>
15+
16+
<template>
17+
<div class="theme-customizer space-y-4">
18+
<div class="space-y-2 hidden sm:block">
19+
<h2 class="text-sm font-medium">
20+
编辑区位置
21+
</h2>
22+
<div class="grid grid-cols-2 justify-items-center gap-2">
23+
<Button
24+
class="w-full" variant="outline" :class="{
25+
'border-black dark:border-white border-2': store.isEditOnLeft,
26+
}" @click="!store.isEditOnLeft && store.toggleEditOnLeft()"
27+
>
28+
左侧
29+
</Button>
30+
<Button
31+
class="w-full" variant="outline" :class="{
32+
'border-black dark:border-white border-2': !store.isEditOnLeft,
33+
}" @click="store.isEditOnLeft && store.toggleEditOnLeft()"
34+
>
35+
右侧
36+
</Button>
37+
</div>
38+
</div>
39+
<div class="space-y-2 hidden sm:block">
40+
<h2 class="text-sm font-medium">
41+
预览模式
42+
</h2>
43+
<div class="grid grid-cols-2 justify-items-center gap-2">
44+
<Button
45+
v-for="{ label, value } in widthOptions" :key="value" class="w-full" variant="outline" :class="{
46+
'border-black dark:border-white border-2': store.previewWidth === value,
47+
}" @click="store.previewWidthChanged(value)"
48+
>
49+
{{ label }}
50+
</Button>
51+
</div>
52+
</div>
53+
<div class="space-y-2">
54+
<h2 class="text-sm font-medium">
55+
自定义 CSS 面板
56+
</h2>
57+
<div class="grid grid-cols-2 justify-items-center gap-2">
58+
<Button
59+
class="w-full" variant="outline" :class="{
60+
'border-black dark:border-white border-2': displayStore.isShowCssEditor,
61+
}" @click="!displayStore.isShowCssEditor && customStyle()"
62+
>
63+
开启
64+
</Button>
65+
<Button
66+
class="w-full" variant="outline" :class="{
67+
'border-black dark:border-white border-2': !displayStore.isShowCssEditor,
68+
}" @click="displayStore.isShowCssEditor && customStyle()"
69+
>
70+
关闭
71+
</Button>
72+
</div>
73+
</div>
74+
<div class="space-y-2">
75+
<h2 class="text-sm font-medium">
76+
模式
77+
</h2>
78+
<div class="grid grid-cols-2 justify-items-center gap-2">
79+
<Button
80+
class="w-full" variant="outline" :class="{
81+
'border-black dark:border-white border-2': !isDark,
82+
}" @click="store.toggleDark(false)"
83+
>
84+
<Sun class="h-4 w-4" />
85+
</Button>
86+
<Button
87+
class="w-full" variant="outline" :class="{
88+
'border-black dark:border-white border-2': isDark,
89+
}" @click="store.toggleDark(true)"
90+
>
91+
<Moon class="h-4 w-4" />
92+
</Button>
93+
</div>
94+
</div>
95+
</div>
96+
</template>

‎apps/web/src/components/editor/editor-header/index.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
2-
import { ChevronDownIcon, Menu, Settings } from 'lucide-vue-next'
2+
import { ChevronDownIcon, Menu, Paintbrush, Settings } from 'lucide-vue-next'
3+
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
34
import { useDisplayStore, useStore } from '@/stores'
45
import { addPrefix, generatePureHTML, processClipboardContent } from '@/utils'
56
import FormatDropdown from './FormatDropdown.vue'
@@ -265,6 +266,17 @@ async function copy() {
265266
<!-- 文章信息（移动端隐藏） -->
266267
<PostInfo class="hidden md:inline-flex" />
267268

269+
<Popover>
270+
<PopoverTrigger as-child>
271+
<Button variant="outline" size="icon" class="mr-1">
272+
<Paintbrush class="size-4" />
273+
</Button>
274+
</PopoverTrigger>
275+
<PopoverContent align="end">
276+
<ThemeCustomizer />
277+
</PopoverContent>
278+
</Popover>
279+
268280
<!-- 设置按钮 -->
269281
<Button
270282
variant="outline"

0 commit comments

Comments
 (0)