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/feature-insight-panel.tsx
+10 -10
View File
@@ -77,7 +77,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
}, [feature]);
return (
<aside className="glass-readable pointer-events-auto flex h-full min-h-0 flex-col rounded border">
<aside className="acrylic-panel pointer-events-auto flex h-full min-h-0 flex-col rounded border">
<div className="border-b border-slate-200/80 p-4">
<div className="flex items-start justify-between gap-3">
<div>
@@ -91,7 +91,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
aria-label="关闭详情"
title="关闭详情"
onClick={onClose}
className="grid h-9 w-9 place-items-center rounded border border-slate-200 bg-white text-slate-500 hover:text-slate-900"
className="surface-control grid h-9 w-9 place-items-center rounded border text-slate-500 hover:text-slate-900"
>
<X size={16} aria-hidden="true" />
</button>
@@ -106,7 +106,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
<>
<div className="grid grid-cols-2 gap-2">
{metrics.map(([label, value]) => (
<div key={label} className="rounded border border-slate-200 bg-white p-3">
<div key={label} className="surface-reading rounded border p-3">
<p className="text-xs text-slate-500">{label}</p>
<p className="mt-1 truncate text-sm font-semibold text-slate-900">{value}</p>
</div>
@@ -126,7 +126,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
</section>
) : null}
<section className="glass-warning mt-4 rounded border border-orange-100 p-3">
<section className="material-tone-warning mt-4 rounded border border-orange-100 p-3">
<div className="flex items-center gap-2 text-sm font-semibold text-orange-900">
<TriangleAlert size={16} aria-hidden="true" />
Agent 解释
@@ -138,7 +138,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
<section className="mt-4">
<h3 className="text-sm font-semibold text-slate-900">属性</h3>
<dl className="mt-2 divide-y divide-slate-100 rounded border border-slate-200 bg-white">
<dl className="surface-reading mt-2 divide-y divide-slate-100 rounded border">
{propertyEntries.map((entry) => (
<div key={entry.key} className="grid grid-cols-[110px_1fr] gap-2 px-3 py-2 text-sm">
<dt className="truncate text-slate-500">{entry.label}</dt>
@@ -150,7 +150,7 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
</>
) : (
<div className="flex h-full flex-col items-center justify-center text-center">
<div className="grid h-12 w-12 place-items-center rounded border border-slate-200 bg-white text-slate-500">
<div className="surface-reading grid h-12 w-12 place-items-center rounded border text-slate-500">
<Target size={22} aria-hidden="true" />
</div>
<p className="mt-3 text-sm font-medium text-slate-800">等待地图选择</p>
@@ -166,8 +166,8 @@ export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelPro
function getScadaPresentation(rawTypeId: unknown) {
const typeId = Number(rawTypeId);
if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, sectionClassName: "glass-normal border-teal-200", labelClassName: "text-teal-800" };
if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, sectionClassName: "glass-info border-blue-200", labelClassName: "text-blue-800" };
if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, sectionClassName: "glass-warning border-orange-200", labelClassName: "text-orange-800" };
return { iconPath: SCADA_ICON_PATHS.unknown, sectionClassName: "border-slate-200 bg-slate-50", labelClassName: "text-slate-800" };
if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, sectionClassName: "material-tone-normal border-teal-200", labelClassName: "text-teal-800" };
if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, sectionClassName: "material-tone-info border-blue-200", labelClassName: "text-blue-800" };
if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, sectionClassName: "material-tone-warning border-orange-200", labelClassName: "text-orange-800" };
return { iconPath: SCADA_ICON_PATHS.unknown, sectionClassName: "surface-control border-transparent", labelClassName: "text-slate-800" };
}