@hsu-react/ui 2.2.5 → 2.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/es/layout/NavTabBar/index.js +14 -15
  2. package/es/layout/NavTabBar/index.module.scss +10 -5
  3. package/lib/layout/NavTabBar/index.js +13 -14
  4. package/lib/layout/NavTabBar/index.module.scss +10 -5
  5. package/package.json +1 -1
  6. package/src/layout/NavTabBar/index.module.scss +10 -5
  7. package/src/layout/NavTabBar/index.tsx +13 -13
package/es/layout/NavTabBar/index.js CHANGED
@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
10
10
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
11
11
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
12
12
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
- import { Tabs as AntdTabs, Tooltip } from "antd";
13
+ import { Tabs as AntdTabs } from "antd";
14
14
  import React, { useCallback, useMemo, useState } from "react";
15
15
  import { useNavigate } from "react-router";
16
16
  import { closestCenter, DndContext, PointerSensor, useSensor } from "@dnd-kit/core";
@@ -148,20 +148,19 @@ var NavTabBar = function NavTabBar(props) {
148
148
  tabBarExtraContent: showReload ? {
149
149
  left:
150
150
  /*#__PURE__*/
151
- // 不用 Button 的 title —— 本库的 Button 把 title 当作 children 的兜底
152
- // （children ?? title），传了会把文案画到按钮里，而不是变成悬浮提示
153
- _jsx(Tooltip, {
154
- title: "\u5237\u65B0\u5F53\u524D\u9875",
155
- children: /*#__PURE__*/_jsx(Button, {
156
- className: styles.reload,
157
- type: "text",
158
- size: "small",
159
- "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
160
- icon: /*#__PURE__*/_jsx(Icon, {
161
- icon: "ep:refresh"
162
- }),
163
- onClick: reloadCurrent
164
- })
151
+ // 不加悬浮提示：图标含义直白，一颗 28px 的按钮顶出一块深色气泡反而抢眼。
152
+ // 文案只留在 aria-label 上给读屏用。
153
+ // 另注意不能改用 Button 的 title —— 本库的 Button 把 title 当作 children
154
+ // 的兜底（children ?? title），传了会把文案画进按钮里
155
+ _jsx(Button, {
156
+ className: styles.reload,
157
+ type: "text",
158
+ size: "small",
159
+ "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
160
+ icon: /*#__PURE__*/_jsx(Icon, {
161
+ icon: "ep:refresh"
162
+ }),
163
+ onClick: reloadCurrent
165
164
  })
166
165
  } : undefined,
167
166
  hideAdd: true,
package/es/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }
package/lib/layout/NavTabBar/index.js CHANGED
@@ -139,20 +139,19 @@ const NavTabBar = props => {
139
139
  tabBarExtraContent: showReload ? {
140
140
  left:
141
141
  /*#__PURE__*/
142
- // 不用 Button 的 title —— 本库的 Button 把 title 当作 children 的兜底
143
- // （children ?? title），传了会把文案画到按钮里，而不是变成悬浮提示
144
- (0, _jsxRuntime.jsx)(_antd.Tooltip, {
145
- title: "\u5237\u65B0\u5F53\u524D\u9875",
146
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
147
- className: _indexModule.default.reload,
148
- type: "text",
149
- size: "small",
150
- "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
151
- icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
152
- icon: "ep:refresh"
153
- }),
154
- onClick: reloadCurrent
155
- })
142
+ // 不加悬浮提示：图标含义直白，一颗 28px 的按钮顶出一块深色气泡反而抢眼。
143
+ // 文案只留在 aria-label 上给读屏用。
144
+ // 另注意不能改用 Button 的 title —— 本库的 Button 把 title 当作 children
145
+ // 的兜底（children ?? title），传了会把文案画进按钮里
146
+ (0, _jsxRuntime.jsx)(_Button.default, {
147
+ className: _indexModule.default.reload,
148
+ type: "text",
149
+ size: "small",
150
+ "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
151
+ icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
152
+ icon: "ep:refresh"
153
+ }),
154
+ onClick: reloadCurrent
156
155
  })
157
156
  } : undefined,
158
157
  hideAdd: true,
package/lib/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hsu-react/ui",
3
- "version": "2.2.5",
3
+ "version": "2.2.7",
4
4
  "description": "一套基于 React + Ant Design 的中后台业务组件库",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/layout/NavTabBar/index.module.scss CHANGED
@@ -1,8 +1,12 @@
1
1
  // 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
2
2
  // 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
3
3
  // 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
4
+
5
+ // 栏的左右内边距。刷新按钮与首个页签之间也按它留，两处共用一个值，改了不会走形。
6
+ $gutter: 8px;
7
+
4
8
  .NavTabBar {
5
- padding: 6px 8px 0px;
9
+ padding: 6px $gutter 0px;
6
10
 
7
11
  // Modern look: keep the white strip; the active tab is a light teal pill
8
12
  background: var(--vita-surface);
@@ -113,10 +117,11 @@
113
117
  align-items: center;
114
118
  align-self: stretch;
115
119
 
116
- // 竖线两侧各留 5px（按钮右缘到首个页签共 11px）。两边取同一个值，竖线才落在正中；
117
- // 一边宽一边窄会看起来像是竖线属于其中一侧
118
- margin-right: 5px;
119
- padding-right: 5px;
120
+ // 按钮右缘到首个页签正好留 $gutter，与栏的左内边距一样宽：按钮左边留多少，右边就留
121
+ // 多少，刷新按钮才像是和页签同属一排、而不是被推开的另一件东西。
122
+ // 竖线自己占 1px，剩下的两侧对半分，它才落在正中
123
+ margin-right: calc((#{$gutter} - 1px) / 2);
124
+ padding-right: calc((#{$gutter} - 1px) / 2);
120
125
 
121
126
  border-right: 1px solid var(--vita-border-weak);
122
127
  }
package/src/layout/NavTabBar/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Tabs as AntdTabs, Tooltip } from "antd";
1
+ import { Tabs as AntdTabs } from "antd";
2
2
  import React, { ReactNode, useCallback, useMemo, useState } from "react";
3
3
  import { useNavigate } from "react-router";
4
4
  import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
@@ -182,18 +182,18 @@ const NavTabBar: React.FC<NavTabBarProps> = (props) => {
182
182
  showReload
183
183
  ? {
184
184
  left: (
185
- // 不用 Button 的 title —— 本库的 Button 把 title 当作 children 的兜底
186
- // （children ?? title），传了会把文案画到按钮里，而不是变成悬浮提示
187
- <Tooltip title="刷新当前页">
188
- <Button
189
- className={styles.reload}
190
- type="text"
191
- size="small"
192
- aria-label="刷新当前页"
193
- icon={<Icon icon="ep:refresh" />}
194
- onClick={reloadCurrent}
195
- />
196
- </Tooltip>
185
+ // 不加悬浮提示：图标含义直白，一颗 28px 的按钮顶出一块深色气泡反而抢眼。
186
+ // 文案只留在 aria-label 上给读屏用。
187
+ // 另注意不能改用 Button 的 title —— 本库的 Button 把 title 当作 children
188
+ // 的兜底（children ?? title），传了会把文案画进按钮里
189
+ <Button
190
+ className={styles.reload}
191
+ type="text"
192
+ size="small"
193
+ aria-label="刷新当前页"
194
+ icon={<Icon icon="ep:refresh" />}
195
+ onClick={reloadCurrent}
196
+ />
197
197
  ),
198
198
  }
199
199
  : undefined