From 1e8afecf6617907c2c6a5aaeda684c9fd093fa07 Mon Sep 17 00:00:00 2001 From: chenxi <2465950588@qq.com> Date: Wed, 9 Oct 2024 02:20:44 -0700 Subject: [PATCH 1/2] =?UTF-8?q?refactor(milestone):=20=E9=87=8D=E6=9E=84mi?= =?UTF-8?q?lestone=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/theme/src/milestone/aurora-theme.js | 2 +- packages/theme/src/milestone/index.less | 207 +++++++++---------- packages/theme/src/milestone/old-theme.js | 57 +++-- packages/theme/src/milestone/vars.less | 117 +++++------ 4 files changed, 177 insertions(+), 206 deletions(-) diff --git a/packages/theme/src/milestone/aurora-theme.js b/packages/theme/src/milestone/aurora-theme.js index b93893855d..f7902098f6 100644 --- a/packages/theme/src/milestone/aurora-theme.js +++ b/packages/theme/src/milestone/aurora-theme.js @@ -1,3 +1,3 @@ export const tinyMilestoneAuroraTheme = { - 'ti-milestone-icon-color': '#1890ff' + 'tv-Milestone-icon-color': '#1890ff' } diff --git a/packages/theme/src/milestone/index.less b/packages/theme/src/milestone/index.less index d9e3ca369d..54be53a13d 100644 --- a/packages/theme/src/milestone/index.less +++ b/packages/theme/src/milestone/index.less @@ -17,139 +17,118 @@ @svg-prefix-cls: ~'@{css-prefix}svg'; .@{milestone-prefix-cls} { - .component-css-vars-milestone(); + .inject-Milestone-vars(); overflow: hidden; padding-top: 38px; + /* 节点本身 */ & &__node { - display: block; float: left; + display: block; &::before { - content: ''; - width: 28px; - height: 28px; - display: block; position: relative; + display: block; left: ~'calc(50% - 14px)'; top: 28px; z-index: 15; + content: ''; + width: 28px; + height: 28px; } &.is-solid { &::before { - background: var(--ti-milestone-bg-color); + background: var(--tv-Milestone-bg-color); } .@{svg-prefix-cls} { - fill: var(--ti-milestone-bg-color); + fill: #fff; } } .iconfix { - font-size: var(--ti-common-font-size-4); - } - - /* completed 节点 */ - &.node-status-completed { - .@{milestone-prefix-cls}__line { - background-color: var(--ti-milestone-line-bg-color-completed); - } + font-size: 20px; } } + /* 图标节点 */ & &__icon { - background: var(--ti-milestone-bg-color); - width: var(--ti-milestone-icon-width, 20px); - height: var(--ti-milestone-icon-height, 20px); - line-height: var(--ti-milestone-icon-height, 20px); position: relative; - font-size: var(--ti-milestone-font-size, 12px); + left: var(--tv-Milestone-icon-left); + top: var(--tv-Milestone-icon-top); + width: var(--tv-Milestone-icon-width); + height: var(--tv-Milestone-icon-height); + line-height: var(--tv-Milestone-icon-height); + font-size: var(--tv-Milestone-font-size); text-align: center; - left: var(--ti-milestone-icon-left); - top: var(--ti-milestone-icon-top); border-radius: 50%; - color: var(--ti-milestone-text-color); + color: #191919; + background: #fff; cursor: pointer; z-index: 15; - border: var(--ti-milestone-icon-border-width) solid; + border: var(--tv-Milestone-icon-border-width) solid; display: flex; align-items: center; justify-content: center; .@{svg-prefix-cls} { - font-size: var(--ti-milestone-icon-size); - fill: var(--ti-milestone-icon-color); + font-size: var(--tv-Milestone-icon-size); + fill: var(--tv-Milestone-icon-color); vertical-align: baseline; } &.is-completed { - border: var(--ti-milestone-icon-border-width-completed) solid; + border: var(--tv-Milestone-icon-border-width-completed) solid; } } - & &__line { - height: var(--ti-milestone-line-height); - width: var(--ti-milestone-line-width); - left: var(--ti-milestone-line-left); - top: var(--ti-milestone-line-top); + /* 节点线 */ + & &__node.node-status-completed { + .@{milestone-prefix-cls}__line { + background-color: var(--tv-Milestone-line-bg-color-completed); + } + } + & &__line { position: relative; // 里程碑线条不区分状态 - background-color: var(--ti-milestone-line-bg-color); - } + left: var(--tv-Milestone-line-left); + top: var(--tv-Milestone-line-top); + height: var(--tv-Milestone-line-height); + width: var(--tv-Milestone-line-width); + background-color: var(--tv-Milestone-line-bg-color); - & &__line-end { - width: 0; + &-end { + width: 0; + } } + /* 横向节点下方部分 */ & &__description { + position: relative; line-height: 14px; margin-top: 8px; - position: relative; overflow: hidden; text-align: center; - } - - & &__description-name { - width: 100%; - color: #333; - font-size: var(--ti-milestone-font-size); - float: left; - } - - & &__description-status { - color: var(--ti-milestone-status-text-color); - font-size: var(--ti-milestone-status-font-size); - float: left; - width: 100%; - margin-top: 4px; - } - - & &__flag-tip { - position: fixed; - padding: 2px 4px; - line-height: var(--ti-milestone-flag-tip-line-height); - background: var(--ti-milestone-flag-tip-bg-color); - border-radius: var(--ti-milestone-flag-tip-border-radius); - border: solid 1px var(--ti-milestone-flag-tip-bg-color); - text-align: center; - word-wrap: break-word; - - &::before { - position: absolute; - width: 0; - height: 0; - border-style: solid; - border: 1px solid; - border-width: 8px 8px 0px 8px; - border-color: #d9d9d9 transparent; - content: ''; - left: ~'calc(50% - 4px)'; - bottom: -6px; + // 标题 + &-name { + float: left; + width: 100%; + color: #333; + font-size: var(--tv-Milestone-font-size); + } + // 日期 + &-status { + float: left; + margin-top: 4px; + width: 100%; + color: var(--tv-Milestone-status-text-color); + font-size: var(--tv-Milestone-status-font-size); } } + /* 旗子部分 */ & &__flag { position: absolute; left: ~'calc(50% - 29px)'; @@ -161,59 +140,57 @@ &:hover { z-index: 2; } - } - & &__flag-content { - width: var(--ti-milestone-flag-width); - height: var(--ti-milestone-flag-height); - padding: var(--ti-milestone-flag-padding); - line-height: var(--ti-milestone-flag-line-height); - font-size: var(--ti-milestone-flag-content-font-size); - border-radius: var(--ti-milestone-flag-content-border-radius); - color: var(--ti-milestone-text-color); - background-color: var(--ti-milestone-flag-content-bg-color); - cursor: pointer; - vertical-align: middle; - display: table-cell; - - p { - color: var(--ti-milestone-text-color); - width: var(--ti-milestone-flag-width); - font-size: var(--ti-milestone-flag-font-size); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - margin: 0; - box-sizing: border-box; - } + &-content { + display: table-cell; + vertical-align: middle; + width: var(--tv-Milestone-flag-width); + height: var(--tv-Milestone-flag-height); + padding: var(--tv-Milestone-flag-padding); + line-height: var(--tv-Milestone-flag-line-height); + font-size: var(--tv-Milestone-flag-font-size); + border-radius: var(--tv-Milestone-flag-border-radius); + color: var(--tv-Milestone-text-color); + background-color: var(--tv-Milestone-flag-bg-color); + cursor: pointer; + + p { + color: var(--tv-Milestone-text-color); + width: var(--tv-Milestone-flag-width); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin: 0; + box-sizing: border-box; + } - .@{milestone-prefix-cls}__flag-name { - font-weight: var(--ti-milestone-flag-name-font-weight); - } + .@{milestone-prefix-cls}__flag-name { + font-weight: var(--tv-Milestone-flag-name-font-weight); + } - .@{milestone-prefix-cls}__flag-desc { - color: var(--ti-milestone-flag-desc-text-color); - font-size: var(--ti-milestone-flag-desc-font-size); - line-height: var(--ti-milestone-flag-desc-line-height); + .@{milestone-prefix-cls}__flag-desc { + color: var(--tv-Milestone-flag-desc-text-color); + font-size: var(--tv-Milestone-flag-desc-font-size); + } } } + /* 旗子线部分 */ & &__flag-line { height: 30px; width: 1px; - margin-left: var(--ti-milestone-flag-line-margin-left); - background: var(--ti-milestone-flag-line-bg-color); + margin-left: var(--tv-Milestone-flag-line-margin-left); + background: var(--tv-Milestone-flag-line-bg-color); } & &__dot { - display: var(--ti-milestone-dot-display); - background: var(--ti-milestone-flag-line-color); - border: solid 1px; - border-radius: 50%; - width: 5px; - height: 5px; position: relative; bottom: -29px; right: 2px; + display: var(--tv-Milestone-dot-display); + width: 5px; + height: 5px; + border: solid 1px; + border-radius: 50%; } } diff --git a/packages/theme/src/milestone/old-theme.js b/packages/theme/src/milestone/old-theme.js index e77fca4001..11629effba 100644 --- a/packages/theme/src/milestone/old-theme.js +++ b/packages/theme/src/milestone/old-theme.js @@ -1,31 +1,30 @@ export const tinyMilestoneOldTheme = { - 'ti-milestone-dot-display': 'block', - 'ti-milestone-flag-line-bg-color': '#333', - 'ti-milestone-flag-line-margin-left': '50%', - 'ti-milestone-flag-desc-line-height': '14px', - 'ti-milestone-flag-line-height': '14px', - 'ti-milestone-flag-desc-font-size': 'var(--ti-common-font-size-base, 12px)', - 'ti-milestone-text-color': 'var(--ti-common-color-light, #fff)', - 'ti-milestone-flag-desc-text-color': 'var(--ti-common-color-light, #fff)', - 'ti-milestone-flag-name-font-weight': 'var(--ti-common-font-weight-4)', - 'ti-milestone-flag-content-bg-color': '#333', - 'ti-milestone-flag-content-border-radius': 'var(--ti-common-border-radius-1, 4px)', - 'ti-milestone-flag-padding': 'var(--ti-common-size-0, 0px) var(--ti-common-size-base, 4px)', - 'ti-milestone-flag-height': '34px', - 'ti-milestone-flag-width': '50px', - 'ti-milestone-status-font-size': 'var(--ti-common-font-size-1)', - 'ti-milestone-line-top': '-8px', - 'ti-milestone-line-left': '50%', - 'ti-milestone-line-width': '100%', - 'ti-milestone-line-height': 'var(--ti-common-size-base, 4px)', - 'ti-milestone-line-bg-color-completed': '#dbdbdb', - 'ti-milestone-line-bg-color': '#dbdbdb', - 'ti-milestone-icon-top': 'var(--ti-common-size-base, 4px)', - 'ti-milestone-icon-left': "~'calc(50% - 10px)'", - 'ti-milestone-icon-color': '#1890ff', - 'ti-milestone-icon-size': 'var(--ti-common-font-size-base)', - 'ti-milestone-icon-border-width-completed': 'var(--ti-common-border-weight-1)', - 'ti-milestone-icon-border-width': 'var(--ti-common-size-0)', - 'ti-milestone-icon-height': 'var(--ti-common-size-5x, 20px)', - 'ti-milestone-icon-width': 'var(--ti-common-size-5x, 20px)' + 'tv-Milestone-dot-display': 'block', + 'tv-Milestone-flag-line-bg-color': '#333', + 'tv-Milestone-flag-line-margin-left': '50%', + 'tv-Milestone-flag-line-height': '14px', + 'tv-Milestone-flag-desc-font-size': 'var(--ti-common-font-size-base, 12px)', + 'tv-Milestone-text-color': 'var(--ti-common-color-light, #fff)', + 'tv-Milestone-flag-desc-text-color': 'var(--ti-common-color-light, #fff)', + 'tv-Milestone-flag-name-font-weight': 'var(--ti-common-font-weight-4)', + 'tv-Milestone-flag-bg-color': '#333', + 'tv-Milestone-flag-border-radius': 'var(--ti-common-border-radius-1, 4px)', + 'tv-Milestone-flag-padding': 'var(--ti-common-size-0, 0px) var(--ti-common-size-base, 4px)', + 'tv-Milestone-flag-height': '34px', + 'tv-Milestone-flag-width': '50px', + 'tv-Milestone-status-font-size': 'var(--ti-common-font-size-1)', + 'tv-Milestone-line-top': '-8px', + 'tv-Milestone-line-left': '50%', + 'tv-Milestone-line-width': '100%', + 'tv-Milestone-line-height': 'var(--ti-common-size-base, 4px)', + 'tv-Milestone-line-bg-color-completed': '#dbdbdb', + 'tv-Milestone-line-bg-color': '#dbdbdb', + 'tv-Milestone-icon-top': 'var(--ti-common-size-base, 4px)', + 'tv-Milestone-icon-left': "~'calc(50% - 10px)'", + 'tv-Milestone-icon-color': '#1890ff', + 'tv-Milestone-icon-size': 'var(--ti-common-font-size-base)', + 'tv-Milestone-icon-border-width-completed': 'var(--ti-common-border-weight-1)', + 'tv-Milestone-icon-border-width': 'var(--ti-common-size-0)', + 'tv-Milestone-icon-height': 'var(--ti-common-size-5x, 20px)', + 'tv-Milestone-icon-width': 'var(--ti-common-size-5x, 20px)' } diff --git a/packages/theme/src/milestone/vars.less b/packages/theme/src/milestone/vars.less index b848bed7fa..3bfa6504b3 100644 --- a/packages/theme/src/milestone/vars.less +++ b/packages/theme/src/milestone/vars.less @@ -10,84 +10,79 @@ * */ -.component-css-vars-milestone() { - // 字号(不含旗子部分) - --ti-milestone-font-size: var(--ti-common-font-size-base, 14px); - // 节点实心显示光晕背景色 - --ti-milestone-bg-color: var(--ti-common-color-icon-white, #fff); - // 节点宽度 - --ti-milestone-icon-width: var(--ti-common-size-8x, 32px); - // 节点高度 - --ti-milestone-icon-height: var(--ti-common-size-8x, 32px); - // 节点默认边框色 - --ti-milestone-icon-border-color: var(--ti-common-color-line-active, #191919); - // 节点默认边框粗细 - --ti-milestone-icon-border-width: var(--ti-common-border-weight-normal, 1px); - // 完成节点边框粗细 - --ti-milestone-icon-border-width-completed: 1px; - // 节点图标大小 - --ti-milestone-icon-size: var(--ti-common-font-size-5, 24px); - // 完成节点图标颜色 - --ti-milestone-icon-color: var(--ti-common-color-icon, #191919); // 保留原来样式，暂未适配默认主题 var(--ti-common-color-icon, #191919); - // 节点绝对定位左侧间距 - --ti-milestone-icon-left: calc(50% - 16px); - // 节点绝对定位顶部间距 - --ti-milestone-icon-top: var(--ti-common-size-0, 0px); +.inject-Milestone-vars() { + // 默认字号(不含旗子部分) + --tv-Milestone-font-size: var(--tv-font-size-md, 14px); + /* 图标节点部分 */ + // 实心显示节点光晕背景色 + --tv-Milestone-bg-color: var(--tv-color-bg-secondary, #fff); + // 图标节点绝对定位左侧间距 + --tv-Milestone-icon-left: calc(50% - 16px); + // 图标节点绝对定位顶部间距 + --tv-Milestone-icon-top: 0px; + // 图标节点宽度 + --tv-Milestone-icon-width: calc(var(--tv-size-base, 4px) * 8); + // 图标节点高度 + --tv-Milestone-icon-height: var(--tv-size-height-md, 32px); + // 图标节点默认边框厚度 + --tv-Milestone-icon-border-width: var(--tv-border-width, 1px); + // 图标节点图标大小 + --tv-Milestone-icon-size: calc(var(--tv-icon-size, 16px) * 1.5); + // 图标节点图标色 + --tv-Milestone-icon-color: var(--tv-color-icon-active, #191919); + // 完成图标节点边框粗细 + --tv-Milestone-icon-border-width-completed: var(--tv-border-width, 1px); + + /* 节点线部分 */ // 未完成线路背景色 - --ti-milestone-line-bg-color: var(--ti-common-color-bg-dark-disabled, #dbdbdb); + --tv-Milestone-line-bg-color: var(--tv-color-bg-disabled-control-checked, #dbdbdb); // 完成节点线路背景色 - --ti-milestone-line-bg-color-completed: var(--ti-common-color-bg-primary, #191919); - // 线高度 - --ti-milestone-line-height: var(--ti-common-border-weight-normal, 1px); - // 线宽度 - --ti-milestone-line-width: calc(100% - 48px); + --tv-Milestone-line-bg-color-completed: var(--tv-color-bg-primary, #191919); // 线绝对定位左侧偏移 - --ti-milestone-line-left: calc(50% + 24px); + --tv-Milestone-line-left: calc(50% + 24px); // 线绝对定位顶部偏移 - --ti-milestone-line-top: -16px; + --tv-Milestone-line-top: -16px; + // 线高度 + --tv-Milestone-line-height: var(--tv-border-width, 1px); + // 线宽度 + --tv-Milestone-line-width: calc(100% - 48px); + + /* 横向节点下方部分 */ // 节点下方日期文本色 - --ti-milestone-status-text-color: var(--ti-common-color-placeholder, #808080); + --tv-Milestone-status-text-color: var(--tv-color-text-weaken, #808080); // 节点下方日期文本字号 - --ti-milestone-status-font-size: var(--ti-common-font-size-0, 12px); + --tv-Milestone-status-font-size: var(--tv-font-size-sm, 12px); + /* 旗子部分 */ // 旗子宽度 - --ti-milestone-flag-width: 88px; + --tv-Milestone-flag-width: calc(var(--tv-size-base, 4px) * 22); // 旗子高度 - --ti-milestone-flag-height: 46px; + --tv-Milestone-flag-height: calc(var(--tv-size-base, 4px) * 11.5); // 旗子内间距 - --ti-milestone-flag-padding: var(--ti-common-size-base, 4px); - // 提示行高(hide) - --ti-milestone-flag-tip-line-height: var(--ti-common-line-height-4, 30px); - // 提示背景色(hide) - --ti-milestone-flag-tip-bg-color: var(--ti-common-color-bg-secondary, #c2c2c2); - // 提示圆角(hide) - --ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal, 6px); + --tv-Milestone-flag-padding: var(--tv-space-base, 4px); + // 旗子行高 + --tv-Milestone-flag-line-height: var(--tv-line-height-number, 1.5); + // 旗子字号 + --tv-Milestone-flag-font-size: var(--tv-font-size-md, 14px); // 旗子圆角 - --ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-0) var(--ti-common-border-radius-4) var(--ti-common-border-radius-4) var(--ti-common-border-radius-0); - // 旗子默认字号(hide) - --ti-milestone-flag-content-font-size: var(--ti-common-font-size-1, 14px); + --tv-Milestone-flag-border-radius: 0 var(--tv-border-radius-lg, 8px) var(--tv-border-radius-lg, 8px) 0; + // 旗子文本色 + --tv-Milestone-text-color: var(--tv-color-text, #191919); // 旗子背景色 - --ti-milestone-flag-content-bg-color: var(--ti-common-color-bg-normal, #f5f5f5); + --tv-Milestone-flag-bg-color: var(--tv-color-bg, #f5f5f5); // 旗子标题字重 - --ti-milestone-flag-name-font-weight: var(--ti-common-font-weight-bold, 600); + --tv-Milestone-flag-name-font-weight: var(--tv-font-weight-bold, 600); // 旗子描述文本色 - --ti-milestone-flag-desc-text-color: var(--ti-common-color-text-secondary, #595959); - // 旗子文本色 - --ti-milestone-text-color: var(--ti-common-color-text-primary, #191919); - // 旗子字号 - --ti-milestone-flag-font-size: var(--ti-common-font-size-base, 14px); + --tv-Milestone-flag-desc-text-color: var(--tv-color-text-secondary, #595959); // 旗子描述字号大小 - --ti-milestone-flag-desc-font-size: var(--ti-common-font-size-0, 12px); - // 旗子行高 - --ti-milestone-flag-line-height: var(--ti-common-line-height-1, 22px); - // 旗子描述行高 - --ti-milestone-flag-desc-line-height: var(--ti-common-line-height-base, 18px); + --tv-Milestone-flag-desc-font-size: var(--tv-font-size-sm, 12px); + /* 旗子线部分 */ // 旗子线绝对定位左侧间距 - --ti-milestone-flag-line-margin-left: var(--ti-common-size-0, 0px); + --tv-Milestone-flag-line-margin-left: 0px; // 旗子线背景色 - --ti-milestone-flag-line-bg-color: var(--ti-common-color-bg-normal, #f5f5f5); - // 旗子圆圈是否显示 - --ti-milestone-dot-display: none; + --tv-Milestone-flag-line-bg-color: var(--tv-color-bg, #f5f5f5); + // 旗子线圆圈是否显示 + --tv-Milestone-dot-display: none; } From 205a7dd3b0c1306f43b7300d9f6b6da5078cebcc Mon Sep 17 00:00:00 2001 From: chenxi <2465950588@qq.com> Date: Wed, 9 Oct 2024 19:44:34 -0700 Subject: [PATCH 2/2] =?UTF-8?q?refactor(milestone):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=96=B0=E8=A7=84=E8=8C=83=E4=B8=BB=E9=A2=98=E4=B8=8B=E7=9A=84?= =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pc/app/milestone/basic-usage.spec.ts | 38 +++++++++---------- .../pc/app/milestone/custom-icon-slot.spec.ts | 2 +- .../pc/app/milestone/flag-before.spec.ts | 8 ++-- .../pc/app/milestone/show-number.spec.ts | 36 +++++++++--------- .../pc/app/milestone/solid-style.spec.ts | 36 +++++++++--------- 5 files changed, 60 insertions(+), 60 deletions(-) diff --git a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts index c0b0fb0746..02b2aa4a4a 100644 --- a/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts +++ b/examples/sites/demos/pc/app/milestone/basic-usage.spec.ts @@ -25,33 +25,33 @@ test('基本用法', async ({ page }) => { const iconStyles = [ { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(158, 197, 145)', 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(158, 197, 145, 0.4) 0px 0px 0px 4px' + 'box-shadow': 'none' }, { - 'background-color': 'rgb(217, 217, 217)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(217, 217, 217)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(151, 167, 219)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(151, 167, 219, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(151, 167, 219)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(250, 173, 20)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(250, 173, 20)', + 'box-shadow': 'none' } ] const titles = ['completed 状态', 'completed 状态', 'doing 状态', 'cancel 状态', 'back 状态', 'end 状态'] @@ -64,13 +64,13 @@ test('基本用法', async ({ page }) => { await expect(nodeTitles).toHaveCount(nodeCount) await expect(nodeDates).toHaveCount(nodeCount) const { width: totalWidth, height: totalHeight } = await milestone.boundingBox() - const nodeWidth = Math.floor(totalWidth / nodeCount) + const nodeWidth = Math.floor(totalWidth / nodeCount / 2) const nodeHeight = totalHeight - 38 for (let i = 0; i < nodeCount; i++) { const { width, height } = await nodes.nth(i).boundingBox() await expect(width).toBeGreaterThanOrEqual(nodeWidth) await expect(height).toEqual(nodeHeight) - await expect(nodeLines.nth(i)).toHaveCSS('height', '4px') + await expect(nodeLines.nth(i)).toHaveCSS('height', '1px') await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i]) await expect(nodeTitles.nth(i)).toHaveText(titles[i]) await expect(nodeDates.nth(i)).toHaveText(/2018-9/) @@ -83,13 +83,13 @@ test('基本用法', async ({ page }) => { await expect(lineWidth).toBeGreaterThanOrEqual(0) } if (i < 2) { - await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px') + await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px') } else { await expect(nodeIcons.nth(i)).toHaveText(String(i - 1)) } if (i < 4) { - await expect(flags.nth(i)).toHaveCSS('width', '58px') - await expect(flags.nth(i)).toHaveCSS('padding', '0px 4px') + await expect(flags.nth(i)).toHaveCSS('width', '96px') + await expect(flags.nth(i)).toHaveCSS('padding', '4px') await expect(flags.nth(i)).toHaveText(flagContents[i]) await expect(flagLines.nth(i)).toHaveCSS('width', '1px') await expect(flagLines.nth(i)).toHaveCSS('height', '30px') diff --git a/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts b/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts index 28d684b925..a6f964a6df 100644 --- a/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts +++ b/examples/sites/demos/pc/app/milestone/custom-icon-slot.spec.ts @@ -10,6 +10,6 @@ test('自定义节点图标', async ({ page }) => { await expect(nodeIcons).toHaveCount(nodeCount) for (let i = 0; i < nodeCount; i++) { await expect(nodeIcons.nth(i).locator('svg')).toHaveClass(/custom/) - await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px') + await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px') } }) diff --git a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts index faf6c90e9e..b9a70fc50e 100644 --- a/examples/sites/demos/pc/app/milestone/flag-before.spec.ts +++ b/examples/sites/demos/pc/app/milestone/flag-before.spec.ts @@ -12,8 +12,8 @@ test('旗子数据来源', async ({ page }) => { const flagAfterContents = [/引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/, /test6/] const flagBeforeContents = [/test1已完成/, /引导用户按照流程完成任务/, /test7欢迎使用vui/, /test8/] const button = page.getByRole('button').filter({ hasText: '设置flag-before值为true' }) - const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(94, 124, 224)'] - const flagBeforeLineColors = ['rgb(94, 124, 224)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)'] + const flagAfterLineColors = ['rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)', 'rgb(25, 25, 25)'] + const flagBeforeLineColors = ['rgb(25, 25, 25)', 'rgb(245, 34, 45)', 'rgb(245, 34, 45)', 'rgb(126, 211, 33)'] for (let i = 0; i < flagCount; i++) { const { x, y, width, height } = await flags.nth(i).boundingBox() @@ -26,7 +26,7 @@ test('旗子数据来源', async ({ page }) => { await expect(x).toBeGreaterThanOrEqual(nodeX) await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y) - await expect(width).toEqual(58) + await expect(width).toEqual(96) await expect(height).toBeGreaterThanOrEqual(34) await expect(flags.nth(i)).toHaveText(flagAfterContents[i]) await expect(flagLines.nth(i)).toHaveCSS('width', '1px') @@ -48,7 +48,7 @@ test('旗子数据来源', async ({ page }) => { await expect(x).toBeGreaterThanOrEqual(nodeX, 2) await expect(lineY - lineHeight).toBeGreaterThanOrEqual(y) - await expect(width).toEqual(58) + await expect(width).toEqual(96) await expect(height).toBeGreaterThanOrEqual(34) await expect(flags.nth(i)).toHaveText(flagBeforeContents[i]) await expect(flagLines.nth(i)).toHaveCSS('width', '1px') diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/examples/sites/demos/pc/app/milestone/show-number.spec.ts index decd6d03f6..fbd474f450 100644 --- a/examples/sites/demos/pc/app/milestone/show-number.spec.ts +++ b/examples/sites/demos/pc/app/milestone/show-number.spec.ts @@ -23,33 +23,33 @@ test('序号显示', async ({ page }) => { const iconStyles = [ { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(126, 211, 33)', 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px' + 'box-shadow': 'none' }, { - 'background-color': 'rgb(217, 217, 217)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(217, 217, 217)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(245, 34, 45)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(245, 34, 45)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(250, 173, 20)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(250, 173, 20)', + 'box-shadow': 'none' } ] const titles = [ @@ -67,13 +67,13 @@ test('序号显示', async ({ page }) => { await expect(nodeTitles).toHaveCount(nodeCount) await expect(nodeDates).toHaveCount(nodeCount) const { width: totalWidth } = await milestone.boundingBox() - const nodeWidth = Math.floor(totalWidth / nodeCount) + const nodeWidth = Math.floor(totalWidth / nodeCount / 2) for (let i = 0; i < nodeCount; i++) { const { width, height } = await nodes.nth(i).boundingBox() await expect(width).toBeGreaterThanOrEqual(nodeWidth) await expect(height).toBeGreaterThan(84) - await expect(nodeLines.nth(i)).toHaveCSS('height', '4px') + await expect(nodeLines.nth(i)).toHaveCSS('height', '1px') await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i]) await expect(nodeTitles.nth(i)).toHaveText(titles[i]) await expect(nodeDates.nth(i)).toHaveText(/2018-9/) @@ -86,7 +86,7 @@ test('序号显示', async ({ page }) => { await expect(lineWidth).toBeGreaterThanOrEqual(0) } if (i < 2) { - await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px') + await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px') } else { await expect(nodeIcons.nth(i)).toHaveText(String(i + 1)) } @@ -100,7 +100,7 @@ test('序号显示', async ({ page }) => { for (let i = 0; i < nodeCount; i++) { if (i < 2) { - await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px') + await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px') } else { await expect(nodeIcons.nth(i)).toHaveText('') } diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts index 2408ad96f5..51bb509842 100644 --- a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts +++ b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts @@ -23,33 +23,33 @@ test('实心显示', async ({ page }) => { const iconStyles = [ { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(255, 255, 255)', - 'color': 'rgb(94, 124, 224)', - 'box-shadow': 'rgba(94, 124, 224, 0.4) 0px 0px 0px 4px' + 'color': 'rgb(25, 25, 25)', + 'box-shadow': 'none' }, { 'background-color': 'rgb(126, 211, 33)', 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(126, 211, 33, 0.4) 0px 0px 0px 4px' + 'box-shadow': 'none' }, { - 'background-color': 'rgb(217, 217, 217)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(217, 217, 217, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(217, 217, 217)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(245, 34, 45)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(245, 34, 45, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(245, 34, 45)', + 'box-shadow': 'none' }, { - 'background-color': 'rgb(250, 173, 20)', - 'color': 'rgb(255, 255, 255)', - 'box-shadow': 'rgba(250, 173, 20, 0.4) 0px 0px 0px 4px' + 'background-color': 'rgb(255, 255, 255)', + 'color': 'rgb(250, 173, 20)', + 'box-shadow': 'none' } ] const titles = [ @@ -67,12 +67,12 @@ test('实心显示', async ({ page }) => { await expect(nodeTitles).toHaveCount(nodeCount) await expect(nodeDates).toHaveCount(nodeCount) const { width: totalWidth } = await milestone.boundingBox() - const nodeWidth = Math.floor(totalWidth / nodeCount) + const nodeWidth = Math.floor(totalWidth / nodeCount / 2) for (let i = 0; i < nodeCount; i++) { const { width, height } = await nodes.nth(i).boundingBox() await expect(width).toBeGreaterThanOrEqual(nodeWidth) await expect(height).toBeGreaterThan(84) - await expect(nodeLines.nth(i)).toHaveCSS('height', '4px') + await expect(nodeLines.nth(i)).toHaveCSS('height', '1px') await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i]) await expect(nodeTitles.nth(i)).toHaveText(titles[i]) await expect(nodeDates.nth(i)).toHaveText(/2018-9/) @@ -85,7 +85,7 @@ test('实心显示', async ({ page }) => { await expect(lineWidth).toBeGreaterThanOrEqual(0) } if (i < 2) { - await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '12px') + await expect(nodeIcons.nth(i).locator('svg')).toHaveCSS('font-size', '24px') } else { await expect(nodeIcons.nth(i)).toHaveText(String(i - 1)) } @@ -98,6 +98,6 @@ test('实心显示', async ({ page }) => { await button.click() for (let i = 0; i < 2; i++) { - await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(94, 124, 224)') + await expect(nodeIcons.nth(i)).toHaveCSS('background-color', 'rgb(25, 25, 25)') } })