DEBUG 取消选中某项

pages/blog/index.vue

@@ -44,10 +44,11 @@ div.container.mx-auto.py-24.flex.gap-8(
   aside.w-64.py-2.flex.flex-col.gap-8(class="<sm:hidden")
     div
       span.font-bold # TAG
-      ul.flex.flex-wrap.gap-2.py-1
+      ul.flex.flex-wrap.gap-2.py-1(v-if="!tagPending")
+        // v-for="item in ['vue','react','node']" :key="item"
         li.bg-gray-400.bg-opacity-10.px-2.rounded-md.cursor-pointer.overflow-clip(
           class="hover:text-pink-500"
-          v-for="item in ['vue','react','node']" :key="item"
+          v-for="item in tags" :key="item"
         ) {{ item }}
     div.flex.flex-col.gap-2
       span.font-bold # 归档
@@ -100,10 +101,17 @@ div.container.mx-auto.py-24.flex.gap-8(
         @keydown.ctrl.enter.prevent="comments.submit()"
         @click.stop
       )
+  // 选中时显示操作项
+  div.fixed.bottom-0.left-0.right-0(v-if="select_items.length")
+    button {{ select_items.length === 1 ? '删除' : '批量删除' }} (Delete)
+    button(v-if="select_items.length === 1") 编辑(E)
+    button 取消(Esc)
 </template>
 
 <script setup>
-const { data, pending } = useFetch("/api/blog", { immediate: true });
+const { data: tags, pending: tagPending } = useFetch("/api/tag", { immediate: true })
+const { data, pending } = useFetch("/api/blog", { immediate: true })
+
 const content = ref("");
 const account = useState("account");
 const editor = ref({
@@ -247,7 +255,8 @@ const __select_item = (item) => {
 
 // 取消选中某项(无选项时, 恢复显示视焦外的元素)
 const __unselect_item = (item) => {
-  select_items.value = select_items.value.filter(i => i !== item);
+  console.log('取消选中:', item)
+  select_items.value.splice(select_items.value.indexOf(item))
   if (select_items.value.length === 0) {
     document.querySelectorAll('header.header, .create-blog').forEach((item) => {
       item.classList.remove('opacity-0');

server/api/tag/index.js

@@ -1,12 +1,16 @@
 export default defineEventHandler(async event => {
-    const tags = useStorage('tags')
+    const blogs = useStorage('blog')
 
     if (event.node.req.method === 'GET') {
-        return await tags.getKeys().then(keys => {
+        return [...new Set(
+            (await blogs.getKeys().then(keys => {
                 return Promise.all(keys.map(async key => {
-                return tags.getItem(key).then(data => data)
-            }))
+                    return blogs.getItem(key).then(data => {
+                        return data.tags || []
                     })
+                }))
+            })).flat()
+        )]
     }
 
 })