mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-04 03:40:33 +08:00
2e07b4ea58
- Introduced migration status documentation in both English and Chinese to track the progress of the UI component library migration. - Added new UI components including CopyButton, DividerWithText, EmojiIcon, IndicatorLight, Spinner, TextBadge, and various display and icon components. - Updated the index.ts file to export the newly added components for easier access. - Enhanced the directory structure and component classification guidelines for better organization and clarity.
106 lines
4.5 KiB
Markdown
106 lines
4.5 KiB
Markdown
# UI Component Library Migration Status
|
|
|
|
## Usage Example
|
|
|
|
```typescript
|
|
// Import components from @cherrystudio/ui
|
|
import { Spinner, DividerWithText, InfoTooltip } from '@cherrystudio/ui'
|
|
|
|
// Use in components
|
|
function MyComponent() {
|
|
return (
|
|
<div>
|
|
<Spinner size={24} />
|
|
<DividerWithText text="Divider Text" />
|
|
<InfoTooltip content="Tooltip message" />
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
@packages/ui/
|
|
├── src/
|
|
│ ├── components/ # Main components directory
|
|
│ │ ├── base/ # Basic components (buttons, inputs, labels, etc.)
|
|
│ │ ├── display/ # Display components (cards, lists, tables, etc.)
|
|
│ │ ├── layout/ # Layout components (containers, grids, spacing, etc.)
|
|
│ │ ├── icons/ # Icon components
|
|
│ │ ├── interactive/ # Interactive components (modals, tooltips, dropdowns, etc.)
|
|
│ │ └── composite/ # Composite components (made from multiple base components)
|
|
│ ├── hooks/ # Custom React Hooks
|
|
│ └── types/ # TypeScript type definitions
|
|
```
|
|
|
|
### Component Classification Guide
|
|
|
|
When submitting PRs, please place components in the correct directory based on their function:
|
|
|
|
- **base**: Most basic UI elements like buttons, inputs, switches, labels, etc.
|
|
- **display**: Components for displaying content like cards, lists, tables, tabs, etc.
|
|
- **layout**: Components for page layout like containers, grid systems, dividers, etc.
|
|
- **icons**: All icon-related components
|
|
- **interactive**: Components requiring user interaction like modals, drawers, tooltips, dropdowns, etc.
|
|
- **composite**: Composite components made from multiple base components
|
|
|
|
## Migration Overview
|
|
|
|
- **Total Components**: 236
|
|
- **Migrated**: 18
|
|
- **Refactored**: 0
|
|
- **Pending Migration**: 218
|
|
|
|
## Component Status Table
|
|
|
|
| Component Name | Original Path | Category | Migration Status | Refactoring Status |
|
|
|---------------|---------------|----------|------------------|-------------------|
|
|
| CopyButton | src/renderer/src/components/CopyButton.tsx | base | ✅ | ❌ |
|
|
| DividerWithText | src/renderer/src/components/DividerWithText.tsx | base | ✅ | ❌ |
|
|
| EmojiIcon | src/renderer/src/components/EmojiIcon.tsx | base | ✅ | ❌ |
|
|
| IndicatorLight | src/renderer/src/components/IndicatorLight.tsx | base | ✅ | ❌ |
|
|
| Spinner | src/renderer/src/components/Spinner.tsx | base | ✅ | ❌ |
|
|
| TextBadge | src/renderer/src/components/TextBadge.tsx | base | ✅ | ❌ |
|
|
| Ellipsis | src/renderer/src/components/Ellipsis/index.tsx | display | ✅ | ❌ |
|
|
| ExpandableText | src/renderer/src/components/ExpandableText.tsx | display | ✅ | ❌ |
|
|
| ThinkingEffect | src/renderer/src/components/ThinkingEffect.tsx | display | ✅ | ❌ |
|
|
| HorizontalScrollContainer | src/renderer/src/components/HorizontalScrollContainer/index.tsx | layout | ✅ | ❌ |
|
|
| Scrollbar | src/renderer/src/components/Scrollbar/index.tsx | layout | ✅ | ❌ |
|
|
| VisionIcon | src/renderer/src/components/Icons/VisionIcon.tsx | icons | ✅ | ❌ |
|
|
| WebSearchIcon | src/renderer/src/components/Icons/WebSearchIcon.tsx | icons | ✅ | ❌ |
|
|
| ToolsCallingIcon | src/renderer/src/components/Icons/ToolsCallingIcon.tsx | icons | ✅ | ❌ |
|
|
| FileIcons | src/renderer/src/components/Icons/FileIcons.tsx | icons | ✅ | ❌ |
|
|
| SvgSpinners180Ring | src/renderer/src/components/Icons/SvgSpinners180Ring.tsx | icons | ✅ | ❌ |
|
|
| ReasoningIcon | src/renderer/src/components/Icons/ReasoningIcon.tsx | icons | ✅ | ❌ |
|
|
| InfoTooltip | src/renderer/src/components/TooltipIcons/InfoTooltip.tsx | interactive | ✅ | ❌ |
|
|
|
|
## Migration Steps
|
|
|
|
### Phase 1: Copy Migration (Current Phase)
|
|
|
|
- Copy components as-is to @packages/ui
|
|
- Retain original dependencies (antd, styled-components, etc.)
|
|
- Add original path comment at file top
|
|
|
|
### Phase 2: Refactor and Optimize
|
|
|
|
- Remove antd dependencies, replace with HeroUI
|
|
- Remove styled-components, replace with Tailwind CSS
|
|
- Optimize component APIs and type definitions
|
|
|
|
## Notes
|
|
|
|
1. **Do NOT migrate** components with these dependencies:
|
|
- window.api calls
|
|
- Redux (useSelector, useDispatch, etc.)
|
|
- Other external data sources
|
|
|
|
2. **Can migrate** but need decoupling later:
|
|
- Components using i18n (change i18n to props)
|
|
- Components using antd (replace with HeroUI later)
|
|
|
|
3. **Submission Guidelines**:
|
|
- Each PR should focus on one category of components
|
|
- Ensure all migrated components are exported
|
|
- Update migration status in this document |