R67 A1-A6：官网风格前端 UI 刷新
这个提交包含在：
+212
-41
@@ -14,12 +14,18 @@
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: light;
|
||||
background: var(--color-bg-canvas);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--color-bg-canvas);
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at 10% -8%, rgba(0, 57, 138, 0.10), transparent 30rem),
|
||||
radial-gradient(circle at 92% 0%, rgba(19, 168, 184, 0.12), transparent 32rem),
|
||||
linear-gradient(180deg, #ffffff 0%, var(--color-bg-canvas) 18rem, #eef2f6 100%);
|
||||
background-attachment: fixed;
|
||||
color: var(--color-text-primary);
|
||||
@apply font-sans antialiased selection:bg-zinc-900 selection:text-white;
|
||||
@apply font-sans antialiased selection:bg-primary selection:text-white;
|
||||
}
|
||||
|
||||
#root {
|
||||
@@ -33,142 +39,234 @@
|
||||
|
||||
@layer components {
|
||||
.layout-container {
|
||||
@apply mx-auto w-full px-4 sm:px-6 lg:px-8;
|
||||
@apply mx-auto w-full px-0 sm:px-1 lg:px-2;
|
||||
}
|
||||
|
||||
.page-scaffold {
|
||||
animation: page-reveal 420ms ease-out both;
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.workbench-hero {
|
||||
background: linear-gradient(135deg, rgba(17, 24, 39, 0.03), rgba(255, 255, 255, 0.96));
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-xs);
|
||||
@apply flex flex-col gap-4 px-6 py-6 md:flex-row md:items-end md:justify-between;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 12% 4%, rgba(0, 57, 138, 0.14), transparent 17rem),
|
||||
radial-gradient(circle at 86% 12%, rgba(19, 168, 184, 0.15), transparent 19rem),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(230, 236, 244, 0.94));
|
||||
border: 1px solid rgba(226, 232, 240, 0.92);
|
||||
border-radius: var(--radius-2xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
@apply flex flex-col gap-5 px-6 py-7 md:flex-row md:items-end md:justify-between md:px-7;
|
||||
}
|
||||
|
||||
.workbench-hero::after {
|
||||
position: absolute;
|
||||
inset: auto -5rem -7rem auto;
|
||||
width: 18rem;
|
||||
height: 18rem;
|
||||
content: "";
|
||||
background:
|
||||
repeating-radial-gradient(ellipse at center, rgba(0, 57, 138, 0.13) 0 1px, transparent 1px 16px);
|
||||
border-radius: 9999px;
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.workbench-hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.workbench-hero__eyebrow {
|
||||
@apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
|
||||
color: var(--color-accent-primary);
|
||||
@apply text-xs font-bold uppercase tracking-[0.22em];
|
||||
}
|
||||
|
||||
.workbench-hero__title {
|
||||
@apply mt-2 text-3xl font-semibold tracking-tight text-zinc-900;
|
||||
color: var(--color-text-primary);
|
||||
@apply mt-2 text-3xl font-semibold tracking-tight md:text-4xl;
|
||||
}
|
||||
|
||||
.workbench-hero__subtitle {
|
||||
@apply mt-2 max-w-3xl text-sm leading-6 text-zinc-600;
|
||||
color: var(--color-text-secondary);
|
||||
@apply mt-3 max-w-3xl text-sm leading-6 md:text-base md:leading-7;
|
||||
}
|
||||
|
||||
.card-std {
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border-default);
|
||||
background: var(--color-bg-surface-raised);
|
||||
border: 1px solid rgba(226, 232, 240, 0.92);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-sm);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
|
||||
color: var(--color-text-tertiary);
|
||||
@apply text-xs font-semibold uppercase tracking-[0.18em];
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
@apply mt-2 text-sm leading-6 text-zinc-600;
|
||||
color: var(--color-text-secondary);
|
||||
@apply mt-2 text-sm leading-6;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
@apply text-3xl font-semibold tracking-tight text-zinc-900;
|
||||
color: var(--color-text-primary);
|
||||
@apply text-3xl font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
.section-panel {
|
||||
@apply p-6;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@apply p-5 md:p-6;
|
||||
}
|
||||
|
||||
.section-panel::before {
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 3px;
|
||||
content: "";
|
||||
background: linear-gradient(90deg, var(--color-accent-primary), rgba(19, 168, 184, 0.72), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.section-panel__header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@apply flex flex-wrap items-start justify-between gap-3;
|
||||
}
|
||||
|
||||
.section-panel__title {
|
||||
@apply text-base font-semibold text-zinc-900;
|
||||
color: var(--color-text-primary);
|
||||
@apply text-base font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
.section-panel__desc {
|
||||
@apply mt-1 text-sm text-zinc-500;
|
||||
color: var(--color-text-secondary);
|
||||
@apply mt-1 text-sm leading-6;
|
||||
}
|
||||
|
||||
.section-panel__body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@apply mt-5;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86));
|
||||
border: 1px solid rgba(226, 232, 240, 0.96);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-xs);
|
||||
@apply block px-5 py-5 transition-colors hover:bg-zinc-50;
|
||||
@apply block px-5 py-5 transition duration-200 hover:-translate-y-0.5 hover:shadow-sm;
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
content: "";
|
||||
background: linear-gradient(180deg, var(--color-accent-primary), rgba(19, 168, 184, 0.72));
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.metric-card--warning {
|
||||
@apply border-amber-200 bg-amber-50 hover:bg-amber-100;
|
||||
background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.78));
|
||||
@apply border-amber-200;
|
||||
}
|
||||
|
||||
.metric-card--warning::before {
|
||||
@apply bg-amber-500;
|
||||
}
|
||||
|
||||
.metric-card--danger {
|
||||
@apply border-red-200 bg-red-50 hover:bg-red-100;
|
||||
background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.76));
|
||||
@apply border-red-200;
|
||||
}
|
||||
|
||||
.metric-card--danger::before {
|
||||
@apply bg-red-500;
|
||||
}
|
||||
|
||||
.metric-card__title {
|
||||
@apply text-sm font-medium text-zinc-500;
|
||||
color: var(--color-text-secondary);
|
||||
@apply text-sm font-medium;
|
||||
}
|
||||
|
||||
.metric-card__value {
|
||||
@apply mt-2 text-2xl font-semibold tracking-tight text-zinc-900;
|
||||
color: var(--color-text-primary);
|
||||
@apply mt-2 text-2xl font-semibold tracking-tight;
|
||||
}
|
||||
|
||||
.metric-card__note {
|
||||
@apply mt-2 text-sm text-zinc-500;
|
||||
color: var(--color-text-secondary);
|
||||
@apply mt-2 text-sm leading-6;
|
||||
}
|
||||
|
||||
.info-chip {
|
||||
@apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600;
|
||||
border-color: rgba(203, 213, 225, 0.86);
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
color: var(--color-text-secondary);
|
||||
@apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium;
|
||||
}
|
||||
|
||||
.surface-muted {
|
||||
@apply rounded-2xl border border-zinc-200 bg-zinc-50;
|
||||
border-color: rgba(226, 232, 240, 0.92);
|
||||
background: rgba(248, 250, 252, 0.86);
|
||||
@apply rounded-2xl border;
|
||||
}
|
||||
|
||||
.input-std {
|
||||
@apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors placeholder:text-zinc-400 focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
|
||||
border-color: rgba(203, 213, 225, 0.92);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--color-text-primary);
|
||||
@apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition placeholder:text-zinc-400 focus:border-primary focus:ring-2 focus:ring-primary/15;
|
||||
}
|
||||
|
||||
.select-std {
|
||||
@apply h-11 w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
|
||||
border-color: rgba(203, 213, 225, 0.92);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--color-text-primary);
|
||||
@apply h-11 w-full rounded-xl border px-3 py-2 text-sm shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
@apply h-8 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-medium text-zinc-600 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-2 focus:ring-zinc-200;
|
||||
border-color: rgba(203, 213, 225, 0.92);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
color: var(--color-text-secondary);
|
||||
@apply h-8 rounded-lg border px-2 py-1 text-xs font-medium shadow-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
@apply overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm;
|
||||
border-color: rgba(226, 232, 240, 0.92);
|
||||
background: var(--color-bg-surface-raised);
|
||||
@apply overflow-hidden rounded-2xl border shadow-sm backdrop-blur;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@apply border-b border-zinc-100 bg-zinc-50/70;
|
||||
border-color: rgba(226, 232, 240, 0.82);
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
@apply border-b;
|
||||
}
|
||||
|
||||
.table-th {
|
||||
@apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500;
|
||||
color: var(--color-text-tertiary);
|
||||
@apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@apply transition-colors hover:bg-zinc-50/80;
|
||||
@apply transition-colors hover:bg-slate-50/90;
|
||||
}
|
||||
|
||||
.table-td {
|
||||
@apply px-6 py-4 text-sm text-zinc-600;
|
||||
color: var(--color-text-secondary);
|
||||
@apply px-6 py-4 text-sm;
|
||||
}
|
||||
|
||||
.table-td-strong {
|
||||
@apply px-6 py-4 text-sm font-semibold text-zinc-900;
|
||||
color: var(--color-text-primary);
|
||||
@apply px-6 py-4 text-sm font-semibold;
|
||||
}
|
||||
|
||||
.page-shell-grid {
|
||||
@@ -180,7 +278,7 @@
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
@apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/10;
|
||||
@apply inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-600/15;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@@ -192,6 +290,79 @@
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
@apply inline-flex items-center rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
|
||||
background: rgba(241, 245, 249, 0.92);
|
||||
color: var(--color-text-secondary);
|
||||
@apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 ring-inset ring-slate-300/55;
|
||||
}
|
||||
|
||||
.portal-list-card {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(226, 232, 240, 0.94);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-xs);
|
||||
@apply block px-4 py-4 transition duration-200;
|
||||
}
|
||||
|
||||
.portal-list-card:hover {
|
||||
background: #ffffff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.portal-list-card--warning {
|
||||
background: rgba(255, 251, 235, 0.9);
|
||||
border-color: rgba(245, 158, 11, 0.36);
|
||||
}
|
||||
|
||||
.portal-action-tile {
|
||||
min-height: 100%;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
|
||||
border: 1px solid rgba(226, 232, 240, 0.94);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-xs);
|
||||
@apply px-4 py-4 text-left transition duration-200;
|
||||
}
|
||||
|
||||
.portal-action-tile:hover {
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.portal-action-tile--disabled {
|
||||
background: rgba(241, 245, 249, 0.86);
|
||||
color: var(--color-text-tertiary);
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.portal-action-icon {
|
||||
background: linear-gradient(135deg, rgba(0, 57, 138, 0.12), rgba(19, 168, 184, 0.12));
|
||||
color: var(--color-accent-primary);
|
||||
@apply flex size-10 items-center justify-center rounded-2xl;
|
||||
}
|
||||
|
||||
.portal-action-icon--muted {
|
||||
background: rgba(226, 232, 240, 0.72);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.portal-status-card {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid rgba(226, 232, 240, 0.94);
|
||||
border-radius: var(--radius-panel);
|
||||
@apply px-4 py-4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes page-reveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户