@inf-monkeys-tech/monkeys-design

Monkeys Design 是一个独立的 React 组件库，提供可复用的基础组件、数据展示组件、主题工具和样式资源。

安装

yarn add @inf-monkeys-tech/monkeys-design

或：

npm install @inf-monkeys-tech/monkeys-design

使用

从主入口导入通用能力：

import {
  applyMonkeysTheme,
  resolveMonkeysTheme,
} from '@inf-monkeys-tech/monkeys-design';

从子路径导入组件：

import {
  BaseButton,
  BasePanel,
  type BaseAppearance,
} from '@inf-monkeys-tech/monkeys-design/components/base';

const appearance: BaseAppearance = {
  preset: 'admin',
  radius: 'lg',
  border: 'subtle',
  background: 'soft',
};

export function Example() {
  return (
    <BasePanel
      appearance={appearance}
      title="Design System"
      description="Composable UI primitives for Monkeys products."
      footer={<BaseButton appearance={appearance} label="Refresh" />}
    >
      Content stays in the consuming application.
    </BasePanel>
  );
}

包入口

| 路径 | 内容 | |------|------| | @inf-monkeys-tech/monkeys-design | 主入口，导出注册表、主题工具和公共类型 | | @inf-monkeys-tech/monkeys-design/components/base | 基础组件 | | @inf-monkeys-tech/monkeys-design/components/data-explorer | 数据展示与页面组合组件 | | @inf-monkeys-tech/monkeys-design/components/login | 登录相关 UI 组件 | | @inf-monkeys-tech/monkeys-design/components/layout | 布局组件 | | @inf-monkeys-tech/monkeys-design/components/toolbar | 工具栏组件 | | @inf-monkeys-tech/monkeys-design/palette | palette 工具 | | @inf-monkeys-tech/monkeys-design/theme-system | 主题解析与应用工具 |

基础组件

基础组件从 components/base 子路径导入：

import {
  BaseButton,
  BaseContextMenu,
  BaseContextMenuContent,
  BaseContextMenuItem,
  BaseContextMenuTrigger,
  BasePanel,
  type BaseAppearance,
} from '@inf-monkeys-tech/monkeys-design/components/base';

当前包含：

• BaseButton
• BaseBadge
• BasePanel
• BaseEmptyState
• BaseLoadingState
• BaseField
• BaseInput
• BaseTextarea
• BaseSelect
• BaseLayout
• BaseLayoutPane
• BaseLayoutSplit
• BaseLayoutResizeHandle
• BaseSwitch
• BaseCheckbox
• BaseRadioGroup
• BaseDialog
• BaseDropdownMenu
• BaseTooltip
• BaseTable
• BaseTableFooterBar
• BaseNotice
• BaseDivider
• BaseSectionHeader
• BaseTabs
• BaseSegmentedControl
• BaseProgress
• BaseSkeleton
• BaseAvatar
• BaseToolbar
• BaseBreadcrumb
• BasePagination
• BaseDescriptionList
• BaseAccordion
• BaseContextMenu

BaseAppearance 用于控制 preset、density、radius、border、background、slot className 和 inline style 覆盖。

BaseLayout 提供中立布局 primitives：BaseLayout 管 header/sidebar/main/aside/footer 区域，BaseLayoutPane 管主题化区域表面，BaseLayoutSplit 管固定或可调的左右/上下分割。gap 可显式控制区域间距，number 按 px，string 原样作为 CSS 长度；不传时继续使用 BaseAppearance 的主题间距。可调分割支持 defaultSize、受控 size、minSize、maxSize 和 onSizeChange；尺寸是否持久化仍由使用方控制。

Data Explorer

components/data-explorer 提供面向数据密集页面的组合组件。组件库负责可复用的控制、展示、预览、详情和布局结构；数据请求、权限、路由、弹窗和业务动作由使用方控制。

import {
  DataExplorerView,
  type DataExplorerViewDefinition,
} from '@inf-monkeys-tech/monkeys-design/components/data-explorer';

常用组件包括：

• DataExplorerView
• DataExplorerViewCollection
• DataExplorerDisplayCard
• DataExplorerDisplayCollectionView
• DataExplorerDisplayActionMenu
• DataExplorerDetailShell
• DataExplorerImagePreview
• DataExplorerToolbarShell
• DataExplorerActionBar
• DataExplorerTree
• DataExplorerPage

主题系统

theme-system 提供主题配置解析和 DOM 应用入口，用于统一处理品牌信息、palette tokens、基础组件外观和 Data Explorer 外观。

import {
  applyMonkeysTheme,
  resolveMonkeysTheme,
} from '@inf-monkeys-tech/monkeys-design/theme-system';

const theme = resolveMonkeysTheme(config);

applyMonkeysTheme(theme);

<BasePanel appearance={theme.appearances.base.input} />;

支持的配置包括 tokens、brand、appearances.base 和 appearances.dataExplorer。也兼容 colors.primaryColor、themeMode、roundedSize、logo、favicon 等常见配置形态。

样式资源

可从包内直接引用样式文件：

import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';

Storybook

本仓库内置 Storybook，用于预览和调试组件：

npm run storybook

构建静态 Storybook：

npm run storybook:build

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产产物
npm run build

# 类型检查
npm run typecheck

# 代码检查
npm run lint

发布

需要 npmjs 账号拥有 @inf-monkeys-tech scope 的发布权限。

npm login --registry=https://registry.npmjs.org/
npm version patch
npm run build
npm publish --registry=https://registry.npmjs.org/ --access public

如果账号启用了浏览器钥匙串或 passkey，npm CLI 会给出一个浏览器验证链接。完成验证后发布会继续。