Skip to content

Fix/buttondialog #3309

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

Closed
Adamlyu-hub wants to merge 2 commits into from
Closed

Fix/buttondialog #3309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3400e4
fix(dialog/button): 调整鸿蒙环境下dialog和button组件样式问题
Adamlyu-hub Jul 18, 2025
27dfce5
fix(button/dialog): 优化鸿蒙环境下，dialog和button组件样式问题
Adamlyu-hub Jul 18, 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
26 changes: 16 additions & 10 deletions src/packages/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,38 @@
position: relative;
display: flex;
display: inline-block;
/* #ifdef harmony dynamic*/
width: 80px;
/* #endif */
/* #ifndef harmony dynamic*/
width: auto;
/* #endif */
flex-direction: row;
justify-content: center;
align-items: center;
flex-shrink: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
height: $button-default-height;
font-size: $button-default-font-size;
font-weight: $font-weight;
text-align: center;
cursor: pointer;
transition: $button-transition;
user-select: none;
touch-action: manipulation;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* #ifndef harmony dynamic*/
height: $button-default-height;
font-size: $button-default-font-size;
font-weight: $font-weight;
transition: $button-transition;
color: $button-default-color;
background: $button-default-background-color;
border-width: $button-border-width;
/* #endif */
/* #ifdef harmony dynamic*/
Copy link
Copy Markdown
Collaborator

@xiaoyatong xiaoyatong Jul 21, 2025

Choose a reason for hiding this comment

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

这个不能写死，可以通过编译实现。

Copy link
Copy Markdown
Collaborator

@xiaoyatong xiaoyatong Jul 21, 2025

Choose a reason for hiding this comment

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

参考鸿蒙

height: 62px;
font-size: 28px;
font-weight: 400;
transition: opacity 0.2s;
color: #1a1a1a;
background: transparent;
border-width: 0.5px;
/* #endif */

&-text {
margin-left: $button-text-icon-margin;
Expand Down Expand Up @@ -67,12 +73,12 @@

&-wrap {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
/* #ifndef harmony dynamic*/
width: 100%;
background: initial;
/* #endif */
.nut-icon {
Expand Down
2 changes: 1 addition & 1 deletion src/packages/dialog/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export const Content: FunctionComponent<
style={style}
onClick={handleClick}
>
{close}
{header}
<div
className={classPrefix}
Expand All @@ -68,6 +67,7 @@ export const Content: FunctionComponent<
{renderHeader()}
<div className={`${classPrefix}-content`}>{children}</div>
{renderFooter()}
{close}
</div>
</div>
)
Expand Down
53 changes: 42 additions & 11 deletions src/packages/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,28 @@
display: flex;
flex-direction: column;
align-items: center;
width: $dialog-width;
min-width: $dialog-min-width;
box-sizing: border-box;

/* #ifndef harmony dynamic*/
max-height: 67%;
/* #endif */
max-height: 80%;
min-height: $dialog-min-height;
padding: $dialog-padding;
box-sizing: border-box;
width: $dialog-width;
min-width: $dialog-min-width;
/* #endif */

/* #ifdef harmony dynamic*/
background-color: #ffffff;
width: 80%;
border-radius: 24px;
min-width: 240px;
min-height: 248px;
padding: 48px;
box-sizing: border-box;
position: relative;
/* #endif */
Comment on lines +19 to +28
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Jul 18, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

动态分支尺寸硬编码，缺乏响应式适配
width: 80%、min-width: 240px、min-height: 248px、padding: 48px 等均为固定像素。不同 DP 值设备或折叠屏上可能出现 UI 失真，建议改用设计系统里的尺寸变量或 vw / rem。

🤖 Prompt for AI Agents 
In src/packages/dialog/dialog.scss between lines 19 and 28, the fixed pixel
values for width, min-width, min-height, and padding cause poor responsiveness
on different devices. Replace these hardcoded pixel sizes with relative units
like vw or rem, or use size variables from the design system to ensure the
dialog scales properly across various screen densities and foldable devices.

&-outer {
position: fixed;
max-height: 100%;
background-color: $white;
transition:
transform 0.2s,
-webkit-transform 0.2s;
Expand All @@ -27,8 +36,21 @@
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: $dialog-border-radius;
animation-duration: 0.3s;
/* #ifndef harmony dynamic*/
max-height: 100%;
background-color: $white;
border-radius: $dialog-border-radius;
/* #endif */
/* #ifdef harmony dynamic*/
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.8);
border-radius: 48px;
/* #endif */
}

&-close {
Expand Down Expand Up @@ -58,11 +80,20 @@
}

&-bottom {
bottom: -64px;
width: $dialog-bottom-close-icon-size;
height: $dialog-bottom-close-icon-size;
left: 50%;
transform: translateX(-50%);
/* #ifndef harmony dynamic*/
width: $dialog-bottom-close-icon-size;
height: $dialog-bottom-close-icon-size;
position: absolute;
top: calc(100% + 30px);
/* #endif */
/* #ifdef harmony dynamic*/
width: var(--nutui-dialog-bottom-close-icon-size, 48px);
height: var(--nutui-dialog-bottom-close-icon-size, 48px);

bottom: -150px;
/* #endif */
.nut-icon {
color: $color-text-disabled;
background-color: $color-mask-part;
Expand Down
Loading