Files
testing-tool/src/components
LingandRX c992986789 fix(CopyButton): 修复 review 反馈并补充测试 (#66)
* fix: remove non-functional animation classes from CopyButton
* test(CopyButton): 补充单元测试覆盖边界场景
* fix: unify CopyButton imports to named export across all consumers
* fix(CopyButton): add aria-label for screen reader accessibility
2026-06-05 21:15:48 +08:00
..
2026-05-28 22:15:56 +08:00

components/

通用业务组件目录,存放跨页面复用的 UI 组件,与具体工具页面解耦。

组件列表

组件 用途
TopBar.tsx 顶部导航栏,集成搜索(含历史记录)、主题切换、语言切换、返回导航
RouterContainer.tsx 路由容器,根据当前路由动态渲染对应页面组件,集成错误边界和骨架屏
SwitchButtonGroup.tsx 通用切换按钮组,支持 small/medium/large 三种尺寸,用于页面子模式切换
TextInputArea.tsx 增强文本输入区域,支持校验规则、工具栏操作、字符计数、清空
CopyButton.tsx 一键复制按钮,支持复制成功状态动画,封装 copyTextToClipboardtoast 反馈
ImageUploader.tsx 图片上传组件,支持拖拽上传、文件选择和预览
QrCodePreview.tsx 二维码预览组件,展示生成的二维码图片,提供复制和下载操作
DecodeResultPaper.tsx Base64 解码结果展示面板,显示 MIME 类型、文件大小、文件名输入和下载按钮
GlobalSnackbar.tsx 全局消息提示组件 + Context Provider,支持受控/Hook/全局单例三种使用方式
ErrorBoundary.tsx 全局错误边界(类组件),捕获子组件树 JS 错误并展示友好错误页面
PageErrorBoundary.tsx 页面级错误边界,适配 shadcn 暗黑模式,支持 resetKey 自动恢复
PageSkeleton.tsx 页面骨架屏,提供 dashboardtool 两种变体,用于 Suspense fallback

使用约定

  • 优先使用 components/ui/ 下的 shadcn/ui 基础组件
  • 组件使用 cn() 合并 Tailwind 类名,支持 className 透传
  • 需要 memo 优化的组件使用 React.memo + displayName
  • 需要 ref 转发的组件使用 React.forwardRef + displayName