diff --git a/apps/frontend/src/styles/admin-platform-shops.css b/apps/frontend/src/styles/admin-platform-shops.css new file mode 100644 index 00000000..f3c7a3db --- /dev/null +++ b/apps/frontend/src/styles/admin-platform-shops.css @@ -0,0 +1,553 @@ +.admin-platform-shops { + display: grid; + gap: 16px; +} + +.admin-platform-shops .hero-card, +.admin-platform-shops .meta-card, +.admin-platform-shops .table-card, +.admin-platform-shops .empty-block, +.admin-platform-shops .error-copy { + padding: 20px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(86, 108, 138, 0.1); +} + +.admin-platform-shops .hero-card, +.admin-platform-shops .section-title-row, +.admin-platform-shops .hero-actions, +.admin-platform-shops .section-actions, +.admin-platform-shops .platform-head, +.admin-platform-shops .shop-summary, +.admin-platform-shops .shop-actions, +.admin-platform-shops .platform-switcher, +.admin-platform-shops .overview-grid, +.admin-platform-shops .result-grid { + display: flex; + gap: 12px; +} + +.admin-platform-shops .hero-card, +.admin-platform-shops .section-title-row, +.admin-platform-shops .shop-summary, +.admin-platform-shops .shop-actions { + justify-content: space-between; + align-items: flex-start; +} + +.admin-platform-shops .hero-copy h1, +.admin-platform-shops .section-title-row h3 { + margin: 0; + color: #1d3555; +} + +.admin-platform-shops .hero-copy p, +.admin-platform-shops .section-title-row p { + margin: 8px 0 0; + color: #64748b; +} + +.admin-platform-shops .hero-actions, +.admin-platform-shops .section-actions, +.admin-platform-shops .platform-switcher { + flex-wrap: wrap; +} + +.admin-platform-shops .overview-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 16px; +} + +.admin-platform-shops .platform-overview-card { + appearance: none; + -webkit-appearance: none; + border: 1px solid rgba(86, 108, 138, 0.12); + background: rgba(255, 255, 255, 0.92); + border-radius: 20px; + padding: 18px; + text-align: left; + cursor: pointer; + display: grid; + gap: 10px; + transition: 0.2s ease; + width: 100%; + box-sizing: border-box; + font: inherit; + color: inherit; + outline: none; +} + +.admin-platform-shops .platform-overview-card:hover, +.admin-platform-shops .platform-overview-card.is-active { + border-color: rgba(37, 99, 235, 0.28); + box-shadow: 0 12px 32px rgba(37, 99, 235, 0.08); +} + +.admin-platform-shops .platform-badge, +.admin-platform-shops .platform-tag, +.admin-platform-shops .switch-chip { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 30px; + padding: 0 12px; + border-radius: 999px; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .platform-badge { + background: rgba(37, 99, 235, 0.1); + color: #2559a7; +} + +.admin-platform-shops .platform-tag { + background: rgba(15, 23, 42, 0.05); + color: #475467; +} + +.admin-platform-shops .platform-overview-card strong { + color: #1d3555; + font-size: 26px; + line-height: 1.1; +} + +.admin-platform-shops .platform-overview-card > span, +.admin-platform-shops .platform-metrics { + color: #64748b; +} + +.admin-platform-shops .platform-metrics { + display: flex; + gap: 12px; + flex-wrap: wrap; + font-size: 12px; +} + +.admin-platform-shops .switch-chip { + appearance: none; + -webkit-appearance: none; + border: 1px solid rgba(86, 108, 138, 0.12); + background: rgba(255, 255, 255, 0.94); + color: #475467; + cursor: pointer; + font: inherit; + outline: none; +} + +.admin-platform-shops .switch-chip.is-active { + background: #2563eb; + border-color: #2563eb; + color: #fff; +} + +.admin-platform-shops .meta-card, +.admin-platform-shops .meta-line, +.admin-platform-shops .cell-stack { + display: grid; + gap: 6px; +} + +.admin-platform-shops .meta-label { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .form-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + +.admin-platform-shops .field-block { + display: grid; + gap: 8px; +} + +.admin-platform-shops .field-block span { + color: #475467; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .field-wide { + grid-column: 1 / -1; +} + +.admin-platform-shops .kuaishou-workspace, +.admin-platform-shops .kuaishou-debug-layout { + display: grid; + grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr); + gap: 16px; +} + +.admin-platform-shops .kuaishou-shop-stack, +.admin-platform-shops .kuaishou-side-panel, +.admin-platform-shops .kuaishou-debug-panel { + display: grid; + gap: 14px; +} + +.admin-platform-shops .kuaishou-base-grid { + padding: 14px; + border-radius: 18px; + background: + .admin-platform-shops radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 38%), + linear-gradient(180deg, rgba(239, 246, 255, 0.86), rgba(248, 250, 252, 0.96)); + border: 1px solid rgba(148, 163, 184, 0.18); +} + +.admin-platform-shops .text-input, +.admin-platform-shops .text-area { + width: 100%; + min-height: 42px; + padding: 0 14px; + border-radius: 14px; + border: 1px solid rgba(86, 108, 138, 0.18); + background: rgba(255, 255, 255, 0.96); +} + +.admin-platform-shops .text-area { + min-height: 96px; + padding: 12px 14px; + resize: vertical; +} + +.admin-platform-shops .shop-card { + margin-top: 14px; + border-radius: 18px; + background: #f8fafc; + border: 1px solid rgba(148, 163, 184, 0.18); + overflow: hidden; +} + +.admin-platform-shops .shop-card:first-of-type { + margin-top: 0; +} + +.admin-platform-shops .shop-summary { + width: 100%; + border: 0; + padding: 16px; + background: transparent; + cursor: pointer; + text-align: left; +} + +.admin-platform-shops .shop-summary-main, +.admin-platform-shops .shop-summary-side { + display: grid; + gap: 4px; +} + +.admin-platform-shops .shop-summary-side { + justify-items: end; +} + +.admin-platform-shops .shop-summary-main strong, +.admin-platform-shops .shop-toggle { + color: #1d3555; +} + +.admin-platform-shops .shop-summary-copy, +.admin-platform-shops .cell-subtle { + color: #64748b; + font-size: 12px; +} + +.admin-platform-shops .kuaishou-shop-card { + margin-top: 0; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)); + border-color: rgba(96, 165, 250, 0.18); + transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; +} + +.admin-platform-shops .kuaishou-shop-card.is-active { + border-color: rgba(37, 99, 235, 0.34); + box-shadow: 0 18px 44px rgba(37, 99, 235, 0.12); +} + +.admin-platform-shops .kuaishou-shop-card.is-expanded { + transform: translateY(-1px); +} + +.admin-platform-shops .kuaishou-shop-summary { + align-items: center; + gap: 16px; +} + +.admin-platform-shops .kuaishou-shop-head, +.admin-platform-shops .shop-title-row, +.admin-platform-shops .shop-tag-row, +.admin-platform-shops .kuaishou-debug-head { + display: flex; + gap: 10px; +} + +.admin-platform-shops .kuaishou-shop-head { + align-items: center; +} + +.admin-platform-shops .shop-title-row, +.admin-platform-shops .shop-tag-row, +.admin-platform-shops .kuaishou-debug-head { + flex-wrap: wrap; +} + +.admin-platform-shops .shop-title-row { + align-items: center; +} + +.admin-platform-shops .shop-avatar { + width: 54px; + height: 54px; + border-radius: 18px; + overflow: hidden; + background: linear-gradient(135deg, #dbeafe, #eff6ff); + color: #1d4ed8; + font-size: 20px; + font-weight: 800; + display: grid; + place-items: center; + flex-shrink: 0; + border: 1px solid rgba(37, 99, 235, 0.14); +} + +.admin-platform-shops .shop-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.admin-platform-shops .shop-mini-tag { + display: inline-flex; + align-items: center; + min-height: 26px; + padding: 0 10px; + border-radius: 999px; + background: rgba(15, 23, 42, 0.05); + color: #475467; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .shop-mini-tag.is-ready { + background: rgba(22, 163, 74, 0.12); + color: #166534; +} + +.admin-platform-shops .shop-mini-tag.is-highlight { + background: rgba(37, 99, 235, 0.12); + color: #1d4ed8; +} + +.admin-platform-shops .kuaishou-shop-body { + padding-top: 16px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.96)); +} + +.admin-platform-shops .kuaishou-shop-actions { + margin-top: 14px; + padding-top: 14px; +} + +.admin-platform-shops .kuaishou-cookie-area { + min-height: 128px; + line-height: 1.6; +} + +.admin-platform-shops .kuaishou-side-panel { + align-content: start; +} + +.admin-platform-shops .kuaishou-side-card { + min-height: 132px; +} + +.admin-platform-shops .kuaishou-guide-card { + background: + .admin-platform-shops radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 35%), + linear-gradient(180deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.98)); +} + +.admin-platform-shops .kuaishou-guide-card p { + font-size: 13px; +} + +.admin-platform-shops .kuaishou-debug-panel { + padding: 16px; + border-radius: 20px; + border: 1px solid rgba(148, 163, 184, 0.16); + background: rgba(248, 250, 252, 0.76); +} + +.admin-platform-shops .kuaishou-debug-panel-soft { + background: + .admin-platform-shops radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 34%), + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)); +} + +.admin-platform-shops .kuaishou-debug-head { + justify-content: space-between; + align-items: flex-start; +} + +.admin-platform-shops .kuaishou-debug-head strong { + display: block; + margin-top: 4px; + color: #1d3555; + font-size: 22px; +} + +.admin-platform-shops .shop-status { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 28px; + padding: 0 10px; + border-radius: 999px; + background: rgba(22, 163, 74, 0.12); + color: #166534; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .shop-status.is-disabled { + background: rgba(148, 163, 184, 0.14); + color: #475467; +} + +.admin-platform-shops .shop-body { + padding: 0 16px 16px; + border-top: 1px solid rgba(148, 163, 184, 0.18); +} + +.admin-platform-shops .checkbox-line { + display: inline-flex; + gap: 8px; + align-items: center; + color: #475467; +} + +.admin-platform-shops .checkbox-box { + min-height: 42px; + padding: 0 14px; + border-radius: 14px; + border: 1px solid rgba(86, 108, 138, 0.18); + background: rgba(255, 255, 255, 0.96); +} + +.admin-platform-shops .result-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; + margin-top: 16px; +} + +.admin-platform-shops .result-card { + display: grid; + gap: 6px; + padding: 14px; + border-radius: 16px; + background: #f8fafc; + border: 1px solid rgba(148, 163, 184, 0.14); +} + +.admin-platform-shops .result-label { + color: #64748b; + font-size: 12px; + font-weight: 700; +} + +.admin-platform-shops .result-card strong { + color: #1d3555; + font-size: 22px; +} + +.admin-platform-shops .result-card p { + margin: 0; + color: #64748b; +} + +.admin-platform-shops .compact-meta { + margin-top: 16px; +} + +.admin-platform-shops .data-table { + width: 100%; + border-collapse: collapse; + margin-top: 12px; +} + +.admin-platform-shops .data-table th, +.admin-platform-shops .data-table td { + padding: 12px 10px; + text-align: left; + border-bottom: 1px solid rgba(86, 108, 138, 0.08); + color: #334155; + vertical-align: top; +} + +.admin-platform-shops .data-table th { + color: #64748b; + font-size: 13px; +} + +.admin-platform-shops .empty-block, +.admin-platform-shops .empty-inline { + color: #64748b; +} + +.admin-platform-shops .error-copy { + color: #b42318; +} + +.admin-platform-shops .debug-result { + margin: 0; + padding: 14px; + border-radius: 16px; + background: #0f172a; + color: #e2e8f0; + overflow: auto; + white-space: pre-wrap; + word-break: break-word; + font-size: 12px; + line-height: 1.6; +} + +@media (max-width: 1100px) { + .admin-platform-shops .overview-grid, + .admin-platform-shops .result-grid, + .admin-platform-shops .form-grid, + .admin-platform-shops .kuaishou-workspace, + .admin-platform-shops .kuaishou-debug-layout { + grid-template-columns: 1fr; + } +} + +@media (max-width: 980px) { + .admin-platform-shops .hero-card, + .admin-platform-shops .section-title-row, + .admin-platform-shops .shop-actions, + .admin-platform-shops .shop-summary { + flex-direction: column; + align-items: stretch; + } + + .admin-platform-shops .kuaishou-shop-head, + .admin-platform-shops .shop-title-row, + .admin-platform-shops .shop-tag-row, + .admin-platform-shops .kuaishou-debug-head { + flex-direction: column; + align-items: flex-start; + } + + .admin-platform-shops .shop-summary-side { + justify-items: start; + } +} \ No newline at end of file diff --git a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue index cf9505d8..69ab8e18 100644 --- a/apps/frontend/src/views/admin/AdminPlatformShopsView.vue +++ b/apps/frontend/src/views/admin/AdminPlatformShopsView.vue @@ -14,6 +14,7 @@ import { } from '@/services/admin' import { hasAdminRole } from '@/utils/admin-auth' import { formatAdminDateTime } from '@/utils/admin-time' +import '@/styles/admin-platform-shops.css' const loading = ref(true) const isDevMode = import.meta.env.DEV @@ -167,7 +168,7 @@ onMounted(loadConfigs) -