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>
89 lines
2.0 KiB
TypeScript
89 lines
2.0 KiB
TypeScript
import type { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
|
|
export type PlatformNavigableListItemAlign = 'center' | 'start';
|
|
|
|
export type PlatformNavigableListItemProps = Omit<
|
|
ComponentPropsWithoutRef<'button'>,
|
|
'children' | 'type'
|
|
> & {
|
|
children: ReactNode;
|
|
leading?: ReactNode;
|
|
trailing?: ReactNode;
|
|
align?: PlatformNavigableListItemAlign;
|
|
leadingClassName?: string;
|
|
trailingClassName?: string;
|
|
bodyClassName?: string;
|
|
};
|
|
|
|
const ALIGN_CLASS: Record<PlatformNavigableListItemAlign, string> = {
|
|
center: 'items-center gap-3',
|
|
start: 'items-start gap-4',
|
|
};
|
|
|
|
/**
|
|
* 轻量可导航列表行骨架。
|
|
* 只统一 button 语义与 left-content/right-affordance 结构，不持有业务文案、badge 或封面规则。
|
|
*/
|
|
export function PlatformNavigableListItem({
|
|
children,
|
|
leading = null,
|
|
trailing = null,
|
|
align = 'center',
|
|
className,
|
|
leadingClassName,
|
|
trailingClassName,
|
|
bodyClassName,
|
|
...props
|
|
}: PlatformNavigableListItemProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={[
|
|
'platform-navigable-list-item flex w-full min-w-0 text-left',
|
|
ALIGN_CLASS[align],
|
|
className ?? null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
{...props}
|
|
>
|
|
{leading ? (
|
|
<div
|
|
className={[
|
|
'platform-navigable-list-item__leading shrink-0',
|
|
leadingClassName ?? null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{leading}
|
|
</div>
|
|
) : null}
|
|
|
|
<div
|
|
className={[
|
|
'platform-navigable-list-item__body min-w-0 flex-1',
|
|
bodyClassName ?? null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{trailing ? (
|
|
<div
|
|
className={[
|
|
'platform-navigable-list-item__trailing shrink-0',
|
|
trailingClassName ?? null,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{trailing}
|
|
</div>
|
|
) : null}
|
|
</button>
|
|
);
|
|
}
|