feat: update post slider (#481)

README.md

@@ -76,19 +76,19 @@ Markdown 文档自动即时渲染为微信图文，让你不再为微信文章
 示例代码：
 
 ```js
-const { file, util, okCb, errCb } = CUSTOM_ARG;
-const param = new FormData();
-param.append(`file`, file);
+const { file, util, okCb, errCb } = CUSTOM_ARG
+const param = new FormData()
+param.append(`file`, file)
 util.axios
   .post(`http://127.0.0.1:9000/upload`, param, {
-    headers: { "Content-Type": `multipart/form-data` },
+    headers: { 'Content-Type': `multipart/form-data` },
   })
   .then((res) => {
-    okCb(res.url);
+    okCb(res.url)
   })
   .catch((err) => {
-    errCb(err);
-  });
+    errCb(err)
+  })
 
 // 提供的可用参数:
 // CUSTOM_ARG = {

src/assets/less/app.less

@@ -77,10 +77,12 @@ section {
   position: relative;
   margin: 0 -20px;
   width: 375px;
+  min-height: 100vh;
   padding: 20px;
   font-size: 14px;
   box-sizing: border-box;
   outline: none;
+  word-wrap: break-word;
 }
 
 .preview table {

src/components/CodemirrorEditor/PostSlider.vue

@@ -40,7 +40,7 @@ function renamePost() {
   }
   store.renamePost(editTarget.value, renamePostInputVal.value)
   isOpenEditDialog.value = false
-  toast.success(`文章更名成功`)
+  toast.success(`文章重命名成功`)
 }
 
 const isOpenDelPostConfirmDialog = ref(false)
@@ -90,9 +90,10 @@ function delPost() {
         :key="post.title"
         href="#"
         :class="{
-          'bg-primary text-primary-foreground': store.currentPostIndex === index,
+          'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
+          'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': 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"
+        class="hover:bg-primary/90 hover:text-primary-foreground dark:bg-muted dark:hover:bg-muted dark:hover:border-primary-dark 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>
@@ -105,9 +106,9 @@ function delPost() {
           <DropdownMenuContent>
             <DropdownMenuItem @click.stop="startRenamePost(index)">
               <Edit3 class="mr-2 size-4" />
-              更名
+              重命名
             </DropdownMenuItem>
-            <DropdownMenuItem @click.stop="startDelPost(index)">
+            <DropdownMenuItem v-if="store.posts.length > 1" @click.stop="startDelPost(index)">
               <Trash class="mr-2 size-4" />
               删除
             </DropdownMenuItem>

src/stores/index.ts

@@ -63,7 +63,7 @@ export const useStore = defineStore(`store`, () => {
   const addPost = (title: string) => {
     currentPostIndex.value = posts.value.push({
       title,
-      content: DEFAULT_CONTENT,
+      content: `# ${title}`,
     }) - 1
   }
 
@@ -73,7 +73,7 @@ export const useStore = defineStore(`store`, () => {
 
   const delPost = (index: number) => {
     posts.value.splice(index, 1)
-    currentPostIndex.value = 0
+    currentPostIndex.value = posts.value.length - 1
   }
 
   watch(currentPostIndex, () => {