101 lines
3.1 KiB
Markdown
101 lines
3.1 KiB
Markdown
# Popup Update Panel Design
|
|
|
|
## Goal
|
|
|
|
Redesign the extension popup so it feels like a compact internal tool instead of a stretched document. The new popup should prioritize readability, clear grouping, and obvious update actions while keeping the interaction model unchanged.
|
|
|
|
## Confirmed Direction
|
|
|
|
- Visual style: enterprise tool
|
|
- Primary problem to solve: information feels crowded and hard to read
|
|
- Layout freedom: use whatever structure best improves clarity
|
|
|
|
## Scope
|
|
|
|
This change only redesigns the popup presentation layer:
|
|
|
|
- improve popup layout
|
|
- improve spacing and typography
|
|
- improve button hierarchy
|
|
- improve update-status presentation
|
|
|
|
This change does not alter:
|
|
|
|
- auth flow
|
|
- update-check logic
|
|
- download behavior
|
|
- background message behavior
|
|
|
|
## Layout
|
|
|
|
Use a grouped card layout instead of one long text column.
|
|
|
|
Recommended structure:
|
|
|
|
1. Header
|
|
- compact product title on one line
|
|
2. Account card
|
|
- login state
|
|
- current user name
|
|
3. Update card
|
|
- current version
|
|
- latest version or current status
|
|
- release notes
|
|
- primary and secondary action buttons
|
|
- short follow-up instruction text
|
|
4. Footer action
|
|
- low-emphasis sign-out button
|
|
|
|
## Visual Rules
|
|
|
|
- Increase popup width to a more usable fixed tool width.
|
|
- Use a soft neutral page background with white content cards.
|
|
- Reduce title size significantly from the current oversized stacked text.
|
|
- Use a clear type scale:
|
|
- product title: medium emphasis
|
|
- section title: medium emphasis
|
|
- status/version rows: normal emphasis
|
|
- helper text: smaller and lighter
|
|
- Keep the palette restrained and neutral.
|
|
- Make `下载更新包` the primary button.
|
|
- Make `下载使用说明` a secondary button.
|
|
- Make `退出登录` a tertiary or low-emphasis button.
|
|
|
|
## Update State Presentation
|
|
|
|
- `checking`: show a compact in-progress line inside the update card.
|
|
- `latest`: show a simple success-style status without action buttons.
|
|
- `available`: show a clear “发现新版本” status block with versions and actions.
|
|
- `error`: show a readable warning block instead of generic broken-looking text flow.
|
|
|
|
## Content Rules
|
|
|
|
- Keep product name to one visual line or two short lines max.
|
|
- Avoid large paragraphs in the popup.
|
|
- Release notes should stay as a compact bullet list.
|
|
- The post-download instruction should be one concise sentence.
|
|
- Version labels should align consistently so the user can compare current/latest quickly.
|
|
|
|
## Implementation Notes
|
|
|
|
- Keep the existing popup DOM entrypoints and rendering flow.
|
|
- Focus changes in `src/popup/view.ts` first.
|
|
- Only adjust popup controller code if needed to support cleaner status rendering.
|
|
- Prefer CSS embedded in the popup HTML/view flow only as needed; do not expand scope into unrelated refactors.
|
|
|
|
## Testing
|
|
|
|
Add or update popup rendering tests for:
|
|
|
|
- logged-in layout still renders correctly
|
|
- available update state still shows current/latest versions
|
|
- update action buttons still exist
|
|
- latest/error states still render expected text
|
|
|
|
## Out of Scope
|
|
|
|
- new popup features
|
|
- star chart page banners
|
|
- animation-heavy UI
|
|
- branding-heavy marketing visuals
|