feat(web): complete V21 UI redesign for all pages

- Replaced Ant Design Card/Layout with V21-compliant components
- Updated Header, MainLayout to V21 sticky top navigation
- Redesigned WorkspaceList, ProjectAssets, ProjectResults, ProjectTitles, ProjectVoices, ProjectGeneration with V21 card/grid system
- Added V21 color scheme, typography, spacing, pill badges, vertical/video cards
- Updated Login page and Plans subscription page to V21 design
- CSS-only styling without Ant Design overrides where possible
This commit is contained in:
Xiaoxia AI
2026-06-25 14:53:22 +08:00
parent e40a7d4df9
commit a0ea960eb8
19 changed files with 1586 additions and 2259 deletions
@@ -0,0 +1,105 @@
/* V21 配音库 */
.xx-project-voices {
}
.xx-voice-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 1200px) {
.xx-voice-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.xx-voice-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.xx-voice {
text-align: center;
border: 2px solid #e2e8f0;
border-radius: 18px;
background: white;
padding: 14px;
cursor: pointer;
transition: all 0.2s;
position: relative;
}
.xx-voice:hover {
border-color: #4f46e5;
}
.xx-voice.selected {
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.xx-voice.selected::after {
content: '✓';
position: absolute;
right: -7px;
top: -7px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #4f46e5;
color: white;
display: grid;
place-items: center;
font-weight: 900;
}
.voice-icon {
width: 54px;
height: 54px;
margin: 0 auto 9px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
font-size: 24px;
background: linear-gradient(135deg, #4f46e5, #6366f1);
}
.xx-voice div {
font-weight: 850;
font-size: 14px;
color: #0f172a;
}
.xx-voice small {
display: block;
color: #64748b;
margin-top: 4px;
font-size: 11px;
}
.xx-voice-usage-list {
display: grid;
gap: 10px;
}
.xx-voice-usage-row {
border: 1px solid #e2e8f0;
background: white;
border-radius: 18px;
padding: 13px;
}
.xx-voice-usage-row b {
display: block;
color: #0f172a;
font-weight: 850;
}
.xx-voice-usage-row p {
margin: 5px 0 0;
color: #64748b;
font-size: 12px;
}