= {
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 6f92477193..f4e50047de 100644
--- a/src/renderer/src/components/S3BackupManager.tsx
+++ b/src/renderer/src/components/S3BackupManager.tsx
@@ -232,14 +232,10 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
width: 160,
render: (_: any, record: BackupFile) => (
<>
-
-
-
- )
-
return (
+ footer={[
+ ,
+ ,
+
+ ]}>
= ({ text, onTranslated, disabled, style, isLoa
content={t('chat.input.translate', { target_language: getLanguageByLangcode(targetLanguage).label() })}
closeDelay={0}>
diff --git a/src/renderer/src/components/UpdateDialog.tsx b/src/renderer/src/components/UpdateDialog.tsx
index ee87265c0d..9cb9b5b62b 100644
--- a/src/renderer/src/components/UpdateDialog.tsx
+++ b/src/renderer/src/components/UpdateDialog.tsx
@@ -77,13 +77,13 @@ const UpdateDialog: React.FC = ({ isOpen, onClose, releaseInf
-
diff --git a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
index 06cfc4d476..83a54e1ee1 100644
--- a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
@@ -116,7 +116,7 @@ const SiyuanSettings: FC = () => {
placeholder={t('settings.data.siyuan.token_placeholder')}
style={{ width: '100%' }}
/>
-
+
diff --git a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
index 36f001a7c2..2fba0d6243 100644
--- a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
@@ -147,10 +147,12 @@ const WebDavSettings: FC = () => {
{t('settings.general.backup.title')}
- } isLoading={backuping}>
+
- } isDisabled={!webdavHost}>
+
diff --git a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
index a5764da431..7caa387067 100644
--- a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
@@ -108,7 +108,7 @@ const YuqueSettings: FC = () => {
placeholder={t('settings.data.yuque.token_placeholder')}
style={{ width: '100%' }}
/>
-
+
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 8985a43858..cabbcc7af9 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -260,29 +260,16 @@ const DisplaySettings: FC = () => {
{t('settings.zoom.title')}
-
@@ -313,14 +300,9 @@ const DisplaySettings: FC = () => {
showSearch
getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
/>
-
= ({ mini = false }) => {
const installed = isUvInstalled && isBunInstalled
return (
: }
- className="nodrag"
- color={installed ? 'success' : 'danger'}
- onPress={() => navigate('/settings/mcp/mcp-install')}
- isIconOnly
- />
+ className="nodrag rounded-full"
+ variant={installed ? 'default' : 'destructive'}
+ onClick={() => navigate('/settings/mcp/mcp-install')}
+ size="icon">
+ {installed ? : }
+
)
}
@@ -119,13 +117,7 @@ const InstallNpxUv: FC = ({ mini = false }) => {
{isUvInstalled ? 'UV Installed' : `UV ${t('settings.mcp.missingDependencies')}`}
{!isUvInstalled && (
-
{topicNamingPrompt && (
- } onPress={handleReset} variant="light" isIconOnly />
+
)}
{
placeholder={t('notes.settings.data.work_directory_placeholder')}
readOnly
/>
- }
- onPress={handleSelectWorkDirectory}
- isLoading={isSelecting}
- className="ml-2">
+
-
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
index 9ceb7f6df7..32df86ccc9 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
@@ -99,11 +99,7 @@ const AnthropicSettings = () => {
- {t('settings.provider.anthropic.logout')}
-
- }
+ action={}
showIcon
icon={}
/>
@@ -143,7 +139,7 @@ const AnthropicSettings = () => {
message={t('settings.provider.anthropic.description')}
description={t('settings.provider.anthropic.description_detail')}
action={
-
- }>
+
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
index 334a416bc4..aa2a41c7f6 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
@@ -173,7 +173,7 @@ const ModelTypeSelector: FC = ({
]}
/>
{hasUserModified && (
-
@@ -267,7 +268,7 @@ const GithubCopilotSettings: FC = ({ providerId }) =
{t('settings.provider.copilot.step_authorize_detail')}
-
{getLanguageDisplay()}
{
modelFilter={modelPredicate}
tooltipProps={{ placement: 'bottom' }}
/>
- }
- isIconOnly
- onPress={() => setSettingsVisible(true)}
- />
+
@@ -802,14 +798,13 @@ const TranslatePage: FC = () => {
: }
- isIconOnly
- />
+ onClick={onCopy}
+ disabled={!translatedContent}>
+ {copied ? : }
+
{!translatedContent ? (
@@ -1003,12 +998,14 @@ const TranslateButton = ({
}>
{!translating && (
- }>
+
)}
{translating && (
- }>
+
)}
diff --git a/src/renderer/src/pages/translate/TranslateSettings.tsx b/src/renderer/src/pages/translate/TranslateSettings.tsx
index a2a4a2179b..1fcb899a9d 100644
--- a/src/renderer/src/pages/translate/TranslateSettings.tsx
+++ b/src/renderer/src/pages/translate/TranslateSettings.tsx
@@ -195,7 +195,7 @@ const TranslateSettings: FC<{
)}
-
+
)
diff --git a/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx b/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
index 56ec5c679c..94d0d209f7 100644
--- a/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
+++ b/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
@@ -219,32 +219,26 @@ const MigrateApp: React.FC = () => {
case 'introduction':
return (
<>
-
+
-
+
)
case 'backup_required':
return (
<>
-
+
-
-
+
+
)
case 'backup_confirmed':
return (
-
+
-
+
)
@@ -252,26 +246,22 @@ const MigrateApp: React.FC = () => {
return (
-
+
)
case 'completed':
return (
-
+
)
case 'error':
return (
-
+
-
+
)
@@ -325,8 +315,8 @@ const MigrateApp: React.FC = () => {
@@ -136,9 +134,8 @@ const PreferenceBasicTests: React.FC = () => {
{selectedKey === 'ui.theme_mode' && (
)}
@@ -151,10 +148,10 @@ const PreferenceBasicTests: React.FC = () => {
{/* Language Switch */}
{selectedKey === 'app.language' && (
<>
-