补齐共享 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>

src/components/shared-components/SharedComponentsShowcasePage.test.tsx

@@ -0,0 +1,99 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import SharedComponentsShowcasePage from './SharedComponentsShowcasePage';
+
+describe('SharedComponentsShowcasePage', () => {
+  test('shows visible feedback for interactive button examples', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    fireEvent.click(screen.getByRole('button', { name: '主要操作' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '主要操作已点击',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '创建示例' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '创建示例已点击',
+    );
+  });
+
+  test('keeps the loading example disabled and exposes stateful feedback', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    expect(
+      (screen.getByRole('button', { name: '加载中' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+
+    fireEvent.click(screen.getByRole('switch', { name: '已启用' }));
+    expect(screen.getByRole('switch', { name: '已停用' })).toBeTruthy();
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '开关已点击',
+    );
+  });
+
+  test('exposes the platform component catalog with local interactions', () => {
+    render(<SharedComponentsShowcasePage />);
+
+    fireEvent.click(screen.getByRole('tab', { name: '平台组件' }));
+
+    expect(
+      screen.getByRole('heading', { name: '导航 / 筛选工具栏' }),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole('heading', { name: '媒体 / 上传入口' }),
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();
+
+    const recentOrder = screen
+      .getAllByRole('button', { name: /^选择/ })
+      .map((button) => button.getAttribute('aria-label'));
+    const previewImageBeforeSort = screen
+      .getByAltText('珊瑚岛预览')
+      .getAttribute('src');
+    fireEvent.click(screen.getByRole('button', { name: '最近使用' }));
+    const nameOrder = screen
+      .getAllByRole('button', { name: /^选择/ })
+      .map((button) => button.getAttribute('aria-label'));
+    expect(nameOrder).not.toEqual(recentOrder);
+    expect(screen.getByText('当前筛选：全部 · 名称 · 4 个结果')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();
+    expect(screen.getByAltText('珊瑚岛预览').getAttribute('src')).toBe(
+      previewImageBeforeSort,
+    );
+
+    fireEvent.click(screen.getAllByRole('button', { name: '筛选 3' })[0]!);
+    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
+    const draftButtons = screen.getAllByRole('button', { name: '草稿' });
+    fireEvent.click(draftButtons[draftButtons.length - 1]!);
+    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '完成' }));
+    expect(screen.queryByRole('dialog', { name: '筛选示例' })).toBeNull();
+    expect(
+      screen.getAllByRole('button', { name: '草稿 2' }).length,
+    ).toBeGreaterThan(0);
+    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '选择月光林' })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '名称' }));
+    expect(screen.getByRole('button', { name: '最近使用' })).toBeTruthy();
+    expect(
+      screen.getByText('当前筛选：草稿 · 最近使用 · 2 个结果'),
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: '空态' }));
+    expect(screen.getByText('暂无可展示内容')).toBeTruthy();
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '异步状态：empty已点击',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '上传素材 PNG / JPG' }));
+    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
+      '上传素材已点击',
+    );
+  });
+});

src/components/shared-components/sharedComponentsShowcase.css

@@ -0,0 +1,244 @@
+.shared-components-showcase {
+  min-height: 100vh;
+  overflow-y: auto;
+  background: var(--platform-body-fill, #f8efe7);
+  color: var(--platform-text-strong, #3d1f10);
+}
+
+.shared-components-showcase__inner {
+  width: min(1180px, 100%);
+  margin: 0 auto;
+  padding: clamp(1.25rem, 3vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem;
+}
+
+.shared-components-showcase__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.shared-components-showcase__header h1 {
+  margin: 0.7rem 0 0;
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  letter-spacing: -0.03em;
+}
+
+.shared-components-showcase__header p {
+  margin: 0.5rem 0 0;
+  color: var(--platform-text-soft, #988476);
+  font-size: 0.9rem;
+}
+
+.shared-components-showcase__feedback {
+  margin: -0.5rem 0 1rem;
+}
+
+.shared-components-showcase__tabs {
+  width: min(100%, 28rem);
+  margin-bottom: 1.25rem;
+}
+
+.shared-components-showcase__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.shared-components-showcase__platform-grid {
+  display: grid;
+  align-items: start;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.showcase-platform-mobile-toolbar {
+  display: none;
+}
+
+.showcase-platform-desktop-toolbar {
+  display: block;
+}
+
+.showcase-platform-media-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+  gap: 0.75rem;
+}
+
+.showcase-platform-media-row > * {
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.showcase-platform-media-row > .platform-media-frame {
+  min-height: 7rem;
+}
+
+.showcase-platform-upload-preview-shell {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: 7rem;
+}
+
+.showcase-filter-options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
+}
+
+.showcase-platform-toast-stack {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.showcase-platform-info-list {
+  display: grid;
+  gap: 0.625rem;
+  margin-top: 0.75rem;
+}
+
+.showcase-platform-list-subtitle {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--platform-text-soft);
+  font-size: 0.75rem;
+}
+
+.shared-components-showcase__section {
+  min-width: 0;
+}
+
+.showcase-row {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.showcase-row--wrap {
+  flex-wrap: wrap;
+}
+
+.showcase-row--between {
+  justify-content: space-between;
+}
+
+.showcase-stack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.showcase-copy {
+  margin: 0 0 0.875rem;
+  color: var(--platform-text-base, #6f5848);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.shared-components-showcase__token-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.showcase-token-value {
+  width: 100%;
+  height: 2.75rem;
+  margin-bottom: 0.625rem;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 0.625rem;
+}
+
+.showcase-token-value + code {
+  display: block;
+  overflow: hidden;
+  color: var(--platform-text-soft);
+  font-size: 0.7rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.showcase-state-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.showcase-state-list > span {
+  display: grid;
+  justify-items: center;
+  gap: 0.4rem;
+  color: var(--platform-text-base);
+  font-size: 0.75rem;
+}
+
+.showcase-dot {
+  display: block;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--platform-subpanel-border);
+  border-radius: 0.625rem;
+  background: var(--platform-panel-fill);
+}
+
+.showcase-dot--hover {
+  border-color: var(--platform-surface-hover-border);
+  background: var(--platform-warm-bg);
+}
+
+.showcase-dot--focus {
+  box-shadow: 0 0 0 3px var(--platform-input-focus-ring);
+}
+
+.showcase-dot--disabled {
+  opacity: 0.45;
+}
+
+@media (max-width: 760px) {
+  .shared-components-showcase__grid,
+  .shared-components-showcase__platform-grid,
+  .shared-components-showcase__token-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-platform-media-row {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .showcase-filter-options {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .shared-components-showcase__header {
+    flex-direction: column;
+  }
+
+  .shared-components-showcase__header > .genarrative-ui-icon-button {
+    align-self: flex-end;
+  }
+
+  .showcase-row {
+    flex-wrap: wrap;
+  }
+
+  .showcase-platform-media-row {
+    grid-template-columns: 1fr;
+  }
+
+  .showcase-platform-desktop-toolbar {
+    display: none;
+  }
+
+  .showcase-platform-mobile-toolbar {
+    display: block;
+  }
+}