Skip to content

fix(bubble):修复无内容时气泡高度问题 #373

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

Open
lizhen789 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(bubble):修复无内容时气泡高度问题 #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 4 additions & 5 deletions packages/core/src/components/Bubble/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,9 @@ const DEFAULT_TYPING: TypingConfig = {
const _typing = computed(() => {
if (typeof props.typing === 'undefined') {
return false;
}
else if (typeof props.typing === 'boolean') {
} else if (typeof props.typing === 'boolean') {
return props.typing;
}
else {
} else {
Comment on lines +70 to +72
Copy link

@coderabbitai coderabbitai bot Oct 11, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Fix the brace-style violations.

ESLint is flagging brace-style issues where closing curly braces appear on the same line as subsequent blocks. This violates the project's configured style guide.

Apply this diff to fix the formatting:

   if (typeof props.typing === 'undefined') {
     return false;
-  } else if (typeof props.typing === 'boolean') {
+  }
+  else if (typeof props.typing === 'boolean') {
     return props.typing;
-  } else {
+  }
+  else {
     return Object.assign({}, DEFAULT_TYPING, props.typing);
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
} else if (typeof props.typing === 'boolean') {
return props.typing;
}
else {
} else {
if (typeof props.typing === 'undefined') {
return false;
}
else if (typeof props.typing === 'boolean') {
return props.typing;
}
else {
return Object.assign({}, DEFAULT_TYPING, props.typing);
}
🧰 Tools
🪛 ESLint

[error] 70-70: Closing curly brace appears on the same line as the subsequent block.

(style/brace-style)

[error] 72-72: Closing curly brace appears on the same line as the subsequent block.

(style/brace-style)

🤖 Prompt for AI Agents 
In packages/core/src/components/Bubble/index.vue around lines 70 to 72, the
brace-style is violated because a closing curly brace is on the same line as the
following else/else-if; reformat the conditional blocks so each closing brace is
on its own line before the next block (e.g., end the previous block with a
standalone "}" line, then start "else if (...)" or "else" on the next line) and
apply the same correction to any similar brace placements in this file to
satisfy the project's ESLint brace-style rule.

return Object.assign({}, DEFAULT_TYPING, props.typing);
}
}) as boolean | TypingConfig;
Expand Down Expand Up @@ -178,7 +176,8 @@ defineExpose(instance);
'el-bubble-content-filled': variant === 'filled' && !noStyle,
'el-bubble-content-borderless': variant === 'borderless' && !noStyle,
'el-bubble-content-outlined': variant === 'outlined' && !noStyle,
'el-bubble-content-shadow': variant === 'shadow' && !noStyle
'el-bubble-content-shadow': variant === 'shadow' && !noStyle,
'no-content': !content
Comment on lines +179 to +180
Copy link

@coderabbitai coderabbitai bot Oct 11, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

Critical: no-content class hides the loading indicator.

When loading is true and content is empty, both el-bubble-content-loading and no-content classes are applied simultaneously. The no-content styles (height: 0; padding: 0;) will hide the loading indicator, breaking the loading state UX.

Apply this diff to conditionally apply the no-content class only when not loading:

           'el-bubble-content-filled': variant === 'filled' && !noStyle,
           'el-bubble-content-borderless': variant === 'borderless' && !noStyle,
           'el-bubble-content-outlined': variant === 'outlined' && !noStyle,
           'el-bubble-content-shadow': variant === 'shadow' && !noStyle,
-          'no-content': !content
+          'no-content': !content && !loading
         }"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'el-bubble-content-shadow': variant === 'shadow' && !noStyle,
'no-content': !content
:class="{
'el-bubble-content-filled': variant === 'filled' && !noStyle,
'el-bubble-content-borderless': variant === 'borderless' && !noStyle,
'el-bubble-content-outlined': variant === 'outlined' && !noStyle,
'el-bubble-content-shadow': variant === 'shadow' && !noStyle,
'no-content': !content && !loading
}"
🤖 Prompt for AI Agents 
In packages/core/src/components/Bubble/index.vue around lines 179-180, the
'no-content' class is being applied when content is empty even during loading,
which hides the loading indicator; change the class binding so 'no-content' is
applied only when there is no content and not loading (i.e., add the loading
check to the conditional) so the loading indicator remains visible.

}"
>
<div
Expand Down
7 changes: 6 additions & 1 deletion packages/core/src/components/Bubble/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,18 @@
color: var(--el-text-color-primary);
font-size: var(--el-font-size-base);
line-height: var(--el-font-line-height-primary);
min-height: calc(var(--el-padding-sm, 12px) * 2 + var(--el-font-line-height-primary) * var(--el-font-size-base));
min-height: calc(
var(--el-padding-sm, 12px) * 2 + var(--el-font-line-height-primary) *
var(--el-font-size-base)
);
word-break: break-word;

// 打字器没有内容时候展示高度
&.no-content,
.no-content {
// height: 16px;
height: 0;
padding: 0;
}
}

Expand Down