@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TreeDemo.vue

@@ -1,255 +1,255 @@
-<template>
-  <div class="tree-demo">
-    <h1>树组件示例</h1>
-
-    <h2>基础树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" />
-    </div>
-
-    <h2>可选择的树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" checkable v-model="checkedValue" @change="handleChange" />
-      <div class="result-panel">
-        <p>当前选中值: {{ checkedValue.join(', ') }}</p>
-      </div>
-    </div>
-
-    <h2>带禁用节点的树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" checkable :disable-check="disableTreeNode" />
-      <div class="description">
-        <p>通过 disableCheck 函数自定义禁用节点，所有值为"1.1"的节点无法被勾选</p>
-      </div>
-    </div>
-
-    <h2>带连接线的树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" line v-model:expanded="expandedNodes" />
-    </div>
-
-    <h2>启用动画效果的树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" line :transition="true" />
-      <div class="description">
-        <p>启用节点展开/收起的过渡动画效果</p>
-      </div>
-    </div>
-
-    <h2>可拖拽的树</h2>
-    <div class="demo-section">
-      <EbizTree 
-        :items="treeData" 
-        draggable
-        @drag-drop="handleDragDrop"
-      />
-    </div>
-    
-    <h2>自定义图标的树</h2>
-    <div class="demo-section">
-      <EbizTree :items="treeData" line>
-        <template #icon="{ node }">
-          <span v-if="node.children && node.children.length">📁</span>
-          <span v-else>📄</span>
-        </template>
-      </EbizTree>
-    </div>
-
-    <h2>节点操作</h2>
-    <div class="demo-section">
-      <EbizTree :items="operableTreeData" line>
-        <template #operations="{ node }">
-          <div class="node-operations">
-            <button @click.stop="addChildNode(node)">添加</button>
-            <button @click.stop="removeNode(node)">删除</button>
-          </div>
-        </template>
-      </EbizTree>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizTree } from '../index.js';
-
-// 树的数据
-const treeData = ref([
-  {
-    label: '节点1',
-    value: '1',
-    children: [
-      {
-        label: '节点1.1',
-        value: '1.1',
-        children: [
-          {
-            label: '节点1.1.1',
-            value: '1.1.1'
-          },
-          {
-            label: '节点1.1.2',
-            value: '1.1.2'
-          }
-        ]
-      },
-      {
-        label: '节点1.2',
-        value: '1.2'
-      }
-    ]
-  },
-  {
-    label: '节点2',
-    value: '2',
-    children: [
-      {
-        label: '节点2.1',
-        value: '2.1'
-      },
-      {
-        label: '节点2.2',
-        value: '2.2'
-      }
-    ]
-  }
-]);
-
-// 禁用特定节点选择的函数
-const disableTreeNode = (node) => {
-  return node.value === '1.1';
-};
-
-// 可操作的树数据
-const operableTreeData = ref([
-  {
-    label: '节点1',
-    value: '1',
-    children: [
-      {
-        label: '节点1.1',
-        value: '1.1'
-      }
-    ]
-  },
-  {
-    label: '节点2',
-    value: '2',
-    children: []
-  }
-]);
-
-// 选中的值
-const checkedValue = ref([]);
-
-// 展开的节点
-const expandedNodes = ref(['1', '1.1']);
-
-// 选中值变化处理
-const handleChange = (values, context) => {
-  console.log('选中值变化：', values);
-  console.log('选中上下文：', context);
-};
-
-// 拖拽处理
-const handleDragDrop = (context) => {
-  console.log('拖拽结束：', context);
-};
-
-// 添加子节点
-const addChildNode = (node) => {
-  const newNodeId = `${node.value}-${Date.now()}`;
-  const newNode = {
-    label: `节点${newNodeId}`,
-    value: newNodeId,
-    children: []
-  };
-  
-  if (!node.children) {
-    node.children = [];
-  }
-  
-  node.children.push(newNode);
-};
-
-// 删除节点
-const removeNode = (node) => {
-  // 找到父节点，从父节点的children中删除当前节点
-  operableTreeData.value = removeNodeByValue(operableTreeData.value, node.value);
-};
-
-// 根据值递归删除节点
-const removeNodeByValue = (nodes, value) => {
-  return nodes.filter(node => {
-    if (node.value === value) {
-      return false;
-    }
-    
-    if (node.children && node.children.length) {
-      node.children = removeNodeByValue(node.children, value);
-    }
-    
-    return true;
-  });
-};
-</script>
-
-<style scoped>
-.tree-demo {
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 20px;
-    font-size: 24px;
-  }
-  
-  h2 {
-    margin-top: 30px;
-    margin-bottom: 15px;
-    font-size: 20px;
-  }
-  
-  .demo-section {
-    margin-bottom: 30px;
-    padding: 20px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-  }
-  
-  .result-panel {
-    margin-top: 16px;
-    padding: 10px;
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    
-    p {
-      margin: 0;
-    }
-  }
-  
-  .node-operations {
-    display: inline-flex;
-    margin-left: 8px;
-    
-    button {
-      margin-left: 4px;
-      padding: 2px 6px;
-      font-size: 12px;
-      background-color: #f0f0f0;
-      border: 1px solid #ddd;
-      border-radius: 3px;
-      cursor: pointer;
-      
-      &:hover {
-        background-color: #e0e0e0;
-      }
-    }
-  }
-  
-  .description {
-    margin-top: 10px;
-    color: #666;
-    font-size: 14px;
-  }
-}
+<template>
+  <div class="tree-demo">
+    <h1>树组件示例</h1>
+
+    <h2>基础树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" />
+    </div>
+
+    <h2>可选择的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" checkable v-model="checkedValue" @change="handleChange" />
+      <div class="result-panel">
+        <p>当前选中值: {{ checkedValue.join(', ') }}</p>
+      </div>
+    </div>
+
+    <h2>带禁用节点的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" checkable :disable-check="disableTreeNode" />
+      <div class="description">
+        <p>通过 disableCheck 函数自定义禁用节点，所有值为"1.1"的节点无法被勾选</p>
+      </div>
+    </div>
+
+    <h2>带连接线的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line v-model:expanded="expandedNodes" />
+    </div>
+
+    <h2>启用动画效果的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line :transition="true" />
+      <div class="description">
+        <p>启用节点展开/收起的过渡动画效果</p>
+      </div>
+    </div>
+
+    <h2>可拖拽的树</h2>
+    <div class="demo-section">
+      <EbizTree 
+        :items="treeData" 
+        draggable
+        @drag-drop="handleDragDrop"
+      />
+    </div>
+    
+    <h2>自定义图标的树</h2>
+    <div class="demo-section">
+      <EbizTree :items="treeData" line>
+        <template #icon="{ node }">
+          <span v-if="node.children && node.children.length">📁</span>
+          <span v-else>📄</span>
+        </template>
+      </EbizTree>
+    </div>
+
+    <h2>节点操作</h2>
+    <div class="demo-section">
+      <EbizTree :items="operableTreeData" line>
+        <template #operations="{ node }">
+          <div class="node-operations">
+            <button @click.stop="addChildNode(node)">添加</button>
+            <button @click.stop="removeNode(node)">删除</button>
+          </div>
+        </template>
+      </EbizTree>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizTree } from '../index.js';
+
+// 树的数据
+const treeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1',
+        children: [
+          {
+            label: '节点1.1.1',
+            value: '1.1.1'
+          },
+          {
+            label: '节点1.1.2',
+            value: '1.1.2'
+          }
+        ]
+      },
+      {
+        label: '节点1.2',
+        value: '1.2'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: [
+      {
+        label: '节点2.1',
+        value: '2.1'
+      },
+      {
+        label: '节点2.2',
+        value: '2.2'
+      }
+    ]
+  }
+]);
+
+// 禁用特定节点选择的函数
+const disableTreeNode = (node) => {
+  return node.value === '1.1';
+};
+
+// 可操作的树数据
+const operableTreeData = ref([
+  {
+    label: '节点1',
+    value: '1',
+    children: [
+      {
+        label: '节点1.1',
+        value: '1.1'
+      }
+    ]
+  },
+  {
+    label: '节点2',
+    value: '2',
+    children: []
+  }
+]);
+
+// 选中的值
+const checkedValue = ref([]);
+
+// 展开的节点
+const expandedNodes = ref(['1', '1.1']);
+
+// 选中值变化处理
+const handleChange = (values, context) => {
+  console.log('选中值变化：', values);
+  console.log('选中上下文：', context);
+};
+
+// 拖拽处理
+const handleDragDrop = (context) => {
+  console.log('拖拽结束：', context);
+};
+
+// 添加子节点
+const addChildNode = (node) => {
+  const newNodeId = `${node.value}-${Date.now()}`;
+  const newNode = {
+    label: `节点${newNodeId}`,
+    value: newNodeId,
+    children: []
+  };
+  
+  if (!node.children) {
+    node.children = [];
+  }
+  
+  node.children.push(newNode);
+};
+
+// 删除节点
+const removeNode = (node) => {
+  // 找到父节点，从父节点的children中删除当前节点
+  operableTreeData.value = removeNodeByValue(operableTreeData.value, node.value);
+};
+
+// 根据值递归删除节点
+const removeNodeByValue = (nodes, value) => {
+  return nodes.filter(node => {
+    if (node.value === value) {
+      return false;
+    }
+    
+    if (node.children && node.children.length) {
+      node.children = removeNodeByValue(node.children, value);
+    }
+    
+    return true;
+  });
+};
+</script>
+
+<style scoped>
+.tree-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 15px;
+    font-size: 20px;
+  }
+  
+  .demo-section {
+    margin-bottom: 30px;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+  }
+  
+  .result-panel {
+    margin-top: 16px;
+    padding: 10px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    
+    p {
+      margin: 0;
+    }
+  }
+  
+  .node-operations {
+    display: inline-flex;
+    margin-left: 8px;
+    
+    button {
+      margin-left: 4px;
+      padding: 2px 6px;
+      font-size: 12px;
+      background-color: #f0f0f0;
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      cursor: pointer;
+      
+      &:hover {
+        background-color: #e0e0e0;
+      }
+    }
+  }
+  
+  .description {
+    margin-top: 10px;
+    color: #666;
+    font-size: 14px;
+  }
+}
 </style>