[Studio] feat: enhance UI with polished styles, upgraded MiniLine chart and redesigned homepage

[zhaohai666]

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: 1. Add new props: strokeWidth, showDot, animated, responsive 2. Support SVG linear gradient fill and glow filter effect 3. Render dual-layer endpoint dot (outer glow ring + inner solid dot) 4. Responsive layout: 100% width, customized viewBox and preserveAspectRatio 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: • Complete CSS variable system for primary color palette • Enhanced styling for cards, tables, forms and buttons • Responsive media breakpoints • Custom animation keyframes • Styled scrollbars • Reserved CSS variables for dark mode support
home/index.tsx	Full homepage redesign: • Time-aware greeting text • Four entry cards for core operations: Message Query, Cluster Diagnosis, Resource Management, AI Chat • 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

[lizhimins]

Review Summary

Thanks for this PR! The MiniLine chart upgrade and homepage redesign look great. There are two code quality issues to address before merging:

1. Module-level mutable state in MiniLine (Medium)

let _lineId = 0 is used to generate unique SVG gradient/filter IDs. This can cause ID collisions in SSR or HMR (Hot Module Replacement) environments.

Suggestion: Replace with React 18 useId() hook or a deterministic ID based on props:

// Before
let _lineId = 0;
// ...
const id = `line-${++_lineId}`;

// After (React 18+)
const uid = useId();
const id = `line-${uid}`;

2. Excessive !important in index.css (Low)

388 lines of global CSS with many !important overrides on Ant Design styles (e.g., .studio-menu .ant-menu-item { border-radius: 6px !important; }). This increases maintenance cost and makes future style adjustments difficult.

Suggestion: Consider using Ant Design's ConfigProvider theme tokens for customization, or CSS Modules / CSS-in-JS to scope styles properly.

Verdict

The visual improvements are valuable. Once these two issues are addressed, this PR should be ready to merge.