= {
argTypes: {
variant: {
control: { type: 'select' },
- options: ['solid', 'bordered', 'light', 'flat', 'faded', 'shadow', 'ghost']
- },
- color: {
- control: { type: 'select' },
- options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger']
+ options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']
},
size: {
control: { type: 'select' },
- options: ['sm', 'md', 'lg']
+ options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg']
},
- radius: {
- control: { type: 'select' },
- options: ['none', 'sm', 'md', 'lg', 'full']
- },
- isDisabled: {
+ disabled: {
control: { type: 'boolean' }
},
- isLoading: {
- control: { type: 'boolean' }
- },
- fullWidth: {
- control: { type: 'boolean' }
- },
- isIconOnly: {
+ asChild: {
control: { type: 'boolean' }
}
}
@@ -55,27 +41,12 @@ export const Default: Story = {
export const Variants: Story = {
render: () => (
-
-
-
-
-
-
+
+
+
+
-
- )
-}
-
-// 不同颜色
-export const Colors: Story = {
- render: () => (
-
-
-
-
-
-
-
+
)
}
@@ -83,23 +54,21 @@ export const Colors: Story = {
// 不同尺寸
export const Sizes: Story = {
render: () => (
-
+
-
+
)
}
-// 不同圆角
-export const Radius: Story = {
+// 图标按钮
+export const IconButtons: Story = {
render: () => (
-
-
-
-
-
-
+
+
+
+
)
}
@@ -109,8 +78,7 @@ export const States: Story = {
render: () => (
-
-
+
)
}
@@ -119,9 +87,15 @@ export const States: Story = {
export const WithIcons: Story = {
render: () => (
-
-
-
+
+
+
)
}
@@ -130,9 +104,7 @@ export const WithIcons: Story = {
export const FullWidth: Story = {
render: () => (
-
+
)
}
@@ -141,10 +113,45 @@ export const FullWidth: Story = {
export const Interactive: Story = {
render: () => (
-
-
)
}
+
+// 组合示例
+export const Combinations: Story = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/packages/ui/stories/components/base/CopyButton.stories.tsx b/packages/ui/stories/components/base/CopyButton.stories.tsx
index fbe0b2faaf..db78b10c6a 100644
--- a/packages/ui/stories/components/base/CopyButton.stories.tsx
+++ b/packages/ui/stories/components/base/CopyButton.stories.tsx
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/react'
-import CopyButton from '../../../src/components/base/CopyButton'
+import CopyButton from '../../../src/components/primitives/copyButton'
const meta: Meta
= {
title: 'Base/CopyButton',
diff --git a/packages/ui/stories/components/base/CustomCollapse.stories.tsx b/packages/ui/stories/components/base/CustomCollapse.stories.tsx
deleted file mode 100644
index c05dbbfc54..0000000000
--- a/packages/ui/stories/components/base/CustomCollapse.stories.tsx
+++ /dev/null
@@ -1,459 +0,0 @@
-import { Button } from '@heroui/react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { AlertTriangle, CreditCard, Info, Monitor, Settings, Shield } from 'lucide-react'
-import { useState } from 'react'
-
-import CustomCollapse, { Accordion, AccordionItem } from '../../../src/components/base/CustomCollapse'
-
-const meta: Meta = {
- title: 'Base/CustomCollapse',
- component: CustomCollapse,
- parameters: {
- layout: 'padded'
- },
- tags: ['autodocs'],
- argTypes: {
- children: {
- control: false,
- description: '面板内容'
- },
- accordionProps: {
- control: false,
- description: 'Accordion 组件的属性'
- },
- accordionItemProps: {
- control: false,
- description: 'AccordionItem 组件的属性'
- }
- }
-}
-
-export default meta
-type Story = StoryObj
-
-// 基础用法
-export const Default: Story = {
- args: {
- accordionItemProps: {
- title: '默认折叠面板'
- },
- children: (
-
-
这是折叠面板的内容。
-
可以包含任何内容，包括文本、图片、表单等。
-
-
面板内容
-
可以在 subtitle 属性中设置副标题
-
-
这是 HeroUI 的 Light 变体样式。
-
-
这是 HeroUI 的 Shadow 变体样式。
-
-
这是 HeroUI 的 Bordered 变体样式。
-
-
这是 HeroUI 的 Splitted 变体样式。
-
-
- 设置面板
-
- )
- },
- children: (
-
-
-
- 通知设置
-
-
-
- 自动更新
-
-
-
-
-
- 连接的设备
-
- ),
- subtitle: (
-
- 2个问题需要立即修复
-
- )
- },
- children: (
-
-
检测到以下设备连接异常：
-
- - 外部显示器连接不稳定
- - 蓝牙键盘配对失败
-
-
-
-
-
-
-
{
- if (keys !== 'all') {
- setSelectedKeys(keys as Set)
- }
- }
- }}
- accordionItemProps={{
- title: '受控的折叠面板'
- }}>
-
-
这是一个受控的折叠面板
-
通过按钮控制展开和收起状态
-
-
当前状态：{selectedKeys.size > 0 ? '展开' : '收起'}
-
-
原生 HeroUI Accordion 多面板
-
- }
- subtitle={
-
- 2个问题需要立即修复
-
- }>
-
-
- }
- subtitle="3个应用有读取权限">
-
-
- }
- subtitle={请完善您的个人资料}>
-
-
-
- 卡片已过期
- *4812
-
- }
- startContent={}
- subtitle={请立即更新}>
-
-
-
-
-
-
- 详细信息
-
-
e.stopPropagation()}>
-
-
-
-
-
-
基本信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{
- if (keys !== 'all') {
- setActiveKeys(keys as Set)
- }
- }}>
-
-
-
-
-
-
-
-
-
-
-
- 当前展开的面板：{activeKeys.size > 0 ? Array.from(activeKeys).join(', ') : '无'}
-
-
-
-
-
-
-
- )
-}
-
-// Convenience Components
-export const ConvenienceComponents: Story = {
- render: () => (
-
-
-
-
-
-
- )
-}
-
-// Different Icon Sizes
-export const IconSizes: Story = {
- render: () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-// In Context
-export const InContext: Story = {
- render: () => (
-
-
-
Form Submission
-
Your form has been processed.
-
-
-
-
-
Validation Error
-
Please fix the following issues:
-
-
-
-
-
System Status
-
-
-
-
-
-
-
-
-
-
Success States
-
-
-
-
-
-
-
-
-
-
Error States
-
-
-
-
-
-
-
-
-
-
Warning States
-
-
-
-
-
-
-
-
-
-
Info States
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
diff --git a/packages/ui/stories/components/base/TextBadge.stories.tsx b/packages/ui/stories/components/base/TextBadge.stories.tsx
deleted file mode 100644
index a62120193d..0000000000
--- a/packages/ui/stories/components/base/TextBadge.stories.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import TextBadge from '../../../src/components/base/TextBadge'
-
-const meta: Meta = {
- title: 'Base/TextBadge',
- component: TextBadge,
- parameters: {
- layout: 'centered'
- },
- tags: ['autodocs'],
- argTypes: {
- text: {
- control: 'text',
- description: '徽章显示的文字'
- },
- style: {
- control: false,
- description: '自定义样式对象'
- }
- }
-}
-
-export default meta
-type Story = StoryObj
-
-export const Default: Story = {
- args: {
- text: '新'
- }
-}
-
-export const ShortText: Story = {
- args: {
- text: 'V2'
- }
-}
-
-export const LongText: Story = {
- args: {
- text: '热门推荐'
- }
-}
-
-export const Numbers: Story = {
- args: {
- text: '99+'
- }
-}
-
-export const Status: Story = {
- args: {
- text: '已完成'
- }
-}
-
-export const Version: Story = {
- args: {
- text: 'v1.2.0'
- }
-}
-
-export const CustomStyle: Story = {
- args: {
- text: '自定义',
- style: {
- backgroundColor: '#10b981',
- color: 'white',
- fontSize: '11px'
- }
- }
-}
-
-export const CustomClassName: Story = {
- args: {
- text: '特殊样式',
- className:
- 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 border border-purple-200 dark:border-purple-700'
- }
-}
-
-export const ColorVariations: Story = {
- render: () => (
-
- )
-}
-
-export const StatusBadges: Story = {
- render: () => (
-
- )
-}
-
-export const InUserInterface: Story = {
- render: () => (
-
-
界面应用示例
-
-
- {/* 导航菜单 */}
-
-
导航菜单
-
-
-
- {/* 卡片列表 */}
-
-
文章列表
-
-
-
-
-
React 18 新特性介绍
-
介绍 React 18 的并发特性...
-
-
-
-
-
-
-
-
-
-
-
-
Node.js 性能优化指南
-
深入了解 Node.js 性能优化...
-
-
-
-
-
-
-
-
-
-
-
-
TypeScript 最佳实践
-
TypeScript 开发的最佳实践...
-
-
-
-
-
-
-
-
-
-
- {/* 用户列表 */}
-
-
-
-
数字徽章
-
-
-
通知数量
-
-
- 消息
-
-
-
- 任务
-
-
-
- 评论
-
-
-
-
-
-
-
统计数据
-
-
- 访问量
-
-
-
- 下载
-
-
-
- 收藏
-
-
-
-
-
-
@@ -466,7 +466,7 @@ export const AgentModal: React.FC
= ({ agent, isOpen: _isOpen, onClose: _
/>
-
+
diff --git a/src/renderer/src/components/Popups/agent/SessionModal.tsx b/src/renderer/src/components/Popups/agent/SessionModal.tsx
index 368c943a1c..ae9aebebc7 100644
--- a/src/renderer/src/components/Popups/agent/SessionModal.tsx
+++ b/src/renderer/src/components/Popups/agent/SessionModal.tsx
@@ -305,7 +305,7 @@ export const SessionModal: React.FC = ({
-
+
diff --git a/src/renderer/src/components/Preview/ImageToolButton.tsx b/src/renderer/src/components/Preview/ImageToolButton.tsx
index f836d6ec35..18eafa82de 100644
--- a/src/renderer/src/components/Preview/ImageToolButton.tsx
+++ b/src/renderer/src/components/Preview/ImageToolButton.tsx
@@ -4,13 +4,15 @@ import { memo } from 'react'
interface ImageToolButtonProps {
tooltip: string
icon: React.ReactNode
- onPress: () => void
+ onClick: () => void
}
-const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => {
+const ImageToolButton = ({ tooltip, icon, onClick }: ImageToolButtonProps) => {
return (
-
+
)
}
diff --git a/src/renderer/src/components/Preview/ImageToolbar.tsx b/src/renderer/src/components/Preview/ImageToolbar.tsx
index ffd4dff153..11d9695c25 100644
--- a/src/renderer/src/components/Preview/ImageToolbar.tsx
+++ b/src/renderer/src/components/Preview/ImageToolbar.tsx
@@ -36,9 +36,9 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
}
- onPress={() => pan(0, -panDistance)}
+ onClick={() => pan(0, -panDistance)}
/>
- } onPress={dialog} />
+ } onClick={dialog} />
{/* Left, Reset, Right */}
@@ -46,13 +46,13 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
}
- onPress={() => pan(-panDistance, 0)}
+ onClick={() => pan(-panDistance, 0)}
/>
- } onPress={handleReset} />
+ } onClick={handleReset} />
}
- onPress={() => pan(panDistance, 0)}
+ onClick={() => pan(panDistance, 0)}
/>
@@ -61,17 +61,17 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
}
- onPress={() => zoom(-zoomDelta)}
+ onClick={() => zoom(-zoomDelta)}
/>
}
- onPress={() => pan(0, panDistance)}
+ onClick={() => pan(0, panDistance)}
/>
}
- onPress={() => zoom(zoomDelta)}
+ onClick={() => zoom(zoomDelta)}
/>
diff --git a/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx b/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
index 19e0c60c00..c4cd44d00c 100644
--- a/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
+++ b/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
@@ -30,7 +30,7 @@ describe('ImageToolButton', () => {
const defaultProps = {
tooltip: 'Test tooltip',
icon: Icon,
- onPress: vi.fn()
+ onClick: vi.fn()
}
it('should match snapshot', () => {
diff --git a/src/renderer/src/components/RichEditor/components/ImageUploader.tsx b/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
index 4ff13843dd..d85db79687 100644
--- a/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
+++ b/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
@@ -175,10 +175,10 @@ export const ImageUploader: React.FC = ({ onImageSelect, vis
prefix={}
style={{ flex: 1 }}
/>
-
diff --git a/src/renderer/src/components/S3BackupManager.tsx b/src/renderer/src/components/S3BackupManager.tsx
index 84b5db8946..f4e50047de 100644
--- a/src/renderer/src/components/S3BackupManager.tsx
+++ b/src/renderer/src/components/S3BackupManager.tsx
@@ -3,7 +3,7 @@ import { Button, Tooltip } from '@cherrystudio/ui'
import { restoreFromS3 } from '@renderer/services/BackupService'
import type { S3Config } from '@renderer/types'
import { formatFileSize } from '@renderer/utils'
-import { Modal, Table } from 'antd'
+import { Modal, Space, Table } from 'antd'
import dayjs from 'dayjs'
import { useCallback, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
@@ -232,14 +232,10 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
width: 160,
render: (_: any, record: BackupFile) => (
<>
-