# Design

## Source of truth
- Status: Active
- Last refreshed: 2026-06-09
- Primary product surfaces:
  - `image-video.html`
  - `src/pages/image-video/ImageVideoPage.vue`
- Evidence reviewed:
  - `src/pages/image-video/ImageVideoPage.vue`
  - `src/styles/main.css`
  - `src/styles/tokens.css`
  - `src/components/layout/PageShell.vue`
  - `../yaoyaoAI/aiclientpureui/src/styles/main.css`
  - `../yaoyaoAI/aiclientpureui/src/components/dashboard/DashboardCard.vue`
  - `../yaoyaoAI/aiclientpureui/src/components/workflow/Step02AudioVideo.vue`
  - `../yaoyaoAI/aiclientpureui/src/components/workflow/Step03VideoEdit.vue`

## Brand
- Personality:
  - Quiet, tool-oriented, high-density AI workflow workspace
  - Dark professional console rather than marketing landing page
- Trust signals:
  - Structured step cards
  - Stable layout grid
  - Clear state summaries and output preview areas
- Avoid:
  - Light hero-page styling
  - Decorative floating cards wrapped inside larger cards
  - Tailwind or PrimeVue-specific visual copies that do not fit Element Plus

## Product goals
- Goals:
  - Add a real `带货视频` module inside `frontend-vue`
  - Put `视频复刻` and `图生视频` on one page with tab switching
  - Match the visual tone of `aiclientpureui`
  - Extract reusable workflow components for future media modules
- Non-goals:
  - Backend API integration in this phase
  - Rebuilding the entire `aiclientpureui` navigation shell
- Success signals:
  - The page is screenshot-ready
  - Form sections are organized and legible at desktop widths
  - Shared components are reusable beyond this one page

## Personas and jobs
- Primary personas:
  - Internal operators creating or editing commerce videos
  - Content operations staff iterating scripts, scenes, and avatars quickly
- User jobs:
  - Upload source material
  - Configure video generation parameters
  - Adjust scene, face, script, and product settings
  - Review an output summary before starting generation
- Key contexts of use:
  - Desktop-heavy internal tool usage
  - Repeated daily workflows with dense settings

## Information architecture
- Primary navigation:
  - Keep a lightweight page header with module switch and back link
- Core routes/screens:
  - `image-video.html` as the image/video workspace entry
- Content hierarchy:
  - Page header and module switch
  - Delivery-video tabs
  - Step-oriented configuration grid
  - Preview and submission area

## Design principles
- Principle 1:
  - Reuse structure, not framework-specific implementation. Port the dashboard/card language from `aiclientpureui` into Element Plus-native components.
- Principle 2:
  - Keep the screen directly operable. The first viewport should show the active workflow, not a placeholder entrance.
- Tradeoffs:
  - Prefer a compact dark console layout over a literal flowchart reconstruction from the requirement images.

## Visual language
- Color:
  - Deep neutral background with restrained blue-indigo highlights
  - High-contrast text, low-contrast secondary copy
- Typography:
  - Existing sans-serif stack from `tokens.css`
  - Compact section headings and dense form labels
- Spacing/layout rhythm:
  - 20px to 24px outer spacing
  - 16px card padding
  - Multi-column grid with stable min widths
- Shape/radius/elevation:
  - 14px to 18px radii
  - Soft border glow, minimal shadow depth
- Motion:
  - Short hover and focus transitions only
- Imagery/iconography:
  - Use media preview boxes and upload placeholders
  - Avoid decorative illustrations

## Components
- Existing components to reuse:
  - `src/components/layout/PageShell.vue`
- New/changed components:
  - Shared dark workflow shell
  - Shared module switch
  - Shared section card
  - Shared choice-pill selector
  - Shared asset dropzone / preview block
- Variants and states:
  - Active/inactive tabs
  - Active/inactive pills
  - Empty vs selected asset states
  - Hover/focus for cards and action buttons
- Token/component ownership:
  - Theme tokens in `src/styles/tokens.css`
  - Global workflow styles in `src/styles/main.css`
  - Shared components under `src/shared/components/ai-workflow/`

## Accessibility
- Target standard:
  - Practical keyboard and screen-readable form semantics for internal desktop usage
- Keyboard/focus behavior:
  - Visible focus ring on pills, buttons, upload areas, and tabs
- Contrast/readability:
  - Maintain strong foreground/background contrast in dark mode
- Screen-reader semantics:
  - Preserve labels for upload regions and tab panels
- Reduced motion and sensory considerations:
  - No large-scale animation

## Responsive behavior
- Supported breakpoints/devices:
  - Primary target desktop >= 1280px
  - Secondary support tablet widths >= 768px
- Layout adaptations:
  - Collapse multi-column workspace into two columns, then one column
  - Preview area stops being sticky on narrow screens
- Touch/hover differences:
  - Controls remain usable without hover-only affordances

## Interaction states
- Loading:
  - Reserved for future backend integration
- Empty:
  - Show upload placeholders and muted guidance text
- Error:
  - Use Element Plus messaging if upload type or action constraints fail
- Success:
  - Local draft actions can confirm save/export interactions
- Disabled:
  - Non-active modules appear disabled but visible
- Offline/slow network, if applicable:
  - Not applicable in the current local-only draft

## Content voice
- Tone:
  - Direct and operational
- Terminology:
  - Prefer commerce-video workflow language: 素材, 场景, 人脸, 话术, 产品, 输出
- Microcopy rules:
  - Short labels
  - Guidance belongs in helper text, not long paragraphs

## Implementation constraints
- Framework/styling system:
  - Vue 3 + TypeScript + Element Plus
- Design-token constraints:
  - Extend current CSS variables instead of introducing Tailwind
- Performance constraints:
  - Keep the page static and local-first until API wiring is required
- Compatibility constraints:
  - Must work within the existing Vite multi-page build
- Test/screenshot expectations:
  - Build must pass
  - Local dev server should render a screenshot-ready page at `image-video.html`

## Open questions
- [ ] 图二和图三的字段是否需要完全一致，目前按“共用主流程 + 源素材差异化”实现
- [ ] 后续是否需要直接接入生成任务接口，目前仅实现本地工作台和交互草稿