feat: refine list and folder edit menus

frontend/src/App.vue

@@ -59,6 +59,11 @@ const selectedTask = ref<Task | null>(null)
 const sidebarCreateOpen = ref(false)
 const sidebarAction = ref<{ kind: 'folders' | 'lists'; item: FolderItem | TaskList } | null>(null)
 const listMoveMenuOpen = ref(false)
+const sidebarActionFolderListCount = computed(() => {
+  const action = sidebarAction.value
+  if (!action || action.kind !== 'folders') return 0
+  return lists.value.filter((list) => list.folder_id === action.item.id).length
+})
 const listDrag = ref<{ id: string; pointerId: number; startX: number; startY: number; offsetY: number; lastX: number; lastY: number } | null>(null)
 const listDropFolderId = ref<string | null | undefined>(undefined)
 const listReorderTarget = ref('')
@@ -1186,7 +1191,8 @@ function cancelListDrag() {
   listDropFolderId.value = undefined
   listReorderTarget.value = ''
 }
-function openListMoveMenu() { listMoveMenuOpen.value = !listMoveMenuOpen.value }
+function openListMoveMenu() { listMoveMenuOpen.value = true }
+function closeListMoveMenu() { listMoveMenuOpen.value = false }
 function moveListFromMenu(folderId: string | null) {
   const item = sidebarAction.value?.kind === 'lists' ? sidebarAction.value.item as TaskList : null
   if (!item) return
@@ -1326,7 +1332,46 @@ onUnmounted(() => {
         <button :class="{active:activeView==='trash'}" @click="switchView('trash')"><Trash2 />回收站</button>
         <button :class="{active:activeView==='settings'}" @click="switchView('settings')"><Settings />设置</button>
       </nav>
-      <div v-if="sidebarAction" class="sidebar-action-mask app-sheet-mask" @click.self="closeSidebarAction"><section class="sidebar-action-sheet app-sheet app-sheet--actions" role="dialog" aria-modal="true" :aria-label="`${sidebarAction.item.name}操作`"><header class="app-sheet__header"><b>{{sidebarAction.item.name}}</b><button class="icon" aria-label="关闭清单操作" @click="closeSidebarAction"><X/></button></header><div class="app-sheet__body"><button @click="renameEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><Pencil/>重命名</button><button v-if="sidebarAction.kind==='folders'" @click="createList(sidebarAction.item.id);closeSidebarAction()"><Plus/>新建清单</button><template v-if="sidebarAction.kind==='lists'"><button aria-label="上移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'up')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'up')">上移</button><button aria-label="下移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'down')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'down')">下移</button><button aria-label="移动到文件夹" aria-haspopup="menu" :aria-expanded="listMoveMenuOpen" @click="openListMoveMenu"><Folder/>移动到文件夹</button><div v-if="listMoveMenuOpen" class="list-move-menu" role="menu" aria-label="选择目标文件夹"><button v-if="(sidebarAction.item as TaskList).folder_id" role="menuitem" @click="moveListFromMenu(null)">移出文件夹</button><button v-for="folder in folders" :key="folder.id" role="menuitem" :disabled="(sidebarAction.item as TaskList).folder_id===folder.id" @click="moveListFromMenu(folder.id)">{{folder.name}}</button></div></template><button class="danger" @click="deleteEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><component :is="sidebarAction.kind==='folders' ? Trash2 : ArchiveRestore"/>{{sidebarAction.kind==='folders'?'删除文件夹':'归档清单'}}</button></div></section></div>
+      <div v-if="sidebarAction" class="sidebar-action-mask app-sheet-mask" @click.self="closeSidebarAction">
+        <section class="sidebar-action-sheet app-sheet app-sheet--actions" role="dialog" aria-modal="true" :aria-label="`${sidebarAction.item.name}操作`">
+          <template v-if="!listMoveMenuOpen">
+            <header class="app-sheet__header sidebar-action-header">
+              <div><span class="sidebar-action-kind">{{sidebarAction.kind==='folders'?'文件夹':'清单'}}</span><b>{{sidebarAction.item.name}}</b></div>
+              <button class="icon" :aria-label="`关闭${sidebarAction.kind==='folders'?'文件夹':'清单'}操作`" @click="closeSidebarAction"><X/></button>
+            </header>
+            <div class="app-sheet__body sidebar-action-body">
+              <section class="sidebar-action-group" aria-label="常用操作">
+                <span class="sidebar-action-group-title">常用操作</span>
+                <button @click="renameEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><Pencil/><span>重命名</span></button>
+                <button v-if="sidebarAction.kind==='folders'" @click="createList(sidebarAction.item.id);closeSidebarAction()"><Plus/><span>新建清单</span></button>
+              </section>
+              <section v-if="sidebarAction.kind==='lists'" class="sidebar-action-group" aria-label="整理清单">
+                <span class="sidebar-action-group-title">整理清单</span>
+                <button aria-label="上移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'up')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'up')"><ChevronDown class="sidebar-action-up"/><span>上移</span></button>
+                <button aria-label="下移清单" :disabled="!canMoveListWithinScope(sidebarAction.item as TaskList, 'down')" @click="moveListWithinScope(sidebarAction.item as TaskList, 'down')"><ChevronDown/><span>下移</span></button>
+                <button aria-label="移动到文件夹" aria-haspopup="menu" :aria-expanded="listMoveMenuOpen" @click="openListMoveMenu"><Folder/><span>{{(sidebarAction.item as TaskList).folder_id?'更改所在文件夹':'移动到文件夹'}}</span><ChevronRight class="sidebar-action-chevron"/></button>
+              </section>
+              <section class="sidebar-action-danger">
+                <span>{{sidebarAction.kind==='folders' ? `删除后，其中 ${sidebarActionFolderListCount} 个清单会移到“我的清单”` : '任务会保留，可从“已归档”恢复'}}</span>
+                <button class="danger" @click="deleteEntity(sidebarAction.kind,sidebarAction.item);closeSidebarAction()"><component :is="sidebarAction.kind==='folders' ? Trash2 : ArchiveRestore"/><span>{{sidebarAction.kind==='folders'?'删除文件夹':'归档清单'}}</span></button>
+              </section>
+            </div>
+          </template>
+          <template v-if="listMoveMenuOpen">
+            <header class="app-sheet__header sidebar-action-move-view">
+              <button class="sidebar-action-move-back" aria-label="返回清单操作" @click="closeListMoveMenu"><ChevronRight/></button>
+              <div><span class="sidebar-action-kind">清单位置</span><b class="sidebar-action-move-title">选择目标位置</b></div>
+              <button class="icon" aria-label="关闭清单操作" @click="closeSidebarAction"><X/></button>
+            </header>
+            <div class="app-sheet__body sidebar-action-body">
+              <div class="list-move-menu" role="menu" aria-label="选择目标文件夹">
+                <button role="menuitem" :class="{'list-move-current':!(sidebarAction.item as TaskList).folder_id}" :disabled="!(sidebarAction.item as TaskList).folder_id" @click="moveListFromMenu(null)"><ListTodo/><span>我的清单</span><Check v-if="!(sidebarAction.item as TaskList).folder_id"/></button>
+                <button v-for="folder in folders" :key="folder.id" role="menuitem" :class="{'list-move-current':(sidebarAction.item as TaskList).folder_id===folder.id}" :disabled="(sidebarAction.item as TaskList).folder_id===folder.id" @click="moveListFromMenu(folder.id)"><Folder/><span>{{folder.name}}</span><Check v-if="(sidebarAction.item as TaskList).folder_id===folder.id"/></button>
+              </div>
+            </div>
+          </template>
+        </section>
+      </div>
     </aside>
 
     <main @touchstart="startSearchPull" @touchmove="moveSearchPull" @touchend="finishSearchPull" @touchcancel="cancelSearchPull">