Skip to content

refactor: Support semantic structure #371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zombieJ merged 22 commits into from
May 9, 2025
Merged

refactor: Support semantic structure #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
660c8ce
chore: bump react
zombieJ Apr 27, 2025
917262f
chore: init
zombieJ Apr 27, 2025
2181d7e
chore: classNames
zombieJ Apr 27, 2025
335cd68
chore: item semantic part
zombieJ Apr 27, 2025
107634a
chore: render icon
zombieJ Apr 28, 2025
3911fe1
chore: next status
zombieJ Apr 28, 2025
117515d
chore: line shify
zombieJ Apr 28, 2025
bec6338
chore: style ellipsis
zombieJ Apr 28, 2025
fe93120
chore: bump version
zombieJ Apr 28, 2025
10ec568
chore: fix click logic
zombieJ Apr 30, 2025
59b6cf0
chore: bump version to 0.0.0-alpha.1
zombieJ Apr 30, 2025
8f47e58
chore: more layout
zombieJ May 7, 2025
1d903d2
chore: bump version to 0.0.0-alpha.2
zombieJ May 7, 2025
701e750
chore: add itemWrapperRender
zombieJ May 8, 2025
709f517
chore: bump version to 0.0.0-alpha.3
zombieJ May 8, 2025
bc6e3c2
chore: update render logic
zombieJ May 9, 2025
76c5882
chore: bump version to 0.0.0-alpha.4
zombieJ May 9, 2025
1d33102
chore: link with semantic content
zombieJ May 9, 2025
3439892
chore: bump version to 0.0.0-alpha.5
zombieJ May 9, 2025
4f3ac5d
test: add test case
zombieJ May 9, 2025
81f1fe8
test: add test case
zombieJ May 9, 2025
e44ed1e
chore: fix def
zombieJ May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 103 additions & 71 deletions assets/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,46 +17,34 @@
display: inline-block;
vertical-align: top;
flex: 1;
overflow: hidden;

&-container[role='button'] {
cursor: pointer;
transition: opacity .3s;

&:hover {
opacity: 0.7;
}
}
// overflow: hidden;

&:last-child {
flex: none;
}

&:last-child &-tail,
&:last-child &-title:after {
display: none;
}

&-container {
display: inline-block;
}

&-icon,
&-content {
&-section {
display: inline-block;
vertical-align: top;
}

&-icon {
flex: none;
border: 1px solid @wait-icon-color;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
border-radius: 26px;
font-size: 14px;
margin-right: 8px;
transition: background-color .3s, border-color .3s;
transition:
background-color 0.3s,
border-color 0.3s;

> .@{stepsPrefixClass}-icon {
line-height: 1;
Expand All @@ -72,49 +60,20 @@
}
}

&-tail {
position: absolute;
left: 0;
width: 100%;
top: 12px;
padding: 0 10px;
&:after {
content: '';
display: inline-block;
background: @wait-tail-color;
height: 1px;
border-radius: 1px;
width: 100%;
transition: background .3s;
}
}
&-content {
&-section {
margin-top: 3px;
}
&-title {
font-size: 14px;
margin-bottom: 4px;
color: #666;
font-weight: bold;
display: inline-block;
padding-right: 10px;
position: relative;
&:after {
content: '';
height: 1px;
width: 1000px;
background: @wait-tail-color;
display: block;
position: absolute;
top: 0.55em;
left: 100%;
}
}
&-subtitle {
font-size: 12px;
display: inline-block;
color: #999;
margin-left: 8px;
}
&-description {
font-size: 12px;
Expand All @@ -138,24 +97,17 @@

.@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
.@{stepsPrefixClass}-item {
margin-right: 10px;
&:last-child {
margin-right: 0;
}
&-tail {
display: none;
}
&-description {
max-width: @stepDescriptionMaxWidth;
}
}
}

.step-item-status(@status) {
@icon-color: "@{status}-icon-color";
@title-color: "@{status}-title-color";
@description-color: "@{status}-description-color";
@tail-color: "@{status}-tail-color";
@icon-color: '@{status}-icon-color';
@title-color: '@{status}-title-color';
@description-color: '@{status}-description-color';
@tail-color: '@{status}-tail-color';
&-@{status} &-icon {
Comment on lines 106 to 111
Copy link

@coderabbitai coderabbitai bot May 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

变量插值语法有误，lessc 将无法解析 @@icon-color 变量
在 Less 中想用字符串构造另一个变量名时，需要使用 ~"@{var}" 才能触发插值。目前：

@icon-color: '@{status}-icon-color';

'@{status}-icon-color' 会被当成普通字符串，因此 @@icon-color 指向一个实际不存在的变量名，编译阶段就会报错。

建议改为：

-@icon-color: '@{status}-icon-color';
+@icon-color: ~"@{status}-icon-color";

或直接省略中间变量，直接写 @@{status}-icon-color。

🤖 Prompt for AI Agents (early access) 
In assets/index.less around lines 106 to 111, the variable interpolation syntax
is incorrect because '@{status}-icon-color' is treated as a plain string,
causing lessc to fail resolving @@icon-color. To fix this, replace the string
with proper interpolation using ~"@{status}-icon-color" so Less can evaluate it
as a variable name, or alternatively, remove the intermediate variable and
directly use @@{status}-icon-color where needed.

border-color: @@icon-color;
background-color: #fff;
Expand All @@ -168,22 +120,102 @@
}
&-@{status} &-title {
color: @@title-color;
&:after {
background-color: @@tail-color;
}
}
&-@{status} &-description {
color: @@description-color;
}
&-@{status} &-tail:after {
background-color: @@tail-color;
}

// @import 'custom-icon';
// @import 'small';
// @import 'vertical';
// @import 'label-placement';
// @import 'progress-dot';
// @import 'nav';
// @import 'inline';

// ======================= Horizontal =======================
.verticalFlex() {
display: flex;
flex-direction: column;
align-items: center;
}

.@{stepsPrefixClass} {
.@{stepsPrefixClass}-item {
&-section {
min-width: 0;
}

&-header {
display: flex;
gap: 8px;
align-items: center;
}

// Ellipsis
&-title,
&-subtitle,
&-description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}

Comment on lines +160 to 166
Copy link

@coderabbitai coderabbitai bot May 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

CSS 选择器缺失导致内容区域无样式
Step.tsx 仍然渲染 className={${itemCls}-content}（见第 160-163 行），但在新的样式中已将 “content” 分离为 “section”，对应的 &-content 选择器在文件中已经全部移除，这会导致描述区丢失原有的字号、颜色等样式。

如需保留描述区，请补回样式或同步修改组件类名。

🤖 Prompt for AI Agents (early access) 
In assets/index.less around lines 160 to 166, the CSS selector for the content
area is missing because the original &-content selector was removed while
Step.tsx still uses className={`${itemCls}-content`}. To fix this, either
restore the &-content CSS selector with the appropriate styles for font size,
color, and other properties, or update the component's className to match the
new selector (e.g., change it to use the section class) so the styles apply
correctly.

@import 'custom-icon';
@import 'small';
@import 'vertical';
@import 'label-placement';
@import 'progress-dot';
@import 'nav';
@import 'inline';
.@{stepsPrefixClass}-horizontal {
.@{stepsPrefixClass}-item {
flex: 1;
position: relative;
min-width: 0;

&-rail {
height: 1px;
background: @process-tail-color;
}
}

// Label Vertical
&.@{stepsPrefixClass}-label-vertical {
.@{stepsPrefixClass}-item {
.verticalFlex();
padding-inline: 8px;

&-section {
.verticalFlex();
}

&-rail {
position: absolute;
top: 13px;
left: calc(50% + 13px);
width: 100%;
}
}
}

// Label Horizontal
&.@{stepsPrefixClass}-label-horizontal {
.@{stepsPrefixClass}-item {
display: flex;

&:last-child {
flex: none;
}

&-section {
flex: 1;
}

&-rail {
flex: 1;
min-width: 0;
}
}
}
}

// ======================== Vertical ========================
.@{stepsPrefixClass}-vertical {
}
33 changes: 1 addition & 32 deletions assets/inline.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,6 @@
.@{stepsPrefixClass}-item {
flex: none;

&-container {
padding: 9px 4px 0;
margin: 0 2px;
border-radius: 4px;
cursor: pointer;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
&[role='button']:hover {
opacity: 1;
}
}

&-icon {
width: 6px;
Expand All @@ -32,7 +20,7 @@
}
}

&-content {
&-section {
width: auto;
margin-top: 7px;
}
Expand All @@ -47,26 +35,7 @@
display: none;
}

&-tail {
margin-left: 0;
top: 11px;
&:after {
height: 1px;
}
}
&:first-child .@{stepsPrefixClass}-item-tail{
width: 50%;
margin-left: 50%;
}
&:last-child .@{stepsPrefixClass}-item-tail{
display: block;
width: 50%;
}

&-finish {
.@{stepsPrefixClass}-item-tail:after {
background-color: @process-tail-color;
}
.@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot {
background-color: @process-tail-color;
}
Expand Down
6 changes: 1 addition & 5 deletions assets/label-placement.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,7 @@
.@{stepsPrefixClass}-label-vertical {
.@{stepsPrefixClass}-item {
overflow: visible;
&-tail {
padding: 0px 24px;
margin-left: 48px;
}
&-content {
&-section {
display: block;
text-align: center;
margin-top: 8px;
Expand Down
11 changes: 0 additions & 11 deletions assets/nav.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@
text-align: center;
overflow: visible;

&-container {
text-align: left;
padding-bottom: 8px;
outline: none;
}

&-title {
max-width: @stepNavContentMaxWidth;
Expand Down Expand Up @@ -53,11 +48,5 @@
margin-left: -8px;
}

&-active {
.@{stepsPrefixClass}-item-container {
padding-bottom: 5px;
border-bottom: 3px solid @primary-color;
}
}
}
}
10 changes: 0 additions & 10 deletions assets/progress-dot.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,6 @@

.@{stepsPrefixClass}-dot {
.@{stepsPrefixClass}-item {
&-tail {
width: 100%;
top: 1px;
margin: 0 0 0 @stepDescriptionMaxWidth / 2;
padding: 0;

&:after {
height: 3px;
}
}
&-icon {
padding-right: 0;
width: 5px;
Expand Down
11 changes: 1 addition & 10 deletions assets/small.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
top: -1px;
}
}
.@{stepsPrefixClass}-item-content {
.@{stepsPrefixClass}-item-section {
margin-top: 0;
}
.@{stepsPrefixClass}-item-title {
Expand All @@ -29,15 +29,6 @@
font-size: 12px;
color: #999;
}
.@{stepsPrefixClass}-item-tail {
top: 8px;
padding: 0 8px;
&:after {
height: 1px;
border-radius: 1px;
width: 100%;
}
}

.@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon {
width: inherit;
Expand Down
Loading