更新新需求-采集
This commit is contained in:
super
177
frontend-vue/DESIGN.md
Normal file
177
frontend-vue/DESIGN.md
Normal file
@@ -0,0 +1,177 @@
|
||||
# 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
|
||||
- [ ] 图二和图三的字段是否需要完全一致，目前按“共用主流程 + 源素材差异化”实现
|
||||
- [ ] 后续是否需要直接接入生成任务接口，目前仅实现本地工作台和交互草稿
|
||||
Reference in New Issue
Block a user