@jetlinks-web/components 3.3.12 → 3.3.14

package/es/Search/Search.md

@@ -0,0 +1,60 @@
+### Search
+
+搜索组件，根据列配置自动生成查询表单，支持高级（多组 `and` / `or`）搜索，输出 Terms 供后端查询；可与 ProTable 配合使用。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| columns | 同 `Table` `columns` | `Columns[]` | `[]` |
+| labelWidth | label 最小宽度 | `number` | `40` |
+
+#### Columns 扩展
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| dataIndex | 同 `Table` `columns` 中的 dataIndex | - |
+| title | 同 `Table` `columns` 中的 title | - |
+| search | 查询属性，不传则不出现在查询组件中 | `Search[]` |
+
+#### Search 字段配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| first | 是否提升为第一个查询字段 | `boolean` | `''` |
+| rename | 重命名查询字段，可覆盖 `Terms.column` 的值 | `string` | - |
+| type | 组件类型 | `select` \| `number` \| `treeSelect` \| `date` \| `time` | `'string'` |
+| componentProps | 组件的 props | `object` | `{}` |
+| format | `date` / `time` 时生效 | `string` | `'YYYY-MM-DD HH:mm:ss'` |
+| options | `treeSelect` / `select` 时生效 | `Option[]` \| `Promise` | `[]` |
+| defaultTermType | 修改 `Terms.termType` 的默认值 | `string` | `'eq'` |
+| handleValue | 处理 `Terms.value` | `Function` | `Function(item)` |
+
+#### Terms
+
+| 参数 | 说明 | 类型 |
+| --- | --- | --- |
+| column | 查询字段 | `string` |
+| type | 两组查询间的关系 | `and` \| `or` |
+| termType | 查询条件 | `eq` \| `like` \| `btw` 等 |
+| value | 查询值 | `string` \| `number` \| `object` |
+
+#### 事件
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| search | 搜索事件 | `AdvancedSearch`: `Function({ terms: [{ terms: Terms[] }] })`；`Search`: `Function(Terms[])` |
+
+#### 用法
+
+```vue
+<template>
+  <JSearch :columns="columns" @search="onSearch" />
+</template>
+```
+
+#### Rules
+
+- 每个可查询列需在 `columns[].search` 中配置查询属性，未配置的列不参与查询表单。
+- `AdvancedSearch` 支持多组条件组合（组内关系与组间 `and` / `or`），默认导出 `Search` 与 `AdvancedSearch` 两个形态。
+- 与 `ProTable` 配合时，`search` 事件输出的 Terms 作为表格 `params` 触发重新请求。

package/es/Search/style/search.js

@@ -4,7 +4,7 @@ export var genSearchStyle = function genSearchStyle(config) {
     token = config.token;
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-warp"), _defineProperty(_defineProperty(_defineProperty({
     padding: '24px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     marginBottom: '24px',
     '.pack-up': _defineProperty({}, "".concat(componentCls, "-items"), {
       flex: '1 1 auto',
@@ -81,7 +81,7 @@ export var genSearchStyle = function genSearchStyle(config) {
     }))
   }), '.no-radius', {
     borderRadius: 0,
-    borderColor: '#f1f1f1'
+    borderColor: token.colorBorderSecondary
   }), '.search-history-warp', {
     position: 'relative',
     '.search-history-button': {
@@ -93,7 +93,7 @@ export var genSearchStyle = function genSearchStyle(config) {
       height: '18px',
       right: '6px',
       top: '8px',
-      color: '#fff',
+      color: token.colorTextLightSolid,
       lineHeight: '18px',
       textAlign: 'center',
       fontWeight: 'bold',
@@ -103,7 +103,7 @@ export var genSearchStyle = function genSearchStyle(config) {
     }
   })), '.search-history-empty', {
     padding: '12px 12px 6px 12px',
-    backgroundColor: '#fff'
+    backgroundColor: token.colorBgElevated
   }), '.search-history-items', {
     width: '120px',
     maxHeight: '300px',
@@ -114,7 +114,7 @@ export var genSearchStyle = function genSearchStyle(config) {
       alignItems: 'center',
       gap: '4px',
       '&:hover': {
-        backgroundColor: '#f1f1f1'
+        backgroundColor: token.colorFillTertiary
       },
       '.history-item--title': {
         width: 'calc(100% - 30px)',

package/es/Skeleton/Skeleton.md

@@ -0,0 +1,50 @@
+### Skeleton
+
+骨架屏组件，加载时展示占位骨架，加载完成后切换为真实内容；内置 9 种业务骨架（列表 / 卡片 / 树 / 详情 / 抽屉 / 仪表盘等）。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 骨架是否带动态闪烁动画 | `boolean` | `true` |
+| loading | 是否处于加载态；`false` 时渲染默认插槽内容 | `boolean` | `true` |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 加载完成后的真实内容 |
+
+#### 内置骨架（具名导出）
+
+| 导出名 | 场景 |
+| --- | --- |
+| JSkeletonListTable | 列表-表格骨架 |
+| JSkeletonListCard | 列表-卡片骨架 |
+| JSkeletonList | 通用列表骨架 |
+| JSkeletonTree | 树形骨架 |
+| JSkeletonDetail | 详情页骨架 |
+| JSkeletonDrawer | 抽屉骨架 |
+| JSkeletonDashboardCard | 仪表盘-卡片骨架 |
+| JSkeletonDashboardChart | 仪表盘-图表骨架 |
+| JSkeletonPage | 整页骨架 |
+
+#### 用法
+
+```vue
+<template>
+  <JSkeleton :loading="loading">
+    <div>真实内容</div>
+  </JSkeleton>
+
+  <!-- 指定场景骨架 -->
+  <JSkeletonListTable :active="true" />
+  <JSkeletonDetail />
+</template>
+```
+
+#### Rules
+
+- 默认骨架为"40% + 3 行 + 80%"的段落布局，仅渲染 `default` 插槽内容的占位。
+- 9 个具名骨架为独立组件，直接按需引入，无需包裹 `JSkeleton`。
+- `active` 控制闪烁动画，`loading` 为 `false` 时立即渲染真实内容。

package/es/Skeleton/components/Page.js

@@ -4,12 +4,17 @@
   "loading": "props",
   "List": "setup-const",
   "Detail": "setup-const",
-  "props": "setup-reactive-const"
+  "computed": "setup-const",
+  "theme": "setup-maybe-ref",
+  "props": "setup-reactive-const",
+  "token": "setup-maybe-ref",
+  "pageStyle": "setup-ref"
 } */
-import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = { style: { "padding": "24px", "background-color": "#ffffff", "height": "100%" } };
+import { renderSlot as _renderSlot, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementBlock as _createElementBlock } from "vue";
 import List from "./List.js";
 import Detail from "./Detail.js";
+import { computed } from "vue";
+import { theme } from "ant-design-vue";
 const __sfc_main__ = Object.assign({
     name: 'JSkeletonPage'
 }, {
@@ -29,8 +34,16 @@ const __sfc_main__ = Object.assign({
     },
     setup(__props) {
         const props = __props;
+        const { token } = theme.useToken();
+        const pageStyle = computed(() => ({
+            padding: '24px',
+            backgroundColor: token.value.colorBgContainer,
+            height: '100%',
+        }));
         return (_ctx, _cache) => {
-            return (_openBlock(), _createElementBlock("div", _hoisted_1, [
+            return (_openBlock(), _createElementBlock("div", {
+                style: _normalizeStyle(pageStyle.value)
+            }, [
                 (__props.type === 'list')
                     ? (_openBlock(), _createBlock(List, {
                         key: 0,
@@ -55,7 +68,7 @@ const __sfc_main__ = Object.assign({
                         _: 3 /* FORWARDED */
                     }, 8 /* PROPS */, ["loading"]))
                     : _renderSlot(_ctx.$slots, "default", { key: 2 })
-            ]));
+            ], 4 /* STYLE */));
         };
     }
 });

package/es/Skeleton/style/index.js

@@ -6,9 +6,6 @@ var JSkeletonSizeLg = '36px';
 var JSkeletonSizeSm = '16px';
 var JSkeletonSize = '24px';
 var JSkeletonBorderRadius = '8px';
-var JSkeletonBg = '#f0f2f5';
-var JSkeletonBg1 = '#e6e8eb';
-var JSkeletonBorder = "4px solid ".concat(JSkeletonBg);
 var JSkeletonFlex = {
   display: 'flex',
   gap: '24px',
@@ -27,6 +24,10 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   var _$concat6;
   var componentCls = config.componentCls,
     token = config.token;
+  var JSkeletonBg = token.colorFillQuaternary;
+  var JSkeletonBg1 = token.colorFillSecondary;
+  var JSkeletonBorder = "".concat(token.lineWidth * 4, "px solid ").concat(JSkeletonBg);
+  var JSkeletonCardBorder = "".concat(token.lineWidth * 2, "px solid ").concat(token.colorBorderSecondary);
   return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-flex"), JSkeletonFlex), "".concat(componentCls, "-flex-between"), _objectSpread(_objectSpread({}, JSkeletonFlex), {}, {
     background: JSkeletonBg,
     height: JSkeletonSize,
@@ -34,7 +35,12 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   })), "".concat(componentCls, "-flex-column"), _objectSpread(_objectSpread({}, JSkeletonFlex), {}, {
     justifyContent: 'space-between'
   })), "".concat(componentCls), (_$concat6 = {
-    height: '100%'
+    height: '100%',
+    '--j-skeleton-bg': JSkeletonBg,
+    '--j-skeleton-bg-active': JSkeletonBg1,
+    '--j-skeleton-border': JSkeletonBorder,
+    '--j-skeleton-card-border': JSkeletonCardBorder,
+    '--j-skeleton-table-header-bg': token.colorFillTertiary
   }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat6, "".concat(componentCls, "-item"), {
     background: "linear-gradient(90deg, ".concat(JSkeletonBg, " 25%, ").concat(JSkeletonBg1, " 50%, ").concat(JSkeletonBg, " 75%)"),
     backgroundSize: '400% 100%',
@@ -83,7 +89,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
     padding: '12px 6px',
     borderRadius: '8px'
   }), "".concat(componentCls, "-table-header"), {
-    backgroundColor: 'lightgrey'
+    backgroundColor: token.colorFillTertiary
   }), _defineProperty(_defineProperty(_defineProperty(_$concat6, "".concat(componentCls, "-table-action"), {
     width: '200px',
     display: 'grid',
@@ -96,7 +102,7 @@ var genSkeletonStyle = function genSkeletonStyle(config) {
   }), "".concat(componentCls, "-card"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-card-content"), _defineProperty(_defineProperty({
     display: 'flex',
     gap: '16px',
-    border: '2px solid #f0f2f5',
+    border: JSkeletonCardBorder,
     borderRadius: '8px',
     padding: '24px',
     marginBottom: '16px'

package/es/TimeFormat/TimeFormat.md

@@ -0,0 +1,25 @@
+### TimeFormat
+
+时间格式化组件，将时间戳（毫秒）或字符串按指定格式渲染为文本；非数字输入原样返回。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| time | 时间值：数字时间戳（毫秒）或字符串 | `string \| number` | - |
+| format | 输出格式（dayjs 格式串） | `string` | `'YYYY-MM-DD HH:mm:ss'` |
+
+#### 用法
+
+```vue
+<template>
+  <JTimeFormat :time="row.createTime" />
+  <JTimeFormat :time="1693200000000" format="YYYY-MM-DD" />
+</template>
+```
+
+#### Rules
+
+- 数字字符串（如 `"1693200000000"`）也会被识别为时间戳处理；无法转换为数字时原样展示。
+- 内部使用 dayjs，`format` 支持全部 dayjs 格式令牌。
+- `time` 为空时渲染为空字符串。

package/es/Title/Title.md

@@ -0,0 +1,33 @@
+### Title
+
+标题组件，渲染区块标题文本，右侧可通过插槽放置操作区。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 标题文本 | `string` | `''` |
+| style | 标题容器样式 | `object` | `{}` |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| extra | 标题右侧操作区（如按钮 / 链接） |
+
+#### 用法
+
+```vue
+<template>
+  <JTitle data="设备列表">
+    <template #extra>
+      <a-button size="small" type="link">更多</a-button>
+    </template>
+  </JTitle>
+</template>
+```
+
+#### Rules
+
+- 用于区块 / 分区标题，视觉由 `j-title` 样式统一控制；标题与操作区左右布局。
+- `data` 为纯文本，复杂标题可通过默认插槽替换（组件内部结构为 `.j-title-content` 加 `extra`）。

package/es/Title/style/index.js

@@ -11,7 +11,7 @@ var genTitleStyle = function genTitleStyle(config) {
   }, "".concat(componentCls, "-content"), {
     position: 'relative',
     paddingLeft: '10px',
-    color: 'rgba(0, 0, 0, 0.8)',
+    color: token.colorTextHeading,
     fontWeight: 600,
     lineHeight: 1,
     '&::before': {
@@ -20,7 +20,7 @@ var genTitleStyle = function genTitleStyle(config) {
       left: 0,
       width: 4,
       height: '100%',
-      background: '#1890ff',
+      background: token.colorPrimary,
       borderRadius: '0 3px 3px 0',
       content: '""'
     }

package/es/ValueItem/ValueItem.md

@@ -0,0 +1,58 @@
+### ValueItem
+
+参数类型输入组件，按 `itemType`（数据类型）自动渲染对应输入控件：文本、数字（int/long/float/double）、下拉、日期、时间、密码、文件上传等；常用于参数 / 属性动态录入场景。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| modelValue | 双向绑定值（`v-model`） | `number \| string` | `''` |
+| itemType | 数据类型，决定渲染控件 | `string` | `'string'` |
+| mode | 下拉选择模式：`multiple` \| `tags` \| `combobox` | `string` | - |
+| placeholder | 输入占位符 | `string` | - |
+| options | 下拉选项（`select` / `enum` / `boolean` 类型用） | `array` | - |
+| style | 容器样式 | `CSSProperties` | - |
+| class | 容器类名 | `string` | - |
+| valueFormat | 日期 / 时间输出格式 | `string` | 日期 `'YYYY-MM-DD HH:mm:ss'`，时间 `'HH:mm:ss'` |
+| action | 上传地址（`file` 类型用），支持字符串或返回 Promise | `string \| Promise` | - |
+| headers | 上传请求头 | `object` | - |
+| disabled | 禁用 | `boolean` | - |
+| extraProps | 附加 props，合并覆盖到底层控件 | `object` | `{}` |
+| handleFileChange | 文件上传完成回调，返回值作为最终值 | `Function` | - |
+
+#### 事件
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| update:modelValue | 值变化（v-model） | `(data: string \| number \| boolean)` |
+| change | 值变化 | `(data, item?)` |
+
+#### 类型映射
+
+| itemType | 渲染控件 |
+| --- | --- |
+| `int` / `long` / `float` / `double` | `a-input-number`（int/long 精度 0） |
+| `string` / `array` | `a-input` |
+| `password` | `a-input-password` |
+| `enum` / `select` / `boolean` | `a-select`（boolean 为 true/false 选项） |
+| `date` | `a-date-picker`（含时间） |
+| `time` | `a-time-picker` |
+| `file` | `a-input` + 上传按钮（地址回填） |
+| `object` / `geoPoint` | 保留为对象字符串（内部处理） |
+
+#### 用法
+
+```vue
+<template>
+  <JValueItem v-model="value" item-type="select" :options="options" />
+  <JValueItem v-model="timeValue" item-type="date" />
+  <JValueItem v-model="fileUrl" item-type="file" :action="uploadUrl" />
+</template>
+```
+
+#### Rules
+
+- `extraProps` 会合并到底层控件 props 并覆盖同名属性。
+- `file` 类型上传成功后取响应 `result.accessUrl` 回填；配置 `handleFileChange` 时可转换返回值。
+- `int` 类型取值限制在 `[-2147483648, 2147483647]`，`long` / 浮点限制在 `±999999999999999`。
+- `mode` 仅对 `select` 类控件生效。

package/es/VirtualTable/VirtualTable.md

@@ -0,0 +1,42 @@
+### VirtualTable
+
+虚拟滚动表格组件，基于 ant-design-vue `Table` 封装，仅渲染可视区行，支持大数据量高性能渲染、树形数据展开与自定义行高。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| 全部 Table props | 透传 ant-design-vue `Table` 全部属性 | `TableProps` | - |
+| virtual | 虚拟滚动配置 | `boolean \| { itemHeight?, overscan?, threshold? }` | - |
+
+#### virtual 配置
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| itemHeight | 行高，固定值或动态函数 | `number \| (index) => number` | `54` |
+| overscan | 可视区外预渲染行数 | `number` | `5` |
+| threshold | 数据量超过此值才启用虚拟滚动 | `number` | `100` |
+
+#### 用法
+
+```vue
+<template>
+  <VirtualTable
+    :columns="columns"
+    :data-source="dataSource"
+    :scroll="{ y: 400 }"
+    :virtual="{ itemHeight: 54, overscan: 5 }"
+  >
+    <template #bodyCell="{ column, record }">
+      <span>{{ record[column.dataIndex] }}</span>
+    </template>
+  </VirtualTable>
+</template>
+```
+
+#### Rules
+
+- 数据量小于 `threshold`（默认 100）时不启用虚拟滚动，退化为普通 Table。
+- 树形数据支持展开收起；行通过 Proxy 缓存池包装以提供 `__virtual_tree_node__` 元信息，展开状态与数据同步。
+- 行高使用动态函数时由 `useVirtualScroll` 计算总高度，适合不定高行场景。
+- 常用于 EditTable 的内部数据承载；滚动容器高度由 `scroll.y` 或外部约束提供。

package/es/VirtualTable/style/index.js

@@ -1,5 +1,8 @@
-import genCompoentStyle from "../../style/styleRegister";
-var genVirtualTableStyle = function genVirtualTableStyle() {
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import genCompoentStyle from '../../style/styleRegister';
+import { genTokenScrollbarStyle } from '../../style/scrollbar';
+var genVirtualTableStyle = function genVirtualTableStyle(config) {
+  var token = config.token;
   return {
     '.virtual-table-wrapper': {
       display: 'flex',
@@ -17,11 +20,11 @@ var genVirtualTableStyle = function genVirtualTableStyle() {
           }
         }
       },
-      '.virtual-table-body': {
+      '.virtual-table-body': _objectSpread({
         'overflow-y': 'auto',
         position: 'relative',
         'min-height': '100px'
-      },
+      }, genTokenScrollbarStyle(token)),
       '.virtual-table-header-fixed': {
         // 位移的容器，提升位移动画性能
         'will-change': 'transform'

package/es/components.md

@@ -0,0 +1,108 @@
+# @jetlinks-web/components 组件映射
+
+本文件是 `@jetlinks-web/components` 的 AI 导航入口。先按场景定位组件，再打开对应的组件文档核验 Props、事件、插槽和 Rules；不要一次性读取全部组件文档，也不要仅凭目录名推断公开 API。
+
+## 使用流程
+
+1. 根据当前业务场景从下方映射表选择 1～3 个候选组件。
+2. 打开候选目录中的 `组件名.md`，确认用途、Props、事件、插槽、示例和限制。
+3. 核验 [`components.ts`](components.ts) 是否从包根入口公开导出该能力；根入口导出名可能与目录名不同。
+4. 核验目标项目安装的 `@jetlinks-web/components` 版本和相邻页面用法；源码工作区与目标项目依赖版本不一致时，以目标项目实际可用导出为准。
+5. 需要确认边界时再读对应组件源码；不得发明文档和源码中不存在的 Props、事件、插槽或子路径。
+6. 若 `@jetlinks-web-core/components` 已对同一场景提供项目级封装、权限/i18n/路由适配或稳定组合，优先使用项目级封装；否则直接复用本包的共享基础组件。
+
+## 引入方式
+
+### 根入口具名导入
+
+```ts
+import {
+  AIcon,
+  CardSelect,
+  PermissionButton,
+  ProTable,
+  Search,
+} from '@jetlinks-web/components';
+```
+
+根入口只公开 [`components.ts`](components.ts) 中列出的导出。`Icon` 目录的根导出名是 `AIcon`，不存在名为 `Icon` 的根导出。
+
+### 整包安装后的全局组件
+
+```ts
+import JetLinksComponents from '@jetlinks-web/components';
+
+app.use(JetLinksComponents);
+```
+
+整包安装只会安装 `components.ts` 中已公开且带 `install` 的组件。模板中的全局注册名通常以 `J` 开头，例如 `JCardSelect`、`JProTable`、`JSearch`；是否已整包安装，以目标应用入口为准。
+
+### 子路径能力
+
+深层子路径不是默认公共契约。只有根入口没有导出所需能力，并且目标项目当前依赖版本、构建产物和相邻生产代码都证明该子路径稳定可用时，才允许沿用；不要根据源码目录自行拼接 `@jetlinks-web/components/es/...` 路径。
+
+## 场景映射
+
+| 场景 | 候选能力 | 文档 | 根入口 / 全局名 |
+| --- | --- | --- | --- |
+| 输入联想、可创建选项、标签多选 | `AutoComplete` | [AutoComplete/AutoComplete.md](AutoComplete/AutoComplete.md) | `AutoComplete` / `JAutoComplete` |
+| 状态徽标、语义色状态 | `BadgeStatus` | [BadgeStatus/BadgeStatus.md](BadgeStatus/BadgeStatus.md) | `BadgeStatus` / `JBadgeStatus` |
+| 卡片式单选、多选、能力选择 | `CardSelect` | [CardSelect/CardSelect.md](CardSelect/CardSelect.md) | `CardSelect` / `JCardSelect` |
+| 按钮式单选、多选 | `CheckButton` | [CheckButton/CheckButton.md](CheckButton/CheckButton.md) | `CheckButton` / `JCheckButton` |
+| 组件库主题、图标、权限和国际化总配置 | `ConfigProvider` | [ConfigProvider/ConfigProvider.md](ConfigProvider/ConfigProvider.md) | `ConfigProvider` / `JConfigProvider` |
+| 可拖动、可缩放弹窗 | `DragModal` | [DragModal/DragModal.md](DragModal/DragModal.md) | `DragModal` / `JDragModal` |
+| 大数据量可编辑表格、单元格校验 | `EditTable` | [EditTable/EditTable.md](EditTable/EditTable.md) | `EditTable` / `JEditTable` |
+| 文本省略、Tooltip、点击展开 | `Ellipsis` | [Ellipsis/Ellipsis.md](Ellipsis/Ellipsis.md) | `Ellipsis` / `JEllipsis` |
+| 空状态 | `Empty` | [Empty/Empty.md](Empty/Empty.md) | `Empty` / `JEmpty` |
+| 撑满页面剩余高度 | `FullPage` | [FullPage/FullPage.md](FullPage/FullPage.md) | `FullPage` / `JFullPage` |
+| Ant Design 图标、iconfont 图标 | `AIcon` | [Icon/Icon.md](Icon/Icon.md) | `AIcon` / `AIcon` |
+| Markdown 内容渲染 | `Markdown` | [Markdown/Markdown.md](Markdown/Markdown.md) | `Markdown` / `JMarkdown` |
+| 权限控制按钮、二次确认 | `PermissionButton` | [PermissionButton/PermissionButton.md](PermissionButton/PermissionButton.md) | `PermissionButton` / `JPermissionButton` |
+| 应用布局、页面容器 | `ProLayout`、`PageContainer` | [ProLayout/ProLayout.md](ProLayout/ProLayout.md) | `ProLayout`、`PageContainer` / `JProLayout`、`JPageContainer` |
+| 请求、分页、行选择、表格/卡片双形态 | `ProTable` | [ProTable/ProTable.md](ProTable/ProTable.md) | `ProTable` / `JProTable` |
+| 自定义滚动条 | `Scrollbar` | [Scrollbar/Scrollbar.md](Scrollbar/Scrollbar.md) | `Scrollbar` / `JScrollbar` |
+| 配置式搜索、高级组合搜索 | `Search`、`AdvancedSearch` | [Search/Search.md](Search/Search.md) | `Search`、`AdvancedSearch` / `JSearch`、`JAdvancedSearch` |
+| 加载占位、业务骨架 | `Skeleton` 及具名骨架 | [Skeleton/Skeleton.md](Skeleton/Skeleton.md) | 非根入口；见“非根入口能力” |
+| 时间戳格式化 | `TimeFormat` | [TimeFormat/TimeFormat.md](TimeFormat/TimeFormat.md) | `TimeFormat` / `JTimeFormat` |
+| 区块标题、标题右侧操作 | `Title` | [Title/Title.md](Title/Title.md) | `Title` / `JTitle` |
+| 按字段类型渲染输入控件 | `ValueItem` | [ValueItem/ValueItem.md](ValueItem/ValueItem.md) | `ValueItem` / `JValueItem` |
+| 虚拟滚动表格、树形大数据列表 | `VirtualTable` | [VirtualTable/VirtualTable.md](VirtualTable/VirtualTable.md) | `VirtualTable` / `JVirtualTable` |
+
+## 非根入口能力
+
+以下目录有实现和文档，但未从 [`components.ts`](components.ts) 导出，不能写成 `import { X } from '@jetlinks-web/components'`，也不会被整包安装自动注册：
+
+| 目录 / 能力 | 用途 | 文档 | 使用边界 |
+| --- | --- | --- | --- |
+| `LocaleProvider` | 为组件子树提供语言包 | [LocaleProvider/LocaleProvider.md](LocaleProvider/LocaleProvider.md) | 包内部基础设施；优先通过根入口 `ConfigProvider` 配置 |
+| `LocaleReciver` / `useLocaleReceiver` | 组件内部读取语言包的 Hook | [LocaleReciver/LocaleReciver.md](LocaleReciver/LocaleReciver.md) | 非组件；仅在维护组件包内部国际化时按源码路径使用 |
+| `RadioButton` | 网格式受控单选按钮组 | [RadioButton/RadioButton.md](RadioButton/RadioButton.md) | 目录自身有安装器，但根插件不可达；使用前必须核验目标版本的子路径 |
+| `Skeleton`、`JSkeleton*` | 通用及场景化骨架屏 | [Skeleton/Skeleton.md](Skeleton/Skeleton.md) | 仅子路径可达；使用前必须核验目标版本和相邻生产用法 |
+
+## 附属导出与深层能力
+
+- `PageContainer` 是 `ProLayout` 的根入口附属导出。
+- `AdvancedSearch` 是 `Search` 的根入口附属导出，并由 `Search` 安装器注册为 `JAdvancedSearch`。
+- `EditTable` 安装时会附带注册 `JEditTableFormItem`，但该表单项不是根入口具名导出。
+- `BadgeStatus/getHexColor`、`ProLayout/LayoutType`、`PermissionButton/DefinedPropsType`、`ProTable/hooks` 等能力存在于目录或深层文件中，不等于包根入口公开 API。
+- 深层能力必须以目标项目已存在的生产导入为证据；若没有证据，优先寻找根入口或 `@jetlinks-web-core` 的稳定封装。
+
+## 与 @jetlinks-web-core/components 的边界
+
+| 能力层 | 适合承载 | 查找入口 |
+| --- | --- | --- |
+| `@jetlinks-web/components` | 跨项目共享的基础组件、表格、搜索、图标、布局、权限按钮、输入与展示控件 | 本文件 → 单组件文档 → `components.ts` → 组件源码 |
+| `@jetlinks-web-core/components` | JetLinks 项目级业务组件、共享业务壳、权限/i18n/路由适配、运行时注册和跨组件组合 | `jetlinks-web-core/src/components/index.ts` → 组件源码 → 相邻业务页面 |
+| 业务模块局部组件 | 单一业务域的字段、流程、接口和状态编排 | 当前 feature → 当前模块 → 同业务域模块 |
+
+当两层都能满足需求时，优先使用当前项目已经稳定使用的 `@jetlinks-web-core` 封装；不要为了直接使用基础组件而绕过项目级契约。项目级没有对应封装时，优先直接复用 `@jetlinks-web/components`，不要在业务模块再复制一层无职责包装。
+
+## AI 自检
+
+- 是否先打开本映射，再按需读取候选组件文档，而不是全文加载 25 份文档。
+- 是否区分了目录名、根导出名和全局注册名。
+- 是否核验了 `components.ts`，没有把非根入口目录当成根 API。
+- 是否核验目标项目实际安装版本，避免用源码新版本能力生成旧项目代码。
+- 是否搜索过相邻生产页面，确认权限、i18n、样式和组合方式。
+- 是否优先复用 `@jetlinks-web-core` 已有项目级封装，并避免新增无职责包装组件。
+- 是否只在有真实生产证据时使用深层子路径。

package/es/style/scrollbar.js

@@ -0,0 +1,24 @@
+export var genTokenScrollbarStyle = function genTokenScrollbarStyle(token) {
+  return {
+    scrollbarWidth: 'thin',
+    scrollbarColor: "".concat(token.colorFillSecondary, " ").concat(token.colorFillQuaternary),
+    '&::-webkit-scrollbar': {
+      width: 10,
+      height: 10
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: token.colorFillQuaternary
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: token.colorFillSecondary,
+      borderRadius: token.borderRadiusLG,
+      border: "".concat(token.lineWidth * 2, "px solid ").concat(token.colorFillQuaternary)
+    },
+    '&::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: token.colorFill
+    },
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: token.colorFillQuaternary
+    }
+  };
+};

package/es/style/styleRegister.js

@@ -1,17 +1,51 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { genComponentStyleHook } from 'ant-design-vue/es/theme/internal';
+import { computed, unref } from 'vue';
+import { theme } from 'ant-design-vue';
+import { useStyleRegister } from 'ant-design-vue/es/theme/internal';
+import { useConfigContextInject } from 'ant-design-vue/es/config-provider/context';
+import { genCommonStyle } from 'ant-design-vue/es/style';
 import variableToken from './variable';
 var genCompoentStyle = function genCompoentStyle(styleFn) {
-  return genComponentStyleHook('jetlinks-components', function (_token, info) {
-    var componentToken = {
-      token: _objectSpread(_objectSpread({}, _token), variableToken),
-      hashId: info.hashId,
-      componentCls: ".".concat(_token.prefixCls)
-    };
-    return _toConsumableArray(styleFn.map(function (item) {
-      return item(componentToken);
-    }));
-  });
+  return function (_prefixCls) {
+    var prefixCls = computed(function () {
+      return unref(_prefixCls);
+    });
+    var _theme$useToken = theme.useToken(),
+      themeRef = _theme$useToken.theme,
+      token = _theme$useToken.token,
+      hashId = _theme$useToken.hashId;
+    var _useConfigContextInje = useConfigContextInject(),
+      getPrefixCls = _useConfigContextInje.getPrefixCls,
+      iconPrefixCls = _useConfigContextInje.iconPrefixCls;
+    var rootPrefixCls = computed(function () {
+      return getPrefixCls();
+    });
+    var componentInfo = computed(function () {
+      return {
+        theme: themeRef.value,
+        token: token.value,
+        hashId: hashId.value,
+        path: ['jetlinks-components', prefixCls.value, rootPrefixCls.value, iconPrefixCls.value]
+      };
+    });
+    var wrapSSR = useStyleRegister(componentInfo, function () {
+      var componentCls = ".".concat(prefixCls.value);
+      var componentToken = {
+        token: _objectSpread(_objectSpread(_objectSpread({}, token.value), variableToken), {}, {
+          componentCls: componentCls,
+          prefixCls: prefixCls.value,
+          iconCls: ".".concat(iconPrefixCls.value),
+          antCls: ".".concat(rootPrefixCls.value)
+        }),
+        hashId: hashId.value,
+        componentCls: componentCls
+      };
+      return [genCommonStyle(token.value, prefixCls.value)].concat(_toConsumableArray(styleFn.map(function (item) {
+        return item(componentToken);
+      })));
+    });
+    return [wrapSSR, hashId];
+  };
 };
 export default genCompoentStyle;