From 6abe5ab8c3ab86a0378a2c0b3b4f0e169ae9886b Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Mon, 17 Nov 2025 11:06:21 +0800 Subject: [PATCH] Remove deprecated icon components and their associated stories - Deleted the FilePngIcon and FileSvgIcon components from the icons directory due to low usage. - Removed the ToolsCallingIcon component and its related stories, as it did not meet the UI library extraction criteria. - Updated the index.ts file to reflect these removals and cleaned up the export list accordingly. - Ensured that all related story files for the removed icons were also deleted to maintain a clean codebase. --- .../src/components/icons/FileIcons/index.tsx | 86 ---- .../ui/src/components/icons/Icon/index.tsx | 53 --- .../icons/SvgSpinners180Ring/index.tsx | 37 -- .../icons/ToolsCallingIcon/index.tsx | 32 -- packages/ui/src/components/index.ts | 18 - .../components/icons/FileIcons.stories.tsx | 270 ------------- .../icons/SvgSpinners180Ring.stories.tsx | 339 ---------------- .../icons/ToolsCallingIcon.stories.tsx | 374 ------------------ 8 files changed, 1209 deletions(-) delete mode 100644 packages/ui/src/components/icons/FileIcons/index.tsx delete mode 100644 packages/ui/src/components/icons/Icon/index.tsx delete mode 100644 packages/ui/src/components/icons/SvgSpinners180Ring/index.tsx delete mode 100644 packages/ui/src/components/icons/ToolsCallingIcon/index.tsx delete mode 100644 packages/ui/stories/components/icons/FileIcons.stories.tsx delete mode 100644 packages/ui/stories/components/icons/SvgSpinners180Ring.stories.tsx delete mode 100644 packages/ui/stories/components/icons/ToolsCallingIcon.stories.tsx diff --git a/packages/ui/src/components/icons/FileIcons/index.tsx b/packages/ui/src/components/icons/FileIcons/index.tsx deleted file mode 100644 index 1c0a924254..0000000000 --- a/packages/ui/src/components/icons/FileIcons/index.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// Original path: src/renderer/src/components/Icons/FileIcons.tsx -import type { CSSProperties, SVGProps } from 'react' - -interface BaseFileIconProps extends SVGProps { - size?: string | number - text?: string -} - -const textStyle: CSSProperties = { - fontStyle: 'italic', - fontSize: '7.70985px', - lineHeight: 0.8, - fontFamily: "'Times New Roman'", - textAlign: 'center', - writingMode: 'horizontal-tb', - direction: 'ltr', - textAnchor: 'middle', - fill: 'none', - stroke: '#000000', - strokeWidth: '0.289119', - strokeLinejoin: 'round', - strokeDasharray: 'none' -} - -const tspanStyle: CSSProperties = { - fontStyle: 'normal', - fontVariant: 'normal', - fontWeight: 'normal', - fontStretch: 'condensed', - fontSize: '7.70985px', - lineHeight: 0.8, - fontFamily: 'Arial', - fill: '#000000', - fillOpacity: 1, - strokeWidth: '0.289119', - strokeDasharray: 'none' -} - -const BaseFileIcon = ({ size = '1.1em', text = 'SVG', ...props }: BaseFileIconProps) => ( - - - - - - - {text} - - - -) - -/** - * @deprecated 此图标使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次） - * 计划在未来版本中移除。 - * - * This icon has only 1 usage and does not meet the UI library extraction criteria (requires ≥3 usages). - * Planned for removal in future versions. - */ -export const FileSvgIcon = (props: Omit) => - -/** - * @deprecated 此图标使用频率仅为 2 次，不符合 UI 库提取标准（需 ≥3 次） - * 计划在未来版本中移除。 - * - * This icon has only 2 usages and does not meet the UI library extraction criteria (requires ≥3 usages). - * Planned for removal in future versions. - */ -export const FilePngIcon = (props: Omit) => diff --git a/packages/ui/src/components/icons/Icon/index.tsx b/packages/ui/src/components/icons/Icon/index.tsx deleted file mode 100644 index bace2666a6..0000000000 --- a/packages/ui/src/components/icons/Icon/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import type { LucideIcon } from 'lucide-react' -import { - AlignLeft, - Copy, - Eye, - Pencil, - RefreshCw, - RotateCcw, - ScanLine, - Search, - Trash, - WrapText, - Wrench -} from 'lucide-react' -import React from 'react' - -// 创建一个 Icon 工厂函数 -export function createIcon(IconComponent: LucideIcon, defaultSize: string | number = '1rem') { - const Icon = ({ - ref, - ...props - }: React.ComponentProps & { ref?: React.RefObject }) => ( - - ) - Icon.displayName = `Icon(${IconComponent.displayName || IconComponent.name})` - return Icon -} - -// 预定义的常用图标（向后兼容，只导入需要的图标） -export const CopyIcon = createIcon(Copy) -export const DeleteIcon = createIcon(Trash) -export const EditIcon = createIcon(Pencil) -export const RefreshIcon = createIcon(RefreshCw) -export const ResetIcon = createIcon(RotateCcw) - -/** - * @deprecated 此组件使用频率为 0 次，不符合 UI 库提取标准（需 ≥3 次） - * 计划在未来版本中移除。虽然主项目中有本地副本，但完全未被导入使用。 - * - * This icon has 0 usages and does not meet the UI library extraction criteria (requires ≥3 usages). - * Planned for removal in future versions. - */ -export const ToolIcon = createIcon(Wrench) - -export const VisionIcon = createIcon(Eye) -export const WebSearchIcon = createIcon(Search) -export const WrapIcon = createIcon(WrapText) -export const UnWrapIcon = createIcon(AlignLeft) -export const OcrIcon = createIcon(ScanLine) - -// 导出 createIcon 以便用户自行创建图标组件 -export type { LucideIcon } -export type { LucideProps } from 'lucide-react' diff --git a/packages/ui/src/components/icons/SvgSpinners180Ring/index.tsx b/packages/ui/src/components/icons/SvgSpinners180Ring/index.tsx deleted file mode 100644 index fcdcec348f..0000000000 --- a/packages/ui/src/components/icons/SvgSpinners180Ring/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @deprecated 此组件使用频率为 0 次，不符合 UI 库提取标准（需 ≥3 次） - * 计划在未来版本中移除。虽然主项目中有本地副本，但完全未被导入使用。 - * - * This component has 0 usages and does not meet the UI library extraction criteria (requires ≥3 usages). - * Planned for removal in future versions. - */ - -// Original path: src/renderer/src/components/Icons/SvgSpinners180Ring.tsx -import type { SVGProps } from 'react' - -import { cn } from '../../../utils' - -interface SvgSpinners180RingProps extends SVGProps { - size?: number | string -} - -export function SvgSpinners180Ring(props: SvgSpinners180RingProps) { - const { size = '1em', className, ...svgProps } = props - - return ( - - {/* Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE */} - - - ) -} - -export default SvgSpinners180Ring diff --git a/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx b/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx deleted file mode 100644 index c3180ea76d..0000000000 --- a/packages/ui/src/components/icons/ToolsCallingIcon/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @deprecated 此组件使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次） - * 计划在未来版本中移除。建议直接使用 lucide-react 的 Wrench 图标。 - * - * This component has only 1 usage and does not meet the UI library extraction criteria (requires ≥3 usages). - * Planned for removal in future versions. Consider using Wrench icon from lucide-react directly. - */ - -// Original: src/renderer/src/components/Icons/ToolsCallingIcon.tsx -import { Tooltip, type TooltipProps } from '@heroui/react' -import { Wrench } from 'lucide-react' -import React from 'react' - -import { cn } from '../../../utils' - -interface ToolsCallingIconProps extends React.HTMLAttributes { - className?: string - iconClassName?: string - TooltipProps?: TooltipProps -} - -const ToolsCallingIcon = ({ className, iconClassName, TooltipProps, ...props }: ToolsCallingIconProps) => { - return ( -
- - - -
- ) -} - -export default ToolsCallingIcon diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index ae7ff6de33..922a4fb61c 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -22,24 +22,6 @@ export { default as Scrollbar } from './composites/Scrollbar' export { default as ThinkingEffect } from './composites/ThinkingEffect' // Icon Components -export { FilePngIcon, FileSvgIcon } from './icons/FileIcons' -// export type { LucideIcon, LucideProps } from './icons/Icon' -// export { -// CopyIcon, -// createIcon, -// DeleteIcon, -// EditIcon, -// OcrIcon, -// RefreshIcon, -// ResetIcon, -// ToolIcon, -// UnWrapIcon, -// VisionIcon, -// WebSearchIcon, -// WrapIcon -// } from './icons/Icon' -export { default as SvgSpinners180Ring } from './icons/SvgSpinners180Ring' -export { default as ToolsCallingIcon } from './icons/ToolsCallingIcon' // Brand Logo Icons (彩色品牌 Logo 图标 - 84个) // 推荐使用 '@cherrystudio/ui/icons' 路径导入 diff --git a/packages/ui/stories/components/icons/FileIcons.stories.tsx b/packages/ui/stories/components/icons/FileIcons.stories.tsx deleted file mode 100644 index e638448049..0000000000 --- a/packages/ui/stories/components/icons/FileIcons.stories.tsx +++ /dev/null @@ -1,270 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import { FilePngIcon, FileSvgIcon } from '../../../src/components/icons/FileIcons' - -// Create a dummy component for the story -const FileIconsShowcase = () =>
- -const meta: Meta = { - title: 'Components/Icons/FileIcons', - component: FileIconsShowcase, - parameters: { - layout: 'centered' - }, - tags: ['autodocs'], - argTypes: { - size: { - description: '图标大小', - control: { type: 'text' }, - defaultValue: '1.1em' - } - } -} - -export default meta -type Story = StoryObj - -// Basic File Icons -export const BasicFileIcons: Story = { - render: () => ( -
-
-

文件类型图标 (默认尺寸: 1.1em)

-
-
- - SVG 文件 -
-
- - PNG 文件 -
-
-
-
- ) -} - -// Different Sizes -export const DifferentSizes: Story = { - render: () => ( -
-
-

不同尺寸的 SVG 图标

-
-
- - 16px -
-
- - 24px -
-
- - 32px -
-
- - 48px -
-
- - 64px -
-
-
- -
-

不同尺寸的 PNG 图标

-
-
- - 16px -
-
- - 24px -
-
- - 32px -
-
- - 48px -
-
- - 64px -
-
-
-
- ) -} - -// Custom Colors -export const CustomColors: Story = { - render: () => ( -
-
-

自定义颜色 - SVG 图标

-
-
- - 蓝色 -
-
- - 绿色 -
-
- - 橙色 -
-
- - 红色 -
-
- - 紫色 -
-
-
- -
-

自定义颜色 - PNG 图标

-
-
- - 蓝色 -
-
- - 绿色 -
-
- - 橙色 -
-
- - 红色 -
-
- - 紫色 -
-
-
-
- ) -} - -// In File List Context -export const InFileListContext: Story = { - render: () => ( -
-

文件列表中的使用示例

- -
-
-
- - illustration.svg - 45 KB -
- -
- - screenshot.png - 1.2 MB -
- -
- - logo.svg - 12 KB -
- -
- - background.png - 2.8 MB -
-
-
-
- ) -} - -// File Type Grid -export const FileTypeGrid: Story = { - render: () => ( -
-

文件类型网格展示

- -
-
- - SVG - 矢量图形 -
- -
- - PNG - 位图图像 -
- -
- - SVG - 已处理 -
- -
- - PNG - 错误状态 -
-
-
- ) -} - -// Interactive Example -export const InteractiveExample: Story = { - render: () => { - const fileTypes = [ - { icon: FileSvgIcon, name: 'Vector Graphics', ext: 'SVG', color: '#3B82F6' }, - { icon: FilePngIcon, name: 'Raster Image', ext: 'PNG', color: '#10B981' } - ] - - return ( -
-

交互式文件类型选择器

- -
- {fileTypes.map((fileType, index) => { - const IconComponent = fileType.icon - return ( - - ) - })} -
-
- ) - } -} diff --git a/packages/ui/stories/components/icons/SvgSpinners180Ring.stories.tsx b/packages/ui/stories/components/icons/SvgSpinners180Ring.stories.tsx deleted file mode 100644 index 8a13af9297..0000000000 --- a/packages/ui/stories/components/icons/SvgSpinners180Ring.stories.tsx +++ /dev/null @@ -1,339 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import SvgSpinners180Ring from '../../../src/components/icons/SvgSpinners180Ring' - -const meta: Meta = { - title: 'Components/Icons/SvgSpinners180Ring', - component: SvgSpinners180Ring, - parameters: { - layout: 'centered', - docs: { - description: { - component: - '⚠️ **已废弃** - 此组件使用频率为 0 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。虽然主项目中有本地副本，但完全未被导入使用。' - } - } - }, - tags: ['autodocs', 'deprecated'], - argTypes: { - size: { - description: '加载图标大小', - control: { type: 'text' }, - defaultValue: '1em' - }, - className: { - description: '自定义 CSS 类名', - control: { type: 'text' } - } - } -} - -export default meta -type Story = StoryObj - -// Basic Spinner -export const BasicSpinner: Story = { - render: () => ( -
-
-

基础加载动画

-
- - 默认尺寸 (1em) -
-
-
- ) -} - -// Different Sizes -export const DifferentSizes: Story = { - render: () => ( -
-
-

不同尺寸的加载动画

-
-
- - 12px -
-
- - 16px -
-
- - 20px -
-
- - 24px -
-
- - 32px -
-
- - 48px -
-
-
-
- ) -} - -// Different Colors -export const DifferentColors: Story = { - render: () => ( -
-
-

不同颜色的加载动画

-
-
- - 蓝色 -
-
- - 绿色 -
-
- - 橙色 -
-
- - 红色 -
-
- - 紫色 -
-
- - 灰色 -
-
-
-
- ) -} - -// Loading States in Buttons -export const LoadingStatesInButtons: Story = { - render: () => ( -
-
-

按钮中的加载状态

-
- - - - - - - -
-
-
- ) -} - -// Loading Cards -export const LoadingCards: Story = { - render: () => ( -
-
-

加载状态卡片

-
-
-
- -
-

AI 模型响应中

-

正在生成回复...

-
-
-
- -
-
- -
-

文件上传中

-

75% 完成

-
-
-
- -
-
- -
-

数据同步中

-

请稍候...

-
-
-
- -
-
- -
-

模型训练中

-

预计2分钟

-
-
-
-
-
-
- ) -} - -// Inline Loading States -export const InlineLoadingStates: Story = { - render: () => ( -
-
-

行内加载状态

-
-
- - 正在检查网络连接... -
- -
- - 正在保存更改... -
- -
- - 正在验证凭据... -
- -
-
- - 系统正在处理您的请求，请稍候... -
-
-
-
-
- ) -} - -// Loading States with Different Speeds -export const LoadingStatesWithDifferentSpeeds: Story = { - render: () => ( -
-
-

不同速度的加载动画

-
-
- - 慢速 (2s) -
-
- - 默认速度 -
-
- - 快速 (0.5s) -
-
-
-
- ) -} - -// Full Page Loading -export const FullPageLoading: Story = { - render: () => ( -
-
-

全屏加载示例

-
-
- -

页面加载中，请稍候...

-
- - {/* 模拟页面内容 */} -
-
-
-
-
-
-
-
-
-
-
- ) -} - -// Interactive Loading Demo -export const InteractiveLoadingDemo: Story = { - render: () => { - const loadingStates = [ - { text: '发送消息', color: 'text-blue-500', bgColor: 'bg-blue-500' }, - { text: '上传文件', color: 'text-green-500', bgColor: 'bg-green-500' }, - { text: '生成内容', color: 'text-purple-500', bgColor: 'bg-purple-500' }, - { text: '搜索结果', color: 'text-orange-500', bgColor: 'bg-orange-500' } - ] - - return ( -
-

交互式加载演示

- -
- {loadingStates.map((state, index) => ( - - ))} -
- -

点击按钮查看加载状态的交互效果

-
- ) - } -} diff --git a/packages/ui/stories/components/icons/ToolsCallingIcon.stories.tsx b/packages/ui/stories/components/icons/ToolsCallingIcon.stories.tsx deleted file mode 100644 index 55536e90ba..0000000000 --- a/packages/ui/stories/components/icons/ToolsCallingIcon.stories.tsx +++ /dev/null @@ -1,374 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react' - -import ToolsCallingIcon from '../../../src/components/icons/ToolsCallingIcon' - -const meta: Meta = { - title: 'Components/Icons/ToolsCallingIcon', - component: ToolsCallingIcon, - parameters: { - layout: 'centered', - docs: { - description: { - component: - '⚠️ **已废弃** - 此组件使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。建议直接使用 lucide-react 的 Wrench 图标。' - } - } - }, - tags: ['autodocs', 'deprecated'], - argTypes: { - className: { - description: '容器的自定义 CSS 类名', - control: { type: 'text' } - }, - iconClassName: { - description: '图标的自定义 CSS 类名', - control: { type: 'text' } - } - } -} - -export default meta -type Story = StoryObj - -// Basic Tools Calling Icon -export const BasicToolsCallingIcon: Story = { - render: () => ( -
-
-

基础工具调用图标

-
- -
-

悬停图标查看工具提示，显示"函数调用"文本

-
-
- ) -} - -// Different Sizes -export const DifferentSizes: Story = { - render: () => ( -
-
-

不同尺寸的工具调用图标

-
-
- - 小号 -
-
- - 默认 -
-
- - 中号 -
-
- - 大号 -
-
- - 特大号 -
-
-
-
- ) -} - -// Different Colors -export const DifferentColors: Story = { - render: () => ( -
-
-

不同颜色的工具调用图标

-
-
- - 默认绿色 -
-
- - 蓝色 -
-
- - 橙色 -
-
- - 红色 -
-
- - 紫色 -
-
- - 灰色 -
-
-
-
- ) -} - -// Model Features Context -export const ModelFeaturesContext: Story = { - render: () => ( -
-

在模型功能标识中的使用

- -
-
-
-

GPT-4 Turbo

- -
-

支持函数调用的先进模型，可以调用外部工具和API

-
- 函数调用 - 多模态 -
-
- -
-
-

Claude 3.5 Sonnet

- -
-

Anthropic的高性能模型，具备强大的工具使用能力

-
- 函数调用 - 推理 -
-
- -
-
-

Llama 3.1 8B

- {/* 不支持函数调用 */} -
-

Meta的开源模型，适用于基础对话任务

-
- 文本生成 -
-
-
-
- ) -} - -// Chat Message Context -export const ChatMessageContext: Story = { - render: () => ( -
-

在聊天消息中的使用

- -
-
-
- - 调用工具: weather_api -
-

正在获取北京的天气信息...

-
- -
-
- - 调用工具: search_web -
-

正在搜索最新的AI新闻...

-
- -
-
- - 调用工具: code_interpreter -
-

正在执行Python代码计算结果...

-
-
-
- ) -} - -// Tool Availability Indicator -export const ToolAvailabilityIndicator: Story = { - render: () => ( -
-

工具可用性指示器

- -
-
-

可用工具

-
- -
-
-
- - 天气查询 -
- 可用 -
- -
-
- - 网络搜索 -
- 可用 -
- -
-
- - 代码执行 -
- 不可用 -
- -
-
- - 图像生成 -
- 限制使用 -
-
-
-
- ) -} - -// Interactive Tool Selection -export const InteractiveToolSelection: Story = { - render: () => { - const tools = [ - { name: '天气查询', description: '获取实时天气信息', available: true }, - { name: '网络搜索', description: '搜索最新信息', available: true }, - { name: '代码执行', description: '运行Python代码', available: false }, - { name: '图像分析', description: '分析和描述图像', available: true }, - { name: '数据可视化', description: '创建图表和图形', available: false } - ] - - return ( -
-

交互式工具选择器

- -
- {tools.map((tool, index) => ( - - ))} -
-
- ) - } -} - -// Loading Tool Calls -export const LoadingToolCalls: Story = { - render: () => ( -
-

工具调用加载状态

- -
-
-
- - 正在调用工具... -
-
-

weather_api(city="北京")

-
- -
-
- - 工具调用完成 - ✓ -
-

已获取北京天气信息：晴天，温度 22°C

-
- -
-
- - 工具调用失败 - ✗ -
-

API密钥无效，请检查配置

-
-
-
- ) -} - -// Settings Panel -export const SettingsPanel: Story = { - render: () => ( -
-

设置面板中的使用

- -
-
- -

函数调用设置

-
- -
-
-
-
启用函数调用
-
允许AI模型调用外部工具
-
- -
- -
-
-
自动确认调用
-
自动执行安全的工具调用
-
- -
- -
-
-
显示调用详情
-
在聊天中显示工具调用过程
-
- -
-
-
-
- ) -}