@lokvis/ui-react 0.1.0 → 0.2.0

package/src/components/PipelineBar.tsx

@@ -6,6 +6,7 @@
  */
 
 import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
 
 export interface PipelineBarProps {
@@ -32,14 +33,14 @@ export function PipelineBar({ className = '' }: PipelineBarProps) {
         <div className="flex flex-1 items-center gap-1 overflow-x-auto min-w-0">
           {/* Source indicator */}
           <div className="flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 shrink-0">
-            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
+            <Icon size={12}><path d="M12 4.5v15m7.5-7.5h-15" /></Icon>
             Source
           </div>
 
           {/* Arrow */}
-          <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
-          </svg>
+          <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
+            <path d="m9 5 7 7-7 7" />
+          </Icon>
 
           {/* Nodes */}
           {nodes.map((node, i) => {
@@ -72,26 +73,26 @@ export function PipelineBar({ className = '' }: PipelineBarProps) {
                     role="button"
                     aria-label="Remove step"
                   >
-                    <svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+                    <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
                   </span>
                 </button>
 
                 {/* Arrow between nodes */}
                 {i < nodes.length - 1 && (
-                  <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
-                  </svg>
+                  <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
+                    <path d="m9 5 7 7-7 7" />
+                  </Icon>
                 )}
               </React.Fragment>
             );
           })}
 
           {/* Output indicator */}
-          <svg className="h-3 w-3 shrink-0 text-zinc-300 dark:text-zinc-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
-          </svg>
+          <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
+            <path d="m9 5 7 7-7 7" />
+          </Icon>
           <div className="flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-[10px] font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 shrink-0">
-            <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
+            <Icon size={12}><path d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></Icon>
             Output
           </div>
         </div>

package/src/components/ProgressBar.tsx

@@ -0,0 +1,104 @@
+/**
+ * ProgressBar - 工作流执行进度条 + 取消按钮(W11.6)
+ *
+ * 展示:
+ *   - 节点完成进度(成功数 / 总数)
+ *   - 横向进度条(running 时动画)
+ *   - Cancel 按钮(调用 cancelRun)
+ *   - 状态消息(statusMessage)
+ *
+ * 仅在 running 或最近一次执行有结果时显示。
+ *
+ * @module ProgressBar
+ */
+
+import { Icon } from '@lokvis/ui-core';
+import { useWorkspaceStore } from '../store/index.js';
+import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
+
+export interface ProgressBarProps {
+  className?: string;
+}
+
+export function ProgressBar({ className = '' }: ProgressBarProps) {
+  const running = useWorkspaceStore((s) => s.running);
+  const statusMessage = useWorkspaceStore((s) => s.statusMessage);
+  const cancelRun = useWorkspaceStore((s) => s.cancelRun);
+
+  // 进度计算抽取到共享 hook(与 StatusBar 共用,避免重复逻辑)
+  const { total, done, failedCount, pct, hasFailure } = useWorkflowProgress();
+
+  // 没有节点或未运行且无最近结果时不渲染
+  if (total === 0) return null;
+  if (!running && done === 0) return null;
+
+  return (
+    <div
+      className={`flex items-center gap-2 border-b border-zinc-200 bg-white px-3 py-1.5 dark:border-zinc-800 dark:bg-zinc-900 ${className}`}
+      role="status"
+      aria-live="polite"
+      aria-label={`工作流进度:${done} / ${total}`}
+    >
+      {/* 进度条 */}
+      <div className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800">
+        <div
+          className={`absolute inset-y-0 left-0 transition-all duration-300 ${
+            hasFailure
+              ? 'bg-red-500'
+              : running
+              ? 'bg-indigo-500'
+              : 'bg-emerald-500'
+          } ${running ? 'animate-pulse' : ''}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* 计数 */}
+      <span className="shrink-0 text-[10px] font-medium tabular-nums text-zinc-500 dark:text-zinc-400">
+        {done}/{total}
+        {failedCount > 0 && (
+          <span className="ml-1 text-red-500">({failedCount} failed)</span>
+        )}
+      </span>
+
+      {/* 状态消息(running 时显示) */}
+      {running && statusMessage && (
+        <span className="hidden shrink-0 truncate text-[10px] text-zinc-400 sm:inline">
+          {statusMessage}
+        </span>
+      )}
+
+      {/* Cancel 按钮(仅 running 时) */}
+      {running && (
+        <button
+          type="button"
+          onClick={() => void cancelRun()}
+          aria-label="取消运行"
+          title="取消运行"
+          className="flex shrink-0 items-center gap-1 rounded-md bg-red-50 px-2 py-0.5 text-[10px] font-medium text-red-600 transition-colors hover:bg-red-100 dark:bg-red-950/30 dark:text-red-400 dark:hover:bg-red-900/40"
+        >
+          <Icon size={10} strokeWidth={3}><path d="M6 6l12 12M6 18L18 6" /></Icon>
+          Cancel
+        </button>
+      )}
+
+      {/* 完成图标(非 running 且有结果) */}
+      {!running && done === total && (
+        <span
+          className={`flex shrink-0 items-center gap-1 text-[10px] font-medium ${
+            hasFailure ? 'text-red-500' : 'text-emerald-500'
+          }`}
+        >
+          <Icon size={10} strokeWidth={3}>
+            {hasFailure ? (
+              <path d="M12 2L2 22h20L12 2zM12 9v5M12 17v.01" />
+            ) : (
+              <path d="M20 6L9 17l-5-5" />
+            )}
+          </Icon>
+          {hasFailure ? 'Failed' : 'Done'}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/StatusBar.tsx

@@ -1,15 +1,48 @@
 /**
  * StatusBar - 底部状态栏
  *
- * 紧凑单行：左侧状态指示，右侧资源统计。
+ * 紧凑单行:左侧状态指示 + 当前工具 + 进度,右侧在线状态 + 资源统计 + 存储配额。
+ *
+ * W9.6 新增:
+ *   - 当前选中工具名(从 selectedNode 取)
+ *   - 执行进度(已完成节点数 / 总节点数)
+ *   - 在线状态(navigator.onLine + 事件监听)
  */
 
+import * as React from 'react';
 import { useWorkspaceStore } from '../store/index.js';
+import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
 
 export interface StatusBarProps {
   className?: string;
 }
 
+/** 格式化字节数为人类可读(KB/MB/GB) */
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+/** useOnlineStatus - 监听 navigator.onLine + online/offline 事件(W9.6) */
+function useOnlineStatus(): boolean {
+  const [online, setOnline] = React.useState<boolean>(() =>
+    typeof navigator !== 'undefined' ? navigator.onLine : true
+  );
+  React.useEffect(() => {
+    const onOnline = () => setOnline(true);
+    const onOffline = () => setOnline(false);
+    window.addEventListener('online', onOnline);
+    window.addEventListener('offline', onOffline);
+    return () => {
+      window.removeEventListener('online', onOnline);
+      window.removeEventListener('offline', onOffline);
+    };
+  }, []);
+  return online;
+}
+
 export function StatusBar({ className = '' }: StatusBarProps) {
   const statusMessage = useWorkspaceStore((s) => s.statusMessage);
   const error = useWorkspaceStore((s) => s.error);
@@ -17,14 +50,32 @@ export function StatusBar({ className = '' }: StatusBarProps) {
   const assets = useWorkspaceStore((s) => s.assets);
   const capabilities = useWorkspaceStore((s) => s.capabilities);
   const nodes = useWorkspaceStore((s) => s.nodes);
+  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+  const storageUsage = useWorkspaceStore((s) => s.storageUsage);
   const setError = useWorkspaceStore((s) => s.setError);
+  const online = useOnlineStatus();
+
+  // W9.6 当前选中工具名
+  const selectedNode = nodes.find((n) => n.id === selectedNodeId);
+
+  // W9.6 执行进度(抽取到共享 hook,与 ProgressBar 共用,避免重复逻辑)
+  const { total: totalNodes, done: doneNodes, pct: progressPct } = useWorkflowProgress();
+
+  // W6.7 存储配额压力:>=95% 红(临界),>=80% 琥珀(警告),其余正常
+  const ratio = storageUsage ? storageUsage.usage / storageUsage.quota : 0;
+  const storageCritical = ratio >= 0.95;
+  const storageWarning = ratio >= 0.8 && !storageCritical;
 
   return (
     <footer
       className={`flex h-7 shrink-0 items-center justify-between border-t border-zinc-200 bg-zinc-50 px-3 dark:border-zinc-800 dark:bg-zinc-950 ${className}`}
     >
-      {/* Left: Status */}
-      <div className="flex items-center gap-2 min-w-0">
+      {/* Left: Status — m5 加 aria-live,屏幕阅读器播报状态变化 */}
+      <div
+        className="flex items-center gap-2 min-w-0"
+        role="status"
+        aria-live="polite"
+      >
         <span className="flex items-center gap-1.5">
           <span
             className={`h-1.5 w-1.5 rounded-full shrink-0 ${
@@ -34,11 +85,33 @@ export function StatusBar({ className = '' }: StatusBarProps) {
                 ? 'bg-amber-500 animate-pulse'
                 : 'bg-emerald-500'
             }`}
+            aria-hidden="true"
           />
           <span className={`truncate text-[10px] ${error ? 'text-red-500' : 'text-zinc-500'}`}>
             {statusMessage}
           </span>
         </span>
+
+        {/* W9.6 当前工具名 */}
+        {selectedNode && (
+          <>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
+            <span className="shrink-0 font-mono text-[10px] text-indigo-500 dark:text-indigo-400 truncate max-w-[120px]">
+              {selectedNode.capability}
+            </span>
+          </>
+        )}
+
+        {/* W9.6 执行进度 */}
+        {running && totalNodes > 0 && (
+          <>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">·</span>
+            <span className="shrink-0 tabular-nums text-[10px] text-amber-600 dark:text-amber-400">
+              {doneNodes}/{totalNodes} ({progressPct}%)
+            </span>
+          </>
+        )}
+
         {error && (
           <button
             type="button"
@@ -52,10 +125,56 @@ export function StatusBar({ className = '' }: StatusBarProps) {
 
       {/* Right: Stats */}
       <div className="flex items-center gap-3 shrink-0 text-[10px] text-zinc-400 tabular-nums">
+        {/* W9.6 在线状态 */}
+        <span
+          className={`flex items-center gap-1 ${online ? 'text-emerald-500' : 'text-amber-500'}`}
+          title={online ? 'Online' : 'Offline — running locally, no upload needed'}
+          aria-label={online ? 'Online' : 'Offline — files still processed locally'}
+        >
+          <span className={`h-1.5 w-1.5 rounded-full ${online ? 'bg-emerald-500' : 'bg-amber-500'}`} aria-hidden="true" />
+          {online ? 'Online' : 'Offline'}
+        </span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
+
+        {/* W6.7 存储配额:接近上限时变色警告;m5 加 aria-label 让屏幕阅读器播报告警 */}
+        {storageUsage && (
+          <>
+            <span
+              className={`flex items-center gap-1 ${
+                storageCritical
+                  ? 'text-red-500 font-semibold'
+                  : storageWarning
+                  ? 'text-amber-500'
+                  : 'text-zinc-400'
+              }`}
+              title={
+                storageCritical
+                  ? `Storage almost full (${Math.round(ratio * 100)}%) — clean up to free space`
+                  : storageWarning
+                  ? `Storage nearing limit (${Math.round(ratio * 100)}%)`
+                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)}`
+              }
+              aria-label={
+                storageCritical
+                  ? `Storage critical: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent. Clean up to free space.`
+                  : storageWarning
+                  ? `Storage warning: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used, ${Math.round(ratio * 100)} percent.`
+                  : `Storage: ${formatBytes(storageUsage.usage)} of ${formatBytes(storageUsage.quota)} used.`
+              }
+              aria-live={storageCritical ? 'assertive' : 'polite'}
+            >
+              {(storageCritical || storageWarning) && (
+                <span className="text-[9px]" aria-hidden="true">⚠</span>
+              )}
+              {formatBytes(storageUsage.usage)} / {formatBytes(storageUsage.quota)}
+            </span>
+            <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
+          </>
+        )}
         <span>{assets.length} asset{assets.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
         <span>{capabilities.length} cap{capabilities.length !== 1 ? 's' : ''}</span>
-        <span className="text-zinc-300 dark:text-zinc-700">|</span>
+        <span className="text-zinc-300 dark:text-zinc-700" aria-hidden="true">|</span>
         <span>{nodes.length} step{nodes.length !== 1 ? 's' : ''}</span>
       </div>
     </footer>

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,122 @@
+/**
+ * ThemeToggle - 暗色模式切换按钮(W9.7)
+ *
+ * 使用 `useTheme()` hook 读写 localStorage + 跟随系统偏好。
+ * 与 `tokens.css` 的 `.dark` / `.light` 类双触发机制对齐。
+ *
+ * 交互:
+ *   - 左键单击:在 light / dark 之间切换(基于当前 resolvedTheme 决定下一态)
+ *   - 右键单击:弹出菜单(light / dark / system 三态)
+ *   - ESC:关闭菜单
+ *   - 点击菜单外部:关闭菜单
+ */
+
+import * as React from 'react';
+import { Icon } from '@lokvis/ui-core';
+import { useTheme, type ThemeMode } from '../hooks/useTheme.js';
+
+export interface ThemeToggleProps {
+  className?: string;
+  /** 是否显示文字标签(默认仅图标) */
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({ className = '', showLabel = false }: ThemeToggleProps) {
+  const { theme, resolvedTheme, toggleTheme, setTheme } = useTheme();
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const btnRef = React.useRef<HTMLButtonElement>(null);
+
+  // 点击外部关闭菜单 + ESC 关闭
+  React.useEffect(() => {
+    if (!menuOpen) return;
+    const onDown = (e: MouseEvent) => {
+      // e.target 可能是任意 EventTarget;用 instanceof Node 类型守卫收窄,
+      // 避免 as 断言(与 WorkflowEditor 等处统一)
+      if (e.target instanceof Node && btnRef.current && !btnRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [menuOpen]);
+
+  const isDark = resolvedTheme === 'dark';
+
+  const icon = isDark ? (
+    <Icon size={14} strokeWidth={2}>
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </Icon>
+  ) : (
+    <Icon size={14} strokeWidth={2}>
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </Icon>
+  );
+
+  const label = theme === null ? 'System' : theme === 'dark' ? 'Dark' : 'Light';
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        ref={btnRef}
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        onClick={() => toggleTheme()}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setMenuOpen((v) => !v);
+        }}
+        aria-label={`Theme: ${label}. Click to toggle, right-click for options.`}
+        title={`Theme: ${label} (right-click for options)`}
+        className="flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
+      >
+        {icon}
+        {showLabel && <span className="ml-1 text-xs">{label}</span>}
+      </button>
+
+      {menuOpen && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-50 mt-1 w-32 overflow-hidden rounded-md border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-800 dark:bg-zinc-900"
+        >
+          {(['light', 'dark', null] as Array<ThemeMode | null>).map((mode) => {
+            const isActive = theme === mode;
+            const text = mode === null ? 'System' : mode === 'dark' ? 'Dark' : 'Light';
+            return (
+              <button
+                key={mode ?? 'system'}
+                type="button"
+                role="menuitemradio"
+                aria-checked={isActive}
+                onClick={() => {
+                  setTheme(mode);
+                  setMenuOpen(false);
+                }}
+                className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-xs transition-colors ${
+                  isActive
+                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-950/30 dark:text-indigo-300'
+                    : 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800'
+                }`}
+              >
+                <span>{text}</span>
+                {isActive && (
+                  <Icon size={12} strokeWidth={3}>
+                    <path d="M5 13l4 4L19 7" />
+                  </Icon>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}