08_归档04_VOZEB任务卡
VOZEB UI Migration M36 — 公开作品与社区内层
状态：LOCAL_IMPLEMENTATION_CANDIDATE / CANDIDATE_EVIDENCE / NOT_FORMAL_TEST
Task packet
Task ID: VOZEB-UI-MIGRATION-02-M36-PUBLIC-MEDIA-INNER
目标用户结果: 公开作品卡、作品预览/创作者弹层和个人社区记录在 Ocean Air / Liquid Glass 壳内保持统一、克制且窄屏可用
Feature / Atomic Requirement IDs: EXEC-P0-003；HOME-P0-001（仅承载公开作品与社区互动的既有视觉）
Base SHA: bb82022b1e4527f4dfd2ddb17964e7c0df4bac23
必须阅读: VOZEB-UI-FOUNDATION-01.md；VOZEB-UI-MIGRATION-02.md；现有作品广场、公开分享、创作者主页与个人社区契约测试
允许修改: 本任务包；web/src/components/works/public-work-gallery-card.tsx；web/src/components/works/public-work-media-browser.tsx；web/src/components/works/public-work-preview-modal.tsx；web/src/components/works/public-creator-modal.tsx；web/src/components/works/public-work-community-actions.tsx；web/src/components/works/public-work-surfaces.module.css；web/src/components/works/public-work-inner-layout.test.ts；web/src/app/(user)/me/community-activity-modal.tsx；web/src/app/(user)/me/me-profile-page.module.css
禁止修改: API/server/stores、Go、数据库、manifest、其它路由、背景/WebGL、媒体 URL/比例/限宽 WebP 逻辑、分页/互动/分享行为、retail-platform 与其它 worktree
范围: 作品媒体卡、媒体缩略图/主预览、作品详情/作者身份、关注/点赞控件、创作者弹层和个人社区活动列表的内层 surface、圆角、边框、阴影、滚动与降级样式
非目标: 不改变作品查询、媒体访问、点赞、关注、拉黑、分享、举报、分页、路由、权限、服务端状态或数据结构
已冻结契约与数据模型: 沿用现有 PublicGalleryItem、PublicWorkPublication、CommunityUser 与 API props；仅读取 Ocean Air / Liquid Glass CSS token
安全与数据限制: 不新增凭据、持久化、真实上游调用或生产写入；公开作品仍只显示服务端允许的图片/视频内容
验收命令: 定向 Vitest（本文件测试及既有 public work/gallery/creator/profile/share tests）；pnpm run typecheck；pnpm exec eslint；pnpm exec prettier --check；pnpm run build；git diff --check；桌面/390/430 浏览器检查无横向溢出并确认 reduced-transparency/forced-colors 回退
人工决策点: 正式 Testing、Operations、Gate 1 与生产发布另行授权
交付物: 公开作品/创作者/社区内层视觉候选与可复核测试证据行为保持与视觉边界
- 作品卡继续使用服务端返回的媒体 URL 与
imagePreviewUrl限宽 WebP 变体；视频仍由原生<video>播放，媒体比例、懒加载和访问边界不变。 - 作品详情和创作者弹层继续使用既有 React Query、路由回调、点赞/关注/举报/分享与分页动作；本切片只增加局部 DOM hook 与样式类。
- 内层只保留一层低对比边框和一层主题阴影，黑色媒体角标、嵌套白底和重复硬边框改为中性 Ocean glass；正文使用
--ocean-air-text*，主题色只用于主操作或语义状态。 - 社区活动弹层保留关注、粉丝、点赞、取关、拉黑、打开作者/作品和分页；列表行使用紧凑玻璃状态，窄屏允许内容滚动但不显示原生滚动轨道。
prefers-reduced-motion、prefers-reduced-transparency、forced-colors与不支持backdrop-filter时回退到不透明 Ocean surface；不增加第二个页面背景、WebGL 实例或动画循环。
本地候选验收记录
验证命令与结果在提交交接中记录。实现候选仍不是正式 Design、Testing、Operations 或部署验收；任何完整端到端/真实上游验证缺口均按环境事实单独报告。