dsh-config-manager 0.1.0

package/src/client/common/ReportView.tsx

@@ -0,0 +1,117 @@
+/**
+ * 结果报告（规范 §21 导出 / §22 导入 / §17 回滚，绑 src/ui/report.ts）。
+ *
+ * 直接调用 report.ts 的纯文本渲染器（renderExportReport / renderImportReport /
+ * renderRollbackReport / suggestedActions / importSectionStats），React 只做外壳：
+ * 标题 + 结构化统计徽章 + 文本详情 + 建议动作按钮。
+ *
+ * 安全约束：所有渲染文本展示前再过 `redact()` 兜底，Secret 不进入 UI。
+ */
+import type { ExportReport, ImportResult, RollbackReport } from '../../core/types.ts'
+import {
+  importSectionStats,
+  renderExportReport,
+  renderImportReport,
+  renderRollbackReport,
+  suggestedActions,
+} from '../../ui/report.ts'
+import type { ImportResultAction } from '../../ui/types.ts'
+import { redact } from '../../security/redaction.ts'
+import { Badge, Button, type BadgeKind } from './ui.tsx'
+import css from '../config-manager.module.css'
+
+export type ReportViewKind = 'export' | 'import'
+
+export interface ReportViewProps {
+  kind: ReportViewKind
+  exportReport?: ExportReport
+  importResult?: ImportResult
+  /** 结果页动作回调（Fix Issues / View Details / Done） */
+  onAction?: (action: ImportResultAction) => void
+  /** 下载导出文件的回调（导出报告场景） */
+  onDownload?: () => void
+}
+
+/** 导入分区的统计徽章（由 report.importSectionStats 计算） */
+function SectionStatBadges({ result }: { result: ImportResult }) {
+  const stats = importSectionStats(result.executed)
+  return (
+    <div className={css.statRow}>
+      {stats.map((s) => {
+        let kind: BadgeKind = 'ok'
+        if (s.failed > 0) kind = 'error'
+        else if (s.skipped > 0) kind = 'warn'
+        return (
+          <Badge key={s.section} kind={kind}>
+            {s.section}: {s.ok}✓{s.skipped > 0 ? ` ${s.skipped}≈` : ''}{s.failed > 0 ? ` ${s.failed}✗` : ''}
+          </Badge>
+        )
+      })}
+    </div>
+  )
+}
+
+/** 导出报告的安全摘要（Included / Excluded / Security 徽章） */
+function ExportSummary({ report }: { report: ExportReport }) {
+  const included = report.included.length
+  const excluded = report.excluded.length
+  return (
+    <div className={css.statRow}>
+      <Badge kind="ok">{included} included</Badge>
+      {excluded > 0 && <Badge kind="warn">{excluded} excluded</Badge>}
+      {report.security.containsSecrets && <Badge kind="warn">encrypted</Badge>}
+      {!report.security.containsSecrets && <Badge kind="ok">no secrets</Badge>}
+      {report.security.redactedHits > 0 && (
+        <Badge kind="error">{report.security.redactedHits} redacted</Badge>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 结果报告视图。
+ * 文本详情 = report.ts 渲染器的输出（已脱敏），展示前再过 redact() 双保险；
+ * 以 <pre> 等宽块呈现保持对齐。
+ */
+export function ReportView({ kind, exportReport, importResult, onAction, onDownload }: ReportViewProps) {
+  const actions = kind === 'import' && importResult !== undefined
+    ? suggestedActions(importResult)
+    : []
+
+  return (
+    <div className={css.reportView}>
+      {kind === 'export' && exportReport !== undefined && (
+        <>
+          <ExportSummary report={exportReport} />
+          <pre className={css.reportText}>{redact(renderExportReport(exportReport))}</pre>
+          {onDownload !== undefined && (
+            <div className={css.reportFooter}>
+              <Button variant="primary" onClick={onDownload}>Download</Button>
+            </div>
+          )}
+        </>
+      )}
+      {kind === 'import' && importResult !== undefined && (
+        <>
+          <SectionStatBadges result={importResult} />
+          <pre className={css.reportText}>{redact(renderImportReport(importResult))}</pre>
+          {importResult.rollback !== null && (
+            <div className={css.rollbackBox}>
+              <strong>Rollback</strong>
+              <pre className={css.reportText}>{redact(renderRollbackReport(importResult.rollback as RollbackReport))}</pre>
+            </div>
+          )}
+          {actions.length > 0 && (
+            <div className={css.reportFooter}>
+              {actions.map((a) => (
+                <Button key={a} variant={a === 'done' ? 'primary' : 'ghost'} onClick={() => onAction?.(a)}>
+                  {a}
+                </Button>
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/client/common/ui.tsx

@@ -0,0 +1,165 @@
+/**
+ * Config Manager 基础 UI 原语（dsh-ssh 风格，全部走 DSH Design System 的 --dsw-* token，
+ * 不另造视觉体系）。仅作薄封装：类名来自 config-manager.module.css，无业务逻辑。
+ */
+import type { ChangeEvent, ReactNode } from 'react'
+import css from '../config-manager.module.css'
+
+/* ---------------- Button ---------------- */
+
+export type ButtonVariant = 'primary' | 'ghost' | 'danger'
+
+export interface ButtonProps {
+  variant?: ButtonVariant
+  disabled?: boolean
+  onClick?: () => void
+  children: ReactNode
+  title?: string
+  className?: string
+}
+
+/** 统一按钮（primary=主操作 / ghost=次操作 / danger=危险操作） */
+export function Button({ variant = 'ghost', disabled, onClick, children, title, className }: ButtonProps) {
+  const cls =
+    variant === 'primary' ? css.primaryButton
+      : variant === 'danger' ? css.dangerButton
+        : css.ghostButton
+  return (
+    <button
+      type="button"
+      className={className !== undefined ? `${cls} ${className}` : cls}
+      disabled={disabled}
+      title={title}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}
+
+/* ---------------- Badge ---------------- */
+
+export type BadgeKind = 'info' | 'ok' | 'warn' | 'error'
+
+export interface BadgeProps {
+  kind?: BadgeKind
+  children: ReactNode
+}
+
+/** 状态徽章（info=业务色 / ok=成功 / warn=警告 / error=错误） */
+export function Badge({ kind = 'info', children }: BadgeProps) {
+  return <span className={`${css.badge} ${css[`badge${kind[0]!.toUpperCase()}${kind.slice(1)}`] ?? ''}`}>{children}</span>
+}
+
+/* ---------------- Banner ---------------- */
+
+export type BannerKind = 'ok' | 'error' | 'info' | 'warn'
+
+export interface BannerProps {
+  kind?: BannerKind
+  children: ReactNode
+}
+
+/** 说明横幅（ok/error/info/warn 四态） */
+export function Banner({ kind = 'info', children }: BannerProps) {
+  return <div className={css.banner} data-kind={kind}>{children}</div>
+}
+
+/* ---------------- Card ---------------- */
+
+export interface CardProps {
+  children: ReactNode
+  className?: string
+}
+
+/** 卡片容器（bg-layer-2 + 圆角 + 细边框） */
+export function Card({ children, className }: CardProps) {
+  return <div className={className !== undefined ? `${css.card} ${className}` : css.card}>{children}</div>
+}
+
+/* ---------------- Spinner ---------------- */
+
+export interface SpinnerProps {
+  label?: string
+}
+
+/** 加载指示（旋转环 + 可选文案） */
+export function Spinner({ label }: SpinnerProps) {
+  return (
+    <span className={css.spinnerWrap}>
+      <span className={css.spinner} aria-hidden="true" />
+      {label !== undefined && <span className={css.spinnerLabel}>{label}</span>}
+    </span>
+  )
+}
+
+/* ---------------- Field ---------------- */
+
+export interface FieldProps {
+  label: string
+  hint?: string
+  children: ReactNode
+}
+
+/** 表单字段（标签 + 控件 + 说明） */
+export function Field({ label, hint, children }: FieldProps) {
+  return (
+    <label className={css.field}>
+      <span className={css.fieldLabel}>{label}</span>
+      {children}
+      {hint !== undefined && <span className={css.hint}>{hint}</span>}
+    </label>
+  )
+}
+
+/* ---------------- SectionTitle ---------------- */
+
+export interface SectionTitleProps {
+  title: string
+  subtitle?: string
+}
+
+/** 区块标题（页面内二级标题 + 可选副标题） */
+export function SectionTitle({ title, subtitle }: SectionTitleProps) {
+  return (
+    <div className={css.sectionTitleBlock}>
+      <h3 className={css.sectionTitle}>{title}</h3>
+      {subtitle !== undefined && <p className={css.sectionSubtitle}>{subtitle}</p>}
+    </div>
+  )
+}
+
+/* ---------------- Empty / Loading ---------------- */
+
+export interface EmptyProps {
+  children: ReactNode
+}
+
+/** 空状态占位 */
+export function Empty({ children }: EmptyProps) {
+  return <div className={css.empty}>{children}</div>
+}
+
+/* ---------------- Checkbox ---------------- */
+
+export interface CheckboxProps {
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: ReactNode
+  disabled?: boolean
+}
+
+/** 复选框行（勾选 + 标签） */
+export function Checkbox({ checked, onChange, label, disabled }: CheckboxProps) {
+  return (
+    <label className={css.checkboxRow}>
+      <input
+        type="checkbox"
+        checked={checked}
+        disabled={disabled}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => { onChange(event.target.checked) }}
+      />
+      <span>{label}</span>
+    </label>
+  )
+}