80fc5c8a0f
- 在 SftpFilePickerModal 中添加搜索功能 - 添加显示/隐藏文件切换按钮（参考 SftpView） - Remote->Many 模式下目标连接列表自动排除源连接 - 全选功能自动排除源连接 - 添加空状态提示信息 - 优化用户体验和交互逻辑
44 lines
1.7 KiB
Markdown
44 lines
1.7 KiB
Markdown
# SSH Manager Transfer Console - Design System (Master)
|
|
|
|
Goal: a fast, reliable, ops-style UI for moving data across many hosts.
|
|
|
|
Design principles
|
|
- Transfer-first: primary surface is "plans / queue / progress"; connections are supporting data.
|
|
- Dense but calm: show more information without visual noise; consistent rhythm and spacing.
|
|
- Failure is actionable: errors are specific, local to the job, and keep context.
|
|
- Keyboard-friendly: visible focus rings, logical tab order, no hover-only actions.
|
|
|
|
Color and surfaces (dark-first)
|
|
- Background: deep slate with subtle gradient + faint grid/noise.
|
|
- Surfaces: layered cards (solid + slight transparency) with visible borders.
|
|
- Accent: cyan for primary actions and progress.
|
|
- Status:
|
|
- Success: green
|
|
- Warning: amber
|
|
- Danger: red
|
|
|
|
Typography
|
|
- Headings: IBM Plex Sans (600-700)
|
|
- Body: IBM Plex Sans (400-500)
|
|
- Mono (paths, hostnames, commands): IBM Plex Mono
|
|
|
|
Spacing and layout
|
|
- App shell: left rail (nav) + main content; content uses max width on desktop.
|
|
- Cards: 12-16px padding on mobile, 16-20px on desktop.
|
|
- Touch targets: >= 44px for buttons / list rows.
|
|
|
|
Interaction
|
|
- Buttons: disable during async; show inline spinner + label change ("Starting…").
|
|
- Loading: skeleton for lists; avoid layout jump.
|
|
- Motion: 150-250ms transitions; respect prefers-reduced-motion.
|
|
|
|
Accessibility
|
|
- Contrast: normal text >= 4.5:1.
|
|
- Focus: always visible focus ring on interactive elements.
|
|
- Icon-only buttons must have aria-label.
|
|
|
|
Transfer UX patterns
|
|
- "Plan" = input + targets + options; "Run" produces jobs in a queue.
|
|
- Queue rows show: source, targets count, status, progress, started/finished, retry.
|
|
- Progress: per-target progress when available (XHR upload), otherwise discrete states.
|