feat: init post list

Author: YangFong

src/stores/index.ts

@@ -52,12 +52,46 @@ export const useStore = defineStore(`store`, () => {
   // 内容编辑器编辑器
   const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
   // 编辑区域内容
+  // 预备弃用
   const editorContent = useStorage(`__editor_content`, DEFAULT_CONTENT)
+  // 文章列表
+  const posts = useStorage(addPrefix(`posts`), [{
+    title: `文章1`,
+    content: DEFAULT_CONTENT,
+  }])
+  // 当前文章
+  const currentPostIndex = useStorage(addPrefix(`currentPostIndex`), 0)
+
+  const addPost = (title: string) => {
+    currentPostIndex.value = posts.value.push({
+      title,
+      content: DEFAULT_CONTENT,
+    }) - 1
+    toast.success(`文章新增成功`)
+  }
+
+  const delPost = (index: number) => {
+    posts.value.splice(index, 1)
+    currentPostIndex.value = 0
+    toast.success(`文章删除成功`)
+  }
+
+  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) => {
-      editorContent.value = doc
+      posts.value[currentPostIndex.value].content = doc
       toRaw(editor.value!).setValue(doc)
     })
   }
@@ -421,14 +455,17 @@ export const useStore = defineStore(`store`, () => {
     isOpenConfirmDialog,
     resetStyleConfirm,
     resetStyle,
-    editorContent,
 
     cssContentConfig,
     addCssContentTab,
     validatorTabName,
     setCssEditorValue,
     tabChanged,
     renameTab,
+    posts,
+    currentPostIndex,
+    addPost,
+    delPost,
   }
 })
 

src/views/CodemirrorEditor.vue

@@ -23,6 +23,17 @@ import {
   ContextMenuShortcut,
   ContextMenuTrigger,
 } from '@/components/ui/context-menu'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+
 import { altKey, altSign, ctrlKey, shiftKey, shiftSign } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import {
@@ -32,13 +43,14 @@ import {
 } from '@/utils'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
+import { Plus, Trash } from 'lucide-vue-next'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, toRaw, watch } from 'vue'
 import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
-const { isDark, output, editor, editorContent } = storeToRefs(store)
+const { isDark, output, editor } = storeToRefs(store)
 const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
@@ -201,7 +213,7 @@ function initEditor() {
   const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
 
   if (!editorDom.value) {
-    editorDom.value = editorContent.value
+    editorDom.value = store.posts[store.currentPostIndex].content
   }
   editor.value = CodeMirror.fromTextArea(editorDom, {
     mode: `text/x-markdown`,
@@ -248,7 +260,7 @@ function initEditor() {
     clearTimeout(changeTimer.value)
     changeTimer.value = setTimeout(() => {
       onEditorRefresh()
-      editorContent.value = e.getValue()
+      store.posts[store.currentPostIndex].content = e.getValue()
     }, 300)
   })
 
@@ -385,6 +397,16 @@ onMounted(() => {
   onEditorRefresh()
   mdLocalToRemote()
 })
+
+const isOpen = ref(false)
+
+const addPostInputVal = ref(``)
+
+function addPost() {
+  store.addPost(addPostInputVal.value)
+  isOpen.value = false
+  addPostInputVal.value = ``
+}
 </script>
 
 <template>
@@ -396,10 +418,46 @@ onMounted(() => {
       @end-copy="endCopy"
     />
     <main class="container-main flex-1">
-      <div class="container-main-section grid h-full border-1" :class="isShowCssEditor ? 'grid-cols-3' : 'grid-cols-2'">
+      <div class="container-main-section h-full flex border-1">
+        <nav class="space-y-1 w-50 border-r bg-gray/20 p-2 dark:bg-gray/40">
+          <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:text-primary-foreground hover:bg-primary/90 dark:bg-muted dark:hover:bg-muted h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-4 text-sm transition-colors dark:text-white dark:hover:text-white"
+            @click="store.currentPostIndex = index"
+          >
+            <span>{{ post.title }}</span>
+            <Trash v-if="index == store.currentPostIndex" class="ml-auto size-4" @click.stop="store.delPost(index)" />
+          </a>
+        </nav>
         <div
           ref="codeMirrorWrapper"
-          class="codeMirror-wrapper border-r-1"
+          class="codeMirror-wrapper flex-1 border-r-1"
           :class="{
             'order-1': !store.isEditOnLeft,
           }"
@@ -443,7 +501,7 @@ onMounted(() => {
           id="preview"
           ref="preview"
           :span="isShowCssEditor ? 8 : 12"
-          class="preview-wrapper p-5"
+          class="preview-wrapper flex-1 p-5"
         >
           <div id="output-wrapper" :class="{ output_night: !backLight }">
             <div class="preview border shadow-xl">
@@ -457,7 +515,7 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <CssEditor />
+        <CssEditor class="flex-1" />
       </div>
     </main>