dsh-lh-data 0.1.0

package/src/client/settings/RowsPanel.tsx

@@ -0,0 +1,196 @@
+/**
+ * 数据集的「表数据」分区：分页查看该数据集物理表里的数据行。
+ *
+ * 只读组件，不发任何写请求。取数走 `api.ts` 的 `listDatasetRows`，物理表与
+ * SQL 都不出现在前端：只带 datasetId / scope 与分页参数。列顺序与列集合由
+ * 服务端从元数据登记的业务列给出，`_row_id` 只当行键与行号展示。
+ *
+ * 翻页是「整页重取」而非增量累加：每页 20–100 行，页码由服务端按
+ * `COUNT(*)` 夹紧，删除尾部行后停留在越界页码会自动落到末页。
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  ADMIN_ROW_ID_COLUMN,
+  ADMIN_ROW_MAX_PAGE_SIZE,
+  ADMIN_ROW_PAGE_SIZE,
+  type DatasetRowsResult,
+} from '../../admin-contract'
+import { listDatasetRows } from './api'
+import { c, s } from './styles'
+
+/** 每页条数可选项：默认 20，最大取契约上限。 */
+const PAGE_SIZE_OPTIONS = [...new Set([ADMIN_ROW_PAGE_SIZE, 50, ADMIN_ROW_MAX_PAGE_SIZE])].sort((a, b) => a - b)
+
+/** 单个单元格的展示字符上限（超长省略，完整值放 title）。 */
+const CELL_MAX_LENGTH = 80
+
+function cellText(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (typeof value === 'object' && value !== null) {
+    try {
+      return JSON.stringify(value)
+    } catch {
+      return '[object]'
+    }
+  }
+  return String(value)
+}
+
+function Cell(props: { value: unknown }): ReactElement {
+  const { value } = props
+  if (value === null || value === undefined) {
+    return <span style={{ color: c.fg2 }}>—</span>
+  }
+  const text = cellText(value)
+  return <span title={text}>{text.length > CELL_MAX_LENGTH ? `${text.slice(0, CELL_MAX_LENGTH)}…` : text}</span>
+}
+
+export interface RowsPanelProps {
+  datasetId: string
+  scopeKey: string
+  /** 元数据登记的行数，只用于与真实行数比对后给出提示。 */
+  recordedRows: number
+  /** 数据集状态：非就绪时给出提示，但不阻断查看。 */
+  status: string
+}
+
+export function RowsPanel(props: RowsPanelProps): ReactElement {
+  const { datasetId, scopeKey, recordedRows, status } = props
+  const [data, setData] = useState<DatasetRowsResult | null>(null)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(ADMIN_ROW_PAGE_SIZE)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const requestId = useRef(0)
+
+  const load = useCallback(async (target: number, size: number): Promise<void> => {
+    const id = requestId.current + 1
+    requestId.current = id
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await listDatasetRows(datasetId, scopeKey, target, size)
+      if (id !== requestId.current) return
+      setData(result)
+      // 服务端会把页码夹到分页边界内，以它返回的为准。
+      setPage(result.page)
+    } catch (failure) {
+      if (id !== requestId.current) return
+      setError(failure instanceof Error ? failure.message : '加载数据失败')
+    } finally {
+      if (id === requestId.current) setLoading(false)
+    }
+  }, [datasetId, scopeKey])
+
+  // 换数据集（外层用 key 重挂载）或改每页条数：回到第一页重取。
+  useEffect(() => {
+    setData(null)
+    void load(1, pageSize)
+  }, [load, pageSize])
+
+  const total = data?.total ?? 0
+  const totalPages = data?.totalPages ?? 1
+  const columns = data?.columns ?? []
+  const rows = data?.rows ?? []
+
+  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}>{loading ? '加载中…' : `共 ${total} 行`}</span>
+      </div>
+
+      {status !== 'ready' ? <div style={{ ...s.muted, marginBottom: 8 }}>数据集当前状态为 {status}，数据可能不完整。</div> : null}
+      {error !== null ? <div style={{ ...s.banner, marginTop: 0 }}><span>{error}</span></div> : null}
+      {recordedRows !== total && error === null && data !== null
+        ? <div style={{ ...s.muted, marginBottom: 8 }}>元数据登记 {recordedRows} 行，实际 {total} 行。</div>
+        : null}
+
+      {columns.length > 0
+        ? (
+          <div style={{ ...s.scroll, maxHeight: 320 }}>
+            <table style={s.table}>
+              <thead>
+                <tr>
+                  <th style={s.th}>#</th>
+                  {columns.map(column => <th key={column} style={s.th} title={column}>{column}</th>)}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map(row => (
+                  <tr key={String(row[ADMIN_ROW_ID_COLUMN] ?? '')}>
+                    <td style={{ ...s.td, color: c.fg2, maxWidth: 60 }}>{String(row[ADMIN_ROW_ID_COLUMN] ?? '')}</td>
+                    {columns.map(column => (
+                      <td key={column} style={s.td}><Cell value={row[column]} /></td>
+                    ))}
+                  </tr>
+                ))}
+                {rows.length === 0 && !loading
+                  ? (
+                    <tr>
+                      <td style={{ ...s.td, color: c.fg2, padding: '16px 8px', textAlign: 'center' }} colSpan={columns.length + 1}>
+                        {total === 0 ? '该数据集还没有数据行' : '这一页没有数据'}
+                      </td>
+                    </tr>
+                    )
+                  : null}
+              </tbody>
+            </table>
+          </div>
+          )
+        : loading
+          ? <div style={s.muted}>加载中…</div>
+          : error === null
+            ? <div style={s.muted}>该数据集没有已登记的列，无法展示数据。</div>
+            : null}
+
+      <div style={{ ...s.bar, display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page <= 1 || loading ? s.disabledButton : null) }}
+          disabled={page <= 1 || loading}
+          onClick={() => void load(1, pageSize)}
+        >« 首页</button>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page <= 1 || loading ? s.disabledButton : null) }}
+          disabled={page <= 1 || loading}
+          onClick={() => void load(page - 1, pageSize)}
+        >上一页</button>
+        <span>第 {page} / {totalPages} 页</span>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page >= totalPages || loading ? s.disabledButton : null) }}
+          disabled={page >= totalPages || loading}
+          onClick={() => void load(page + 1, pageSize)}
+        >下一页</button>
+        <button
+          type="button"
+          style={{ ...s.button, ...(page >= totalPages || loading ? s.disabledButton : null) }}
+          disabled={page >= totalPages || loading}
+          onClick={() => void load(totalPages, pageSize)}
+        >末页 »</button>
+        <label style={{ ...s.muted, display: 'flex', alignItems: 'center', gap: 4 }}>
+          每页
+          <select
+            style={s.select}
+            value={pageSize}
+            disabled={loading}
+            onChange={event => setPageSize(Number(event.target.value))}
+          >
+            {PAGE_SIZE_OPTIONS.map(size => <option key={size} value={size}>{size}</option>)}
+          </select>
+          行
+        </label>
+        <button
+          type="button"
+          style={{ ...s.button, ...(loading ? s.disabledButton : null) }}
+          disabled={loading}
+          onClick={() => void load(page, pageSize)}
+        >刷新</button>
+      </div>
+    </div>
+  )
+}

package/src/client/settings/Section.tsx

@@ -0,0 +1,41 @@
+/**
+ * 设置页「数据集」根组件：顶部页签条 + 两个同级面板。
+ *
+ * - 「数据集」：跨工作区聚合浏览 / 新建 / 编辑 / 查看表数据（既有能力，见 `DatasetsPanel`）；
+ * - 「数据源」：登记与管理远程数据库连接，浏览远端表并导入成数据集（见 `DataSourcesPanel`）。
+ *
+ * 两个面板各自持有状态（搜索、分页、选中项），切换页签不互相重置。
+ */
+
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+import { DatasetsPanel } from './DatasetsPanel'
+import { DataSourcesPanel } from './DataSourcesPanel'
+import { s } from './styles'
+
+type Tab = 'datasets' | 'sources'
+
+const TABS: { key: Tab; label: string }[] = [
+  { key: 'datasets', label: '数据集' },
+  { key: 'sources', label: '数据源' },
+]
+
+export function DatasetSettingsSection(): ReactElement {
+  const [tab, setTab] = useState<Tab>('datasets')
+
+  return (
+    <div style={s.page}>
+      <div style={s.tabs}>
+        {TABS.map(entry => (
+          <button
+            key={entry.key}
+            type="button"
+            style={{ ...s.tab, ...(tab === entry.key ? s.activeTab : null) }}
+            onClick={() => setTab(entry.key)}
+          >{entry.label}</button>
+        ))}
+      </div>
+      {tab === 'datasets' ? <DatasetsPanel /> : <DataSourcesPanel />}
+    </div>
+  )
+}

package/src/client/settings/SourceTablesPanel.tsx

@@ -0,0 +1,226 @@
+/**
+ * 远端表浏览与导入：选 schema（PostgreSQL）→ 过滤 / 点选一张表 → 选目标工作区并导入。
+ *
+ * 只读浏览（GET /sources/:id/tables），导入是写操作（POST /sources/:id/import）。
+ * 导入完成后产出的是普通数据集，之后一律回到「数据集」页签用既有能力操作。
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ReactElement } from 'react'
+import {
+  ADMIN_COLUMN_TYPE_LABELS,
+  type DataSourceView,
+  type ImportSourceTableResult,
+  type ScopeView,
+  type SourceTableView,
+} from '../../admin-contract'
+import { importSourceTable, listSourceTables } from './api'
+import { c, s } from './styles'
+
+export interface SourceTablesPanelProps {
+  source: DataSourceView
+  scopes: ScopeView[]
+  onError: (error: Error) => void
+}
+
+function formatRows(count: number): string {
+  if (count < 0) return '未知'
+  if (count >= 1_000_000) return `${(count / 1_000_000).toFixed(1)}M`
+  if (count >= 1_000) return `${(count / 1_000).toFixed(1)}k`
+  return String(count)
+}
+
+export function SourceTablesPanel(props: SourceTablesPanelProps): ReactElement {
+  const { source, scopes, onError } = props
+  const [schemas, setSchemas] = useState<string[]>([])
+  const [schema, setSchema] = useState('')
+  const [keyword, setKeyword] = useState('')
+  const [tables, setTables] = useState<SourceTableView[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selected, setSelected] = useState<string | null>(null)
+  const [scopeKey, setScopeKey] = useState('')
+  const [name, setName] = useState('')
+  const [importing, setImporting] = useState(false)
+  const [result, setResult] = useState<ImportSourceTableResult | null>(null)
+  const requestId = useRef(0)
+
+  const load = useCallback(async (schemaArg: string, q: string): Promise<void> => {
+    const id = requestId.current + 1
+    requestId.current = id
+    setLoading(true)
+    try {
+      const loaded = await listSourceTables(source.id, schemaArg, q)
+      if (id !== requestId.current) return
+      setSchemas(loaded.schemas)
+      setTables(loaded.tables)
+      setSelected(null)
+    } catch (failure) {
+      if (id !== requestId.current) return
+      onError(failure instanceof Error ? failure : new Error('加载远端表失败'))
+    } finally {
+      if (id === requestId.current) setLoading(false)
+    }
+  }, [source.id, onError])
+
+  // 切换数据源或 schema 立即重载；关键字走 300ms 防抖。
+  useEffect(() => {
+    const timer = setTimeout(() => void load(schema, keyword), keyword.trim().length > 0 ? 300 : 0)
+    return () => clearTimeout(timer)
+  }, [load, schema, keyword])
+
+  useEffect(() => {
+    if (scopeKey.length === 0 && scopes.length > 0) setScopeKey(scopes[0].scopeKey)
+  }, [scopes, scopeKey])
+
+  const current = tables.find(table => table.tableName === selected) ?? null
+
+  async function handleImport(): Promise<void> {
+    if (selected === null || scopeKey.length === 0 || importing) return
+    setImporting(true)
+    setResult(null)
+    try {
+      const imported = await importSourceTable(source.id, {
+        scopeKey,
+        tableName: selected,
+        schemaName: schema.trim().length > 0 ? schema.trim() : null,
+        name: name.trim().length > 0 ? name.trim() : null,
+      })
+      setResult(imported)
+    } catch (failure) {
+      onError(failure instanceof Error ? failure : new Error('导入失败'))
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div style={{ ...s.panel, background: 'transparent', borderTop: `1px solid ${c.border}`, borderRadius: 0 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+        <strong style={{ fontSize: 13 }}>远端表</strong>
+        <span style={s.muted}>{loading ? '加载中…' : `共 ${tables.length} 张`}</span>
+      </div>
+
+      <div style={{ display: 'flex', gap: 8, marginBottom: 10, flexWrap: 'wrap' }}>
+        <select
+          style={s.select}
+          value={schema}
+          disabled={loading || schemas.length <= 1}
+          onChange={e => setSchema(e.target.value)}
+        >
+          {schemas.length === 0
+            ? <option value="">（默认）</option>
+            : schemas.map(item => <option key={item} value={item}>{item}</option>)}
+        </select>
+        <input
+          style={{ ...s.search, flex: 1, minWidth: 140 }}
+          placeholder="按表名过滤…"
+          value={keyword}
+          onChange={e => setKeyword(e.target.value)}
+        />
+        <button type="button" style={s.button} disabled={loading} onClick={() => void load(schema, keyword)}>刷新</button>
+      </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>
+            </tr>
+          </thead>
+          <tbody>
+            {tables.length === 0 && !loading
+              ? (
+                <tr>
+                  <td style={{ ...s.td, color: c.fg2, textAlign: 'center', padding: '16px 8px' }} colSpan={4}>
+                    没有匹配的表
+                  </td>
+                </tr>
+                )
+              : tables.map(table => (
+                <tr
+                  key={table.tableName}
+                  style={{ ...s.row, ...(table.tableName === selected ? s.selectedRow : null) }}
+                  onClick={() => setSelected(table.tableName === selected ? null : table.tableName)}
+                >
+                  <td style={s.td} title={table.tableName}>{table.tableName}</td>
+                  <td style={s.td}>{formatRows(table.rowCount)}</td>
+                  <td style={s.td}>{table.columns.length}</td>
+                  <td style={s.td}>{table.primaryKey ?? '—'}</td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+
+      {current !== null
+        ? (
+          <div style={{ marginTop: 10 }}>
+            <div style={s.label}>{current.tableName} 的列结构（{current.columns.length}）</div>
+            <div style={{ ...s.scroll, maxHeight: 180 }}>
+              <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>
+                  </tr>
+                </thead>
+                <tbody>
+                  {current.columns.map(column => (
+                    <tr key={column.name}>
+                      <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, color: c.fg2 }} title={column.description ?? ''}>{column.description ?? '—'}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          )
+        : null}
+
+      <div style={{ ...s.bar, marginTop: 12 }}>
+        <select
+          style={s.select}
+          value={scopeKey}
+          disabled={importing || selected === null}
+          onChange={e => setScopeKey(e.target.value)}
+        >
+          {scopes.length === 0
+            ? <option value="">（暂无可用工作区）</option>
+            : scopes.map(scope => <option key={scope.scopeKey} value={scope.scopeKey}>{scope.scopeKey}</option>)}
+        </select>
+        <input
+          style={{ ...s.search, flex: 1, minWidth: 120 }}
+          placeholder="数据集名称（默认取表名）"
+          value={name}
+          disabled={importing}
+          onChange={e => setName(e.target.value)}
+        />
+        <button
+          type="button"
+          style={{ ...s.primaryButton, ...(selected === null || scopeKey.length === 0 || importing ? s.disabledButton : null) }}
+          disabled={selected === null || scopeKey.length === 0 || importing}
+          onClick={() => void handleImport()}
+        >{importing ? '导入中…' : '导入到工作区'}</button>
+      </div>
+
+      {result !== null
+        ? (
+          <div style={{ ...s.banner, marginTop: 8, marginBottom: 0, borderColor: c.ok, color: c.ok }}>
+            <span>
+              已导入 {result.name}（datasetId: {result.datasetId}）：{result.rowCount} 行 / {result.columnCount} 列
+              {result.status === 'running' ? '（后台导入中，完成后会通知）' : ''}
+            </span>
+          </div>
+          )
+        : null}
+    </div>
+  )
+}

package/src/client/settings/api.ts

@@ -0,0 +1,154 @@
+/**
+ * 设置页管理接口的浏览器侧取数封装。
+ *
+ * 全部走同源 `fetch`，前缀来自 `admin-contract` 的 `ADMIN_API_BASE`（与主机侧同一真源，
+ * 避免客户端硬编码漂移）。错误统一收口成 `AdminApiError`，携带服务端的中文 message，
+ * 由组件层直接展示。
+ */
+
+import {
+  ADMIN_API_BASE,
+  type ConnectionTestView,
+  type CreateDataSourceRequest,
+  type CreateDatasetRequest,
+  type DataSourceView,
+  type DatasetAdminView,
+  type DatasetDetailView,
+  type DatasetRowsResult,
+  type ImportSourceTableRequest,
+  type ImportSourceTableResult,
+  type ListDatasetsResult,
+  type ListSourceTablesResult,
+  type PatchDataSourceRequest,
+  type PatchDatasetRequest,
+  type ScopeView,
+  type TestDataSourceRequest,
+} from '../../admin-contract'
+
+/** 服务端脱敏后的错误（含中文 message 与机器码）。 */
+export class AdminApiError extends Error {
+  constructor(
+    public readonly status: number,
+    public readonly code: string,
+    message: string,
+  ) {
+    super(message)
+    this.name = 'AdminApiError'
+  }
+}
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(`${ADMIN_API_BASE}${path}`, {
+    ...init,
+    credentials: 'same-origin',
+    headers: { 'content-type': 'application/json', ...(init?.headers ?? {}) },
+  })
+  if (!response.ok) {
+    let code = 'UNKNOWN'
+    let message = `请求失败（HTTP ${response.status}）`
+    try {
+      const body = await response.json() as { error?: { code?: string; message?: string } }
+      if (body.error) {
+        code = body.error.code ?? code
+        message = body.error.message ?? message
+      }
+    } catch {
+      // 响应体非 JSON：保留默认文案。
+    }
+    throw new AdminApiError(response.status, code, message)
+  }
+  return (await response.json()) as T
+}
+
+export function listScopes(): Promise<{ scopes: ScopeView[] }> {
+  return request('/scopes')
+}
+
+export function listDatasets(query: string, page: number, pageSize: number): Promise<ListDatasetsResult> {
+  const params = new URLSearchParams()
+  if (query.trim().length > 0) params.set('q', query)
+  params.set('page', String(page))
+  params.set('pageSize', String(pageSize))
+  return request(`/datasets?${params.toString()}`)
+}
+
+export function getDataset(id: string, scope: string): Promise<DatasetDetailView> {
+  return request(`/datasets/${encodeURIComponent(id)}?scope=${encodeURIComponent(scope)}`)
+}
+
+/** 分页读取数据集的物理表数据（只读）。 */
+export function listDatasetRows(
+  id: string,
+  scope: string,
+  page: number,
+  pageSize: number,
+): Promise<DatasetRowsResult> {
+  const params = new URLSearchParams()
+  params.set('scope', scope)
+  params.set('page', String(page))
+  params.set('pageSize', String(pageSize))
+  return request(`/datasets/${encodeURIComponent(id)}/rows?${params.toString()}`)
+}
+
+export function createDataset(body: CreateDatasetRequest): Promise<DatasetDetailView> {
+  return request('/datasets', { method: 'POST', body: JSON.stringify(body) })
+}
+
+export function patchDataset(
+  id: string,
+  scope: string,
+  body: PatchDatasetRequest,
+): Promise<DatasetDetailView> {
+  return request(`/datasets/${encodeURIComponent(id)}?scope=${encodeURIComponent(scope)}`, {
+    method: 'PATCH',
+    body: JSON.stringify(body),
+  })
+}
+
+export function deleteDataset(
+  id: string,
+  scope: string,
+): Promise<{ id: string; name: string; dropped: boolean }> {
+  return request(`/datasets/${encodeURIComponent(id)}?scope=${encodeURIComponent(scope)}`, {
+    method: 'DELETE',
+  })
+}
+
+// ── 数据源 ───────────────────────────────────────────────────────────────
+
+export function listDataSources(): Promise<{ sources: DataSourceView[] }> {
+  return request('/sources')
+}
+
+export function getDataSource(id: string): Promise<DataSourceView> {
+  return request(`/sources/${encodeURIComponent(id)}`)
+}
+
+export function createDataSource(body: CreateDataSourceRequest): Promise<DataSourceView> {
+  return request('/sources', { method: 'POST', body: JSON.stringify(body) })
+}
+
+export function patchDataSource(id: string, body: PatchDataSourceRequest): Promise<DataSourceView> {
+  return request(`/sources/${encodeURIComponent(id)}`, { method: 'PATCH', body: JSON.stringify(body) })
+}
+
+export function deleteDataSource(id: string): Promise<{ deleted: boolean }> {
+  return request(`/sources/${encodeURIComponent(id)}`, { method: 'DELETE' })
+}
+
+/** 测已登记的数据源（给 source）或未保存的草稿（给完整参数）。 */
+export function testDataSource(body: TestDataSourceRequest): Promise<ConnectionTestView> {
+  return request('/sources/test', { method: 'POST', body: JSON.stringify(body) })
+}
+
+export function listSourceTables(id: string, schema?: string, query?: string): Promise<ListSourceTablesResult> {
+  const params = new URLSearchParams()
+  if (schema !== undefined && schema.trim().length > 0) params.set('schema', schema)
+  if (query !== undefined && query.trim().length > 0) params.set('q', query)
+  const suffix = params.toString().length > 0 ? `?${params.toString()}` : ''
+  return request(`/sources/${encodeURIComponent(id)}/tables${suffix}`)
+}
+
+export function importSourceTable(id: string, body: ImportSourceTableRequest): Promise<ImportSourceTableResult> {
+  return request(`/sources/${encodeURIComponent(id)}/import`, { method: 'POST', body: JSON.stringify(body) })
+}