fix: adjust the position of the marker point. #942
Conversation
WalkthroughThe pull request introduces modifications to the Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/plugins/schema/src/Main.vue (2)
Line range hint
89-98: Enhance schema validation and error messaging.The current error handling could be more informative and robust. Consider these improvements:
- Add specific format requirements in the error message
- Implement detailed schema validation before saving
const saveSchema = () => { const editorValue = string2Obj(app.refs.container.getEditor().getValue()) if (!editorValue) { useNotify({ type: 'error', title: 'schema 保存失败', - message: 'schema 解析异常，请确保格式正确' + message: 'schema 解析异常，请确保是有效的 JSON 格式，并包含必要的字段（properties, componentName 等）' }) return } + + // Validate required schema structure + if (!editorValue.properties) { + useNotify({ + type: 'error', + title: 'schema 验证失败', + message: '缺少必要的 properties 字段' + }) + return + }
Line range hint
170-184: Position fix looks good! Consider using CSS custom properties for magic numbers.The positioning fix correctly establishes the layout context for the marker. To improve maintainability, consider extracting the magic numbers into CSS custom properties.
.icon-wrap { position: relative; .tiny-button { - width: 40px; - padding: 0; - min-width: 40px; - margin-right: 2px; - height: 24px; - line-height: 24px; + --button-width: 40px; + --button-height: 24px; + width: var(--button-width); + min-width: var(--button-width); + height: var(--button-height); + line-height: var(--button-height); + padding: 0; + margin-right: 2px; } .red { - width: 5px; - height: 5px; - border-radius: 3px; + --marker-size: 5px; + --marker-radius: 3px; + width: var(--marker-size); + height: var(--marker-size); + border-radius: var(--marker-radius); background-color: #f00; display: block; z-index: 100; position: absolute; right: 1px; } }
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/plugins/script/src/Main.vue (1)
152-158: Consider using relative units for better scalingThe current implementation uses fixed pixel values for positioning. Consider using relative units (like em or %) for better scaling across different button sizes:
.dots { - width: 6px; - height: 6px; background: var(--ti-lowcode-warning-color-1); border-radius: 50%; position: absolute; - top: 9px; - right: 34px; + width: 0.375em; /* 6px ÷ 16px base font size */ + height: 0.375em; + top: 37.5%; /* 9px ÷ 24px button height */ + right: 85%; /* 34px ÷ 40px button width */ }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/plugins/schema/src/Main.vue(2 hunks)packages/plugins/script/src/Main.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/plugins/schema/src/Main.vue
🔇 Additional comments (1)
packages/plugins/script/src/Main.vue (1)
152-153: Verify the marker point visibility across themes
The marker point dimensions and position have been adjusted to be more proportional to the save button size (40px × 24px). While the changes look reasonable, please ensure that:
- The marker point remains visible against all background colors (it uses
--ti-lowcode-warning-color-1) - The 6px × 6px size is sufficient for visibility on high-DPI displays
Also applies to: 157-158
✅ Verification successful
Marker point color and visibility verified
The warning indicator uses appropriate colors that ensure visibility:
- Light theme: Uses
#f7d916(yellow) - Dark theme: Uses
#fac20a(bright yellow)
Both themes use high-contrast yellow shades that are visible against typical button backgrounds. The 6px × 6px size combined with these bright warning colors provides sufficient visibility, even on high-DPI displays.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check if the warning color variable is defined consistently across theme files
rg --type=css --type=less "ti-lowcode-warning-color-1"
Length of output: 233
Script:
#!/bin/bash
# Let's check the base warning color definition in light theme
rg --type=css --type=less "ti-lowcode-base-warn-color-1"
# Also check for any other uses of this warning color to understand contrast context
rg --type=vue --type=css --type=less "ti-lowcode-warning-color-1"
# Check the save button's background color to verify contrast
rg --type=vue "class=\".*save.*\"" -A 5 -B 5
Length of output: 474
SonyLeo
force-pushed
the
refactor/develop
branch
from
8ae63be to
dba4f89
Compare
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
设计器的 页面Schema 标记点的 大小 和 位置 显示错误
设计器的 页面JS 标记点的 大小 和 位置 显示错误
Issue Number: N/A
What is the new behavior?
设计器的 页面Schema 和 页面JS 标记点的 大小 和 位置 正常显示
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Style
.icon-wrapclass and the.dotsclass within the save button for better visual representation, including changes in dimensions and positioning.