@ash-qw/dsh-theme-prts 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web and the official desktop client",
@@ -75,7 +75,7 @@
     "@playwright/test": "1.55.1",
     "esbuild": "^0.28.2",
     "jsdom": "24.1.3",
-    "markdown-it": "^14.3.2"
+    "markdown-it": "^14.3.3"
   },
   "dependencies": {
     "@deepseek-ai/schemastery": "~3.18.4",

package/src/client/conversation-control-adapter.js

@@ -14,6 +14,8 @@ function closestWithClassSuffix(node, suffix) {
 function classify(button, operation) {
   // The host's process disclosure owns its transparent, full-width hit area.
   if (button.hasAttribute('data-turn-process')) return null
+  // Notification headers belong to the card surface, not standalone buttons.
+  if (button.parentElement?.matches('[data-turn-trigger]')) return null
   // Changed-file cards own one outer surface; their header and rows stay native.
   if (button.closest('[data-changed-files]')) return null
   // File previews are transparent hit targets; the enclosing card owns its material and outline.

package/src/client/custom-background.js

@@ -63,7 +63,7 @@ export function createBackgroundStore({ window, document }) {
     },
   }
 }
-export function backgroundMarkup() {
+export function backgroundMarkup(heroContrastControl = '') {
   return `<section data-prts-background-settings>
     <header><strong>会话背景</strong><small>分区使用不同图片，或让一张完整背景贯穿侧边栏与正文。</small></header>
     <div data-prts-background-modes role="group" aria-label="背景模式">
@@ -75,6 +75,7 @@ export function backgroundMarkup() {
       <input type="file" data-prts-background-file="${slot}" accept="image/png,image/jpeg,image/webp,image/avif" hidden>
     </article>`).join('')}</div>
     <label data-prts-background-shade hidden><span>背景淡化 <output></output></span><input type="range" min="0" max="90" step="5" aria-label="背景淡化程度"><small>调高后背景更淡，接近当前主题底色。</small></label>
+    <div data-prts-background-hero-setting hidden>${heroContrastControl}</div>
     ${opacityDialMarkup()}
     <small data-prts-background-help>支持 PNG / JPEG / WebP / AVIF · 最大 10 MB<br>图片居中铺满，切换模式保留素材，并在当前 DSH 实例同步。</small><p data-prts-background-status role="status"></p>
   </section>`

package/src/client/index.js

@@ -1,3 +1,4 @@
+import { createThemeTransfer } from './theme-transfer.js'
 import { createBackgroundStore } from './custom-background.js'
 import { createNativePreferences } from './native-preferences.js'
 import { createComposerGlassSurface } from './composer-glass-surface.js'
@@ -91,6 +92,7 @@ export function applyPrtsPlugin(ctx, environment) {
     cssText,
     service: themeService,
     cursorAssets: assets.cursor,
+    onSchemeChange() { particleField.repaintScheme() },
     onTransitionStateChange(active) {
       particleField.setSchemeTransitionActive(active)
     },
@@ -111,6 +113,7 @@ export function applyPrtsPlugin(ctx, environment) {
   const adapter = createRc7Adapter({ document })
   const hostGeometry = createHostGeometryAdapter({ document, window })
   const connection = contextService(ctx, 'connection')
+  let themeTransfer
   let operations
   let mountObserver
   let mountFrame
@@ -201,6 +204,9 @@ export function applyPrtsPlugin(ctx, environment) {
     if (!themeAlreadyApplied) theme.apply(preferences)
     operations ||= createOperationsShell({
       document, window, assets, adapter, hostGeometry, customEmblemStore, avatarStore, backgroundStore,
+      themeTransfer: themeTransfer ||= createThemeTransfer({ window, getPreferences: () => nativePreferences.value,
+        savePreferences: (value, revision) => nativePreferences.replace(value, revision),
+        checkWritable: () => nativePreferences.checkWritable(), checkExport: () => nativePreferences.checkReadable(), themeVersion: version }),
       onSchemeToggle(next, interaction) {
         return theme.setTheme(next, { ...interaction, animate: true })
       },
@@ -347,6 +353,7 @@ export function applyPrtsPlugin(ctx, environment) {
   } else {
     applyVisualState()
   }
+  const stopBackgroundRedraw = backgroundStore.subscribe(() => { if (!safeMode) particleField.update(preferences) })
   const bindNativePreferences = settingsCtx => {
     const forms = contextService(settingsCtx, 'configForms')
     if (forms) settingsCtx.effect(() => nativePreferences.bind(forms.get('theme-prts')))
@@ -359,6 +366,7 @@ export function applyPrtsPlugin(ctx, environment) {
     statusSource.dispose()
     customEmblemStore.dispose()
     avatarStore.dispose()
+    stopBackgroundRedraw()
     backgroundStore.dispose()
     particleField.dispose()
     startup.dispose({ restoreFocus: false })

package/src/client/native-preferences.js

@@ -69,6 +69,37 @@ export function createNativePreferences({ storage, onChange }) {
   }
   return {
     get value() { return current },
+    checkReadable() {
+      const s = snapshot()
+      if (disposed || s?.status !== 'ready') throw Error('请等待 DSH 设置加载完成')
+      if (busy || Object.keys(pending).length || Object.keys(failed).length) throw Error('请先等待当前设置保存成功')
+      return s.revision
+    },
+    checkWritable() {
+      const revision = this.checkReadable()
+      if (!writable(snapshot())) throw Error('当前连接无法保存主题设置')
+      return revision
+    },
+    async replace(next, expectedRevision) {
+      this.checkWritable()
+      const s = snapshot()
+      if (s.revision !== expectedRevision) throw Error('设置已在其他页面更新，请重新导入')
+      const normalized = normalizePreferences(next)
+      busy = true
+      phase = 'saving'; emit()
+      try {
+        const ops = Object.entries(normalized).map(([key, value]) => ({ op: 'set', path: [key], value }))
+        ops.push({ op: 'set', path: ['preferencesInitialized'], value: true })
+        if (await form.mutate(ops, s.revision) !== true) throw Error('DSH 未接受导入设置，请重试')
+        phase = 'saved'
+      } catch (error) {
+        phase = 'error'
+        throw error
+      } finally {
+        busy = false
+        receive()
+      }
+    },
     bind(next) {
       unsubscribe?.(); form = next
       unsubscribe = form.subscribe(receive)

package/src/client/operations-shell-v2.js

@@ -46,7 +46,7 @@ export function createOperationsShell({
   onSchemeToggle = () => {},
   onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
-  customEmblemStore, avatarStore, backgroundStore,
+  customEmblemStore, avatarStore, backgroundStore, themeTransfer,
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
   onVisualReset = () => {},
@@ -481,7 +481,7 @@ export function createOperationsShell({
       trigger: shell.querySelector('[data-prts-rail-brand]'),
       panel: shell.querySelector('[data-prts-theme-settings]'),
       backdrop: shell.querySelector('[data-prts-settings-backdrop]'),
-      customEmblemStore, avatarStore, backgroundStore,
+      customEmblemStore, avatarStore, backgroundStore, themeTransfer,
       onPreferenceChange,
       onPreferencePreview,
       onResetVisual: onVisualReset,

package/src/client/particle-field-adapter.js

@@ -432,7 +432,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   const densityProfile = density => PARTICLE_DENSITY_PROFILES[density] ?? PARTICLE_DENSITY_PROFILES.standard
   const particleRadius = density => densityProfile(density ?? activeDensity()).radius
   const fieldEnabled = () => heroActive || (preferences.conversationStyle !== 'deck-chat' && preferences.conversationEmblem !== false)
-  const canRenderFrame = () => fieldEnabled() && !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && !schemeTransitionPaused && !resizing
+  const canRenderFrame = (paintOnly = false) => fieldEnabled() && !disposed && documentVisible && canvasVisible && !hydrationPaused && !startupPaused && (paintOnly || !schemeTransitionPaused) && !resizing
   const layoutWidth = () => width
   const layoutHeight = () => height
   const layoutShiftX = () => 0
@@ -1134,12 +1134,25 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     resizeTimer = window.setTimeout?.(finishResizeTransaction, RESIZE_SETTLE_MS)
   }
 
+  function resizeHeroTransition(nextSize) {
+    // Keep live positions and velocities; the spring follows the new destination.
+    // Snapping to particle.target here would restore the old hero mid-explosion.
+    clearResizeState()
+    pointerActive = false
+    resizeCommits += applyFieldSize(nextSize) ? 1 : 0
+  }
+
   function onOperationResize(entries = []) {
     if (!operation || !canvas) return
     resizeObservations += 1
     const entry = entries.find(candidate => candidate.target === operation) ?? entries[0]
     const contentRect = entry?.contentRect
     pendingResizeSize = contentRect ? sizeFromRect(contentRect) : readOperationSize()
+    if (transition?.fromHero && !phoneStatic()) {
+      resizeHeroTransition(pendingResizeSize)
+      updateFrameGate()
+      return
+    }
     if (phoneStatic()) {
       const nextSize = pendingResizeSize
       clearResizeState()
@@ -1289,21 +1302,30 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     if (queuedDensity !== undefined && (queuedDensity !== particles.length || force)) startDensityReassembly(queuedDensity, force)
   }
 
-  function draw(timestamp) {
+  function heroContrastStrength() {
+    const root = document.documentElement
+    const imageVisible = preferences.backgroundMode === 'full'
+      ? root.hasAttribute('data-prts-background-full')
+      : preferences.backgroundMode === 'split' && root.hasAttribute('data-prts-background-conversation')
+    if (preferences.heroContrast === false || !imageVisible) return 0
+    return heroActive ? 1 : transition?.fromHero ? 1 - easeInOut(transition.progress) : 0
+  }
+
+  function draw(timestamp, paintOnly = false) {
     frame = undefined
     if (!ambient || !canvas) return
-    if (!canRenderFrame()) return
+    if (!canRenderFrame(paintOnly)) return
     if (geometryDirty) {
       syncCanvasBackingStore()
       geometryDirty = false
     }
-    if (transition) {
+    if (transition && !paintOnly) {
       transitionStartedAt ??= timestamp
       transition.progress = clamp((timestamp - transitionStartedAt) / TRANSITION_MS, 0, 1)
       if (transition.progress >= 1) completeTransition()
     }
 
-    advanceDensity(timestamp)
+    if (!paintOnly) advanceDensity(timestamp)
     const reducedMotion = motionReduced()
     const staticPhone = phoneStatic()
     const staticField = reducedMotion || staticPhone
@@ -1322,7 +1344,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     }
     const frameGeometry = { activeLayout, staticField, transitionLayout }
     const { center, size: fieldSize } = activeLayout
-    const follow = reducedMotion ? 1 : 0.035
+    const follow = paintOnly ? 0 : reducedMotion ? 1 : 0.035
     glowX += (center.x - glowX) * follow
     glowY += (center.y - glowY) * follow
     if (glow) glow.style.transform = 'translate3d(calc(' + glowX.toFixed(2) + 'px - 50%), calc(' + glowY.toFixed(2) + 'px - 50%), 0)'
@@ -1337,19 +1359,31 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       const damping = heroPhysics ? 0.86 : 0.84
       const pointerForce = heroPhysics ? 2.2 : 2.7
       const lightScheme = document.documentElement.dataset.prtsScheme === 'light'
-      const baseAlpha = lightScheme ? 0.66 : 0.72
-      const radiusScale = lightScheme ? 1.12 : 1
+      const contrast = heroContrastStrength()
+      if (contrast > 0 && context.createRadialGradient) {
+        const origin = heroActive ? center : transition.fromCenter
+        const radius = (heroActive ? fieldSize : transition.fromSize) * .78
+        const shade = lightScheme ? '248,250,252' : '7,14,22'
+        const gradient = context.createRadialGradient(origin.x, origin.y, 0, origin.x, origin.y, radius)
+        gradient.addColorStop(0, `rgba(${shade},${.58 * contrast})`)
+        gradient.addColorStop(.42, `rgba(${shade},${.42 * contrast})`)
+        gradient.addColorStop(1, `rgba(${shade},0)`)
+        context.fillStyle = gradient
+        context.fillRect(origin.x - radius, origin.y - radius, radius * 2, radius * 2)
+      }
+      const baseAlpha = (lightScheme ? 0.66 : 0.72) + .16 * contrast
+      const radiusScale = (lightScheme ? 1.12 : 1) * (1 + .08 * contrast)
       const particleBatches = typeof context.moveTo === 'function' ? new Map() : null
 
       for (const particle of particles) {
         const target = targetPosition(particle, frameGeometry)
-        if (staticField) {
+        if (staticField && !paintOnly) {
           particle.x = target.x
           particle.y = target.y
           particle.vx = 0
           particle.vy = 0
         }
-        if (!staticField) {
+        if (!staticField && !paintOnly) {
           particle.vx += (target.x - particle.x) * spring
           particle.vy += (target.y - particle.y) * spring
 
@@ -1412,6 +1446,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       canvas.setAttribute('data-prts-particle-ready', '')
       canvas.style.visibility = ''
     }
+    if (paintOnly) return
     const explicitMotion = Boolean(densityTransition || transition)
     const animatedField = !staticField && context && particles.length
     if (explicitMotion) {
@@ -1550,7 +1585,15 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     }
     transitionStartedAt = undefined
     pointerActive = false
-    scheduleFrame()
+    // The initial message may have paused hydration before syncHeroState ran.
+    // Let this short exit finish uninterrupted by subsequent response updates.
+    cancelHydrationResume()
+    hydrationPaused = false
+    mutationBurstScore = 0
+    if (mutationBurstTimer !== undefined) window.clearTimeout?.(mutationBurstTimer)
+    mutationBurstTimer = undefined
+    if (pendingResizeSize) resizeHeroTransition(pendingResizeSize)
+    updateFrameGate()
   }
 
   function syncHeroState() {
@@ -1612,7 +1655,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
   }
 
   function registerContentMutations(mutations) {
-    if (!fieldEnabled() || phoneStatic()) return
+    if (!fieldEnabled() || phoneStatic() || transition?.fromHero) return
     let weight = mutations.length
     for (const mutation of mutations) {
       for (const node of [...mutation.addedNodes, ...mutation.removedNodes]) {
@@ -1780,6 +1823,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
     if (context && particles.length) {
       syncCanvasBackingStore()
       geometryDirty = false
+      cancelFrame()
       draw(Number(window.performance?.now?.()) || 0)
     } else {
       canvas.setAttribute('data-prts-particle-ready', '')
@@ -1847,6 +1891,11 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
       startupPaused = next
       updateFrameGate()
     },
+    repaintScheme() {
+      cancelFrame()
+      draw(Number(window.performance?.now?.()) || 0, true)
+      if (!schemeTransitionPaused) scheduleFrame()
+    },
     setSchemeTransitionActive(active) {
       const next = Boolean(active)
       if (schemeTransitionPaused === next) return
@@ -1888,10 +1937,13 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
 
       findMount()
       if (!fieldEnabled()) resetTraversal()
-      const previousActiveDensity = heroActive
+      const previousRequestedDensity = heroActive
         ? previousPreferences.heroParticleDensity
         : previousPreferences.conversationParticleDensity
-      const activeDensityChanged = previousActiveDensity !== undefined && previousActiveDensity !== activeDensity()
+      // Compare effective densities on both sides: sparse/light hero settings
+      // already render at standard density, including after a focus refresh.
+      const previousActiveDensity = heroActive ? effectiveHeroDensity(previousRequestedDensity) : previousRequestedDensity
+      const activeDensityChanged = previousRequestedDensity !== undefined && previousActiveDensity !== activeDensity()
       reportState({ requestedPattern: 'orthogonal' })
       if (particles.length && activeDensityChanged) scheduleDensityReassembly(targetParticleCount(), true)
       if (preservedTraversalCoordinate !== undefined && scroller && !heroActive) reanchorTraversal(preservedTraversalCoordinate)
@@ -1929,6 +1981,7 @@ export function createParticleFieldAdapter({ document, window, emblem = '', embl
         enabled: fieldEnabled(),
         mounted: Boolean(ambient?.isConnected && canvas?.isConnected),
         hero: heroActive,
+        heroContrast: heroContrastStrength(),
         side,
         emblemKey: (heroActive || transition?.fromHero ? heroEmblem() : emblemForSegment(segment))?.key,
         nextEmblemKey: transition ? emblemForSegment(transition.targetSegment)?.key : null,

package/src/client/preferences.js

@@ -27,6 +27,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   composerGlass: false,
   backgroundMode: 'off',
   backgroundDim: .45,
+  heroContrast: true,
   sidebarOpacity: .06,
   railOpacity: .3,
   bakerOpacity: .5,
@@ -99,7 +100,7 @@ export const PARTICLE_DETAIL_LEVELS = Object.freeze({
   precise: Object.freeze({ conversationParticleDensity: 'dense', heroParticleDensity: 'ultra' }),
 })
 export const PREFERENCE_GROUPS = Object.freeze({
-  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
+  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'heroContrast', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
@@ -220,6 +221,7 @@ export function normalizePreferences(value) {
     railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
     bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
     classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),
+    heroContrast: booleanOr(input.heroContrast, DEFAULT_PREFERENCES.heroContrast),
     backgroundDim: typeof input.backgroundDim === 'number' && Number.isFinite(input.backgroundDim) ? Math.min(.9, Math.max(0, input.backgroundDim)) : .45,
     composerGlass: booleanOr(input.composerGlass, DEFAULT_PREFERENCES.composerGlass),
     bootAnimation: booleanOr(input.bootAnimation, DEFAULT_PREFERENCES.bootAnimation),

package/src/client/theme-controller-v2.js

@@ -72,7 +72,7 @@ function resolveScheme(value) {
   return identity.includes('dark') || identity.includes('night') ? 'dark' : 'light'
 }
 
-export function createThemeController({ document, window, cssText, service, cursorAssets, onTransitionStateChange = () => {} }) {
+export function createThemeController({ document, window, cssText, service, cursorAssets, onTransitionStateChange = () => {}, onSchemeChange = () => {} }) {
   if (!document || !window) {
     const gesture = { update() {}, finish() {}, cancel() {} }
     return { apply() {}, sync() {}, refresh() {}, setTheme() {}, beginThemeTransition() { return gesture }, toggle() {}, dispose() {} }
@@ -153,6 +153,7 @@ export function createThemeController({ document, window, cssText, service, curs
     if (disposed) return
     const next = resolveScheme(value)
     root.dataset.prtsScheme = next
+    onSchemeChange(next)
     return next
   }
 

package/src/client/theme-settings-workbench.js

@@ -1,3 +1,4 @@
+import { themeTransferMarkup, mountThemeTransfer } from './theme-transfer-panel.js'
 import { backgroundMarkup, mountBackgroundSettings } from './custom-background.js'
 import { avatarMarkup, mountAvatarSettings } from './custom-avatar.js'
 import { customEmblemMarkup, mountCustomEmblemEditor } from './custom-emblem.js'
@@ -38,7 +39,9 @@ function previewSetting(key, label, description) {
 }
 
 function settingButtons(key, label, options) {
-  const note = key === 'composerGlass'
+  const note = key === 'heroContrast'
+      ? '<small data-prts-setting-note>为新会话徽记添加柔光衬底，使它在背景图片上更清晰。</small>'
+      : key === 'composerGlass'
       ? '<small data-prts-setting-note>增强输入框的背景模糊与轻微折射，关闭时使用原有材质</small>'
       : key === 'bakerLoading'
       ? '<small data-prts-setting-note>每轮正文生成时显示三点动画，完成后显示全文；中断时保留已收到的内容</small>'
@@ -59,7 +62,7 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'aiToolsEnabled', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['heroContrast', 'composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'aiToolsEnabled', 'previewOngoing', 'previewTools', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
     <span><strong>${label}</strong>${note}</span>
     <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
   </div>`
@@ -134,9 +137,10 @@ export function themeSettingsMarkup() {
               <span><strong>设置未保存</strong><small>未能保存到 DSH，可能存在连接中断、配置冲突或当前访问不支持持久保存。重试将重新提交本次修改。</small></span>
               <button type="button" data-prts-retry-save>重试保存</button>
             </div>
+            <button type="button" data-prts-transfer-open data-prts-footer-action aria-haspopup="dialog" aria-expanded="false"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M6 14V3m-3 3 3-3 3 3M14 6v11m-3-3 3 3 3-3"/></svg><span>导入与导出</span></button>
             <div data-prts-reset-zone>
 
-              <button type="button" data-prts-reset-visual title="恢复全部主题设置" aria-label="恢复全部主题设置">恢复默认</button>
+              <button type="button" data-prts-reset-visual data-prts-footer-action title="恢复全部主题设置" aria-label="恢复全部主题设置"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 7a6.5 6.5 0 1 1-.4 5M4 3v4h4"/></svg><span>恢复默认</span></button>
               <div data-prts-reset-confirm hidden role="group" aria-label="确认恢复全部主题设置">
                 <span>重置全部分类的主题设置，保留主题开关、启动动画和徽记配置。</span>
                 <button type="button" data-prts-reset-confirm-action>确认恢复</button>
@@ -144,6 +148,7 @@ export function themeSettingsMarkup() {
               </div>
             </div>
           </footer>
+          ${themeTransferMarkup()}
         </div>
         <div data-prts-theme-settings-scroll>
           <section data-prts-settings-section="appearance" role="tabpanel" id="prts-page-appearance" aria-labelledby="prts-tab-appearance" tabindex="0">
@@ -159,7 +164,7 @@ export function themeSettingsMarkup() {
           </section>
           </section>
           <section data-prts-settings-section="background" role="tabpanel" id="prts-page-background" aria-labelledby="prts-tab-background" tabindex="0" hidden>
-            ${backgroundMarkup()}
+            ${backgroundMarkup(settingButtons('heroContrast', '新会话徽记增强', []))}
             <div data-prts-composer-glass-setting>${settingButtons('composerGlass', '输入框增强毛玻璃', [])}</div>
             <small data-prts-composer-glass-required hidden>自定义背景下，输入框增强毛玻璃始终开启。</small>
           </section>
@@ -262,7 +267,7 @@ export function createThemeSettingsOverlay({
   trigger,
   panel,
   backdrop,
-  customEmblemStore, avatarStore, backgroundStore,
+  customEmblemStore, avatarStore, backgroundStore, themeTransfer,
   onOpen = () => {},
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
@@ -270,6 +275,7 @@ export function createThemeSettingsOverlay({
   onRetrySave = () => {},
 }) {
   const window = document?.defaultView
+  const transferEditor = mountThemeTransfer({ panel, window, transfer: themeTransfer })
   const backgroundEditor = mountBackgroundSettings({panel,window,store:backgroundStore,onChange:onPreferenceChange})
   const avatarEditor = mountAvatarSettings({panel,window,store:avatarStore})
   const customEditor = mountCustomEmblemEditor({ panel, window, store: customEmblemStore })
@@ -749,6 +755,7 @@ export function createThemeSettingsOverlay({
       panel.querySelector('[data-prts-baker-options]').hidden = preferences?.conversationStyle !== 'deck-chat'
       panel.querySelector('[data-prts-avatars]').hidden = preferences?.conversationStyle !== 'deck-chat'
       const customBackground = preferences.backgroundMode !== 'off'
+      panel.querySelector('[data-prts-background-hero-setting]').hidden = !customBackground
       panel.querySelector('[data-prts-composer-glass-setting]').hidden = customBackground
       panel.querySelector('[data-prts-composer-glass-required]').hidden = !customBackground
       backgroundEditor.update(preferences)
@@ -766,6 +773,7 @@ export function createThemeSettingsOverlay({
     close: () => setOpen(false),
     toggle,
     dispose() {
+      transferEditor.dispose()
       customEditor.dispose()
       avatarEditor.dispose()
       backgroundEditor.dispose()

package/src/client/theme-transfer-panel.js

@@ -0,0 +1,98 @@
+import { THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage } from './theme-transfer.js'
+
+export function themeTransferMarkup() {
+  return `<dialog data-prts-transfer-dialog aria-labelledby="prts-transfer-title">
+    <section data-prts-transfer>
+      <header data-prts-transfer-heading><div><small>P.R.T.S. / 主题文件</small><h2 id="prts-transfer-title">导入与导出</h2></div><button type="button" data-prts-transfer-close aria-label="关闭导入与导出">×</button></header>
+      <div data-prts-transfer-columns>
+        <section data-prts-transfer-card>
+          <h3>导出主题</h3><p>保存一份主题，备份或带到另一台设备。</p>
+          <label data-prts-transfer-option><input type="checkbox" data-prts-transfer-assets checked><span>包含自定义素材<small>背景、头像和徽记，保留编辑参数与排列。</small></span></label>
+          <small>取消勾选，仅导出主题设置。</small>
+          <button type="button" data-prts-transfer-export>导出主题文件 <span aria-hidden="true">↓</span></button>
+        </section>
+        <section data-prts-transfer-card>
+          <h3>导入主题</h3><p>选择已导出的文件，确认内容后应用。</p>
+          <div data-prts-transfer-file-hint><span aria-hidden="true">↑</span><small>.prts-theme.json · 最大 160 MB</small></div>
+          <button type="button" data-prts-transfer-choose>选择主题文件</button>
+          <input type="file" accept=".prts-theme.json,application/json" aria-label="导入主题文件" data-prts-transfer-file hidden>
+        </section>
+      </div>
+      <div data-prts-transfer-preview hidden>
+        <strong>确认导入</strong><p data-prts-transfer-summary></p>
+        <small>应用前会下载当前配置备份，请保留备份文件。</small>
+        <div data-prts-transfer-buttons><button type="button" data-prts-transfer-apply>确认导入</button><button type="button" data-prts-transfer-cancel>取消</button></div>
+      </div>
+      <div data-prts-transfer-recovery hidden><small>恢复将替换最近一次导入后所做的修改。</small><button type="button" data-prts-transfer-restore>恢复导入前配置</button></div>
+      <p data-prts-transfer-status role="status" aria-live="polite"></p>
+    </section>
+  </dialog>`
+}
+
+export function mountThemeTransfer({ panel, window, transfer }) {
+  const section = panel.querySelector('[data-prts-transfer]')
+  if (!section || !transfer) return { dispose() {} }
+  const dialog = panel.querySelector('[data-prts-transfer-dialog]')
+  const trigger = panel.querySelector('[data-prts-transfer-open]')
+  const open = () => { dialog.showModal(); trigger?.setAttribute('aria-expanded', 'true'); get('close').focus() }
+  const close = () => { if (busy) return; dialog.close(); trigger?.setAttribute('aria-expanded', 'false'); trigger?.focus() }
+  const keydown = event => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); close() } }
+  const cancel = event => { if (event.target === dialog) { event.preventDefault(); event.stopPropagation(); close() } }
+  const get = name => section.querySelector(`[data-prts-transfer-${name}]`)
+  let pending, busy = false, disposed = false, generation = 0
+  const render = () => {
+    if (disposed) return
+    get('preview').hidden = !pending
+    get('recovery').hidden = !transfer.hasBackup
+    for (const control of section.querySelectorAll('button,input')) control.disabled = busy
+    // Prevent local editors from racing a multi-service import; other clients use revision checks.
+    for (const page of panel.querySelectorAll('[data-prts-settings-section]')) if (!page.contains(section)) page.inert = busy
+  }
+  async function run(task) {
+    if (busy) return
+    busy = true; get('status').textContent = '正在处理，请稍候…'; render()
+    try { get('status').textContent = await task() }
+    catch (error) { if (!disposed) get('status').textContent = error.message }
+    finally { busy = false; render() }
+  }
+  const change = event => {
+    if (event.target !== get('file')) return
+    const file = event.target.files?.[0], selected = ++generation
+    pending = undefined; render()
+    if (!file) return
+    void run(async () => {
+      if (file.size > THEME_PACKAGE_LIMIT) throw Error('主题文件不能超过 160 MB')
+      const text = await new Promise((resolve, reject) => {
+        const reader = new window.FileReader()
+        reader.onload = () => resolve(reader.result); reader.onerror = () => reject(Error('无法读取主题文件')); reader.readAsText(file)
+      })
+      let value
+      try { value = JSON.parse(text) } catch { throw Error('主题文件不是有效的 JSON') }
+      validateThemePackage(value)
+      if (disposed || selected !== generation) return ''
+      pending = value
+      get('summary').textContent = describeThemePackage(value)
+      return '已读取文件，请确认导入内容。'
+    })
+  }
+  const click = event => {
+    const button = event.target.closest?.('button')
+    if (button === get('close')) close()
+    if (button === get('choose')) get('file').click()
+    if (button === get('export')) void run(async () => {
+      const value = await transfer.export(get('assets').checked)
+      transfer.download(value)
+      return '已发起下载，请确认主题文件已保存。'
+    })
+    if (button === get('apply') && pending) void run(async () => {
+      await transfer.import(pending); pending = undefined; get('file').value = ''
+      return '主题已导入并保存。'
+    })
+    if (button === get('cancel')) { pending = undefined; get('file').value = ''; get('status').textContent = ''; render() }
+    if (button === get('restore')) void run(async () => { await transfer.restore(); return '已恢复导入前配置。' })
+  }
+  trigger?.addEventListener('click', open)
+  dialog.addEventListener('keydown', keydown); dialog.addEventListener('cancel', cancel)
+  section.addEventListener('change', change); section.addEventListener('click', click); render()
+  return { dispose() { disposed = true; generation++; if (dialog.open) dialog.close(); trigger?.removeEventListener('click', open); dialog.removeEventListener('keydown', keydown); dialog.removeEventListener('cancel', cancel); section.removeEventListener('change', change); section.removeEventListener('click', click) } }
+}