src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -33,7 +33,7 @@ import {
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import { mergeCss, solveWeChatImage } from '@/utils'
-import { Moon, Paintbrush, PanelLeftClose, PanelLeftOpen, Sun } from 'lucide-vue-next'
+import { Moon, Paintbrush, Sun } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref, useTemplateRef } from 'vue'
 import PickColors from 'vue-pick-colors'
@@ -122,10 +122,10 @@ function copy() {
         // 公众号不支持 position， 转换为等价的 translateY
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
-        .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
-        .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
-        .replace(/var\(--md-primary-color\)/g, primaryColor.value)
-        .replace(/--md-primary-color:.+?;/g, ``)
+        .replaceAll(`hsl(var(--foreground))`, `#3f3f3f`)
+        .replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
+        .replaceAll(`var(--md-primary-color)`, primaryColor.value)
+        .replaceAll(/--md-primary-color:.+?;/g, ``)
         .replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
 
       clipboardDiv.focus()
@@ -219,12 +219,6 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       <HelpDropdown />
     </Menubar>
 
-    <Button v-if="!store.isOpenPostSlider" variant="outline" class="mr-2" @click="store.isOpenPostSlider = true">
-      <PanelLeftOpen class="size-4" />
-    </Button>
-    <Button v-else variant="outline" class="mr-2" @click="store.isOpenPostSlider = false">
-      <PanelLeftClose class="size-4" />
-    </Button>
     <Popover>
       <PopoverTrigger>
         <Button variant="outline">

src/components/CodemirrorEditor/PostSlider.vue

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Input } from '@/components/ui/input'
-import { useStore } from '@/stores'
-import { Edit3, Ellipsis, Plus, Trash } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import { toast } from 'vue-sonner'
-
-const store = useStore()
-
-const isOpen = ref(false)
-
-const addPostInputVal = ref(``)
-
-watch(isOpen, () => {
-  if (isOpen.value) {
-    addPostInputVal.value = ``
-  }
-})
-
-function addPost() {
-  if (addPostInputVal.value === ``) {
-    toast.error(`文章标题不可为空`)
-    return
-  }
-  store.addPost(addPostInputVal.value)
-  isOpen.value = false
-  toast.success(`文章新增成功`)
-}
-
-const editTarget = ref(-1)
-const isOpenEditDialog = ref(false)
-const renamePostInputVal = ref(``)
-function startRenamePost(index: number) {
-  editTarget.value = index
-  renamePostInputVal.value = store.posts[index].title
-  isOpenEditDialog.value = true
-}
-
-function renamePost() {
-  if (renamePostInputVal.value === ``) {
-    toast.error(`文章标题不可为空`)
-    return
-  }
-  store.renamePost(editTarget.value, renamePostInputVal.value)
-  isOpenEditDialog.value = false
-  toast.success(`文章更名成功`)
-}
-
-const isOpenDelPostConfirmDialog = ref(false)
-function startDelPost(index: number) {
-  editTarget.value = index
-  isOpenDelPostConfirmDialog.value = true
-}
-function delPost() {
-  store.delPost(editTarget.value)
-  isOpenDelPostConfirmDialog.value = false
-  toast.success(`文章删除成功`)
-}
-</script>
-
-<template>
-  <div
-    class="overflow-hidden border-r bg-gray/20 transition-width dark:bg-gray/40"
-    :class="{
-      'w-0': !store.isOpenPostSlider,
-      'w-50': store.isOpenPostSlider,
-    }"
-  >
-    <nav class="space-y-1 h-full overflow-auto p-2">
-      <Dialog v-model:open="isOpen">
-        <DialogTrigger as-child>
-          <Button variant="outline" class="w-full" size="xs">
-            <Plus /> 新增文章
-          </Button>
-        </DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>新增文章</DialogTitle>
-            <DialogDescription>
-              请输入文章名称
-            </DialogDescription>
-          </DialogHeader>
-          <Input v-model="addPostInputVal" />
-          <DialogFooter>
-            <Button @click="addPost()">
-              确 定
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      <a
-        v-for="(post, index) in store.posts"
-        :key="post.title"
-        href="#"
-        :class="{
-          'bg-primary text-primary-foreground': store.currentPostIndex === index,
-        }"
-        class="hover:bg-primary/90 hover:text-primary-foreground dark:bg-muted dark:hover:bg-muted h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:text-white"
-        @click="store.currentPostIndex = index"
-      >
-        <span class="line-clamp-1">{{ post.title }}</span>
-        <DropdownMenu>
-          <DropdownMenuTrigger as-child>
-            <Button size="xs" variant="ghost" class="ml-auto px-1.5">
-              <Ellipsis class="size-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem @click.stop="startRenamePost(index)">
-              <Edit3 class="mr-2 size-4" />
-              更名
-            </DropdownMenuItem>
-            <DropdownMenuItem @click.stop="startDelPost(index)">
-              <Trash class="mr-2 size-4" />
-              删除
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </a>
-      <!-- 重命名弹窗 -->
-      <Dialog v-model:open="isOpenEditDialog">
-        <DialogContent class="sm:max-w-[425px]">
-          <DialogHeader>
-            <DialogTitle>编辑文章名称</DialogTitle>
-            <DialogDescription>
-              请输入新的文章名称
-            </DialogDescription>
-          </DialogHeader>
-          <Input v-model="renamePostInputVal" />
-          <DialogFooter>
-            <Button variant="outline" @click="isOpenEditDialog = false">
-              取消
-            </Button>
-            <Button @click="renamePost()">
-              保存
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <AlertDialog v-model:open="isOpenDelPostConfirmDialog">
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>提示</AlertDialogTitle>
-            <AlertDialogDescription>
-              此操作将删除该文章，是否继续？
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>取消</AlertDialogCancel>
-            <AlertDialogAction @click="delPost()">
-              确认
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </nav>
-  </div>
-</template>
-
-<style scoped lang="less">
-
-</style>

src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -601,7 +601,6 @@ function onDrop(e: DragEvent) {
               <Button
                 variant="link"
                 class="p-0"
-                as="a"
                 href="https://developer.qiniu.com/kodo"
                 target="_blank"
               >
@@ -643,7 +642,6 @@ function onDrop(e: DragEvent) {
               <Button
                 variant="link"
                 class="p-0"
-                as="a"
                 href="http://docs.minio.org.cn/docs/master/minio-client-complete-guide"
                 target="_blank"
               >
@@ -682,7 +680,6 @@ function onDrop(e: DragEvent) {
                 <Button
                   variant="link"
                   class="p-0"
-                  as="a"
                   href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Getting_Started_Guide.html"
                   target="_blank"
                 >
@@ -691,7 +688,6 @@ function onDrop(e: DragEvent) {
                 <Button
                   variant="link"
                   class="p-0"
-                  as="a"
                   href="https://mpmd.pages.dev/tutorial/"
                   target="_blank"
                 >

src/components/FormItem.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div>
     <Label class="flex items-center">
-      <span class="mr-4 min-h-4 w-[150px] flex-shrink-0 text-right font-bold" :class="{ required: props.required }">
+      <span class="mr-4 w-[150px] text-right font-bold min-h-4 flex-shrink-0" :class="{ required: props.required }">
         {{ props.label }}
       </span>
       <slot />

src/components/ui/alert/Alert.vue

@@ -4,8 +4,8 @@ import { cn } from '@/lib/utils'
 import { type AlertVariants, alertVariants } from '.'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
-  variant?: AlertVariants[`variant`]
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
 }>()
 </script>
 

src/components/ui/alert/AlertDescription.vue

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

src/components/ui/alert/AlertTitle.vue

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

src/components/ui/alert/index.ts

@@ -5,17 +5,17 @@ export { default as AlertDescription } from './AlertDescription.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
-  `relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground`,
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
   {
     variants: {
       variant: {
-        default: `bg-background text-foreground`,
+        default: 'bg-background text-foreground',
         destructive:
-          `border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive`,
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
       },
     },
     defaultVariants: {
-      variant: `default`,
+      variant: 'default',
     },
   },
 )

src/components/ui/label/Label.vue

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { Label, type LabelProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/number-field/NumberField.vue

@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
 
 const delegatedProps = computed(() => {

src/components/ui/number-field/NumberFieldContent.vue

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

src/components/ui/number-field/NumberFieldDecrement.vue

@@ -5,7 +5,7 @@ import { Minus } from 'lucide-vue-next'
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/number-field/NumberFieldIncrement.vue

@@ -5,7 +5,7 @@ import { Plus } from 'lucide-vue-next'
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/number-field/NumberFieldInput.vue

@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { NumberFieldInput } from 'radix-vue'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
+  class?: HTMLAttributes['class']
 }>()
 </script>
 

src/components/ui/switch/Switch.vue

@@ -9,7 +9,7 @@ import {
 } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 
 const emits = defineEmits<SwitchRootEmits>()
 

src/components/ui/tabs/TabsContent.vue

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/tabs/TabsList.vue

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/tabs/TabsTrigger.vue

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes[`class`] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

src/components/ui/textarea/Textarea.vue

@@ -4,16 +4,16 @@ import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
-  class?: HTMLAttributes[`class`]
+  class?: HTMLAttributes['class']
   defaultValue?: string | number
   modelValue?: string | number
 }>()
 
 const emits = defineEmits<{
-  (e: `update:modelValue`, payload: string | number): void
+  (e: 'update:modelValue', payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, `modelValue`, emits, {
+const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })

src/stores/index.ts

@@ -52,50 +52,12 @@ export const useStore = defineStore(`store`, () => {
   // 内容编辑器编辑器
   const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
   // 编辑区域内容
-  // 预备弃用
   const editorContent = useStorage(`__editor_content`, DEFAULT_CONTENT)
 
-  const isOpenPostSlider = useStorage(addPrefix(`is_open_post_slider`), false)
-  // 文章列表
-  const posts = useStorage(addPrefix(`posts`), [{
-    title: `文章1`,
-    content: DEFAULT_CONTENT,
-  }])
-  // 当前文章
-  const currentPostIndex = useStorage(addPrefix(`current_post_index`), 0)
-
-  const addPost = (title: string) => {
-    currentPostIndex.value = posts.value.push({
-      title,
-      content: DEFAULT_CONTENT,
-    }) - 1
-  }
-
-  const renamePost = (index: number, title: string) => {
-    posts.value[index].title = title
-  }
-
-  const delPost = (index: number) => {
-    posts.value.splice(index, 1)
-    currentPostIndex.value = 0
-  }
-
-  watch(currentPostIndex, () => {
-    toRaw(editor.value!).setValue(posts.value[currentPostIndex.value].content)
-  })
-
-  onMounted(() => {
-    // 迁移阶段，兼容之前的方案
-    if (editorContent.value !== DEFAULT_CONTENT) {
-      posts.value[currentPostIndex.value].content = editorContent.value
-      editorContent.value = DEFAULT_CONTENT
-    }
-  })
-
   // 格式化文档
   const formatContent = () => {
     formatDoc((editor.value!).getValue()).then((doc) => {
-      posts.value[currentPostIndex.value].content = doc
+      editorContent.value = doc
       toRaw(editor.value!).setValue(doc)
     })
   }
@@ -459,6 +421,7 @@ export const useStore = defineStore(`store`, () => {
     isOpenConfirmDialog,
     resetStyleConfirm,
     resetStyle,
+    editorContent,
 
     cssContentConfig,
     addCssContentTab,
@@ -466,12 +429,6 @@ export const useStore = defineStore(`store`, () => {
     setCssEditorValue,
     tabChanged,
     renameTab,
-    posts,
-    currentPostIndex,
-    addPost,
-    renamePost,
-    delPost,
-    isOpenPostSlider,
   }
 })
 

src/views/CodemirrorEditor.vue

@@ -3,7 +3,6 @@ import type { ComponentPublicInstance } from 'vue'
 import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
-import PostSlider from '@/components/CodemirrorEditor/PostSlider.vue'
 import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
 import RunLoading from '@/components/RunLoading.vue'
 import {
@@ -16,7 +15,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
-
 import {
   ContextMenu,
   ContextMenuContent,
@@ -40,7 +38,7 @@ import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
-const { isDark, output, editor } = storeToRefs(store)
+const { isDark, output, editor, editorContent } = storeToRefs(store)
 const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
@@ -203,7 +201,7 @@ function initEditor() {
   const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
 
   if (!editorDom.value) {
-    editorDom.value = store.posts[store.currentPostIndex].content
+    editorDom.value = editorContent.value
   }
   editor.value = CodeMirror.fromTextArea(editorDom, {
     mode: `text/x-markdown`,
@@ -250,7 +248,7 @@ function initEditor() {
     clearTimeout(changeTimer.value)
     changeTimer.value = setTimeout(() => {
       onEditorRefresh()
-      store.posts[store.currentPostIndex].content = e.getValue()
+      editorContent.value = e.getValue()
     }, 300)
   })
 
@@ -398,11 +396,10 @@ onMounted(() => {
       @end-copy="endCopy"
     />
     <main class="container-main flex-1">
-      <div class="container-main-section h-full flex border-1">
-        <PostSlider />
+      <div class="container-main-section grid h-full border-1" :class="isShowCssEditor ? 'grid-cols-3' : 'grid-cols-2'">
         <div
           ref="codeMirrorWrapper"
-          class="codeMirror-wrapper flex-1 border-r-1"
+          class="codeMirror-wrapper border-r-1"
           :class="{
             'order-1': !store.isEditOnLeft,
           }"
@@ -446,7 +443,7 @@ onMounted(() => {
           id="preview"
           ref="preview"
           :span="isShowCssEditor ? 8 : 12"
-          class="preview-wrapper flex-1 p-5"
+          class="preview-wrapper p-5"
         >
           <div id="output-wrapper" :class="{ output_night: !backLight }">
             <div class="preview border shadow-xl">
@@ -460,7 +457,7 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <CssEditor class="flex-1" />
+        <CssEditor />
       </div>
     </main>