feat: add tree line

src/views/able/line-tree.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import ElTreeLine from "/@/components/ReTreeLine";
+import { extractPathList, deleteChildren } from "/@/utils/tree";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+
+let menusData = computed(() => {
+  return deleteChildren(usePermissionStoreHook().menusTree);
+});
+let expandedKeys = extractPathList(menusData.value);
+let dataProps = {
+  value: "uniqueId",
+  children: "children"
+};
+</script>
+
+<template>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          扩展elemenet-plus的树形组件包括虚拟树组件，支持连接线
+        </span>
+      </div>
+    </template>
+
+    <el-row :gutter="24">
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span class="font-medium"> 普通树结构 </span>
+            </div>
+          </template>
+          <div class="max-h-550px overflow-y-auto">
+            <el-tree
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              default-expand-all
+              node-key="uniqueId"
+              :indent="30"
+              ><template v-slot:default="{ node }">
+                <el-tree-line :node="node" :showLabelLine="true">
+                  <template v-slot:node-label>
+                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-card>
+          <template #header>
+            <div class="card-header">
+              <span class="font-medium"> 虚拟树结构 </span>
+            </div>
+          </template>
+          <div class="max-h-550px overflow-y-auto">
+            <el-tree-v2
+              :data="menusData"
+              :props="dataProps"
+              show-checkbox
+              :height="550"
+              :default-expanded-keys="expandedKeys"
+            >
+              <template v-slot:default="{ node }">
+                <el-tree-line
+                  :node="node"
+                  :treeData="menusData"
+                  :showLabelLine="true"
+                  :indent="30"
+                >
+                  <template v-slot:node-label>
+                    <span class="text-sm">{{ $t(node.data.meta.title) }}</span>
+                  </template>
+                </el-tree-line>
+              </template>
+            </el-tree-v2>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>

src/views/able/timeline.vue

@@ -26,6 +26,7 @@ const activities = [
   {
     content: "支持自定义图标",
     timestamp: lastBuildTime,
+    color: "transparent",
     icon: useRenderIcon("iphone", {
       color: "#0bbd87"
     })