@ebiz/designer-components 0.0.18-beta.26 → 0.0.18-beta.28

package/src/views/Home.vue

@@ -1,98 +1,122 @@
-<template>
-  <div class="home">
-    <h1>组件库示例</h1>
-    <div class="component-list">
-      <div v-for="(item, index) in components" :key="index" class="component-item">
-        <router-link :to="item.path" class="component-link">
-          {{ item.title }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Home',
-  setup() {
-    const components = [
-      { path: '/my-component', title: '基础组件示例' },
-      { path: '/table', title: '表格组件示例' },
-      { path: '/form', title: '表单组件示例' },
-      { path: '/button', title: '按钮组件示例' },
-      { path: '/tdesign-button', title: 'TDesign按钮组件示例' },
-      { path: '/tdesign-icon', title: 'TDesign图标组件示例' },
-      { path: '/tdesign-input', title: 'TDesign输入框组件示例' },
-      { path: '/tdesign-select', title: 'TDesign选择器组件示例' },
-      { path: '/tdesign-form', title: 'TDesign表单组件示例' },
-      { path: '/tdesign-card', title: 'TDesign卡片组件示例' },
-      { path: '/tdesign-date-picker', title: 'TDesign日期选择器示例' },
-      { path: '/tdesign-image', title: 'TDesign图片组件示例' },
-      { path: '/tdesign-image-viewer', title: 'TDesign图片查看器组件示例' },
-      { path: '/data-container', title: '数据容器示例' },
-      { path: '/title', title: '标题组件示例' },
-      { path: '/okr-tree', title: 'OKR树形图示例' },
-      { path: '/remote-select', title: '远程选择器示例' },
-      { path: '/mindmap', title: '思维导图示例' },
-      { path: '/tdesign-calendar', title: 'TDesign日历组件示例' },
-      { path: '/tdesign-collapse', title: 'TDesign折叠面板组件示例' },
-      { path: '/tdesign-tag', title: 'TDesign标签组件示例' },
-      { path: '/ebiz-swiper', title: 'Ebiz轮播框组件示例' },
-      { path: '/ebiz-space', title: 'Ebiz间距组件示例' },
-      { path: '/pagination', title: 'EbizPagination分页组件示例' },
-      { path: '/checkbox', title: 'Ebiz多选框组件示例' },
-      { path: '/radio', title: 'Ebiz单选框组件示例' },
-      { path: '/switch', title: 'Ebiz开关组件示例' },
-      { path: '/textarea', title: 'Ebiz多行文本框组件示例' },
-      { path: '/upload', title: 'TDesign上传组件示例' },
-      { path: '/grid', title: 'TDesign栅格组件示例' },
-      { path: '/tabs', title: 'Ebiz选项卡组件示例' },
-      { path: '/statistic', title: 'Ebiz统计数值组件示例' },
-      { path: '/timeline', title: 'Ebiz时间轴组件示例' },
-      { path: '/watermark', title: 'TDesign水印组件示例' },
-      { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
-      { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
-      { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
-      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
-      { path: '/table-demo', title: 'Ebiz表格组件示例' },
-      { path: '/table-column', title: 'Ebiz表格列组件示例' },
-      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
-      { path: '/tree', title: 'Ebiz树组件示例' }
-    ]
-
-    return {
-      components
-    }
-  }
-}
-</script>
-
-<style scoped>
-.home {
-  padding: 20px;
-}
-
-.component-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.component-item {
-  background: #f5f5f5;
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.component-link {
-  color: #333;
-  text-decoration: none;
-  font-size: 16px;
-}
-
-.component-link:hover {
-  color: #1890ff;
-}
+<template>
+  <div class="home">
+    <h1>Ebiz 组件库</h1>
+    <div class="component-list">
+      <div v-for="(item, index) in components" :key="index" class="component-item">
+        <router-link :to="item.path" class="component-link">
+          {{ item.title }}
+        </router-link>
+      </div>
+      
+      <router-link to="/tree-demo" class="component-item">
+        <div class="component-title">树组件</div>
+        <div class="component-desc">用于展示层级结构和操作的组件</div>
+      </router-link>
+      
+      <router-link to="/tree-selector-demo" class="component-item">
+        <div class="component-title">树形选择器</div>
+        <div class="component-desc">基于树组件的选择器，支持搜索和多选</div>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home',
+  setup() {
+    const components = [
+      { path: '/my-component', title: '基础组件示例' },
+      { path: '/table', title: '表格组件示例' },
+      { path: '/form', title: '表单组件示例' },
+      { path: '/button', title: '按钮组件示例' },
+      { path: '/tdesign-button', title: 'TDesign按钮组件示例' },
+      { path: '/tdesign-icon', title: 'TDesign图标组件示例' },
+      { path: '/tdesign-input', title: 'TDesign输入框组件示例' },
+      { path: '/tdesign-select', title: 'TDesign选择器组件示例' },
+      { path: '/tdesign-form', title: 'TDesign表单组件示例' },
+      { path: '/tdesign-card', title: 'TDesign卡片组件示例' },
+      { path: '/tdesign-date-picker', title: 'TDesign日期选择器示例' },
+      { path: '/tdesign-image', title: 'TDesign图片组件示例' },
+      { path: '/tdesign-image-viewer', title: 'TDesign图片查看器组件示例' },
+      { path: '/data-container', title: '数据容器示例' },
+      { path: '/title', title: '标题组件示例' },
+      { path: '/okr-tree', title: 'OKR树形图示例' },
+      { path: '/remote-select', title: '远程选择器示例' },
+      { path: '/mindmap', title: '思维导图示例' },
+      { path: '/tdesign-calendar', title: 'TDesign日历组件示例' },
+      { path: '/tdesign-collapse', title: 'TDesign折叠面板组件示例' },
+      { path: '/tdesign-tag', title: 'TDesign标签组件示例' },
+      { path: '/ebiz-swiper', title: 'Ebiz轮播框组件示例' },
+      { path: '/ebiz-space', title: 'Ebiz间距组件示例' },
+      { path: '/pagination', title: 'EbizPagination分页组件示例' },
+      { path: '/checkbox', title: 'Ebiz多选框组件示例' },
+      { path: '/radio', title: 'Ebiz单选框组件示例' },
+      { path: '/switch', title: 'Ebiz开关组件示例' },
+      { path: '/textarea', title: 'Ebiz多行文本框组件示例' },
+      { path: '/upload', title: 'TDesign上传组件示例' },
+      { path: '/grid', title: 'TDesign栅格组件示例' },
+      { path: '/tabs', title: 'Ebiz选项卡组件示例' },
+      { path: '/statistic', title: 'Ebiz统计数值组件示例' },
+      { path: '/timeline', title: 'Ebiz时间轴组件示例' },
+      { path: '/watermark', title: 'TDesign水印组件示例' },
+      { path: '/ebiz-avatar', title: 'Ebiz头像组件示例' },
+      { path: '/ebiz-employee-info', title: 'Ebiz员工信息组件示例' },
+      { path: '/tdesign-alert', title: 'TDesign提示组件示例' },
+      { path: '/tdesign-dialog', title: 'TDesign对话框组件示例' },
+      { path: '/table-demo', title: 'Ebiz表格组件示例' },
+      { path: '/table-column', title: 'Ebiz表格列组件示例' },
+      { path: '/table-sort', title: 'Ebiz表格排序组件示例' },
+      { path: '/tree', title: 'Ebiz树组件示例' }
+    ]
+
+    return {
+      components
+    }
+  }
+}
+</script>
+
+<style scoped>
+.home {
+  padding: 20px;
+}
+
+.component-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.component-item {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.component-link {
+  color: #333;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.component-link:hover {
+  color: #1890ff;
+}
+
+.component-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.component-desc {
+  font-size: 14px;
+}
+
+.component-item:hover {
+  background-color: #e6e6e6;
+}
 </style> 

package/src/views/TreeDemo.vue

@@ -1,62 +1,63 @@
 <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"
-      />
+      <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"
-      />
+      <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 
+        draggable
         @drag-drop="handleDragDrop"
       />
     </div>
     
     <h2>自定义图标的树</h2>
     <div class="demo-section">
-      <EbizTree 
-        :items="treeData" 
-        line
-      >
+      <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
-      >
+      <EbizTree :items="operableTreeData" line>
         <template #operations="{ node }">
           <div class="node-operations">
             <button @click.stop="addChildNode(node)">添加</button>
@@ -114,6 +115,11 @@ const treeData = ref([
   }
 ]);
 
+// 禁用特定节点选择的函数
+const disableTreeNode = (node) => {
+  return node.value === '1.1';
+};
+
 // 可操作的树数据
 const operableTreeData = ref([
   {
@@ -239,5 +245,11 @@ const removeNodeByValue = (nodes, value) => {
       }
     }
   }
+  
+  .description {
+    margin-top: 10px;
+    color: #666;
+    font-size: 14px;
+  }
 }
 </style> 

package/src/views/TreeSelectorDemo.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="tree-selector-demo">
+    <h2>树选择器组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <t-button @click="showBasicSelector">打开基础树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedBasicData.length }} 项
+        <t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>预选中用法</h3>
+      <t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedPreData.length }} 项
+        <t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>自定义禁用规则</h3>
+      <t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedDisabledData.length }} 项
+        <t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+
+    <!-- 基础树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedBasicData"
+      :data="treeData"
+      title="选择人员/部门"
+      @change="handleChange"
+    />
+    
+    <!-- 预选中树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedPreData"
+      :data="treeData"
+      title="预选中的树选择器"
+    />
+    
+    <!-- 自定义禁用规则树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedDisabledData"
+      :data="treeData"
+      title="仅选择部门和岗位"
+      :disable-check="disableEmployeeCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import EbizTreeSelector from '../components/EbizTreeSelector.vue';
+
+// 树形数据
+const treeData = {
+  organization: [
+    {
+      label: "强瑞科技",
+      value: "1",
+      children: [
+        {
+          label: "总经办",
+          value: "1.1",
+          type: "department"
+        },
+        {
+          label: "研发部",
+          value: "1.2",
+          type: "department",
+          children: [
+            {
+              label: "前端组",
+              value: "1.2.1",
+              type: "department"
+            },
+            {
+              label: "后端组",
+              value: "1.2.2",
+              type: "department"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  department: [
+    {
+      label: "总经办",
+      value: "1.1",
+      type: "department"
+    },
+    {
+      label: "研发部",
+      value: "1.2",
+      type: "department",
+      children: [
+        {
+          label: "前端组",
+          value: "1.2.1",
+          type: "department"
+        },
+        {
+          label: "后端组",
+          value: "1.2.2",
+          type: "department"
+        }
+      ]
+    },
+    {
+      label: "人事部",
+      value: "1.3",
+      type: "department"
+    }
+  ],
+  position: [
+    {
+      label: "工程师",
+      value: "pos1",
+      type: "position",
+      children: [
+        {
+          label: "前端工程师",
+          value: "pos1.1",
+          type: "position"
+        },
+        {
+          label: "后端工程师",
+          value: "pos1.2",
+          type: "position"
+        }
+      ]
+    },
+    {
+      label: "设计师",
+      value: "pos2",
+      type: "position"
+    }
+  ],
+  employee: [
+    {
+      label: "张三",
+      value: "emp1",
+      type: "employee"
+    },
+    {
+      label: "李四",
+      value: "emp2",
+      type: "employee"
+    },
+    {
+      label: "王五",
+      value: "emp3",
+      type: "employee"
+    }
+  ]
+};
+
+// 已选择数据
+const selectedBasicData = ref([]);
+const selectedPreData = ref([
+  {
+    label: "研发部",
+    value: "1.2",
+    type: "department"
+  },
+  {
+    label: "张三",
+    value: "emp1",
+    type: "employee"
+  }
+]);
+const selectedDisabledData = ref([]);
+
+// 打开选择器
+const showBasicSelector = () => {
+  document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
+};
+
+const showPreselectedSelector = () => {
+  document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
+};
+
+const showCustomDisabledSelector = () => {
+  document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
+};
+
+// 自定义禁用检查（禁用员工选择）
+const disableEmployeeCheck = (node) => {
+  return node.type === 'employee';
+};
+
+// 移除已选项
+const removeItem = (item, type) => {
+  if (type === 'basic') {
+    selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
+  } else if (type === 'pre') {
+    selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
+  } else if (type === 'disabled') {
+    selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
+  }
+};
+
+// 监听变更
+const handleChange = (value) => {
+  MessagePlugin.success(`选择变更，已选择 ${value.length} 项`);
+};
+</script>
+
+<style scoped>
+.tree-selector-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.selected-data {
+  margin-top: 16px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  min-height: 40px;
+}
+
+.selected-tag {
+  margin: 4px;
+}
+</style>