dsh-config-manager 0.1.78 → 0.1.79

package/src/client/common/Skeleton.tsx

@@ -126,3 +126,35 @@ export function SkeletonTable({ rows = 5, label }: SkeletonTableProps) {
     </SkeletonRoot>
   )
 }
+
+export interface SkeletonRowsProps {
+  /** 行数（默认 6） */
+  count?: number
+  /** 可见文案（已翻译） */
+  label?: string
+}
+
+/**
+ * 紧凑行骨架：行高与 `.artifactRowHead` 对齐（52px = 20px 图标位 + 标题/说明两行 + 8/10 内边距），
+ * 右侧留一个动作位 —— 用于「产物库」「最近活动」这类**一行一条、有分割线**的列表。
+ * 为什么单列一种形态：卡片骨架套在这种列表上会把行距撑大（每卡 12px 内边距），
+ * 数据到货时整块往下跳；行的形状只能靠行骨架给。
+ */
+export function SkeletonRows({ count = 6, label }: SkeletonRowsProps) {
+  return (
+    <SkeletonRoot label={label}>
+      <div className={css.skeletonRows} aria-hidden="true">
+        {indices(count).map((key) => (
+          <div key={key} className={css.skeletonRowItem}>
+            <span className={css.skeletonBar + ' ' + css.skeletonRowIcon} />
+            <span className={css.skeletonRowBody}>
+              <span className={css.skeletonBar + ' ' + css.skeletonRowTitle} />
+              <span className={css.skeletonBar + ' ' + css.skeletonRowMeta} />
+            </span>
+            <span className={css.skeletonBar + ' ' + css.skeletonRowAction} />
+          </div>
+        ))}
+      </div>
+    </SkeletonRoot>
+  )
+}

package/src/client/common/routes.ts

@@ -99,6 +99,15 @@ export const SYNC_API = {
   /** issue #79：工作副本显式重建（relink 非破坏 / reclone 需 confirm；写动作过 mutation gate） */
   workdirReset: `${API_BASE}/sync/workdir/reset`,
   rollback: `${API_BASE}/sync/rollback`,
+  /** T-ui-merge：远程合并**只读**预览（三方合并 + 冲突清单，零写入）。 */
+  mergePreview: `${API_BASE}/sync/merge-preview`,
+  /** T-ui-merge：按逐项裁决执行合并（写动作过 mutation gate）。 */
+  applyMerge: `${API_BASE}/sync/apply-merge`,
+  /**
+   * cloud-sync 借鉴项 ②：**只读**连通性自检（凭据 / 端点 / 目标容器 / 目录可达）。
+   * 失败回 200 + ok:false —— 「测试连接」是预期会失败的诊断动作（→ routes/sync.ts 的 sync/probe）。
+   */
+  probe: `${API_BASE}/sync/probe`,
 } as const;
 
 /** 配置市场路由族（内置单市场：浏览 / 下载 / 发布向导；无 add/remove）。 */

package/src/client/config-manager.module.css

@@ -1096,6 +1096,13 @@ body {
   justify-content: center;
 }
 
+/* 加载骨架区：同一高度契约，但内容**顶部对齐**（行列表从上方长出来；居中会让骨架悬在
+   页面正中，数据到货时整块跳走）。必须写在 .libraryListState 之后才覆盖 justify-content。 */
+.librarySkeletonRegion {
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
 .artifactRow {
   border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 60%, transparent);
 }
@@ -1589,6 +1596,65 @@ body {
   flex: 0 0 20%;
 }
 
+/* 紧凑行骨架：行高/内边距与 .artifactRowHead 对齐（52px），数据到货时行距不跳变。
+   图标位 20px、标题/说明两行、右侧动作位 56px 都只是**形状**，不假装有内容。 */
+.skeletonRows {
+  display: flex;
+  flex-direction: column;
+}
+
+.skeletonRowItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 52px;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border-bottom: 1px solid color-mix(in srgb, var(--dsw-alias-border-l1) 60%, transparent);
+}
+
+.skeletonRowItem:last-child {
+  border-bottom: none;
+}
+
+/* 逐行递进延迟：读起来像「正在一行行填」，而不是整块齐闪（与 .skeletonBars 同一手法） */
+.skeletonRowItem:nth-child(2) .skeletonBar { animation-delay: 60ms; }
+.skeletonRowItem:nth-child(3) .skeletonBar { animation-delay: 120ms; }
+.skeletonRowItem:nth-child(4) .skeletonBar { animation-delay: 180ms; }
+.skeletonRowItem:nth-child(n + 5) .skeletonBar { animation-delay: 240ms; }
+
+.skeletonRowIcon {
+  flex: none;
+  width: 20px;
+  height: 20px;
+}
+
+.skeletonRowBody {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skeletonRowTitle { height: 12px; width: 38%; }
+.skeletonRowMeta { height: 10px; width: 24%; }
+
+.skeletonRowAction {
+  flex: none;
+  width: 56px;
+  height: 20px;
+}
+
+/* 指标段的「值」占位（首页状态条）：首屏数据没到时用一条骨架替代 <b> 的数字，
+   宽度只够表达「这里会有一个数」，高度与数值行一致。 */
+.statValueSkeleton {
+  display: inline-block;
+  width: 26px;
+  height: 12px;
+  border-radius: var(--cm-r-1);
+}
+
 /* 骨架下方的可见文案（与 Spinner 的 label 同义）：加载反馈必须能被读到，不只靠色块 */
 .skeletonCaption {
   font-size: var(--cm-fs-meta);
@@ -2297,6 +2363,7 @@ body {
 
 /* —— 限高滚动容器（大报告/列表通用） —— */
 .planScroll,
+.mergeScroll,
 .reportScroll,
 .confirmScroll,
 .pullScroll,
@@ -2351,23 +2418,25 @@ body {
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: var(--cm-z-modal);
-  /* 弹窗卡片入场：**只淡入，不缩放**。
-     为什么去掉 scale：本类靠 translate(-50%,-50%) 自居中，而 scale 会同时改变内容盒的
-     可见尺寸 → 卡片高度在动画期间变化 → 视觉上「先在偏下的位置出现，再闪到中心」
-     （真机反馈的 20~30px 下移闪烁）。淡入不触碰布局，位置从第一帧就是最终的。
-     注：keyframes 里仍须把 translate 一起写全 —— 只写 opacity 也安全，但保持显式更不容易被误改。 */
+  /* 弹窗卡片入场：**只淡入，零几何位移**。
+     为什么连 translateY 也去掉（2026-10-21 用户反馈「弹窗出现的时候有时候动画会发生形变」）：
+     ① scale 会改变可见尺寸（真机「先在偏下出现再闪到中心」的根因，早已去掉）；
+     ② 4px 上浮虽然不改中心，但它让**每一帧**都落在一个非整数像素位置上 —— 卡片内容
+        （1px 边框、0.5px 分隔线、11~13px 字）在这些亚像素位置上重采样，边框会一会儿粗一点、
+        一会儿糊一点，看起来就是「形变」；帧率抖动时尤其明显（不是每次都复现）。
+     ③ 弹窗尺寸由内容 + max-height 决定，入场期间若内滚条出现/消失，宽度还会跳一次 ——
+        这条交给滚动容器上的 scrollbar-gutter: stable 解决（见 .dialogBodyScroll）。
+     纯 opacity 的合成层变化不触碰布局与栅格，按下即最终位置，任何帧率下都不形变。
+     注：keyframes 里的 translate 已移除，静止态定位仍由本类的 transform 负责。 */
   animation: dialogIn var(--cm-motion-base) var(--cm-motion-ease-out);
 }
 
 @keyframes dialogIn {
-  /* 淡入 + 4px 上浮（用户 2026-10-12 第 3 条：优化弹窗入场）。
-     **仍然不加 scale**：卡片靠 translate(-50%,-50%) 自居中，scale 会在动画期间改变可见尺寸 ——
-     那是「先在偏下的位置出现，再闪到中心」的根因（见上条注释）。translateY 只挪起点 4px、
-     终点回到最终位置，第一帧与最后一帧都是同一个中心，不存在回跳。
+  /* 只做透明度：不加 scale、也不加 translateY（理由见 .dialogContentCenter 的注释）。
      另注：这条动画此前**根本没跑**过一次 —— `--cm-motion-base` 在 token 迁移时被丢掉，
      整个 animation 短手在 computed-value 阶段失效（见 body 里的动效令牌注释）。 */
-  from { opacity: 0; transform: translate(-50%, -50%) translateY(4px); }
-  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 /* 关闭退场：Radix Dialog 的 Presence 在 present=false 时**保持节点挂载**并等动画结束
@@ -2447,6 +2516,8 @@ body {
 .dialogBodyScroll {
   overflow-y: auto;
   max-height: 460px;
+  /* 内滚条出现/消失时不再挤压内容宽度（否则弹窗入场那一瞬间会「横向抖一下」）。 */
+  scrollbar-gutter: stable;
 }
 
 .dialogWide {
@@ -6299,4 +6370,243 @@ button.profileRowMain:hover {
   font-size: var(--cm-fs-meta);
   color: var(--dsw-alias-label-secondary);
 }
+/* ==========================================================================
+   T-ui-merge：远程合并裁决（分区行 + 冲突三列对照）
+   纪律：组件规则只写 --cm-*（结构类 --dsw-alias-* 的边框/底/文字层可直用）；字号走 --cm-fs-*；
+   间距只取 9 档；圆角走 --cm-r-*；长列表由 .mergeScroll 并进上面的限高内滚组承担。
+   ========================================================================== */
+
+/* 视图外壳：竖直节奏统一由 flex gap 承担，子块不再各自写 margin-top */
+.mergeView {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* 概览：四个等分指标块（数字在上、标签在下；色只表达语义） */
+.mergeOverview {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.mergeTile {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border: 0.5px solid var(--cm-line-1);
+  border-radius: var(--cm-r-3);
+  background: var(--cm-surface-1);
+}
+
+.mergeTile[data-tone='ok'] {
+  border-color: color-mix(in srgb, var(--cm-ok) 40%, transparent);
+  background: color-mix(in srgb, var(--cm-ok) 8%, transparent);
+}
+
+.mergeTile[data-tone='info'] {
+  border-color: color-mix(in srgb, var(--cm-info) 40%, transparent);
+  background: color-mix(in srgb, var(--cm-info) 8%, transparent);
+}
+
+.mergeTile[data-tone='warn'] {
+  border-color: color-mix(in srgb, var(--cm-warn) 40%, transparent);
+  background: color-mix(in srgb, var(--cm-warn) 8%, transparent);
+}
+
+.mergeTile[data-tone='error'] {
+  border-color: color-mix(in srgb, var(--cm-error) 40%, transparent);
+  background: color-mix(in srgb, var(--cm-error) 8%, transparent);
+}
+
+.mergeTileValue {
+  font-size: var(--cm-fs-title);
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--cm-text-1);
+  font-variant-numeric: tabular-nums;
+}
+
+.mergeTileLabel {
+  font-size: var(--cm-fs-meta);
+  line-height: 1.25;
+  color: var(--cm-text-2);
+}
+
+/* 工具栏：批量裁决 + 重新预览（ⓘ 说明夹在中间，靠 .statusSpacer 推右） */
+.mergeToolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.mergeToolbarLabel {
+  font-size: var(--cm-fs-meta);
+  color: var(--cm-text-3);
+}
+
+/* 按钮内「图标 + 文字」的组合（按钮本身不带 gap） */
+.mergeIconLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* 执行结果卡：与分区卡同档表面，坐标是「已经发生的事」 */
+.mergeResult {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 10px 12px;
+  border: 0.5px solid var(--cm-line-1);
+  border-radius: var(--cm-r-3);
+  background: var(--cm-surface-1);
+}
+
+/* 弹窗底栏的裁决进度（左，长文案允许收窄换行） */
+.mergeFooterSummary {
+  min-width: 0;
+  font-size: var(--cm-fs-meta);
+  line-height: 1.5;
+  color: var(--cm-text-2);
+}
+
+/* 分区卡（.mergeScroll 内逐张）：卡片外框 0.5px，相邻卡之间用间距而不是分隔线 */
+.mergeSection {
+  padding: 10px 12px;
+  border: 0.5px solid var(--cm-line-1);
+  border-radius: var(--cm-r-3);
+  background: var(--cm-surface-1);
+}
+
+.mergeSection + .mergeSection {
+  margin-top: 8px;
+}
+
+.mergeSectionHead {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.mergeSectionName {
+  font-size: var(--cm-fs-title);
+  font-weight: 600;
+  color: var(--cm-text-1);
+}
+
+.mergeMeta {
+  font-size: var(--cm-fs-meta);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 分区级动作行：换行与间距对齐 .actionRow */
+.mergeActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+/* 当前裁决片：沿用原生 Pill 的激活配方（ghost-active 底 + 内描边）+ 加粗 */
+.mergeActionActive {
+  background: var(--cm-ghost-active-fill);
+  border-color: var(--cm-ghost-active-border);
+  font-weight: 600;
+}
+
+/* 单条冲突（只读展示：路径 + 原因 + 三列预览）：嵌在分区卡里，用低一档表面区分层级 */
+.mergeConflictRow {
+  margin-top: 8px;
+  padding: 8px;
+  border: 0.5px solid var(--cm-line-1);
+  border-radius: var(--cm-r-2);
+  background: color-mix(in srgb, var(--cm-text-1) 4%, transparent);
+}
+
+.mergeConflictPath {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--cm-fs-table);
+  color: var(--dsw-alias-label-primary);
+}
+
+.mergeKind {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: var(--cm-r-1);
+  background: color-mix(in srgb, var(--cm-text-1) 8%, transparent);
+  font-size: var(--cm-fs-meta);
+  line-height: 1.5;
+  color: var(--cm-text-2);
+}
+
+.mergeConflictReason {
+  margin-top: 4px;
+  font-size: var(--cm-fs-meta);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+/* 三列对照：等宽三列（564px 画布下每列约 160px），每列各自限高内滚 */
+.mergeCols {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.mergeCol {
+  min-width: 0;
+}
+
+.mergeColLabel {
+  display: block;
+  font-size: var(--cm-fs-meta);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.mergeColValue {
+  margin: 0;
+  max-height: 88px;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: var(--cm-fs-meta);
+  color: var(--cm-text-2);
+}
+
+/* 弹窗里的分区列表：卡片需要内边距（否则边框贴住滚动容器），高度让位给概览 + 底栏。 */
+.mergeScroll[data-fit='modal'] {
+  padding: 8px;
+  max-height: 46vh;
+  /* 分区列表在弹窗里内滚：预留滚动条槽位，列表从「刚好装下」变成「需要滚动」时宽度不跳。 */
+  scrollbar-gutter: stable;
+}
+
+/* —— 同步在途活动条（一键同步：拉远端快照 / 正在同步） ——
+   不定态进度是**状态**而不是装饰：prefers-reduced-motion 下仍保留（见 DESIGN §5）。 */
+.syncActivity {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.syncActivityTrack {
+  display: block;
+}
+
+.syncActivityLabel {
+  font-size: var(--cm-fs-meta);
+  line-height: 1.5;
+  color: var(--cm-text-2);
+}
+
 

package/src/client/home/HomePanel.tsx

@@ -46,6 +46,7 @@ import {
   type OverviewMetricKey,
 } from '../../ui/overview-view.ts'
 import { Badge, Banner, Button, Card, Spinner, StatusDot, Stepper } from '../common/ui.tsx'
+import { SkeletonRows } from '../common/Skeleton.tsx'
 import { BackupIcon, ExportIcon, ImportIcon, SyncIcon } from '../common/Icon.tsx'
 import { CopyButton } from '../common/CopyButton.tsx'
 import { Modal } from '../common/Modal.tsx'
@@ -355,11 +356,14 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
             onClick={() => { navMetric(seg.key) }}
           >
             <span>{seg.label}</span>
-            <b>{seg.value}</b>
-            {seg.dim !== null && <span className={css.statSegDim}>· {seg.dim}</span>}
+            {/* 首屏数值未到货时用骨架占位（不再在整条右端挂一颗转圈）：
+                段本身的位置与宽度保持不变，数据到货只换「值」这一块。 */}
+            {loading
+              ? <span className={css.skeletonBar + ' ' + css.statValueSkeleton} aria-hidden="true" />
+              : <b>{seg.value}</b>}
+            {!loading && seg.dim !== null && <span className={css.statSegDim}>· {seg.dim}</span>}
           </button>
         ))}
-        {loading && <span className={css.statSeg}><Spinner /></span>}
       </div>
 
       {/* 2. 动作工具栏：立即备份 + 三张「任务域」入口（带走 / 装进 / 回去）。
@@ -421,9 +425,13 @@ export function HomePanel({ api, syncApi, historyApi, t, syncT, openForeignImpor
             <div className={css.activityHeader}>
               <span className={css.activityTitle}>{t('overview.activity.title')}</span>
             </div>
-            {activity.length === 0
-              ? <div className={css.activityEmpty}>{data.history === null && !loading ? t('overview.activity.unavailable') : t('overview.activity.empty')}</div>
-              : (
+            {/* 首屏未完成时**不写空态**：以前这里直接渲染「暂无操作记录」，
+                数据没到就说「没有」，与真实情况相反。改为按行列表形状铺骨架。 */}
+            {loading
+              ? <SkeletonRows count={5} label={t('common.loading')} />
+              : activity.length === 0
+                ? <div className={css.activityEmpty}>{data.history === null ? t('overview.activity.unavailable') : t('overview.activity.empty')}</div>
+                : (
                 <div className={css.activityRows}>
                   {activity.map((item, i) => {
                     const atMs = Date.parse(item.at) || 0

package/src/client/import/ForeignImportView.tsx

@@ -30,6 +30,7 @@ import type { ConfigManagerApi, ForeignImportResponse } from '../api.ts'
 import type { UiT } from '../../ui/i18n.ts'
 import { foreignLossyRows, foreignPathsText, foreignSourcesViewModel, type ForeignSourceRow } from '../../ui/foreign-view.ts'
 import { Badge, Banner, Button, Card, SectionTitle, Spinner } from '../common/ui.tsx'
+import { SkeletonList } from '../common/Skeleton.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { ErrorBanner } from '../common/ErrorBanner.tsx'
 import { redact } from '../../security/redaction.ts'
@@ -187,7 +188,8 @@ export function ForeignImportView({ api, t, uiT, onReady }: ForeignImportViewPro
       <div className={css.viewBody}>
         <SectionTitle title={t('foreign.source.title')} />
         <div className={css.marketReviewPage}>
-          <Spinner label={t('foreign.source.loading')} />
+          {/* 来源卡还没到货：按来源卡（卡片列表）的形状铺骨架，不再只给一个居中转圈 */}
+          <SkeletonList count={4} label={t('foreign.source.loading')} />
         </div>
       </div>
     )

package/src/client/import/import-wizard-steps.tsx

@@ -15,6 +15,7 @@ import type { UiT } from '../../ui/i18n.ts'
 import {
   Banner, Button, Card, Checkbox, Empty, SectionTitle, Spinner,
 } from '../common/ui.tsx'
+import { Skeleton } from '../common/Skeleton.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { ErrorBanner, ErrorList } from '../common/ErrorBanner.tsx'
 import { CopyButton } from '../common/CopyButton.tsx'
@@ -183,7 +184,7 @@ export function ConsultStage(props: {
   return (
     <div className={css.viewBody}>
       <SectionTitle title={t('import.preview.title')} info={<InfoHint text={t('import.consult.hint')} label={t('common.infoHint')} />} />
-      {consultLoading && <Spinner label={apiT('consult.loading')} />}
+      {consultLoading && <Skeleton shape="line" count={5} label={apiT('consult.loading')} />}
       {consultReport !== null && <ConsultCard report={consultReport} t={apiT} />}
       {!consultLoading && consultReport === null && (
         <Banner kind="info">{t('import.consult.unavailable')}</Banner>

package/src/client/library/ArtifactRow.tsx

@@ -43,10 +43,16 @@ export interface ArtifactRowViewProps {
   onAction: (capability: ArtifactCapability, row: ArtifactRow) => void
   /** 该行有动作在跑：禁用行内按钮（防重复提交） */
   busy?: boolean
+  /**
+   * cloud-sync 借鉴项 ⑥：该行远端快照的**推送方设备**文案（如「由 <设备名> 推送」）。
+   * 只有快照 manifest 真的带 deviceName 时才由调用方给出 —— 缺省 undefined 表示**不渲染**
+   * （旧快照没有该字段，绝不显示空串或占位）。
+   */
+  deviceLabel?: string | undefined
 }
 
 export function ArtifactRowView({
-  row, t, uiT, formatTime, expanded, onToggle, onAction, busy = false,
+  row, t, uiT, formatTime, expanded, onToggle, onAction, busy = false, deviceLabel,
 }: ArtifactRowViewProps) {
   const detailId = useId()
   const primary = row.capabilities[0]
@@ -77,7 +83,11 @@ export function ArtifactRowView({
           </div>
           {/* 元数据是**自由序列**而不是表格列：某一段没有（如快照没有体积）就整段不出现，
               绝不补一个「—」占位 —— 这里没有对齐问题，占位只会变成噪音（§3 第三条） */}
-          {row.meta.length > 0 && <div className={css.artifactMeta}>{row.meta.join(' · ')}</div>}
+          {(row.meta.length > 0 || deviceLabel !== undefined) && (
+            <div className={css.artifactMeta}>
+              {[...row.meta, ...(deviceLabel === undefined ? [] : [deviceLabel])].join(' · ')}
+            </div>
+          )}
         </div>
         {row.badges.length > 0 && (
           <div className={css.artifactBadges}>

package/src/client/library/LibraryActions.tsx

@@ -24,6 +24,7 @@ import type { SyncApi } from '../sync/sync-api.ts'
 import { formatDateTimeFull } from '../sync/history-model.ts'
 import type { TranslateNS } from '../client-types.ts'
 import { Banner, Button, Empty, Spinner } from '../common/ui.tsx'
+import { Skeleton, SkeletonList, SkeletonTable } from '../common/Skeleton.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import { ConfirmDialog } from '../common/ConfirmDialog.tsx'
 import { Modal } from '../common/Modal.tsx'
@@ -380,7 +381,8 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
           {consult !== null && (
             <>
               <div className={css.hint}>{fileNameOf(consult.row)}</div>
-              {consult.loading && <Spinner label={api.t('consult.loading')} />}
+              {/* 迁移前咨询：正文块（多段报告）→ 按行铺骨架 */}
+              {consult.loading && <Skeleton shape="line" count={5} label={api.t('consult.loading')} />}
               {consult.error !== null && <Banner kind="error">{consult.error}</Banner>}
               {consult.report !== null && <ConsultCard report={consult.report} t={api.t} />}
             </>
@@ -441,7 +443,8 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
           trailing={<InfoHint text={t('snapshots.selectHint')} label={t('common.infoHint')} />}
         />
         <Modal.Body scroll>
-          {plan?.loading === true && <Spinner label={t('common.loading')} />}
+          {/* 恢复计划预览：结果是一张「文件 → 动作」表 → 按表格铺骨架 */}
+          {plan?.loading === true && <SkeletonTable rows={6} label={t('common.loading')} />}
           {plan?.error !== null && plan?.error !== undefined && <Banner kind="error">{plan.error}</Banner>}
           {plan?.plan != null && plan.plan.actions.length === 0 && <Empty>{t('snapshots.noActions')}</Empty>}
           {plan?.plan != null && plan.plan.actions.length > 0 && (
@@ -511,7 +514,7 @@ export function LibraryActions({ api, syncApi, t, target, onDone, onChanged, onO
         <Modal.Header title={t('backupFiles.inspect')} closeLabel={t('common.close')} onClose={() => { setInspect(null) }} />
         <Modal.Body scroll>
           {inspect !== null && <div className={css.hint} data-testid="inspect-backup-name">{inspect.name}</div>}
-          {inspect?.loading === true && <Spinner label={t('backupFiles.inspectLoading')} />}
+          {inspect?.loading === true && <SkeletonList count={3} label={t('backupFiles.inspectLoading')} />}
           {inspect?.error != null && <Banner kind="error">{inspect.error}</Banner>}
           {inspect !== null && !inspect.loading && inspect.result === null && inspect.error === null && <Empty>{t('backupFiles.inspectEmpty')}</Empty>}
           {inspect?.result != null && <BackupInspectView result={inspect.result} t={t} />}

package/src/client/library/LibraryPanel.tsx

@@ -21,8 +21,10 @@ import type { SyncApi, SyncSnapshotLite } from '../sync/sync-api.ts'
 import type { MarketApi } from '../market/market-api.ts'
 import type { TranslateNS } from '../client-types.ts'
 import { formatDateTimeFull } from '../sync/history-model.ts'
+import { deviceLabelsById } from '../sync/remote-device-view.ts'
 import { runStore, type LibraryStoreSlice } from '../run-store.ts'
-import { Badge, Button, Card, Empty, Spinner } from '../common/ui.tsx'
+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'
@@ -139,6 +141,19 @@ export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpen
     () => filterArtifacts(rows, { kind: lib.sourceFilter, text: lib.query, sort: lib.sort }),
     [rows, lib.sourceFilter, lib.query, lib.sort],
   )
+
+  /**
+   * cloud-sync 借鉴项 ⑥：远端快照 id → 「由 <设备名> 推送」文案。
+   * **只有**快照 manifest 真的带 deviceName 的行才进表：旧快照没有该字段，界面就不显示设备行
+   * （绝不渲染空串占位，也绝不把 undefined 变成文案）。
+   */
+  const deviceLabelOf = useMemo(
+    () => deviceLabelsById(
+      remote.status === 'ready' ? remote.items : [],
+      (device) => t('library.remoteDevice', { device }),
+    ),
+    [remote, t],
+  )
   const counts = countByKind(rows)
   const failedSources = [snapshots, files, remote, market].filter((s) => s.status === 'error').length
 
@@ -216,8 +231,10 @@ export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpen
       {/* 还有来源在路上（本机两源已就绪但为空）时也走加载态：绝不先给「暂无产物」的结论。
           与空态共用同一个 .libraryListState 契约（守卫要求恰好两处：加载态 + 空态）。 */}
       {(loading || (anySourcePending && filtered.length === 0)) && (
-        <div className={css.libraryListState}>
-          <Spinner label={t('common.loading')} />
+        <div className={css.libraryListState + ' ' + css.librarySkeletonRegion}>
+          {/* 骨架：行数按一屏可见行给（8 行 ≈ 564×720 画布的列表区），行高与 .artifactRowHead 对齐，
+              数据到货时列表从同一位置长出来，不再「空页面 + 居中转圈」整块跳变。 */}
+          <SkeletonRows count={8} label={t('common.loading')} />
         </div>
       )}
 
@@ -246,6 +263,7 @@ export function LibraryPanel({ api, syncApi, marketApi, t, uiT, onAction, onOpen
                 runStore.patch({ library: { expandedKey: lib.expandedKey === row.key ? null : row.key } })
               }}
               onAction={onAction}
+              deviceLabel={row.kind === 'remote-snapshot' ? deviceLabelOf.get(row.ref.remoteId ?? '') : undefined}
             />
           ))}
         </ul>

package/src/client/library/RestorePlanView.tsx

@@ -19,7 +19,8 @@ import type { TranslateNS } from '../client-types.ts'
 import { toRestorePlanView, withLoadedStatus, type RestorePlanRow } from '../../ui/restore-plan-view.ts'
 import { DiffTable } from '../common/DiffTable.tsx'
 import { formatBytes } from '../../ui/report.ts'
-import { Badge, Banner, Spinner } from '../common/ui.tsx'
+import { Badge, Banner } from '../common/ui.tsx'
+import { SkeletonTable } from '../common/Skeleton.tsx'
 import { ExpandChevron } from '../common/Icon.tsx'
 import { Collapse } from '../common/Motion.tsx'
 import css from '../config-manager.module.css'
@@ -104,7 +105,8 @@ function reasonLabel(t: TranslateNS<'config-manager'>, reason: SnapshotFileDiffR
 
 
 function DiffPane({ state, t }: { state: DiffState; t: TranslateNS<'config-manager'> }) {
-  if (state.status === 'loading') return <Spinner label={t('snapshots.plan.loadingDiff')} />
+  // 差异是「逐行文档」形状：加载时按表格铺骨架，与 DiffTable 的行高同一节奏
+  if (state.status === 'loading') return <SkeletonTable rows={6} label={t('snapshots.plan.loadingDiff')} />
   if (state.status === 'error') return <Banner kind="error">{redact(state.message)}</Banner>
   const diff = state.diff
   if (diff.reason !== undefined) return <div className={css.hint}>{reasonLabel(t, diff.reason, diff)}</div>

package/src/client/locales.ts

@@ -827,6 +827,8 @@ export const zh = {
   'library.kind.snapshot': '本机快照',
   'library.kind.backupFile': '备份文件',
   'library.kind.remote': '远端快照',
+  // cloud-sync 借鉴项 ⑥：快照的推送方设备（仅当快照 manifest 带 deviceName 时才渲染；旧快照不显示占位）
+  'library.remoteDevice': '由 {device} 推送',
   'library.kind.market': '市场配置',
   'library.title': '产物库',
   'library.refresh': '刷新',
@@ -1769,6 +1771,7 @@ export const en: Record<keyof typeof zh, string> = {
   'library.kind.snapshot': 'Local snapshot',
   'library.kind.backupFile': 'Backup file',
   'library.kind.remote': 'Remote snapshot',
+  'library.remoteDevice': 'Pushed by {device}',
   'library.kind.market': 'Market config',
   'library.title': 'Artifact library',
   'library.refresh': 'Refresh',