dsh-lh-data 0.1.0

package/src/client/settings/DatasetEditor.tsx

@@ -0,0 +1,245 @@
+/**
+ * 数据集详情与编辑面板。
+ *
+ * 可改：名称 / 描述 / 来源路径，以及列结构里的**说明与样例**（纯元数据）。
+ * 不可改：列名 / 类型 / 可空性——它们对应物理表 DDL，由导入时推断确定。
+ * 删除走二次确认。写操作受 `writable` 控制（只读模式或接口关闭时置灰）。
+ */
+
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  ADMIN_COLUMN_TYPE_LABELS,
+  ADMIN_MAX_SAMPLE_VALUES,
+  type DatasetColumnPatch,
+  type DatasetDetailView,
+  type PatchDatasetRequest,
+} from '../../admin-contract'
+import { patchDataset, deleteDataset } from './api'
+import { c, s } from './styles'
+
+/** 样例分隔符：展示用全角顿号，输入同时接受半角与全角逗号。 */
+const SAMPLE_SEPARATORS = /[、,，]/
+/** 空值的展示记号，与 `sampleToText` 互逆。 */
+const NULL_MARK = '∅'
+
+interface ColumnDraft {
+  description: string
+  sampleText: string
+}
+
+function sampleToText(sample: unknown[]): string {
+  if (!Array.isArray(sample)) return ''
+  return sample
+    .slice(0, ADMIN_MAX_SAMPLE_VALUES)
+    .map(value => (value === null ? NULL_MARK : String(value)))
+    .join('、')
+}
+
+function textToSample(text: string): (string | null)[] {
+  return text
+    .split(SAMPLE_SEPARATORS)
+    .map(value => value.trim())
+    .filter(value => value.length > 0)
+    .map(value => (value === NULL_MARK ? null : value))
+}
+
+function initialDrafts(columns: DatasetDetailView['columns']): Record<string, ColumnDraft> {
+  const drafts: Record<string, ColumnDraft> = {}
+  for (const column of columns) {
+    drafts[column.sanitizedName] = {
+      description: column.description ?? '',
+      sampleText: sampleToText(column.sample),
+    }
+  }
+  return drafts
+}
+
+export interface DatasetEditorProps {
+  detail: DatasetDetailView
+  writable: boolean
+  onChanged: (detail: DatasetDetailView) => void
+  onDeleted: (id: string) => void
+  onError: (error: Error) => void
+}
+
+export function DatasetEditor(props: DatasetEditorProps): ReactElement {
+  const { detail, writable, onChanged, onDeleted, onError } = props
+  const [name, setName] = useState(detail.name)
+  const [description, setDescription] = useState(detail.description ?? '')
+  const [sourcePath, setSourcePath] = useState(detail.sourcePath ?? '')
+  const [columnDrafts, setColumnDrafts] = useState<Record<string, ColumnDraft>>(() => initialDrafts(detail.columns))
+  const [saving, setSaving] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [confirming, setConfirming] = useState(false)
+
+  function updateColumnDraft(key: string, patch: Partial<ColumnDraft>): void {
+    setColumnDrafts(previous => ({ ...previous, [key]: { ...previous[key], ...patch } }))
+  }
+
+  const columnDirty = detail.columns.some(column => {
+    const draft = columnDrafts[column.sanitizedName]
+    if (draft === undefined) return false
+    return draft.description !== (column.description ?? '') || draft.sampleText !== sampleToText(column.sample)
+  })
+  const dirty =
+    name !== detail.name ||
+    description !== (detail.description ?? '') ||
+    sourcePath !== (detail.sourcePath ?? '') ||
+    columnDirty
+
+  /** 只提交改动的列；未改动的列连同样例一并原样保留，不参与往返。 */
+  function buildColumnPatches(): DatasetColumnPatch[] {
+    const patches: DatasetColumnPatch[] = []
+    for (const column of detail.columns) {
+      const draft = columnDrafts[column.sanitizedName]
+      if (draft === undefined) continue
+      const patch: DatasetColumnPatch = { sanitizedName: column.sanitizedName }
+      let changed = false
+      if (draft.description !== (column.description ?? '')) {
+        patch.description = draft.description
+        changed = true
+      }
+      if (draft.sampleText !== sampleToText(column.sample)) {
+        patch.sample = textToSample(draft.sampleText)
+        changed = true
+      }
+      if (changed) patches.push(patch)
+    }
+    return patches
+  }
+
+  async function handleSave(): Promise<void> {
+    if (!dirty || saving) return
+    const columnPatches = buildColumnPatches()
+    const body: PatchDatasetRequest = { name, description, sourcePath }
+    if (columnPatches.length > 0) body.columns = columnPatches
+    setSaving(true)
+    try {
+      const updated = await patchDataset(detail.id, detail.scopeKey, body)
+      onChanged(updated)
+    } catch (error) {
+      onError(error instanceof Error ? error : new Error('保存失败'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleDelete(): Promise<void> {
+    if (deleting) return
+    setDeleting(true)
+    try {
+      await deleteDataset(detail.id, detail.scopeKey)
+      onDeleted(detail.id)
+    } catch (error) {
+      onError(error instanceof Error ? error : new Error('删除失败'))
+      setConfirming(false)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const disabled = !writable || saving
+
+  return (
+    <div style={s.panel}>
+      <div style={{ ...s.head, display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+        <strong style={{ fontSize: 13 }}>数据集详情</strong>
+        <span style={s.muted}>工作区：{detail.scopeKey}</span>
+      </div>
+
+      <div style={s.grid2}>
+        <div style={s.field}>
+          <label style={s.label}>名称</label>
+          <input style={s.input} value={name} disabled={disabled} onChange={e => setName(e.target.value)} />
+        </div>
+        <div style={s.field}>
+          <label style={s.label}>来源路径</label>
+          <input style={s.input} value={sourcePath} disabled={disabled} onChange={e => setSourcePath(e.target.value)} />
+        </div>
+      </div>
+      <div style={s.field}>
+        <label style={s.label}>描述</label>
+        <textarea style={s.textarea} value={description} disabled={disabled} onChange={e => setDescription(e.target.value)} />
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <button
+          type="button"
+          style={{ ...s.primaryButton, ...(disabled || !dirty ? s.disabledButton : null) }}
+          disabled={disabled || !dirty}
+          onClick={() => void handleSave()}
+        >{saving ? '保存中…' : '保存修改'}</button>
+
+        {!confirming
+          ? (
+            <button
+              type="button"
+              style={{ ...s.dangerButton, ...(!writable ? s.disabledButton : null) }}
+              disabled={!writable}
+              onClick={() => setConfirming(true)}
+            >删除数据集</button>
+            )
+          : (
+            <>
+              <span style={{ color: c.danger }}>确认删除「{detail.name}」及其全部数据？</span>
+              <button
+                type="button"
+                style={{ ...s.dangerButton, ...(deleting ? s.disabledButton : null) }}
+                disabled={deleting}
+                onClick={() => void handleDelete()}
+              >{deleting ? '删除中…' : '确认删除'}</button>
+              <button type="button" style={s.button} disabled={deleting} onClick={() => setConfirming(false)}>取消</button>
+            </>
+            )}
+        {!writable ? <span style={s.muted}>（只读模式或接口已关闭，不可修改）</span> : null}
+      </div>
+
+      <div style={{ marginTop: 14 }}>
+        <div style={{ ...s.label, marginBottom: 6 }}>
+          列结构 · 共 {detail.columns.length} 列　（列名 / 类型 / 可空性由导入时推断，不可修改；说明与样例可编辑）
+        </div>
+        <div style={{ ...s.scroll, maxHeight: 240 }}>
+          <table style={s.table}>
+            <thead>
+              <tr>
+                <th style={s.th}>列名</th>
+                <th style={s.th}>类型</th>
+                <th style={s.th}>可空</th>
+                <th style={s.th}>说明</th>
+                <th style={s.th}>样例</th>
+              </tr>
+            </thead>
+            <tbody>
+              {detail.columns.map(column => (
+                <tr key={column.sanitizedName}>
+                  <td style={s.td} title={column.name}>{column.name}</td>
+                  <td style={s.td}>{ADMIN_COLUMN_TYPE_LABELS[column.type] ?? column.type}</td>
+                  <td style={s.td}>{column.nullable ? '是' : '否'}</td>
+                  <td style={{ ...s.td, overflow: 'visible' }}>
+                    <input
+                      style={s.input}
+                      value={columnDrafts[column.sanitizedName]?.description ?? ''}
+                      disabled={disabled}
+                      placeholder="补充说明，便于 agent 理解该列"
+                      onChange={event => updateColumnDraft(column.sanitizedName, { description: event.target.value })}
+                    />
+                  </td>
+                  <td style={{ ...s.td, overflow: 'visible' }}>
+                    <input
+                      style={s.input}
+                      value={columnDrafts[column.sanitizedName]?.sampleText ?? ''}
+                      disabled={disabled}
+                      placeholder="多个值用 、 分隔"
+                      onChange={event => updateColumnDraft(column.sanitizedName, { sampleText: event.target.value })}
+                    />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/client/settings/DatasetTable.tsx

@@ -0,0 +1,110 @@
+/**
+ * 跨工作区聚合的数据集列表表格。列：名称 / 工作区 / 行数 / 列数 / 状态 / 来源 / 更新时间。
+ * 列表与详情/编辑是上下分区的：本组件只负责表格与分页，选中回调上抛给 Section。
+ */
+
+import type { ReactElement } from 'react'
+import type { DatasetAdminView } from '../../admin-contract'
+import { c, s, STATUS_COLOR } from './styles'
+
+const STATUS_TEXT: Record<string, string> = { ready: '就绪', importing: '导入中', failed: '失败' }
+
+export function fmtAgo(ts: number): string {
+  if (!Number.isFinite(ts) || ts <= 0) return '—'
+  const diff = Date.now() - ts
+  if (diff < 60_000) return '刚刚'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)} 分钟前`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)} 小时前`
+  return `${Math.floor(diff / 86_400_000)} 天前`
+}
+
+function ellipsis(value: string | null, max = 32): string {
+  if (value === null) return '—'
+  return value.length > max ? `${value.slice(0, max)}…` : value
+}
+
+export interface DatasetTableProps {
+  items: DatasetAdminView[]
+  page: number
+  pageSize: number
+  total: number
+  selectedId: string | null
+  loading: boolean
+  onSelect: (item: DatasetAdminView) => void
+  onPageChange: (page: number) => void
+}
+
+export function DatasetTable(props: DatasetTableProps): ReactElement {
+  const { items, page, pageSize, total, selectedId, loading, onSelect, onPageChange } = props
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+
+  const rows = items.length === 0 && !loading
+    ? (
+      <tr>
+        <td style={{ ...s.td, color: c.fg2, padding: '18px 8px', textAlign: 'center' }} colSpan={7}>
+          还没有数据集，用 agent 的 dataset_import 导入，或直接点击「新建数据集」
+        </td>
+      </tr>
+      )
+    : items.map(item => (
+      <tr
+        key={`${item.scopeKey}:${item.id}`}
+        style={{ ...s.row, ...(item.id === selectedId ? s.selectedRow : null) }}
+        onClick={() => onSelect(item)}
+      >
+        <td style={s.td} title={item.name}>{ellipsis(item.name, 40)}</td>
+        <td style={s.td} title={item.scopeKey}>{ellipsis(item.scopeKey, 36)}</td>
+        <td style={s.td}>{item.rowCount}</td>
+        <td style={s.td}>{item.columnCount}</td>
+        <td style={s.td}>
+          <span style={{ ...s.dot, background: STATUS_COLOR[item.status] ?? c.fg2 }} />
+          {STATUS_TEXT[item.status] ?? item.status}
+        </td>
+        <td style={s.td} title={item.sourcePath ?? ''}>{ellipsis(item.sourcePath, 40)}</td>
+        <td style={{ ...s.td, color: c.fg2 }}>{fmtAgo(item.updatedAt)}</td>
+      </tr>
+    ))
+
+  return (
+    <div>
+      <div style={s.scroll}>
+        <table style={s.table}>
+          <thead>
+            <tr>
+              <th style={s.th}>名称</th>
+              <th style={s.th}>工作区</th>
+              <th style={s.th}>行数</th>
+              <th style={s.th}>列数</th>
+              <th style={s.th}>状态</th>
+              <th style={s.th}>来源</th>
+              <th style={s.th}>更新时间</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </table>
+      </div>
+      <div style={{ ...s.bar, display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page <= 1 ? s.disabledButton : null) }}
+          disabled={page <= 1}
+          onClick={() => onPageChange(1)}
+        >« 首页</button>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page <= 1 ? s.disabledButton : null) }}
+          disabled={page <= 1}
+          onClick={() => onPageChange(page - 1)}
+        >上一页</button>
+        <span>第 {Math.min(page, totalPages)} / {totalPages} 页 · 共 {total} 个</span>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page >= totalPages ? s.disabledButton : null) }}
+          disabled={page >= totalPages}
+          onClick={() => onPageChange(page + 1)}
+        >下一页</button>
+        {loading ? <span style={s.muted}>加载中…</span> : null}
+      </div>
+    </div>
+  )
+}

package/src/client/settings/DatasetsPanel.tsx

@@ -0,0 +1,207 @@
+/**
+ * 「数据集」页签：顶部工具条（搜索 / 新建 / 刷新）+ 聚合列表表格 + 详情/编辑或新建面板 +
+ * 表数据分页面板。所有数据来自 `api.ts`，跨工作区聚合与表数据读取由主机侧完成。
+ *
+ * 状态以「列表 / 详情 / 新建」分区呈现：表格常驻，选中行在下方展开详情与
+ * 只读的表数据分页，「新建」时详情区替换为新建表单（此时没有表数据可看）。
+ * 写操作的只读/关闭判定由错误码驱动。
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  ADMIN_PAGE_SIZE,
+  type DatasetAdminView,
+  type DatasetDetailView,
+  type ScopeView,
+} from '../../admin-contract'
+import { AdminApiError, getDataset, listDatasets, listScopes } from './api'
+import { DatasetTable } from './DatasetTable'
+import { DatasetEditor } from './DatasetEditor'
+import { RowsPanel } from './RowsPanel'
+import { CreateForm } from './CreateForm'
+import { s } from './styles'
+
+type Mode = 'browse' | 'create'
+
+export function DatasetsPanel(): ReactElement {
+  const [scopes, setScopes] = useState<ScopeView[]>([])
+  const [items, setItems] = useState<DatasetAdminView[]>([])
+  const [total, setTotal] = useState(0)
+  const [query, setQuery] = useState('')
+  const [page, setPage] = useState(1)
+  const [mode, setMode] = useState<Mode>('browse')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [detail, setDetail] = useState<DatasetDetailView | null>(null)
+  const [loadingList, setLoadingList] = useState(false)
+  const [loadingDetail, setLoadingDetail] = useState(false)
+  const [writable, setWritable] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const requestId = useRef(0)
+
+  const loadScopes = useCallback(async (): Promise<void> => {
+    try {
+      const result = await listScopes()
+      setScopes(result.scopes)
+    } catch (failure) {
+      // 路由未挂载等同无可用工作区；列表加载会给出更具体的错误。
+      if (failure instanceof AdminApiError && (failure.code === 'READ_ONLY' || failure.code === 'ADMIN_DISABLED')) {
+        setWritable(false)
+      }
+    }
+  }, [])
+
+  const loadList = useCallback(async (q: string, p: number): Promise<void> => {
+    const id = requestId.current + 1
+    requestId.current = id
+    setLoadingList(true)
+    try {
+      const result = await listDatasets(q, p, ADMIN_PAGE_SIZE)
+      if (id !== requestId.current) return
+      setItems(result.items)
+      setTotal(result.total)
+      const warning = result.warnings.map(w => `${w.scopeKey}: ${w.message}`).join('；')
+      setError(warning.length > 0 ? warning : null)
+    } catch (failure) {
+      if (id !== requestId.current) return
+      setError(failure instanceof Error ? failure.message : '加载失败')
+    } finally {
+      if (id === requestId.current) setLoadingList(false)
+    }
+  }, [])
+
+  // 初次挂载：工作区列表 + 首屏列表。
+  useEffect(() => {
+    void loadScopes()
+    void loadList('', 1)
+  }, [loadScopes, loadList])
+
+  // 关键字防抖：停止输入 300ms 后回到第一页重新拉取。
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setPage(1)
+      void loadList(query, 1)
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [query, loadList])
+
+  const openDetail = useCallback(async (item: DatasetAdminView): Promise<void> => {
+    setSelectedId(item.id)
+    setMode('browse')
+    setDetail(null)
+    setLoadingDetail(true)
+    try {
+      const fetched = await getDataset(item.id, item.scopeKey)
+      setDetail(fetched)
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : '加载详情失败')
+    } finally {
+      setLoadingDetail(false)
+    }
+  }, [])
+
+  const handleWriteError = useCallback((failure: Error): void => {
+    setError(failure.message)
+    if (failure instanceof AdminApiError && (failure.code === 'READ_ONLY' || failure.code === 'ADMIN_DISABLED')) {
+      setWritable(false)
+    }
+  }, [])
+
+  const handleChanged = useCallback((updated: DatasetDetailView): void => {
+    setDetail(updated)
+    void loadList(query, page)
+  }, [query, page, loadList])
+
+  const handleDeleted = useCallback(async (id: string): Promise<void> => {
+    setSelectedId(null)
+    setDetail(null)
+    await loadScopes()
+    await loadList(query, page)
+    void id
+  }, [query, page, loadList, loadScopes])
+
+  const handleCreated = useCallback(async (created: unknown): Promise<void> => {
+    setMode('browse')
+    await loadScopes()
+    await loadList(query, page)
+    const record = created as DatasetDetailView
+    setSelectedId(record.id)
+    setDetail(record)
+  }, [query, page, loadList, loadScopes])
+
+  return (
+    <div>
+      <div style={s.toolbar}>
+        <input
+          style={s.search}
+          placeholder="按名称 / 来源 / 工作区搜索…"
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+        />
+        <button
+          type="button"
+          style={{ ...s.primaryButton, ...(!writable ? s.disabledButton : null) }}
+          disabled={!writable}
+          onClick={() => setMode('create')}
+          title={writable ? '新建空数据集' : '只读模式或接口已关闭'}
+        >+ 新建数据集</button>
+        <button type="button" style={s.button} disabled={loadingList} onClick={() => void loadList(query, page)}>刷新</button>
+      </div>
+
+      {error !== null
+        ? (
+          <div style={s.banner}>
+            <span>{error}</span>
+            <span style={{ ...s.link, marginLeft: 'auto' }} onClick={() => setError(null)}>忽略</span>
+          </div>
+          )
+        : null}
+
+      <DatasetTable
+        items={items}
+        page={page}
+        pageSize={ADMIN_PAGE_SIZE}
+        total={total}
+        selectedId={selectedId}
+        loading={loadingList}
+        onSelect={item => void openDetail(item)}
+        onPageChange={p => { setPage(p); void loadList(query, p) }}
+      />
+
+      {mode === 'create'
+        ? (
+          <CreateForm
+            scopes={scopes}
+            onCreated={detail => void handleCreated(detail)}
+            onCancel={() => setMode('browse')}
+            onError={handleWriteError}
+          />
+          )
+        : detail !== null
+          ? (
+            <>
+              <DatasetEditor
+                detail={detail}
+                writable={writable}
+                onChanged={handleChanged}
+                onDeleted={id => void handleDeleted(id)}
+                onError={handleWriteError}
+              />
+              {/* key 让切换数据集时重置分页状态，避免残留上一张表的页码。 */}
+              <RowsPanel
+                key={`${detail.scopeKey}:${detail.id}`}
+                datasetId={detail.id}
+                scopeKey={detail.scopeKey}
+                recordedRows={detail.rowCount}
+                status={detail.status}
+              />
+            </>
+            )
+          : (
+            <div style={{ ...s.muted, marginTop: 12 }}>
+              {loadingDetail ? '加载详情中…' : '选择一个数据集查看详情，或点击「新建数据集」创建空表。'}
+            </div>
+            )}
+    </div>
+  )
+}