perf: categories in the post list filters supports showing whether there is a password or not (#541)

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/components/Category/CategorySelectTree.vue

@@ -6,6 +6,7 @@
     v-model="categoryIdString"
     placeholder="请选择上级目录，默认为顶级目录"
     treeDefaultExpandAll
+    @change="handleChange"
   >
   </a-tree-select>
 </template>
@@ -23,26 +24,23 @@ export default {
       type: Array,
       required: false,
       default: () => []
-    }
-  },
-  computed: {
-    categoryTreeData() {
-      return [
-        {
+    },
+    root: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {
           id: 0,
           title: '根目录',
           value: '0',
           pId: -1
-        },
-        ...this.categories.map(category => {
-          return {
-            id: category.id,
-            title: category.name,
-            value: category.id.toString(),
-            pId: category.parentId
-          }
-        })
-      ]
+        }
+      }
+    }
+  },
+  computed: {
+    categoryTreeData() {
+      return [this.root, ...this.convertDataToTree(this.categories)]
     },
     categoryIdString: {
       get() {
@@ -52,6 +50,52 @@ export default {
         this.$emit('update:categoryId', value ? parseInt(value) : 0)
       }
     }
+  },
+  methods: {
+    handleChange() {
+      this.$emit('change')
+    },
+
+    convertDataToTree(categories) {
+      const hashMap = {}
+      const treeData = []
+      categories.forEach(
+        category =>
+          (hashMap[category.id] = {
+            ...category,
+            title: category.name,
+            value: category.id.toString(),
+            pId: category.parentId,
+            children: []
+          })
+      )
+      categories.forEach(category => {
+        const current = hashMap[category.id]
+        if (category.parentId) {
+          hashMap[category.parentId].children.push(current)
+        } else {
+          treeData.push(current)
+        }
+      })
+
+      // set hasPassword field for tree node
+      const setHasPasswordField = (categories, hasPassword = false) => {
+        categories.forEach(category => {
+          category.hasPassword = !!category.password || hasPassword
+          if (category.hasPassword) {
+            category.title = `${category.title}（加密）`
+          }
+          if (Object.hasOwn(category, 'postCount')) {
+            category.title = `${category.title} - ${category.postCount} 篇`
+          }
+          if (category.children && category.children.length) {
+            setHasPasswordField(category.children, category.hasPassword)
+          }
+        })
+      }
+      setHasPasswordField(treeData)
+      return treeData
+    }
   }
 }
 </script>

src/components/Post/PostListView.vue

@@ -25,17 +25,17 @@
             </a-col>
             <a-col :md="6" :sm="24">
               <a-form-item label="分类目录：">
-                <a-select
-                  v-model="list.params.categoryId"
-                  :loading="categories.loading"
-                  allowClear
-                  placeholder="请选择分类"
-                  @change="handleQuery()"
-                >
-                  <a-select-option v-for="category in categories.data" :key="category.id">
-                    {{ category.name }}({{ category.postCount }})
-                  </a-select-option>
-                </a-select>
+                <CategorySelectTree
+                  :categories="categories.data"
+                  :category-id.sync="list.params.categoryId"
+                  :root="{
+                    id: 0,
+                    title: '全部',
+                    value: '0',
+                    pId: -1
+                  }"
+                  @change="handleQuery"
+                />
               </a-form-item>
             </a-col>
 
@@ -437,6 +437,7 @@
 // components
 import PostSettingModal from './PostSettingModal.vue'
 import TargetCommentListModal from '@/components/Comment/TargetCommentListModal'
+import CategorySelectTree from '@/components/Category/CategorySelectTree'
 
 // libs
 import { mixinDevice } from '@/mixins/mixin.js'
@@ -447,7 +448,8 @@ export default {
   name: 'PostListView',
   components: {
     PostSettingModal,
-    TargetCommentListModal
+    TargetCommentListModal,
+    CategorySelectTree
   },
   mixins: [mixinDevice],
   props: {
@@ -542,6 +544,9 @@ export default {
         if (enableLoading) {
           this.list.loading = true
         }
+
+        const { categoryId } = this.list.params
+        this.list.params.categoryId = categoryId === 0 ? undefined : categoryId
         const response = await apiClient.post.list(this.list.params)
 
         this.list.data = response.data.content