R29-1 R29-6: 重构海音达工作台壳层与高频页面
这个提交包含在：
+118
-31
@@ -1,82 +1,162 @@
|
||||
/*
|
||||
Style tokens source (single-direction sync):
|
||||
- Extracted from Stitch MCP AI-generated Design Preview (B2B SaaS Theme)
|
||||
Design tokens source:
|
||||
- aligned to R29 semantic workbench system
|
||||
*/
|
||||
|
||||
@import "@material-symbols/font-400/outlined.css";
|
||||
@import "./styles/mobile-touch.css";
|
||||
@import "./design/theme.css";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-zinc-50 font-sans text-zinc-900 antialiased selection:bg-zinc-900 selection:text-white;
|
||||
background: var(--color-bg-canvas);
|
||||
color: var(--color-text-primary);
|
||||
@apply font-sans antialiased selection:bg-zinc-900 selection:text-white;
|
||||
}
|
||||
|
||||
#root {
|
||||
@apply min-h-screen flex flex-col;
|
||||
}
|
||||
|
||||
summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
||||
/* Layout */
|
||||
.layout-container {
|
||||
@apply mx-auto w-full px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
@apply flex items-center justify-center gap-2 px-4 py-2 bg-zinc-900 text-white rounded-lg text-sm font-bold hover:bg-zinc-800 transition-all shadow-sm;
|
||||
.page-scaffold {
|
||||
@apply space-y-6;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply flex items-center justify-center gap-2 px-3 py-2 bg-white border border-zinc-200 rounded-lg text-sm font-medium text-zinc-700 hover:bg-zinc-50 transition-colors shadow-sm;
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
@apply text-zinc-400 hover:text-zinc-600 p-1 rounded-md transition-colors;
|
||||
.workbench-hero__eyebrow {
|
||||
@apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
|
||||
}
|
||||
|
||||
.workbench-hero__title {
|
||||
@apply mt-2 text-3xl font-semibold tracking-tight text-zinc-900;
|
||||
}
|
||||
|
||||
.workbench-hero__subtitle {
|
||||
@apply mt-2 max-w-3xl text-sm leading-6 text-zinc-600;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card-std {
|
||||
@apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 transition-all;
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-panel);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply text-sm font-medium text-zinc-500 mb-1;
|
||||
@apply text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
@apply mt-2 text-sm leading-6 text-zinc-600;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
@apply text-3xl font-bold text-zinc-900 tracking-tight;
|
||||
@apply text-3xl font-semibold tracking-tight text-zinc-900;
|
||||
}
|
||||
|
||||
.section-panel {
|
||||
@apply p-6;
|
||||
}
|
||||
|
||||
.section-panel__header {
|
||||
@apply flex flex-wrap items-start justify-between gap-3;
|
||||
}
|
||||
|
||||
.section-panel__title {
|
||||
@apply text-base font-semibold text-zinc-900;
|
||||
}
|
||||
|
||||
.section-panel__desc {
|
||||
@apply mt-1 text-sm text-zinc-500;
|
||||
}
|
||||
|
||||
.section-panel__body {
|
||||
@apply mt-5;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--color-bg-surface);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xs);
|
||||
@apply block px-5 py-5 transition-colors hover:bg-zinc-50;
|
||||
}
|
||||
|
||||
.metric-card--warning {
|
||||
@apply border-amber-200 bg-amber-50 hover:bg-amber-100;
|
||||
}
|
||||
|
||||
.metric-card--danger {
|
||||
@apply border-red-200 bg-red-50 hover:bg-red-100;
|
||||
}
|
||||
|
||||
.metric-card__title {
|
||||
@apply text-sm font-medium text-zinc-500;
|
||||
}
|
||||
|
||||
.metric-card__value {
|
||||
@apply mt-2 text-2xl font-semibold tracking-tight text-zinc-900;
|
||||
}
|
||||
|
||||
.metric-card__note {
|
||||
@apply mt-2 text-sm text-zinc-500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.surface-muted {
|
||||
@apply rounded-2xl border border-zinc-200 bg-zinc-50;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.input-std {
|
||||
@apply h-10 w-full rounded-md border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none transition-colors focus:border-zinc-400 focus:ring-1 focus:ring-zinc-400;
|
||||
@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;
|
||||
}
|
||||
|
||||
.select-std {
|
||||
@apply h-10 w-full rounded-md 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-1 focus:ring-zinc-400;
|
||||
@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;
|
||||
}
|
||||
|
||||
.select-sm {
|
||||
@apply h-8 rounded-md 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-1 focus:ring-zinc-400;
|
||||
@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;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.table-container {
|
||||
@apply bg-white rounded-xl shadow-sm ring-1 ring-zinc-900/5 overflow-hidden;
|
||||
@apply overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@apply bg-zinc-50/50 border-b border-zinc-100;
|
||||
@apply border-b border-zinc-100 bg-zinc-50/70;
|
||||
}
|
||||
|
||||
.table-th {
|
||||
@apply px-6 py-4 text-xs font-bold text-zinc-500 text-left;
|
||||
@apply px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@@ -88,23 +168,30 @@
|
||||
}
|
||||
|
||||
.table-td-strong {
|
||||
@apply px-6 py-4 text-sm font-bold text-zinc-900;
|
||||
@apply px-6 py-4 text-sm font-semibold text-zinc-900;
|
||||
}
|
||||
|
||||
.page-shell-grid {
|
||||
@apply grid gap-6 xl:grid-cols-[minmax(0,1fr),360px];
|
||||
}
|
||||
|
||||
.detail-shell-grid {
|
||||
@apply grid gap-6 xl:grid-cols-[minmax(0,1.4fr),minmax(320px,0.8fr)];
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge-success {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 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/10;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10;
|
||||
@apply inline-flex items-center rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-inset ring-amber-600/10;
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10;
|
||||
@apply inline-flex items-center rounded-full bg-red-50 px-2.5 py-0.5 text-xs font-semibold text-red-700 ring-1 ring-inset ring-red-600/10;
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-zinc-100 text-zinc-700 ring-1 ring-inset ring-zinc-600/10;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
在新工单中引用
屏蔽一个用户