feat: expand intelligent investigation workspace

src/features/workbench/peripheral-sample/peripheral-sample-panel.tsx

@@ -16,7 +16,7 @@ import {
   type PeripheralWorkOrder
 } from "./client";
 
-const DISCLAIMER = "仅用于验证外围工单接口与同步过程，不代表真实现场处置";
+const WORK_ORDER_DESCRIPTION = "录入业务工单并跟踪处理反馈，事件调查依据实际查询和现场记录开展。";
 
 export function PeripheralSamplePanel({
   open,
@@ -64,15 +64,15 @@ export function PeripheralSamplePanel({
   return (
     <aside
       aria-label="外围系统"
-      className="acrylic-panel absolute bottom-3 right-3 top-16 z-[61] flex w-[min(680px,calc(100%-1.5rem))] flex-col overflow-hidden overscroll-contain rounded-2xl border text-slate-900 shadow-[0_16px_44px_rgba(15,23,42,0.18)] max-sm:bg-[var(--surface-reading)]"
+      className="workbench-shadcn-surface bg-background text-foreground absolute bottom-3 right-3 top-16 z-[61] flex w-[min(680px,calc(100%-1.5rem))] flex-col overflow-hidden overscroll-contain rounded-2xl border shadow-lg"
     >
-      <header className="flex min-h-16 shrink-0 items-center gap-3 border-b border-slate-200/80 px-4 sm:px-5">
-        <span className="grid h-8 w-8 place-items-center rounded-lg bg-cyan-700 text-white">
+      <header className="flex min-h-16 shrink-0 items-center gap-3 border-b border-border px-4 sm:px-5">
+        <span className="grid h-8 w-8 place-items-center rounded-lg bg-muted text-foreground">
           <RadioTower size={17} />
         </span>
         <div className="min-w-0 flex-1">
           <h2 className="text-sm font-semibold">外围系统</h2>
-          <p className="text-xs text-slate-500">工单协同与 SCADA 最新数据</p>
+          <p className="text-xs text-muted-foreground">工单协同与 SCADA 最新数据</p>
         </div>
         <Button
           size="icon"
@@ -96,8 +96,8 @@ export function PeripheralSamplePanel({
         onValueChange={(value) => setActiveSystem(value as "work-orders" | "scada")}
         className="flex min-h-0 flex-1 flex-col"
       >
-        <div className="shrink-0 border-b border-[var(--surface-divider)] px-3 py-2 sm:px-4">
-          <TabsList aria-label="外围系统类型" className="grid w-full grid-cols-2 bg-[var(--surface-control)]">
+        <div className="shrink-0 border-b border-border px-3 py-2 sm:px-4">
+          <TabsList aria-label="外围系统类型" className="grid w-full grid-cols-2 bg-muted">
             <TabsTrigger value="work-orders"><ClipboardList size={14} />工单系统</TabsTrigger>
             <TabsTrigger value="scada"><Activity size={14} />SCADA 系统</TabsTrigger>
           </TabsList>
@@ -105,7 +105,10 @@ export function PeripheralSamplePanel({
 
         <TabsContent value="work-orders" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3 sm:p-4">
           <div className="mb-3 grid gap-2">
-            <WorkbenchNotice tone="info" title="合成工单环境">{DISCLAIMER}</WorkbenchNotice>
+            <div className="space-y-1 border-b border-border pb-4 text-xs leading-5">
+              <p className="font-medium">外围工单系统</p>
+              <p className="text-muted-foreground">{WORK_ORDER_DESCRIPTION}</p>
+            </div>
             {!client.configured ? (
               <WorkbenchNotice tone="warning">
                 未配置 TJWATER_PERIPHERAL_SAMPLE_API_BASE_URL，当前不会连接外围工单服务。
@@ -128,9 +131,9 @@ export function PeripheralSamplePanel({
               />
               <Disclosure
                 label={<span className="inline-flex items-center gap-2"><ReceiptText size={14} />按 request_id 找回提交结果</span>}
-                className="rounded-[14px] border border-slate-200/90 bg-[var(--surface-reading)] px-3.5 shadow-[0_1px_2px_rgba(15,23,42,0.06)]"
+                className="rounded-lg border border-border bg-background px-3.5"
               >
-                <p className="pb-2 text-xs leading-5 text-slate-500">
+                <p className="pb-2 text-xs leading-5 text-muted-foreground">
                   结果未知时只查询原请求，不会重复创建或更新工单。
                 </p>
                 <div className="flex gap-2 pb-3">
@@ -139,7 +142,7 @@ export function PeripheralSamplePanel({
                     value={receiptRequestId}
                     onChange={(event) => setReceiptRequestId(event.target.value.trim())}
                     placeholder="request_id"
-                    className="h-10 min-w-0 flex-1 rounded-lg border-[var(--surface-divider)] bg-[var(--surface-reading)] font-mono text-xs md:text-xs"
+                    className="h-10 min-w-0 flex-1 rounded-lg border-border bg-background font-mono text-xs md:text-xs"
                   />
                   <Button
                     variant="outline"