zhaohai666 opened a new pull request, #497: URL: https://github.com/apache/rocketmq-dashboard/pull/497
## PR Info PR Number: PR-WEB-3 Branch: pr-web-3-ui (target repo: rocketmq-studio) Total changes: 6 files, +686 / -157 lines Commit sequence: feat → test ## Objective Optimize overall visual experience with three major improvements: upgraded MiniLine mini-chart component, full homepage layout redesign, extended global CSS styles, and disable mock data mode for production builds. ## Core File Changes | File | Modification Details | |------|----------------------| | MiniLine.tsx | Upgrade basic line chart to fully-featured mini chart: <br>1. Add new props: strokeWidth, showDot, animated, responsive<br>2. Support SVG linear gradient fill and glow filter effect<br>3. Render dual-layer endpoint dot (outer glow ring + inner solid dot)<br>4. Responsive layout: 100% width, customized viewBox and preserveAspectRatio<br>5. Return null directly when dataset contains fewer than 2 data points | | .env.production | Change `VITE_USE_MOCK=true` to `VITE_USE_MOCK=false` to enable real backend API calls in production environment | | index.css | Add 388 lines of global style rules: <br>• Complete CSS variable system for primary color palette<br>• Enhanced styling for cards, tables, forms and buttons<br>• Responsive media breakpoints<br>• Custom animation keyframes<br>• Styled scrollbars<br>• Reserved CSS variables for dark mode support | | home/index.tsx | Full homepage redesign: <br>• Time-aware greeting text<br>• Four entry cards for core operations: Message Query, Cluster Diagnosis, Resource Management, AI Chat<br>• Recommendation section and brand tagline display | | instance/index.tsx | Minor UI layout adjustments for proxy instance page | ## Unit Test Coverage (12 test cases total) ### MiniLine.test.tsx 1. Render valid SVG element normally 2. Support default and customized width & height 3. Verify responsive layout behavior 4. Confirm stroke path element exists in DOM 5. Toggle fill area display state 6. Toggle showDot feature and validate dual-layer dot rendering (outer glow + inner dot) 7. Render nothing (return null) when input data count < 2 8. Accept custom color configuration 9. Inject linear gradient and glow filter definitions into SVG -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
