fix(comp:head): modify header bar style (#1781)

IDuxFE · Jan 8, 2024 · 12278ef · 12278ef
1 parent 85d80e1
commit 12278ef
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 23 deletions.
diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md
@@ -1,17 +1,19 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `barBgColor` |  | `string` | `#1c6eff` | `#4083E8` |
-| `barWidth` |  | `number` | `4` | `4` |
-| `heightLg` |  | `number` | `48` | `48` |
-| `heightMd` |  | `number` | `48` | `48` |
-| `heightSm` |  | `number` | `40` | `40` |
-| `heightXl` |  | `number` | `56` | `56` |
-| `prefixColor` |  | `string` | `#2f3540` | `#F4F8FF` |
-| `prefixColorActive` |  | `string` | `#1c6eff` | `#4083E8` |
-| `prefixColorDisabled` |  | `string` | `#bec3cc` | `#687080` |
-| `prefixColorHover` |  | `string` | `#1c6eff` | `#4083E8` |
-| `subTitleFontSize` |  | `number` | `14` | `14` |
-| `suffixColor` |  | `string` | `#5e6573` | `#A1A7B3` |
-| `suffixColorActive` |  | `string` | `#0d51d9` | `#6AA6F4` |
-| `suffixColorDisabled` |  | `string` | `#bec3cc` | `#687080` |
-| `suffixColorHover` |  | `string` | `#1c6eff` | `#4083E8` |
+| `barBgColor` | 竖条颜色 | `string` | `#1c6eff` | `#4083E8` |
+| `barBorderRadius` | 竖条圆角尺寸 | `number` | `0` | `0` |
+| `barMarginRight` | 竖条距离文字的宽度 | `number` | `6` | `6` |
+| `barWidth` | 竖条宽度 | `number` | `2` | `2` |
+| `heightLg` | lg 尺寸高度 | `number` | `48` | `48` |
+| `heightMd` | md 尺寸高度 | `number` | `48` | `48` |
+| `heightSm` | sm 尺寸高度 | `number` | `40` | `40` |
+| `heightXl` | xl 尺寸高度 | `number` | `56` | `56` |
+| `prefixColor` | 前缀文字颜色 | `string` | `#2f3540` | `#F4F8FF` |
+| `prefixColorActive` | 前缀文字激活颜色 | `string` | `#1c6eff` | `#4083E8` |
+| `prefixColorDisabled` | 前缀文字禁用颜色 | `string` | `#bec3cc` | `#687080` |
+| `prefixColorHover` | 前缀文字悬浮颜色 | `string` | `#1c6eff` | `#4083E8` |
+| `subTitleFontSize` | 副标题字体大小 | `number` | `14` | `14` |
+| `suffixColor` | 后缀文字颜色 | `string` | `#5e6573` | `#A1A7B3` |
+| `suffixColorActive` | 后缀文字激活颜色 | `string` | `#0d51d9` | `#6AA6F4` |
+| `suffixColorDisabled` | 后缀文字禁用颜色 | `string` | `#bec3cc` | `#687080` |
+| `suffixColorHover` | 后缀文字悬浮颜色 | `string` | `#1c6eff` | `#4083E8` |
diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less
@@ -130,7 +130,7 @@
   }
 
   &-with-bar {
-    padding-left: calc(var(--ix-header-bar-width) * 2);
+    padding-left: calc(var(--ix-header-bar-width) + var(--ix-header-bar-margin-right));
 
     &::before {
       position: absolute;
@@ -139,7 +139,7 @@
       bottom: 0;
       width: var(--ix-header-bar-width);
       background-color: var(--ix-header-bar-bg-color);
-      border-radius: calc(var(--ix-header-bar-width) / 2);
+      border-radius: var(--ix-header-bar-border-radius);
       content: '';
     }
   }
@@ -153,16 +153,16 @@
 }
 
 .header-size(@height, @font-size, @padding) {
-  @line-height: calc(@font-size + var(--ix-line-height-gutter));
+  @bar-height: calc(@font-size + 2px);
 
   .reset-font-size(@font-size);
 
   min-height: @height;
 
   &.@{header-prefix}-with-bar {
     &::before {
-      margin-top: calc((@height - @line-height) / 2);
-      height: @line-height;
+      margin-top: calc((@height - @bar-height) / 2);
+      height: @bar-height;
     }
   }
 

diff --git a/packages/components/header/theme/dark.css b/packages/components/header/theme/dark.css
@@ -4,8 +4,10 @@
   --ix-header-height-md: 48px;
   --ix-header-height-lg: 48px;
   --ix-header-height-xl: 56px;
-  --ix-header-bar-width: 4px;
+  --ix-header-bar-width: 2px;
   --ix-header-bar-bg-color: #4083e8;
+  --ix-header-bar-border-radius: 0;
+  --ix-header-bar-margin-right: 6px;
   --ix-header-prefix-color: #f4f8ff;
   --ix-header-prefix-color-hover: #4083e8;
   --ix-header-prefix-color-active: #4083e8;

diff --git a/packages/components/header/theme/default.css b/packages/components/header/theme/default.css
@@ -4,8 +4,10 @@
   --ix-header-height-md: 48px;
   --ix-header-height-lg: 48px;
   --ix-header-height-xl: 56px;
-  --ix-header-bar-width: 4px;
+  --ix-header-bar-width: 2px;
   --ix-header-bar-bg-color: #1c6eff;
+  --ix-header-bar-border-radius: 0;
+  --ix-header-bar-margin-right: 6px;
   --ix-header-prefix-color: #2f3540;
   --ix-header-prefix-color-hover: #1c6eff;
   --ix-header-prefix-color-active: #1c6eff;

diff --git a/packages/components/header/theme/default.ts b/packages/components/header/theme/default.ts
@@ -28,8 +28,10 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     heightLg: heightXl,
     heightXl: height2xl,
 
-    barWidth: 4,
+    barWidth: 2,
     barBgColor: colorPrimary,
+    barBorderRadius: 0,
+    barMarginRight: 6,
 
     prefixColor: colorText,
     prefixColorHover: colorPrimaryText,

diff --git a/packages/components/header/theme/tokens.ts b/packages/components/header/theme/tokens.ts
@@ -6,23 +6,76 @@
  */
 
 export interface HeaderThemeTokens {
+  /**
+   * @desc sm 尺寸高度
+   */
   heightSm: number
+  /**
+   * @desc md 尺寸高度
+   */
   heightMd: number
+  /**
+   * @desc lg 尺寸高度
+   */
   heightLg: number
+  /**
+   * @desc xl 尺寸高度
+   */
   heightXl: number
 
+  /**
+   * @desc 竖条宽度
+   */
   barWidth: number
+  /**
+   * @desc 竖条圆角尺寸
+   */
+  barBorderRadius: number
+  /**
+   * @desc 竖条距离文字的宽度
+   */
+  barMarginRight: number
+  /**
+   * @desc 竖条颜色
+   */
   barBgColor: string
 
+  /**
+   * @desc 前缀文字颜色
+   */
   prefixColor: string
+  /**
+   * @desc 前缀文字悬浮颜色
+   */
   prefixColorHover: string
+  /**
+   * @desc 前缀文字激活颜色
+   */
   prefixColorActive: string
+  /**
+   * @desc 前缀文字禁用颜色
+   */
   prefixColorDisabled: string
 
+  /**
+   * @desc 后缀文字颜色
+   */
   suffixColor: string
+  /**
+   * @desc 后缀文字悬浮颜色
+   */
   suffixColorHover: string
+  /**
+   * @desc 后缀文字激活颜色
+   */
   suffixColorActive: string
+  /**
+   * @desc 后缀文字禁用颜色
+   */
   suffixColorDisabled: string
 
+  /**
+   * @desc 副标题字体大小
+   */
   subTitleFontSize: number
 }