style: 整体UI样式优化 #2323
style: 整体UI样式优化 #2323
Conversation
|
There was a problem hiding this comment.
Pull request overview
This PR implements comprehensive UI style optimization for the LogicFlow library, focusing on modernizing the visual appearance with refined spacing, rounded corners, improved shadows, and enhanced grid rendering capabilities.
Key Changes
- Enhanced control panel and menu styling with updated padding, border-radius, and theme mode support
- Implemented advanced grid rendering with configurable bold lines and dynamic dash patterns
- Added universal rounded corner generation for shapes and polylines
- Refactored theme system for better organization and maintainability
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/extension/src/style/raw.ts | Updated control, menu, DnD, and mini-map styling with modern design tokens |
| packages/extension/src/style/index.less | LESS version of the same styling updates with theme mode support |
| packages/extension/src/components/control/index.ts | Added hideText property and theme mode integration for control items |
| packages/core/src/view/shape/Polygon.tsx | Fixed className typo and refactored to use generateRoundedCorners utility |
| packages/core/src/view/overlay/gridConfig.ts | New configuration system for advanced grid rendering with bold lines |
| packages/core/src/view/overlay/OutlineOverlay.tsx | Refactored with common rendering function to reduce duplication |
| packages/core/src/view/overlay/Grid.tsx | Major enhancement with mesh edge rendering, bold line patterns, and dynamic dash arrays |
| packages/core/src/view/node/HtmlNode.tsx | Added shadow filter support for HTML nodes |
| packages/core/src/view/edge/PolylineEdge.tsx | Integrated rounded corner generation for polyline edges |
| packages/core/src/view/Control.tsx | Adjusted resize control sizing for better visual alignment |
| packages/core/src/util/theme.ts | Refactored to use centralized theme constants |
| packages/core/src/util/geometry.ts | Added comprehensive rounded corner generation utility |
| packages/core/src/util/edge.ts | Added heightOffset parameter for flexible bounding box calculation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * - baseSize 保证为正数 | ||
| */ | ||
| export function validateGridConfig(cfg: MajorBoldConfig): MajorBoldConfig { | ||
| console.log('validateGridConfig', cfg) |
There was a problem hiding this comment.
Remove debug console.log statement before merging to production. This appears to be leftover debugging code that should be removed.
| console.log('validateGridConfig', cfg) |
| TRANSLATE_Y, | ||
| ].join(',') | ||
| const transform = `matrix(${matrixString})` | ||
| const radius = Math.min(Math.max(2, config.thickness ?? 1), size / 4) |
There was a problem hiding this comment.
The variable 'radius' is declared but never used in the render method. Consider removing it or documenting why it's needed for future use.
| const radius = Math.min(Math.max(2, config.thickness ?? 1), size / 4) |
改动点晚点补充