From 4f746842a561ec593d5097235ee377105064e909 Mon Sep 17 00:00:00 2001
From: Phantom <59059173+EurFelux@users.noreply.github.com>
Date: Wed, 17 Sep 2025 18:17:17 +0800
Subject: [PATCH] refactor: migrate Flex from antd to custom Flex component
(#10083)
* refactor(components): rename HStack and VStack to RowFlex and ColFlex for clarity
rename HStack to RowFlex and VStack to ColFlex across all components to better reflect their purpose as flex containers with row and column directions. This improves code readability and maintainability while keeping the same functionality. All references to these components have been updated accordingly.
* refactor(layout): migrate layout components from .ts to .tsx
The layout components have been moved from TypeScript (.ts) to TypeScript with JSX (.tsx) to better support JSX syntax and improve type safety. The functionality remains unchanged.
* refactor(Layout): convert styled Box component to functional component
Improve maintainability by converting styled-component to a functional component with explicit style props. This provides better type safety through CSSProperties interface and makes the component easier to debug.
* refactor(Layout): restructure Box component and convert styled components to functional
- Replace styled-components with functional components for Stack and Center
- Rename style variable to _style in Box component to avoid naming conflict
- Add style prop to Box component to allow external style overrides
* refactor(components): rename HSpaceBetweenStack to SpaceBetweenRowFlex for clarity
* refactor(Layout): pass through props in Stack components
Allow additional props to be passed to Stack and its variants for better flexibility. Convert RowFlex from styled component to regular component for consistency.
* refactor(Layout): convert SpaceBetweenRowFlex from styled to component
Improve maintainability by converting styled component to a regular component that explicitly passes justifyContent prop
* refactor(Layout): convert ColFlex to component and type RowFlex props
Improve type safety by explicitly omitting flexDirection from StackProps and convert ColFlex from styled component to regular component for consistency
* refactor(Layout): convert BaseTypography from styled to component
Improve type safety and maintainability by converting styled component to regular React component with TypeScript interface
* refactor(Layout): remove unused BaseTypography component
* refactor(Layout): remove unused Container component and interface
* refactor(layout): rename Stack to Flex and use CSSProperties types
The Stack component was renamed to Flex to better reflect its purpose and align with common naming conventions. The interface properties were also updated to use CSSProperties types for better type safety and consistency with CSS standards.
* refactor(Layout): move FlexProps interface and comment out unused ButtonProps
Clean up component interfaces by moving FlexProps closer to its usage and commenting out unused ButtonProps interface to reduce clutter
* refactor(layout): standardize flex props from alignItems/justifyContent to align/justify
The changes standardize the flex-related props in the Layout component and across multiple files from using alignItems/justifyContent to the shorter align/justify. This improves consistency and reduces verbosity in the codebase while maintaining the same functionality.
All instances of alignItems have been replaced with align and justifyContent with justify in Flex, RowFlex, ColFlex and related components. The changes are purely syntactic and do not affect the actual layout behavior.
This refactoring makes the code more maintainable by using a consistent naming convention for flex properties throughout the application.
* refactor(Layout): extend BoxProps with React div props
* feat(Layout): add flexWrap prop to Flex component interface
Add flexWrap property to FlexProps interface to support CSS flex-wrap functionality. Also replace antd Flex with custom Flex component in TagFilterSection.
* refactor(components): replace antd Flex with custom Layout components
Consolidate Flex component usage across multiple files by replacing antd's Flex with custom Layout components (Flex, ColFlex, RowFlex) for better maintainability and consistency
* refactor(components): migrate antd Flex tu custom Flex
* refactor(components): update layout component usage for consistency
replace RowFlex with ColFlex where appropriate and align prop names
* refactor(tests): rename HStack to RowFlex in test components
Update test snapshots and mock components to reflect the component name change from HStack to RowFlex
Remove unused data-vertical attribute from preview container
* refactor(Layout): pass through props and merge styles in Box and Flex components
Improve component flexibility by allowing additional props to pass through and properly merging style objects in both Box and Flex components
* refactor(Layout): make Flex component props optional with undefined defaults
* test: update TagFilterSection snapshot to include wrap style
* perf(Layout): optimize Box component style calculation with useMemo
* docs: fix typo in Layout component comment
* refactor(Layout): update BoxProps to use CSSProperties types
Standardize prop types by using CSSProperties for style-related props to improve type safety and consistency with React's style system
* feat(Layout): add wrap prop to Flex component
* style(TagFilterSection): update snapshot styling to use flex-wrap property
* refactor(Layout): simplify layout components by using Tailwind CSS classes
Remove custom style calculations and props in favor of Tailwind utility classes
* refactor: replace inline styles with Tailwind CSS classes for consistent styling
style: update spacing and alignment utilities across components
* refactor(tests): update test snapshots to use tailwind classes
Replace inline styles with tailwind classes in test snapshots and update test assertions to match. This improves consistency with the codebase's styling approach.
* style: adjust spacing and gaps in UI components for consistency
* style: replace inline styles with tailwind classes for consistency
Refactor various components to use tailwind classes instead of inline styles to maintain consistency and improve readability. Changes include:
- Replacing style attributes with tailwind classes for spacing, margins, and padding
- Standardizing gap sizes across components
- Using tailwind for width, height, and other layout properties
- Updating test files to match new class names
* style(settings): replace inline styles with tailwind classes for consistency
Refactor settings components to use tailwind gap utility instead of inline styles for better maintainability and consistency across the codebase
* refactor(styles): replace inline styles with tailwind classes for consistency
* feat(eslint): add rule to restrict antd Flex imports
Enforce using custom Layout components instead of antd's Flex by adding a restricted import rule
* refactor: migrate flex layout from antd props to tailwind classes
- Replace antd Flex component props with tailwind classes for consistency
- Update gap and alignment values to use tailwind's spacing scale
- Remove unused antd Flex imports to clean up dependencies
* style(settings): adjust spacing and layout in various settings components
- Add gap spacing between elements in multiple settings components
- Remove redundant flex class in some components
- Standardize gap sizes across related components
* refactor(ui): replace inline styles with tailwind classes for consistency
Replace various inline style attributes with equivalent tailwind classes across multiple components to maintain consistent styling approach. Changes include margin, padding, width, and flex properties.
- Convert style attributes to tailwind classes
- Standardize spacing values using tailwind's spacing scale
- Improve maintainability by using utility classes
* style(ui): adjust spacing in model list group header
* style(css): wrap base styles in @layer for better organization
* style(css): fix indentation and nesting in global styles
* style(settings): adjust spacing in model list and convert subtitle to cn
Refactor SettingSubtitle to use cn utility for better className handling
Add gap spacing between model list items for improved layout
* style(css): move some styles from base layer to outer in index.css
* refactor(components): replace HStack with RowFlex for consistency
Update layout components to use RowFlex instead of HStack to maintain consistent naming
* style: reorder imports in useAppInit and BaseApiClient files
* fix(MinAppTabsPool): wrong import path
* refactor: update style file extensions from scss to css
Update file extensions and comments to reflect the change from SCSS to CSS stylesheets
* feat(layout): add Flex component and its variants
Introduce new Flex component with Box, RowFlex, SpaceBetweenRowFlex, ColFlex and Center variants to provide reusable layout components
* refactor: migrate layout components to @cherrystudio/ui package
This commit updates all imports of layout components (Box, Flex, RowFlex, ColFlex, etc.) from '@renderer/components/Layout' to '@cherrystudio/ui' across the codebase. The change also includes updating related test files and eslint configuration to reflect this migration. This refactoring aims to centralize layout components in a shared package for better maintainability and consistency.
* docs(eslint): update comment and restricted imports rule
Update comment to clarify the purpose of the rule and add a TODO note for future migration
* docs(ui): update migration status for layout components
Mark Layout/* components as migrated and refactored in both Chinese and English documentation
* docs: update migration status for Layout components
---
eslint.config.mjs | 20 +++
packages/ui/MIGRATION_STATUS.md | 130 +++++++-------
packages/ui/MIGRATION_STATUS_EN.md | 130 +++++++-------
packages/ui/src/components/index.ts | 1 +
.../ui/src/components/layout/Flex/index.tsx | 63 +++++++
src/renderer/src/assets/styles/index.css | 15 +-
.../components/CodeBlockView/StatusBar.tsx | 2 +-
.../__tests__/CodeToolbar.test.tsx | 6 +-
.../src/components/CodeToolbar/toolbar.tsx | 4 +-
.../HealthStatusIndicator/indicator.tsx | 5 +-
.../HealthStatusIndicator/useHealthStatus.tsx | 4 +-
src/renderer/src/components/Layout/index.ts | 159 ------------------
.../src/components/NutstorePathSelector.tsx | 15 +-
.../components/Popups/AddAssistantPopup.tsx | 10 +-
.../Popups/ApiKeyListPopup/item.tsx | 9 +-
.../Popups/ApiKeyListPopup/list.tsx | 5 +-
.../src/components/Popups/PromptPopup.tsx | 4 +-
.../Popups/SaveToKnowledgePopup.tsx | 12 +-
.../SelectModelPopup/TagFilterSection.tsx | 4 +-
.../TagFilterSection.test.tsx.snap | 110 ++++++------
.../Popups/SelectModelPopup/searchbar.tsx | 6 +-
.../src/components/Popups/TemplatePopup.tsx | 4 +-
.../src/components/Popups/UserPopup.tsx | 12 +-
.../components/Preview/ImagePreviewLayout.tsx | 2 +-
.../ImagePreviewLayout.test.tsx.snap | 1 -
src/renderer/src/components/Preview/styles.ts | 2 +-
.../src/components/QuickPanel/view.tsx | 14 +-
.../RichEditor/components/ImageUploader.tsx | 23 +--
.../RichEditor/components/LinkEditor.tsx | 7 +-
.../RichEditor/components/MathInputDialog.tsx | 5 +-
src/renderer/src/components/TopView/index.tsx | 6 +-
src/renderer/src/pages/agents/AgentsPage.tsx | 18 +-
.../agents/components/ImportAgentPopup.tsx | 5 +-
.../agents/components/ManageAgentsPopup.tsx | 8 +-
src/renderer/src/pages/files/FileItem.tsx | 6 +-
src/renderer/src/pages/files/FilesPage.tsx | 7 +-
.../src/pages/history/HistoryPage.tsx | 6 +-
.../history/components/SearchMessage.tsx | 6 +-
.../history/components/TopicMessages.tsx | 6 +-
.../history/components/TopicsHistory.tsx | 6 +-
src/renderer/src/pages/home/Chat.tsx | 13 +-
src/renderer/src/pages/home/ChatNavbar.tsx | 10 +-
.../pages/home/Inputbar/AttachmentPreview.tsx | 7 +-
.../src/pages/home/Inputbar/TokenCount.tsx | 30 ++--
.../home/Messages/Blocks/MainTextBlock.tsx | 4 +-
.../Blocks/__tests__/MainTextBlock.test.tsx | 11 +-
.../pages/home/Messages/MessageContent.tsx | 4 +-
.../home/Messages/MessageGroupMenuBar.tsx | 6 +-
.../home/Messages/MessageGroupModelList.tsx | 4 +-
.../src/pages/home/Messages/MessageHeader.tsx | 6 +-
.../home/Messages/Tools/MessageMcpTool.tsx | 4 +-
src/renderer/src/pages/home/Navbar.tsx | 10 +-
.../src/pages/home/Tabs/SettingsTab.tsx | 6 +-
.../Tabs/components/AssistantTagsPopup.tsx | 4 +-
.../src/pages/knowledge/KnowledgeContent.tsx | 10 +-
.../__tests__/KnowledgeBaseFormModal.test.tsx | 4 +-
.../KnowledgeBaseFormModal.test.tsx.snap | 2 +-
.../components/EditKnowledgeBasePopup.tsx | 6 +-
.../components/KnowledgeSearchPopup.tsx | 6 +-
.../KnowledgeBaseFormModal.tsx | 6 +-
.../src/pages/memory/settings-modal.tsx | 5 +-
src/renderer/src/pages/notes/HeaderNavbar.tsx | 6 +-
src/renderer/src/pages/notes/NotesEditor.tsx | 12 +-
.../src/pages/paintings/AihubmixPage.tsx | 6 +-
.../src/pages/paintings/DmxapiPage.tsx | 18 +-
.../src/pages/paintings/SiliconPage.tsx | 10 +-
.../src/pages/paintings/ZhipuPage.tsx | 6 +-
.../src/pages/settings/AboutSettings.tsx | 6 +-
.../AssistantKnowledgeBaseSettings.tsx | 6 +-
.../AssistantMCPSettings.tsx | 2 +-
.../AssistantMemorySettings.tsx | 2 +-
.../AssistantModelSettings.tsx | 26 +--
.../AssistantPromptSettings.tsx | 20 +--
.../AssistantRegularPromptsSettings.tsx | 5 +-
.../settings/AssistantSettings/index.tsx | 6 +-
.../AgentsSubscribeUrlSettings.tsx | 8 +-
.../settings/DataSettings/DataSettings.tsx | 30 ++--
.../settings/DataSettings/JoplinSettings.tsx | 12 +-
.../DataSettings/LocalBackupSettings.tsx | 14 +-
.../DataSettings/MarkdownExportSettings.tsx | 6 +-
.../settings/DataSettings/NotionSettings.tsx | 16 +-
.../DataSettings/NutstoreSettings.tsx | 18 +-
.../DataSettings/ObsidianSettings.tsx | 6 +-
.../settings/DataSettings/S3Settings.tsx | 10 +-
.../settings/DataSettings/SiyuanSettings.tsx | 21 +--
.../settings/DataSettings/WebDavSettings.tsx | 10 +-
.../settings/DataSettings/YuqueSettings.tsx | 11 +-
.../DisplaySettings/DisplaySettings.tsx | 10 +-
.../OcrProviderSettings.tsx | 5 +-
.../DocProcessSettings/OcrSystemSettings.tsx | 5 +-
.../OcrTesseractSettings.tsx | 5 +-
.../PreprocessProviderSettings.tsx | 7 +-
.../src/pages/settings/GeneralSettings.tsx | 15 +-
.../settings/MCPSettings/InstallNpxUv.tsx | 10 +-
.../pages/settings/MCPSettings/McpPrompt.tsx | 15 +-
.../settings/MCPSettings/McpResource.tsx | 9 +-
.../settings/MCPSettings/McpSettings.tsx | 9 +-
.../MCPSettings/McpSettingsNavbar.tsx | 6 +-
.../pages/settings/MCPSettings/McpTool.tsx | 21 +--
.../pages/settings/MCPSettings/NpxSearch.tsx | 11 +-
.../MemorySettings/MemorySettings.tsx | 23 +--
.../settings/MemorySettings/UserSelector.tsx | 6 +-
.../DefaultAssistantSettings.tsx | 23 +--
.../settings/ModelSettings/ModelSettings.tsx | 26 +--
.../ModelSettings/QuickModelPopup.tsx | 14 +-
.../ProviderSettings/AddProviderPopup.tsx | 8 +-
.../ApiOptionsSettings/ApiOptionsSettings.tsx | 16 +-
.../ProviderSettings/AwsBedrockSettings.tsx | 6 +-
.../EditModelPopup/ModelEditContent.tsx | 11 +-
.../EditModelPopup/ModelTypeSelector.tsx | 5 +-
.../ModelList/AddModelPopup.tsx | 9 +-
.../ModelList/HealthCheckPopup.tsx | 31 ++--
.../ModelList/ManageModelsList.tsx | 9 +-
.../ModelList/ManageModelsPopup.tsx | 9 +-
.../ProviderSettings/ModelList/ModelList.tsx | 31 ++--
.../ModelList/ModelListGroup.tsx | 5 +-
.../ModelList/ModelListItem.tsx | 14 +-
.../ModelList/NewApiAddModelPopup.tsx | 9 +-
.../ModelList/NewApiBatchAddModelPopup.tsx | 9 +-
.../ProviderSettings/ProviderOAuth.tsx | 6 +-
.../ProviderSettings/ProviderSetting.tsx | 11 +-
.../ProviderSettings/UrlSchemaInfoPopup.tsx | 5 +-
.../ProviderSettings/VertexAISettings.tsx | 6 +-
.../pages/settings/QuickAssistantSettings.tsx | 22 +--
.../pages/settings/QuickPhraseSettings.tsx | 5 +-
.../src/pages/settings/ShortcutSettings.tsx | 18 +-
.../CustomLanguageSettings.tsx | 6 +-
.../TranslatePromptSettings.tsx | 6 +-
.../WebSearchSettings/AddSubscribePopup.tsx | 7 +-
.../WebSearchProviderSetting.tsx | 12 +-
src/renderer/src/pages/settings/index.tsx | 20 ++-
.../src/pages/translate/TranslateHistory.tsx | 23 +--
.../src/pages/translate/TranslatePage.tsx | 5 +-
.../src/pages/translate/TranslateSettings.tsx | 33 ++--
src/renderer/src/trace/pages/SpanDetail.tsx | 4 +-
src/renderer/src/utils/style.ts | 2 +-
136 files changed, 924 insertions(+), 968 deletions(-)
create mode 100644 packages/ui/src/components/layout/Flex/index.tsx
delete mode 100644 src/renderer/src/components/Layout/index.ts
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 8eda2e6fa8..19b4efcd31 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -110,6 +110,26 @@ export default defineConfig([
'i18n/no-template-in-t': 'warn'
}
},
+ {
+ // Component Rules - prevent importing antd components when migration completed
+ files: ['src/**/*.{ts,tsx,js,jsx}'],
+ rules: {
+ 'no-restricted-imports': [
+ 'error',
+ {
+ paths: [
+ {
+ name: 'antd',
+ // TODO: migrate message again
+ importNames: ['Flex'],
+ message:
+ '❌ Do not import Flex from antd. Use our custom Layout components instead: import { Flex } from "@cherrystudio/ui"'
+ }
+ ]
+ }
+ ]
+ }
+ },
{
ignores: [
'node_modules/**',
diff --git a/packages/ui/MIGRATION_STATUS.md b/packages/ui/MIGRATION_STATUS.md
index 59c9ed0835..4206242b91 100644
--- a/packages/ui/MIGRATION_STATUS.md
+++ b/packages/ui/MIGRATION_STATUS.md
@@ -55,71 +55,71 @@ function MyComponent() {
## 组件状态表
-| Category | Component Name | Migration Status | Refactoring Status | Description |
-|----------|----------------|------------------|--------------------|-------------|
-| **base** | | | | 基础组件 |
-| | CopyButton | ✅ | ✅ | 复制按钮 |
-| | CustomTag | ✅ | ✅ | 自定义标签 |
-| | DividerWithText | ✅ | ✅ | 带文本的分隔线 |
-| | EmojiIcon | ✅ | ✅ | 表情图标 |
-| | ErrorBoundary | ✅ | ✅ | 错误边界 (通过 props 解耦) |
-| | StatusTag | ✅ | ✅ | 统一状态标签(合并了 ErrorTag、SuccessTag、WarnTag、InfoTag)|
-| | IndicatorLight | ✅ | ✅ | 指示灯 |
-| | Spinner | ✅ | ✅ | 加载动画 |
-| | TextBadge | ✅ | ✅ | 文本徽标 |
-| | CustomCollapse | ✅ | ✅ | 自定义折叠面板 |
-| **display** | | | | 显示组件 |
-| | Ellipsis | ✅ | ✅ | 文本省略 |
-| | ExpandableText | ✅ | ✅ | 可展开文本 |
-| | ThinkingEffect | ✅ | ✅ | 思考效果动画 |
-| | EmojiAvatar | ✅ | ✅ | 表情头像 |
-| | ListItem | ✅ | ✅ | 列表项 |
-| | MaxContextCount | ✅ | ✅ | 最大上下文数显示 |
-| | ProviderAvatar | ✅ | ✅ | 提供者头像 |
-| | CodeViewer | ❌ | ❌ | 代码查看器 (外部依赖) |
-| | OGCard | ❌ | ❌ | OG 卡片 |
-| | MarkdownShadowDOMRenderer | ❌ | ❌ | Markdown 渲染器 |
-| | Preview/* | ❌ | ❌ | 预览组件 |
-| **layout** | | | | 布局组件 |
-| | HorizontalScrollContainer | ✅ | ❌ | 水平滚动容器 |
-| | Scrollbar | ✅ | ❌ | 滚动条 |
-| | Layout/* | ❌ | ❌ | 布局组件 |
-| | Tab/* | ❌ | ❌ | 标签页 (Redux 依赖) |
-| | TopView | ❌ | ❌ | 顶部视图 (window.api 依赖) |
-| **icons** | | | | 图标组件 |
-| | Icon | ✅ | ✅ | 图标工厂函数和预定义图标(合并了 CopyIcon、DeleteIcon、EditIcon、RefreshIcon、ResetIcon、ToolIcon、VisionIcon、WebSearchIcon、WrapIcon、UnWrapIcon、OcrIcon)|
-| | FileIcons | ✅ | ❌ | 文件图标 (FileSvgIcon、FilePngIcon) |
-| | ReasoningIcon | ✅ | ❌ | 推理图标 |
-| | SvgSpinners180Ring | ✅ | ❌ | 旋转加载图标 |
-| | ToolsCallingIcon | ✅ | ❌ | 工具调用图标 |
-| **interactive** | | | | 交互组件 |
-| | InfoTooltip | ✅ | ❌ | 信息提示 |
-| | HelpTooltip | ✅ | ❌ | 帮助提示 |
-| | WarnTooltip | ✅ | ❌ | 警告提示 |
-| | EditableNumber | ✅ | ❌ | 可编辑数字 |
-| | InfoPopover | ✅ | ❌ | 信息弹出框 |
-| | CollapsibleSearchBar | ✅ | ❌ | 可折叠搜索栏 |
-| | ImageToolButton | ✅ | ❌ | 图片工具按钮 |
-| | DraggableList | ✅ | ❌ | 可拖拽列表 |
-| | CodeEditor | ✅ | ❌ | 代码编辑器 |
-| | EmojiPicker | ❌ | ❌ | 表情选择器 (useTheme 依赖) |
-| | Selector | ✅ | ❌ | 选择器 (i18n 依赖) |
-| | ModelSelector | ❌ | ❌ | 模型选择器 (Redux 依赖) |
-| | LanguageSelect | ❌ | ❌ | 语言选择 |
-| | TranslateButton | ❌ | ❌ | 翻译按钮 (window.api 依赖) |
-| **composite** | | | | 复合组件 |
-| | - | - | - | 暂无复合组件 |
-| **未分类** | | | | 需要分类的组件 |
-| | Popups/* (16+ 文件) | ❌ | ❌ | 弹窗组件 (业务耦合) |
-| | RichEditor/* (30+ 文件) | ❌ | ❌ | 富文本编辑器 |
-| | MarkdownEditor/* | ❌ | ❌ | Markdown 编辑器 |
-| | MinApp/* | ❌ | ❌ | 迷你应用 (Redux 依赖) |
-| | Avatar/* | ❌ | ❌ | 头像组件 |
-| | ActionTools/* | ❌ | ❌ | 操作工具 |
-| | CodeBlockView/* | ❌ | ❌ | 代码块视图 (window.api 依赖) |
-| | ContextMenu | ❌ | ❌ | 右键菜单 (Electron API) |
-| | WindowControls | ❌ | ❌ | 窗口控制 (Electron API) |
-| | ErrorBoundary | ❌ | ❌ | 错误边界 (window.api 依赖) |
+| Category | Component Name | Migration Status | Refactoring Status | Description |
+| --------------- | ------------------------- | ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **base** | | | | 基础组件 |
+| | CopyButton | ✅ | ✅ | 复制按钮 |
+| | CustomTag | ✅ | ✅ | 自定义标签 |
+| | DividerWithText | ✅ | ✅ | 带文本的分隔线 |
+| | EmojiIcon | ✅ | ✅ | 表情图标 |
+| | ErrorBoundary | ✅ | ✅ | 错误边界 (通过 props 解耦) |
+| | StatusTag | ✅ | ✅ | 统一状态标签(合并了 ErrorTag、SuccessTag、WarnTag、InfoTag) |
+| | IndicatorLight | ✅ | ✅ | 指示灯 |
+| | Spinner | ✅ | ✅ | 加载动画 |
+| | TextBadge | ✅ | ✅ | 文本徽标 |
+| | CustomCollapse | ✅ | ✅ | 自定义折叠面板 |
+| **display** | | | | 显示组件 |
+| | Ellipsis | ✅ | ✅ | 文本省略 |
+| | ExpandableText | ✅ | ✅ | 可展开文本 |
+| | ThinkingEffect | ✅ | ✅ | 思考效果动画 |
+| | EmojiAvatar | ✅ | ✅ | 表情头像 |
+| | ListItem | ✅ | ✅ | 列表项 |
+| | MaxContextCount | ✅ | ✅ | 最大上下文数显示 |
+| | ProviderAvatar | ✅ | ✅ | 提供者头像 |
+| | CodeViewer | ❌ | ❌ | 代码查看器 (外部依赖) |
+| | OGCard | ❌ | ❌ | OG 卡片 |
+| | MarkdownShadowDOMRenderer | ❌ | ❌ | Markdown 渲染器 |
+| | Preview/* | ❌ | ❌ | 预览组件 |
+| **layout** | | | | 布局组件 |
+| | HorizontalScrollContainer | ✅ | ❌ | 水平滚动容器 |
+| | Scrollbar | ✅ | ❌ | 滚动条 |
+| | Layout/* | ✅ | ✅ | 布局组件 |
+| | Tab/* | ❌ | ❌ | 标签页 (Redux 依赖) |
+| | TopView | ❌ | ❌ | 顶部视图 (window.api 依赖) |
+| **icons** | | | | 图标组件 |
+| | Icon | ✅ | ✅ | 图标工厂函数和预定义图标(合并了 CopyIcon、DeleteIcon、EditIcon、RefreshIcon、ResetIcon、ToolIcon、VisionIcon、WebSearchIcon、WrapIcon、UnWrapIcon、OcrIcon) |
+| | FileIcons | ✅ | ❌ | 文件图标 (FileSvgIcon、FilePngIcon) |
+| | ReasoningIcon | ✅ | ❌ | 推理图标 |
+| | SvgSpinners180Ring | ✅ | ❌ | 旋转加载图标 |
+| | ToolsCallingIcon | ✅ | ❌ | 工具调用图标 |
+| **interactive** | | | | 交互组件 |
+| | InfoTooltip | ✅ | ❌ | 信息提示 |
+| | HelpTooltip | ✅ | ❌ | 帮助提示 |
+| | WarnTooltip | ✅ | ❌ | 警告提示 |
+| | EditableNumber | ✅ | ❌ | 可编辑数字 |
+| | InfoPopover | ✅ | ❌ | 信息弹出框 |
+| | CollapsibleSearchBar | ✅ | ❌ | 可折叠搜索栏 |
+| | ImageToolButton | ✅ | ❌ | 图片工具按钮 |
+| | DraggableList | ✅ | ❌ | 可拖拽列表 |
+| | CodeEditor | ✅ | ❌ | 代码编辑器 |
+| | EmojiPicker | ❌ | ❌ | 表情选择器 (useTheme 依赖) |
+| | Selector | ✅ | ❌ | 选择器 (i18n 依赖) |
+| | ModelSelector | ❌ | ❌ | 模型选择器 (Redux 依赖) |
+| | LanguageSelect | ❌ | ❌ | 语言选择 |
+| | TranslateButton | ❌ | ❌ | 翻译按钮 (window.api 依赖) |
+| **composite** | | | | 复合组件 |
+| | - | - | - | 暂无复合组件 |
+| **未分类** | | | | 需要分类的组件 |
+| | Popups/* (16+ 文件) | ❌ | ❌ | 弹窗组件 (业务耦合) |
+| | RichEditor/* (30+ 文件) | ❌ | ❌ | 富文本编辑器 |
+| | MarkdownEditor/* | ❌ | ❌ | Markdown 编辑器 |
+| | MinApp/* | ❌ | ❌ | 迷你应用 (Redux 依赖) |
+| | Avatar/* | ❌ | ❌ | 头像组件 |
+| | ActionTools/* | ❌ | ❌ | 操作工具 |
+| | CodeBlockView/* | ❌ | ❌ | 代码块视图 (window.api 依赖) |
+| | ContextMenu | ❌ | ❌ | 右键菜单 (Electron API) |
+| | WindowControls | ❌ | ❌ | 窗口控制 (Electron API) |
+| | ErrorBoundary | ❌ | ❌ | 错误边界 (window.api 依赖) |
## 迁移步骤
diff --git a/packages/ui/MIGRATION_STATUS_EN.md b/packages/ui/MIGRATION_STATUS_EN.md
index 4fe4471173..8c62e36bc7 100644
--- a/packages/ui/MIGRATION_STATUS_EN.md
+++ b/packages/ui/MIGRATION_STATUS_EN.md
@@ -54,71 +54,71 @@ When submitting PRs, please place components in the correct directory based on t
## Component Status Table
-| Category | Component Name | Migration Status | Refactoring Status | Description |
-|----------|----------------|------------------|--------------------|-------------|
-| **base** | | | | Base components |
-| | CopyButton | ✅ | ✅ | Copy button |
-| | CustomTag | ✅ | ✅ | Custom tag |
-| | DividerWithText | ✅ | ✅ | Divider with text |
-| | EmojiIcon | ✅ | ✅ | Emoji icon |
-| | ErrorBoundary | ✅ | ✅ | Error boundary (decoupled via props) |
-| | StatusTag | ✅ | ✅ | Unified status tag (merged ErrorTag, SuccessTag, WarnTag, InfoTag) |
-| | IndicatorLight | ✅ | ✅ | Indicator light |
-| | Spinner | ✅ | ✅ | Loading spinner |
-| | TextBadge | ✅ | ✅ | Text badge |
-| | CustomCollapse | ✅ | ✅ | Custom collapse panel |
-| **display** | | | | Display components |
-| | Ellipsis | ✅ | ✅ | Text ellipsis |
-| | ExpandableText | ✅ | ✅ | Expandable text |
-| | ThinkingEffect | ✅ | ✅ | Thinking effect animation |
-| | EmojiAvatar | ✅ | ✅ | Emoji avatar |
-| | ListItem | ✅ | ✅ | List item |
-| | MaxContextCount | ✅ | ✅ | Max context count display |
-| | ProviderAvatar | ✅ | ✅ | Provider avatar |
-| | CodeViewer | ❌ | ❌ | Code viewer (external deps) |
-| | OGCard | ❌ | ❌ | OG card |
-| | MarkdownShadowDOMRenderer | ❌ | ❌ | Markdown renderer |
-| | Preview/* | ❌ | ❌ | Preview components |
-| **layout** | | | | Layout components |
-| | HorizontalScrollContainer | ✅ | ❌ | Horizontal scroll container |
-| | Scrollbar | ✅ | ❌ | Scrollbar |
-| | Layout/* | ❌ | ❌ | Layout components |
-| | Tab/* | ❌ | ❌ | Tab (Redux dependency) |
-| | TopView | ❌ | ❌ | Top view (window.api dependency) |
-| **icons** | | | | Icon components |
-| | Icon | ✅ | ✅ | Icon factory function and predefined icons (merged CopyIcon, DeleteIcon, EditIcon, RefreshIcon, ResetIcon, ToolIcon, VisionIcon, WebSearchIcon, WrapIcon, UnWrapIcon, OcrIcon) |
-| | FileIcons | ✅ | ❌ | File icons (FileSvgIcon, FilePngIcon) |
-| | ReasoningIcon | ✅ | ❌ | Reasoning icon |
-| | SvgSpinners180Ring | ✅ | ❌ | Spinner loading icon |
-| | ToolsCallingIcon | ✅ | ❌ | Tools calling icon |
-| **interactive** | | | | Interactive components |
-| | InfoTooltip | ✅ | ❌ | Info tooltip |
-| | HelpTooltip | ✅ | ❌ | Help tooltip |
-| | WarnTooltip | ✅ | ❌ | Warning tooltip |
-| | EditableNumber | ✅ | ❌ | Editable number |
-| | InfoPopover | ✅ | ❌ | Info popover |
-| | CollapsibleSearchBar | ✅ | ❌ | Collapsible search bar |
-| | ImageToolButton | ✅ | ❌ | Image tool button |
-| | DraggableList | ✅ | ❌ | Draggable list |
-| | CodeEditor | ✅ | ❌ | Code editor |
-| | EmojiPicker | ❌ | ❌ | Emoji picker (useTheme dependency) |
-| | Selector | ✅ | ❌ | Selector (i18n dependency) |
-| | ModelSelector | ❌ | ❌ | Model selector (Redux dependency) |
-| | LanguageSelect | ❌ | ❌ | Language select |
-| | TranslateButton | ❌ | ❌ | Translate button (window.api dependency) |
-| **composite** | | | | Composite components |
-| | - | - | - | No composite components yet |
-| **Uncategorized** | | | | Components needing categorization |
-| | Popups/* (16+ files) | ❌ | ❌ | Popup components (business coupled) |
-| | RichEditor/* (30+ files) | ❌ | ❌ | Rich text editor |
-| | MarkdownEditor/* | ❌ | ❌ | Markdown editor |
-| | MinApp/* | ❌ | ❌ | Mini app (Redux dependency) |
-| | Avatar/* | ❌ | ❌ | Avatar components |
-| | ActionTools/* | ❌ | ❌ | Action tools |
-| | CodeBlockView/* | ❌ | ❌ | Code block view (window.api dependency) |
-| | ContextMenu | ❌ | ❌ | Context menu (Electron API) |
-| | WindowControls | ❌ | ❌ | Window controls (Electron API) |
-| | ErrorBoundary | ❌ | ❌ | Error boundary (window.api dependency) |
+| Category | Component Name | Migration Status | Refactoring Status | Description |
+| ----------------- | ------------------------- | ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **base** | | | | Base components |
+| | CopyButton | ✅ | ✅ | Copy button |
+| | CustomTag | ✅ | ✅ | Custom tag |
+| | DividerWithText | ✅ | ✅ | Divider with text |
+| | EmojiIcon | ✅ | ✅ | Emoji icon |
+| | ErrorBoundary | ✅ | ✅ | Error boundary (decoupled via props) |
+| | StatusTag | ✅ | ✅ | Unified status tag (merged ErrorTag, SuccessTag, WarnTag, InfoTag) |
+| | IndicatorLight | ✅ | ✅ | Indicator light |
+| | Spinner | ✅ | ✅ | Loading spinner |
+| | TextBadge | ✅ | ✅ | Text badge |
+| | CustomCollapse | ✅ | ✅ | Custom collapse panel |
+| **display** | | | | Display components |
+| | Ellipsis | ✅ | ✅ | Text ellipsis |
+| | ExpandableText | ✅ | ✅ | Expandable text |
+| | ThinkingEffect | ✅ | ✅ | Thinking effect animation |
+| | EmojiAvatar | ✅ | ✅ | Emoji avatar |
+| | ListItem | ✅ | ✅ | List item |
+| | MaxContextCount | ✅ | ✅ | Max context count display |
+| | ProviderAvatar | ✅ | ✅ | Provider avatar |
+| | CodeViewer | ❌ | ❌ | Code viewer (external deps) |
+| | OGCard | ❌ | ❌ | OG card |
+| | MarkdownShadowDOMRenderer | ❌ | ❌ | Markdown renderer |
+| | Preview/* | ❌ | ❌ | Preview components |
+| **layout** | | | | Layout components |
+| | HorizontalScrollContainer | ✅ | ❌ | Horizontal scroll container |
+| | Scrollbar | ✅ | ❌ | Scrollbar |
+| | Layout/* | ✅ | ✅ | Layout components |
+| | Tab/* | ❌ | ❌ | Tab (Redux dependency) |
+| | TopView | ❌ | ❌ | Top view (window.api dependency) |
+| **icons** | | | | Icon components |
+| | Icon | ✅ | ✅ | Icon factory function and predefined icons (merged CopyIcon, DeleteIcon, EditIcon, RefreshIcon, ResetIcon, ToolIcon, VisionIcon, WebSearchIcon, WrapIcon, UnWrapIcon, OcrIcon) |
+| | FileIcons | ✅ | ❌ | File icons (FileSvgIcon, FilePngIcon) |
+| | ReasoningIcon | ✅ | ❌ | Reasoning icon |
+| | SvgSpinners180Ring | ✅ | ❌ | Spinner loading icon |
+| | ToolsCallingIcon | ✅ | ❌ | Tools calling icon |
+| **interactive** | | | | Interactive components |
+| | InfoTooltip | ✅ | ❌ | Info tooltip |
+| | HelpTooltip | ✅ | ❌ | Help tooltip |
+| | WarnTooltip | ✅ | ❌ | Warning tooltip |
+| | EditableNumber | ✅ | ❌ | Editable number |
+| | InfoPopover | ✅ | ❌ | Info popover |
+| | CollapsibleSearchBar | ✅ | ❌ | Collapsible search bar |
+| | ImageToolButton | ✅ | ❌ | Image tool button |
+| | DraggableList | ✅ | ❌ | Draggable list |
+| | CodeEditor | ✅ | ❌ | Code editor |
+| | EmojiPicker | ❌ | ❌ | Emoji picker (useTheme dependency) |
+| | Selector | ✅ | ❌ | Selector (i18n dependency) |
+| | ModelSelector | ❌ | ❌ | Model selector (Redux dependency) |
+| | LanguageSelect | ❌ | ❌ | Language select |
+| | TranslateButton | ❌ | ❌ | Translate button (window.api dependency) |
+| **composite** | | | | Composite components |
+| | - | - | - | No composite components yet |
+| **Uncategorized** | | | | Components needing categorization |
+| | Popups/* (16+ files) | ❌ | ❌ | Popup components (business coupled) |
+| | RichEditor/* (30+ files) | ❌ | ❌ | Rich text editor |
+| | MarkdownEditor/* | ❌ | ❌ | Markdown editor |
+| | MinApp/* | ❌ | ❌ | Mini app (Redux dependency) |
+| | Avatar/* | ❌ | ❌ | Avatar components |
+| | ActionTools/* | ❌ | ❌ | Action tools |
+| | CodeBlockView/* | ❌ | ❌ | Code block view (window.api dependency) |
+| | ContextMenu | ❌ | ❌ | Context menu (Electron API) |
+| | WindowControls | ❌ | ❌ | Window controls (Electron API) |
+| | ErrorBoundary | ❌ | ❌ | Error boundary (window.api dependency) |
## Migration Steps
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index ab1d3d40bd..c5f3727e34 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -22,6 +22,7 @@ export { ProviderAvatar } from './display/ProviderAvatar'
export { default as ThinkingEffect } from './display/ThinkingEffect'
// Layout Components
+export { Box, Center, ColFlex, Flex, RowFlex, SpaceBetweenRowFlex } from './layout/Flex'
export { default as HorizontalScrollContainer } from './layout/HorizontalScrollContainer'
export { default as Scrollbar } from './layout/Scrollbar'
diff --git a/packages/ui/src/components/layout/Flex/index.tsx b/packages/ui/src/components/layout/Flex/index.tsx
new file mode 100644
index 0000000000..522a5574d7
--- /dev/null
+++ b/packages/ui/src/components/layout/Flex/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { cn } from '../../../utils'
+
+export interface BoxProps extends React.ComponentProps<'div'> {}
+
+export const Box = ({ children, className, ...props }: BoxProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export interface FlexProps extends BoxProps {}
+
+export const Flex = ({ children, className, ...props }: FlexProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export const RowFlex = ({ children, className, ...props }: FlexProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export const SpaceBetweenRowFlex = ({ children, className, ...props }: FlexProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+export const ColFlex = ({ children, className, ...props }: FlexProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export const Center = ({ children, className, ...props }: FlexProps & { children?: React.ReactNode }) => {
+ return (
+
+ {children}
+
+ )
+}
+
+export default {
+ Box,
+ Flex,
+ RowFlex,
+ SpaceBetweenRowFlex,
+ ColFlex,
+ Center
+}
diff --git a/src/renderer/src/assets/styles/index.css b/src/renderer/src/assets/styles/index.css
index b344e60ae6..d48eb615d1 100644
--- a/src/renderer/src/assets/styles/index.css
+++ b/src/renderer/src/assets/styles/index.css
@@ -11,18 +11,19 @@
@import '../fonts/ubuntu/ubuntu.css';
@import '../fonts/country-flag-fonts/flag.css';
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- /* margin: 0; */
- font-weight: normal;
+@layer base {
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ /* margin: 0; */
+ font-weight: normal;
+ }
}
*:focus {
outline: none;
}
-
* {
-webkit-tap-highlight-color: transparent;
}
diff --git a/src/renderer/src/components/CodeBlockView/StatusBar.tsx b/src/renderer/src/components/CodeBlockView/StatusBar.tsx
index 72589b9045..6824ba5e42 100644
--- a/src/renderer/src/components/CodeBlockView/StatusBar.tsx
+++ b/src/renderer/src/components/CodeBlockView/StatusBar.tsx
@@ -1,4 +1,4 @@
-import { Flex } from 'antd'
+import { Flex } from '@cherrystudio/ui'
import type { FC, ReactNode } from 'react'
import { memo } from 'react'
import styled from 'styled-components'
diff --git a/src/renderer/src/components/CodeToolbar/__tests__/CodeToolbar.test.tsx b/src/renderer/src/components/CodeToolbar/__tests__/CodeToolbar.test.tsx
index 4f75409c8a..681f9fd753 100644
--- a/src/renderer/src/components/CodeToolbar/__tests__/CodeToolbar.test.tsx
+++ b/src/renderer/src/components/CodeToolbar/__tests__/CodeToolbar.test.tsx
@@ -19,7 +19,7 @@ const mocks = vi.hoisted(() => ({
{children}
)),
- HStack: vi.fn(({ children, className }) => (
+ RowFlex: vi.fn(({ children, className }) => (
{children}
@@ -43,8 +43,8 @@ vi.mock('antd', () => ({
Tooltip: mocks.Tooltip
}))
-vi.mock('@renderer/components/Layout', () => ({
- HStack: mocks.HStack
+vi.mock('@cherrystudio/ui', () => ({
+ RowFlex: mocks.RowFlex
}))
vi.mock('./styles', () => ({
diff --git a/src/renderer/src/components/CodeToolbar/toolbar.tsx b/src/renderer/src/components/CodeToolbar/toolbar.tsx
index 7b78d8e536..a87cce5b19 100644
--- a/src/renderer/src/components/CodeToolbar/toolbar.tsx
+++ b/src/renderer/src/components/CodeToolbar/toolbar.tsx
@@ -1,5 +1,5 @@
+import { RowFlex } from '@cherrystudio/ui'
import type { ActionTool } from '@renderer/components/ActionTools'
-import { HStack } from '@renderer/components/Layout'
import { Tooltip } from 'antd'
import { EllipsisVertical } from 'lucide-react'
import { memo, useMemo, useState } from 'react'
@@ -61,7 +61,7 @@ const StickyWrapper = styled.div`
z-index: 10;
`
-const ToolbarWrapper = styled(HStack)`
+const ToolbarWrapper = styled(RowFlex)`
position: absolute;
align-items: center;
bottom: 0.3rem;
diff --git a/src/renderer/src/components/HealthStatusIndicator/indicator.tsx b/src/renderer/src/components/HealthStatusIndicator/indicator.tsx
index 2807549e28..9b65d58f29 100644
--- a/src/renderer/src/components/HealthStatusIndicator/indicator.tsx
+++ b/src/renderer/src/components/HealthStatusIndicator/indicator.tsx
@@ -1,5 +1,6 @@
import { CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, LoadingOutlined } from '@ant-design/icons'
-import { Flex, Tooltip, Typography } from 'antd'
+import { Flex } from '@cherrystudio/ui'
+import { Tooltip, Typography } from 'antd'
import React, { memo } from 'react'
import styled from 'styled-components'
@@ -48,7 +49,7 @@ const HealthStatusIndicator: React.FC = ({
}
return (
-
+
{latencyText && {latencyText}}
{icon}
diff --git a/src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx b/src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx
index 1027324eeb..4ecedb18c9 100644
--- a/src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx
+++ b/src/renderer/src/components/HealthStatusIndicator/useHealthStatus.tsx
@@ -1,5 +1,5 @@
+import { Flex } from '@cherrystudio/ui'
import { HealthStatus } from '@renderer/types/healthCheck'
-import { Flex } from 'antd'
import React from 'react'
import { useTranslation } from 'react-i18next'
@@ -77,7 +77,7 @@ export const useHealthStatus = ({ results, showLatency = false }: UseHealthStatu
return (
-
+
{statusText}
{result.label}
diff --git a/src/renderer/src/components/Layout/index.ts b/src/renderer/src/components/Layout/index.ts
deleted file mode 100644
index 6ebc5788c5..0000000000
--- a/src/renderer/src/components/Layout/index.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import styled from 'styled-components'
-
-interface ContainerProps {
- padding?: string
-}
-
-type PxValue = number | string
-
-export interface BoxProps {
- width?: PxValue
- height?: PxValue
- w?: PxValue
- h?: PxValue
- color?: string
- background?: string
- flex?: string | number
- position?: string
- left?: PxValue
- top?: PxValue
- right?: PxValue
- bottom?: PxValue
- opacity?: string | number
- borderRadius?: PxValue
- border?: string
- gap?: PxValue
- mt?: PxValue
- marginTop?: PxValue
- mb?: PxValue
- marginBottom?: PxValue
- ml?: PxValue
- marginLeft?: PxValue
- mr?: PxValue
- marginRight?: PxValue
- m?: string
- margin?: string
- pt?: PxValue
- paddingTop?: PxValue
- pb?: PxValue
- paddingBottom?: PxValue
- pl?: PxValue
- paddingLeft?: PxValue
- pr?: PxValue
- paddingRight?: PxValue
- p?: string
- padding?: string
-}
-
-export interface StackProps extends BoxProps {
- justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
- alignItems?: 'center' | 'flex-start' | 'flex-end' | 'space-between'
- flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
-}
-
-export interface ButtonProps extends StackProps {
- color?: string
- isDisabled?: boolean
- isLoading?: boolean
- background?: string
- border?: string
- fontSize?: string
-}
-
-const cssRegex = /(px|vw|vh|%|auto)$/g
-
-const getElementValue = (value?: PxValue) => {
- if (!value) {
- return value
- }
-
- if (typeof value === 'number') {
- return value + 'px'
- }
-
- if (value.match(cssRegex)) {
- return value
- }
-
- return value + 'px'
-}
-
-export const Box = styled.div`
- width: ${(props) => (props.width || props.w ? getElementValue(props.width ?? props.w) : 'auto')};
- height: ${(props) => (props.height || props.h ? getElementValue(props.height || props.h) : 'auto')};
- color: ${(props) => props.color || 'default'};
- background: ${(props) => props.background || 'default'};
- flex: ${(props) => props.flex || 'none'};
- position: ${(props) => props.position || 'default'};
- left: ${(props) => getElementValue(props.left) || 'auto'};
- right: ${(props) => getElementValue(props.right) || 'auto'};
- bottom: ${(props) => getElementValue(props.bottom) || 'auto'};
- top: ${(props) => getElementValue(props.top) || 'auto'};
- gap: ${(p) => (p.gap ? getElementValue(p.gap) : 0)};
- opacity: ${(props) => props.opacity ?? 1};
- border-radius: ${(props) => getElementValue(props.borderRadius) || 0};
- box-sizing: border-box;
- border: ${(props) => props?.border || 'none'};
- gap: ${(p) => (p.gap ? getElementValue(p.gap) : 0)};
- margin: ${(props) => (props.m || props.margin ? (props.m ?? props.margin) : 'none')};
- margin-top: ${(props) => (props.mt || props.marginTop ? getElementValue(props.mt || props.marginTop) : 'default')};
- margin-bottom: ${(props) =>
- props.mb || props.marginBottom ? getElementValue(props.mb ?? props.marginBottom) : 'default'};
- margin-left: ${(props) => (props.ml || props.marginLeft ? getElementValue(props.ml ?? props.marginLeft) : 'default')};
- margin-right: ${(props) =>
- props.mr || props.marginRight ? getElementValue(props.mr ?? props.marginRight) : 'default'};
- padding: ${(props) => (props.p || props.padding ? (props.p ?? props.padding) : 'none')};
- padding-top: ${(props) => (props.pt || props.paddingTop ? getElementValue(props.pt ?? props.paddingTop) : 'auto')};
- padding-bottom: ${(props) =>
- props.pb || props.paddingBottom ? getElementValue(props.pb ?? props.paddingBottom) : 'auto'};
- padding-left: ${(props) => (props.pl || props.paddingLeft ? getElementValue(props.pl ?? props.paddingLeft) : 'auto')};
- padding-right: ${(props) =>
- props.pr || props.paddingRight ? getElementValue(props.pr ?? props.paddingRight) : 'auto'};
-`
-
-export const Stack = styled(Box)`
- display: flex;
- justify-content: ${(props) => props.justifyContent ?? 'flex-start'};
- align-items: ${(props) => props.alignItems ?? 'flex-start'};
- flex-direction: ${(props) => props.flexDirection ?? 'row'};
-`
-
-export const Center = styled(Stack)`
- justify-content: center;
- align-items: center;
-`
-
-export const HStack = styled(Stack)`
- flex-direction: row;
-`
-
-export const HSpaceBetweenStack = styled(HStack)`
- justify-content: space-between;
-`
-
-export const VStack = styled(Stack)`
- flex-direction: column;
-`
-
-export const BaseTypography = styled(Box)<{
- fontSize?: number
- lineHeight?: string
- fontWeigth?: number | string
- color?: string
- textAlign?: string
-}>`
- font-size: ${(props) => (props.fontSize ? getElementValue(props.fontSize) : '16px')};
- line-height: ${(props) => (props.lineHeight ? getElementValue(props.lineHeight) : 'normal')};
- font-weight: ${(props) => props.fontWeigth || 'normal'};
- color: ${(props) => props.color || '#fff'};
- text-align: ${(props) => props.textAlign || 'left'};
-`
-
-export const Container = styled.main`
- display: flex;
- flex-direction: column;
- width: 100%;
- box-sizing: border-box;
- flex: 1;
- padding: ${(p) => p.padding ?? '0 18px'};
-`
diff --git a/src/renderer/src/components/NutstorePathSelector.tsx b/src/renderer/src/components/NutstorePathSelector.tsx
index 6393bad4c1..531dc086bf 100644
--- a/src/renderer/src/components/NutstorePathSelector.tsx
+++ b/src/renderer/src/components/NutstorePathSelector.tsx
@@ -1,3 +1,4 @@
+import { RowFlex } from '@cherrystudio/ui'
import { loggerService } from '@logger'
import { FolderIcon as NutstoreFolderIcon } from '@renderer/components/Icons/NutstoreIcons'
import { Button, Input } from 'antd'
@@ -5,8 +6,6 @@ import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
-import { HStack } from './Layout'
-
interface NewFolderProps {
onConfirm: (name: string) => void
onCancel: () => void
@@ -215,7 +214,7 @@ export function NutstorePathSelector(props: Props) {
)
}
-const FooterContainer = styled(HStack)`
+const FooterContainer = styled(RowFlex)`
background: transparent;
margin-top: 12px;
padding: 0;
@@ -233,21 +232,21 @@ interface FooterProps {
export function NustorePathSelectorFooter(props: FooterProps) {
const { t } = useTranslation()
return (
-
-
+
+
-
-
+
+
-
+
)
}
diff --git a/src/renderer/src/components/Popups/AddAssistantPopup.tsx b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
index e891b87818..0d39ff4197 100644
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@@ -1,3 +1,4 @@
+import { RowFlex } from '@cherrystudio/ui'
import { TopView } from '@renderer/components/TopView'
import { useAgents } from '@renderer/hooks/useAgents'
import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
@@ -16,7 +17,6 @@ import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import EmojiIcon from '../EmojiIcon'
-import { HStack } from '../Layout'
import Scrollbar from '../Scrollbar'
interface Props {
@@ -174,7 +174,7 @@ const PopupContainer: React.FC = ({ resolve }) => {
}}
closeIcon={null}
footer={null}>
-
+
@@ -191,7 +191,7 @@ const PopupContainer: React.FC = ({ resolve }) => {
variant="borderless"
size="middle"
/>
-
+
{take(agents, 100).map((agent, index) => (
@@ -200,10 +200,10 @@ const PopupContainer: React.FC = ({ resolve }) => {
onClick={() => onCreateAssistant(agent)}
className={`agent-item ${agent.id === 'default' ? 'default' : ''} ${index === selectedIndex ? 'keyboard-selected' : ''}`}
onMouseEnter={() => setSelectedIndex(index)}>
-
+
{agent.name}
-
+
{agent.id === 'default' && {t('agents.tag.system')}}
{agent.type === 'agent' && {t('agents.tag.agent')}}
{agent.id === 'new' && {t('agents.tag.new')}}
diff --git a/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx b/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
index 3ddcc383cd..e85d8093e5 100644
--- a/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
+++ b/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
@@ -1,10 +1,11 @@
+import { Flex } from '@cherrystudio/ui'
import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
import { EditIcon } from '@renderer/components/Icons'
import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
import { maskApiKey } from '@renderer/utils/api'
import type { InputRef } from 'antd'
-import { Button, Flex, Input, List, Popconfirm, Tooltip, Typography } from 'antd'
+import { Button, Input, List, Popconfirm, Tooltip, Typography } from 'antd'
import { Check, Minus, X } from 'lucide-react'
import type { FC } from 'react'
import { memo, useEffect, useRef, useState } from 'react'
@@ -104,7 +105,7 @@ const ApiKeyItem: FC = ({
spellCheck={false}
disabled={disabled}
/>
-
+
-
+
-
+
{showHealthCheck && (