- {project.showcase.map(visual => (
-
- {visual.locales[locale].caption}
-
- ))}
+
+
+
diff --git a/apps/web/src/components/home/demos/CodePanel.astro b/apps/web/src/components/home/demos/CodePanel.astro
new file mode 100644
index 0000000..231bded
--- /dev/null
+++ b/apps/web/src/components/home/demos/CodePanel.astro
@@ -0,0 +1,40 @@
+---
+import { Copy } from '@lucide/astro'
+import type { Locale } from '../../../types/project'
+import type { CodePart } from './code'
+import { demoCopy } from './copy'
+
+interface Props { parts: CodePart[], locale: Locale, filename: string }
+const { parts, locale, filename } = Astro.props
+const copy = demoCopy[locale]
+---
+
+
+
diff --git a/apps/web/src/components/home/demos/HeroDemos.astro b/apps/web/src/components/home/demos/HeroDemos.astro
new file mode 100644
index 0000000..6964692
--- /dev/null
+++ b/apps/web/src/components/home/demos/HeroDemos.astro
@@ -0,0 +1,49 @@
+---
+import type { Locale } from '../../../types/project'
+import type { HomeProject } from '../../../lib/home-projects'
+import HomeDemo from './HomeDemo.astro'
+import { demoCopy } from './copy'
+
+interface Props { locale: Locale, projects: HomeProject[] }
+const { locale, projects } = Astro.props
+const copy = demoCopy[locale]
+---
+
+
+
diff --git a/apps/web/src/components/home/demos/HomeDemo.astro b/apps/web/src/components/home/demos/HomeDemo.astro
new file mode 100644
index 0000000..017ea25
--- /dev/null
+++ b/apps/web/src/components/home/demos/HomeDemo.astro
@@ -0,0 +1,14 @@
+---
+import type { Locale } from '../../../types/project'
+import type { HomeDemoKind } from '../../../lib/home-projects'
+import StyleDemo from './StyleDemo.astro'
+import BuildDemo from './BuildDemo.astro'
+import RegistryDemo from './RegistryDemo.astro'
+import './demo.css'
+
+interface Props { kind: HomeDemoKind, locale: Locale, instance: string }
+const { kind, locale, instance } = Astro.props
+const components = { style: StyleDemo, build: BuildDemo, registry: RegistryDemo }
+const Demo = components[kind]
+---
+
+
+
diff --git a/apps/web/src/components/home/demos/StyleDemo.astro b/apps/web/src/components/home/demos/StyleDemo.astro
new file mode 100644
index 0000000..3df0603
--- /dev/null
+++ b/apps/web/src/components/home/demos/StyleDemo.astro
@@ -0,0 +1,67 @@
+---
+import type { Locale } from '../../../types/project'
+import CodePanel from './CodePanel.astro'
+import { demoCopy } from './copy'
+import { buttonClasses, defaultStyle, styleCode, styleColors } from './style'
+
+interface Props { locale: Locale, instance: string }
+const { locale, instance } = Astro.props
+const copy = demoCopy[locale]
+---
+
+
+
diff --git a/apps/web/src/components/home/demos/build.ts b/apps/web/src/components/home/demos/build.ts
new file mode 100644
index 0000000..a4a64bb
--- /dev/null
+++ b/apps/web/src/components/home/demos/build.ts
@@ -0,0 +1,25 @@
+import type { CodePart } from './code'
+
+// weapp-vite add5d6c7: website/guide/multi-platform.md, multi-platform template.
+export const buildTargets = [
+ { id: 'weapp', markup: 'wxml', style: 'wxss' },
+ { id: 'alipay', markup: 'axml', style: 'acss' },
+ { id: 'tt', markup: 'ttml', style: 'ttss' },
+] as const
+
+export function buildExample(index: number) {
+ const target = buildTargets[index]
+ const directory = `dist/${target.id}/dist`
+ const command = `pnpm exec wv build -p ${target.id}`
+ const parts: CodePart[] = [
+ { text: 'import', tone: 'keyword' },
+ { text: ' { defineConfig } ' },
+ { text: 'from ', tone: 'keyword' },
+ { text: '\'weapp-vite\'\n\n', tone: 'string' },
+ { text: 'export default ', tone: 'keyword' },
+ { text: 'defineConfig({\n weapp: {\n multiPlatform: {\n enabled: true,\n targets: [' },
+ { text: `'${target.id}'`, tone: 'string' },
+ { text: '],\n },\n },\n})' },
+ ]
+ return { ...target, directory, command, parts, files: [`index.${target.markup}`, `index.${target.style}`, 'index.js', 'index.json'] }
+}
diff --git a/apps/web/src/components/home/demos/code.ts b/apps/web/src/components/home/demos/code.ts
new file mode 100644
index 0000000..3840fb8
--- /dev/null
+++ b/apps/web/src/components/home/demos/code.ts
@@ -0,0 +1,21 @@
+export interface CodePart {
+ text: string
+ tone?: 'keyword' | 'string' | 'comment'
+}
+
+export function codeText(parts: CodePart[]) {
+ return parts.map(part => part.text).join('')
+}
+
+export function updateCode(root: HTMLElement, parts: CodePart[]) {
+ const code = root.querySelector('code')!
+ code.replaceChildren(...parts.map((part) => {
+ const span = document.createElement('span')
+ span.textContent = part.text
+ if (part.tone) {
+ span.className = `demo-syntax-${part.tone}`
+ }
+ return span
+ }))
+ root.querySelector('[role="status"]')!.textContent = ''
+}
diff --git a/apps/web/src/components/home/demos/copy.ts b/apps/web/src/components/home/demos/copy.ts
new file mode 100644
index 0000000..0c186cf
--- /dev/null
+++ b/apps/web/src/components/home/demos/copy.ts
@@ -0,0 +1,62 @@
+export const demoCopy = {
+ 'zh-CN': {
+ tabs: ['样式', '构建', '组件'],
+ playground: '工具示例',
+ source: '代码',
+ result: '浏览器预览',
+ copy: '复制代码',
+ copied: '已复制',
+ copyFailed: '复制失败，请选择代码复制。',
+ official: '官方文档',
+ color: '颜色',
+ colors: ['松绿', '钴蓝', '玫红'],
+ radius: '圆角',
+ radii: ['直角', '适中', '柔和'],
+ compact: '紧凑',
+ button: '开始构建',
+ saved: '准备好了',
+ styleNote: 'Tailwind CSS · Web',
+ target: '目标平台',
+ targets: ['微信', '支付宝', '抖音'],
+ output: '输出目录示例',
+ buildNote: '多平台模板 · experimental',
+ components: '组件',
+ registryNote: '交互示意 · 规划中',
+ registryTitle: '你的下一个项目',
+ input: '项目名称',
+ inputValue: 'my-mini-app',
+ selected: '已选择',
+ registryAction: '确认项目',
+ registryDone: '已确认',
+ },
+ 'en': {
+ tabs: ['Style', 'Build', 'Compose'],
+ playground: 'Tool examples',
+ source: 'Code',
+ result: 'Browser preview',
+ copy: 'Copy code',
+ copied: 'Copied',
+ copyFailed: 'Copy failed. Select the code to copy it.',
+ official: 'Documentation',
+ color: 'Color',
+ colors: ['Green', 'Blue', 'Rose'],
+ radius: 'Corners',
+ radii: ['Square', 'Medium', 'Soft'],
+ compact: 'Compact',
+ button: 'Start building',
+ saved: 'Ready to build',
+ styleNote: 'Tailwind CSS · Web',
+ target: 'Platform',
+ targets: ['WeChat', 'Alipay', 'Douyin'],
+ output: 'Example output',
+ buildNote: 'Multi-platform template · experimental',
+ components: 'Components',
+ registryNote: 'Interaction sketch · Planned',
+ registryTitle: 'Your next project',
+ input: 'Project name',
+ inputValue: 'my-mini-app',
+ selected: 'Selected',
+ registryAction: 'Confirm project',
+ registryDone: 'Confirmed',
+ },
+} as const
diff --git a/apps/web/src/components/home/demos/demo.css b/apps/web/src/components/home/demos/demo.css
new file mode 100644
index 0000000..e1e33c0
--- /dev/null
+++ b/apps/web/src/components/home/demos/demo.css
@@ -0,0 +1,398 @@
+.home-demo {
+ display: block;
+ min-width: 0;
+ container-type: inline-size;
+}
+
+.home-demo [hidden],
+.home-lab [hidden] {
+ display: none !important;
+}
+
+.home-lab {
+ display: block;
+ overflow: hidden;
+ border: 1px solid var(--border);
+ border-radius: 8px;
+}
+
+.home-lab-heading {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem 1rem;
+ align-items: center;
+ justify-content: space-between;
+ min-height: 3.25rem;
+ padding: 0.5rem 1rem;
+ border-bottom: 1px solid var(--border);
+}
+
+.home-lab-tabs {
+ display: flex;
+ gap: 0.25rem;
+}
+
+.home-lab-tabs button {
+ padding: 0.45rem 0.9rem;
+ font-size: 0.8125rem;
+ cursor: pointer;
+ border-radius: 4px;
+}
+
+.home-lab-tabs [aria-selected='true'] {
+ color: var(--accent-contrast);
+ background: var(--accent);
+}
+
+.home-lab-project {
+ font: 500 0.6875rem/1.5 var(--font-mono);
+ color: var(--muted);
+}
+
+.demo-controls-space {
+ min-height: 4rem;
+ background: var(--surface);
+}
+
+.demo-controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem 1.25rem;
+ align-items: center;
+ min-width: 0;
+ min-height: 4rem;
+ padding: 0.75rem 1.25rem;
+ margin: 0;
+ font-size: 0.75rem;
+ border: 0;
+}
+
+.demo-controls input {
+ accent-color: var(--accent);
+}
+
+.demo-colors {
+ display: flex;
+ gap: 0.6rem;
+}
+
+.demo-swatch {
+ display: flex;
+ padding: 3px;
+ border: 1px solid transparent;
+ border-radius: 50%;
+}
+
+.demo-swatch:has(:checked) {
+ border-color: var(--text);
+}
+
+.demo-swatch input {
+ width: 1.3rem;
+ height: 1.3rem;
+ margin: 0;
+ appearance: none;
+ cursor: pointer;
+ background: var(--swatch);
+ border-radius: 50%;
+}
+
+.demo-select-label,
+.demo-check {
+ display: inline-flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.demo-select-label select {
+ max-width: 6rem;
+ padding: 0.35rem;
+ color: var(--text);
+ background: var(--surface-soft);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+}
+
+.demo-check input {
+ width: 1rem;
+ height: 1rem;
+ margin: 0;
+}
+
+.demo-segments {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.demo-segments label {
+ display: flex;
+ gap: 0.35rem;
+ align-items: center;
+ cursor: pointer;
+}
+
+.demo-body {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+ height: 21rem;
+ border-top: 1px solid var(--border);
+}
+
+.demo-code {
+ position: relative;
+ display: block;
+ min-width: 0;
+ min-height: 0;
+ background: var(--surface-soft);
+ border-right: 1px solid var(--border);
+}
+
+.demo-pane-heading {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ justify-content: space-between;
+ height: 2.75rem;
+ padding: 0.5rem 1.25rem;
+ font: 500 0.6875rem/1.4 var(--font-mono);
+ color: var(--muted);
+}
+
+.demo-icon-button {
+ display: grid;
+ flex-shrink: 0;
+ place-items: center;
+ width: 1.8rem;
+ height: 1.8rem;
+ cursor: pointer;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+}
+
+.demo-icon-button:hover {
+ color: var(--text);
+ background: var(--surface-strong);
+}
+
+.demo-code pre {
+ height: calc(100% - 5.75rem);
+ padding: 0.5rem 1.25rem;
+ margin: 0;
+ overflow: auto;
+ font-size: 0.8125rem;
+ line-height: 1.7;
+ tab-size: 2;
+}
+
+.demo-copy-status {
+ position: absolute;
+ right: 1.25rem;
+ bottom: 0.5rem;
+ left: 1.25rem;
+ font-size: 0.6875rem;
+ line-height: 1.4;
+ color: var(--muted);
+}
+
+.demo-syntax-keyword {
+ color: light-dark(#91431a, #f3b58d);
+}
+
+.demo-syntax-string {
+ color: light-dark(#176181, #85c9e6);
+}
+
+.demo-syntax-comment {
+ color: var(--muted);
+}
+
+.demo-preview {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ min-height: 0;
+ background: var(--surface);
+}
+
+.demo-small-tag {
+ font-size: 0.625rem;
+}
+
+.demo-button-stage,
+.demo-registry-stage {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ justify-content: center;
+ min-height: 0;
+ padding: 0.5rem 1.25rem;
+}
+
+.demo-button-stage button {
+ max-width: 100%;
+ font-size: 0.9375rem;
+ cursor: pointer;
+}
+
+.demo-note {
+ padding: 0.65rem 1.25rem;
+ font: 400 0.625rem/1.5 var(--font-mono);
+ color: var(--muted);
+}
+
+.demo-file-tree {
+ flex: 1;
+ padding: 0.5rem 1.25rem;
+ overflow: auto;
+ font: 400 0.75rem/1.7 var(--font-mono);
+}
+
+.demo-directory {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ color: var(--accent);
+}
+
+.demo-tree-branch {
+ padding-left: 1rem;
+ margin: 0.75rem 0 0 0.5rem;
+ border-left: 1px solid var(--border);
+}
+
+.demo-tree-branch ul {
+ padding: 0;
+ margin: 0.3rem 0 0;
+ list-style: none;
+}
+
+.demo-tree-branch li {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.demo-build-command {
+ padding: 0.5rem 1.25rem;
+ overflow-x: auto;
+ font-size: 0.6875rem;
+ white-space: nowrap;
+}
+
+.demo-composition {
+ display: grid;
+ gap: 0.8rem;
+ width: 100%;
+ max-width: 19rem;
+ padding: 1rem;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+}
+
+.demo-composition-bare {
+ border-color: transparent;
+}
+
+.demo-composition-heading {
+ display: flex;
+ gap: 0.6rem;
+ align-items: center;
+ font-size: 0.8125rem;
+}
+
+.demo-composition-heading svg {
+ flex-shrink: 0;
+ color: var(--accent);
+}
+
+.demo-composition-input {
+ display: grid;
+ gap: 0.3rem;
+ font-size: 0.6875rem;
+ color: var(--muted);
+}
+
+.demo-composition-input input {
+ width: 100%;
+ min-width: 0;
+ padding: 0.45rem 0.65rem;
+ font-size: 0.8125rem;
+ color: var(--text);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+}
+
+.demo-confirm {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.6rem 0.75rem;
+ font-size: 0.75rem;
+ cursor: pointer;
+ background: var(--surface-strong);
+ border-radius: 4px;
+}
+
+.demo-confirm[aria-pressed='true'] {
+ color: var(--accent-contrast);
+ background: var(--accent);
+}
+
+@container (max-width: 500px) {
+ .demo-body {
+ grid-template-rows: 18rem 13rem;
+ grid-template-columns: minmax(0, 1fr);
+ height: 31rem;
+ }
+
+ .demo-code {
+ order: 2;
+ border-top: 1px solid var(--border);
+ border-right: 0;
+ }
+
+ .demo-code pre {
+ height: calc(100% - 4.5rem);
+ padding-top: 0;
+ font-size: 0.75rem;
+ }
+
+ .demo-controls {
+ gap: 0.5rem 0.75rem;
+ padding-right: 0.75rem;
+ padding-left: 0.75rem;
+ }
+
+ .demo-select-label > span {
+ display: none;
+ }
+
+ .demo-controls-space,
+ .demo-controls {
+ height: 5.5rem;
+ min-height: 5.5rem;
+ }
+
+ .demo-pane-heading,
+ .demo-note {
+ padding-right: 0.75rem;
+ padding-left: 0.75rem;
+ }
+}
+
+@media (max-width: 620px) {
+ .home-lab-project {
+ display: none;
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ .home-demo button,
+ .home-lab-tabs button {
+ transition:
+ color 180ms ease,
+ background-color 180ms ease;
+ }
+}
diff --git a/apps/web/src/components/home/demos/presets.test.ts b/apps/web/src/components/home/demos/presets.test.ts
new file mode 100644
index 0000000..49d5734
--- /dev/null
+++ b/apps/web/src/components/home/demos/presets.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest'
+import { buildExample } from './build'
+import { codeText } from './code'
+import { registryCode } from './registry'
+import { buttonClasses, styleCode } from './style'
+
+describe('homepage demo presets', () => {
+ it('prints exactly the classes used by every style preview', () => {
+ for (const color of [0, 1, 2]) {
+ for (const radius of [0, 1, 2]) {
+ for (const compact of [false, true]) {
+ const state = { color, radius, compact }
+ const code = codeText(styleCode(state, 'Build'))
+ const printedClasses = code.match(/class="([^"]+)"/)![1].replace(/\s+/g, ' ')
+ expect(printedClasses).toBe(buttonClasses(state))
+ expect(code).toContain('Build')
+ }
+ }
+ }
+ })
+
+ it('keeps platform config, CLI command and native file types aligned', () => {
+ const expected = [
+ { id: 'weapp', markup: 'wxml', style: 'wxss' },
+ { id: 'alipay', markup: 'axml', style: 'acss' },
+ { id: 'tt', markup: 'ttml', style: 'ttss' },
+ ]
+ expected.forEach((target, index) => {
+ const example = buildExample(index)
+ expect(codeText(example.parts)).toContain(`targets: ['${target.id}']`)
+ expect(example.command).toBe(`pnpm exec wv build -p ${target.id}`)
+ expect(example.directory).toBe(`dist/${target.id}/dist`)
+ expect(example.files).toEqual([`index.${target.markup}`, `index.${target.style}`, 'index.js', 'index.json'])
+ })
+ })
+
+ it('emits deterministic registry commands and rejects an empty selection', () => {
+ expect(codeText(registryCode(['card', 'button', 'button']))).toBe('pnpm dlx @varo-ui/cli add \\\n --target weapp \\\n button card')
+ expect(codeText(registryCode(['input']))).toContain('--target weapp \\\n input')
+ expect(() => registryCode([])).toThrow('Select at least one')
+ })
+})
diff --git a/apps/web/src/components/home/demos/registry.ts b/apps/web/src/components/home/demos/registry.ts
new file mode 100644
index 0000000..86776ac
--- /dev/null
+++ b/apps/web/src/components/home/demos/registry.ts
@@ -0,0 +1,18 @@
+import type { CodePart } from './code'
+
+// Varo d00ea30f: README.md, "Install editable source".
+export const registryComponents = ['button', 'input', 'card'] as const
+export type RegistryComponent = typeof registryComponents[number]
+
+export function registryCode(selected: readonly RegistryComponent[]): CodePart[] {
+ const ordered = registryComponents.filter(name => selected.includes(name))
+ if (!ordered.length) {
+ throw new Error('Select at least one registry component')
+ }
+ return [
+ { text: 'pnpm dlx ', tone: 'keyword' },
+ { text: '@varo-ui/cli', tone: 'string' },
+ { text: ' add \\\n --target weapp \\\n ' },
+ { text: ordered.join(' '), tone: 'string' },
+ ]
+}
diff --git a/apps/web/src/components/home/demos/style.ts b/apps/web/src/components/home/demos/style.ts
new file mode 100644
index 0000000..cd823aa
--- /dev/null
+++ b/apps/web/src/components/home/demos/style.ts
@@ -0,0 +1,26 @@
+import type { CodePart } from './code'
+
+export const styleColors = [
+ { id: 'green', classes: 'bg-emerald-700 text-white', swatch: '#047857' },
+ { id: 'blue', classes: 'bg-blue-700 text-white', swatch: '#1d4ed8' },
+ { id: 'rose', classes: 'bg-rose-700 text-white', swatch: '#be123c' },
+] as const
+export const styleRadii = ['rounded-none', 'rounded-md', 'rounded-lg'] as const
+export interface StyleState { color: number, radius: number, compact: boolean }
+export const defaultStyle: StyleState = { color: 0, radius: 1, compact: false }
+
+export function buttonClasses(state: StyleState) {
+ return `${styleColors[state.color].classes} ${styleRadii[state.radius]} ${state.compact ? 'px-4 py-2' : 'px-6 py-3'} font-medium`
+}
+
+export function styleCode(state: StyleState, label: string): CodePart[] {
+ const classes = buttonClasses(state).split(' ')
+ return [
+ { text: '\n ' },
+ { text: label },
+ { text: '\n', tone: 'keyword' },
+ ]
+}
diff --git a/apps/web/src/components/home/media-sizes.ts b/apps/web/src/components/home/media-sizes.ts
deleted file mode 100644
index 9e68cd1..0000000
--- a/apps/web/src/components/home/media-sizes.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { HomeProjectPlacement } from '../../lib/home-projects'
-
-// Keep fallback sizes beside the home layout; lazy images use their rendered size first.
-export const showcaseSizes: Record = {
- 'phone': '(max-width: 720px) min(340px, calc(100vw - 32px)), 340px',
- 'phone-pair': '(max-width: 720px) min(340px, calc(100vw - 32px)), (max-width: 900px) calc((100vw - 80px) * 0.225 - 8px), min(258.4px, calc((100vw - 104px) * 0.225 - 8px))',
- 'component': '(max-width: 720px) calc(100vw - 32px), (max-width: 900px) calc((100vw - 80px) * 0.55), min(651.2px, calc((100vw - 104px) * 0.55))',
-}
diff --git a/apps/web/src/content/home-projects.ts b/apps/web/src/content/home-projects.ts
index 2de442f..e278f7f 100644
--- a/apps/web/src/content/home-projects.ts
+++ b/apps/web/src/content/home-projects.ts
@@ -1,7 +1,7 @@
import type { HomeProjectPlacement } from '../lib/home-projects'
export const homeProjectPlacements = [
- { id: 'weapp-tailwindcss', layout: 'phone', reversed: false, stage: { 'zh-CN': '样式', 'en': 'STYLE' } },
- { id: 'weapp-vite', layout: 'phone-pair', reversed: true, stage: { 'zh-CN': '构建', 'en': 'BUILD' } },
- { id: 'varo', layout: 'component', reversed: false, stage: { 'zh-CN': '组件', 'en': 'COMPOSE' } },
+ { id: 'weapp-tailwindcss', demo: 'style', reversed: false, stage: { 'zh-CN': '样式', 'en': 'STYLE' } },
+ { id: 'weapp-vite', demo: 'build', reversed: true, stage: { 'zh-CN': '构建', 'en': 'BUILD' } },
+ { id: 'varo', demo: 'registry', reversed: false, stage: { 'zh-CN': '组件', 'en': 'COMPOSE' } },
] satisfies HomeProjectPlacement[]
diff --git a/apps/web/src/i18n/home/en.ts b/apps/web/src/i18n/home/en.ts
index a869ac5..1e6c1df 100644
--- a/apps/web/src/i18n/home/en.ts
+++ b/apps/web/src/i18n/home/en.ts
@@ -5,7 +5,7 @@ export default {
description: 'Ship mini-app and H5 products with open tooling for Tailwind CSS styling, Vite-powered builds, and editable cross-runtime components.',
primary: 'View projects',
secondary: 'View on GitHub',
- visualLabel: 'Real examples: the TDesign retail template and Varo AgentChat component demo.',
+ visualLabel: 'Code and interactive examples for styling, builds, and components.',
},
about: {
eyebrow: 'Build path',
diff --git a/apps/web/src/i18n/home/zh-CN.ts b/apps/web/src/i18n/home/zh-CN.ts
index 0010e2b..3df1272 100644
--- a/apps/web/src/i18n/home/zh-CN.ts
+++ b/apps/web/src/i18n/home/zh-CN.ts
@@ -5,7 +5,7 @@ export default {
description: '从 Tailwind CSS 样式、Vite 构建到可编辑双端组件，用一套开放工具链交付小程序与 H5。',
primary: '查看项目',
secondary: '查看 GitHub',
- visualLabel: '真实案例：TDesign 零售模板与 Varo AgentChat 组件演示。',
+ visualLabel: '代码与交互示例：样式、构建与组件。',
},
about: {
eyebrow: '构建链路',
diff --git a/apps/web/src/lib/home-projects.test.ts b/apps/web/src/lib/home-projects.test.ts
index 6b41442..f041364 100644
--- a/apps/web/src/lib/home-projects.test.ts
+++ b/apps/web/src/lib/home-projects.test.ts
@@ -4,9 +4,7 @@ import varo from '../content/projects/varo.json'
import tailwind from '../content/projects/weapp-tailwindcss.json'
import vite from '../content/projects/weapp-vite.json'
import { projectDefinitionSchema, showcaseSchema } from '../content/schemas'
-import varoImages from '../content/showcases/varo.json'
import tailwindImages from '../content/showcases/weapp-tailwindcss.json'
-import viteImages from '../content/showcases/weapp-vite.json'
import { assembleHomeProjects } from './home-projects'
const projects = [
@@ -14,41 +12,35 @@ const projects = [
{ id: 'weapp-vite', data: projectDefinitionSchema.parse(vite) },
{ id: 'varo', data: projectDefinitionSchema.parse(varo) },
]
-const showcases = [
- { id: 'weapp-tailwindcss', data: showcaseSchema.parse(tailwindImages) },
- { id: 'weapp-vite', data: showcaseSchema.parse(viteImages) },
- { id: 'varo', data: showcaseSchema.parse(varoImages) },
-]
describe('home project composition', () => {
it('keeps editorial order when the catalog is reordered or extended', () => {
const extended = [...projects].reverse().concat({ id: 'new-project', data: projects[0].data })
- const result = assembleHomeProjects(extended, showcases, homeProjectPlacements)
+ const result = assembleHomeProjects(extended, homeProjectPlacements)
expect(result.map(project => project.id)).toEqual(['weapp-tailwindcss', 'weapp-vite', 'varo'])
- expect(result.map(project => project.showcase.length)).toEqual([1, 2, 1])
+ expect(result.map(project => project.demo)).toEqual(['style', 'build', 'registry'])
})
- it('combines independent metadata and screenshot updates without overwriting either', () => {
+ it('combines independent metadata and demo placements without requiring screenshots', () => {
const changedProjects = structuredClone(projects)
changedProjects[0].data.docsUrl = 'https://example.com/new-docs/'
changedProjects[0].data.status = 'beta'
- const changedShowcases = structuredClone(showcases)
- changedShowcases[0].data.images[0].locales.en.caption = 'Updated capture'
- const result = assembleHomeProjects(changedProjects, changedShowcases, homeProjectPlacements)
+ const changedPlacements = structuredClone(homeProjectPlacements)
+ changedPlacements[0].reversed = true
+ const result = assembleHomeProjects(changedProjects, changedPlacements)
expect(result[0].data.docsUrl).toBe('https://example.com/new-docs/')
expect(result[0].data.status).toBe('beta')
- expect(result[0].showcase[0].locales.en.caption).toBe('Updated capture')
+ expect(result[0].reversed).toBe(true)
+ expect(result[0]).not.toHaveProperty('showcase')
expect(changedProjects[0].data.visuals).not.toHaveProperty('showcase')
expect(projects[0].data.status).toBe('stable')
})
it('rejects stale references and duplicate placements before rendering', () => {
- expect(() => assembleHomeProjects(projects, showcases, [...homeProjectPlacements, homeProjectPlacements[0]]))
+ expect(() => assembleHomeProjects(projects, [...homeProjectPlacements, homeProjectPlacements[0]]))
.toThrow('Duplicate home project')
- expect(() => assembleHomeProjects(projects.slice(1), showcases, homeProjectPlacements))
+ expect(() => assembleHomeProjects(projects.slice(1), homeProjectPlacements))
.toThrow('unknown project')
- expect(() => assembleHomeProjects(projects, showcases.slice(1), homeProjectPlacements))
- .toThrow('requires project data and showcase images')
})
it('validates image metadata independently from the project definition', () => {
diff --git a/apps/web/src/lib/home-projects.ts b/apps/web/src/lib/home-projects.ts
index bcab708..a3e26f0 100644
--- a/apps/web/src/lib/home-projects.ts
+++ b/apps/web/src/lib/home-projects.ts
@@ -1,15 +1,16 @@
-import type { Locale, ProjectDefinition, ProjectVisual } from '../types/project'
+import type { Locale, ProjectDefinition } from '../types/project'
+
+export type HomeDemoKind = 'style' | 'build' | 'registry'
export interface HomeProjectPlacement {
id: string
- layout: 'phone' | 'phone-pair' | 'component'
+ demo: HomeDemoKind
reversed: boolean
stage: Record
}
export interface HomeProject extends HomeProjectPlacement {
data: ProjectDefinition
- showcase: ProjectVisual[]
}
interface CatalogProject {
@@ -17,23 +18,11 @@ interface CatalogProject {
data: ProjectDefinition
}
-interface ShowcaseEntry {
- id: string
- data: { images: ProjectVisual[] }
-}
-
export function assembleHomeProjects(
projects: CatalogProject[],
- showcases: ShowcaseEntry[],
placements: HomeProjectPlacement[],
): HomeProject[] {
const catalog = new Map(projects.map(project => [project.id, project.data]))
- const images = new Map(showcases.map(showcase => [showcase.id, showcase.data.images]))
- for (const showcase of showcases) {
- if (!catalog.has(showcase.id)) {
- throw new Error(`Showcase references unknown project: ${showcase.id}`)
- }
- }
const used = new Set()
return placements.map((placement) => {
if (used.has(placement.id)) {
@@ -41,10 +30,9 @@ export function assembleHomeProjects(
}
used.add(placement.id)
const data = catalog.get(placement.id)
- const showcase = images.get(placement.id)
- if (!data || !showcase?.length) {
- throw new Error(`Home project requires project data and showcase images: ${placement.id}`)
+ if (!data) {
+ throw new Error(`Home placement references unknown project: ${placement.id}`)
}
- return { ...placement, data, showcase }
+ return { ...placement, data }
})
}
diff --git a/apps/web/src/lib/home.ts b/apps/web/src/lib/home.ts
index 400eba3..05ce9b5 100644
--- a/apps/web/src/lib/home.ts
+++ b/apps/web/src/lib/home.ts
@@ -1,8 +1,7 @@
import type { ProjectEntry } from './projects'
-import { getCollection } from 'astro:content'
import { homeProjectPlacements } from '../content/home-projects'
import { assembleHomeProjects } from './home-projects'
export async function getHomeProjects(projects: ProjectEntry[]) {
- return assembleHomeProjects(projects, await getCollection('showcases'), homeProjectPlacements)
+ return assembleHomeProjects(projects, homeProjectPlacements)
}
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 2d2c38d..2f1de17 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -166,8 +166,7 @@
}
[data-motion='ready'] [data-reveal],
- [data-motion='ready'] [data-reveal][data-visible],
- [data-hero-enter] {
+ [data-motion='ready'] [data-reveal][data-visible] {
opacity: 1;
transform: none;
}
diff --git a/apps/web/src/styles/home.css b/apps/web/src/styles/home.css
index ec9324b..f9278a0 100644
--- a/apps/web/src/styles/home.css
+++ b/apps/web/src/styles/home.css
@@ -1,13 +1,3 @@
-@keyframes hero-enter {
- from {
- transform: translate3d(0, 18px, 0);
- }
-
- to {
- transform: translate3d(0, 0, 0);
- }
-}
-
.home-hero {
color: var(--text);
background: var(--background);
@@ -61,41 +51,7 @@
}
.home-hero-stage {
- display: flex;
- gap: 2rem;
- align-items: start;
- justify-content: center;
- min-width: 0;
- padding-top: 1.5rem;
- border-top: 1px solid var(--border);
-}
-
-.home-hero-example {
- width: calc(390px * var(--showcase-ratio));
min-width: 0;
- margin: 0;
-}
-
-.home-hero-example picture {
- display: block;
- aspect-ratio: var(--showcase-ratio);
-}
-
-.home-hero-example img {
- width: 100%;
- height: 100%;
- object-fit: contain;
- border: 1px solid var(--border);
- border-radius: 6px;
-}
-
-.home-hero-example figcaption {
- display: flex;
- gap: 0.75rem;
- justify-content: space-between;
- margin-top: 0.75rem;
- font: 500 0.6875rem/1.5 var(--font-mono);
- color: var(--muted);
}
.home-project-row {
@@ -112,44 +68,24 @@
border-top: 0;
}
-.home-project-row-reversed .home-project-visual-link {
+.home-project-row-reversed .home-project-demo {
order: 2;
}
-.home-showcase-gallery {
+.home-demo-heading {
display: flex;
gap: 1rem;
- align-items: start;
- justify-content: center;
-}
-
-.home-showcase-figure {
- flex: 1;
- min-width: 0;
- margin: 0;
-}
-
-.home-showcase-phone {
- max-width: 340px;
-}
-
-.home-showcase-figure picture {
- display: block;
- overflow: hidden;
- border: 1px solid var(--border);
- border-radius: 6px;
-}
-
-.home-showcase-figure img {
- display: block;
- width: 100%;
- height: auto;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+ font: 500 0.75rem/1.5 var(--font-mono);
}
-.home-showcase-figure figcaption {
- padding-top: 0.875rem;
+.home-project-demo-link {
+ display: inline-flex;
+ gap: 0.25rem;
+ align-items: center;
font-size: 0.75rem;
- line-height: 1.65;
color: var(--muted);
}
@@ -219,13 +155,13 @@
color: var(--accent);
}
-.home-project-visual-link {
+.home-project-demo {
display: block;
min-width: 0;
color: inherit;
}
-.home-project-visual-link:focus-visible {
+.home-project-demo-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 5px;
}
@@ -278,14 +214,6 @@
}
@media (max-width: 720px) {
- .home-hero-example {
- width: calc(330px * var(--showcase-ratio));
- }
-
- .home-hero-example:not(:first-child) {
- display: none;
- }
-
.home-hero-copy {
row-gap: 0;
}
@@ -299,20 +227,9 @@
grid-template-columns: minmax(0, 1fr);
}
- .home-project-row-reversed .home-project-visual-link {
+ .home-project-row-reversed .home-project-demo {
order: 0;
}
-
- .home-showcase-gallery {
- flex-direction: column;
- gap: 1.75rem;
- align-items: center;
- }
-
- .home-showcase-figure {
- flex: auto;
- width: 100%;
- }
}
@media (max-width: 620px) {
@@ -363,23 +280,3 @@
font-size: 2.625rem;
}
}
-
-@media (prefers-reduced-motion: no-preference) {
- [data-hero-enter] {
- animation: hero-enter 700ms var(--enter-delay, 0ms) cubic-bezier(0.16, 1, 0.3, 1) both;
- }
-
- [data-project-visual] img {
- transition: transform 300ms ease;
- }
-
- [data-project-row]:focus-within [data-project-visual] img {
- transform: scale(1.015);
- }
-
- @media (hover: hover) {
- [data-project-row]:hover [data-project-visual] img {
- transform: scale(1.015);
- }
- }
-}
diff --git a/apps/web/tests/e2e/home-demos.spec.ts b/apps/web/tests/e2e/home-demos.spec.ts
new file mode 100644
index 0000000..eb139ab
--- /dev/null
+++ b/apps/web/tests/e2e/home-demos.spec.ts
@@ -0,0 +1,156 @@
+import { expect, test } from '@playwright/test'
+import { demoCopy } from '../../src/components/home/demos/copy'
+
+for (const locale of ['zh-CN', 'en'] as const) {
+ const copy = demoCopy[locale]
+ const route = locale === 'en' ? '/en/' : '/'
+
+ test(`${locale}: style controls change real CSS and keep instances independent`, async ({ page }) => {
+ await page.goto(route)
+ const hero = page.locator('hero-demos style-demo')
+ const project = page.locator('#projects style-demo')
+ const button = hero.locator('[data-style-button]')
+ const before = await button.evaluate((element) => {
+ const style = getComputedStyle(element)
+ return { color: style.backgroundColor, radius: style.borderRadius, padding: style.padding }
+ })
+ await hero.getByRole('radio', { name: copy.colors[1], exact: true }).check()
+ await hero.locator('select').selectOption('2')
+ await hero.getByRole('checkbox', { name: copy.compact }).check()
+ await expect(button).toHaveClass('bg-blue-700 text-white rounded-lg px-4 py-2 font-medium')
+ await expect(hero.locator('code')).toContainText('bg-blue-700 text-white')
+ const after = await button.evaluate((element) => {
+ const style = getComputedStyle(element)
+ return { color: style.backgroundColor, radius: style.borderRadius, padding: style.padding }
+ })
+ expect(after.color).not.toBe(before.color)
+ expect(after.radius).not.toBe(before.radius)
+ expect(after.padding).not.toBe(before.padding)
+ await expect(project.locator('[data-style-button]')).toHaveClass('bg-emerald-700 text-white rounded-md px-6 py-3 font-medium')
+ await button.click()
+ await expect(button).toHaveText(copy.saved)
+ await expect(hero.locator('code')).toContainText(copy.saved)
+ })
+
+ test(`${locale}: tabs support keyboard navigation and build targets stay aligned`, async ({ page }) => {
+ await page.goto(route)
+ const tabs = page.locator('hero-demos [role="tab"]')
+ await tabs.first().focus()
+ await page.keyboard.press('ArrowRight')
+ await expect(tabs.nth(1)).toBeFocused()
+ const build = page.locator('hero-demos build-demo')
+ await expect(build).toBeVisible()
+ await build.getByRole('radio', { name: copy.targets[1] }).check()
+ await expect(build.locator('pre code')).toContainText('targets: [\'alipay\']')
+ await expect(build.locator('[data-directory]')).toHaveText('dist/alipay/dist/')
+ await expect(build.locator('[data-output-file="0"]')).toHaveText('index.axml')
+ await expect(build.locator('[data-build-command]')).toHaveText('pnpm exec wv build -p alipay')
+ await expect(page.locator('#projects build-demo [data-directory]')).toHaveText('dist/weapp/dist/')
+ await tabs.nth(1).focus()
+ await page.keyboard.press('End')
+ await expect(tabs.last()).toBeFocused()
+ await page.keyboard.press('ArrowRight')
+ await expect(tabs.first()).toBeFocused()
+ await page.keyboard.press('ArrowLeft')
+ await expect(tabs.last()).toBeFocused()
+ await page.keyboard.press('Home')
+ await expect(tabs.first()).toBeFocused()
+ await tabs.nth(1).click()
+ await expect(build.locator('[data-directory]')).toHaveText('dist/alipay/dist/')
+ })
+
+ test(`${locale}: registry selection updates command and composition, preserving one choice`, async ({ page }) => {
+ await page.goto(route)
+ const registry = page.locator('#projects registry-demo')
+ await registry.getByRole('checkbox', { name: 'button', exact: true }).uncheck()
+ await expect(registry.locator('[data-registry-button]')).toBeHidden()
+ await expect(registry.locator('code')).not.toContainText('button')
+ await registry.getByRole('checkbox', { name: 'card', exact: true }).uncheck()
+ await expect(registry.getByRole('checkbox', { name: 'input', exact: true })).toBeDisabled()
+ await expect(registry.locator('[data-registry-card]')).toBeHidden()
+ await registry.getByRole('textbox', { name: copy.input }).fill('real-project')
+ await registry.getByRole('checkbox', { name: 'button', exact: true }).check()
+ await expect(registry.getByRole('checkbox', { name: 'input', exact: true })).toBeEnabled()
+ await registry.locator('[data-registry-button]').click()
+ await expect(registry.locator('[data-registry-button]')).toHaveAttribute('aria-pressed', 'true')
+ await expect(registry).toContainText(copy.registryDone)
+ await expect(registry).toContainText(copy.registryNote)
+ await expect(registry.locator('code')).toContainText('button input')
+ })
+}
+
+test('copy reports success and clipboard failures accessibly', async ({ page }) => {
+ await page.addInitScript(() => {
+ Object.defineProperty(navigator, 'clipboard', { configurable: true, value: { writeText: async (text: string) => {
+ sessionStorage.setItem('copied-demo', text)
+ } } })
+ })
+ await page.goto('/')
+ const code = page.locator('hero-demos style-demo demo-code')
+ await code.getByRole('button', { name: '复制代码' }).click()
+ await expect(code.getByRole('status')).toHaveText('已复制')
+ expect(await page.evaluate(() => sessionStorage.getItem('copied-demo'))).toBe(await code.locator('code').textContent())
+ await page.evaluate(() => {
+ Object.defineProperty(navigator, 'clipboard', { value: { writeText: async () => {
+ throw new Error('Permission denied')
+ } } })
+ })
+ await code.getByRole('button', { name: '复制代码' }).click()
+ await expect(code.getByRole('status')).toContainText('复制失败')
+})
+
+test('default examples remain readable without JavaScript', async ({ browser, viewport }) => {
+ const context = await browser.newContext({ javaScriptEnabled: false, viewport })
+ const page = await context.newPage()
+ for (const route of ['/', '/en/']) {
+ await page.goto(route)
+ await expect(page.locator('hero-demos style-demo code')).toContainText('bg-emerald-700')
+ await expect(page.locator('hero-demos [role="tablist"]')).toBeHidden()
+ await expect(page.locator('.demo-controls:visible, [data-copy]:visible')).toHaveCount(0)
+ await expect(page.locator('#projects build-demo [data-directory]')).toBeVisible()
+ await expect(page.locator('#projects registry-demo code')).toContainText('@varo-ui/cli')
+ await expect(page.locator('#projects registry-demo input[type="text"]')).toBeEditable()
+ }
+ await context.close()
+})
+
+test('reduced motion updates results without motion or layout shifts', async ({ page }) => {
+ await page.emulateMedia({ reducedMotion: 'reduce' })
+ await page.goto('/')
+ const hero = page.locator('hero-demos')
+ const box = await hero.boundingBox()
+ for (const tab of await hero.getByRole('tab').all()) {
+ await tab.click()
+ expect(await hero.boundingBox()).toEqual(box)
+ await tab.hover()
+ await tab.focus()
+ const animated = await hero.evaluate(element => [...element.querySelectorAll('*')].filter((child) => {
+ const style = getComputedStyle(child)
+ return style.transform !== 'none' || style.transitionDuration !== '0s' || style.animationName !== 'none'
+ }).length)
+ expect(animated).toBe(0)
+ }
+ await hero.locator('input[value="card"]').uncheck()
+ expect(await hero.boundingBox()).toEqual(box)
+ expect(await page.evaluate(() => document.getAnimations().length)).toBe(0)
+})
+
+test('all demo states fit at 320 through 1440px without resizing the hero', async ({ page }) => {
+ await page.emulateMedia({ reducedMotion: 'reduce' })
+ for (const route of ['/', '/en/']) {
+ await page.goto(route)
+ for (const width of [320, 390, 620, 720, 900, 1100, 1440]) {
+ await page.setViewportSize({ width, height: 1000 })
+ const hero = page.locator('hero-demos')
+ const box = await hero.boundingBox()
+ for (const tab of await hero.getByRole('tab').all()) {
+ await tab.click()
+ expect(await hero.boundingBox(), `${route} ${width}`).toEqual(box)
+ const overflow = await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth + 1)
+ expect(overflow, `${route} ${width}`).toBe(false)
+ const clipped = await hero.locator('button:visible, select:visible, .demo-pane-heading:visible').evaluateAll(elements => elements.filter(element => element.scrollWidth > element.clientWidth + 1).map(element => element.textContent))
+ expect(clipped, `${route} ${width}`).toEqual([])
+ }
+ }
+ }
+})
diff --git a/apps/web/tests/e2e/site.spec.ts b/apps/web/tests/e2e/site.spec.ts
index 477fca0..443a223 100644
--- a/apps/web/tests/e2e/site.spec.ts
+++ b/apps/web/tests/e2e/site.spec.ts
@@ -1,55 +1,21 @@
import AxeBuilder from '@axe-core/playwright'
import { expect, test } from '@playwright/test'
-import varoShowcase from '../../src/content/showcases/varo.json' with { type: 'json' }
-import tailwindShowcase from '../../src/content/showcases/weapp-tailwindcss.json' with { type: 'json' }
-import viteShowcase from '../../src/content/showcases/weapp-vite.json' with { type: 'json' }
+import { demoCopy } from '../../src/components/home/demos/copy'
import { siteCopy } from '../../src/i18n/ui'
-const projectShowcases = [tailwindShowcase, viteShowcase, varoShowcase]
const retiredVisuals = 'canvas, [data-shader-canvas], [data-shader], [data-shader-frame], [data-webgl-fallback], [data-art], .project-art, [class^="art-"], [class*=" art-"]'
async function expectHomeVisuals(page: import('@playwright/test').Page, locale: 'zh-CN' | 'en') {
- const heroVisual = tailwindShowcase.images[0]
- const hero = page.locator('.home-hero-stage img').first()
- await expect(hero).toBeVisible()
- await expect(hero).toHaveAttribute('src', heroVisual.src)
- await expect(hero).toHaveAttribute('alt', heroVisual.locales[locale].alt)
- await expect(hero).toHaveAttribute('width', String(heroVisual.width))
- await expect(hero).toHaveAttribute('height', String(heroVisual.height))
- await expect(hero).toHaveAttribute('fetchpriority', 'high')
- await expect.poll(() => hero.evaluate(image => (image as HTMLImageElement).naturalWidth)).toBeGreaterThan(0)
- await expect(page.locator('img[fetchpriority="high"]')).toHaveCount(1)
- await expect(page.locator('img[src*="build-lens"], img[src*="tailwind-weapp"], img[src*="vite-components"], img[src*="varo-home"]')).toHaveCount(0)
- const desktop = page.viewportSize()!.width > 720
- await expect(page.locator('.home-hero-example:visible')).toHaveCount(desktop ? 3 : 1)
+ await expect(page.locator('.home-hero-stage img, #projects picture')).toHaveCount(0)
await expect(page.locator(retiredVisuals)).toHaveCount(0)
- const visuals = page.locator('#projects [data-project-visual]')
- const expectedVisuals = projectShowcases.flatMap(showcase => showcase.images)
- await expect(visuals).toHaveCount(expectedVisuals.length)
- for (const [index, visual] of expectedVisuals.entries()) {
- const figure = visuals.nth(index)
- const image = figure.locator('img')
- await figure.scrollIntoViewIfNeeded()
- await expect(image).toBeVisible()
- await expect(image).toHaveAttribute('src', visual.src)
- await expect(figure.locator('source')).toHaveAttribute('srcset', visual.variants.map(variant => `${variant.avif} ${variant.width}w`).join(', '))
- await expect(image).toHaveAttribute('sizes', /.+/)
- await expect(image).toHaveAttribute('srcset', visual.variants.map(variant => `${variant.src} ${variant.width}w`).join(', '))
- await expect(image).toHaveAttribute('width', String(visual.width))
- await expect(image).toHaveAttribute('height', String(visual.height))
- await expect(image).toHaveAttribute('loading', 'lazy')
- await expect(image).toHaveAttribute('alt', visual.locales[locale].alt)
- await expect(figure.locator('figcaption')).toHaveText(visual.locales[locale].caption)
- await image.evaluate(element => (element as HTMLImageElement).decode())
- const loaded = await image.evaluate((element) => {
- const image = element as HTMLImageElement
- return { src: new URL(image.currentSrc).pathname, complete: image.complete, width: image.naturalWidth, ratio: image.clientHeight / image.clientWidth }
- })
- expect(loaded.complete).toBe(true)
- expect(loaded.width).toBeGreaterThan(0)
- expect(visual.variants.flatMap(variant => [variant.src, variant.avif])).toContain(loaded.src)
- expect(loaded.ratio).toBeCloseTo(visual.height / visual.width, 2)
- }
+ await expect(page.locator('hero-demos [role="tabpanel"]:visible')).toHaveCount(1)
+ await expect(page.locator('hero-demos [data-demo="style"]')).toBeVisible()
+ await expect(page.locator('#projects [data-demo]')).toHaveCount(3)
+ await expect(page.locator('#projects [data-demo="style"]')).toContainText(demoCopy[locale].button)
+ await expect(page.locator('#projects [data-demo="build"]')).toContainText(demoCopy[locale].output)
+ await expect(page.locator('#projects [data-demo="registry"]')).toContainText(demoCopy[locale].registryNote)
+ const images = await page.evaluate(() => performance.getEntriesByType('resource').map(entry => entry.name).filter(url => /\/media\/(?:showcase|projects)\//.test(url)))
+ expect(images).toEqual([])
}
async function enableAnalyticsTestMode(page: import('@playwright/test').Page) {
@@ -101,7 +67,7 @@ test('renders the bilingual ecosystem home with valid metadata', async ({ page }
{ href: 'https://vite.weapp.dev/', target: '_blank', rel: 'noreferrer' },
{ href: 'https://github.com/daguanren21/Varo#readme', target: '_blank', rel: 'noreferrer' },
])
- await expect(page.locator('.home-project-visual-link').evaluateAll(links => links.map(link => link.getAttribute('href')))).resolves.toEqual([
+ await expect(page.locator('.home-project-demo-link').evaluateAll(links => links.map(link => link.getAttribute('href')))).resolves.toEqual([
'https://tw.weapp.dev/',
'https://vite.weapp.dev/',
'https://github.com/daguanren21/Varo#readme',
@@ -225,12 +191,12 @@ test('home hero follows the active theme without an inverted surface', async ({
test('reduced motion keeps content visible and product interactions stationary', async ({ page }) => {
await page.emulateMedia({ reducedMotion: 'reduce' })
await page.goto('/')
- const movingOrHidden = () => page.locator('[data-reveal], [data-hero-enter], [data-project-visual] img').evaluateAll(elements => elements.filter((element) => {
+ const movingOrHidden = () => page.locator('[data-reveal], .home-hero-copy, .home-project-rail, .home-demo button:visible').evaluateAll(elements => elements.filter((element) => {
const style = getComputedStyle(element)
return style.opacity !== '1' || style.transform !== 'none' || style.animationName !== 'none' || style.transitionDuration !== '0s'
}).map(element => element.tagName))
expect(await movingOrHidden()).toEqual([])
- for (const link of await page.locator('.home-project-visual-link').all()) {
+ for (const link of await page.locator('.home-project-demo-link').all()) {
await link.hover()
expect(await movingOrHidden()).toEqual([])
await link.focus()
diff --git a/docs/architecture/homepage.md b/docs/architecture/homepage.md
index c924bf2..ab483c9 100644
--- a/docs/architecture/homepage.md
+++ b/docs/architecture/homepage.md
@@ -1,61 +1,51 @@
# 首页代码边界
-此次拆分用于减少布局、项目维护和截图更新触碰同一文件的机会。它不能自动解决产品方向不同造成的语义冲突；并行任务仍应保持范围明确，并在合并前与最新 main 校验。
+首页按章节组合，交互演示按产品能力独立维护。并行任务应约定章节和组件所有权；结构拆分不能替代对产品方向冲突的人工判断。
-## 文件职责
+## 职责与数据流
-| 变更类型 | 修改入口 | 边界 |
-| ------------------------------ | --------------------------------------------------- | --------------------------------------------------------------------------- |
-| 首页章节顺序 | `apps/web/src/components/HomePage.astro` | 只组合章节和读取首页数据 |
-| 单个章节布局 | `apps/web/src/components/home/Home*.astro` | Hero、About、Projects、Commercial、Vision、Releases、Collaboration 独立维护 |
-| 项目展示行 | `apps/web/src/components/home/HomeProjectRow.astro` | 使用传入的项目与展示配置，不按项目 ID 判断样式 |
-| 首页 CSS | `apps/web/src/styles/home.css` | 包含首页布局、断点和运动效果，仅首页引入 |
-| 全站样式 | `apps/web/src/styles/global.css` | 主题 token、基础排版、通用 reveal 和无障碍偏好 |
-| 首页文案 | `apps/web/src/i18n/home/zh-CN.ts`、`en.ts` | `i18n/ui.ts` 组合并保留既有 `siteCopy` 接口 |
-| 项目状态、链接和详情内容 | `apps/web/src/content/projects/.json` | 手工维护，不受截图生成器改写 |
-| 首页选品、排序、布局和阶段标签 | `apps/web/src/content/home-projects.ts` | 显式配置；不跟随整个项目目录自动增加 |
-| 首页生成素材 | `apps/web/src/content/showcases/.json` | 仅包含 `images`，由素材生成命令维护 |
-| 内容校验和类型 | `apps/web/src/content/schemas.ts` | Astro collection 与 TypeScript 类型共享 schema |
-
-## 数据流
+- `HomePage.astro` 只组合章节和读取首页数据；`home.css` 负责章节布局和响应式断点。
+- `content/home-projects.ts` 显式指定项目顺序、演示类型、反向布局和双语阶段标签。新增目录项目不会自动进入首页。
+- `lib/home-projects.ts` 是纯组装器，只关联目录与首页选品，校验未知项目和重复选品。首页不再要求 showcase 图片。
+- `components/home/demos/` 的 Style、Build、Registry 分别拥有视图、局部状态及预设；`HomeDemo` 只按受限类型选择组件。
+- `HeroDemos` 只拥有标签选择和键盘导航；Hero 与项目区复用演示实现，每个实例的状态和表单名称独立。
+- `CodePanel` 共享代码显示、复制与错误反馈；代码通过结构化文本片段生成，客户端使用 DOM textContent，避免 HTML 注入。
+- `demo.css` 只负责演示内部布局、容器断点与操作后的颜色过渡；`copy.ts` 维护演示双语文案。不要把演示状态或样式放进全局脚本。
+- 项目 JSON 继续拥有状态、链接、metrics 输入和详情页 `primary/secondary` 图片。历史 showcase collection、图片和采集命令保留，首页不再读取它们。
```mermaid
flowchart LR
- P[项目元数据] --> C[项目目录]
- C --> D[详情页 / Header / Footer]
- C --> H[首页数据组合]
+ P[项目目录] --> D[详情页 / Header / Footer]
+ P --> H[首页数据组合]
E[首页选品配置] --> H
- S[生成的 showcase 素材] --> H
H --> R[Hero / 项目展示区]
+ S[演示预设与双语文案] --> C[独立演示组件]
+ C --> R
```
-`lib/home.ts` 负责加载素材 collection，纯函数 `lib/home-projects.ts` 按 ID 关联三种数据。新增项目可先进入目录和详情页，不必同时准备首页截图。需要出现在首页时，再添加素材和选品配置。缺少项目、缺少图片、孤立素材引用或重复选品会报错，避免静默漏图或读取 `undefined`。
-
-Hero 和项目区共享组装后的 `showcase`，详情页只使用项目 JSON 中的 `primary`、`secondary`。更新项目状态会自然传入首页，不需要修改组件。展示模式与图片 `sizes` 的回退规则放在 `components/home/media-sizes.ts`；调整媒体布局时同时检查该文件，懒加载图片优先使用实际渲染尺寸。
-
-共享主题声明使用 `@theme inline static`，确保独立页面 CSS 引用的字体等变量始终存在。否则 Tailwind 只分析全局入口时可能裁掉这些变量，使外部 CSS 的 `font` 简写失效。E2E 检查首页标签的实际字号和字体，覆盖这一问题。
-
-## 并行修改约定
-
-- 截图任务只更新源截图、采集记录、生成素材和对应 caption，不改项目状态或页面布局。
-- 产品资料任务只更新对应项目文件；增加首页入口属于单独的选品决定。
-- 首页布局任务修改具体章节及 `home.css`，只有全站主题或基础排版变化才修改 `global.css`。
-- 不使用 Git 的 `ours`/`theirs` 合并策略或自动保留一侧的属性来掩盖内容冲突。先确认哪些产品变化需要保留，再逐项合并。
-- 多个任务避免长时间同时重写同一章节；将纯移动重构与功能变更分开提交，便于审查。
+## 演示来源与行为
-## 验证
+- Tailwind 示例由本仓库已有 weapp-tailwindcss Vite 插件生成 Web CSS。有限类名写成完整字面量，`@source '../**/*.{astro,ts}'` 能扫描全部状态。预览类名和展示代码来自同一状态函数。
+- weapp-vite 配置摘自 [multi-platform 文档](https://github.com/weapp-vite/weapp-vite/blob/add5d6c7f31e74e9fa2290e43891548f2a00eccc/website/guide/multi-platform.md)。展示单目标 allowlist、CLI 参数、原生扩展名，以及该文档多平台模板的输出目录。目录并非所有自定义工程的默认值；保留模板和 experimental 标注。
+- Varo 命令摘自 [README](https://github.com/daguanren21/Varo/blob/d00ea30fdd2caf84ce383c05291517f2e6af1861/README.md)，采用当前 `@varo-ui/cli add --target weapp`。详情页历史元数据在本次首页变更范围之外。原生 HTML 组合是带标注的交互示意，不加载 Vue/Varo runtime，不执行 CLI，不调用 AI。
+- 无 JS 时服务器输出完整默认代码与结果，增强控件隐藏；事件绑定完成后启用控件。Registry 的文本输入保留原生可编辑能力，组件选择至少保留一项。
+- 动效只响应用户操作，不自动轮播；减少动态效果时立即更新。演示不挂载 reveal，其他章节继续使用全局 2.5 秒超时兜底。
+- `@theme inline static` 必须保留，防止独立 CSS 引用的字体变量被 Tailwind 裁掉。
-`lib/home-projects.test.ts` 覆盖目录扩展、排序独立性、项目资料与素材分别更新、失效引用和 schema 校验。原 E2E 继续检查页面、analytics、链接、SEO 和图片表现。
+## 维护与验证
-本次实际运行素材生成器前后，三个项目 JSON 的 SHA-256 完全一致。生成 WebP/AVIF 的内容也保持不变。schema 会拒绝在项目 visuals 中重新加入 showcase，以及在生成素材中混入项目状态。
+演示变更只修改对应视图、预设和测试；资料变更只修改项目 JSON。截图生成器不得改写演示选品或产品资料。不要用 Git ours/theirs 策略掩盖语义冲突。
-完整检查通过：19 项单测、50 项 E2E（2 项线上统计测试默认跳过）、14 个构建页面、19 项必需产物及 28 组视觉检查。重构前后 56 张截图尺寸一致；初次对比有 51 张逐像素一致，其余差异均位于图片内部，图片外的布局和文字逐像素一致。截图脚本已补充响应式候选切换后的等待，避免更改 `loading` 属性后立即截图造成时序差异。
+单测覆盖目录扩展与排序、元数据与展示配置独立性、预设到代码和命令的一致性。E2E 覆盖真实计算样式、平台输出、组件选择边界、实例隔离、标签键盘操作、剪贴板错误和无 JS 降级，并保留 SEO、analytics、主题、reveal 与详情页图片检查。
```bash
-rtk pnpm check
+rtk pnpm --filter @weapp.dev/web check
+rtk pnpm --filter @weapp.dev/web test
rtk pnpm --filter @weapp.dev/web build
rtk pnpm --filter @weapp.dev/web test:e2e
-rtk pnpm --filter @weapp.dev/web media:verify-showcase
+rtk pnpm --filter @weapp.dev/web lint
+rtk pnpm --filter @weapp.dev/web lint:styles
+rtk pnpm --filter @weapp.dev/web media:verify-home
```
-截图复核使用现有本地预览 `http://127.0.0.1:4321/`。重构前截图保留在 `apps/web/.cache/structure-before/`，重构后使用 `apps/web/.cache/showcase-qa/`。
+视觉检查输出到 `apps/web/.cache/demo-qa/`，包含双语首页、三个标签与操作状态、详情页和 Pricing 的桌面/移动端浅深主题。前后对比读取 `.cache/showcase-qa/` 中的历史截图；旧 `media:verify-showcase` 命令作为新验证入口的别名保留。素材采集和截图验证都是显式维护命令，正常构建不依赖外部仓库或开发者工具。
diff --git a/docs/plans/2026-09-07-interactive-home.md b/docs/plans/2026-09-07-interactive-home.md
new file mode 100644
index 0000000..8e01811
--- /dev/null
+++ b/docs/plans/2026-09-07-interactive-home.md
@@ -0,0 +1,50 @@
+# 首页代码与交互演示交付记录
+
+实施分支：`codex/static-product-visuals`。首页案例截图已替换为样式、构建和组件演示。详情页素材、产品状态、路由、部署模型及依赖版本保持原有契约。
+
+PR 分支：`codex/interactive-home-demos`。原 PR #6 已合并，本次从 main `fcb8290` 创建新分支，仅应用交互演示提交，保留 #7 的贡献者基金页面及相关更新。
+
+## 最终实现
+
+- Hero 标签与项目区复用独立的 Astro 演示组件；每个实例拥有自己的状态。无自动播放或模拟构建/AI 日志。
+- Tailwind 预设由现有构建生成真实 CSS；代码与实际类名来自同一状态。
+- weapp-vite 展示官方多平台模板的配置摘录、命令和输出目录，保留 experimental 标注。
+- Varo 使用上游当前 `@varo-ui/cli add --target weapp` 命令，原生 HTML 组合标注为交互示意，产品仍标记规划中。
+- 移动端先显示结果，再显示可滚动代码。控件区使用稳定高度，修复英文 320px 换行造成的约 2px 标签切换跳动。
+- 移除首页截图组件、图片布局字段和旧入场动画残留；历史素材与显式采集命令保留。
+
+来源版本、数据流和维护边界见 [首页架构说明](../architecture/homepage.md)。
+
+## 最终验证结果
+
+按 check、test、build、test:e2e 顺序完成最终回归：
+
+| 命令 | 实际结果 |
+| ---------------------------------------------------- | ---------------------------------------------- |
+| `rtk pnpm --filter @weapp.dev/web check` | 76 个文件；0 errors、0 warnings、1 个既有 hint |
+| `rtk pnpm --filter @weapp.dev/web test` | 6 个测试文件，22 passed |
+| `rtk pnpm --filter @weapp.dev/web build` | 14 个页面；19 项必需产物及全部内部链接校验通过 |
+| `rtk pnpm --filter @weapp.dev/web test:e2e` | 70 passed、2 skipped，9.8 秒 |
+| `rtk pnpm --filter @weapp.dev/web lint` | 通过 |
+| `rtk pnpm --filter @weapp.dev/web lint:styles` | 通过 |
+| `rtk pnpm --filter @weapp.dev/web media:verify-home` | 28 组路由、视口与主题检查通过 |
+
+唯一类型提示为详情页既有的 `document.execCommand('copy')` 弃用提示。默认跳过的两项测试验证线上 Google Analytics 请求；本地 analytics 契约、隐私偏好和错误恢复均通过。新代码复制使用 Clipboard API，并测试成功与失败反馈。
+
+E2E 覆盖双语交互、实际 CSS、输出文件映射、最少一个 Registry 组件、实例隔离、键盘、主题、无 JavaScript、reduced-motion、reveal 超时、无障碍和 320–1440px 响应式状态。首页未请求旧案例图片，详情页图片正常加载。
+
+## 截图与预览
+
+创建 PR 前在最新 main 基础上再次按相同顺序回归：check 检查 80 个文件，0 errors、0 warnings、1 个既有 hint；7 个测试文件、23 项单测通过；构建 16 个页面、21 项必需产物及全部内部链接通过；E2E 为 72 passed、2 skipped（11.5 秒）；根目录 `rtk pnpm lint` 同时通过 ESLint 和 Stylelint。新增基线的贡献者页面与中英文路由测试均通过。
+
+预览：
+
+ {content.name}
+
+ {demoCopy[locale].official}
+
-
+ {String(index + 1).padStart(2, '0')} / {project.stage[locale]}
diff --git a/apps/web/src/components/home/demos/BuildDemo.astro b/apps/web/src/components/home/demos/BuildDemo.astro new file mode 100644 index 0000000..3ceedb3 --- /dev/null +++ b/apps/web/src/components/home/demos/BuildDemo.astro @@ -0,0 +1,54 @@ +--- +import { Folder, FileCode } from '@lucide/astro' +import type { Locale } from '../../../types/project' +import CodePanel from './CodePanel.astro' +import { demoCopy } from './copy' +import { buildExample, buildTargets } from './build' + +interface Props { locale: Locale, instance: string } +const { locale, instance } = Astro.props +const copy = demoCopy[locale] +const example = buildExample(0) +--- +
+
+
+
+
+
+
+ {copy.output}
+
+
+
+ {example.directory}/pages/index/
+ - {example.files.map((file, index) =>
{file})}
{example.command}
+ {copy.buildNote}
+ {filename}
+ {parts.map(part => {part.text})}
+
+ {projects.map((project, index) =>
+ {projects.map((project, index) => )}
+
+ {projects[0].data.locales[locale].name}
+
+
+
+
+
+
+
+ {copy.registryNote}
+
+
+
+
+ {copy.registryTitle}
+
+
+ 3 / 3 · {copy.selected}
+
+
+
+
+
+
+
+ {copy.result}CSS
+
+ {copy.styleNote}
+