OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: refine acrylic workbench surfaces

Browse Source
This commit is contained in:
jiang
2026-07-15 17:07:32 +08:00
parent 8978f2d167
commit 16ecb69d00
41 changed files with 838 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/workbench/components/scheduled-condition-detail-panel.tsx
+24 -24
View File
@@ -49,9 +49,9 @@ import { getConditionReportRiskLevel } from "./condition-report-risk";
const RUNNING_WORKFLOW_TICK_MS = 1_000;
const STATUS_PILL_CLASS_NAME = "rounded-full border px-2 py-0.5 text-xs font-semibold leading-4";
const NEUTRAL_SURFACE_CLASS_NAME = "rounded-xl border border-transparent bg-[var(--glass-readable)]";
const INSET_SURFACE_CLASS_NAME = "rounded-xl border border-slate-200/70 bg-[var(--glass-menu)]";
const REPORT_META_TILE_CLASS_NAME = "rounded-lg border border-slate-200/70 bg-[var(--glass-menu)] px-2 py-1.5";
const NEUTRAL_SURFACE_CLASS_NAME = "surface-reading rounded-xl border border-slate-200/70";
const INSET_SURFACE_CLASS_NAME = "surface-control rounded-xl border border-slate-200/70";
const REPORT_META_TILE_CLASS_NAME = "surface-control rounded-lg border border-slate-200/70 px-2 py-1.5";
const riskIndicatorClassNames: Record<ScheduledConditionRiskLevel, string> = {
normal: "border-slate-200 bg-slate-50 text-slate-600",
@@ -136,9 +136,9 @@ export function ConditionDetailPanel({ condition, onContinueConversation }: Cond
<motion.div
key={detailKey}
className="min-h-0"
initial={{ opacity: 0, y: 8, filter: "blur(2px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
exit={{ opacity: 0, y: -6, filter: "blur(1px)" }}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -6 }}
transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
>
{content}
@@ -185,9 +185,9 @@ function ConditionRecordDetailPanel({
<motion.div
key={bodyKey}
className="space-y-2.5"
initial={{ opacity: 0, y: 10, scale: 0.992, filter: "blur(2px)" }}
animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, y: -8, scale: 0.996, filter: "blur(1px)" }}
initial={{ opacity: 0, y: 10, scale: 0.992 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: -8, scale: 0.996 }}
transition={{ duration: 0.26, ease: [0.22, 1, 0.36, 1] }}
>
{condition.status === "running" ? (
@@ -345,7 +345,7 @@ type DetailShellProps = {
function DetailShell({ children }: DetailShellProps) {
return (
<div className={cn(NEUTRAL_SURFACE_CLASS_NAME, "overflow-hidden ring-1 ring-white/80")}>
<div className={cn(NEUTRAL_SURFACE_CLASS_NAME, "overflow-hidden")}>
{children}
</div>
);
@@ -444,7 +444,7 @@ function SolutionOptionsList({
{options.map((option, index) => (
<article key={option.id} className="px-2.5 py-2">
<div className="flex items-center gap-2">
<span className="grid h-5 w-5 shrink-0 place-items-center rounded-lg bg-white text-xs font-semibold text-slate-600 ring-1 ring-slate-200">
<span className="surface-reading grid h-5 w-5 shrink-0 place-items-center rounded-lg border border-slate-200/70 text-xs font-semibold text-slate-600">
{index + 1}
</span>
<h4 className="min-w-0 truncate text-xs font-semibold leading-4 text-slate-900">{option.title}</h4>
@@ -576,7 +576,7 @@ function EscalationCriteriaList({ items }: { items: string[] }) {
<ol className={cn(INSET_SURFACE_CLASS_NAME, "mt-2 divide-y divide-slate-200/70 overflow-hidden")}>
{items.map((item, index) => (
<li key={item} className="grid grid-cols-[18px_1fr] gap-2 px-2 py-1.5 text-xs leading-5 text-slate-700">
<span className="mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg bg-white text-xs font-semibold text-slate-600 ring-1 ring-slate-200">
<span className="surface-reading mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg border border-slate-200/70 text-xs font-semibold text-slate-600">
{index + 1}
</span>
<span>{item}</span>
@@ -711,7 +711,7 @@ function ReportSection({
function KpiTile({ kpi }: { kpi: ScheduledConditionKpi }) {
return (
<div className={cn("min-w-0 rounded-xl border px-2.5 py-2", getKpiSurfaceClassName(kpi.status))}>
<div className={cn("surface-reading min-w-0 rounded-xl border px-2.5 py-2", getKpiSurfaceClassName(kpi.status))}>
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
<div className="truncate text-xs font-semibold text-slate-500" title={kpi.label}>
@@ -739,14 +739,14 @@ function KpiTile({ kpi }: { kpi: ScheduledConditionKpi }) {
function getKpiSurfaceClassName(riskLevel: ScheduledConditionRiskLevel) {
if (riskLevel === "critical") {
return "glass-danger border-red-200/80";
return "border-red-200/80";
}
if (riskLevel === "attention") {
return "glass-warning border-orange-200/80";
return "border-orange-200/80";
}
return "border-slate-200/70 bg-slate-50/80";
return "border-slate-200/70";
}
function DecisionActionStrip({
@@ -782,7 +782,7 @@ function DecisionActionStrip({
"flex min-h-9 shrink-0 items-center justify-center gap-1.5 px-3 text-xs font-semibold leading-4 transition-colors min-[1500px]:w-[104px]",
"rounded-xl",
actionDisabled
? "cursor-not-allowed bg-white/70 text-slate-500 opacity-80"
? "surface-control cursor-not-allowed border border-slate-200/70 text-slate-500 opacity-80"
: "bg-blue-600 text-white hover:bg-blue-700"
)}
>
@@ -842,14 +842,14 @@ function getTaskExecutionStepIconClassName(status: ExecutionStepStatus) {
function getTaskExecutionStepSurfaceClassName(status: ExecutionStepStatus) {
if (status === "current") {
return "glass-info border-blue-100";
return "surface-reading border-blue-100";
}
if (status === "confirmation") {
return "glass-warning border-orange-100";
return "surface-reading border-orange-100";
}
return "border-slate-200/70 bg-slate-50/80";
return "surface-reading border-slate-200/70";
}
function getTaskExecutionStepStatusClassName(status: ExecutionStepStatus) {
@@ -973,7 +973,7 @@ function DetailSectionCard({
className?: string;
}) {
return (
<div className={cn("rounded-xl border border-slate-200/80 bg-slate-50/90 px-2.5 py-2.5 text-slate-500", className)}>
<div className={cn("surface-reading rounded-xl border border-slate-200/70 px-2.5 py-2.5 text-slate-500", className)}>
{children}
</div>
);
@@ -1131,7 +1131,7 @@ function WorkOrderReplyRequirements({ condition }: { condition: ScheduledWorkOrd
<ul className="mt-2 space-y-1.5">
{condition.replyRequirements.map((item, index) => (
<li key={item} className="grid grid-cols-[18px_1fr] gap-2 text-xs leading-5 text-slate-700">
<span className="mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg bg-white text-xs font-semibold text-blue-700 ring-1 ring-blue-100">
<span className="surface-reading mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg border border-blue-100 text-xs font-semibold text-blue-700">
{index + 1}
</span>
<span>{item}</span>
@@ -1150,7 +1150,7 @@ function RunningEvidencePreview({ items }: { items: string[] }) {
{items.length > 0 ? (
items.map((item, index) => (
<li key={item} className="grid grid-cols-[18px_1fr_auto] items-start gap-2 text-xs leading-5 text-slate-700">
<span className="mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg bg-blue-50 text-xs font-semibold text-blue-700 ring-1 ring-blue-100">
<span className="surface-reading mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg border border-blue-100 text-xs font-semibold text-blue-700">
{index + 1}
</span>
<span className="line-clamp-1">{item}</span>
@@ -1173,7 +1173,7 @@ function EvidenceList({ items }: { items: string[] }) {
{items.length > 0 ? (
items.map((item, index) => (
<li key={item} className="grid grid-cols-[18px_1fr] gap-2 text-xs leading-5 text-slate-700">
<span className="mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg bg-white text-xs font-semibold text-blue-700 ring-1 ring-blue-100">
<span className="surface-reading mt-0.5 grid h-[18px] w-[18px] place-items-center rounded-lg border border-blue-100 text-xs font-semibold text-blue-700">
{index + 1}
</span>
<span>{item}</span>