A: 引入新组件库并配置 unplugin-vue-components 自动生成组件声明

A: 实现树状结构示例并添加点击事件处理逻辑
A: 新增 `pnpm-lock.yaml` 文件，记录依赖版本及锁定信息
U: 更新 HomeView，布局中集成 Element Plus 的 `Tree` 组件与响应式布局

ClientApp/src/constants/app.ts

@@ -27,7 +27,7 @@ const app = {
   /**
    * 是否展示生成路由
    */
-  IS_SHOW_GENERATE_ROUTER: true
+  IS_SHOW_GENERATE_ROUTER: false
 }
 
 export default app

ClientApp/src/main.ts

@@ -6,13 +6,11 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 const app = createApp(App)
 
-import ElementPlus from 'element-plus'
-
-import { presetMini } from 'unocss'
-
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)

ClientApp/src/views/HomeView.vue

@@ -1,17 +1,104 @@
 <script setup lang="ts">
 import TheWelcome from '../components/TheWelcome.vue'
+interface Tree {
+  label: string
+  children?: Tree[]
+}
+
+const handleNodeClick = (data: Tree) => {
+  console.log(data)
+}
+
+const data: Tree[] = [
+  {
+    label: 'Level one 1',
+    children: [
+      {
+        label: 'Level two 1-1',
+        children: [
+          {
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Level one 2',
+    children: [
+      {
+        label: 'Level two 2-1',
+        children: [
+          {
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        label: 'Level two 2-2',
+        children: [
+          {
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Level one 3',
+    children: [
+      {
+        label: 'Level two 3-1',
+        children: [
+          {
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        label: 'Level two 3-2',
+        children: [
+          {
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
 </script>
 
 <template>
-  <main>
-<!--  左侧信息栏-->
-<h1>测试</h1>
-<!--    左侧顶部搜索栏-->
-<!--    左侧底部信息展示栏-->
-
-
-<!--    右侧-->
-
-<!--    底部信息栏-->
-  </main>
+  <div class="w-full h-full flex flex-col ">
+    <el-row class="h-100">
+      <el-col  :span="10">
+        <el-tree
+          style="max-width: 600px"
+          :data="data"
+          :props="defaultProps"
+          @node-click="handleNodeClick"
+        />      </el-col>
+      <el-col :span="14">
+        <div class="grid-content h-full bg-green" />
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <div class="grid-content bg-blue" />
+      </el-col>
+    </el-row>
+  </div>
 </template>
+
+<style scoped>
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+</style>