feat: 剪辑规划器完整交互 — 7大配置面板 + 时间轴拖拽/缩放/播放头 + 预览播放器 (#284)

apps/web/src/pages/edit-plans/edit-plans.css

@@ -0,0 +1,260 @@
+/**
+ * 剪辑计划管理页面样式
+ */
+
+/* ── 页面容器 ──────────────────────────────────────────── */
+.edit-plans-page {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* ── 页面头部 ──────────────────────────────────────────── */
+.edit-plans-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.edit-plans-header-text h2 {
+  margin: 0 0 4px;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-primary, #1e293b);
+}
+
+.edit-plans-header-text p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-secondary, #64748b);
+}
+
+/* ── 筛选栏 ────────────────────────────────────────────── */
+.edit-plans-filters {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.edit-plans-status-tabs {
+  flex: 1;
+}
+
+.edit-plans-status-tabs .ant-tabs-nav {
+  margin-bottom: 0 !important;
+}
+
+.edit-plans-status-tabs .ant-tabs-tab {
+  padding: 8px 16px !important;
+  font-size: 14px;
+}
+
+.edit-plans-status-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: var(--primary-500, #6366f1) !important;
+  font-weight: 500;
+}
+
+.edit-plans-status-tabs .ant-tabs-ink-bar {
+  background: var(--primary-500, #6366f1) !important;
+}
+
+.edit-plans-template-filter {
+  min-width: 180px;
+}
+
+/* ── 表格 ──────────────────────────────────────────────── */
+.edit-plans-table {
+  background: var(--bg-surface, #fff);
+  border-radius: var(--radius-lg, 12px);
+  overflow: hidden;
+  border: 1px solid var(--border-primary, #e2e8f0);
+}
+
+.edit-plans-table .ant-table {
+  font-size: 14px;
+}
+
+.edit-plans-table .ant-table-thead > tr > th {
+  background: var(--bg-tertiary, #f8fafc) !important;
+  border-bottom: 1px solid var(--border-primary, #e2e8f0);
+  font-weight: 500;
+  color: var(--text-secondary, #64748b);
+  font-size: 13px;
+  padding: 12px 16px;
+}
+
+.edit-plans-table .ant-table-tbody > tr > td {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border-light, #f1f5f9);
+}
+
+.edit-plans-table .ant-table-tbody > tr:hover > td {
+  background: var(--bg-hover, #f8fafc) !important;
+}
+
+/* ── 计划名称 ──────────────────────────────────────────── */
+.plan-name {
+  font-weight: 500;
+  color: var(--text-primary, #1e293b);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.plan-name:hover {
+  color: var(--primary-500, #6366f1);
+}
+
+/* ── 状态标签 ──────────────────────────────────────────── */
+.plan-status-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.plan-status-tag.ant-tag-default {
+  background: #f1f5f9;
+  color: #64748b;
+  border-color: transparent;
+}
+
+.plan-status-tag.ant-tag-processing {
+  background: #eff6ff;
+  color: #2563eb;
+  border-color: transparent;
+}
+
+.plan-status-tag.ant-tag-success {
+  background: #f0fdf4;
+  color: #16a34a;
+  border-color: transparent;
+}
+
+.plan-status-tag.ant-tag-error {
+  background: #fef2f2;
+  color: #dc2626;
+  border-color: transparent;
+}
+
+.plan-status-tag.ant-tag-warning {
+  background: #fffbeb;
+  color: #d97706;
+  border-color: transparent;
+}
+
+/* ── 时长 ──────────────────────────────────────────────── */
+.plan-duration {
+  font-variant-numeric: tabular-nums;
+  color: var(--text-secondary, #64748b);
+}
+
+/* ── 时间 ──────────────────────────────────────────────── */
+.plan-time {
+  color: var(--text-secondary, #64748b);
+  font-size: 13px;
+}
+
+/* ── 操作按钮 ──────────────────────────────────────────── */
+.plan-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.plan-action-btn {
+  padding: 4px 8px !important;
+  font-size: 13px !important;
+}
+
+.plan-action-btn.ant-btn-link {
+  color: var(--primary-500, #6366f1);
+}
+
+.plan-action-btn.ant-btn-link:hover {
+  color: var(--primary-600, #4f46e5);
+}
+
+.plan-regenerate-btn {
+  color: var(--primary-500, #6366f1) !important;
+}
+
+.plan-regenerate-btn:hover {
+  color: var(--primary-600, #4f46e5) !important;
+}
+
+/* ── 空状态 ────────────────────────────────────────────── */
+.edit-plans-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.edit-plans-empty .anticon {
+  font-size: 48px;
+  color: var(--text-disabled, #cbd5e1);
+  margin-bottom: 16px;
+}
+
+.edit-plans-empty p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-secondary, #64748b);
+}
+
+/* ── 错误状态 ──────────────────────────────────────────── */
+.edit-plans-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  text-align: center;
+  background: var(--bg-surface, #fff);
+  border-radius: var(--radius-lg, 12px);
+  border: 1px solid var(--border-primary, #e2e8f0);
+}
+
+.edit-plans-error .anticon {
+  font-size: 48px;
+  color: #ef4444;
+  margin-bottom: 16px;
+}
+
+.edit-plans-error p {
+  margin: 0 0 16px;
+  font-size: 14px;
+  color: var(--text-secondary, #64748b);
+}
+
+/* ── 响应式 ────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .edit-plans-page {
+    padding: 16px;
+  }
+
+  .edit-plans-header {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .edit-plans-filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .edit-plans-status-tabs {
+    width: 100%;
+  }
+
+  .edit-plans-template-filter {
+    width: 100%;
+  }
+}