@hsu-react/ui 2.2.0 → 2.2.2

package/es/layout/Header/index.js

@@ -153,10 +153,7 @@ var Header = observer(function (props) {
         children: /*#__PURE__*/_jsxs(Space, {
           className: styles.user,
           children: [/*#__PURE__*/_jsx(Avatar, {
-            style: {
-              backgroundColor: "#1677ff",
-              verticalAlign: "middle"
-            },
+            className: styles.avatar,
             icon: nickname ? undefined : /*#__PURE__*/_jsx(UserOutlined, {}),
             children: nickname === null || nickname === void 0 || (_nickname$ = nickname[0]) === null || _nickname$ === void 0 ? void 0 : _nickname$.toUpperCase()
           }), nickname]

package/es/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/es/layout/NavTabBar/index.module.scss

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 

package/lib/layout/Header/index.js

@@ -158,10 +158,7 @@ const Header = (0, _mobxReactLite.observer)(props => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
           className: _indexModule.default.user,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Avatar, {
-            style: {
-              backgroundColor: "#1677ff",
-              verticalAlign: "middle"
-            },
+            className: _indexModule.default.avatar,
             icon: nickname ? undefined : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.UserOutlined, {}),
             children: nickname?.[0]?.toUpperCase()
           }), nickname]

package/lib/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/lib/layout/NavTabBar/index.module.scss

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/layout/Header/index.module.scss

@@ -91,6 +91,12 @@
 
     font-size: 16px;
 
+    .avatar {
+      background: var(--vita-primary);
+      color: var(--vita-primary-foreground);
+      vertical-align: middle;
+    }
+
     .user {
       width: max-content;
       min-width: max-content;

package/src/layout/Header/index.tsx

@@ -192,8 +192,10 @@ const Header: React.FC<HeaderProps> = observer((props) => {
           }
         >
           <Space className={styles.user}>
+            {/* 底色跟随主色。从前这里写死 antd 蓝 #1677ff，而且是**行内样式**——
+                换过品牌色的项目连用 CSS 都盖不住，一颗蓝点钉在整套配色里 */}
             <Avatar
-              style={{ backgroundColor: "#1677ff", verticalAlign: "middle" }}
+              className={styles.avatar}
               icon={nickname ? undefined : <UserOutlined />}
             >
               {nickname?.[0]?.toUpperCase()}

package/src/layout/NavTabBar/index.md

@@ -47,6 +47,8 @@ export default () => (
 
 ## 说明
 
+页签是「贴在内容区上沿」的形状：只圆上面两角，下沿与内容区接平（拖拽时的浮层同形）。
+
 页签由访问过的路由累积而来，文案取 `meta.name`、图标取 `meta.icon`。两个开关直接影响这里：
 
 - `meta.noTabsView` —— 该路由不进页签栏（它的子路由会顶上来）

package/src/layout/NavTabBar/index.module.scss

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);