diff --git a/src/components/Category/CategoryTree.vue b/src/components/Category/CategoryTree.vue
index c28a271b..711d165e 100644
--- a/src/components/Category/CategoryTree.vue
+++ b/src/components/Category/CategoryTree.vue
@@ -1,7 +1,8 @@
 <template>
   <a-tree
+    v-if="!categories.loading"
     :checkedKeys="categoryIds"
-    :treeData="categoryTree"
+    :treeData.sync="categories.data"
     checkStrictly
     checkable
     defaultExpandAll
@@ -14,37 +15,6 @@
 <script>
 import apiClient from '@/utils/api-client'
 
-function concreteTree(parentCategory, categories) {
-  categories.forEach(category => {
-    if (parentCategory.key === category.parentId) {
-      if (!parentCategory.children) {
-        parentCategory.children = []
-      }
-      parentCategory.children.push({
-        key: category.id,
-        title: category.name,
-        isLeaf: false
-      })
-    }
-  })
-
-  if (parentCategory.children) {
-    parentCategory.children.forEach(category => concreteTree(category, categories))
-  } else {
-    parentCategory.isLeaf = true
-  }
-}
-
-function getConcreteTree(categories) {
-  const topCategoryNode = {
-    key: 0,
-    title: 'top',
-    children: []
-  }
-  concreteTree(topCategoryNode, categories)
-  return topCategoryNode.children
-}
-
 export default {
   name: 'CategoryTree',
   model: {
@@ -66,14 +36,6 @@ export default {
       }
     }
   },
-  computed: {
-    categoryTree() {
-      if (!this.categories.data.length) {
-        return []
-      }
-      return getConcreteTree(this.categories.data)
-    }
-  },
   created() {
     this.handleListCategories()
   },
@@ -84,7 +46,7 @@ export default {
 
         const { data } = await apiClient.category.list({ sort: [], more: false })
 
-        this.categories.data = data
+        this.categories.data = this.convertDataToTree(data)
       } catch (error) {
         this.$log.error(error)
       } finally {
@@ -92,6 +54,37 @@ export default {
       }
     },
 
+    convertDataToTree(categories) {
+      const hashMap = {}
+      const treeData = []
+      categories.forEach(
+        category => (hashMap[category.id] = { ...category, key: category.id, title: category.name, 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 (category.children && category.children.length) {
+            setHasPasswordField(category.children, category.hasPassword)
+          }
+        })
+      }
+      setHasPasswordField(treeData)
+      return treeData
+    },
+
     onCheck(checkedKeys, e) {
       this.$log.debug('Chekced keys', checkedKeys)
       this.$log.debug('e', e)