feat(components): 新增 CustomTreeItem 组件并在 TestView 中使用

- 在 src/components 目录下创建了 CustomTreeItem.vue 文件
- 在 TestView.vue 中引入并使用了 CustomTreeItem 组件
- 调整了 TestView.vue 中的模态框和树形结构的显示逻辑

package.json

@@ -14,9 +14,7 @@
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
     "ant-design-vue": "^4.2.5",
-    "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.12",
     "pinia": "^2.1.7",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
@@ -27,6 +25,8 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
+    "js-cookie": "^3.0.5",
+    "marked": "^15.0.12",
     "prettier": "^3.2.5",
     "vite": "6.3.4",
     "vite-plugin-vue-devtools": "^7.3.1"

src/components/CustomTreeItem.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  module: Object
+})
+
+const isFolder = computed(() => {
+  return props.module.children && props.module.children.length > 0
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function changeType() {
+  if (!isFolder.value) {
+    isOpen.value = true
+  }
+}
+
+const emit = defineEmits(['add-child'])
+
+function addChild() {
+  emit('add-child', props.module)
+}
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <li>
+    <div class="tree-item" @click="toggle" @dblclick="changeType">
+      {{ module.name }}<span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
+      <CustomTreeItem
+        v-for="child in module.children"
+        :key="child.id"
+        :module="child"
+        @add-child="$emit('add-child', $event)"
+      ></CustomTreeItem>
+      <li class="add" @click="addChild">+</li>
+    </div>
+  </li>
+</template>
+
+<style scoped></style>

src/views/TestView.vue

@@ -7,6 +7,7 @@ import HomeView from './HomeView.vue'
 import GameView from './GameView.vue'
 import CustomMarkDown from '@/components/CustomMarkDown.vue'
 import CustomModal from '@/components/CustomModal.vue'
+import CustomTreeItem from '@/components/CustomTreeItem.vue'
 
 const posts = ref([
   { id: 1, title: 'test01' },
@@ -25,6 +26,13 @@ const tabs = {
 
 const showModal = ref(false)
 
+const modle = ref({
+  name: 'Root',
+  children: [
+    { name: 'Child 1', children: [] },
+    { name: 'Child 2', children: [{ name: 'Grandchild 1', children: [] }] }
+  ]
+})
 </script>
 
 <template>
@@ -41,16 +49,11 @@ const showModal = ref(false)
     ></BlogPost>
   </div>
 
-  <AlertBox>
+  <AlertBox> test </AlertBox>
-    test
-  </AlertBox>
 
   <div class="demo">
-    <button
+    <button v-for="(_, tab) in tabs" :key="tab" @click="currentTab = tab">
-    v-for="(_, tab) in tabs"
+      {{ tab }}
-    :key="tab"
-    @click="currentTab = tab">
-      {{ tab }} 
     </button>
     <KeepAlive>
       <component :is="tabs[currentTab]" />
@@ -61,9 +64,7 @@ const showModal = ref(false)
     <CustomMarkDown />
   </div>
 
-  <button id="show-modal" @click="showModal = true">
+  <button id="show-modal" @click="showModal = true">Show Modal</button>
-    Show Modal
-  </button>
 
   <Teleport to="body">
     <CustomModal :show="showModal" @close="showModal = false">
@@ -72,6 +73,8 @@ const showModal = ref(false)
       </template>
     </CustomModal>
   </Teleport>
+
+  <CustomTreeItem :module="modle" />
 </template>
 
 <style scoped>