kdletters
c5200c7d45
## 变更内容 - 新增基于 shadcn open-code 模式的共享 UI canonical 组件、样式与导出。 - 新增 `/components` 共享组件展示页，并覆盖平台组件、Token、状态和移动端布局。 - 补齐平台展示页的筛选、排序、上传预览、标签、开关和异步状态交互。 - 修复排序导致预览主题变化、筛选弹窗误关闭和入口状态不更新的问题。 - 同步网站与客户端构建别名、依赖、路由测试和项目文档。 ## 验证 - `npm run test -- src/components/shared-components/SharedComponentsShowcasePage.test.tsx` - `npm run typecheck` - `npm run check:encoding` - `npm run build:raw` - `git diff --check` - pre-push 门禁通过 Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/202 Co-authored-by: kdletters <kdletters@qq.com> Co-committed-by: kdletters <kdletters@qq.com>
91 lines
2.0 KiB
TypeScript
91 lines
2.0 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
|
|
|
export type PlatformProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
|
|
export type PlatformProgressBarProps = {
|
|
value: number;
|
|
minVisibleValue?: number;
|
|
size?: PlatformProgressBarSize;
|
|
ariaLabel?: string;
|
|
labelledBy?: string;
|
|
indeterminate?: boolean;
|
|
className?: string;
|
|
fillClassName?: string;
|
|
fillStyle?: CSSProperties;
|
|
trackStyle?: CSSProperties;
|
|
children?: ReactNode;
|
|
};
|
|
|
|
const PLATFORM_PROGRESS_BAR_SIZE_CLASS: Record<
|
|
PlatformProgressBarSize,
|
|
string
|
|
> = {
|
|
xs: 'h-2',
|
|
sm: 'h-2.5',
|
|
md: 'h-3',
|
|
lg: 'h-12',
|
|
};
|
|
|
|
function clampProgressValue(value: number) {
|
|
if (!Number.isFinite(value)) {
|
|
return 0;
|
|
}
|
|
|
|
return Math.min(100, Math.max(0, Math.round(value)));
|
|
}
|
|
|
|
/**
|
|
* 平台通用进度条。
|
|
* 统一承接 progressbar 语义、platform-progress-track 壳和填充宽度计算。
|
|
*/
|
|
export function PlatformProgressBar({
|
|
value,
|
|
minVisibleValue = 0,
|
|
size = 'xs',
|
|
ariaLabel,
|
|
labelledBy,
|
|
indeterminate = false,
|
|
className,
|
|
fillClassName,
|
|
fillStyle,
|
|
trackStyle,
|
|
children,
|
|
}: PlatformProgressBarProps) {
|
|
const progress = clampProgressValue(value);
|
|
const visibleProgress =
|
|
progress <= 0 ? 0 : Math.max(minVisibleValue, progress);
|
|
|
|
return (
|
|
<div
|
|
role="progressbar"
|
|
aria-valuemin={0}
|
|
aria-valuemax={100}
|
|
aria-valuenow={indeterminate ? undefined : progress}
|
|
aria-label={ariaLabel}
|
|
aria-labelledby={labelledBy}
|
|
className={[
|
|
'platform-progress-track relative overflow-hidden rounded-full',
|
|
PLATFORM_PROGRESS_BAR_SIZE_CLASS[size],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
style={trackStyle}
|
|
>
|
|
<div
|
|
className={[
|
|
'h-full rounded-full transition-[width] duration-300',
|
|
fillClassName,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
style={{
|
|
width: `${visibleProgress}%`,
|
|
...fillStyle,
|
|
}}
|
|
/>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|