feat: support mobile view (#652)

Author: acbin

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -103,16 +103,18 @@ function copy() {
 </script>
 
 <template>
-  <header class="header-container h-15 flex items-center justify-between px-5 dark:bg-[#191c20]">
-    <div class="space-x-2 flex">
+  <header class="header-container h-15 flex flex-wrap items-center justify-between px-5 dark:bg-[#191c20]">
+    <!-- 左侧菜单：移动端隐藏 -->
+    <div class="space-x-2 hidden sm:flex">
       <Menubar class="menubar">
         <FileDropdown />
 
         <MenubarMenu>
           <MenubarTrigger> 格式 </MenubarTrigger>
           <MenubarContent class="w-60" align="start">
             <MenubarCheckboxItem
-              v-for="{ label, kbd, emitArgs } in formatItems" :key="label"
+              v-for="{ label, kbd, emitArgs } in formatItems"
+              :key="label"
               @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
             >
               {{ label }}
@@ -141,7 +143,9 @@ function copy() {
       </Menubar>
     </div>
 
-    <div class="space-x-2 flex">
+    <!-- 右侧操作区：移动端保留核心按钮 -->
+    <div class="space-x-2 flex flex-wrap">
+      <!-- 展开/收起左侧内容栏 -->
       <TooltipProvider :delay-duration="200">
         <Tooltip>
           <TooltipTrigger as-child>
@@ -156,11 +160,13 @@ function copy() {
         </Tooltip>
       </TooltipProvider>
 
+      <!-- 暗色切换 -->
       <Button variant="outline" @click="toggleDark()">
         <Moon v-show="isDark" class="size-4" />
         <Sun v-show="!isDark" class="size-4" />
       </Button>
 
+      <!-- 复制按钮组 -->
       <div class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md">
         <Button variant="ghost" class="shadow-none" @click="copy">
           复制
@@ -189,8 +195,10 @@ function copy() {
         </DropdownMenu>
       </div>
 
-      <PostInfo />
+      <!-- 文章信息（移动端隐藏） -->
+      <PostInfo class="hidden sm:inline-flex" />
 
+      <!-- 设置按钮 -->
       <Button variant="outline" @click="store.isOpenRightSlider = !store.isOpenRightSlider">
         <Settings class="size-4" />
       </Button>

src/stores/index.ts

@@ -102,7 +102,7 @@ export const useStore = defineStore(`store`, () => {
         },
       ],
       createDatetime: new Date(),
-      updateDatetime: new Date()
+      updateDatetime: new Date(),
     },
   ])
 
@@ -131,7 +131,7 @@ export const useStore = defineStore(`store`, () => {
           },
         ],
         createDatetime: new Date(),
-        updateDatetime: new Date()
+        updateDatetime: new Date(),
       }) - 1
   }
 

src/views/CodemirrorEditor.vue

@@ -9,7 +9,7 @@ import {
 } from '@/utils'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
-import { List } from 'lucide-vue-next'
+import { Eye, List, Pen } from 'lucide-vue-next'
 
 const store = useStore()
 const displayStore = useDisplayStore()
@@ -36,6 +36,31 @@ const {
 const isImgLoading = ref(false)
 const timeout = ref<NodeJS.Timeout>()
 
+const isMobile = ref(false)
+const showEditor = ref(true)
+
+// 判断是否为移动端（初始 + resize 响应）
+function handleResize() {
+  isMobile.value = window.innerWidth <= 768
+}
+
+onMounted(() => {
+  handleResize()
+  window.addEventListener(`resize`, handleResize)
+  setTimeout(() => {
+    leftAndRightScroll()
+  }, 300)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener(`resize`, handleResize)
+})
+
+// 切换编辑/预览视图（仅限移动端）
+function toggleView() {
+  showEditor.value = !showEditor.value
+}
+
 const preview = ref<HTMLDivElement | null>(null)
 
 // 使浏览区与编辑区滚动条建立同步联系
@@ -83,12 +108,6 @@ function leftAndRightScroll() {
   editor.value!.on(`scroll`, editorScrollCB)
 }
 
-onMounted(() => {
-  setTimeout(() => {
-    leftAndRightScroll()
-  }, 300)
-})
-
 // 更新编辑器
 function onEditorRefresh() {
   editorRefresh()
@@ -401,6 +420,7 @@ const isOpenHeadingSlider = ref(false)
       <div class="container-main-section border-radius-10 relative flex flex-1 overflow-hidden border-1">
         <PostSlider />
         <div
+          v-show="!isMobile || (isMobile && showEditor)"
           ref="codeMirrorWrapper"
           class="codeMirror-wrapper flex-1"
           :class="{
@@ -458,7 +478,10 @@ const isOpenHeadingSlider = ref(false)
             </ContextMenuContent>
           </ContextMenu>
         </div>
-        <div class="relative flex-1">
+        <div
+          v-show="!isMobile || (isMobile && !showEditor)"
+          class="relative flex-1"
+        >
           <div
             id="preview"
             ref="preview"
@@ -475,7 +498,6 @@ const isOpenHeadingSlider = ref(false)
                 </div>
               </div>
             </div>
-
             <BackTop target="preview" :right="40" :bottom="40" />
           </div>
           <div
@@ -506,6 +528,15 @@ const isOpenHeadingSlider = ref(false)
         字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
       </footer>
 
+      <button
+        v-if="isMobile"
+        class="bg-primary fixed bottom-16 right-6 z-50 flex items-center justify-center rounded-full p-3 text-white shadow-lg transition active:scale-95 hover:scale-105 dark:bg-gray-700 dark:text-white dark:ring-2 dark:ring-white/30"
+        aria-label="切换编辑/预览"
+        @click="toggleView"
+      >
+        <component :is="showEditor ? Eye : Pen" class="h-5 w-5" />
+      </button>
+
       <UploadImgDialog @upload-image="uploadImage" />
 
       <InsertFormDialog />
@@ -589,5 +620,6 @@ const isOpenHeadingSlider = ref(false)
 
 .codeMirror-wrapper {
   overflow-x: auto;
+  height: 100%;
 }
 </style>