|
| 1 | +# UI Refactor Spec |
| 2 | + |
| 3 | +## Why |
| 4 | +当前UI界面存在视觉复杂度过高、代码冗余、性能优化不足等问题。通过重构实现更简洁的视觉设计和更高效的代码结构，提升用户体验和代码可维护性。 |
| 5 | + |
| 6 | +## What Changes |
| 7 | +- 统一CSS变量系统，消除重复定义 |
| 8 | +- 简化动画效果，移除不必要的装饰元素 |
| 9 | +- 优化色彩方案，建立一致的视觉层次 |
| 10 | +- 清理冗余代码和未使用的样式 |
| 11 | +- 简化JavaScript逻辑，移除重复功能 |
| 12 | +- 优化交互流程，提升用户体验 |
| 13 | + |
| 14 | +## Impact |
| 15 | +- Affected specs: UI视觉系统、交互逻辑、性能优化 |
| 16 | +- Affected code: |
| 17 | + - `static/css/index.css` |
| 18 | + - `static/css/animation-additions.css` |
| 19 | + - `static/js/index.js` |
| 20 | + - `pyquick/static/css/main.css` |
| 21 | + - `data/static/css/downloads.css` |
| 22 | + - `data/static/js/common.js` |
| 23 | + |
| 24 | +## ADDED Requirements |
| 25 | + |
| 26 | +### Requirement: Unified CSS Variable System |
| 27 | +The system SHALL provide a centralized CSS variable definition file that all pages reference, eliminating duplicate variable definitions across files. |
| 28 | + |
| 29 | +#### Scenario: CSS Variables Consolidation |
| 30 | +- **WHEN** developer needs to modify theme colors or spacing |
| 31 | +- **THEN** changes are made in a single file and propagate to all pages |
| 32 | + |
| 33 | +### Requirement: Simplified Animation System |
| 34 | +The system SHALL reduce animation complexity by removing non-essential animations and consolidating similar animation definitions. |
| 35 | + |
| 36 | +#### Scenario: Animation Optimization |
| 37 | +- **WHEN** user visits any page |
| 38 | +- **THEN** only essential animations are displayed, reducing CPU usage and improving performance |
| 39 | + |
| 40 | +### Requirement: Clean Color Scheme |
| 41 | +The system SHALL implement a simplified color palette with clear visual hierarchy, removing excessive gradient effects. |
| 42 | + |
| 43 | +#### Scenario: Color Simplification |
| 44 | +- **WHEN** user views the interface |
| 45 | +- **THEN** colors are consistent, accessible, and visually cohesive across all pages |
| 46 | + |
| 47 | +### Requirement: Code Deduplication |
| 48 | +The system SHALL eliminate redundant CSS rules and JavaScript functions across all files. |
| 49 | + |
| 50 | +#### Scenario: Code Cleanup |
| 51 | +- **WHEN** developer reviews the codebase |
| 52 | +- **THEN** no duplicate style definitions or JavaScript functions exist |
| 53 | + |
| 54 | +## MODIFIED Requirements |
| 55 | + |
| 56 | +### Requirement: Card Component Design |
| 57 | +The card component SHALL have simplified hover effects with reduced transform and shadow complexity. |
| 58 | + |
| 59 | +**Changes:** |
| 60 | +- Remove `::before` light sweep animation |
| 61 | +- Simplify hover transform from `translateY(-5px) scale(1.02)` to `translateY(-3px)` |
| 62 | +- Reduce shadow complexity from `--shadow-xl` to `--shadow-md` |
| 63 | + |
| 64 | +### Requirement: Theme Toggle Functionality |
| 65 | +The theme toggle SHALL maintain functionality while reducing notification overhead. |
| 66 | + |
| 67 | +**Changes:** |
| 68 | +- Remove theme change notification popup |
| 69 | +- Simplify transition effects |
| 70 | +- Consolidate theme-related CSS variables |
| 71 | + |
| 72 | +### Requirement: Email Popup Component |
| 73 | +The email popup SHALL have a cleaner design with fewer decorative elements. |
| 74 | + |
| 75 | +**Changes:** |
| 76 | +- Remove gradient header background |
| 77 | +- Simplify border and shadow styles |
| 78 | +- Reduce animation complexity |
| 79 | + |
| 80 | +## REMOVED Requirements |
| 81 | + |
| 82 | +### Requirement: Excessive Background Animations |
| 83 | +**Reason**: Background gradient animations consume significant CPU resources on lower-end devices. |
| 84 | +**Migration**: Replace with static gradient or simplified subtle animation. |
| 85 | + |
| 86 | +### Requirement: Card Light Sweep Effect |
| 87 | +**Reason**: The `::before` pseudo-element animation adds visual noise without functional benefit. |
| 88 | +**Migration**: Remove entirely, rely on simpler hover states. |
| 89 | + |
| 90 | +### Requirement: Float Animation on Multiple Elements |
| 91 | +**Reason**: Multiple simultaneous float animations create visual distraction. |
| 92 | +**Migration**: Remove float animations from secondary elements, keep only on primary icons if necessary. |
| 93 | + |
| 94 | +### Requirement: Redundant Theme Notification |
| 95 | +**Reason**: Theme change notification popup adds unnecessary UI complexity. |
| 96 | +**Migration**: Remove notification, rely on visual feedback from icon change. |
| 97 | + |
| 98 | +### Requirement: Duplicate CSS Variable Definitions |
| 99 | +**Reason**: Same variables defined in multiple files increase maintenance burden. |
| 100 | +**Migration**: Create single `variables.css` file imported by all pages. |
0 commit comments