feat(web-platform): release V0.9.3 全模块界面重构

web_platform/src/app/components/NotificationCenter.tsx

@@ -4,7 +4,11 @@ import { Badge, IconButton, Popover } from '../../components/ui';
 export interface WorkbenchNotification {
   id: number;
   title: string;
+  /** 通知中心/诊断抽屉中的完整技术详情。 */
   detail?: string;
+  /** Toast 使用的一行摘要，避免把日志常驻在视口上。 */
+  message?: string;
+  category?: 'import' | 'compile' | 'runtime' | 'system';
   tone: 'success' | 'warning' | 'danger' | 'info';
   at: number;
 }
@@ -33,13 +37,13 @@ export function NotificationCenter({
       )}
     >
       {({ close }) => (
-        <div className="w-80 overflow-hidden rounded-lg border border-border bg-surface-elevated shadow-xl">
+        <div className="w-80 max-w-full overflow-hidden rounded-lg border border-border bg-surface-elevated shadow-xl">
           <header className="flex h-9 items-center justify-between border-b border-border px-3">
             <h2 className="text-xs font-semibold">通知</h2>
             <div className="flex gap-2">
               {onOpenLog && (
                 <button
-                  className="text-[10px] text-accent"
+                  className="min-h-7 text-xs text-accent"
                   onClick={() => {
                     close();
                     onOpenLog();
@@ -50,7 +54,7 @@ export function NotificationCenter({
               )}
               {items.length > 0 && (
                 <button
-                  className="flex items-center gap-1 text-[10px] text-text-tertiary hover:text-danger"
+                  className="flex min-h-7 items-center gap-1 text-xs text-text-tertiary hover:text-danger"
                   onClick={onClear}
                 >
                   <Trash2 className="h-3 w-3" />
@@ -73,7 +77,7 @@ export function NotificationCenter({
                     />
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
-                        <h3 className="truncate text-xs font-medium">{item.title}</h3>
+                        <h3 className="break-words text-xs font-medium">{item.title}</h3>
                         <Badge>
                           {new Date(item.at).toLocaleTimeString('zh-CN', {
                             hour: '2-digit',
@@ -82,9 +86,12 @@ export function NotificationCenter({
                         </Badge>
                       </div>
                       {item.detail && (
-                        <p className="mt-1 line-clamp-3 text-[10px] leading-4 text-text-tertiary">
-                          {item.detail}
-                        </p>
+                        <details className="domain-details mt-1">
+                          <summary>事件详情</summary>
+                          <p className="whitespace-pre-wrap break-words text-xs text-text-secondary">
+                            {item.detail}
+                          </p>
+                        </details>
                       )}
                     </div>
                     <IconButton
@@ -127,13 +134,15 @@ export function ToastViewport({
   return (
     <div
       role="status"
-      className="pointer-events-auto absolute right-4 top-4 z-30 flex w-80 gap-2 rounded-lg border border-border bg-surface-elevated p-3 shadow-xl"
+      className="pointer-events-auto flex w-full gap-2 rounded-lg border border-border bg-surface-elevated p-3 shadow-xl"
     >
       <Icon className="h-4 w-4 shrink-0 text-accent" />
       <div className="min-w-0 flex-1">
         <p className="text-xs font-medium">{item.title}</p>
-        {item.detail && (
-          <p className="mt-1 line-clamp-2 text-[10px] text-text-tertiary">{item.detail}</p>
+        {(item.message ?? item.detail) && (
+          <p className="mt-1 line-clamp-3 text-xs text-text-tertiary">
+            {item.message ?? item.detail}
+          </p>
         )}
       </div>
     </div>