# @e-llm-studio/creative-workspace-ui-component 中文文档

规范地址：https://npmcn.com/package/%40e-llm-studio/creative-workspace-ui-component/

版本：0\.0\.69
npm 元数据更新时间：2026-10-28T12:09:01.286Z
中文译文更新时间：2026-11-13T03:05:30.347Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40e-llm-studio/creative-workspace-ui-component
原文对照：https://npmcn.com/package/%40e-llm-studio/creative-workspace-ui-component/?lang=original
源码仓库：https://github.com/Techolution/bpa-ai

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：10 MB，1054 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：12 个
- peer 依赖：axios ^1\.7\.9，dayjs ^1\.11\.21，react ^18\.3\.1，react-dom ^18\.3\.1，primeicons ^7\.0\.0，primereact ^10\.9\.7，react-icons ^5\.3\.0，lucide-react ^0\.474\.0，@mui/material ^6\.5\.0，framer-motion ^12\.42\.0，@emotion/react ^11\.14\.0，@emotion/styled ^11\.14\.1，@mui/icons-material ^6\.5\.0，@mui/x-date-pickers ^7\.29\.4，@monaco-editor/react ^4\.7\.0，@tanstack/react-query ^5\.100\.14，@e-llm-studio/requirement-ai \>=0\.0\.248
- 首次发布：2026-05-21T15:38:55.938Z
- 最新版本发布：2026-10-28T12:09:00.845Z
- 近 30 天下载量：2661（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：86（近 12 个月 86 个）

## 中文简介

可重复使用的 Creative 工作空间的再操作组件 .

## 安装

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

也可以使用：`pnpm add @e-llm-studio/creative-workspace-ui-component`、`yarn add @e-llm-studio/creative-workspace-ui-component`、`bun add @e-llm-studio/creative-workspace-ui-component`

## README

# 树条组件

用于渲染可扩展部分、搜索和可配置动作的嵌入范围/节点结构的分级树导航组件。 构成部分是 `@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

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

### 使用线条

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

### 导入语句

```tsx
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:

```tsx
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`

### 高级示例

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

```tsx
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 参考

### 道具

| Prop | 类型 | 需求 | 默认 | 说明 |
| --- | --- | --- | --- | --- |
| `data` | `ScopeTreeNode | null` | ✅ | —— 说 | 树根节点. 过 `null` 来制造什么. |
| `sectionsConfig` | `TreeSectionConfig[]` | ❌ | `[]` | 定义每个扩展节点下显示的段落标签. |
| `nodeTypesConfig` | `NodeTypeConfig[]` | ❌ | `[]` | 定义节点标签和每个深度级的加子行为. |
| `defaultExpandedIds` | `string[]` | ❌ | `[]` | 第一个渲染时默认要扩展的节点ID. |
| `searchQuery` | `string` | ❌ | `''` | 按名称过滤节点。 非相配子树所藏. |
| `searchSections` | `boolean` | ❌ | `false` | 搜索查询是否与节点名称相匹配 . |
| `onSearchCountChange` | `(count: number) => void` | ❌ | —— 说 | 当搜索结果计数变化时被解除 . |
| `onSectionSelect` | `(nodeId: string, sectionId: string) => void` | ❌ | —— 说 | 点击区域标签时已开火 。 返回节点ID和分区ID. |
| `onAddChild` | `(parentId: string, childType: 'SCOPE' | 'SUBSCOPE', parentName?: string) => void` | ❌ | —— 说 | 如果通过,在节点菜单中会出现添加按钮 . |
| `onRenameChild` | `(scopeId: string, initialName: string) => void` | ❌ | —— 说 | 如果通过, 在节点菜单中会出现重命名按钮 . |
| `onDeleteChild` | `(scopeId: string, scopeName: string, learningsCount: number) => void` | ❌ | —— 说 | 如果通过,则在节点菜单中显示一个删除按钮. |
| `selectedRuleSetId` | `string | null` | ❌ | —— 说 | 装入时自动选择的节点的ID . |
| `activeSectionId` | `string` | ❌ | —— 说 | 用于自动激活的区号 `selectedRuleSetId`。 。 。 . |
| `isDraftMode` | `boolean` | ❌ | `false` | 当草稿可用时是否在节目上显示状态芯片草稿 . |
| `enableEllipsis` | `boolean` | ❌ | `false` | 为长节标签启用带有椭圆形的文本截图. |
| `draftChipClassName` | `string` | ❌ | —— 说 | 自定义 CSS 类名称来样式化芯片元素草稿 . |
| `draftChipDotClassName` | `string` | ❌ | —— 说 | 自定义 CSS 类名称, 用于样式化草稿芯片内的指示点 . |
| `draftChipStyle` | `React.CSSProperties` | ❌ | —— 说 | 用于草稿芯片元素的内置样式覆盖 . |
| `showChildrenCount` | `boolean` | ❌ | `true` | 是否在父节点头(包括顶级助理名节点)上显示孩子们的名牌. |
| `showSectionBadge` | `boolean` | ❌ | `true` | 是否在节目上显示度量徽章 . |
| `showNodeOptions` | `boolean` | ❌ | `true` | 是否在节点头上显示3个点菜单选项 . |
| `hideEmptyNodes` | `boolean` | ❌ | `false` | 若为 `true`,没有孩子的节点和没有被隐藏的部分. |
| `showEmptyState` | `boolean` | ❌ | `false` | 当扩展节点没有子/节时是否显示空状态 UI . |
| `emptyStateText` | `string` | ❌ | `'No data present'` | 自定义文本在空状态 UI 时显示 `showEmptyState` 实值 `true`。 。 。 . |

* * *

### `TreeSectionConfig`

| 外地 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | ✅ | 独特的区域标识符 . |
| `label` | `string` | ✅ | 显示区域标签的标签 . |
| `icon` | `ElementType` | ✅ | Lucide 图标组件将显示在标签旁边. |
| `badgeKey` | `keyof NodeMetrics` | ❌ | 映射到密钥 `node.metrics` 显示为徽章计数. |
| `isVisible` | `(node: ScopeTreeNode, depth: number) => boolean` | ❌ | 每个节点可选可见度检查. 如果省略,则所有节点都可见节. |

* * *

### `NodeTypeConfig`

| 外地 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `type` | `string` | ✅ | 节点类型标识符(例如. `'GLOBAL'`, (中文(简体) ), `'SCOPE'`, (中文(简体) ), `'SUBSCOPE'`) (中文(简体) ). |
| `label` | `string` | ✅ | 显示删除确认文本中使用的标签 . |
| `addChildLabel` | `string` | ❌ | 添加子按钮的标签(例如). `'Add Scope'`) (中文(简体) ). 需要时,如果 `addChildType` 已经设定. |
| `addChildType` | `string` | ❌ | 要创建的儿童节点类型 。 如果省略,则不显示此节点类型的添加按钮. |

* * *

### `ScopeTreeNode`

| 外地 | 类型 | 需求 | 说明 |
| --- | --- | --- | --- |
| `id` | `string` | ✅ | 节点唯一的标识符 . |
| `name` | `string` | ✅ | 显示节点的名称 . |
| `type` | `'GLOBAL' | 'SCOPE' | 'SUBSCOPE' | 'Custom'` | ✅ | 节点类型. |
| `metrics` | `NodeMetrics` | ✅ | 区徽使用的量值. |
| `children` | `ScopeTreeNode[]` | ✅ | 儿童节点。 过 `[]` 对于叶节点. |

* * *

## 类型定义

```ts
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;
}
```

* * *

## 实例

### 与搜索

```tsx
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}
  />
</>
```

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

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

### 暗藏着徽章

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

### 有自动选择的节点

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

### 多个区域

```tsx
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)

* * *

## 安装

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

## 公共出口

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

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

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

## 道具

| Prop | 类型 | 说明 |
| --- | --- | --- |
| `metadata` | `MetaData` | 自定义模式标题、优先徽章、标签和显示设置. |
| `reviewData` | `Record<number, Record<string, boolean>>` | 审查现状使用的核准状态绘图. |
| `levels` | `Level[]` | 核准工作流程水平. |
| `setLevels` | `Dispatch` | 控制状态设定级别 . |
| `requireFinalApproval` | `boolean` | 启用最后批准步骤 . |
| `finalApprovalStatus` | `boolean` | 最后核准的状况. |
| `setRequireFinalApproval` | `Dispatch` | 最终批准状态的控制装置. |
| `approvalDueDate` | `Date | null` | 最终批准到期日. |
| `setApprovalDueDate` | `Dispatch` | 受控设定器等待批准到期日. |
| `fetchUsers` | `FetchUsersFunction` | Async 用户查询功能 . |
| `finalApprovalDueDate` | `Date | null` | 要求为: `AssignReminderLevels`。设定用于限制水平到期日的最后批准期限. |
| `onClose` | `() => void` | 当模式关闭时调用. |
| `onSave` | `(payload) => void` | 返回已配置的工作流程数据 . |
| `onValidationError` | `(message) => void` | 处理验证错误. |

* * *

## 核心类型

### 元数据

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

### 职等

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

### 用户

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

### 保存文件数

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

* * *

## 包含的组成部分

### 指定提醒级别

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

### 审查现状

使用 `reviewData`。 。 。 .

### 级别数据

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

### UI 组件

-   `CustomDropdown`
-   `CustomDatePicker`
-   `AssignLevelDatePicker`
-   `CustomCheckbox`

* * *

## 基本用途

```tsx
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` 接收正常可见的级别、最后批准设定、最后到期日、活动标签、时间表和提醒所有者. 主机申请仍然负责持续和关闭模式.

完整的道具、验证规则、提醒配置、造型槽、示例和类型参考,见 [指定提醒组件指南](https://npmcn.com/package/%40e-llm-studio/creative-workspace-ui-component/src/components/AssignReminders/README.md)。 。 。 .

## 常见问题

### @e-llm-studio/creative-workspace-ui-component 是什么？

可重复使用的 Creative 工作空间的再操作组件 \.

### 如何安装 @e-llm-studio/creative-workspace-ui-component？

在项目目录运行 npm install @e-llm-studio/creative-workspace-ui-component，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：axios（^1\.7\.9）、dayjs（^1\.11\.21）、react（^18\.3\.1）、react-dom（^18\.3\.1）、primeicons（^7\.0\.0）、primereact（^10\.9\.7）、react-icons（^5\.3\.0）、lucide-react（^0\.474\.0）、@mui/material（^6\.5\.0）、framer-motion（^12\.42\.0）、@emotion/react（^11\.14\.0）、@emotion/styled（^11\.14\.1）、@mui/icons-material（^6\.5\.0）、@mui/x-date-pickers（^7\.29\.4）、@monaco-editor/react（^4\.7\.0）、@tanstack/react-query（^5\.100\.14）、@e-llm-studio/requirement-ai（\>=0\.0\.248）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @e-llm-studio/creative-workspace-ui-component 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @e-llm-studio/creative-workspace-ui-component 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @e-llm-studio/creative-workspace-ui-component 可以商用吗？

@e-llm-studio/creative-workspace-ui-component 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @e-llm-studio/creative-workspace-ui-component 的下载量有多少？

根据 npm 官方下载统计，@e-llm-studio/creative-workspace-ui-component 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,661 次，日均约 89 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @e-llm-studio/creative-workspace-ui-component 还在维护吗？

最新版本 0\.0\.69 发布于 2026/10/28（16 天前）；至今共发布 86 个版本，其中过去 12 个月发布了 86 个；首次发布于 2026/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。