@meiyukichan/dsh-sandore 0.1.0-rc.6

package/packages/client/WorkflowList.tsx

@@ -0,0 +1,158 @@
+/**
+ * WorkflowList：工作流 overlay 左栏列表（实例/定义 toggle + 搜索 + 新增）。
+ *
+ * 模式切换与选中态走模块级 `workflow-store`（跨 overlay 开合保留）；内容区复用
+ * `InstanceList`（默认态实例，3s 轮询）与 `DefinitionList`（编排态定义）。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/WorkflowList
+ */
+import { useState, useSyncExternalStore } from 'react'
+import {
+  Button, IconPlusOutline16, IconSearchOutline16, Input,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+import type { WorkspaceView } from '@deepseek-ai/dsh-client-runtime/client'
+
+import { InstanceList } from './InstanceList.tsx'
+import { DefinitionList } from './DefinitionList.tsx'
+import { NewInstanceDialog } from './NewInstanceDialog.tsx'
+import type { WorkflowOverlayFace } from './workflow-face.ts'
+import {
+  getWorkflowState, newDefinition, selectDefinition, selectInstance, setWorkflowState, subscribeWorkflowState, toggleListCollapse,
+} from './workflow-store.ts'
+import css from './WorkflowOverlay.module.css'
+
+/** WorkflowList 接收的 props。 */
+export interface WorkflowListProps {
+  /** 类型化翻译函数（sandore 命名空间）。 */
+  t: TranslateNS<'sandore'>
+  /** 工作区成员表（供 InstanceList 按工作区分组）。 */
+  workspaces: readonly WorkspaceView[]
+  /** 业务 face（列表类 RPC 已解包）。 */
+  face: WorkflowOverlayFace
+  /** 刷新计数：变化时重挂载列表（保存/删除/手动刷新后）。 */
+  refreshKey: number
+  /** 列表列宽（px，拖拽分隔条驱动）。 */
+  width: number
+}
+
+/** 渲染工作流 overlay 左栏列表。 */
+export function WorkflowList({ t, workspaces, face, refreshKey, width }: WorkflowListProps) {
+  const listMode = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().listMode)
+  const selectedInstanceId = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().selectedInstanceId)
+  const selectedDefinitionId = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().selectedDefinition?.id)
+  const [query, setQuery] = useState('')
+  /** 新增实例弹窗开关（实例模式下「+」按钮打开）。 */
+  const [creatingInstance, setCreatingInstance] = useState(false)
+  /** 实例列表即时刷新计数：新建/删除实例后 +1，重挂载 InstanceList 立即拉取
+      （不等 3s 轮询周期，新建后列表立即可见）。 */
+  const [instanceTick, setInstanceTick] = useState(0)
+
+  return (
+    <section className={css.list} style={{ width }} data-sandore-wf-list>
+      <header className={css.listHeader}>
+        <div className={css.listTitleRow}>
+          <div className={css.listTitleGroup}>
+            <span className={css.listTitle}>{t('panel.title')}</span>
+            {/* 收起左栏：切换为窄条 rail（展开 + 新增）。 */}
+            <button
+              type="button"
+              className={css.railBtn}
+              title={t('list.collapse')}
+              aria-label={t('list.collapse')}
+              onClick={toggleListCollapse}
+            >
+              {/* panel-left-close：收起左栏。 */}
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <path d="M9 3v18" />
+                <path d="m16 15-3-3 3-3" />
+              </svg>
+            </button>
+          </div>
+          {/* 实例/编排 开关：胶囊轨道 + 滑块，点击切换激活侧。 */}
+          <div className={css.toggle} role="tablist" aria-label={t('list.mode.switch')}>
+            <span className={`${css.toggleThumb} ${listMode === 'definition' ? css.toggleThumbRight : ''}`} />
+            <button
+              type="button"
+              role="tab"
+              aria-selected={listMode === 'instance'}
+              className={listMode === 'instance' ? css.toggleActive : ''}
+              onClick={() => { setWorkflowState({ listMode: 'instance' }) }}
+            >
+              {t('list.mode.instance')}
+            </button>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={listMode === 'definition'}
+              className={listMode === 'definition' ? css.toggleActive : ''}
+              onClick={() => { setWorkflowState({ listMode: 'definition' }) }}
+            >
+              {t('list.mode.definition')}
+            </button>
+          </div>
+        </div>
+        <div className={css.listToolbar}>
+          <Input
+            className={css.search ?? ''}
+            icon={<IconSearchOutline16 />}
+            value={query}
+            onChange={event => { setQuery(event.target.value) }}
+            placeholder={t('panel.search')}
+            aria-label={t('panel.search')}
+          />
+          <Button
+            size="sm"
+            variant="primary"
+            icon={<IconPlusOutline16 />}
+            title={t('panel.add.instance.hint')}
+            onClick={() => {
+              if (listMode === 'instance') setCreatingInstance(true)
+              else newDefinition()
+            }}
+          >
+            {listMode === 'definition' ? t('panel.add.definition') : t('panel.add.instance')}
+          </Button>
+        </div>
+      </header>
+      <div className={css.listBody}>
+        {listMode === 'definition' ? (
+          <DefinitionList
+            key={`def-${refreshKey}`}
+            t={t}
+            query={query}
+            activeId={selectedDefinitionId}
+            listDefinitions={face.listDefinitions}
+            deleteDefinition={face.deleteDefinition}
+            onOpen={selectDefinition}
+          />
+        ) : (
+          <InstanceList
+            key={`inst-${refreshKey}-${instanceTick}`}
+            t={t}
+            workspaces={workspaces}
+            query={query}
+            activeId={selectedInstanceId}
+            listInstances={face.listInstances}
+            deleteInstance={face.deleteInstance}
+            onOpen={selectInstance}
+            onInstanceDeleted={() => { setInstanceTick(tick => tick + 1) }}
+          />
+        )}
+      </div>
+      {creatingInstance && (
+        <NewInstanceDialog
+          t={t}
+          face={face}
+          onClose={() => { setCreatingInstance(false) }}
+          onCreated={instanceId => {
+            setCreatingInstance(false)
+            selectInstance(instanceId)
+            // 立即重挂载实例列表，让新实例马上可见（不必等轮询周期）。
+            setInstanceTick(tick => tick + 1)
+          }}
+        />
+      )}
+    </section>
+  )
+}

package/packages/client/WorkflowOverlay.module.css

@@ -0,0 +1,390 @@
+/* WorkflowOverlay：shell.overlay 全局工作流 UI（覆盖 conversation/details 列，sidebar 可见）。 */
+
+.layer {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  pointer-events: none;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: var(--wf-left, 248px);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
+  pointer-events: auto;
+  animation: overlay-in 0.18s ease;
+}
+
+@keyframes overlay-in {
+  from {
+    transform: translateX(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.header {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+  background: var(--dsw-alias-bg-elevated);
+}
+
+.headerTitle {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+
+.iconBtn:hover {
+  background: var(--dsw-alias-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* ── 双栏工作台 ─────────────────────────────────────────────────────────── */
+
+.body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 拖拽分隔条（照 DSH AppFrame .drag-handle 观感）。 */
+.dragHandle {
+  flex: none;
+  width: 7px;
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  touch-action: none;
+}
+
+.dragHandle::after {
+  content: '';
+  width: 1px;
+  height: 100%;
+  background: var(--dsw-alias-border-l1);
+  transition: background 0.15s, width 0.15s;
+}
+
+.dragHandle:hover::after,
+.dragHandle.dragging::after {
+  background: var(--dsw-alias-accent-primary);
+  width: 2px;
+}
+
+/* ── 左栏列表 ────────────────────────────────────────────────────────────── */
+
+.list {
+  flex: none;
+  min-width: 240px;
+  display: flex;
+  flex-direction: column;
+  background: var(--dsw-alias-bg-elevated);
+  overflow: hidden;
+}
+
+.listHeader {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+}
+
+.listTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.listTitle {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+
+/* 标题 + 收起按钮 左组（收起按钮紧贴标题，开关仍贴右缘）。 */
+.listTitleGroup {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+}
+
+/* 实例/编排 开关：紧凑黑白配色（白轨道 + 黑滑块）。滑块为选中侧，激活白字/未激活灰字。 */
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  padding: 2px;
+  width: 80px;
+  height: 22px;
+  box-sizing: border-box;
+}
+
+/* 滑块：黑色圆钮（选中侧），左右滑动。 */
+.toggleThumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(50% - 3px);
+  height: calc(100% - 4px);
+  border-radius: 999px;
+  background: #000;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+  transition: left 0.18s ease;
+  pointer-events: none;
+}
+
+.toggleThumb.toggleThumbRight {
+  left: calc(50% + 1px);
+}
+
+.toggle button {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  padding: 0 4px;
+  border: none;
+  background: transparent;
+  font-size: 11px;
+  line-height: 18px;
+  font-family: inherit;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  transition: color 0.18s ease;
+}
+
+.toggle button:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.toggle button.toggleActive {
+  /* 黑滑块上用柔和浅色文字（纯白刺眼、主题深色不可见；浅灰居中）。 */
+  color: rgba(255, 255, 255, 0.92);
+  font-weight: 500;
+}
+
+
+
+
+
+
+
+.listToolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 搜索框与新增按钮（Button sm，28px）等高：覆盖 Input 原子默认 32px 高。 */
+.listToolbar .search {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  box-sizing: border-box;
+}
+
+.search input {
+  width: 100%;
+}
+
+.listBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px 10px 12px;
+  box-sizing: border-box;
+}
+
+/* ── 收起态左栏窄条 rail ──────────────────────────────────────────────────── */
+
+.listRail {
+  flex: none;
+  width: 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 0;
+  box-sizing: border-box;
+  background: var(--dsw-alias-bg-elevated);
+  border-right: 1px solid var(--dsw-alias-border-l1);
+  overflow: hidden;
+}
+
+/* 窄条 rail 图标按钮（展开/新增；WorkflowList header 收起按钮同款）。 */
+.railBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+
+.railBtn:hover {
+  background: var(--dsw-alias-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+/* ── 右栏编辑区 ──────────────────────────────────────────────────────────── */
+
+.editorCol {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--dsw-alias-bg-base);
+  overflow: hidden;
+}
+
+.modeBar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-elevated);
+}
+
+.editorTitle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.modeSwitch {
+  display: inline-flex;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-sunken);
+  padding: 2px;
+  gap: 1px;
+}
+
+.modeSwitch button {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--dsw-alias-label-caption);
+  cursor: pointer;
+}
+
+.modeSwitch button:hover {
+  color: var(--dsw-alias-label-secondary);
+}
+
+.modeSwitch button.modeActive {
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+  box-shadow: var(--dsw-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  font-weight: 500;
+}
+
+.runError {
+  flex: none;
+  margin: 0;
+  padding: 6px 16px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-state-error-primary);
+  background: var(--dsw-alias-state-error-bg, rgba(239, 68, 68, 0.1));
+  overflow-wrap: anywhere;
+}
+
+.editorBody {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.editorPlaceholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  font-size: 13px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-caption);
+  text-align: center;
+}
+
+/* 内联错误提示（编辑器加载/保存失败等）。 */
+.error {
+  flex: none;
+  margin: 0;
+  padding: 6px 16px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-state-error-primary);
+  background: var(--dsw-alias-state-error-bg, rgba(239, 68, 68, 0.1));
+  overflow-wrap: anywhere;
+}
+
+

package/packages/client/WorkflowOverlay.tsx

@@ -0,0 +1,136 @@
+/**
+ * WorkflowOverlay：shell.overlay 全局工作流 UI（root scope，不挂会话）。
+ *
+ * 覆盖 conversation/details 列（sidebar 保持可见可点）：双栏工作台
+ * （左 WorkflowList + 分隔条 + 右 EditorPane）。无顶部栏——关闭经侧边栏
+ * 入口按钮再次点击（toggle）完成。sidebar 实测宽经 ResizeObserver 同步到
+ * `--wf-left`，overlay 内容永远从 sidebar 右缘开始。
+ * 打开/关闭/选中态全部在 `workflow-store`。
+ * @module @deepseek-ai/dsh-client-ui-sandore/src/client/WorkflowOverlay
+ */
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import type { GlobalStandardProps, InjectFace, PropsLocale, TranslateNS } from '@deepseek-ai/dsh-client-ui-slots'
+
+import { WorkflowList } from './WorkflowList.tsx'
+import { EditorPane } from './EditorPane.tsx'
+import { DragHandle } from './DragHandle.tsx'
+import type { WorkflowOverlayFace } from './workflow-face.ts'
+import {
+  getWorkflowState, newDefinition, resizeListWidth, subscribeWorkflowState, toggleListCollapse,
+} from './workflow-store.ts'
+import css from './WorkflowOverlay.module.css'
+
+/** WorkflowOverlay 的组件 props：注入 face + locale + 全局标准 prop（useWorkspaces）。 */
+export type WorkflowOverlayProps =
+  InjectFace<WorkflowOverlayFace> & PropsLocale<'sandore'> & GlobalStandardProps
+
+/** 渲染 shell.overlay 全局工作流 UI（关闭时渲染 null）。 */
+export function WorkflowOverlay({
+  useWorkspaces, listInstances, listDefinitions, startInstance, listModelDirectory, pickDirectory,
+  deleteDefinition, deleteInstance, getYaml, save, remote, openSession, modelDirectory, permissions, runCommand, queryPermission, t,
+}: WorkflowOverlayProps) {
+  const open = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().open)
+  const listWidth = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().listWidth)
+  const listCollapsed = useSyncExternalStore(subscribeWorkflowState, () => getWorkflowState().listCollapsed)
+  const workspaces = useWorkspaces(state => state.items)
+  const [refreshKey, setRefreshKey] = useState(0)
+  const layerRef = useRef<HTMLDivElement>(null)
+
+  // sidebar 实测宽 → --wf-left：覆盖 conversation/details 列，sidebar 保持可见。
+  // 注：`[data-slot="sidebar"]` 是 display:contents 的 0 宽 wrapper，需沿祖先链找
+  // 第一个有实际宽度的元素（`.sidebarCol` grid 列），并观察它保持同步（拖拽/折叠）。
+  useEffect(() => {
+    const layer = layerRef.current
+    if (layer === null) return
+    let observed: Element | null = null
+    const measure = (): void => {
+      let el: Element | null = document.querySelector('[data-slot="sidebar"]')
+      let width = 0
+      while (el !== null && width <= 0) {
+        width = el.getBoundingClientRect().width
+        if (width <= 0) el = el.parentElement
+      }
+      observed = el
+      layer.style.setProperty('--wf-left', `${width > 0 ? width : 248}px`)
+    }
+    measure()
+    if (observed !== null) {
+      const observer = new ResizeObserver(measure)
+      observer.observe(observed)
+      return () => { observer.disconnect() }
+    }
+    return undefined
+  }, [open])
+
+  if (!open) return null
+
+  const face: WorkflowOverlayFace = {
+    listInstances, listDefinitions, startInstance, listModelDirectory, pickDirectory,
+    deleteDefinition, deleteInstance, getYaml, save, remote, openSession, modelDirectory, permissions, runCommand, queryPermission,
+  }
+
+  return (
+    <div className={css.layer} ref={layerRef} data-sandore-overlay-layer>
+      <div className={css.overlay} data-sandore-overlay>
+        <div className={css.body}>
+          {listCollapsed ? (
+            // 收起态：窄条 rail（展开 + 新增）；右栏 EditorPane flex:1 自动占满。
+            <ListRail t={t} onExpand={toggleListCollapse} />
+          ) : (
+            <>
+              <WorkflowList t={t} workspaces={workspaces} face={face} refreshKey={refreshKey} width={listWidth} />
+              <DragHandle side="list" className={css.dragHandle} onDrag={resizeListWidth} />
+            </>
+          )}
+          <EditorPane
+            t={t}
+            face={face}
+            onSaved={() => { setRefreshKey(key => key + 1) }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** 收起态左栏窄条 rail：展开按钮 + 新增按钮。
+ *
+ * 新增按钮直接调 `workflow-store.newDefinition`（与展开态 WorkflowList「新增定义」
+ * 同一动作；face 无 newDefinition 字段），overlay 开合间能力保留。 */
+function ListRail({ t, onExpand }: {
+  t: TranslateNS<'sandore'>
+  /** 点击展开左栏（→ toggleListCollapse）。 */
+  onExpand(): void
+}) {
+  return (
+    <div className={css.listRail} data-sandore-wf-rail>
+      <button
+        type="button"
+        className={css.railBtn}
+        title={t('list.expand')}
+        aria-label={t('list.expand')}
+        onClick={onExpand}
+      >
+        {/* panel-left-open：展开左栏。 */}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <path d="M9 3v18" />
+          <path d="m14 9 3 3-3 3" />
+        </svg>
+      </button>
+      <button
+        type="button"
+        className={css.railBtn}
+        title={t('panel.add.definition')}
+        aria-label={t('panel.add.definition')}
+        onClick={() => { newDefinition() }}
+      >
+        {/* plus：新增定义（切编排态 + 空白 DagEditor）。 */}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M5 12h14" />
+          <path d="M12 5v14" />
+        </svg>
+      </button>
+    </div>
+  )
+}