@lokvis/ui-react 0.2.1 → 0.4.1

package/src/components/PipelineBar.tsx

@@ -6,121 +6,114 @@
  */
 
 import * as React from 'react';
-import { Icon } from '@lokvis/ui-core';
+import { FOCUS_RING, Icon } from '@lokvis/ui-core';
 import { useWorkspaceStore } from '../store/index.js';
+import { StatusDot } from './StatusDot.js';
 
 export interface PipelineBarProps {
-  className?: string;
+ className?: string;
 }
 
 export function PipelineBar({ className = '' }: PipelineBarProps) {
-  const nodes = useWorkspaceStore((s) => s.nodes);
-  const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
-  const selectNode = useWorkspaceStore((s) => s.selectNode);
-  const removeNode = useWorkspaceStore((s) => s.removeNode);
+ const nodes = useWorkspaceStore((s) => s.nodes);
+ const selectedNodeId = useWorkspaceStore((s) => s.selectedNodeId);
+ const selectNode = useWorkspaceStore((s) => s.selectNode);
+ const removeNode = useWorkspaceStore((s) => s.removeNode);
 
-  return (
-    <div className={`flex h-10 shrink-0 items-center gap-2 border-t border-zinc-200 bg-white px-3 dark:border-zinc-800 dark:bg-zinc-900 ${className}`}>
-      <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-400 shrink-0">
-        Pipeline
-      </span>
+ return (
+ <div className={`flex h-10 shrink-0 items-center gap-2 border-t border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-3 ${className}`}>
+ <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--lokvis-fg-subtle)] shrink-0">
+ Pipeline
+ </span>
 
-      {nodes.length === 0 ? (
-        <span className="text-[11px] text-zinc-400">
-          Empty &mdash; add capabilities from the right panel
-        </span>
-      ) : (
-        <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">
-            <Icon size={12}><path d="M12 4.5v15m7.5-7.5h-15" /></Icon>
-            Source
-          </div>
+ {nodes.length === 0 ? (
+ <span className="text-[11px] text-[var(--lokvis-fg-subtle)]">
+ Empty &mdash; add capabilities from the right panel
+ </span>
+ ) : (
+ <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-[var(--lokvis-surface-muted)] px-2 py-1 text-[10px] font-medium text-[var(--lokvis-fg-muted)] shrink-0">
+ <Icon size={12}><path d="M12 4.5v15m7.5-7.5h-15" /></Icon>
+ Source
+ </div>
 
-          {/* Arrow */}
-          <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
-            <path d="m9 5 7 7-7 7" />
-          </Icon>
+ {/* Arrow */}
+ <Icon size={12} className="shrink-0 text-[var(--lokvis-fg-subtle)]">
+ <path d="m9 5 7 7-7 7" />
+ </Icon>
 
-          {/* Nodes */}
-          {nodes.map((node, i) => {
-            const selected = node.id === selectedNodeId;
-            return (
-              <React.Fragment key={node.id}>
-                <button
-                  type="button"
-                  onClick={() => selectNode(node.id)}
-                  className={`group flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all ${
-                    selected
-                      ? 'bg-indigo-100 text-indigo-700 ring-1 ring-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:ring-indigo-700'
-                      : node.status === 'running'
-                      ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400'
-                      : node.status === 'success'
-                      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
-                      : node.status === 'failed'
-                      ? 'bg-red-100 text-red-700 dark:bg-red-950/30 dark:text-red-400'
-                      : 'bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700'
-                  }`}
-                >
-                  <span className="font-mono">{node.capability}</span>
-                  <StatusDot status={node.status} />
-                  <span
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      removeNode(node.id);
-                    }}
-                    className="ml-0.5 rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/40"
-                    role="button"
-                    aria-label="Remove step"
-                  >
-                    <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
-                  </span>
-                </button>
+ {/* Nodes */}
+ {nodes.map((node, i) => {
+ const selected = node.id === selectedNodeId;
+ return (
+ <React.Fragment key={node.id}>
+ {/* D7: remove button 作为 node button 的兄弟而非子元素(HTML 规范禁止 button 嵌套) */}
+ <div className="group flex shrink-0 items-center gap-0.5">
+ <button
+ type="button"
+ onClick={() => selectNode(node.id)}
+ onKeyDown={(e) => {
+ // 键盘可达:Delete/Backspace 删除节点(与 WorkflowEditor 一致)
+ if (e.key === 'Delete' || e.key === 'Backspace') {
+ e.preventDefault();
+ removeNode(node.id);
+ }
+ }}
+ aria-label={`节点 ${node.capability},位置 ${i + 1},Delete 删除`}
+ aria-pressed={selected}
+ className={`flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] font-medium transition-all ${FOCUS_RING} ${
+ selected
+ ? 'bg-[var(--lokvis-primary)]/15 text-[var(--lokvis-primary)] ring-1 ring-[var(--lokvis-primary)]/50'
+ : node.status === 'running'
+ ? 'bg-[var(--lokvis-warning)]/15 text-[var(--lokvis-warning)]'
+ : node.status === 'success'
+ ? 'bg-[var(--lokvis-success)]/15 text-[var(--lokvis-success)]'
+ : node.status === 'failed'
+ ? 'bg-[var(--lokvis-danger)]/15 text-[var(--lokvis-danger)]'
+ : 'bg-[var(--lokvis-surface-muted)] text-[var(--lokvis-fg-muted)] hover:bg-[var(--lokvis-border)]'
+ }`}
+ >
+ <span className="font-mono">{node.capability}</span>
+ <StatusDot status={node.status} />
+ </button>
+ <button
+ type="button"
+ onClick={() => removeNode(node.id)}
+ className="rounded p-0.5 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lokvis-danger)] hover:bg-[var(--lokvis-danger)]/15 hover:text-[var(--lokvis-danger)]"
+ aria-label="Remove step"
+ >
+ <Icon size={10} strokeWidth={3}><path d="M6 18L18 6M6 6l12 12" /></Icon>
+ </button>
+ </div>
 
-                {/* Arrow between nodes */}
-                {i < nodes.length - 1 && (
-                  <Icon size={12} className="shrink-0 text-zinc-300 dark:text-zinc-600">
-                    <path d="m9 5 7 7-7 7" />
-                  </Icon>
-                )}
-              </React.Fragment>
-            );
-          })}
+ {/* Arrow between nodes */}
+ {i < nodes.length - 1 && (
+ <Icon size={12} className="shrink-0 text-[var(--lokvis-fg-subtle)]">
+ <path d="m9 5 7 7-7 7" />
+ </Icon>
+ )}
+ </React.Fragment>
+ );
+ })}
 
-          {/* Output indicator */}
-          <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">
-            <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>
-      )}
+ {/* Output indicator */}
+ <Icon size={12} className="shrink-0 text-[var(--lokvis-fg-subtle)]">
+ <path d="m9 5 7 7-7 7" />
+ </Icon>
+ <div className="flex items-center gap-1 rounded-md bg-[var(--lokvis-surface-muted)] px-2 py-1 text-[10px] font-medium text-[var(--lokvis-fg-muted)] shrink-0">
+ <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>
+ )}
 
-      {/* Step count */}
-      {nodes.length > 0 && (
-        <span className="shrink-0 text-[10px] tabular-nums text-zinc-400">
-          {nodes.length} step{nodes.length !== 1 ? 's' : ''}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function StatusDot({ status }: { status: string }) {
-  const color =
-    status === 'running'
-      ? 'bg-amber-500'
-      : status === 'success'
-      ? 'bg-emerald-500'
-      : status === 'failed'
-      ? 'bg-red-500'
-      : status === 'pending'
-      ? 'bg-zinc-400 dark:bg-zinc-500'
-      : 'bg-zinc-300 dark:bg-zinc-600';
-
-  const animate = status === 'running' ? 'animate-pulse' : '';
-
-  return <span className={`h-1.5 w-1.5 rounded-full shrink-0 ${color} ${animate}`} />;
+ {/* Step count */}
+ {nodes.length > 0 && (
+ <span className="shrink-0 text-[10px] tabular-nums text-[var(--lokvis-fg-subtle)]">
+ {nodes.length} step{nodes.length !== 1 ? 's' : ''}
+ </span>
+ )}
+ </div>
+ );
 }

package/src/components/ProgressBar.tsx

@@ -2,10 +2,10 @@
  * ProgressBar - 工作流执行进度条 + 取消按钮(W11.6)
  *
  * 展示:
- *   - 节点完成进度(成功数 / 总数)
- *   - 横向进度条(running 时动画)
- *   - Cancel 按钮(调用 cancelRun)
- *   - 状态消息(statusMessage)
+ * - 节点完成进度(成功数 / 总数)
+ * - 横向进度条(running 时动画)
+ * - Cancel 按钮(调用 cancelRun)
+ * - 状态消息(statusMessage)
  *
  * 仅在 running 或最近一次执行有结果时显示。
  *
@@ -17,88 +17,88 @@ import { useWorkspaceStore } from '../store/index.js';
 import { useWorkflowProgress } from '../hooks/useWorkflowProgress.js';
 
 export interface ProgressBarProps {
-  className?: string;
+ 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);
+ 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();
+ // 进度计算抽取到共享 hook(与 StatusBar 共用,避免重复逻辑)
+ const { total, done, failedCount, pct, hasFailure } = useWorkflowProgress();
 
-  // 没有节点或未运行且无最近结果时不渲染
-  if (total === 0) return null;
-  if (!running && done === 0) return null;
+ // 没有节点或未运行且无最近结果时不渲染
+ 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>
+ return (
+ <div
+ className={`flex items-center gap-2 border-b border-[var(--lokvis-border)] bg-[var(--lokvis-surface)] px-3 py-1.5 ${className}`}
+ role="status"
+ aria-live="polite"
+ aria-label={`工作流进度:${done} / ${total}`}
+ >
+ {/* 进度条 */}
+ <div className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--lokvis-border)]">
+ <div
+ className={`absolute inset-y-0 left-0 transition-all duration-300 ${
+ hasFailure
+ ? 'bg-[var(--lokvis-danger)]'
+ : running
+ ? 'bg-[var(--lokvis-primary)]'
+ : 'bg-[var(--lokvis-success)]'
+ } ${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>
+ {/* 计数 */}
+ <span className="shrink-0 text-[10px] font-medium tabular-nums text-[var(--lokvis-fg-muted)]">
+ {done}/{total}
+ {failedCount > 0 && (
+ <span className="ml-1 text-[var(--lokvis-danger)]">({failedCount} failed)</span>
+ )}
+ </span>
 
-      {/* 状态消息(running 时显示) */}
-      {running && statusMessage && (
-        <span className="hidden shrink-0 truncate text-[10px] text-zinc-400 sm:inline">
-          {statusMessage}
-        </span>
-      )}
+ {/* 状态消息(running 时显示) */}
+ {running && statusMessage && (
+ <span className="hidden shrink-0 truncate text-[10px] text-[var(--lokvis-fg-subtle)] 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>
-      )}
+ {/* Cancel 按钮(仅 running 时) */}
+ {running && (
+ <button
+ type="button"
+ onClick={() => void cancelRun()}
+ aria-label="取消运行"
+ title="取消运行"
+ className="flex shrink-0 items-center gap-1 rounded-md bg-[var(--lokvis-danger)]/10 px-2 py-0.5 text-[10px] font-medium text-[var(--lokvis-danger)] transition-colors hover:bg-[var(--lokvis-danger)]/15"
+ >
+ <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>
-  );
+ {/* 完成图标(非 running 且有结果) */}
+ {!running && done === total && (
+ <span
+ className={`flex shrink-0 items-center gap-1 text-[10px] font-medium ${
+ hasFailure ? 'text-[var(--lokvis-danger)]' : 'text-[var(--lokvis-success)]'
+ }`}
+ >
+ <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>
+ );
 }