树条组件

用于渲染可扩展部分、搜索和可配置动作的嵌入范围/节点结构的分级树导航组件。 构成部分是 @e-llm-studio/creative-workspace-ui-component 软件包,并可在任何反应应用程序中独立使用.

导言

TreeSidebar是一个独立组件,来自 @e-llm-studio/creative-workspace-ui-component 软件包旨在提供一个完全通用的分级树导航面板。 其主要目的是使一棵有可扩展部分的节点树(例如全球-范围-子镜),搜索过滤和可选动作处理器. 消耗团队通过传递或省略处理道具来控制哪些动作可供使用——如果一个处理器没有被传递,相应的按钮也不会被提供.

特征

• 分级树渲染 - 支持无限制的筑巢水平(全球) 范围 分镜
• 扩展/缩放 ——每个节点独立可扩展;根节点自动扩展负载
• 部分项目 ——每个节点扩展后可以显示下方可配置的路段标签(如学习,站)
• 搜索过滤 - 通过a searchQuery 以名称过滤节点; 隐藏非匹配子树
• 可配置节点类型 - 通过控制标签、儿童加标签和儿童类型 nodeTypesConfig
• 可配置部分 - 控制每个节点的哪一节通过 sectionsConfig
• 有条件的行动 —— 添加, 重命名, 删除按钮仅在相应的处理器道具通过时渲染
• 儿童数徽章 - 显示每个节点直接子女人数的可选徽章
• 区徽章 ——部分项目上的可选徽章显示度量衡(如学习计分)
• 仅内含样式 ——无"尾风"或"MUI"依赖性,在任何消费的应用程序中工作,无论设置风格如何

安装

TreeSidebar组件是 @e-llm-studio/creative-workspace-ui-component 软件包.

使用 npm

npm install @e-llm-studio/creative-workspace-ui-component

使用线条

yarn add @e-llm-studio/creative-workspace-ui-component

导入语句

import { TreeSidebar } from "@e-llm-studio/creative-workspace-ui-component";
// or via subpath
import { TreeSidebar } from "@e-llm-studio/creative-workspace-ui-component/TreeSidebar";

使用量

基本示例

以下是一个简单的例子,说明如何用最小道具使用TreatySidebar:

import { TreeSidebar } from "@e-llm-studio/creative-workspace-ui-component";
import { BookOpen } from "lucide-react";

const treeData = {
  id: "root",
  name: "Global Scope",
  type: "GLOBAL" as const,
  metrics: { learningsCount: 10 },
  children: [
    {
      id: "scope-1",
      name: "Scope 1",
      type: "SCOPE" as const,
      metrics: { learningsCount: 5 },
      children: [],
    },
  ],
};

export default function App() {
  return (
    <TreeSidebar
      data={treeData}
      sectionsConfig={[
        {
          id: "learnings",
          label: "Learnings",
          icon: BookOpen,
          badgeKey: "learningsCount",
        },
      ]}
      nodeTypesConfig={[
        { type: "GLOBAL", label: "Global", addChildLabel: "Add Scope", addChildType: "SCOPE" },
        { type: "SCOPE", label: "Scope" },
      ]}
      onSectionSelect={(nodeId, sectionId) => console.log(nodeId, sectionId)}
    />
  );
}

密钥道具解释 :

• data:树根节点-通过 null 无法制造任何东西
• sectionsConfig: 定义每个扩展节点下显示的段落标签
• nodeTypesConfig: 定义节点标签和每个深度级的添加子行为
• onSectionSelect: 单击区域标签时已开火——返回所选 nodeId 财务报告和审定财务报表 sectionId

高级示例

此示例显示所有动作处理器和徽章能见度控制 :

import { TreeSidebar } from "@e-llm-studio/creative-workspace-ui-component";
import { BookOpen } from "lucide-react";

export default function AdvancedExample() {
  return (
    <TreeSidebar
      data={treeData}
      sectionsConfig={[
        {
          id: "learnings",
          label: "Learnings",
          icon: BookOpen,
          badgeKey: "learningsCount",
        },
      ]}
      nodeTypesConfig={[
        { type: "GLOBAL", label: "Global", addChildLabel: "Add Scope", addChildType: "SCOPE" },
        { type: "SCOPE", label: "Scope" },
      ]}
      onSectionSelect={(nodeId, sectionId) => handleSelect(nodeId, sectionId)}
      onAddChild={(parentId, childType, parentName) => handleAdd(parentId, childType, parentName)}
      onRenameChild={(scopeId, initialName) => handleRename(scopeId, initialName)}
      onDeleteChild={(scopeId, scopeName, learningsCount) => handleDelete(scopeId, scopeName, learningsCount)}
      showChildrenCount={true}
      showSectionBadge={true}
    />
  );
}

自定义提示 :

• 只通过动作处理器( E)onAddChild, (中文(简体) ), onRenameChild, (中文(简体) ), onDeleteChild) 您的用例需要—— 不需要的按钮不会使
• 使用 showChildrenCount={false} 把孩子们藏在节点头上
• 使用 showSectionBadge={false} 隐藏部分项的标尺徽章
• 使用 searchQuery 与 onSearchCountChange 在树上方执行搜索栏

API 参考

道具

TreeSectionConfig

NodeTypeConfig

ScopeTreeNode

类型定义

export interface TreeSidebarProps {
  data: ScopeTreeNode | null;
  defaultExpandedIds?: string[];
  onSectionSelect?: (nodeId: string, sectionId: string) => void;
  onNodeOptionsClick?: (nodeId: string) => void;
  onAddChild?: (parentId: string, childType: 'SCOPE' | 'SUBSCOPE', parentName?: string) => void;
  onRenameChild?: (scopeId: string, initialName: string) => void;
  onDeleteChild?: (scopeId: string, scopeName: string, learningsCount: number) => void;
  searchQuery?: string;
  onSearchCountChange?: (count: number) => void;
  sectionsConfig?: TreeSectionConfig[];
  nodeTypesConfig?: NodeTypeConfig[];
  selectedRuleSetId?: string | null;
  activeSectionId?: string;
  showChildrenCount?: boolean;
  showSectionBadge?: boolean;
  isDraftMode?: boolean;
  enableEllipsis?: boolean;
  draftChipClassName?: string;
  draftChipDotClassName?: string;
  draftChipStyle?: React.CSSProperties;
}

export interface TreeSectionConfig {
  id: string;
  label: string;
  icon: any;
  badgeKey?: keyof NodeMetrics;
  isVisible?: (node: ScopeTreeNode, depth: number) => boolean;
}

export interface NodeTypeConfig {
  type: string;
  label: string;
  addChildLabel?: string;
  addChildType?: string;
}

export interface ScopeTreeNode {
  id: string;
  name: string;
  type: 'GLOBAL' | 'SCOPE' | 'SUBSCOPE' | 'Custom';
  metrics: NodeMetrics;
  children: ScopeTreeNode[];
}

export interface NodeMetrics {
  learningsCount: number;
  stationsCount?: number;
}

实例

与搜索

const [searchQuery, setSearchQuery] = useState('');
const [searchCount, setSearchCount] = useState(0);

<>
  <input
    value={searchQuery}
    onChange={(e) => setSearchQuery(e.target.value)}
    placeholder="Search scopes..."
  />
  <span>{searchCount} results</span>
  <TreeSidebar
    data={treeData}
    sectionsConfig={sectionsConfig}
    nodeTypesConfig={nodeTypesConfig}
    searchQuery={searchQuery}
    onSearchCountChange={setSearchCount}
  />
</>

只重命名并删除( 无添加)

<TreeSidebar
  data={treeData}
  sectionsConfig={sectionsConfig}
  nodeTypesConfig={nodeTypesConfig}
  onRenameChild={(scopeId, name) => handleRename(scopeId, name)}
  onDeleteChild={(scopeId, name, count) => handleDelete(scopeId, name, count)}
/>

暗藏着徽章

<TreeSidebar
  data={treeData}
  sectionsConfig={sectionsConfig}
  nodeTypesConfig={nodeTypesConfig}
  showChildrenCount={false}
  showSectionBadge={false}
/>

有自动选择的节点

<TreeSidebar
  data={treeData}
  sectionsConfig={sectionsConfig}
  nodeTypesConfig={nodeTypesConfig}
  selectedRuleSetId="scope-1"
  activeSectionId="learnings"
/>

多个区域

import { BookOpen, RadioTower } from 'lucide-react';

<TreeSidebar
  data={treeData}
  sectionsConfig={[
    { id: 'learnings', label: 'Learnings', icon: BookOpen, badgeKey: 'learningsCount' },
    {
      id: 'stations',
      label: 'Stations',
      icon: RadioTower,
      badgeKey: 'stationsCount',
      isVisible: (node, depth) => depth > 0, // Only show for non-root nodes
    },
  ]}
  nodeTypesConfig={nodeTypesConfig}
/>

页:1

• TreeSidebar 实值 只显示 ——不采集内部数据. 所有州和数据管理部门都生活在消耗性应用中.
• 动作按钮( 添加、 重命名、 删除) 为 有条件提供 ——仅在相应的处理器道具被通过时显示.
• 这个 nodeTypesConfig 数组图到树深——索引 0 适用于根节点,索引 1 给孩子们,等等。 如果树比配置阵列更深,则最后一个配置条目被再用.
• 删除是自动 已禁用 对于有孩子的节点, 有一个工具提示解释原因.
• 根节点在负载和任何时候自动扩展 data 变化.
• 搜索扩展是自动的——所有匹配结果的祖先节点被扩展.

指定提醒和批准管理器

一种可配置的模式工作流程,将用户分配到核准级别,管理 应交日期和催复通知以及跟踪审查情况.

特征

• 多标签界面( 签名人、 提醒、 审查状态)
• 多层次核准工作流程
• 受控制和不受控制的国家支助
• Async 用户搜索和任务
• 到期日管理
• 最后核准工作流程支助
• 视觉核准进度跟踪
• 自定义的元数据、标签和优先级徽章
• 可重复使用的 UI 组件( Dropdowns, Date Pickers, checkbox)

安装

npm install @e-llm-studio/creative-workspace-ui-component

公共出口

import {
  AssignReminderWrapper,
  AssignReminderLevels,
} from "@e-llm-studio/creative-workspace-ui-component";

• AssignReminderWrapper 提供完整的模式、标签、验证、, 提醒、审查状况和页脚行动.
• AssignReminderLevels 为 提供自己周围UI的应用程序.

内部提醒组件、公用设施、常数和指定提醒类型 目前没有从软件包根导出.

道具

核心类型

元数据

interface MetaData {
  wrapperTitle?: string;
  wrapperSubTitle?: string;
  wrapperPriority?: string;
  wrapperPriorityStyles?: React.CSSProperties;
  tabData?: TabData[];
  showFinalApprovalDueDate?: boolean;
}

职等

interface Level {
  headerName: string;
  title: string;
  isMandatory: boolean;
  hasDueDate: boolean;
  dueDate: Date | null;
  assignees: AssigneeUser[];
}

用户

interface AssigneeUser {
  id: any;
  name: string;
  email: string;
  accessLevel?: string;
}

保存文件数

interface SavePayload {
  levels: Level[];
  requireFinalApproval: boolean;
  finalApprovalDueDate: Date | null;
  activeTab: "assignees" | "reminders" | "review";
}

包含的组成部分

指定提醒级别

管理审批级别,受让人,到期日,以及最终审批配置.

审查现状

使用 reviewData。 。 。 .

级别数据

处理受让人的搜索、选择和访问级别转让.

UI 组件

• CustomDropdown
• CustomDatePicker
• AssignLevelDatePicker
• CustomCheckbox

基本用途

import { useState } from "react";
import {
  AssignReminderWrapper,
} from "@e-llm-studio/creative-workspace-ui-component";

export function ContractReview() {
  const [open, setOpen] = useState(false);

  const fetchUsers = async (query: string) => {
    const response = await fetch(
      `/api/users?query=${encodeURIComponent(query)}`,
    );
    return response.json();
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Assign reviewers</button>

      {open && (
        <AssignReminderWrapper
          fetchUsers={fetchUsers}
          requireFinalApproval
          finalApprovalStatus="approved"
          metadata={{
            wrapperTitle: "Contract Review",
            wrapperPriority: "High",
          }}
          onClose={() => setOpen(false)}
          onValidationError={(message) => console.error(message)}
          onSave={(payload) => {
            console.log(payload);
            setOpen(false);
          }}
        />
      )}
    </>
  );
}

fetchUsers 需要并且必须返回包含 id, (中文(简体) ), name,以及 email。 。 。 . 包装器可以随其当地状态使用,也可以通过父状态连接 levels, (中文(简体) ), requireFinalApproval, (中文(简体) ), approvalDueDate他们的设置道具.

关键能力

• 取消同步受让人搜索
• 连续批准级别和准入角色
• 每一级和最后核准
• 可选所有者最后签注
• 专门的最后核准地位
• 手动、预定和升级提醒
• 核准和拒绝进展跟踪
• 可配置标签、标签、颜色、能见度和内线样式覆盖
• 只读或部分锁定的工作流程的编辑限制

在有效的保存中, onSave 接收正常可见的级别、最后批准设定、最后到期日、活动标签、时间表和提醒所有者. 主机申请仍然负责持续和关闭模式.

完整的道具、验证规则、提醒配置、造型槽、示例和类型参考,见 指定提醒组件指南。 。 。 .