80fc5c8a0f
- 在 SftpFilePickerModal 中添加搜索功能 - 添加显示/隐藏文件切换按钮（参考 SftpView） - Remote->Many 模式下目标连接列表自动排除源连接 - 全选功能自动排除源连接 - 添加空状态提示信息 - 优化用户体验和交互逻辑
1.7 KiB
1.7 KiB
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.