beautiful-component-design

What problem does it solve?

Provides a concrete, project-specific design and implementation checklist to make uni-app components visually consistent, aligned, and responsive across form pages, detail cards, lists, pickers, and modal interactions.

Core Features & Use Cases

• Standardizes iconography and text alignment conventions (Carbon Icons + UnoCSS classes) to prevent layout shifts and icon deformation.
• Prescribes responsive rpx sizing, image grid layouts, timeline node styles, and card header (FormSectionTitle) integration for detail pages.
• Defines correct wd-picker and wd-cell nesting, selection UI patterns, and recommends wd-message-box.prompt for user input to avoid click-blocking and visual regressions.
• Includes migration and checklist items for forms, lists, pickers, popups, and detail-card color-coding to ensure consistent UX during development and refactor.

Quick Start

Apply the beautiful-component-design guidelines to src/pages-sub/repair/staff-todo-detail.vue and produce the updated Vue template, scoped styles, and a short checklist of the changes made.