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
2026-06-25 14:53:22 +08:00
parent e40a7d4df9
commit a0ea960eb8
19 changed files with 1586 additions and 2259 deletions
@@ -0,0 +1,200 @@
+/* V21 素材库 */
+.xx-project-assets {
+}
+
+.xx-card {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid rgba(226, 232, 240, 0.95);
+  border-radius: 28px;
+  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
+  padding: 28px;
+  margin-bottom: 20px;
+}
+
+.xx-card h3 {
+  font-size: 21px;
+  margin: 0 0 16px;
+  color: #0f172a;
+  font-weight: 850;
+}
+
+.xx-loading {
+  padding: 60px 24px;
+  text-align: center;
+  color: #64748b;
+}
+
+.xx-upload-zone {
+  border: 2px dashed #e2e8f0;
+  border-radius: 24px;
+  padding: 40px;
+  text-align: center;
+  background: #f8fafc;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.xx-upload-zone:hover {
+  border-color: #4f46e5;
+  background: #eef2ff;
+}
+
+.xx-upload-zone p {
+  color: #64748b;
+  margin: 12px 0;
+  font-size: 14px;
+}
+
+.xx-video-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+@media (max-width: 1200px) {
+  .xx-video-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .xx-video-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.xx-video-card {
+  border: 1px solid #e2e8f0;
+  background: white;
+  border-radius: 22px;
+  padding: 12px;
+  transition: all 0.2s;
+}
+
+.xx-video-card:hover {
+  border-color: #4f46e5;
+  box-shadow: 0 12px 36px rgba(79, 70, 229, 0.12);
+}
+
+.xx-video-thumb {
+  aspect-ratio: 16 / 9;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #0ea5e9, #312e81);
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: white;
+  margin-bottom: 10px;
+}
+
+.mini-play {
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.22);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(8px);
+  font-size: 18px;
+}
+
+.xx-video-card b {
+  display: block;
+  color: #0f172a;
+  font-weight: 850;
+}
+
+.xx-video-card p {
+  margin: 5px 0 0;
+  color: #64748b;
+  font-size: 12px;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.pill {
+  font-size: 11px;
+  padding: 3px 7px;
+  border-radius: 999px;
+  font-weight: 850;
+  white-space: nowrap;
+}
+
+.pill.ok {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.pill.warn {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.pill.bad {
+  background: #ffe4e6;
+  color: #be123c;
+}
+
+.assist-actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 16px;
+  grid-template-columns: 1fr 1fr;
+}
+
+.btn {
+  border: 0;
+  border-radius: 14px;
+  padding: 12px 17px;
+  font-weight: 850;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.btn.primary {
+  background: #4f46e5;
+  color: white;
+  box-shadow: 0 16px 28px rgba(79, 70, 229, 0.24);
+}
+
+.btn.primary:hover {
+  background: #4338ca;
+  box-shadow: 0 20px 36px rgba(79, 70, 229, 0.32);
+}
+
+.btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn.ghost {
+  background: white;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+}
+
+.btn.ghost:hover {
+  background: #f8fafc;
+  border-color: #4f46e5;
+  color: #4f46e5;
+}
+
+.xx-empty-state {
+  text-align: center;
+  padding: 40px 24px;
+  color: #64748b;
+}
+
+.xx-empty-state p {
+  font-size: 16px;
+  margin: 0;
+}