dsh-config-manager 0.1.82 → 0.1.83

package/src/client/library/LibraryActions.tsx

@@ -30,6 +30,7 @@ import { ConfirmDialog } from '../common/ConfirmDialog.tsx'
 import { Modal } from '../common/Modal.tsx'
 import { toast } from '../common/toast-store.ts'
 import { ConsultCard } from '../consult/ConsultCard.tsx'
+import type { ArtifactPendingAction } from './ArtifactRow.tsx'
 import { RestorePlanView } from './RestorePlanView.tsx'
 import { BackupInspectView } from './BackupInspectView.tsx'
 import { redact } from '../../security/redaction.ts'
@@ -76,6 +77,14 @@ export interface LibraryActionsProps {
    * 经壳层转成 Task 入参；其余入口不带（= 打开市场列表）。
    */
   onOpenTask: (kind: 'import' | 'market', marketId?: string) => void
+  /**
+   * 把「哪一行的哪个动作正在跑」上报给壳层（DESIGN §8.11「行内动作 pending」）。
+   *
+   * 为什么必须上报：本组件是产物库面板的**兄弟节点**（见文件头），行的读点在面板里。
+   * 此前这里是 `const [busy, setBusy] = useState(false)` + `void busy` —— 写了一个
+   * **读不到**的状态：行内按钮既不转圈也不禁用，同一个动作可以连点。
+   */
+  onPendingChange: (pending: ArtifactPendingAction | null) => void
 }
 
 /** 恢复计划弹窗的本地态（dry-run 结果 + 咨询报告） */
@@ -100,7 +109,7 @@ interface PullState {
   error: string | null
 }
 
-export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onOpenTask }: LibraryActionsProps) {
+export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onOpenTask, onPendingChange }: LibraryActionsProps) {
   const mounted = useRef(true)
   useEffect(() => () => { mounted.current = false }, [])
 
@@ -122,10 +131,14 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
   const [confirmRestore, setConfirmRestore] = useState(false)
   const [confirmDelete, setConfirmDelete] = useState<ArtifactRow | null>(null)
   const [inspect, setInspect] = useState<{ name: string; loading: boolean; error: string | null; result: BackupInspectResult | null } | null>(null)
-  // 忙态总开关：下载 / 置顶 / 咨询是**无弹窗**的即时动作，正在跑时不该再接受第二次点击。
-  // 它的读点在 LibraryPanel（行内按钮 disabled）——这里只负责写。
-  const [busy, setBusy] = useState(false)
-  void busy
+  /**
+   * 行内 pending 的统一出口：本组件不再自存忙态（自存就是上一个 bug 的成因），
+   * 一律写进壳层，由壳层传回面板（`ArtifactRowView.pending`）。
+   * 传 null = 这一行的动作收尾（成功或失败都要清，否则行会永远转圈）。
+   */
+  const reportPending = useCallback((key: string, capability: ArtifactCapability | null): void => {
+    onPendingChange(capability === null ? null : { key, capability })
+  }, [onPendingChange])
 
   /** 每次触发动作递增：快速连点时作废在途的 dry-run 响应（防晚到结果覆盖新选择）。 */
   const generation = useRef(0)
@@ -137,6 +150,8 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
     switch (capability) {
       case 'restore': {
         setPlan({ snapshotId: row.ref.snapshotId ?? '', loading: true, plan: null, changeSummary: undefined, planFingerprint: undefined, error: null })
+        // dry-run 是网络往返：弹窗里已有骨架，行上也标出来（两份反馈不冲突，各自回答一个问题）
+        reportPending(row.key, 'restore')
         // v3（用户要求）：恢复计划弹窗**不再内嵌「迁移前咨询」卡** —— 那个弹窗的职责是
         // 「这次恢复会改什么 + 确认执行」；咨询报告有自己的入口（产物库行 ⋯ 菜单 →「迁移前咨询」），
         // 想看报告的人可以单独打开。顺带省掉一次重量级请求（consult 要读快照内容做评分）。
@@ -144,10 +159,12 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
           (res) => {
             if (!mounted.current || gen !== generation.current) return
             setPlan({ snapshotId: row.ref.snapshotId ?? '', loading: false, plan: res.plan ?? null, changeSummary: res.changeSummary, planFingerprint: res.planFingerprint, error: null })
+            reportPending(row.key, null)
           },
           (err) => {
             if (!mounted.current || gen !== generation.current) return
             setPlan({ snapshotId: row.ref.snapshotId ?? '', loading: false, plan: null, changeSummary: undefined, planFingerprint: undefined, error: err instanceof Error ? err.message : String(err) })
+            reportPending(row.key, null)
           },
         )
         return
@@ -249,13 +266,15 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
           )
           return
         }
-        setBusy(true)
+        // 本机备份的下载**没有弹窗**（Blob + <a download>，立即），所以反馈只能落在行上：
+        // 点击那颗按钮立刻转圈，直到浏览器收下这份文件（此前这里 setBusy 后无人读 ⇒ 零反馈）。
+        reportPending(row.key, 'download')
         // 用户要求：直接走浏览器下载（落到「下载」目录），不弹系统保存对话框 ——
         // 备份文件是**可再生成的产物**，多一步选路径没有收益。
         // api.download 缺省即此语义（Blob + <a download>）；不要传 saveDialog: true。
         void api.download(row.ref.path ?? '')
           .catch((err) => { toast.error(redactErrorText(err)) })
-          .finally(() => { if (mounted.current) { setBusy(false); onDone() } })
+          .finally(() => { if (mounted.current) { reportPending(row.key, null); onDone() } })
         return
       }
       case 'delete': {
@@ -263,29 +282,35 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
         return
       }
       case 'consult': {
-        setBusy(true)
-        // 四种可迁移源共用一个入口（§6.8 ②）：咨询永远进 ⋯，不按来源造分叉
-        // 远端快照的咨询要带通道地址（宿主 consult 的远端分支需要 repoUrl/url，只给 id 会 400）
-        const input = await consultInput(row, syncApi)
-        if (!mounted.current) return
-        // 报告要**有自己的弹窗**：此前只 setConsult 而不开弹窗，而 ConsultCard 挂在
-        // 「恢复计划预览」弹窗内部（由 plan !== null 控制）⇒ 点 ⋯ 完全没反应。
+        // 四种可迁移源共用一个入口（§6.8 ②）：咨询永远进 ⋯，不按来源造分叉。
+        //
+        // **先开弹窗、再去取参数**（顺序不能反）：consultInput 对远端快照要走 /sync/status
+        // 拿通道地址（网络），旧顺序是「先 await 再开弹窗」⇒ 那一段页面完全没反应；
+        // 而且它会**抛错**（无通道地址时 'sync channel address is unavailable'），
+        // 先 await 的写法会让异常直接逃出 dispatch，弹窗永远不出现。
         setConsult({ row, loading: true, error: null, report: null })
-        api.consult(input).then(
-          (rep) => { if (mounted.current) setConsult({ row, loading: false, error: null, report: rep }) },
-          (err) => {
+        reportPending(row.key, 'consult')
+        void (async () => {
+          try {
+            const input = await consultInput(row, syncApi)
+            if (!mounted.current) return
+            const rep = await api.consult(input)
+            if (mounted.current) setConsult({ row, loading: false, error: null, report: rep })
+          } catch (err) {
             const message = redactErrorText(err)
             if (mounted.current) setConsult({ row, loading: false, error: message, report: null })
             // Toast 与弹窗内错误都给：弹窗可能被立刻关掉，Toast 保证反馈不丢
             toast.error(message)
-          },
-        ).finally(() => { if (mounted.current) { setBusy(false); onDone() } })
+          } finally {
+            if (mounted.current) { reportPending(row.key, null); onDone() }
+          }
+        })()
         return
       }
       default:
         onDone()
     }
-  }, [api, t, onDone, onChanged, onOpenTask])
+  }, [api, t, onDone, onChanged, onOpenTask, reportPending])
 
   /**
    * 供 LibraryPanel 调用：把点击转进来。用 ref 暴露，避免面板每次渲染重建回调。
@@ -325,38 +350,42 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
     ).finally(() => { runStoreStopWatch() })
   }
 
-  const doDelete = (): void => {
+  /**
+   * 执行删除。**返回 Promise 是有意的**（DESIGN UI-25 ①档）：ConfirmDialog 只在 onConfirm
+   * 返回 Promise 时自管 busy —— 这样弹窗在删除期间转圈、确认键与取消/遮罩/Esc 全禁用，
+   * 用户不会在还在删的时候点第二下（此前的 void 版本：弹窗一动不动，可重复提交）。
+   * 远端行还多一步 remotePayload（要通道地址），更要挡住重复点击。
+   * 失败时**关窗 + toast**：错误文案在弹窗里既没人读，也会被下一次打开冲掉。
+   */
+  const doDelete = async (): Promise<void> => {
     const row = confirmDelete
     if (row === null) return
     const done = (): void => { if (mounted.current) { setConfirmDelete(null); onChanged(); onDone() } }
-    if (row.kind === 'snapshot') {
-      api.deleteSnapshot(row.ref.snapshotId ?? '').then(
-        () => { toast.ok(t('snapshots.deleted')); done() },
-        (err) => { if (mounted.current) setConfirmDelete(null); toast.error(snapshotDeleteErrorText(err, t)) },
-      )
-      return
-    }
-    if (row.kind === 'backup-file') {
-      api.deleteBackupFile(fileNameOf(row)).then(
-        () => { toast.ok(t('backupFiles.deleted', { name: fileNameOf(row) })); done() },
-        (err) => { if (mounted.current) setConfirmDelete(null); toast.error(redactErrorText(err)) },
-      )
-      return
-    }
-    if (row.kind === 'remote-snapshot') {
-      // 删的是**远端那一份**（只动远端，见宿主 SyncEngine.deleteSnapshot）：需要通道 + 地址，
-      // 与拉取/咨询同源取（prepareSync 只认 repoUrl/url）。
-      void (async () => {
-        try {
-          const payload = await remotePayload(syncApi)
-          await syncApi.deleteSnapshot({ ...payload, snapshotId: row.ref.remoteId ?? '' })
-          toast.ok(t('library.remoteDeleted'))
-          done()
-        } catch (err) {
-          if (mounted.current) setConfirmDelete(null)
-          toast.error(redactErrorText(err))
-        }
-      })()
+    try {
+      if (row.kind === 'snapshot') {
+        await api.deleteSnapshot(row.ref.snapshotId ?? '')
+        toast.ok(t('snapshots.deleted'))
+        done()
+        return
+      }
+      if (row.kind === 'backup-file') {
+        await api.deleteBackupFile(fileNameOf(row))
+        toast.ok(t('backupFiles.deleted', { name: fileNameOf(row) }))
+        done()
+        return
+      }
+      if (row.kind === 'remote-snapshot') {
+        // 删的是**远端那一份**（只动远端，见宿主 SyncEngine.deleteSnapshot）：需要通道 + 地址，
+        // 与拉取/咨询同源取（prepareSync 只认 repoUrl/url）。
+        const payload = await remotePayload(syncApi)
+        await syncApi.deleteSnapshot({ ...payload, snapshotId: row.ref.remoteId ?? '' })
+        toast.ok(t('library.remoteDeleted'))
+        done()
+      }
+    } catch (err) {
+      if (mounted.current) setConfirmDelete(null)
+      // 快照删除有两条可映射的宿主码（被事故恢复引用 / 清单读不出），其余走脱敏原文
+      toast.error(row.kind === 'snapshot' ? snapshotDeleteErrorText(err, t) : redactErrorText(err))
     }
   }
 

package/src/client/library/LibraryPanel.tsx

@@ -27,7 +27,7 @@ import { Badge, Button, Card, Empty } from '../common/ui.tsx'
 import { SkeletonRows } from '../common/Skeleton.tsx'
 import { redact } from '../../security/redaction.ts'
 import { InfoHint } from '../common/InfoHint.tsx'
-import { ArtifactRowView } from './ArtifactRow.tsx'
+import { ArtifactRowView, type ArtifactPendingAction } from './ArtifactRow.tsx'
 import css from '../config-manager.module.css'
 
 export interface LibraryPanelProps {
@@ -51,6 +51,13 @@ export interface LibraryPanelProps {
   onOpenPublish: () => void
   /** 外部刷新信号（动作完成 / 恢复 / 删除后递增）→ 重拉四份清单 */
   refreshTick: number
+  /**
+   * 行内动作的进行中态（DESIGN §8.11「行内动作 pending」）。
+   * 由壳层持有：动作实现在 **LibraryActions**（本面板的兄弟节点，见其文件头），
+   * 它跑起来时把「哪一行的哪个动作」上报给壳层，壳层再以本 prop 传回 →
+   * 行内按钮就地转圈/禁用。放壳层还顺带解决了「切页把面板重挂后忙态蒸发」的问题。
+   */
+  pending: ArtifactPendingAction | null
 }
 
 type SourceStatus = 'loading' | 'ready' | 'error'
@@ -63,7 +70,7 @@ interface SourceState<T> {
 
 function initialSource<T>(): SourceState<T> { return { status: 'loading', items: [], error: null } }
 
-export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpenTask, onOpenExport, onOpenPublish, refreshTick }: LibraryPanelProps) {
+export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpenTask, onOpenExport, onOpenPublish, refreshTick, pending }: LibraryPanelProps) {
   const state = useSyncExternalStore(runStore.subscribe, runStore.getSnapshot)
   const lib = state.library
 
@@ -263,6 +270,8 @@ export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpen
                 runStore.patch({ library: { expandedKey: lib.expandedKey === row.key ? null : row.key } })
               }}
               onAction={onAction}
+              // 只把**本行**的进行中动作交给行组件：其余行保持可点（一次只挡同一行）
+              pending={pending !== null && pending.key === row.key ? pending.capability : null}
               deviceLabel={row.kind === 'remote-snapshot' ? deviceLabelOf.get(row.ref.remoteId ?? '') : undefined}
             />
           ))}

package/src/client/market/MarketImportReview.tsx

@@ -37,7 +37,7 @@ import {
   type MarketPickerFilter, type MarketReviewStep,
 } from '../../ui/market-import.ts'
 import { redact } from '../../security/redaction.ts'
-import { Badge, Banner, Button, Segmented, Spinner, Stepper } from '../common/ui.tsx'
+import { Badge, Banner, Button, Segmented, Stepper } from '../common/ui.tsx'
 import { ContentPicker } from '../common/ContentPicker.tsx'
 import { ConflictList } from '../import/ConflictList.tsx'
 import { ConfirmDialog } from '../common/ConfirmDialog.tsx'
@@ -337,10 +337,11 @@ export function MarketImportReview({
             <Button onClick={() => { go(prevMarketStep(active, hasConflicts)) }}>{t('review.back')}</Button>
             <Button
               variant="primary"
-              disabled={importing || !summary.canImport}
+              loading={importing}
+              disabled={!summary.canImport}
               onClick={() => { void runImport() }}
             >
-              {importing ? <Spinner label={t('common.loading')} /> : t('detail.import')}
+              {t('detail.import')}
             </Button>
           </div>
         </>

package/src/client/market/MarketPanel.tsx

@@ -25,7 +25,7 @@ import type { TranslateNS } from '../client-types.ts'
 import type { ConfigManagerApi } from '../api.ts'
 import type { ImportResult, ItemResolution } from '../../core/types.ts'
 import type { SectionId } from '../../schema/types.ts'
-import { Badge, Banner, Button, Card, Empty, SectionTitle, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button, Card, Empty, SectionTitle } from '../common/ui.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { Skeleton, SkeletonList } from '../common/Skeleton.tsx'
 import { Select } from '../common/Select.tsx'
@@ -477,11 +477,11 @@ export function MarketPanel({ api, myConfigsApi, importApi, syncApi, t, cmT, ope
       <Card>
         <span className={css.groupLabel}>{t('config.title')}</span>
         <div className={css.actionRow}>
-          <Button variant="primary" disabled={state.refreshing || state.importing || state.browsing} onClick={() => { void runRefresh() }}>
-            {state.refreshing ? <Spinner label={t('config.refreshing')} /> : t('config.refresh')}
+          <Button variant="primary" loading={state.refreshing} disabled={state.importing || state.browsing} onClick={() => { void runRefresh() }}>
+            {t('config.refresh')}
           </Button>
-          <Button disabled={state.browsing || state.refreshing || state.importing} onClick={() => { void runBrowse() }}>
-            {state.browsing ? <Spinner label={t('list.loading')} /> : t('list.browse')}
+          <Button loading={state.browsing} disabled={state.refreshing || state.importing} onClick={() => { void runBrowse() }}>
+            {t('list.browse')}
           </Button>
         </div>
       </Card>
@@ -712,8 +712,8 @@ export function MarketPanel({ api, myConfigsApi, importApi, syncApi, t, cmT, ope
                       </div>
                     </div>
                     {/* 下载按钮：任一下载进行中全部禁用（防止并发下载详情串扰 + 防重复点击） */}
-                    <Button disabled={state.downloadingId !== null} onClick={() => { openDownload(it) }}>
-                      {state.downloadingId === it.id ? <Spinner label={t('common.loading')} /> : t('list.download')}
+                    <Button loading={state.downloadingId === it.id} disabled={state.downloadingId !== null} onClick={() => { openDownload(it) }}>
+                      {t('list.download')}
                     </Button>
                   </div>
                 )

package/src/client/market/MyConfigsList.tsx

@@ -7,7 +7,7 @@ import type { TranslateNS } from '../client-types.ts'
 import type { MyItemEntry } from './my-configs-api.ts'
 import type { ItemStatusBadge, MyInstallState, MyItemView, MyItemsSummary } from './my-configs-view.ts'
 import { redact } from '../../security/redaction.ts'
-import { Badge, Banner, Button, Card, Empty, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button, Card, Empty } from '../common/ui.tsx'
 import { SkeletonList } from '../common/Skeleton.tsx'
 import css from '../config-manager.module.css'
 
@@ -65,8 +65,8 @@ export function MyConfigsList({
             })}
           </Badge>
         )}
-        <Button disabled={listLoading} onClick={() => { onRefresh() }}>
-          {listLoading ? <Spinner label={t('myconfigs.list.loading')} /> : t('myconfigs.list.refresh')}
+        <Button loading={listLoading} onClick={() => { onRefresh() }}>
+          {t('myconfigs.list.refresh')}
         </Button>
       </div>
       {myItemsError !== null && <Banner kind="error">{redact(myItemsError)}</Banner>}

package/src/client/market/MyConfigsView.tsx

@@ -697,7 +697,7 @@ export function MyConfigsView({
       onFormField={onFormField}
       onRunUpload={() => { void runUpload() }}
       onCancelUpdate={cancelUpdate}
-      onRelist={(itemId) => { void runRelist(itemId) }}
+      onRelist={runRelist}
       onReset={resetWizard}
     />
   )

package/src/client/market/MyConfigsWizard.tsx

@@ -4,12 +4,13 @@
  * 本文件只渲染 + 上抛回调：向导全量状态是受控 prop，所有状态迁移与请求（校验/上传/更新/重试收录）
  * 都在 MyConfigsView.tsx；PR 链接来源优先级复用 ../../ui/my-configs-view.ts 的 myPrLinkSource。
  */
+import { useState } from 'react'
 import type { ChangeEvent } from 'react'
 import type { TranslateNS } from '../client-types.ts'
 import type { ListingStatusResponse } from '../../market/my-repo.ts'
 import { redact } from '../../security/redaction.ts'
 import { myPrLinkSource } from '../../ui/my-configs-view.ts'
-import { Badge, Banner, Button, Field, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button, Field } from '../common/ui.tsx'
 import { Modal } from '../common/Modal.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { myConfigFormValid } from './my-configs-view.ts'
@@ -37,8 +38,12 @@ export interface MyConfigsWizardProps {
   onRunUpload: () => void
   /** 取消更新：向导回到「一键上传」初始态（弹窗保持打开） */
   onCancelUpdate: () => void
-  /** 结果卡「重新收录」 */
-  onRelist: (itemId: string) => void
+  /**
+   * 结果卡「重新收录」。**返回 Promise**：重试是一次网络往返 + 重新轮询，
+   * 本组件要等它结束才放开按钮（此前返回 void，调用方只能 `void onRelist(...)`，
+   * 点击后按钮毫无变化，用户会以为没点上而连点）。
+   */
+  onRelist: (itemId: string) => Promise<void>
   /** 重选 zip：update 轻量重置（保留预填表单）/ upload 完全重置 */
   onReset: () => void
 }
@@ -47,6 +52,18 @@ export function MyConfigsWizard({
   wizard, listingStatus, t, fileInput, autoBadges,
   onClose, onPickFile, onFormField, onRunUpload, onCancelUpdate, onRelist, onReset,
 }: MyConfigsWizardProps) {
+  /**
+   * 「重新收录」的在途态。是**一次点击的瞬时 UI 态**，不是向导的领域状态
+   * （向导状态仍全部归容器），所以留在本组件里；等 Promise 落定即放开。
+   */
+  const [relisting, setRelisting] = useState(false)
+  const runRelist = (itemId: string): void => {
+    if (relisting) return
+    setRelisting(true)
+    // 失败文案由容器统一走常驻 Toast（runRelist 内部已 catch），这里只管收尾
+    void onRelist(itemId).finally(() => { setRelisting(false) })
+  }
+
   /** PR 链接（优先实时任务状态；收录完成后由轮询补上，或直接取同步结果） */
   const prLink = ((): { url: string; label: string } | null => {
     // 来源优先级（实时任务状态 → 向导结果）在 src/ui/my-configs-view.ts 的 myPrLinkSource
@@ -109,10 +126,10 @@ export function MyConfigsWizard({
         <div className={css.actionRow}>
           <Button
             variant="primary"
-            disabled={wizard.validating}
+            loading={wizard.validating}
             onClick={onReset}
           >
-            {wizard.validating ? <Spinner label={t('myconfigs.upload.validating')} /> : t('myconfigs.upload.reselect')}
+            {t('myconfigs.upload.reselect')}
           </Button>
         </div>
         {wizard.validationError !== null && <Banner kind="error">{redact(wizard.validationError)}</Banner>}
@@ -197,15 +214,14 @@ export function MyConfigsWizard({
         <div className={css.actionRow}>
           <Button
             variant="primary"
+            loading={wizard.running}
             disabled={
-              wizard.validated !== true || wizard.running || wizard.zipPath === null
+              wizard.validated !== true || wizard.zipPath === null
               || !myConfigFormValid(wizard.formErrors)
             }
             onClick={() => { onRunUpload() }}
           >
-            {wizard.running
-              ? <Spinner label={wizard.mode === 'update' ? t('myconfigs.update.running') : t('myconfigs.upload.running')} />
-              : (wizard.mode === 'update' ? t('myconfigs.update.run') : t('myconfigs.upload.run'))}
+            {wizard.mode === 'update' ? t('myconfigs.update.run') : t('myconfigs.upload.run')}
           </Button>
           {wizard.mode === 'update' && (
             <Button disabled={wizard.running || wizard.validating} onClick={onCancelUpdate}>{t('common.cancel')}</Button>
@@ -233,7 +249,8 @@ export function MyConfigsWizard({
               {listingStatus !== null && listingStatus.listing === 'failed' ? (
                 <>
                   <Badge kind="error">{t('myconfigs.result.listingFailed')}</Badge>
-                  <Button variant="danger" onClick={() => { void onRelist(wizard.result!.itemId) }}>
+                  {/* 转圈图标由 Button 原语按 loading 自动渲染（DESIGN §14.11） */}
+                  <Button variant="danger" loading={relisting} onClick={() => { runRelist(wizard.result!.itemId) }}>
                     {t('myconfigs.result.relist')}
                   </Button>
                 </>

package/src/client/sync/ChannelConfigDialog.tsx

@@ -7,7 +7,7 @@
 import type { ChangeEvent } from 'react'
 import type { TranslateNS } from '../client-types.ts'
 import type { UiT } from '../../ui/i18n.ts'
-import { Badge, Banner, Button, Checkbox, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button, Checkbox } from '../common/ui.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { Modal } from '../common/Modal.tsx'
 import { Select } from '../common/Select.tsx'
@@ -444,10 +444,11 @@ export function ChannelConfigDialog({ open, onClose, api, t, uiT, form, cloudIss
       <div className={css.actionRow}>
         <Button
           variant="primary"
-          disabled={busy || savingConfig || !remoteReady}
+          loading={savingConfig}
+          disabled={busy || !remoteReady}
           onClick={() => { onSave() }}
         >
-          {savingConfig ? <Spinner label={t('config.saving')} /> : t('config.save')}
+          {t('config.save')}
         </Button>
         <InfoHint text={t('config.saveHint')} label={t('common.infoHint')} />
       </div>

package/src/client/sync/SyncConfirmView.tsx

@@ -13,7 +13,7 @@ import type { ReactNode } from 'react'
 import { useEffect } from 'react'
 
 import { redact } from '../../security/redaction.ts'
-import { Badge, Banner, Button, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button } from '../common/ui.tsx'
 import { Skeleton } from '../common/Skeleton.tsx'
 import { toast } from '../common/toast-store.ts'
 import { ConsultCard } from '../consult/ConsultCard.tsx'
@@ -494,10 +494,10 @@ function ApplyResultCard({ result, busy, t, onRollback }: ApplyResultCardProps):
       {result.restoreId !== '' && (
         <Button
           variant="danger"
-          disabled={busy}
+          loading={busy}
           onClick={() => { void onRollback(result.restoreId) }}
         >
-          {busy ? <Spinner label={t('syncflow.rollingBack')} /> : t('syncflow.rollback')}
+          {t('syncflow.rollback')}
         </Button>
       )}
     </>

package/src/client/sync/SyncPanel.tsx

@@ -44,7 +44,7 @@ import type { ReactNode } from 'react'
 import type { TranslateNS } from '../client-types.ts'
 import type { SyncPullReport, SyncPushPreview, SyncPushReport } from '../../sync/sync-engine.ts'
 import type { SectionId } from '../../schema/types.ts'
-import { Badge, Banner, Button, Card, SectionTitle, Spinner } from '../common/ui.tsx'
+import { Badge, Banner, Button, Card, SectionTitle } from '../common/ui.tsx'
 import { ErrorBanner } from '../common/ErrorBanner.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { Select } from '../common/Select.tsx'
@@ -1312,13 +1312,12 @@ export function SyncPanel({ api, t, cmT }: SyncPanelProps) {
               </label>
               <span className={css.pickerAction}>
                 <Button
-                  disabled={busy || cs.loadingSnapshots === true}
+                  loading={cs.loadingSnapshots === true}
+                  disabled={busy}
                   onClick={() => { void loadSnapshots(undefined, channel, true) }}
                   title={t('syncflow.refreshSnapshots')}
                 >
-                  {cs.loadingSnapshots === true
-                    ? <Spinner label={t('syncflow.refreshingSnapshots')} />
-                    : <><RefreshIcon size={14} /> {t('syncflow.refreshSnapshots')}</>}
+                  {cs.loadingSnapshots === true ? null : <RefreshIcon size={14} />} {t('syncflow.refreshSnapshots')}
                 </Button>
               </span>
             </div>
@@ -1489,10 +1488,10 @@ export function SyncPanel({ api, t, cmT }: SyncPanelProps) {
               </Button>
               <Button
                 variant="primary"
-                disabled={state.busy === 'push'}
+                loading={state.busy === 'push'}
                 onClick={() => { void runPush() }}
               >
-                {state.busy === 'push' ? <Spinner label={t('syncflow.pushing')} /> : t('syncflow.pushConfirm')}
+                {t('syncflow.pushConfirm')}
               </Button>
             </Modal.Footer>
           </Modal>

package/src/client/sync/SyncProbeRow.tsx

@@ -23,7 +23,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import type { TranslateNS } from '../client-types.ts'
 import type { SyncApi, SyncProbeResult, SyncPushPayload } from './sync-api.ts'
-import { Banner, Button, Spinner } from '../common/ui.tsx'
+import { Banner, Button } from '../common/ui.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { projectProbeResult } from './probe-view.ts'
 import { toast } from '../common/toast-store.ts'
@@ -104,8 +104,8 @@ export function SyncProbeRow({ api, t, body, remoteReady, busy, presentation = '
   const view = result === null ? null : projectProbeResult(result, t('probe.unsupported'))
 
   const button = (
-    <Button onClick={() => { void run() }} disabled={busy || loading || !remoteReady}>
-      {loading ? <Spinner label={t('probe.running')} /> : t('probe.run')}
+    <Button onClick={() => { void run() }} loading={loading} disabled={busy || !remoteReady}>
+      {t('probe.run')}
     </Button>
   )
   const hintNode = <InfoHint text={t('probe.hint')} label={t('common.infoHint')} />

package/src/client/sync/SyncRepositoryPicker.tsx

@@ -20,7 +20,7 @@ import type { ChangeEvent } from 'react'
 
 import type { TranslateNS } from '../client-types.ts'
 import { redact } from '../../security/redaction.ts'
-import { Button, Spinner } from '../common/ui.tsx'
+import { Button } from '../common/ui.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { Select } from '../common/Select.tsx'
 import { toast } from '../common/toast-store.ts'
@@ -159,8 +159,8 @@ export function SyncRepositoryPicker({ open, api, t, repoUrl, busy, onPick }: Sy
             onOpen={() => { if (!loaded && !loading) void load() }}
             onChange={pick}
           />
-          <Button size="sm" disabled={busy || loading} onClick={() => { void load() }}>
-            {loading ? <Spinner label={t('repoPicker.refreshing')} /> : t('repoPicker.refresh')}
+          <Button size="sm" loading={loading} disabled={busy} onClick={() => { void load() }}>
+            {t('repoPicker.refresh')}
           </Button>
         </div>
         {/* 空态 / 失败说明留在原地（不进 ⓘ）：用户正卡在这里，说明必须看得见 */}
@@ -200,8 +200,8 @@ export function SyncRepositoryPicker({ open, api, t, repoUrl, busy, onPick }: Sy
           {nameHint !== null && <span className={css.formError}>{nameHint}</span>}
           {createError !== null && <span className={css.formError}>{redact(createError)}</span>}
           <div className={css.actionRowTop}>
-            <Button variant="primary" size="sm" disabled={busy || creating} onClick={() => { void submitCreate() }}>
-              {creating ? <Spinner label={t('repoPicker.creating')} /> : t('repoPicker.createSubmit')}
+            <Button variant="primary" size="sm" loading={creating} disabled={busy} onClick={() => { void submitCreate() }}>
+              {t('repoPicker.createSubmit')}
             </Button>
             <Button size="sm" disabled={creating} onClick={() => { setCreateOpen(false) }}>
               {t('repoPicker.createCancel')}

package/src/index.ts

@@ -180,7 +180,7 @@ export const name = 'config-manager'
 export const inject = ['settings', 'credentials']
 
 /** Plugin version, kept in sync with package.json ("version"). */
-export const PLUGIN_VERSION = '0.1.82'
+export const PLUGIN_VERSION = '0.1.83'
 
 /** Plugin own package name — excluded from its own exported plugins list. */
 const PLUGIN_NAME = 'dsh-config-manager'