@jetlinks-web/components 3.3.12 → 3.3.14

package/lib/ProLayout/SiderMenu/style.js

@@ -8,10 +8,19 @@ exports.genSiderMenuStyle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antDesignVue = require("ant-design-vue");
 var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(config) {
-  var _$concat9;
+  var _$concat0;
   var token = config.token;
   var proLayoutSiderMenuCls = "".concat(token.antCls, "-pro-sider");
   var proLayoutHeaderHeight = '48px';
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkMenuBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkMenuSubBg = isAntdvDarkTheme ? token.colorBgContainer : '#000c17';
+  var darkMenuPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkMenuHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkMenuActiveBg = isAntdvDarkTheme ? token.colorFillSecondary : 'rgba(255, 255, 255, 0.12)';
+  var darkMenuTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkMenuTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkMenuTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutTitleHideKeyframes = new _antDesignVue.Keyframes('pro-layout-title-hide', {
     '0%': {
       display: 'none',
@@ -26,14 +35,46 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       opacity: 1
     }
   });
-  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat9 = {
+  return ["\n      ".concat(proLayoutSiderMenuCls, " > ").concat(token.antCls, "-layout-sider-children {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n      }\n    "), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls), (_$concat0 = {
     position: 'relative',
-    backgroundColor: '#001529',
+    background: darkMenuBg,
     borderRight: 0,
     // FIXME: 临时修正(可能不会做兼容)
     zIndex: 20
-  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(token.antCls, "-menu"), {
+  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(token.antCls, "-menu"), {
     background: 'transparent'
+  }), "&".concat(proLayoutSiderMenuCls, "-dark, &").concat(token.antCls, "-layout-sider-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    background: darkMenuBg
+  }, "".concat(token.antCls, "-layout-sider-children"), {
+    background: darkMenuBg
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkMenuTextColor,
+    background: 'transparent'
+  }, "".concat(token.antCls, "-menu-sub"), {
+    background: darkMenuSubBg
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a, ").concat(token.antCls, "-menu-submenu-title a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover .anticon, ").concat(token.antCls, "-menu-submenu-title:hover ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkMenuTextHoverColor
+  }), "".concat(token.antCls, "-menu-submenu-open > ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuActiveBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), "&".concat(proLayoutSiderMenuCls, "-dark").concat(token.antCls, "-layout-sider-dark"), {
+    background: darkMenuBg
+  }), "&".concat(proLayoutSiderMenuCls, "-dark ").concat(token.antCls, "-menu-dark").concat(token.antCls, "-menu-inline ").concat(token.antCls, "-menu-sub").concat(token.antCls, "-menu-inline"), {
+    background: darkMenuSubBg
   }), "&".concat(token.antCls, "-layout-sider-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-item a"), {
     color: token.colorTextHeading
   }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item a:hover"), {
@@ -51,12 +92,12 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       justifyContent: 'center',
       minHeight: 32
     },
-    'img': {
+    img: {
       display: 'inline-block',
       height: 32,
       verticalAlign: 'middle'
     },
-    'h1': {
+    h1: {
       display: 'inline-block',
       height: '32px',
       margin: '0 0 0 12px',
@@ -89,7 +130,7 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
       width: '6px',
       height: '6px'
     },
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(255, 255, 255, 0.15)',
       borderRadius: '3px',
       boxShadow: 'inset 0 0 5px rgba(37, 37, 37, 0.05)'
@@ -102,9 +143,24 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     }
   }, "".concat(proLayoutSiderMenuCls, "-logo"), {
     h1: {
-      color: '#333'
+      color: darkMenuTextHoverColor
+    }
+  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat0, "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.15)',
+    '::-webkit-scrollbar': {
+      width: '6px',
+      height: '6px'
+    },
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(255, 255, 255, 0.15)',
+      borderRadius: '3px'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(255, 255, 255, 0.2)',
+      borderRadius: '3px'
     }
-  })), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
+  }), "&".concat(token.antCls, "-layout-sider-collapsed"), (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu-inline-collapsed"), {
     width: '48px'
   }), "".concat(proLayoutSiderMenuCls), (0, _defineProperty2.default)({}, "".concat(proLayoutSiderMenuCls, "-logo"), {
     padding: '16px 24px'
@@ -120,30 +176,37 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
   }, "> ".concat(token.antCls, "-menu-root"), (0, _defineProperty2.default)({}, ":not".concat(proLayoutSiderMenuCls, "-link-menu"), {
     height: "calc(100vh - ".concat(proLayoutHeaderHeight, ")"),
     overflowY: 'auto'
-  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }))), "&".concat(proLayoutSiderMenuCls, "-light"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer,
     boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.05)'
   }, "".concat(token.antCls, "-layout-sider-children"), {
-    '::webkit-scrollbar-track': {
+    '::-webkit-scrollbar-track': {
       background: 'rgba(0, 0, 0, 0.06)',
       borderRadius: '3px',
-      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)',
-      /* 滚动条滑块 */
-      '::-webkit-scrollbar-thumb': {
-        background: 'rgba(0, 0, 0, 0.12)',
-        borderRadius: '3px',
-        boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
-      }
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)',
+      borderRadius: '3px',
+      boxShadow: 'inset 0 0 5px rgba(0, 21, 41, 0.05)'
+    }
+  }), "".concat(proLayoutSiderMenuCls, "-body"), {
+    scrollbarColor: 'rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.06)',
+    '::-webkit-scrollbar-track': {
+      background: 'rgba(0, 0, 0, 0.06)'
+    },
+    '::-webkit-scrollbar-thumb': {
+      background: 'rgba(0, 0, 0, 0.12)'
     }
   }), "".concat(proLayoutSiderMenuCls, "-logo"), {
-    'h1': {
+    h1: {
       color: token.colorPrimary
     }
   }), "".concat(token.antCls, "-menu-light"), {
     borderRightColor: 'transparent'
   }), "".concat(proLayoutSiderMenuCls, "-collapsed-button"), {
     borderTop: "".concat(token.lineWidth, " solid ").concat(token.colorSplit)
-  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_$concat9, "".concat(proLayoutSiderMenuCls, "-icon"), {
+  })), "".concat(proLayoutSiderMenuCls, "-icon"), {
     width: '14px',
     verticalAlign: 'baseline'
   }), "".concat(proLayoutSiderMenuCls, "-links"), (0, _defineProperty2.default)({
@@ -159,19 +222,35 @@ var genSiderMenuStyle = exports.genSiderMenuStyle = function genSiderMenuStyle(c
     height: '100%',
     lineHeight: 1
   }), '.drawer .drawer-content', {
-    background: "#001529"
-  }))), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
+    background: darkMenuBg
+  }))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkMenuTextHoverColor,
+    backgroundColor: darkMenuHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  })), "".concat(token.antCls, "-menu-submenu-popup").concat(token.antCls, "-menu-dark").concat(token.antCls, "-pro-menu-popup ").concat(token.antCls, "-menu"), {
+    background: darkMenuPopupBg,
+    color: darkMenuTextColor
+  }), "".concat(token.antCls, "-pro-menu-item"), (0, _defineProperty2.default)({}, ".anticon".concat(token.antCls, "-pro-menu-item-title"), {
     marginLeft: '10px'
   })), '.sider-app-menus', {
     width: '100px',
-    backgroundColor: '#fff',
+    backgroundColor: token.colorBgContainer,
     cursor: 'pointer',
     padding: '6px',
     transition: 'all .3s',
     borderRadius: '4px',
-    color: '#333',
+    color: token.colorText,
     '&:hover': {
-      backgroundColor: '#efefef'
+      backgroundColor: token.colorFillQuaternary
     }
   })];
 };

package/lib/ProLayout/TopHeader/style.js

@@ -10,6 +10,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   var token = config.token;
   var topNavHeaderCls = "".concat(token.antCls, "-pro-top-nav-header");
   var proLayoutGlobalHeaderCls = "".concat(token.antCls, "-pro-global-header");
+  var isAntdvDarkTheme = ['#000', '#000000'].includes(String(token.colorBgLayout).toLowerCase());
+  var darkHeaderBg = isAntdvDarkTheme ? token.colorBgLayout : '#001529';
+  var darkHeaderPopupBg = isAntdvDarkTheme ? token.colorBgElevated : '#001529';
+  var darkHeaderHoverBg = isAntdvDarkTheme ? token.colorFillTertiary : 'rgba(255, 255, 255, 0.08)';
+  var darkHeaderTextColor = isAntdvDarkTheme ? token.colorText : 'rgba(255, 255, 255, 0.85)';
+  var darkHeaderTextSecondaryColor = isAntdvDarkTheme ? token.colorTextSecondary : 'rgba(255, 255, 255, 0.65)';
+  var darkHeaderTextHoverColor = isAntdvDarkTheme ? token.colorTextHeading : '#fff';
   var proLayoutHeaderBg = token.colorBgContainer;
   var proLayoutHeaderHoverBg = token.colorBgContainer;
   var proLayoutHeaderBoxShadow = '0 1px 4px rgba(0, 21, 41, 0.08)';
@@ -30,13 +37,13 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     marginLeft: '16px',
     fontSize: '20px'
   }), "".concat(proLayoutGlobalHeaderCls, "-layout"), (0, _defineProperty2.default)({}, "".concat(proLayoutGlobalHeaderCls, "-layout-mix"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-    backgroundColor: '#001529'
+    backgroundColor: darkHeaderBg
   }, "".concat(proLayoutGlobalHeaderCls, "-logo"), {
-    'h1': {
-      color: '#fff'
+    h1: {
+      color: darkHeaderTextHoverColor
     }
   }), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextHoverColor
   }))), "".concat(proLayoutGlobalHeaderCls, "-logo"), {
     position: 'relative',
     overflow: 'hidden',
@@ -65,17 +72,17 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
   })), '.dark', {
     height: '48px',
     '.action': (0, _defineProperty2.default)({
-      color: 'rgba(255, 255, 255, 0.85)',
+      color: darkHeaderTextColor,
       '> i': {
-        color: 'rgba(255, 255, 255, 0.85)'
+        color: darkHeaderTextColor
       },
       '&:hover,&.opend': {
         background: token.colorPrimary
       }
     }, "".concat(token.antCls, "-badge"), {
-      color: 'rgba(255, 255, 255, 0.85)'
+      color: darkHeaderTextColor
     })
-  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+  })), topNavHeaderCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'relative',
     width: '100%',
     height: '100%',
@@ -83,7 +90,31 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     transition: 'background 0.3s, width 0.2s'
   }, "".concat(token.antCls, "-menu"), {
     backgroundColor: 'transparent'
-  }), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+  }), '&.dark', (0, _defineProperty2.default)((0, _defineProperty2.default)({
+    backgroundColor: darkHeaderBg,
+    color: darkHeaderTextColor
+  }, "".concat(topNavHeaderCls, "-logo"), {
+    h1: {
+      color: token.colorPrimary
+    }
+  }), "".concat(token.antCls, "-menu-dark"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
+    color: darkHeaderTextColor,
+    backgroundColor: 'transparent'
+  }, "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item .anticon, ").concat(token.antCls, "-menu-submenu-title .anticon, ").concat(token.antCls, "-menu-submenu-arrow"), {
+    color: darkHeaderTextSecondaryColor
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-menu-item-selected a, ").concat(token.antCls, "-menu-item-selected .anticon"), {
+    color: token.colorTextLightSolid
+  }))), '&.light', (0, _defineProperty2.default)((0, _defineProperty2.default)({
     backgroundColor: token.colorBgContainer
   }, "".concat(topNavHeaderCls, "-logo"), {
     h1: {
@@ -103,7 +134,7 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     alignItems: 'center',
     marginInlineEnd: '16px'
   })), '.anticon', {
-    color: '#fff'
+    color: darkHeaderTextColor
   }), "".concat(topNavHeaderCls, "-logo"), {
     position: 'relative',
     minWidth: '165px',
@@ -131,7 +162,20 @@ var genTopHeaderStyle = exports.genTopHeaderStyle = function genTopHeaderStyle(c
     height: '100%'
   }, "".concat(token.antCls, "-badge"), {
     color: 'unset'
-  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-badge"), {
+  }))))), "".concat(token.antCls, "-pro-menu-popup"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-menu, ").concat(token.antCls, "-menu-dark"), {
+    background: darkHeaderPopupBg,
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item, ").concat(token.antCls, "-menu-submenu-title"), {
+    color: darkHeaderTextColor
+  }), "".concat(token.antCls, "-menu-item a"), {
+    color: 'inherit'
+  }), "".concat(token.antCls, "-menu-item:hover, ").concat(token.antCls, "-menu-submenu-title:hover"), {
+    color: darkHeaderTextHoverColor,
+    backgroundColor: darkHeaderHoverBg
+  }), "".concat(token.antCls, "-menu-item-selected"), {
+    color: token.colorTextLightSolid,
+    backgroundColor: token.colorPrimary
+  }), "".concat(token.antCls, "-badge"), {
     color: 'unset'
   }));
 };

package/lib/ProTable/ProTable.js

@@ -315,12 +315,10 @@ const __sfc_main__ = _defineComponent({
         }, { deep: true, immediate: true });
         onMounted(() => {
             windowChange(); // 初始化
-            window.onresize = () => {
-                windowChange();
-            };
+            window.addEventListener('resize', windowChange);
         });
         onUnmounted(() => {
-            window.onresize = null;
+            window.removeEventListener('resize', windowChange);
         });
         __expose({ reload, dataSource: _dataSource });
         return (_ctx, _cache) => {

package/lib/ProTable/ProTable.md

@@ -0,0 +1,70 @@
+### ProTable
+
+高级表格组件，封装搜索、请求、分页、卡片/列表双形态（网格）、行选择与插槽扩展，支持树形（`TREE`）与分页（`PAGE`）两种模式。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| request | 请求数据的 api（promise） | `promise` | - |
+| loading | 控制 loading | `boolean` | `undefined` |
+| columns | 表格列配置（ant-design-vue Table columns） | `array` | - |
+| params | 搜索参数 | `object` | `{}` |
+| type | 表格类型：`TREE` \| `PAGE` | `string` | `'PAGE'` |
+| noPagination | 是否显示分页 | `boolean` | `true` |
+| rowSelection | 行选择配置 | `object` | - |
+| dataSource | 数据数组（本地数据模式） | `object[]` | - |
+| gridColumns | 不同分辨率下每行卡片数量：`[0]` 1366~1440、`[1]` 1440~1600、`[2]` >1600 | `number[]` | - |
+| gridColumn | 每行展示的卡片数量 | `number` | - |
+| alertRender | 是否展示上方选择提示框 | `boolean` | `true` |
+| defaultParams | 默认参数 | `object` | `{}` |
+| bodyStyle | 内容区域自定义样式 | `object` | - |
+
+#### Column 扩展
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| scopedSlots | 是否为插槽列 | `boolean` | `false` |
+| hideInTable | 是否在表格中隐藏 | `boolean` | - |
+
+#### 事件
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| cancelSelect | 取消选择 | `() => void` |
+
+#### 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| card | 卡片形态下的卡片渲染（`gridColumn` 模式） |
+| headerTitle | `PAGE` / `TREE` 模式顶部左侧 |
+| rightExtraRender | `PAGE` / `TREE` 模式顶部右侧 |
+| paginationRender | 分页自定义 |
+| 其余 | 透传 ant-design-vue Table 插槽 |
+
+#### 用法
+
+```vue
+<template>
+  <JProTable
+    type="PAGE"
+    :columns="columns"
+    :request="fetchList"
+    :params="searchParams"
+    :row-selection="rowSelection"
+  >
+    <template #headerTitle>设备列表</template>
+    <template #rightExtraRender>
+      <a-button type="primary" @click="onAdd">新增</a-button>
+    </template>
+  </JProTable>
+</template>
+```
+
+#### Rules
+
+- 表格主体属性与 `Column` 均参考 ant-design-vue `Table`，其余扩展字段见上表。
+- `request` 模式由组件内部管理 loading 与分页状态；`dataSource` 模式为受控本地数据。
+- 卡片网格形态（`gridColumns` / `gridColumn`）下通过 `card` 插槽渲染卡片。
+- 搜索联动：配合 `Search` 组件时，`params` 变化自动重新请求。

package/lib/ProTable/style/index.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
+var _scrollbar = require("../../style/scrollbar");
 var genProTableStyle = function genProTableStyle(config) {
   var token = config.token;
   return {
     '.jtable-body-spin': {
       height: '100%',
       width: '100%',
-      backgroundColor: '#fff',
+      backgroundColor: token.colorBgContainer,
       '.ant-spin-nested-loading': {
         height: '100%',
         '.ant-spin-container': {
@@ -47,7 +49,7 @@ var genProTableStyle = function genProTableStyle(config) {
           width: '62px',
           '.right-button-icon': {
             fontSize: '16px',
-            color: '#d9d9d9'
+            color: token.colorTextDisabled
           },
           '.ant-radio-button-wrapper': {
             padding: '0 8px'
@@ -61,9 +63,10 @@ var genProTableStyle = function genProTableStyle(config) {
     '.jtable-box': {
       flex: 1,
       minHeight: 0,
-      '.jtable-card': (0, _defineProperty2.default)({
+      '.jtable-card': (0, _objectSpread3.default)((0, _objectSpread3.default)({
         height: '100%',
-        overflowY: 'auto',
+        overflowY: 'auto'
+      }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({
         '.jtable-card-items': {
           display: 'grid',
           gridGap: '18px',
@@ -74,7 +77,7 @@ var genProTableStyle = function genProTableStyle(config) {
         }
       }, "j-table-empty", {
         marginTop: '100px'
-      }),
+      })),
       '.ant-table-wrapper': {
         height: '100%',
         '.ant-table': {
@@ -92,11 +95,11 @@ var genProTableStyle = function genProTableStyle(config) {
           display: 'flex',
           flexDirection: 'column'
         },
-        '.ant-table-body': {
+        '.ant-table-body': (0, _objectSpread3.default)({
           flex: 1,
           minHeight: 0,
           overflowY: 'auto'
-        }
+        }, (0, _scrollbar.genTokenScrollbarStyle)(token))
       }
     },
     '.jtable-alert': {

package/lib/RadioButton/RadioButton.md

@@ -0,0 +1,32 @@
+### RadioButton
+
+单选按钮组件，以网格布局渲染一组按钮，点击切换选中值（受控）。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前选中值，可用 `v-model:value` | `string \| number` | - |
+| options | 选项列表 | `{ label: string; value: string \| number }[]` | `[]` |
+| columns | 网格列数 | `number` | `3` |
+
+#### 事件
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| update:value | 值变化（v-model） | `(value)` |
+| select | 选中时 | `(value)` |
+
+#### 用法
+
+```vue
+<template>
+  <JRadioButton v-model:value="value" :options="options" :columns="4" />
+</template>
+```
+
+#### Rules
+
+- 纯单选，点击已选中项不触发重复事件。
+- 列数通过 `grid-template-columns: repeat(columns, 1fr)` 实现，`columns` 控制每行按钮数量。
+- `value` 为受控属性，外部变化会同步到内部状态。

package/lib/RadioButton/style/index.js

@@ -17,10 +17,11 @@ var genRadioButtonStyle = function genRadioButtonStyle(config) {
         textAlign: 'center',
         height: '100%',
         borderRadius: '2px',
-        backgroundColor: '#f5f5f5',
+        backgroundColor: token.colorFillTertiary,
+        color: token.colorText,
         cursor: 'pointer',
         '&.active': {
-          color: '#fff',
+          color: token.colorTextLightSolid,
           backgroundColor: token.colorPrimary
         }
       }

package/lib/Scrollbar/Scrollbar.md

@@ -0,0 +1,43 @@
+### Scrollbar
+
+自定义滚动条组件，替换浏览器原生滚动条，提供统一样式与横向/纵向滚动监听。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| height | 容器高度 | `string \| number` | `''` |
+| maxHeight | 容器最大高度 | `string \| number` | `''` |
+| native | 是否使用原生滚动条 | `boolean` | `false` |
+| wrapStyle | 外层 wrap 样式 | `StyleValue` | `''` |
+| wrapClass | 外层 wrap 类名 | `string \| array` | `''` |
+| viewClass | 内容 view 类名 | `string \| array` | `''` |
+| viewStyle | 内容 view 样式 | `StyleValue` | `''` |
+| tag | 内容容器标签 | `string` | `'div'` |
+| noresize | 不响应容器尺寸变化（容器不变时开启可优化性能） | `boolean` | `false` |
+| always | 始终显示滚动条 | `boolean` | `false` |
+| minSize | 滚动条最小尺寸（px） | `number` | `20` |
+| id | 内容容器 id | `string` | - |
+| role / ariaLabel / ariaOrientation | 无障碍属性 | - | - |
+
+#### 事件
+
+| 事件 | 说明 | 回调参数 |
+| --- | --- | --- |
+| scroll | 滚动时 | `({ scrollTop, scrollLeft })` |
+
+#### 用法
+
+```vue
+<template>
+  <Scrollbar :height="300" always @scroll="onScroll">
+    <div style="height: 1000px">超长内容</div>
+  </Scrollbar>
+</template>
+```
+
+#### Rules
+
+- 默认隐藏原生滚动条，渲染自定义细滚动条；`native` 为 `true` 时保留原生样式。
+- `scroll` 事件仅在 `scrollTop` / `scrollLeft` 均为数字时触发。
+- 容器尺寸固定且不变化时建议设置 `noresize`，避免多余监听开销。

package/lib/Scrollbar/style/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _styleRegister = _interopRequireDefault(require("../../style/styleRegister"));
-var scrollbarBgColor = '#909399';
-var scrollbarHoverBgColor = '#909399';
+var _scrollbar = require("../../style/scrollbar");
 var scrollbarHoverOpacity = 0.5;
 var scrollbarOpacity = 0.3;
 var transitionDuration = '0.3s';
@@ -19,27 +19,27 @@ var genScrollbarStyle = function genScrollbarStyle(config) {
     overflow: 'hidden',
     position: 'relative',
     height: '100%'
-  }, "".concat(componentCls, "__wrap"), (0, _defineProperty2.default)({
+  }, "".concat(componentCls, "__wrap"), (0, _objectSpread3.default)((0, _objectSpread3.default)({
     overflow: 'auto',
     height: '100%'
-  }, "".concat(componentCls, "--hidden-default"), {
+  }, (0, _scrollbar.genTokenScrollbarStyle)(token)), {}, (0, _defineProperty2.default)({}, "".concat(componentCls, "--hidden-default"), {
     scrollbarWidth: 'none',
     '&::-webkit-scrollbar': {
       display: 'none'
     }
-  })), "".concat(componentCls, "__thumb"), {
+  }))), "".concat(componentCls, "__thumb"), {
     position: 'relative',
     display: 'block',
     width: 0,
     height: 0,
     cursor: 'pointer',
     borderRadius: 'inherit',
-    backgroundColor: scrollbarBgColor,
+    backgroundColor: token.colorFillSecondary,
     transition: "".concat(transitionDuration, " background-color"),
     opacity: scrollbarOpacity,
     '&:hover': {
-      backgroundColor: scrollbarHoverBgColor,
-      opacity: scrollbarOpacity
+      backgroundColor: token.colorFill,
+      opacity: scrollbarHoverOpacity
     }
   }), "".concat(componentCls, "__bar"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
     position: 'absolute',