补齐共享 UI 组件库与展示页交互 (#202)

## 变更内容

- 新增基于 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>

packages/shared/src/components/platformActionButtonModel.ts

@@ -0,0 +1,134 @@
+export type PlatformActionButtonTone =
+  | 'primary'
+  | 'secondary'
+  | 'ghost'
+  | 'danger'
+  | 'success'
+  | 'warning'
+  | 'accent'
+  | 'accentSoft';
+export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
+export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export type PlatformActionButtonShape = 'default' | 'pill';
+export type PlatformActionButtonAlign = 'center' | 'start';
+
+const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-button platform-button--primary',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-button platform-button--primary',
+  warning: 'platform-button platform-button--secondary',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary: 'platform-primary-button',
+  secondary: 'platform-button platform-button--secondary',
+  ghost: 'platform-button platform-button--ghost',
+  danger: 'platform-button platform-button--danger',
+  success: 'platform-primary-button',
+  warning: 'platform-button platform-button--secondary',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,var(--platform-panel-fill)_90%)] [color:var(--platform-action-accent,#c7653d)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
+  PlatformActionButtonTone,
+  string
+> = {
+  primary:
+    'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300',
+  secondary:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white',
+  ghost:
+    'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white',
+  danger:
+    'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15',
+  success:
+    'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
+  warning:
+    'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
+  accent:
+    'platform-action-button platform-action-button--accent border border-amber-200/70 bg-amber-200 text-slate-950 hover:bg-amber-100',
+  accentSoft:
+    'platform-action-button platform-action-button--accent-soft [border-color:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_24%,transparent)] [background:color-mix(in_srgb,var(--platform-action-accent,#c7653d)_10%,rgba(0,0,0,0.72)_90%)] [color:var(--platform-action-accent,#f5c36a)] [box-shadow:0_0.55rem_1.2rem_color-mix(in_srgb,var(--platform-action-accent,#f5c36a)_10%,transparent)]',
+};
+
+const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
+  PlatformActionButtonSize,
+  string
+> = {
+  xxs: 'px-3 py-1 text-[10px]',
+  xs: 'px-4 py-2 text-xs',
+  sm: 'px-4 py-2.5 text-sm',
+  md: 'px-4 py-3 text-sm',
+  lg: 'h-12 px-4 text-base',
+};
+
+const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record<
+  PlatformActionButtonShape,
+  string
+> = {
+  default: 'rounded-2xl',
+  pill: 'rounded-full',
+};
+
+const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record<
+  PlatformActionButtonAlign,
+  string
+> = {
+  center: 'justify-center',
+  start: 'justify-start text-left',
+};
+
+function getPlatformActionButtonToneClass(
+  surface: PlatformActionButtonSurface,
+  tone: PlatformActionButtonTone,
+) {
+  if (surface === 'editorDark') {
+    return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone];
+  }
+
+  return surface === 'profile'
+    ? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone]
+    : PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone];
+}
+
+export function getPlatformActionButtonClassName({
+  surface = 'platform',
+  tone = 'primary',
+  size = 'sm',
+  shape = 'default',
+  align = 'center',
+  fullWidth = false,
+}: {
+  surface?: PlatformActionButtonSurface;
+  tone?: PlatformActionButtonTone;
+  size?: PlatformActionButtonSize;
+  shape?: PlatformActionButtonShape;
+  align?: PlatformActionButtonAlign;
+  fullWidth?: boolean;
+}) {
+  return [
+    getPlatformActionButtonToneClass(surface, tone),
+    PLATFORM_ACTION_BUTTON_SIZE_CLASS[size],
+    PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape],
+    PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align],
+    fullWidth ? 'w-full' : null,
+    'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}