iter(g133): 新增树形选择 treeSelect

apps/demo/main.ts

@@ -39,6 +39,7 @@ import {
   grid,
   list,
   carousel,
+  treeSelect,
   tree,
   notification,
   result,
@@ -258,6 +259,18 @@ const teamMembers = [
   { name: 'zhaoliu', label: '赵六', description: 'QA · 回归', keywords: ['zl', '1004'] },
 ];
 
+// —— 树形选择：单选存 key、多选存 key 集合，两个实例共用同一棵部门树 ——
+const dept = signal('');
+const deptChecked = signal<string[]>([]);
+const orgTree = [
+  { key: 'tech', label: '技术中心', children: [
+    { key: 'fe', label: '前端组', children: [{ key: 'ui', label: '组件库' }, { key: 'web', label: '业务前端' }] },
+    { key: 'be', label: '后端组', children: [{ key: 'order', label: '订单服务' }, { key: 'pay', label: '支付服务' }] },
+  ] },
+  { key: 'design', label: '设计中心', children: [{ key: 'ix', label: '交互' }, { key: 'vd', label: '视觉' }] },
+  { key: 'qa', label: '质量中心', children: [{ key: 'reg', label: '回归测试', disabled: true }] },
+];
+
 const content = h(
   'div',
   { class: 'page' },
@@ -1336,6 +1349,20 @@ const content = h(
       ),
     ),
   ),
+  section(
+    'sec-treeselect',
+    '树形选择',
+    'treeSelect = 触发器 + 弹层里嵌的 tree：搜索、多选、父子级联全复用 tree，Esc 与其他弹层共享同一个栈（只关最上层），点外部自动收起；单选选中即收起，多选显示已选数量。',
+    grid({ min: '280px' },
+      card({ title: '单选（可搜索）' },
+        treeSelect({ nodes: orgTree, value: dept, searchable: true, placeholder: '选择归属部门', onSelect: (n) => toast.info(`已选 ${n.label}`) }),
+      ),
+      card({ title: '多选（保持展开）' },
+        treeSelect({ nodes: orgTree, multi: true, checked: deptChecked, onChange: (keys) => toast.info(`已勾选 ${keys.length} 项`) }),
+        typography({ variant: 'paragraph', type: 'secondary', content: '勾选父节点会级联到子节点，「回归测试」是禁用叶子，不可选。' }),
+      ),
+    ),
+  ),
   section(
     'sec-floatbutton',
     '悬浮操作按钮',