@inf-monkeys-tech/monkeys-design 0.4.51 → 0.4.52

package/README.md

@@ -1,335 +1,335 @@
-# @inf-monkeys-tech/monkeys-design
-
-Monkeys Design 是一个独立的 React 组件库，提供可复用的基础组件、数据展示组件、主题工具和样式资源。
-
-## 安装
-
-```bash
-yarn add @inf-monkeys-tech/monkeys-design
-```
-
-或：
-
-```bash
-npm install @inf-monkeys-tech/monkeys-design
-```
-
-## 使用
-
-从主入口导入通用能力：
-
-```tsx
-import {
-  applyMonkeysTheme,
-  resolveMonkeysTheme,
-} from '@inf-monkeys-tech/monkeys-design';
-```
-
-从子路径导入组件：
-
-```tsx
-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` | 主题解析与应用工具 |
-
-## LoginPage
-
-`LoginPage` 是通用登录页 UI 组件。组件库只负责页面结构和样式契约，不包含登录请求、OAuth、路由、租户判断、i18n 初始化或租户定制样式。
-
-```tsx
-import {
-  LoginPage,
-  type LoginPageMethodConfig,
-} from '@inf-monkeys-tech/monkeys-design/components/login';
-import '@inf-monkeys-tech/monkeys-design/styles/login-page.scss';
-
-const methods: LoginPageMethodConfig[] = [
-  {
-    id: 'email',
-    label: 'Email',
-    fields: [],
-    submitLabel: 'Login',
-    onSubmit: (event) => event.preventDefault(),
-  },
-];
-
-export function Example() {
-  return (
-    <LoginPage
-      background={{ imageUrl: '', gradient: '' }}
-      logo={{ url: '', position: 'bottom', scale: 1 }}
-      primaryColor="#4D8F9D"
-      radius="12px"
-      toolbar={<div />}
-      title="Welcome"
-      methods={methods}
-    />
-  );
-}
-```
-
-默认背景规则：
-
-- 配置了 `background.imageUrl` 或 `background.gradient` 时，使用配置背景。
-- 未配置背景时，浅色模式使用白色和主题色渐变。
-- 未配置背景时，`.dark` 深色模式使用黑色和主题色渐变。
-
-Logo 规则：
-
-- `logo.url` 是兼容旧配置的通用 Logo。
-- `logo.lightUrl` / `logo.darkUrl` 分别用于浅色 / 深色模式；未配置时回退 `logo.url`。
-- 宿主应用负责在登录页未单独配置 Logo 时，把品牌资产的浅色 / 深色 Logo 传入 `logo.lightUrl` / `logo.darkUrl`。
-
-宿主应用负责把全局主题传入 `primaryColor` 和 `radius`，组件会把它们作为 `--login-page-theme-primary-color` 和 `--login-page-theme-radius` 默认来源；页面级 `customCss` 仍可通过公开的 `--login-page-*` 变量做租户级覆盖。深浅色切换、语言切换等应用级控件通过 `toolbar` 传入。
-
-### LoginPage CSS 契约
-
-页面级自定义样式只能依赖 `data-login-page`、`data-login-part` 和公开 CSS 变量。不要依赖租户 id，不要新增登录页代码分支。
-
-推荐优先覆盖变量：
-
-```css
-[data-login-page] {
-  --login-page-panel-bg: rgb(255 255 255 / 0.92);
-  --login-page-panel-border: rgb(17 17 17 / 0.08);
-  --login-page-panel-shadow: 0 24px 60px rgb(0 0 0 / 0.08);
-  --login-page-control-bg: #ffffff;
-  --login-page-control-border: rgb(17 17 17 / 0.12);
-  --login-page-control-text: #111111;
-  --login-page-control-placeholder: #9f9fa9;
-  --login-page-form-width: 500px;
-}
-
-.dark [data-login-page] {
-  --login-page-panel-bg: rgb(12 12 12 / 0.9);
-  --login-page-control-bg: #111111;
-}
-```
-
-公开部件：
-
-```css
-[data-login-part='root'] {}
-[data-login-part='background'] {}
-[data-login-part='toolbar'] {}
-[data-login-part='logo'] {}
-[data-login-part='logo-image'] {}
-[data-login-part='panel'] {}
-[data-login-part='back'] {}
-[data-login-part='back-icon'] {}
-[data-login-part='title'] {}
-[data-login-part='tabs'] {}
-[data-login-part='tab'] {}
-[data-login-part='tab-icon'] {}
-[data-login-part='form'] {}
-[data-login-part='field'] {}
-[data-login-part='input'] {}
-[data-login-part='checkbox-label'] {}
-[data-login-part='checkbox'] {}
-[data-login-part='method-footer'] {}
-[data-login-part='method-footer-action'] {}
-[data-login-part='submit-button'] {}
-[data-login-part='callout'] {}
-[data-login-part='callout-title'] {}
-[data-login-part='callout-description'] {}
-[data-login-part='callout-detail'] {}
-[data-login-part='callout-action'] {}
-[data-login-part='external-methods'] {}
-[data-login-part='external-label'] {}
-[data-login-part='external-list'] {}
-[data-login-part='external-button'] {}
-[data-login-part='external-icon'] {}
-```
-
-## 基础组件
-
-基础组件从 `components/base` 子路径导入：
-
-```tsx
-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` 提供面向数据密集页面的组合组件。组件库负责可复用的控制、展示、预览、详情和布局结构；数据请求、权限、路由、弹窗和业务动作由使用方控制。
-
-```tsx
-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 外观。
-
-```tsx
-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` 等常见配置形态。
-
-## 样式资源
-
-可从包内直接引用样式文件：
-
-```ts
-import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
-import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';
-```
-
-## Storybook
-
-本仓库内置 Storybook，用于预览和调试组件：
-
-```bash
-npm run storybook
-```
-
-构建静态 Storybook：
-
-```bash
-npm run storybook:build
-```
-
-## 开发
-
-```bash
-# 安装依赖
-npm install
-
-# 开发模式
-npm run dev
-
-# 构建生产产物
-npm run build
-
-# 类型检查
-npm run typecheck
-
-# 代码检查
-npm run lint
-```
-
-## 发布
-
-> 需要 npmjs 账号拥有 `@inf-monkeys-tech` scope 的发布权限。
-
-```bash
-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 会给出一个浏览器验证链接。完成验证后发布会继续。
+# @inf-monkeys-tech/monkeys-design
+
+Monkeys Design 是一个独立的 React 组件库，提供可复用的基础组件、数据展示组件、主题工具和样式资源。
+
+## 安装
+
+```bash
+yarn add @inf-monkeys-tech/monkeys-design
+```
+
+或：
+
+```bash
+npm install @inf-monkeys-tech/monkeys-design
+```
+
+## 使用
+
+从主入口导入通用能力：
+
+```tsx
+import {
+  applyMonkeysTheme,
+  resolveMonkeysTheme,
+} from '@inf-monkeys-tech/monkeys-design';
+```
+
+从子路径导入组件：
+
+```tsx
+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` | 主题解析与应用工具 |
+
+## LoginPage
+
+`LoginPage` 是通用登录页 UI 组件。组件库只负责页面结构和样式契约，不包含登录请求、OAuth、路由、租户判断、i18n 初始化或租户定制样式。
+
+```tsx
+import {
+  LoginPage,
+  type LoginPageMethodConfig,
+} from '@inf-monkeys-tech/monkeys-design/components/login';
+import '@inf-monkeys-tech/monkeys-design/styles/login-page.scss';
+
+const methods: LoginPageMethodConfig[] = [
+  {
+    id: 'email',
+    label: 'Email',
+    fields: [],
+    submitLabel: 'Login',
+    onSubmit: (event) => event.preventDefault(),
+  },
+];
+
+export function Example() {
+  return (
+    <LoginPage
+      background={{ imageUrl: '', gradient: '' }}
+      logo={{ url: '', position: 'bottom', scale: 1 }}
+      primaryColor="#4D8F9D"
+      radius="12px"
+      toolbar={<div />}
+      title="Welcome"
+      methods={methods}
+    />
+  );
+}
+```
+
+默认背景规则：
+
+- 配置了 `background.imageUrl` 或 `background.gradient` 时，使用配置背景。
+- 未配置背景时，浅色模式使用白色和主题色渐变。
+- 未配置背景时，`.dark` 深色模式使用黑色和主题色渐变。
+
+Logo 规则：
+
+- `logo.url` 是兼容旧配置的通用 Logo。
+- `logo.lightUrl` / `logo.darkUrl` 分别用于浅色 / 深色模式；未配置时回退 `logo.url`。
+- 宿主应用负责在登录页未单独配置 Logo 时，把品牌资产的浅色 / 深色 Logo 传入 `logo.lightUrl` / `logo.darkUrl`。
+
+宿主应用负责把全局主题传入 `primaryColor` 和 `radius`，组件会把它们作为 `--login-page-theme-primary-color` 和 `--login-page-theme-radius` 默认来源；页面级 `customCss` 仍可通过公开的 `--login-page-*` 变量做租户级覆盖。深浅色切换、语言切换等应用级控件通过 `toolbar` 传入。
+
+### LoginPage CSS 契约
+
+页面级自定义样式只能依赖 `data-login-page`、`data-login-part` 和公开 CSS 变量。不要依赖租户 id，不要新增登录页代码分支。
+
+推荐优先覆盖变量：
+
+```css
+[data-login-page] {
+  --login-page-panel-bg: rgb(255 255 255 / 0.92);
+  --login-page-panel-border: rgb(17 17 17 / 0.08);
+  --login-page-panel-shadow: 0 24px 60px rgb(0 0 0 / 0.08);
+  --login-page-control-bg: #ffffff;
+  --login-page-control-border: rgb(17 17 17 / 0.12);
+  --login-page-control-text: #111111;
+  --login-page-control-placeholder: #9f9fa9;
+  --login-page-form-width: 500px;
+}
+
+.dark [data-login-page] {
+  --login-page-panel-bg: rgb(12 12 12 / 0.9);
+  --login-page-control-bg: #111111;
+}
+```
+
+公开部件：
+
+```css
+[data-login-part='root'] {}
+[data-login-part='background'] {}
+[data-login-part='toolbar'] {}
+[data-login-part='logo'] {}
+[data-login-part='logo-image'] {}
+[data-login-part='panel'] {}
+[data-login-part='back'] {}
+[data-login-part='back-icon'] {}
+[data-login-part='title'] {}
+[data-login-part='tabs'] {}
+[data-login-part='tab'] {}
+[data-login-part='tab-icon'] {}
+[data-login-part='form'] {}
+[data-login-part='field'] {}
+[data-login-part='input'] {}
+[data-login-part='checkbox-label'] {}
+[data-login-part='checkbox'] {}
+[data-login-part='method-footer'] {}
+[data-login-part='method-footer-action'] {}
+[data-login-part='submit-button'] {}
+[data-login-part='callout'] {}
+[data-login-part='callout-title'] {}
+[data-login-part='callout-description'] {}
+[data-login-part='callout-detail'] {}
+[data-login-part='callout-action'] {}
+[data-login-part='external-methods'] {}
+[data-login-part='external-label'] {}
+[data-login-part='external-list'] {}
+[data-login-part='external-button'] {}
+[data-login-part='external-icon'] {}
+```
+
+## 基础组件
+
+基础组件从 `components/base` 子路径导入：
+
+```tsx
+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` 提供面向数据密集页面的组合组件。组件库负责可复用的控制、展示、预览、详情和布局结构；数据请求、权限、路由、弹窗和业务动作由使用方控制。
+
+```tsx
+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 外观。
+
+```tsx
+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` 等常见配置形态。
+
+## 样式资源
+
+可从包内直接引用样式文件：
+
+```ts
+import '@inf-monkeys-tech/monkeys-design/styles/global.scss';
+import '@inf-monkeys-tech/monkeys-design/styles/workflow-nodes.css';
+```
+
+## Storybook
+
+本仓库内置 Storybook，用于预览和调试组件：
+
+```bash
+npm run storybook
+```
+
+构建静态 Storybook：
+
+```bash
+npm run storybook:build
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建生产产物
+npm run build
+
+# 类型检查
+npm run typecheck
+
+# 代码检查
+npm run lint
+```
+
+## 发布
+
+> 需要 npmjs 账号拥有 `@inf-monkeys-tech` scope 的发布权限。
+
+```bash
+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 会给出一个浏览器验证链接。完成验证后发布会继续。

package/dist/components/base/index.js

@@ -334,7 +334,7 @@ var baseSlots = {
   tableContainerFooterAttached: "!rounded-b-none !shadow-none",
   tableRoot: "w-full caption-bottom border-collapse text-sm text-foreground",
   tableCaption: "mt-3 text-sm text-muted-foreground",
-  tableHeader: "border-b border-border/70 bg-muted/35",
+  tableHeader: "border-b border-border/70 bg-muted/35 [&_tr]:bg-inherit [&_th]:bg-inherit",
   tableBody: "[&_tr:last-child]:border-0",
   tableFooter: "border-t border-border/70 bg-muted/30 font-medium",
   tableFooterBar: cn(