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