From 65a15341c986607b0dce0828237f524ef5eb4d95 Mon Sep 17 00:00:00 2001
From: yuantao <user@example.com>
Date: Fri, 24 Oct 2025 09:43:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20Modal=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=96=87=E6=9C=AC=E8=BE=93=E5=85=A5=E5=92=8CPromise?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                       |   3 +
 package.json                     |   1 -
 src/App.vue                      |  19 +-
 src/components/ConfirmDialog.vue | 249 ---------------
 src/components/FolderManage.vue  |  83 -----
 src/components/Modal.vue         | 503 ++++++++++++++++++-------------
 src/pages/NoteListPage.vue       |   2 +-
 7 files changed, 310 insertions(+), 550 deletions(-)
 delete mode 100644 src/components/ConfirmDialog.vue

diff --git a/index.html b/index.html
index aed3f33..94d37f6 100644
--- a/index.html
+++ b/index.html
@@ -88,6 +88,9 @@
         --white-60: #ffffff99; /* 60% white */
         --white-80: #ffffffcc; /* 80% white */
         --white-90: #ffffffe6; /* 90% white */
+
+        --confirmFontSize: 0.8rem;
+        --confirmBg: rgba(0, 0, 0, 0.15);
       }
 
       body {
diff --git a/package.json b/package.json
index fbca4af..241562c 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "moment": "^2.30.1",
     "pinia": "^3.0.3",
     "vue": "^3.5.22",
-    "vue-draggable-plus": "^0.6.0",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 41b645b..4688d9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,19 +13,19 @@
     </template>
 
     <!-- 设置页面 -->
-    <transition 
-      name="settings-slide"
-      v-show="isSettingsRoute" 
-      appear>
+    <transition name="settings-slide" v-show="isSettingsRoute" appear>
       <SettingsPage class="setting-page" />
     </transition>
+
+    <Modal ref="modalRef" showInput />
   </div>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import '@/common/base.css'
+import Modal from '@/components/Modal.vue'
 
 // 导入页面组件
 import NoteListPage from './pages/NoteListPage.vue'
@@ -33,6 +33,7 @@ import SettingsPage from './pages/SettingsPage.vue'
 
 const route = useRoute()
 const transitionName = ref('slide-left')
+const modalRef = ref()
 
 // 计算是否为设置页面路由
 const isSettingsRoute = computed(() => {
@@ -53,15 +54,15 @@ watch(
       transitionName.value = 'slide-right'
       return
     }
-    
+
     // 判断导航方向
     const toDepth = toPath.split('/').length
     const fromDepth = fromPath.split('/').length
-    
+
     // 如果是进入更深的页面（如从列表页进入编辑页），使用左滑动画
     if (toDepth > fromDepth) {
       transitionName.value = 'slide-left'
-    } 
+    }
     // 如果是返回上层页面（如从编辑页返回列表页），使用右滑动画
     else if (toDepth < fromDepth) {
       transitionName.value = 'slide-right'
@@ -72,8 +73,6 @@ watch(
     }
   }
 )
-
-// 无额外处理函数
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/ConfirmDialog.vue b/src/components/ConfirmDialog.vue
deleted file mode 100644
index d9c7fe9..0000000
--- a/src/components/ConfirmDialog.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<template>
-  <div v-if="visible" class="pd-mask" @click="handleMaskClick">
-    <div class="pd-confirm" @click.stop>
-      <div class="pd-blur"></div>
-      <div class="pd-plan"></div>
-      <h2 class="pd-title" v-if="title">{{ title }}</h2>
-      <p class="pd-message">{{ message }}</p>
-      <div class="pd-buttons">
-        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
-          {{ confirmText }}
-        </button>
-        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
-          {{ cancelText }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted, onUnmounted } from 'vue'
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  confirmText: {
-    type: String,
-    default: '确认',
-  },
-  cancelText: {
-    type: String,
-    default: '取消',
-  },
-  showConfirm: {
-    type: Boolean,
-    default: true,
-  },
-  showCancel: {
-    type: Boolean,
-    default: true,
-  },
-  maskClosable: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
-const visible = defineModel('visible', { type: Boolean, default: false })
-
-// Promise 控制变量
-let resolvePromise, rejectPromise
-
-// 返回 Promise 的方法，模拟原生 confirm 行为
-const show = (options = {}) => {
-  // 更新 props 值
-  Object.assign(props, options)
-
-  // 显示对话框
-  visible.value = true
-  emit('update:visible', true)
-
-  // 返回 Promise
-  return new Promise((resolve, reject) => {
-    resolvePromise = resolve
-    rejectPromise = reject
-  })
-}
-
-const handleConfirm = () => {
-  emit('confirm')
-  visible.value = false
-  emit('update:visible', false)
-
-  // 解决 Promise
-  if (resolvePromise) {
-    resolvePromise()
-    resolvePromise = null
-    rejectPromise = null
-  }
-}
-
-const handleCancel = () => {
-  emit('cancel')
-  visible.value = false
-  emit('update:visible', false)
-
-  // 拒绝 Promise
-  if (rejectPromise) {
-    rejectPromise()
-    resolvePromise = null
-    rejectPromise = null
-  }
-}
-
-const handleMaskClick = () => {
-  if (props.maskClosable) {
-    handleCancel() // 点击遮罩相当于取消
-  }
-}
-
-// 添加/移除 body 滚动锁定
-const lockBodyScroll = () => {
-  document.body.style.overflow = 'hidden'
-}
-
-const unlockBodyScroll = () => {
-  document.body.style.overflow = ''
-}
-
-onMounted(() => {
-  if (visible.value) {
-    lockBodyScroll()
-  }
-})
-
-onUnmounted(() => {
-  unlockBodyScroll()
-})
-
-// 监听 visible 变化
-watch(visible, newVal => {
-  if (newVal) {
-    lockBodyScroll()
-  } else {
-    unlockBodyScroll()
-  }
-})
-
-// 暴露 show 方法给父组件使用
-defineExpose({
-  show,
-})
-</script>
-
-<style scoped>
-.pd-mask {
-  position: fixed;
-  inset: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999999999;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: inherit;
-  background: var(--confirmBg, inherit);
-}
-
-.pd-confirm {
-  background: inherit;
-  background: var(--confirmTheme, #fff);
-  text-align: center;
-  color: var(--confirmColor, #636363);
-  font-size: var(--confirmFontSize, 1rem);
-  max-width: 75vw;
-  min-width: 20em;
-  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
-  border-radius: 10px;
-  position: relative;
-  white-space: break-spaces;
-  word-break: break-all;
-  overflow: hidden;
-}
-
-.pd-blur,
-.pd-plan {
-  position: absolute;
-  inset: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.pd-plan {
-  background: inherit;
-  background: rgba(255, 255, 255, 0.66);
-  filter: blur(10px) saturate(2);
-}
-
-.pd-title {
-  position: relative;
-  font-size: 1.3em;
-  min-height: 1em;
-  background: var(--confirmBtnBg, #fafafa);
-  color: var(--confirmBtnColor, #636363);
-  margin: 0;
-  padding: 0.5em 0;
-}
-
-.pd-message {
-  position: relative;
-  border-top: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  width: 100%;
-  max-height: 70vh;
-  border-bottom: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  margin: 0 auto;
-  box-sizing: border-box;
-  padding: 2em 10%;
-  line-height: 1.4;
-  overflow: auto;
-}
-
-.pd-buttons {
-  display: flex;
-}
-
-.pd-button {
-  position: relative;
-  width: 100%;
-  font-size: 1em;
-  appearance: none;
-  background: var(--confirmBtnBg, #fafafa);
-  color: var(--confirmBtnColor, #636363);
-  border: none;
-  border-right: 1px solid var(--confirmBtnBorder, #f1f1f1);
-  padding: 1em 0;
-  cursor: pointer;
-  outline: none;
-}
-
-/* 当同时显示确认和取消按钮时，每个按钮占50%宽度 */
-.pd-button:first-child:nth-last-child(2),
-.pd-button:first-child:nth-last-child(2) ~ .pd-button {
-  width: 50%;
-}
-
-/* 当只显示一个按钮时，该按钮占100%宽度 */
-.pd-button:first-child:nth-last-child(1) {
-  width: 100%;
-  border-right: none;
-}
-
-/* 只有最后一个按钮没有右边框 */
-.pd-button:last-child {
-  border-right: none;
-}
-</style>
diff --git a/src/components/FolderManage.vue b/src/components/FolderManage.vue
index f9898fc..3e2877f 100644
--- a/src/components/FolderManage.vue
+++ b/src/components/FolderManage.vue
@@ -103,119 +103,79 @@
 
 <script setup>
 import { ref, computed, nextTick } from 'vue'
-
 import { useAppStore } from '../stores/useAppStore'
-
 import FolderItem from './FolderItem.vue'
 
 const store = useAppStore()
-
 const props = defineProps({
   allCount: {
     type: Number,
-
     default: 0,
   },
-
   starredCount: {
     type: Number,
-
     default: 0,
   },
-
   trashCount: {
     type: Number,
-
     default: 0,
   },
-
   archiveCount: {
     type: Number,
-
     default: 0,
   },
-
   selectedFolder: {
     type: String,
-
     default: '',
   },
-
   lastSyncTime: {
     type: String,
-
     default: '10/10上午9:28',
   },
-
   onAllClick: {
     type: Function,
-
     default: null,
   },
-
   onStarredClick: {
     type: Function,
-
     default: null,
   },
-
   onTrashClick: {
     type: Function,
-
     default: null,
   },
-
   onArchiveClick: {
     type: Function,
-
     default: null,
   },
-
   onAddFolder: {
     type: Function,
-
     default: null,
   },
-
   onFolderClick: {
     type: Function,
-
     default: null,
   },
 })
 
 // 添加文件夹相关状态
-
 const showAddFolderModal = ref(false)
-
 const newFolderName = ref('')
-
 const folderInput = ref(null)
-
 // 重命名文件夹相关状态
-
 const showRenameFolderModal = ref(false)
-
 const renameFolderId = ref(null)
-
 const renameFolderName = ref('')
-
 // 选择模式相关状态
-
 const isSelectionMode = ref(false)
-
 const selectedFolders = ref([])
-
 const showDeleteConfirmModal = ref(false)
-
 // 计算自定义文件夹（排除系统文件夹）
-
 const customFolders = computed(() => {
   return store.folders.filter(folder => !['all', 'starred', 'trash', 'archive'].includes(folder.id))
 })
 
 // 获取文件夹中的便签数量
-
 const getFolderNoteCount = folderId => {
   return store.notes.filter(note => note.folderId === folderId && !note.isDeleted).length
 }
@@ -224,28 +184,21 @@ const getFolderNoteCount = folderId => {
 
 const toggleSelectionMode = () => {
   isSelectionMode.value = !isSelectionMode.value
-
   // 退出选择模式时清空选中项
-
   if (!isSelectionMode.value) {
     selectedFolders.value = []
   }
 }
 
 // 切换文件夹选中状态
-
 const toggleFolderSelection = folderId => {
   if (!isSelectionMode.value) return
-
   const index = selectedFolders.value.indexOf(folderId)
-
   if (index > -1) {
     // 已选中，取消选中
-
     selectedFolders.value.splice(index, 1)
   } else {
     // 未选中，添加选中
-
     selectedFolders.value.push(folderId)
   }
 }
@@ -266,7 +219,6 @@ const handleFolderClick = folderId => {
 
 const handleDeleteSelectedFolders = () => {
   if (selectedFolders.value.length === 0) return
-
   showDeleteConfirmModal.value = true
 }
 
@@ -275,21 +227,15 @@ const handleDeleteSelectedFolders = () => {
 const confirmDeleteSelectedFolders = async () => {
   try {
     // 删除选中的文件夹
-
     for (const folderId of selectedFolders.value) {
       // 跳过系统文件夹
-
       if (['all', 'starred', 'trash', 'archive'].includes(folderId)) continue
-
       await store.deleteFolder(folderId)
     }
 
     // 清空选中项并退出选择模式
-
     selectedFolders.value = []
-
     isSelectionMode.value = false
-
     showDeleteConfirmModal.value = false
   } catch (error) {
     console.error('删除文件夹失败:', error)
@@ -300,11 +246,9 @@ const confirmDeleteSelectedFolders = async () => {
 
 const handleDeleteFolder = folderId => {
   // 阻止事件冒泡到父元素
-
   event.stopPropagation()
 
   // 确认删除
-
   if (confirm(`确定要删除文件夹 "${getFolderName(folderId)}" 吗？文件夹中的便签将移至"全部便签"。`)) {
     try {
       store.deleteFolder(folderId)
@@ -320,18 +264,13 @@ const handleEditFolder = folderId => {
   // 阻止事件冒泡到父元素
 
   event.stopPropagation()
-
   const folder = store.folders.find(f => f.id === folderId)
-
   if (folder) {
     renameFolderId.value = folderId
-
     renameFolderName.value = folder.name
-
     showRenameFolderModal.value = true
 
     // 在下次DOM更新后聚焦输入框
-
     nextTick(() => {
       if (folderInput.value) {
         folderInput.value.focus()
@@ -346,11 +285,8 @@ const confirmRenameFolder = async () => {
   if (renameFolderName.value.trim() && renameFolderId.value) {
     try {
       await store.updateFolder(renameFolderId.value, { name: renameFolderName.value.trim() })
-
       showRenameFolderModal.value = false
-
       renameFolderId.value = null
-
       renameFolderName.value = ''
     } catch (error) {
       console.error('重命名文件夹失败:', error)
@@ -362,7 +298,6 @@ const confirmRenameFolder = async () => {
 
 const getFolderName = folderId => {
   const folder = store.folders.find(f => f.id === folderId)
-
   return folder ? folder.name : ''
 }
 
@@ -396,27 +331,13 @@ const handleTrashClick = () => {
   }
 }
 
-const handleArchiveClick = () => {
-  if (isSelectionMode.value) {
-    toggleFolderSelection('archive')
-  } else {
-    if (props.onArchiveClick) {
-      props.onArchiveClick()
-    }
-  }
-}
-
 const handleAddFolder = event => {
   // 阻止事件冒泡到父元素
-
   event.stopPropagation()
-
   showAddFolderModal.value = true
-
   newFolderName.value = ''
 
   // 在下次DOM更新后聚焦输入框
-
   nextTick(() => {
     if (folderInput.value) {
       folderInput.value.focus()
@@ -429,16 +350,12 @@ const confirmAddFolder = async () => {
     try {
       const newFolder = {
         name: newFolderName.value.trim(),
-
         id: `folder_${Date.now()}`, // 生成唯一ID
-
         createdAt: new Date().toISOString(),
       }
 
       await store.addFolder(newFolder)
-
       showAddFolderModal.value = false
-
       newFolderName.value = ''
     } catch (error) {
       console.error('添加文件夹失败:', error)
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index bd6d6e5..5ee95b8 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,206 +1,297 @@
-<template>
-  <div class="code-fun-flex-col code-fun-justify-start">
-    <div class="code-fun-flex-col code-fun-justify-start group_1">
-      <div class="code-fun-flex-col code-fun-justify-start code-fun-items-end group">
-        <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-relative group_2">
-          <div class="code-fun-flex-col section_7">
-            <div class="code-fun-flex-col code-fun-justify-start section_1">
-              <div class="code-fun-flex-row section_11">
-                <div class="code-fun-flex-col code-fun-justify-start section_12" @click="handleCancel">
-                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_2">
-                    <span class="text_4">{{ cancelText }}</span>
-                  </div>
-                </div>
-                <div class="code-fun-flex-col code-fun-justify-start section_13 code-fun-ml-8" @click="handleConfirm">
-                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_3">
-                    <span class="text_5">{{ confirmText }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="code-fun-flex-col code-fun-justify-start code-fun-relative section_9">
-              <div class="code-fun-flex-col code-fun-justify-start section_10">
-                <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start text-wrapper">
-                  <input 
-                    v-model="inputValue"
-                    class="text_3" 
-                    :placeholder="placeholder"
-                    @keyup.enter="handleConfirm"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="code-fun-flex-col section_8 pos">
-            <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-self-stretch group_3">
-              <span class="text_2">{{ title }}</span>
-            </div>
-            <div class="code-fun-self-start divider"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '新建文件夹'
-  },
-  placeholder: {
-    type: String,
-    default: '新建文件夹'
-  },
-  confirmText: {
-    type: String,
-    default: '确定'
-  },
-  cancelText: {
-    type: String,
-    default: '取消'
-  }
-});
-
-const emit = defineEmits(['confirm', 'cancel']);
-
-const inputValue = ref('');
-
-const handleConfirm = () => {
-  emit('confirm', inputValue.value);
-};
-
-const handleCancel = () => {
-  emit('cancel');
-};
-</script>
-
-<style scoped lang="less">
-.group_1 {
-  padding-bottom: 1rem;
-  .group {
-    padding: 0.5rem 0 0.25rem;
-    .group_2 {
-      margin-right: 0.75rem;
-      width: 32.31rem;
-      .section_7 {
-        padding-top: 5.75rem;
-        background-color: #00000000;
-        width: 29.06rem;
-        height: 18.16rem;
-        background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/686f20ecd54496f19f54e801/68e862ab9520a30011f388ff/17600601480475170758.png);
-        background-repeat: no-repeat;
-        background-size: 100% auto;
-        background-position: 0% 0%;
-        .section_1 {
-          margin-top: 7.88rem;
-          background-color: #00000000;
-          .section_11 {
-            padding: 0.5rem 0.5rem 0.75rem;
-            background-color: #f4f4f7;
-            border-radius: 0rem 0rem 0.75rem 0.75rem;
-            border: solid 0.032rem #edeee8;
-            .section_12 {
-              padding: 0.25rem 0;
-              background-color: #00000000;
-              width: 13.63rem;
-              height: 3.13rem;
-              .text-wrapper_2 {
-                margin: 0 0.25rem;
-                padding: 0.75rem 0;
-                background-color: #f2f2f2;
-                border-radius: 0.25rem;
-                width: 13.34rem;
-                border: solid 0.032rem #d7d7d7;
-                .text_4 {
-                  color: #757575;
-                  font-size: 1.23rem;
-                  font-weight: 700;
-                  line-height: 1.23rem;
-                }
-              }
-            }
-            .section_13 {
-              margin-right: 0.25rem;
-              padding-top: 0.25rem;
-              background-color: #00000000;
-              width: 13.59rem;
-              height: 3.06rem;
-              .text-wrapper_3 {
-                margin-left: 0.25rem;
-                padding: 0.75rem 0;
-                border-radius: 0.25rem;
-                background-image: url('assets/53062683132af1946e1a4953530af228.png');
-                background-size: 100% 100%;
-                background-repeat: no-repeat;
-                width: 13.34rem;
-                .text_5 {
-                  color: #cddff2;
-                  font-size: 1.19rem;
-                  line-height: 1.19rem;
-                }
-              }
-            }
-          }
-        }
-        .section_9 {
-          margin-top: -12.5rem;
-          padding: 1.75rem 0 0.25rem;
-          background-color: #00000000;
-          .section_10 {
-            margin: 0 1.5rem;
-            padding-top: 0.25rem;
-            background-color: #00000000;
-            width: 25.88rem;
-            .text-wrapper {
-              margin: 0 0.25rem;
-              padding: 0.75rem 0;
-              background-color: #fefefe;
-              border-radius: 0.25rem;
-              width: 25.53rem;
-              border: solid 0.063rem #e1e1e1;
-              .text_3 {
-                margin-left: 1rem;
-                color: #d0d0d0;
-                font-size: 1.38rem;
-                font-weight: 700;
-                line-height: 1.38rem;
-              }
-            }
-          }
-        }
-      }
-      .section_8 {
-        padding: 0 0.13rem;
-        background-color: #00000000;
-        width: 32.31rem;
-        .group_3 {
-          padding: 1.5rem 0;
-          width: 32.06rem;
-          .text_2 {
-            margin-left: 10.5rem;
-            color: #7a7a7a;
-            font-size: 1.54rem;
-            font-weight: 700;
-            line-height: 1.54rem;
-          }
-        }
-        .divider {
-          background-color: #f0f0f0;
-          width: 29rem;
-          height: 0.094rem;
-        }
-      }
-      .pos {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="visible" class="pd-mask" @click="handleMaskClick">
+    <div class="pd-confirm" @click.stop>
+      <h2 class="pd-title">{{ title }}</h2>
+      <div class="pd-input-container" v-if="showInput">
+        <input v-model="inputModel" class="pd-input" :placeholder="inputPlaceholder" @keyup.enter="handleConfirm" />
+      </div>
+      <p class="pd-message" v-else>{{ message }}</p>
+      <div class="pd-plan"></div>
+      <div class="pd-buttons">
+        <button v-if="showConfirm" class="pd-button pd-confirm-btn" @click="handleConfirm">
+          {{ confirmText }}
+        </button>
+        <button v-if="showCancel" class="pd-button pd-cancel" @click="handleCancel">
+          {{ cancelText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  showConfirm: {
+    type: Boolean,
+    default: true,
+  },
+  showCancel: {
+    type: Boolean,
+    default: true,
+  },
+  maskClosable: {
+    type: Boolean,
+    default: false,
+  },
+  showInput: {
+    type: Boolean,
+    default: false,
+  },
+  inputPlaceholder: {
+    type: String,
+    default: '请输入文字',
+  },
+  inputValue: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'update:visible'])
+const visible = defineModel('visible', { type: Boolean, default: false })
+const inputModel = defineModel('inputValue', { type: String, default: '' })
+
+// Promise 控制变量
+let resolvePromise, rejectPromise
+
+// 返回 Promise 的方法，模拟原生 confirm 行为
+const show = (options = {}) => {
+  // 更新 props 值
+  Object.assign(props, options)
+
+  // 如果提供了 inputValue，则更新输入框的值
+  if (options.inputValue !== undefined) {
+    inputModel.value = options.inputValue
+  }
+
+  // 显示对话框
+  visible.value = true
+  emit('update:visible', true)
+
+  // 返回 Promise
+  return new Promise((resolve, reject) => {
+    resolvePromise = resolve
+    rejectPromise = reject
+  })
+}
+
+const handleConfirm = () => {
+  emit('confirm')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 解决 Promise，传递输入框的值
+  if (resolvePromise) {
+    resolvePromise(inputModel.value)
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  visible.value = false
+  emit('update:visible', false)
+
+  // 拒绝 Promise
+  if (rejectPromise) {
+    rejectPromise()
+    resolvePromise = null
+    rejectPromise = null
+  }
+}
+
+const handleMaskClick = () => {
+  if (props.maskClosable) {
+    handleCancel() // 点击遮罩相当于取消
+  }
+}
+
+// 添加/移除 body 滚动锁定
+const lockBodyScroll = () => {
+  document.body.style.overflow = 'hidden'
+}
+
+const unlockBodyScroll = () => {
+  document.body.style.overflow = ''
+}
+
+onMounted(() => {
+  if (visible.value) {
+    lockBodyScroll()
+  }
+})
+
+onUnmounted(() => {
+  unlockBodyScroll()
+})
+
+// 监听 visible 变化
+watch(visible, newVal => {
+  if (newVal) {
+    lockBodyScroll()
+  } else {
+    unlockBodyScroll()
+  }
+})
+
+// 暴露 show 方法给父组件使用
+defineExpose({ show })
+</script>
+
+<style scoped>
+.pd-mask {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999999999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: inherit;
+  background: var(--confirmBg, inherit);
+}
+
+.pd-confirm {
+  background: inherit;
+  background: var(--confirmTheme, #fff);
+  text-align: center;
+  color: var(--confirmColor, #636363);
+  font-size: var(--confirmFontSize, 1rem);
+  max-width: 75vw;
+  min-width: 20em;
+  box-shadow: 0px 35px 35px -10px rgba(0, 0, 0, 0.33);
+  border-radius: 10px;
+  position: relative;
+  white-space: break-spaces;
+  word-break: break-all;
+  overflow: hidden;
+}
+
+.pd-plan {
+  background: inherit;
+  background: rgba(255, 255, 255, 0.66);
+  filter: blur(10px) saturate(2);
+  position: absolute;
+  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.pd-title {
+  position: relative;
+  font-size: 1.3em;
+  min-height: 1em;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  margin: 0;
+  padding: 0.5em 0;
+}
+
+.pd-message {
+  position: relative;
+  border-top: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  width: 100%;
+  max-height: 70vh;
+  border-bottom: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 2em 10%;
+  line-height: 1.4;
+  overflow: auto;
+}
+
+.pd-input-container {
+  margin-block: 1.5em;
+  padding: 0 10% 1em;
+  position: relative;
+  z-index: 2;
+}
+
+.pd-input {
+  width: 100%;
+  padding: 0.8em;
+  font-size: 1em;
+  border: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  border-radius: 4px;
+  box-sizing: border-box;
+  outline: none;
+  background: var(--confirmTheme, #fff);
+  color: var(--confirmColor, #636363);
+  box-shadow: 0px 0px 4px inset rgba(0, 0, 0, 0.12);
+}
+
+.pd-input::placeholder {
+  color: var(--black-20);
+}
+
+.pd-input:focus {
+  border-color: #4d90fe;
+}
+
+.pd-input::selection {
+  background-color: #4d90fe; /* 选中时的背景颜色 */
+  color: #ffffff; /* 选中时的文字颜色 */
+}
+
+.pd-buttons {
+  display: flex;
+}
+
+.pd-button {
+  position: relative;
+  width: 100%;
+  font-size: 1em;
+  appearance: none;
+  background: var(--confirmBtnBg, #fafafa);
+  color: var(--confirmBtnColor, #636363);
+  border: none;
+  border-right: 1px solid var(--confirmBtnBorder, #f1f1f1);
+  padding: 1em 0;
+  cursor: pointer;
+  outline: none;
+}
+
+/* 当同时显示确认和取消按钮时，每个按钮占50%宽度 */
+.pd-button:first-child:nth-last-child(2),
+.pd-button:first-child:nth-last-child(2) ~ .pd-button {
+  width: 50%;
+}
+
+/* 当只显示一个按钮时，该按钮占100%宽度 */
+.pd-button:first-child:nth-last-child(1) {
+  width: 100%;
+  border-right: none;
+}
+
+/* 只有最后一个按钮没有右边框 */
+.pd-button:last-child {
+  border-right: none;
+}
+</style>
diff --git a/src/pages/NoteListPage.vue b/src/pages/NoteListPage.vue
index 5d5c7b5..c3fe96a 100644
--- a/src/pages/NoteListPage.vue
+++ b/src/pages/NoteListPage.vue
@@ -283,7 +283,7 @@ const handleTrashNotesClick = () => {
   setIsFolderExpanded(false)
 }
 
-const handleFolderClick = (folderId) => {
+const handleFolderClick = folderId => {
   setCurrentFolder(folderId)
   setIsFolderExpanded(false)
 }