@jetlinks-web/components 3.3.12 → 3.3.14

package/es/EditTable/style/group.js

@@ -7,12 +7,12 @@ export var genEditTableGroupStyle = function genEditTableGroupStyle(config) {
     overflow: 'hidden',
     position: 'relative'
   }), '.ant-tabs-tab-active', {
-    backgroundColor: '#BAE0FF !important',
-    borderColor: '#91CAFF !important'
+    backgroundColor: "".concat(token.colorPrimaryBg, " !important"),
+    borderColor: "".concat(token.colorPrimaryBorder, " !important")
   }), '.ant-tabs-nav-add', {
     border: 'none'
   }))), '.jetlinks-table-group-error-wrap', _defineProperty({
-    color: '#1a1a1a !important'
+    color: "".concat(token.colorText, " !important")
   }, '.table-group-error-target', {
     position: 'absolute',
     right: 0,

package/es/EditTable/style/header.js

@@ -10,7 +10,7 @@ export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
     float: 'left',
     overflow: 'visible',
     position: 'absolute',
-    background: '#fafafa',
+    background: token.colorFillQuaternary,
     top: 0
   }, '.jetlinks-edit-table-header-cell-box', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     padding: '0 12px',
@@ -39,7 +39,7 @@ export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
     width: '1px',
     height: '1.6em',
     pointerEvents: 'none',
-    backgroundColor: 'rgba(0,0,0,.06)',
+    backgroundColor: token.colorSplit,
     transform: 'translateY(-50%)',
     transition: 'background-color .3s',
     content: '""'
@@ -53,6 +53,6 @@ export var genEditTableHeaderStyle = function genEditTableHeaderStyle(config) {
   }, '.jetlinks-drag-modal-footer', {
     display: 'none'
   }), '.jetlinks-table-search-result-total', {
-    color: '@primary-color'
+    color: token.colorPrimary
   })));
 };

package/es/EditTable/style/menu.js

@@ -3,12 +3,12 @@ export var genMenuStyle = function genMenuStyle(config) {
   return {
     '.jetlinks-edit-table-context-menu': {
       position: 'fixed',
-      boxShadow: '0 0 12px rgba(0, 0, 0 ,.2)',
       borderRadius: '4px',
       overflow: 'hidden',
       width: '192px',
       padding: '4px',
-      backgroundColor: '#fff',
+      backgroundColor: token.colorBgElevated,
+      boxShadow: token.boxShadowSecondary,
       '.ant-menu': {
         borderRight: 'none',
         '.ant-menu-item': {
@@ -20,7 +20,7 @@ export var genMenuStyle = function genMenuStyle(config) {
         }
       },
       '.ant-menu-item-active': {
-        backgroundColor: 'var(--ant-primary-1)'
+        backgroundColor: token.colorPrimaryBg
       }
     }
   };

package/es/EditTable/style/table.js

@@ -2,7 +2,7 @@ export var genTableStyle = function genTableStyle(config) {
   var token = config.token;
   return {
     '.jetlinks-edit-table-wrapper': {
-      background: '#fff',
+      background: token.colorBgContainer,
       height: '100%',
       position: 'relative',
       '&.table-full-screen': {
@@ -13,7 +13,7 @@ export var genTableStyle = function genTableStyle(config) {
         flexDirection: 'column',
         flexGrow: 0,
         flexShrink: 0,
-        background: '#fafafa',
+        background: token.colorFillQuaternary,
         transition: 'background-color .3s ease',
         overflow: 'auto hidden',
         '.jetlinks-edit-table-header': {
@@ -22,7 +22,7 @@ export var genTableStyle = function genTableStyle(config) {
           position: 'relative'
         },
         '.jetlinks-edit-table-body': {
-          backgroundColor: '#fff',
+          backgroundColor: token.colorBgContainer,
           overflowY: 'hidden',
           position: 'relative',
           height: '100%',

package/es/Ellipsis/Ellipsis.md

@@ -0,0 +1,45 @@
+### Ellipsis
+
+文本省略组件，支持单行 / 多行（`lineClamp`）省略，溢出时自动显示 Tooltip 完整内容，也可改为点击展开/收起。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| lineClamp | 多行省略行数；不传则单行省略 | `number \| string` | `1` |
+| tooltip | 是否显示完整内容 Tooltip，`false` 关闭；传对象可配置 Tooltip props | `boolean \| object` | `true` |
+| expandTrigger | 展开方式，`'click'` 时点击切换展开/收起 | `string` | - |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 需要省略的内容 |
+| tooltip | Tooltip 内的自定义完整内容（默认复用内容本身） |
+
+#### 用法
+
+```vue
+<template>
+  <!-- 单行省略 + hover 显示完整内容 -->
+  <JEllipsis>这是一段很长的描述文字，超出后显示省略号……</JEllipsis>
+
+  <!-- 两行省略 + 点击展开 -->
+  <JEllipsis :line-clamp="2" expand-trigger="click">
+    多行内容，默认截断为两行，点击可在展开/收起间切换。
+  </JEllipsis>
+
+  <!-- 自定义 Tooltip 内容 -->
+  <JEllipsis :tooltip="{ placement: 'bottom' }">
+    <template #tooltip>完整内容详情</template>
+    省略的内容
+  </JEllipsis>
+</template>
+```
+
+#### Rules
+
+- 溢出判定基于 `scrollHeight > offsetHeight` 动态计算，未溢出时不弹 Tooltip、不出现省略号。
+- `lineClamp` 使用 `-webkit-line-clamp` 实现，需要 WebKit/Blink 内核支持。
+- `expandTrigger="click"` 时追加 pointer 光标样式；展开后不再触发 Tooltip。
+- 其余属性（class / style 等）自动透传到内容容器。

package/es/Empty/Empty.md

@@ -0,0 +1,34 @@
+### Empty
+
+空状态组件，内置 JetLinks 空数据插画与默认文案（可国际化），透传 ant-design-vue `Empty` 全部能力。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| description | 空状态描述文案 | `string` | 语言包默认（如"暂无数据"） |
+| image | 插画图片地址或自定义插画 | `string` | 内置 NoData 插画 |
+| imageStyle | 插画样式 | `CSSProperties` | `{ height: '60px' }` |
+| 其余 | 透传 ant-design-vue `Empty` props | - | - |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 自定义空状态内容（替代插画 + 文案） |
+| 其他具名插槽 | 透传给 ant-design-vue `Empty` |
+
+#### 用法
+
+```vue
+<template>
+  <JEmpty description="暂未接入设备，先创建一个产品再添加设备" />
+</template>
+```
+
+#### Rules
+
+- 未传 `description` 时取 `LocaleProvider` 语言包中的默认文案。
+- 组件自带包裹 `LocaleProvider`，可独立使用。
+- 默认 `imageStyle` 高度 60px，自定义插画时按需覆盖。
+- 描述文案颜色为 `#b3b3b3`、14px，由组件内联样式控制。

package/es/FullPage/FullPage.js

@@ -1,16 +1,21 @@
 /* Analyzed bindings: {
-  "ref": "setup-const",
+  "computed": "setup-const",
   "inject": "setup-const",
+  "ref": "setup-const",
+  "theme": "setup-maybe-ref",
   "useElementBounding": "setup-maybe-ref",
   "FullPageConfig": "setup-maybe-ref",
   "config": "setup-maybe-ref",
   "fullPage": "setup-ref",
-  "y": "setup-maybe-ref"
+  "y": "setup-maybe-ref",
+  "token": "setup-maybe-ref",
+  "wrapStyle": "setup-ref"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = { class: "full-page-warp-content" };
-import { ref, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
+import { theme } from 'ant-design-vue';
 import { useElementBounding } from '@vueuse/core';
 import { FullPageConfig } from "../utils/constants";
 const __sfc_main__ = _defineComponent({
@@ -21,12 +26,17 @@ const __sfc_main__ = _defineComponent({
         const config = inject(FullPageConfig, { reduceHeight: 24 });
         const fullPage = ref(null);
         const { y } = useElementBounding(fullPage);
+        const { token } = theme.useToken();
+        const wrapStyle = computed(() => ({
+            minHeight: `calc(100vh - ${y.value + config.reduceHeight}px)`,
+            background: token.value.colorBgContainer,
+        }));
         return (_ctx, _cache) => {
             return (_openBlock(), _createElementBlock("div", {
                 class: "full-page-warp",
                 ref_key: "fullPage",
                 ref: fullPage,
-                style: _normalizeStyle({ minHeight: `calc(100vh - ${_unref(y) + _unref(config).reduceHeight}px)` })
+                style: _normalizeStyle(wrapStyle.value)
             }, [
                 _createElementVNode("div", _hoisted_1, [
                     _renderSlot(_ctx.$slots, "default")

package/es/FullPage/FullPage.md

@@ -0,0 +1,31 @@
+### FullPage
+
+全屏页面容器，自动测量容器顶部偏移并计算 `minHeight`，使内容区撑满剩余视口高度，背景使用主题容器色。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| reduceHeight | 视口高度缩减量（px），顶部还有固定工具条时设置 | `number` | 由 `ConfigProvider` 的 `FullPageConfig` 注入，默认 `24` |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 页面内容 |
+
+#### 用法
+
+```vue
+<template>
+  <JFullPage>
+    <div>内容区自动撑满剩余高度</div>
+  </JFullPage>
+</template>
+```
+
+#### Rules
+
+- 通过 `useElementBounding` 实时测量容器 `top`，滚动时高度自动跟随调整。
+- `reduceHeight` 可在 `JConfigProvider` 的 `FullPageConfig` 中全局配置，组件 props 不直接暴露时优先使用全局注入值。
+- 背景色取自 ant-design-vue 主题 token 的 `colorBgContainer`。

package/es/Icon/Icon.md

@@ -0,0 +1,33 @@
+### Icon
+
+图标组件（注册名 `AIcon`），统一承载 ant-design-vue 图标与 iconfont 自定义图标；按 `type` 自动路由到对应图标源。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 图标名，优先匹配 `@ant-design/icons-vue` 导出；未匹配时走 iconfont | `string` | - |
+| scriptUrl | iconfont 的 script 地址（含 `//at.alicdn.com/...` 前缀），优先级高于全局配置 | `string` | 全局 `IconConfig.scriptUrl` |
+| class | 图标类名 | `string` | - |
+| style | 图标样式（透传） | `CSSProperties` | - |
+
+#### 事件
+
+| 事件 | 说明 |
+| --- | --- |
+| click | 点击图标 |
+
+#### 用法
+
+```vue
+<template>
+  <AIcon type="CloseOutlined" />
+  <AIcon type="icon-device" script-url="//at.alicdn.com/t/c/font_xxx.js" />
+</template>
+```
+
+#### Rules
+
+- `type` 命中 `@ant-design/icons-vue` 导出名时直接渲染 Ant 图标；否则渲染 iconfont 图标，因此两种图标体系可混用。
+- `scriptUrl` 未在组件上传入时，回退到 `JConfigProvider` 的 `IconConfig.scriptUrl` 全局配置。
+- 未配置任何 scriptUrl 且 type 不匹配时渲染空节点，不报错。

package/es/LocaleProvider/LocaleProvider.md

@@ -0,0 +1,25 @@
+### LocaleProvider
+
+语言包 Provider，向组件树提供统一的文案语言包（默认中文），供 `useLocaleReceiver` 消费。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| locale | 组件文案语言包对象，按组件名分组 | `Record<string, any>` | 内置 `zh-CN` |
+
+#### 用法
+
+```vue
+<template>
+  <JLocaleProvider :locale="enUS">
+    <app-content />
+  </JLocaleProvider>
+</template>
+```
+
+#### Rules
+
+- 通过 provide `componentLocaleData` 向下注入；子组件用 `useLocaleReceiver('组件名')` 获取对应分组的文案。
+- `locale` 变化时深监听并重新注入。
+- 通常无需单独使用：`JConfigProvider` 内部已包含本组件，直接配 `componentsLocale` 即可。

package/es/LocaleReciver/LocaleReciver.md

@@ -0,0 +1,42 @@
+### LocaleReceiver
+
+国际化接收 Hook（目录名 `LocaleReciver`），在组合式 API 中读取 `JLocaleProvider` 注入的语言包片段，供组件消费多语言文案。
+
+#### 签名
+
+```ts
+useLocaleReceiver<T extends string>(
+  componentName: T,
+  defaultLocale?: Record<string, any>[T] | Function | ComputedRef,
+  propsLocale?: Ref<Record<string, any>[T]>,
+): [ComputedRef<Record<string, any>[T]>]
+```
+
+| 参数 | 说明 |
+| --- | --- |
+| componentName | 语言包分组名（如 `'DragModal'`、`'Empty'`），对应 `locale/zh-CN` 中的键 |
+| defaultLocale | 兜底文案，可传对象 / 函数 / 响应式值 |
+| propsLocale | 组件 props 上的语言覆盖 |
+
+#### 返回值
+
+| 返回值 | 说明 |
+| --- | --- |
+| `[componentLocale]` | 响应式文案对象：`defaultLocale ⊕ 上下文中 componentName 分组 ⊕ propsLocale`（后者覆盖前者） |
+
+#### 用法
+
+```vue
+<script setup lang="ts">
+import { useLocaleReceiver } from '../LocaleReciver'
+
+const [contextLocale] = useLocaleReceiver('DragModal')
+// contextLocale.value.cancel / contextLocale.value.confirm
+</script>
+```
+
+#### Rules
+
+- 未注入 `JLocaleProvider` 时回退到内置 `zh-CN` 语言包，组件可安全单独使用。
+- 三个来源合并顺序：`defaultLocale` → 上下文语言包 → `propsLocale`，越靠后优先级越高。
+- 该文件是 hook 而非组件，不参与 `app.component` 注册。

package/es/Markdown/Markdown.md

@@ -0,0 +1,40 @@
+### Markdown
+
+Markdown 渲染组件，基于 `markdown-it` 并预装常用插件（锚点、任务列表、脚注、TOC、代码高亮、上下标、删除线等）。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| source | Markdown 源文本 | `string` | `''` |
+| html | 是否渲染内联 HTML | `boolean` | `false` |
+| breaks | 换行符是否转为 `<br>` | `boolean` | `false` |
+| linkify | 自动识别链接 | `boolean` | `false` |
+| typographer | 排版化（引号、破折号等） | `boolean` | `false` |
+| quotes | 排版引号字符 | `string` | `'"“”‘’'` |
+| xhtmlOut | 输出 XHTML 兼容标签 | `boolean` | `false` |
+| langPrefix | 代码块语言类名前缀 | `string` | `'language-'` |
+| anchor | 锚点插件配置（`markdown-it-anchor`） | `object` | `{}` |
+| highlight | 代码高亮配置（`markdown-it-highlightjs`） | `object` | `{}` |
+| tasklists | 任务列表配置（`markdown-it-task-lists`） | `object` | `{}` |
+| toc | 目录插件配置（`markdown-it-toc-done-right`） | `object` | `{}` |
+| emoji | 表情插件配置 | `object` | `{}` |
+| plugins | 额外插件数组 `{ plugin, options }[]` | `array` | `[]` |
+
+#### 用法
+
+```vue
+<template>
+  <JMarkdown :source="markdownText" />
+</template>
+
+<script setup lang="ts">
+const markdownText = '# 设备说明书\n\n- [x] 支持任务列表\n- [ ] 待办项'
+</script>
+```
+
+#### Rules
+
+- 预装插件：abbr / anchor / deflist / footnote / highlightjs / ins / mark / sub / sup / task-lists / toc。
+- 额外插件通过 `plugins` 传入 `{ plugin, options }`，渲染时按顺序 `markdown.use`。
+- 渲染输出包在高度 100% 的容器中；`source` 变化时自动重新渲染（`onUpdated`）。

package/es/PermissionButton/PermissionButton.md

@@ -0,0 +1,40 @@
+### PermissionButton
+
+权限按钮组件，根据权限码自动控制按钮的可用性：无权限时禁用并提示，有确认需求时内置 Popconfirm / Modal 二次确认，并支持 Tooltip 与自定义确认组件。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| hasPermission | 权限码；`true` 或 `undefined` 视为有权限，支持字符串 / 数组（任一命中） | `string \| string[] \| boolean` | `undefined` |
+| noPermissionTitle | 无权限时 Tooltip 文案 | `string` | 语言包（默认"暂无权限"） |
+| popConfirm | 点击后的二次确认配置（ant-design-vue `PopconfirmProps`，可用 `onConfirm` / `onCancel`） | `object` | - |
+| popConfirmBefore | 点击时先执行的异步函数，返回值合并进 `popConfirm`（可用于动态确认内容） | `Function` | - |
+| tooltip | 按钮 Tooltip 配置（`TooltipProps`） | `object` | - |
+| style | 按钮样式 | `CSSProperties` | - |
+| 其余 | 透传 ant-design-vue `Button` props（`buttonProps()`，去除 `icon`） | - | - |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| default | 按钮文字 / 内容 |
+| icon | 按钮图标 |
+| button | 完全自定义按钮节点（跳过内部 Button 渲染，仅保留权限逻辑） |
+
+#### 用法
+
+```vue
+<template>
+  <JPermissionButton has-permission="device:delete" danger :pop-confirm="{ title: '确认删除该设备？' }">
+    删除设备
+  </JPermissionButton>
+</template>
+```
+
+#### Rules
+
+- 权限判定基于 `usePermission`（来自 `@jetlinks-web/hooks`）；`hasPermission` 传 `true` 或省略时恒有权限。
+- 有权限且配置 `popConfirm` 时：优先使用 `JConfigProvider` 中 `PermissionButtonConfig.components` 自定义确认组件，否则回退 `Modal.confirm`。
+- 无权限时不渲染原始按钮逻辑，改为渲染带提示的禁用态（Tooltip 包裹）。
+- `disabled` 透传自 Button props，与权限判定叠加。

package/es/ProLayout/ProLayout.md

@@ -0,0 +1,63 @@
+### ProLayout
+
+高级布局组件（兼容 `@ant-design-vue/pro-layout` 布局体系），提供侧栏 / 顶栏 / 混合（mix）三种布局与页面容器 `PageContainer`，适配 PC 与移动端。
+
+#### ProLayout Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| layout | 布局模式：`side` / `top` / `mix` | `string` | `'side'` |
+| menuData | 菜单数据（含 `path` / `name` / `icon` / `children` 等） | `MenuDataItem[]` | - |
+| title | 站点标题 | `string` | - |
+| logo | Logo | `string \| slot` | - |
+| fixedHeader | 固定顶栏 | `boolean` | - |
+| fixSiderbar | 固定侧栏 | `boolean` | - |
+| collapsed / collapsedWidth / siderWidth | 侧栏折叠状态与宽度 | - | - |
+| splitMenus | 混合布局下分离菜单 | `boolean` | - |
+| breadcrumb | 面包屑数据或渲染函数 | `object \| Function` | - |
+| pure | 纯布局（不渲染页头等） | `boolean` | - |
+| loading | 布局加载态 | `boolean` | - |
+| disableMobile | 禁用移动端模式 | `boolean` | - |
+| disableContentMargin | 禁用内容区 margin | `boolean` | - |
+| contentStyle | 内容区样式 | `CSSProperties` | - |
+| headerRender / headerContentRender | 自定义顶栏渲染 | `Function \| boolean` | - |
+| collapsedButtonRender | 自定义折叠按钮 | `Function \| boolean` | - |
+| classNames | 各区域自定义类名 | `object` | `{}` |
+| 其余 | 透传 defaultSettingProps / siderMenuProps / headerViewProps 等 | - | - |
+
+#### PageContainer Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 页头标题 | `string \| Render` | - |
+| subTitle | 副标题 | `string \| Render` | - |
+| content | 页头内容区 | `string \| Render` | - |
+| extra / extraContent | 页头右侧操作区 | `string \| Render` | - |
+| header | 自定义页头（传 `false` 隐藏） | `Render \| boolean` | - |
+| pageHeaderRender | 自定义整个页头渲染 | `Function` | - |
+| breadcrumb | 面包屑 | `object` | - |
+| tabList / onTabChange | 页头页签与切换 | - | - |
+| fixedHeader | 固定页头 | `boolean` | - |
+| pure | 纯内容模式 | `boolean` | - |
+
+#### 用法
+
+```vue
+<template>
+  <ProLayout v-model:collapsed="collapsed" :menu-data="menuData" layout="side" :fixed-header="true">
+    <template #headerContentRender="{ collapsed }">
+      <div>自定义顶栏</div>
+    </template>
+    <PageContainer title="设备管理">
+      <router-view />
+    </PageContainer>
+  </ProLayout>
+</template>
+```
+
+#### Rules
+
+- 布局切换由 `layoutType`（`LayoutType.PC / PAD`）与 `layout` 共同驱动：PAD 模式下侧栏自动收起为图标。
+- 菜单数据项遵循 `MenuDataItem` 结构；菜单 / 路由联动由外部路由系统提供 `selectedKeys` 等控制。
+- 折叠状态受控（`v-model:collapsed`），内部默认提供折叠按钮。
+- 移动端默认开启响应式模式，可通过 `disableMobile` 关闭。