Skip to content

Commit 9d47f7a

Browse files
zeevennzeevenn
authored
style: mobile adaptation (#986)
1 parent 4456234 commit 9d47f7a

18 files changed

+797
-308
lines changed

‎apps/web/src/components/CodemirrorEditor/CssEditor.vue‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,22 @@ import { useDisplayStore, useStore } from '@/stores'
55
const store = useStore()
66
const displayStore = useDisplayStore()
77
8+
// 控制是否启用动画
9+
const enableAnimation = ref(false)
10+
11+
// 监听 CssEditor 开关状态变化
12+
watch(() => displayStore.isShowCssEditor, () => {
13+
if (store.isMobile) {
14+
// 在移动端，用户操作时启用动画
15+
enableAnimation.value = true
16+
}
17+
})
18+
19+
// 监听设备类型变化，重置动画状态
20+
watch(() => store.isMobile, () => {
21+
enableAnimation.value = false
22+
})
23+
824
const isOpenEditDialog = ref(false)
925
const editInputVal = ref(``)
1026
const tabHistory = ref([``, store.cssContentConfig.active])
@@ -103,8 +119,37 @@ function tabChanged(tabName: string | number) {
103119
</script>
104120

105121
<template>
122+
<!-- 移动端遮罩层 -->
123+
<div
124+
v-if="store.isMobile && displayStore.isShowCssEditor"
125+
class="fixed inset-0 bg-black/50 z-40"
126+
@click="displayStore.isShowCssEditor = false"
127+
/>
128+
106129
<transition enter-active-class="bounceInRight">
107-
<div v-show="displayStore.isShowCssEditor" class="cssEditor-wrapper h-full flex flex-col border-l-2 border-gray/50">
130+
<div
131+
v-show="displayStore.isShowCssEditor"
132+
class="cssEditor-wrapper h-full flex flex-col mobile-css-editor"
133+
:class="{
134+
// 移动端样式
135+
'fixed top-0 right-0 w-full h-full z-100 bg-background border-l shadow-lg': store.isMobile,
136+
'animate': store.isMobile && enableAnimation,
137+
// 桌面端样式
138+
'border-l-2 flex-1 order-2 border-gray/50': !store.isMobile,
139+
}"
140+
:style="{
141+
transform: store.isMobile ? (displayStore.isShowCssEditor ? 'translateX(0)' : 'translateX(100%)') : undefined,
142+
}"
143+
>
144+
<!-- 移动端标题栏 -->
145+
<div v-if="store.isMobile" class="sticky top-0 z-10 flex items-center justify-between px-4 py-3 border-b mb-2 bg-background">
146+
<h2 class="text-lg font-semibold">
147+
自定义 CSS
148+
</h2>
149+
<Button variant="ghost" size="sm" @click="displayStore.isShowCssEditor = false">
150+
<X class="h-4 w-4" />
151+
</Button>
152+
</div>
108153
<Tabs
109154
v-model="store.cssContentConfig.active"
110155
@update:model-value="tabChanged"
@@ -200,6 +245,12 @@ function tabChanged(tabName: string | number) {
200245
</template>
201246

202247
<style lang="less" scoped>
248+
/* 移动端CSS编辑器动画 - 只有添加了 animate 类才启用 */
249+
.mobile-css-editor.animate {
250+
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
251+
}
252+
253+
/* 桌面端的bounceInRight动画 */
203254
.bounceInRight {
204255
animation-name: bounceInRight;
205256
animation-duration: 1s;

‎apps/web/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function onRedirect(url: string) {
4141
style="width: 40%"
4242
>
4343
</div>
44-
<DialogFooter class="sm:justify-evenly">
44+
<DialogFooter class="sm:justify-evenly flex flex-wrap gap-2">
4545
<Button
4646
v-for="link in links"
4747
:key="link.url"

‎apps/web/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,61 @@
11
<script setup lang="ts">
22
import { ClipboardPasteIcon, Contact2Icon, CopyIcon, Redo2Icon, TableIcon, Undo2Icon, UploadCloudIcon } from 'lucide-vue-next'
33
4+
const props = withDefaults(defineProps<{
5+
asSub?: boolean
6+
}>(), {
7+
asSub: false,
8+
})
9+
10+
const { asSub } = toRefs(props)
11+
412
const { toggleShowInsertFormDialog, toggleShowUploadImgDialog, toggleShowInsertMpCardDialog } = useDisplayStore()
513
614
const { copyToClipboard, pasteFromClipboard, undo, redo } = useStore()
715
</script>
816

917
<template>
10-
<MenubarMenu>
18+
<!-- 作为 MenubarSub 使用 -->
19+
<MenubarSub v-if="asSub">
20+
<MenubarSubTrigger>
21+
编辑
22+
</MenubarSubTrigger>
23+
<MenubarSubContent>
24+
<MenubarItem @click="undo()">
25+
<Undo2Icon class="mr-2 h-4 w-4" />
26+
撤销
27+
</MenubarItem>
28+
<MenubarItem @click="redo()">
29+
<Redo2Icon class="mr-2 h-4 w-4" />
30+
重做
31+
</MenubarItem>
32+
<MenubarSeparator />
33+
<MenubarItem @click="toggleShowUploadImgDialog()">
34+
<UploadCloudIcon class="mr-2 h-4 w-4" />
35+
上传图片
36+
</MenubarItem>
37+
<MenubarItem @click="toggleShowInsertFormDialog()">
38+
<TableIcon class="mr-2 h-4 w-4" />
39+
插入表格
40+
</MenubarItem>
41+
<MenubarItem @click="toggleShowInsertMpCardDialog()">
42+
<Contact2Icon class="mr-2 h-4 w-4" />
43+
插入公众号名片
44+
</MenubarItem>
45+
<MenubarSeparator />
46+
<MenubarItem @click="copyToClipboard()">
47+
<CopyIcon class="mr-2 h-4 w-4" />
48+
复制
49+
</MenubarItem>
50+
<MenubarItem @click="pasteFromClipboard()">
51+
<ClipboardPasteIcon class="mr-2 h-4 w-4" />
52+
粘贴
53+
</MenubarItem>
54+
</MenubarSubContent>
55+
</MenubarSub>
56+
57+
<!-- 作为 MenubarMenu 使用（默认） -->
58+
<MenubarMenu v-else>
1159
<MenubarTrigger>
1260
编辑
1361
</MenubarTrigger>

‎apps/web/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue‎

Lines changed: 72 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@
22
import { Download, FileCode, FileCog, FileText, Upload } from 'lucide-vue-next'
33
import { useStore } from '@/stores'
44
5+
const props = withDefaults(defineProps<{
6+
asSub?: boolean
7+
}>(), {
8+
asSub: false,
9+
})
10+
11+
const emit = defineEmits([`openEditorState`])
12+
13+
const { asSub } = toRefs(props)
14+
515
const store = useStore()
616
7-
const {
8-
isDark,
9-
isEditOnLeft,
10-
} = storeToRefs(store)
17+
const { isDark, isEditOnLeft, isOpenPostSlider } = storeToRefs(store)
1118
1219
const {
1320
exportEditorContent2HTML,
@@ -17,13 +24,66 @@ const {
1724
exportEditorContent2PDF,
1825
} = store
1926
20-
const editorStateDialogVisible = ref(false)
21-
2227
const importMarkdownContent = useImportMarkdownContent()
28+
29+
function openEditorStateDialog() {
30+
emit(`openEditorState`)
31+
}
2332
</script>
2433

2534
<template>
26-
<MenubarMenu>
35+
<!-- 作为 MenubarSub 使用 -->
36+
<MenubarSub v-if="asSub">
37+
<MenubarSubTrigger>
38+
文件
39+
</MenubarSubTrigger>
40+
<MenubarSubContent>
41+
<MenubarItem @click="importMarkdownContent()">
42+
<Upload class="mr-2 size-4" />
43+
导入 .md
44+
</MenubarItem>
45+
<MenubarItem @click="exportEditorContent2MD()">
46+
<Download class="mr-2 size-4" />
47+
导出 .md
48+
</MenubarItem>
49+
<MenubarItem @click="exportEditorContent2HTML()">
50+
<FileCode class="mr-2 size-4" />
51+
导出 .html
52+
</MenubarItem>
53+
<MenubarItem @click="exportEditorContent2PureHTML()">
54+
<FileCode class="mr-2 size-4" />
55+
导出 .html（无样式）
56+
</MenubarItem>
57+
<MenubarItem @click="exportEditorContent2PDF()">
58+
<FileText class="mr-2 size-4" />
59+
导出 .pdf
60+
</MenubarItem>
61+
<MenubarItem @click="downloadAsCardImage()">
62+
<Download class="mr-2 size-4" />
63+
导出 .png
64+
</MenubarItem>
65+
<MenubarSeparator />
66+
<MenubarItem @click="openEditorStateDialog()">
67+
<FileCog class="mr-2 size-4" />
68+
导入/导出项目配置
69+
</MenubarItem>
70+
<MenubarSeparator />
71+
<MenubarCheckboxItem v-model:checked="isDark">
72+
深色模式
73+
</MenubarCheckboxItem>
74+
<MenubarSeparator />
75+
<MenubarCheckboxItem v-model:checked="isEditOnLeft">
76+
左侧编辑
77+
</MenubarCheckboxItem>
78+
<MenubarSeparator />
79+
<MenubarCheckboxItem v-model:checked="isOpenPostSlider">
80+
内容管理
81+
</MenubarCheckboxItem>
82+
</MenubarSubContent>
83+
</MenubarSub>
84+
85+
<!-- 作为 MenubarMenu 使用（默认） -->
86+
<MenubarMenu v-else>
2787
<MenubarTrigger>
2888
文件
2989
</MenubarTrigger>
@@ -53,7 +113,7 @@ const importMarkdownContent = useImportMarkdownContent()
53113
导出 .png
54114
</MenubarItem>
55115
<MenubarSeparator />
56-
<MenubarItem @click="editorStateDialogVisible = true">
116+
<MenubarItem @click="openEditorStateDialog()">
57117
<FileCog class="mr-2 size-4" />
58118
导入/导出项目配置
59119
</MenubarItem>
@@ -65,9 +125,10 @@ const importMarkdownContent = useImportMarkdownContent()
65125
<MenubarCheckboxItem v-model:checked="isEditOnLeft">
66126
左侧编辑
67127
</MenubarCheckboxItem>
128+
<MenubarSeparator />
129+
<MenubarCheckboxItem v-model:checked="isOpenPostSlider">
130+
内容管理
131+
</MenubarCheckboxItem>
68132
</MenubarContent>
69133
</MenubarMenu>
70-
71-
<!-- 各弹窗挂载 -->
72-
<EditorStateDialog :visible="editorStateDialogVisible" @close="editorStateDialogVisible = false" />
73134
</template>

0 commit comments

Comments
 (0)