docs(ui04): E00 baseline — design refs, plan, v1 measurements and record skeleton

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-09-22 12:08:40 +08:00
parent f435d7bfc3
commit f8dbc3ab9b
10 changed files with 678 additions and 0 deletions
@@ -0,0 +1,35 @@
+# 嵌入组件效果图 · 2026-09-22
+
+![嵌入组件](embed-widget-concept-2026-09-22.png)
+
+内置 image_gen 生成，imagegen 技能。视觉概念稿，不是已运行截图。宿主网站、活动、照片及数字均为示例。
+
+## 展示状态
+
+- 桌面展开：网站右下方白色卡片，照片轮播、上一张/下一张、暂停、相册入口。
+- 收起：Photos 胶囊入口，会话内记住用户选择。示例蓝点仅表示拟议的新内容提示，未取得真实新内容状态时不显示。
+- 手机展开：默认收起，点击后展开，留出左右边距和底部安全区。
+- 空相册：Photos coming soon，占位不显示假图或假数量。
+
+## 实现约束
+
+照片使用 contain 完整显示，竖图两侧留中性底。页码为轮播队列位置，不是相册总照片数。点击图片打开单图观众深链；View album 打开相册首页。中文与英文均支持。收起和永久停用分开处理。保持iframe隔离、消息来源验证、不可见暂停与配置版本控制。宿主页面只作接入示意，不属于待重建的网站。暂停和切图为拟议交互，是否已实现需核对现有代码。
+
+## 完整生成提示词
+
+```text
+Use case: ui-mockup. Create one polished high fidelity UI concept board for PhotoLive EMBEDDABLE PHOTO CAROUSEL WIDGET on a third-party corporate website. English UI only. Landscape 2400x1500 or equivalent sharp high resolution. Clean pale cool grey design presentation, heading "PHOTOLIVE / EMBEDDED GALLERY", small subheading "One event. Every moment." Three sections with clear labels: "01 / Desktop expanded" taking left 55% width, "02 / Collapsed" in a compact upper middle-right area, "03 / Mobile expanded" a tall mobile webpage right 25%. Show the widget IN CONTEXT on actual host website mockups. No native app bottom nav.
+Visual system matches professional photography app: #1A73E8 blue, white card, navy text #172033, secondary slate #647084, 16px corners, subtle shadow, precise thin icons and legible type.
+LEFT: desktop corporate website browser viewport with modest chrome, neutral header "NORTHLINE" and navigation About / Solutions / Events / Contact. Main website has understated architectural expo hero photo, large headline "Meet us at the fair", blue "Explore our exhibits" button, small content cards below. The host is low contrast but still legible. Float PHOTO WIDGET anchored lower right inside browser viewport, around 300px wide proportion relative website. Widget is visually prominent white card with header small blue aperture icon + "Event photos", top-right minus collapse button with generous click area. A FIXED 4:3 photo stage, dark charcoal background, shows a realistic landscape photograph fully contained, international adult visitors meeting at exhibition booth; do NOT crop faces. Delicate left/right navigation buttons over photo at edges. Below photo title "Canton Fair · Autumn", a compact bottom row "03 / 12", small pause control labelled "Pause", and clear blue link "View album ↗". No likes, no comments, no download, no photo count stats beyond carousel index. Entire card balanced and practical. Widget should not cover host's main blue CTA.
+UPPER MIDDLE-RIGHT small vignette under "02 / Collapsed": slice of same pale corporate webpage with a compact white pill anchored at bottom-right, blue photo icon + "Photos" + small blue notification dot. Pill 44px high equivalent, rounded, tasteful shadow, not a giant chat bubble. Label below in light grey "A quiet entry point".
+RIGHT: flat mobile website viewport without physical phone hardware, browser header tiny URL "northline.example", website brand and hamburger, host website heading "Meet us at the fair" remains visible near top. Lower area has expanded same photo widget nearly full width with 16px side margins, ABOVE mobile bottom safe area, same white header Event photos and minus button, 4:3 dark image stage with a DIFFERENT VERTICAL portrait-format photograph of an adult speaker on stage shown FULLY CONTAINED with dark side gutters. Same footer title "Canton Fair · Autumn" and "04 / 12", Pause, View album ↗. Make mobile photo visibly portrait within landscape stage demonstrating non-cropping. Host site content behind card remains discernible. No bottom navigation, no login, no uploading, no social feed. Entire mobile expanded card fits screen and is dismissible.
+Below center vignette include a small standalone horizontal design detail sample, not another full screen: same widget card empty-state mini version with a line photo icon and exact text "Photos coming soon", collapse minus button. Label "Empty state".
+Composition impeccable spacing, no arrows or huge explanatory annotation blocks, product screenshot quality, clean understated enterprise aesthetic. Photos realistic and attractive. All event data illustrative. No giant watermarks, no extra floating objects, no device perspective. Prioritize widget readability and matching card components across desktop and mobile.
+```
+
+## 清理修订提示词
+
+```text
+Edit this UI design board. Preserve the three website mockups, photo carousel widgets, photography, typography, layout, all inside-screen content exactly. REPLACE ALL exterior presentation-board background with completely solid opaque very pale gray #F3F6FA. Remove every black/blue speckle, transparency artifact, noisy texture, scribble, gradient streak from outside browser/mobile/vignette boundaries. Render a clean entirely opaque professional design board. Retain main top-left heading PHOTOLIVE / EMBEDDED GALLERY and subtitle, section headings. Remove tiny extra slogan at top right and entire decorative footer branding and footer text. Neutral clean margins. Do not change actual widgets or website screenshots. Absolutely no transparency or distressed texture.
+```
+
@@ -0,0 +1,18 @@
+# 嵌入组件 · PC与手机统一紧凑尺寸
+
+![效果图](embed-widget-fixed-size-2026-09-22.png)
+
+日期：2026-09-22。内置image_gen生成的概念稿，非实际网页截图。
+
+本版替代上一版大卡片尺寸方向：PC与手机均按195×280 CSS px作为实现参考，不使用桌面50vw/33vh，也不随桌面屏幕放大。手机390×844视口时约为宽度一半、高度三分之一。设计图的两个视口展示缩放略有差异；工程验收以CSS实测195×280为准，不能按画板截图像素反推。
+
+卡片结构：紧凑Photos标题与收起、图片轮播、相册名、页码/暂停/观众页入口。统一右下悬浮，PC右16/下24px，手机右12/下24px并避让安全区。极端小视口允许缩小以免越界，不能放大。示例网站、图片和数字不写入产品；点击图片打开单图深链，View打开相册。交互目标仍应保证可点击，暂停/关闭有效区域需在实现时核验。
+
+## 完整提示词
+
+```text
+Use case: ui-mockup. Create a precise clean high-fidelity responsive web design comparison board showing ONE SMALL FIXED-SIZE embeddable photo carousel on BOTH DESKTOP AND MOBILE. Critical requirement: widget CSS size is identical on both platforms, WIDTH 195px HEIGHT 280px. It does NOT scale to 50% of desktop width. Both website viewports shown at approximately SAME SCALE on the design board so the two widgets visibly have the same physical pixel dimensions. Large landscape canvas approx 2000x1100. Desktop website mockup left: logical 1100x760. Mobile website mockup right: logical390x844. Both displayed at same scale, with ample margins on solid opaque #F3F6FA background. NO third enlarged component detail; only desktop and mobile comparison. Heading "ONE WIDGET. SAME SIZE." Subheading "Desktop & mobile · 195 × 280 px". Labels "DESKTOP" and "MOBILE" above the corresponding viewports.
+Desktop host website subtle neutral corporate NORTHLINE page with header About Solutions Events Contact, hero architectural trade show photograph, headline "Meet us at the fair", blue Explore exhibits CTA, lower three feature cards. Actual carousel is SMALL, anchored bottom-right of desktop browser content, 16px right and24px bottom, width195px andheight280px relative1100x760 host. Most desktop site remains unobstructed. Mobile host website SAME NORTHLINE theme, stacked content, menu, hero and CTA, lower content; carousel floats bottom right, right12 bottom24, SAME195x280 logical size, taking HALF mobile width andONE THIRD mobile height. Left half of mobile content remains visible. Both widgets show same photo and EXACT same layout and dimensions, do not enlarge desktop widget. The mobile viewport is much narrower than desktop because same scale.
+Widget: clean white radius12 small shadow, header36px blue photo icon and 'Photos' in12px, minus collapse control at top-right. Image stage195x174px showing natural trade fair networking photograph of adult business visitors fully contained on charcoal backing. Title row26px 'Canton Fair' bold12px. Bottom44px action row: tiny '3 / 12', pause icon with generous clickable spacing, blue 'View ↗'. Total280. Thin small previous/next arrows on photo sides. No likes, downloads, comments, login, upload or large toolbar. No mock data outside widget except host. Photos realistic, text crisp. Add discreet dimension annotations '195 px' below each widget or each same-size outline, and '280 px' alongside if room; no arrows over actual content. Blue #1A73E8 accent navy #172033 text. Flat front-facing browser website frames, no device hardware, no perspective, no busy graphic decorations. Entire canvas opaque pristine light background. PRIORITIZE visibly identical widget size on desktop and mobile. This is an implementable UI design mockup, not code or an infographic.
+```
+
@@ -0,0 +1,32 @@
+# 嵌入组件：自动向上滚动与点赞气泡
+
+日期：2026-09-22。内置 image_gen 生成的静态概念图，不是运行中的动画或已实现页面。
+
+![最新效果](embed-widget-scroll-hearts-2026-09-22.png)
+
+## 最新设计要求
+
+- PC、移动端统一195×280 CSS px，右下悬浮，不按PC屏幕百分比放大。画板两视口缩放不同，实际尺寸按CSS验收。
+- 移除标题栏、底部数量、暂停、切图按钮和View入口。仅保留照片右上轻量收起入口。
+- 单列照片带自动连续向上滚动，上方逐渐移出，下方新图进入，不是横向切换或淡入淡出轮播。
+- 图片宽度填满窗口，高度优先按原比例；窗口裁出滚动中片段，不把每张照片固定裁成窗口比例。照片间距约3–4px。
+- 右侧覆盖珊瑚粉色半透明心形气泡，轻量上浮，不挡脸、不拦截照片点击。
+- 点击某张照片打开对应观众单图深链；不需要底部跳转按钮。
+- 宿主网站、照片、尺寸箭头及画板底部英文说明只作设计示意，不属于组件实际内容。
+
+## 实现时需保留的约束
+
+收起、页面不可见暂停动画和取数；减少动态效果时停止自动滚动并提供手动滚动。键盘焦点/悬停暂停便于点击，避免照片移动造成点击错图。少量照片不重复创建无限DOM，可用有限窗口循环并在边界无缝衔接；单图时静态展示，无图显示精简空态。
+
+点赞气泡应使用真实相册点赞事件并限制粒子数量，不能随机制造他人点赞。当前嵌入模块是否已接入实时事件须实现前核对；事件对应不在视口的照片时不得误暗示当前图被赞，可在下一次对应图可见时展示尚新鲜事件或直接丢弃视觉展示，不改真实计数。缩略图签名、隐藏/删除、换绑及停用需沿用既有权限和版本机制。以上为交互建议，不代表已实现。
+
+## 完整生成提示词
+
+```text
+Use case: ui-mockup. Create a high fidelity design comparison board for a TINY FIXED-SIZE AUTO VERTICALLY SCROLLING event photo window embedded on desktop AND mobile corporate websites. This is NOT a slideshow carousel. Both widgets same CSS size 195px wide x280px high on desktop and mobile. No sizing relative to desktop. Landscape clean opaque pale grey board, two front-on website viewports: desktop1100x760 logical left, mobile390x844 logical right, near same scale. Heading "LIVE MOMENTS, FLOWING UP". Subtitle "Auto-scroll photo window · 195 × 280 px". Labels DESKTOP / MOBILE.
+Host website NORTHLINE, architectural trade exhibition photography hero, heading "Meet us at the fair", blue Explore exhibits button, quiet feature content below. Widget floats bottom right of each viewport at fixed small size. Most host content remains clear.
+CRITICAL WIDGET DESIGN: a rounded12 rectangular PHOTOS-ONLY WINDOW, edge-to-edge photographs, no card header, no footer, NO photo counts, NO pause button, NO arrows, NO dots, NO view link, NO title, NO toolbar. Only a tiny subtle translucent minus/collapse affordance top right over the photo. Photo content scrolls AUTOMATICALLY UPWARD like a continuous vertical filmstrip: inside each 195x280 viewport show bottom portion of preceding exhibition photo at the TOP (~45px), one main natural photograph of diverse adult business visitors networking at trade booth in the MIDDLE (~155px), top portion of next photo of speaker/stage entering at the BOTTOM (~75px), separated by slim4px pale gutters. Horizontal photo edges make the vertical stacking explicit. NOT horizontal slides. Two to three image fragments visible at once. Realistic photography no distortion. Add subtle soft fade only at very top/bottom edges to suggest clipped moving stream.
+Over the RIGHT SIDE of photos, independent translucent coral/pink HEART BUBBLES gently rising, 4-6 varied size12-20px, soft opacity, no black bubbles, no text counts, no avatars, no likes toolbar. Bubbles do not obscure faces. Both desktop and mobile have exactly matching window style and same logical size.
+Outside the website frames, a discreet small upward motion annotation with arrow and label "Photos move upward automatically" near lower margin, and a small note "Tap a photo to open the gallery". These labels are on design board only, not widget UI. A small195×280px dimension label may be outside each card. Make actual widget visually photos-only; no whitespace below images. Corporate host website is background context only. English text clean and crisp. Professional restrained white/blue websites with tiny photorealistic photo windows and coral hearts. No mobile native navigation, login, upload or dashboard. No physical devices, perspective, ornamental objects, transparency noise. Full crisp opaque board. Show the static mid-scroll state clearly; do not falsely depict animation as video.
+```
+