@ash-qw/dsh-theme-prts 2.3.1 → 2.5.0

package/src/client/file-drop.js

@@ -0,0 +1,48 @@
+const extensions = {
+  'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'], 'image/webp': ['.webp'],
+  'image/avif': ['.avif'], 'image/gif': ['.gif'], 'application/json': ['.json'],
+}
+
+// Feed the existing input/change flow so picker and drop share validation and saving.
+export function mountFileDrop({ area, input, enabled = () => true, onError }) {
+  let depth = 0
+  const getInput = () => typeof input === 'function' ? input() : input
+  const clear = () => { depth = 0; area.removeAttribute('data-prts-drop-active') }
+  const available = () => enabled() && !getInput()?.disabled && !area.closest('[hidden], [inert]')
+  const isFile = event => Array.from(event.dataTransfer?.types ?? []).includes('Files')
+    || Boolean(event.dataTransfer?.files?.length)
+  const enter = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation()
+    depth++
+    if (available()) area.setAttribute('data-prts-drop-active', '')
+  }
+  const over = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation()
+    event.dataTransfer.dropEffect = available() ? 'copy' : 'none'
+    if (!available()) clear()
+  }
+  const leave = event => {
+    if (!depth) return
+    event.stopPropagation()
+    if (--depth <= 0) clear()
+  }
+  const drop = event => {
+    if (!isFile(event)) return
+    event.preventDefault(); event.stopPropagation(); clear()
+    if (!available()) return
+    const files = event.dataTransfer.files, target = getInput()
+    if (files.length !== 1) { onError('一次只能添加一个文件'); return }
+    const file = files[0], name = file.name.toLowerCase()
+    const accepts = target.accept.toLowerCase().split(',').map(value => value.trim()).filter(Boolean)
+    const matches = accepts.some(type => type.startsWith('.') ? name.endsWith(type)
+      : file.type.toLowerCase() === type || (!file.type && extensions[type]?.some(ext => name.endsWith(ext))))
+    if (accepts.length && !matches) { onError('文件类型不支持，请选择此处支持的图片或文件'); return }
+    target.files = files
+    target.dispatchEvent(new area.ownerDocument.defaultView.Event('change', { bubbles: true }))
+  }
+  const handlers = { dragenter: enter, dragover: over, dragleave: leave, drop, dragend: clear }
+  for (const [name, handler] of Object.entries(handlers)) area.addEventListener(name, handler)
+  return { dispose() { clear(); for (const [name, handler] of Object.entries(handlers)) area.removeEventListener(name, handler) } }
+}

package/src/client/host-geometry-adapter.js

@@ -78,7 +78,12 @@ export function createHostGeometryAdapter({ document, window }) {
         shouldMeasure = true
       }
     }
-    if (shouldMeasure || !entries.length) scheduleMeasure()
+    // Keep shared wallpaper geometry in the same paint as the resized sidebar.
+    if (shouldMeasure || !entries.length) {
+      if (frameRequest !== undefined) window?.cancelAnimationFrame?.(frameRequest)
+      frameRequest = undefined
+      measure()
+    }
   }
 
   function stopObservation() {

package/src/client/native-preferences.js

@@ -28,6 +28,13 @@ export function createNativePreferences({ storage, onChange }) {
       migrationAttempted = true
       pending = { ...legacy, ...pending }
     }
+    // Materialize the old shared sidebar values once, so later left-side edits
+    // cannot change a right-side preference that was never written by the Host.
+    if (s.value?.preferencesInitialized && writable(s)) {
+      for (const key of ['rightSidebarOpacity', 'rightSidebarBlur']) {
+        if (!Object.hasOwn(s.value, key) && !Object.hasOwn(pending, key) && !Object.hasOwn(inFlight, key) && !Object.hasOwn(failed, key)) pending[key] = host[key]
+      }
+    }
     current = normalizePreferences({ ...host, ...inFlight, ...pending })
     if (s.value?.preferencesInitialized) {
       legacy = null

package/src/client/opacity-dial.js

@@ -1,7 +1,8 @@
 // Ring geometry adapted from React Bits CometDial (David Haz).
 // See src/vendor/react-bits/LICENSE.md and THIRD_PARTY_NOTICES.md.
 export const BACKGROUND_OPACITY_CONTROLS = Object.freeze([
-  { key: 'sidebarOpacity', label: '会话列表侧栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
+  { key: 'sidebarOpacity', label: '左侧边栏', property: '--prts-sidebar-opacity', value: 94, blurKey: 'sidebarBlur', blurProperty: '--prts-sidebar-blur', blurDefault: 8 },
+  { key: 'rightSidebarOpacity', label: '右侧边栏', property: '--prts-right-sidebar-opacity', value: 94, blurKey: 'rightSidebarBlur', blurProperty: '--prts-right-sidebar-blur', blurDefault: 8 },
   { key: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12 },
   { key: 'bakerOpacity', label: 'Baker 气泡', property: '--prts-baker-opacity', value: 50, blurKey: 'bakerBlur', blurProperty: '--prts-baker-blur', blurDefault: 8, theme: 'deck-chat' },
   { key: 'classicUserOpacity', label: '经典用户消息', property: '--prts-classic-user-opacity', value: 50, blurKey: 'classicUserBlur', blurProperty: '--prts-classic-user-blur', blurDefault: 8, theme: 'native' },
@@ -16,7 +17,8 @@ export function opacityDialMarkup() {
   const controls = BACKGROUND_OPACITY_CONTROLS.map(({key,label,value,blurDefault}) => {
     const sample = key === 'bakerOpacity' ? '<span>这是一条回复</span><i></i>'
       : key === 'classicUserOpacity' ? '<span>这是我发送的消息</span><i></i>'
-        : key === 'railOpacity' ? '<b>◇</b><b>☼</b><b>⚙</b>' : '<span>工作区</span><i></i><i></i>'
+        : key === 'railOpacity' ? '<b>◇</b><b>☼</b><b>⚙</b>'
+          : key === 'rightSidebarOpacity' ? '<span>侧边栏</span><i></i><i></i>' : '<span>工作区</span><i></i><i></i>'
     return `<div data-prts-opacity-control="${key}">
       <div data-prts-opacity-heading><strong>${label}</strong><button type="button" data-prts-opacity-reset data-prts-opacity-reset-tooltip="恢复到 ${value}%" aria-label="恢复${label}透明度到 ${value}%"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 10a7.5 7.5 0 1 1 .7 5.2M4.5 4.5V10H10"/></svg></button></div>
       <div data-prts-opacity-dial><svg viewBox="0 0 200 200" role="slider" tabindex="0" aria-label="${label}透明度" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${value}" aria-valuetext="${value}%"><circle data-dial-focus cx="100" cy="100" r="97"/><path data-dial-track d="${dialArc(110,430)}"/><path data-dial-lit/><path data-dial-tail/><circle data-dial-head r="8"/></svg><label data-prts-opacity-number><input type="number" min="0" max="100" step="1" value="${value}" aria-label="${label}透明度百分比"><span>%</span></label></div>
@@ -24,8 +26,8 @@ export function opacityDialMarkup() {
       <div data-prts-blur-control hidden><label><span>模糊</span><input type="range" min="0" max="32" step="1" value="${blurDefault}" aria-label="${label}模糊度"></label><output>${blurDefault}px</output><button type="button" data-prts-blur-reset title="恢复到 ${blurDefault}px" aria-label="恢复${label}模糊度到 ${blurDefault}px"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 10a7.5 7.5 0 1 1 .7 5.2M4.5 4.5V10H10"/></svg></button></div>
       <small data-prts-opacity-note></small>
     </div>`
-  }).join('')
-  return `<fieldset data-prts-opacity-settings hidden><legend>材质透明度与模糊度</legend><small>透明度数值越高越透明；模糊度以像素计。调整时预览，松手后保存。</small><div data-prts-opacity-grid>${controls}</div></fieldset>`
+  })
+  return `<fieldset data-prts-opacity-settings hidden><legend>材质透明度与模糊度</legend><small>透明度数值越高越透明；模糊度以像素计。调整时预览，松手后保存。</small><div data-prts-opacity-grid>${controls.join('')}</div></fieldset>`
 }
 export function mountOpacityDials({ section, window, onChange }) {
   const root = section.ownerDocument.documentElement
@@ -108,14 +110,14 @@ export function mountOpacityDials({ section, window, onChange }) {
     for(const [el,type,fn] of bindings)el.addEventListener(type,fn)
     paint(value)
     return {
-      update(preferences, active) {
+      update(preferences, active, inactiveNote) {
         container.hidden = Boolean(definition.theme && preferences.conversationStyle !== definition.theme)
         saved = 100 - Math.round((preferences[definition.key] ?? (100 - definition.value) / 100) * 100)
         if (!grip && section.ownerDocument.activeElement !== input) paint(saved)
         savedBlur = preferences[definition.blurKey] ?? definition.blurDefault
         if (section.ownerDocument.activeElement !== blurInput) paintBlur(savedBlur)
         blurControl.hidden = !active
-        container.querySelector('[data-prts-opacity-note]').textContent = active ? '' : '当前未启用此材质'
+        container.querySelector('[data-prts-opacity-note]').textContent = active ? '' : inactiveNote
       },
       dispose() { if(grip)finish({},true);window.clearTimeout(timer);for(const [el,type,fn] of bindings)el.removeEventListener(type,fn) },
     }
@@ -127,10 +129,13 @@ export function mountOpacityDials({ section, window, onChange }) {
       section.querySelector('[data-prts-opacity-settings]').hidden = preferences.backgroundMode === 'off'
       const conversationImage = full || (split && Boolean(state.conversation))
       const sidebarImage = full || (split && Boolean(state.sidebar))
-      const active = [sidebarImage, sidebarImage,
+      const active = [sidebarImage || conversationImage, conversationImage, sidebarImage,
         conversationImage && preferences.conversationStyle === 'deck-chat',
         conversationImage && preferences.conversationStyle === 'native']
-      controls.forEach((control,i)=>control.update(preferences,active[i]))
+      const missingImage = full || !split ? '上传完整背景图片后生效' : null
+      const inactiveNotes = [missingImage || '上传左侧边栏或正文图片后生效', missingImage || '上传正文图片后生效',
+        missingImage || '上传左侧边栏图片后生效', missingImage || '上传正文图片后生效', missingImage || '上传正文图片后生效']
+      controls.forEach((control,i)=>control.update(preferences,active[i],inactiveNotes[i]))
     },
     dispose() {for(const control of controls)control.dispose()},
   }

package/src/client/preferences.js

@@ -29,10 +29,12 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   backgroundDim: .45,
   heroContrast: true,
   sidebarOpacity: .06,
+  rightSidebarOpacity: .06,
   railOpacity: .3,
   bakerOpacity: .5,
   classicUserOpacity: .5,
   sidebarBlur: 8,
+  rightSidebarBlur: 8,
   railBlur: 12,
   bakerBlur: 8,
   classicUserBlur: 8,
@@ -100,7 +102,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', 'heroContrast', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
+  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'heroContrast', 'sidebarOpacity', 'rightSidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'rightSidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
   material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
@@ -214,10 +216,12 @@ export function normalizePreferences(value) {
     bakerLoading: input.bakerLoading === true,
     backgroundMode: ['off', 'split', 'full'].includes(input.backgroundMode) ? input.backgroundMode : 'off',
     sidebarOpacity: typeof input.sidebarOpacity === 'number' && Number.isFinite(input.sidebarOpacity) ? Math.min(1, Math.max(0, input.sidebarOpacity)) : .06,
+    rightSidebarOpacity: typeof input.rightSidebarOpacity === 'number' && Number.isFinite(input.rightSidebarOpacity) ? Math.min(1, Math.max(0, input.rightSidebarOpacity)) : typeof input.sidebarOpacity === 'number' && Number.isFinite(input.sidebarOpacity) ? Math.min(1, Math.max(0, input.sidebarOpacity)) : .06,
     railOpacity: typeof input.railOpacity === 'number' && Number.isFinite(input.railOpacity) ? Math.min(1, Math.max(0, input.railOpacity)) : .3,
     bakerOpacity: typeof input.bakerOpacity === 'number' && Number.isFinite(input.bakerOpacity) ? Math.min(1, Math.max(0, input.bakerOpacity)) : .5,
     classicUserOpacity: typeof input.classicUserOpacity === 'number' && Number.isFinite(input.classicUserOpacity) ? Math.min(1, Math.max(0, input.classicUserOpacity)) : .5,
     sidebarBlur: materialBlurOr(input.sidebarBlur, DEFAULT_PREFERENCES.sidebarBlur),
+    rightSidebarBlur: materialBlurOr(input.rightSidebarBlur, materialBlurOr(input.sidebarBlur, DEFAULT_PREFERENCES.sidebarBlur)),
     railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
     bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
     classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),

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

@@ -771,8 +771,10 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsBackgroundMode = preferences.backgroundMode
       root.style.setProperty('--prts-background-shade', `${preferences.backgroundDim * 100}%`)
       for (const name of ['sidebar', 'rail', 'baker']) root.style.setProperty(`--prts-${name}-opacity`, `${preferences[`${name}Opacity`] * 100}%`)
+      root.style.setProperty('--prts-right-sidebar-opacity', `${preferences.rightSidebarOpacity * 100}%`)
       root.style.setProperty('--prts-classic-user-opacity', `${preferences.classicUserOpacity * 100}%`)
       for (const name of ['sidebar', 'rail', 'baker']) root.style.setProperty(`--prts-${name}-blur`, `${preferences[`${name}Blur`]}px`)
+      root.style.setProperty('--prts-right-sidebar-blur', `${preferences.rightSidebarBlur}px`)
       root.style.setProperty('--prts-classic-user-blur', `${preferences.classicUserBlur}px`)
       refresh()
     },

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

@@ -1,29 +1,33 @@
-import { THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage } from './theme-transfer.js'
+import { mountFileDrop } from './file-drop.js'
+import { checkTransferCancelled, readTransferFile, THEME_PACKAGE_LIMIT, validateThemePackage, describeThemePackage, ignoredThemePackageFields } 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>
+        <section data-prts-transfer-card="export">
           <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>
+        <section data-prts-transfer-card="import" data-prts-transfer-drop>
+          <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>
+          <button type="button" data-prts-transfer-choose>选择主题文件 <span aria-hidden="true">↑</span></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>
+        <p data-prts-transfer-compatibility hidden role="alert"></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>
+      <div data-prts-transfer-progress hidden><div><span data-prts-transfer-phase></span><span data-prts-transfer-percent></span></div><progress data-prts-transfer-bar max="1" aria-label="主题文件处理进度"></progress></div>
+      <button type="button" data-prts-transfer-stop hidden>取消操作</button>
       <p data-prts-transfer-status role="status" aria-live="polite"></p>
     </section>
   </dialog>`
@@ -39,60 +43,98 @@ export function mountThemeTransfer({ panel, window, transfer }) {
   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
+  let choosing = false, activeOperation, pending, busy = false, disposed = false, generation = 0, controller, cancellable = true
   const render = () => {
     if (disposed) return
+    for (const card of section.querySelectorAll('[data-prts-transfer-card]')) card.toggleAttribute('data-prts-transfer-active', card.dataset.prtsTransferCard === (busy ? activeOperation : pending || choosing ? 'import' : undefined))
     get('preview').hidden = !pending
+    if (!pending) get('compatibility').hidden = true
     get('recovery').hidden = !transfer.hasBackup
     for (const control of section.querySelectorAll('button,input')) control.disabled = busy
+    get('stop').hidden = !busy
+    get('stop').disabled = !busy || !cancellable || controller?.signal.aborted
     // 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) {
+  const progress = ({ value, label, cancellable: allowed }) => {
+    if (disposed) return
+    if (allowed === false) { cancellable = false; render() }
+    get('progress').hidden = false
+    get('phase').textContent = label
+    get('percent').textContent = value === null ? '' : `${Math.round(value * 100)}%`
+    if (value === null) get('bar').removeAttribute('value')
+    else get('bar').value = value
+  }
+  const paint = () => new Promise(resolve => window.setTimeout(resolve, 0))
+  async function run(kind, 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() }
+    controller = new window.AbortController(); cancellable = true
+    activeOperation = kind
+    busy = true; section.setAttribute('aria-busy', 'true'); get('status').textContent = ''; get('progress').hidden = true; render()
+    progress({ value: null, label: '正在准备…' })
+    try {
+      await paint()
+      checkTransferCancelled(controller.signal)
+      const message = await task(controller.signal)
+      if (!disposed) { progress({ value: 1, label: '处理完成' }); get('status').textContent = message }
+    }
+    catch (error) { if (!disposed) { get('progress').hidden = true; get('status').textContent = error.name === 'AbortError' ? '操作已取消。' : error.message } }
+    finally { busy = false; if (!pending && !disposed) get('file').value = '';  if (!disposed) section.setAttribute('aria-busy', 'false'); render() }
   }
   const change = event => {
     if (event.target !== get('file')) return
+    choosing = false
     const file = event.target.files?.[0], selected = ++generation
     pending = undefined; render()
     if (!file) return
-    void run(async () => {
+    void run('import', async signal => {
       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)
-      })
+      const text = await readTransferFile(window, file, signal, event => progress({ value: event.lengthComputable && event.total ? event.loaded / event.total * 0.8 : null, label: '正在读取主题文件…' }))
+      progress({ value: 0.8, label: '正在解析并检查主题文件…' })
+      await paint()
+      checkTransferCancelled(signal)
       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)
+      const ignored = ignoredThemePackageFields(value)
+      const compatibility = get('compatibility')
+      compatibility.hidden = ignored.length === 0
+      compatibility.textContent = ignored.length
+        ? `当前版本不支持以下配置，导入后将丢失：${ignored.join('、')}。请保留原文件。`
+        : ''
       return '已读取文件，请确认导入内容。'
     })
   }
   const click = event => {
     const button = event.target.closest?.('button')
+    if (button === get('stop') && busy && cancellable) {
+      controller.abort(); progress({ value: null, label: '正在取消，请稍候…', cancellable: false }); return
+    }
     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)
+    if (button === get('choose')) { choosing = true; render(); get('file').click() }
+    if (button === get('export')) void run('export', async signal => {
+      const value = await transfer.export(get('assets').checked, state => progress({ ...state, value: state.value * 0.9 }), signal)
+      progress({ value: 0.9, label: '正在生成下载文件…' })
+      await paint()
+      checkTransferCancelled(signal)
       transfer.download(value)
       return '已发起下载，请确认主题文件已保存。'
     })
-    if (button === get('apply') && pending) void run(async () => {
-      await transfer.import(pending); pending = undefined; get('file').value = ''
+    if (button === get('apply') && pending) void run('import', async signal => {
+      await transfer.import(pending, progress, signal); 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 '已恢复导入前配置。' })
+    if (button === get('cancel')) { pending = undefined; get('file').value = ''; get('status').textContent = ''; get('progress').hidden = true; render() }
+    if (button === get('restore')) void run('import', async signal => { await transfer.restore(progress, signal); return '已恢复导入前配置。' })
   }
+  const drop = mountFileDrop({ area: get('drop'), input: get('file'), enabled: () => !busy && !disposed, onError: message => { get('status').textContent = message } })
+  const cancelChoice = () => { choosing = false; render() }
+  get('file').addEventListener('cancel', cancelChoice)
   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) } }
+  return { dispose() { get('file').removeEventListener('cancel', cancelChoice); drop.dispose(); disposed = true; controller?.abort(); 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) } }
 }

package/src/client/theme-transfer.js

@@ -1,12 +1,58 @@
 import { validBackgroundRegion } from '../shared/background-region.js'
 import { DEFAULT_PREFERENCES, normalizePreferences } from './preferences.js'
 
+export function checkTransferCancelled(signal) {
+  if (signal?.aborted) throw Object.assign(new Error('操作已取消'), { name: 'AbortError' })
+}
+
+export function readTransferFile(window, blob, signal, onProgress, asImage = false) {
+  return new Promise((resolve, reject) => {
+    checkTransferCancelled(signal)
+    const reader = new window.FileReader()
+    const cleanup = () => signal?.removeEventListener('abort', abort)
+    const abort = () => { reader.abort(); cleanup(); reject(Object.assign(new Error('操作已取消'), { name: 'AbortError' })) }
+    reader.onload = () => { cleanup(); resolve(asImage ? String(reader.result).split(',')[1] : reader.result) }
+    reader.onerror = () => { cleanup(); reject(Error('无法读取主题文件或图片')) }
+    reader.onprogress = onProgress
+    signal?.addEventListener('abort', abort, { once: true })
+    if (asImage) reader.readAsDataURL(blob)
+    else reader.readAsText(blob)
+  })
+}
+
 export const THEME_PACKAGE_LIMIT = 160 * 1024 * 1024
 const transferSlots = ['full', 'sidebar', 'conversation']
 const transferRoles = ['user', 'assistant']
 const transferBuiltins = ['rhodes-island', 'lungmen', 'penguin-logistics', 'rhine-lab', 'reunion']
 const record = value => value !== null && typeof value === 'object' && !Array.isArray(value)
 const encodedImage = (value, limit) => typeof value === 'string' && value.length > 0 && value.length <= Math.ceil(limit / 3) * 4 && value.length % 4 === 0 && /^[A-Za-z0-9+/]+={0,2}$/.test(value)
+const unknownFields = (value, known, prefix) => record(value)
+  ? Object.keys(value).filter(key => !known.includes(key)).map(key => `${prefix}.${key}`)
+  : []
+
+export function ignoredThemePackageFields(value) {
+  const ignored = unknownFields(value.preferences, Object.keys(DEFAULT_PREFERENCES), '设置')
+  const assets = value.assets
+  if (!assets) return ignored
+  ignored.push(...unknownFields(assets, ['backgrounds', 'backgroundRegions', 'avatars', 'emblems'], '素材'))
+  ignored.push(...unknownFields(assets.backgrounds, transferSlots, '背景'))
+  ignored.push(...unknownFields(assets.backgroundRegions, transferSlots, '背景保护区域'))
+  for (const slot of transferSlots) ignored.push(...unknownFields(assets.backgroundRegions?.[slot], ['x', 'y', 'width', 'height'], `背景保护区域.${slot}`))
+  ignored.push(...unknownFields(assets.avatars, transferRoles, '头像'))
+  for (const role of transferRoles) {
+    ignored.push(...unknownFields(assets.avatars?.[role], ['image', 'crop'], `头像.${role}`))
+    ignored.push(...unknownFields(assets.avatars?.[role]?.crop, ['zoom', 'x', 'y'], `头像.${role}.crop`))
+  }
+  const emblems = assets.emblems
+  ignored.push(...unknownFields(emblems, ['items', 'hero', 'conversation'], '徽记'))
+  for (const [index, item] of (emblems?.items ?? []).entries()) {
+    ignored.push(...unknownFields(item, ['format', 'version', 'label', 'params', 'image'], `徽记.items[${index}]`))
+    ignored.push(...unknownFields(item?.params, ['mode', 'lineSource', 'cleanup', 'threshold', 'zoom', 'x', 'y'], `徽记.items[${index}].params`))
+  }
+  ignored.push(...unknownFields(emblems?.hero, ['kind', 'key', 'label', 'asset'], '徽记.hero'))
+  for (const [index, entry] of (emblems?.conversation ?? []).entries()) ignored.push(...unknownFields(entry, ['kind', 'key', 'label', 'asset'], `徽记.conversation[${index}]`))
+  return ignored
+}
 
 export function validateThemePackage(value) {
   if (!record(value) || value.format !== 'prts-theme' || value.version !== 1) throw Error('不支持的主题文件格式或版本')
@@ -57,61 +103,64 @@ export function describeThemePackage(value) {
 
 export function createThemeTransfer({ window, getPreferences, savePreferences, checkWritable, checkExport = checkWritable, themeVersion }) {
   let busy = false, backup
-  const request = async (path, data) => {
-    const response = await window.fetch('/prts-theme-api/' + path, { credentials: 'same-origin',
+  const request = async (path, data, signal) => {
+    checkTransferCancelled(signal)
+    const response = await window.fetch('/prts-theme-api/' + path, { credentials: 'same-origin', signal,
       ...(data === undefined ? {} : { method: 'POST', headers: { 'content-type': 'application/json', 'x-prts-request': '1' }, body: JSON.stringify(data) }) })
     const result = await response.json()
     if (!response.ok) throw Error(result.error || '无法连接主题素材服务')
     return result
   }
-  const readImage = blob => new Promise((resolve, reject) => {
-    const reader = new window.FileReader()
-    reader.onload = () => resolve(String(reader.result).split(',')[1])
-    reader.onerror = () => reject(Error('无法读取背景图片'))
-    reader.readAsDataURL(blob)
-  })
-  async function capture(includeAssets) {
+  async function capture(includeAssets, progress = () => {}, signal) {
+    checkTransferCancelled(signal)
+    progress({ value: 0, label: '正在读取主题设置…' })
     const value = { format: 'prts-theme', version: 1, themeVersion, exportedAt: new Date().toISOString(), preferences: { ...getPreferences() } }
     const states = {}
     if (includeAssets) {
       const backgrounds = {}, backgroundRegions = {}, avatars = {}, items = [], ids = new Map()
-      states.backgrounds = await request('backgrounds/configuration')
+      progress({ value: 0.1, label: '正在读取背景…' })
+      states.backgrounds = await request('backgrounds/configuration', undefined, signal)
       for (const slot of transferSlots) {
         const entry = states.backgrounds[slot]
         backgroundRegions[slot] = entry?.region ?? null
         backgrounds[slot] = null
         if (entry) {
           if (!/^[a-f0-9-]{36}$/.test(entry.id)) throw Error('背景引用无效')
-          const response = await window.fetch('/prts-theme-api/backgrounds/image/' + entry.id, { credentials: 'same-origin' })
+          const response = await window.fetch('/prts-theme-api/backgrounds/image/' + entry.id, { credentials: 'same-origin', signal })
           if (!response.ok) throw Error('无法导出背景图片')
-          backgrounds[slot] = await readImage(await response.blob())
+          backgrounds[slot] = await readTransferFile(window, await response.blob(), signal, undefined, true)
         }
       }
-      states.avatars = await request('avatars/configuration')
+      progress({ value: 0.35, label: '正在读取头像…' })
+      states.avatars = await request('avatars/configuration', undefined, signal)
       for (const role of transferRoles) {
-        const source = await request('avatars/edit/' + role)
+        const source = await request('avatars/edit/' + role, undefined, signal)
         if (source.revision !== states.avatars.revision) throw Error('头像已变化，请重新导出')
         avatars[role] = source.image ? { image: source.image, crop: source.crop } : null
       }
-      states.emblems = await request('emblems/configuration')
+      progress({ value: 0.5, label: '正在读取徽记…' })
+      states.emblems = await request('emblems/configuration', undefined, signal)
       async function reference(entry) {
         if (!entry) return null
         if (entry.kind === 'builtin') return { kind: 'builtin', key: entry.key, label: entry.label }
         if (!ids.has(entry.draftId)) {
           ids.set(entry.draftId, items.length)
-          items.push(await request('emblems/draft/' + encodeURIComponent(entry.draftId) + '/export'))
+          items.push(await request('emblems/draft/' + encodeURIComponent(entry.draftId) + '/export', undefined, signal))
         }
         return { kind: 'custom', asset: ids.get(entry.draftId), label: entry.label }
       }
       const hero = await reference(states.emblems.configuration.hero), conversation = []
       for (const entry of states.emblems.configuration.conversation) conversation.push(await reference(entry))
       value.assets = { backgrounds, backgroundRegions, avatars, emblems: { items, hero, conversation } }
+      progress({ value: 0.85, label: '正在核对素材…' })
       for (const kind of ['backgrounds', 'avatars', 'emblems']) {
-        if ((await request(kind + '/configuration')).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
+        if ((await request(kind + '/configuration', undefined, signal)).revision !== states[kind].revision) throw Error('素材在导出期间发生变化，请重试')
       }
     }
     if (JSON.stringify(value.preferences) !== JSON.stringify(getPreferences())) throw Error('设置在导出期间发生变化，请重试')
+    checkTransferCancelled(signal)
     validateThemePackage(value)
+    progress({ value: 1, label: '主题数据已就绪' })
     return { value, states }
   }
   async function exclusive(fn) {
@@ -127,14 +176,23 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
     window.document.body.append(link); link.click(); link.remove()
     window.setTimeout(() => window.URL.revokeObjectURL(url), 1000)
   }
-  async function apply(value) {
+  async function apply(value, progress = () => {}, signal) {
+    checkTransferCancelled(signal)
     validateThemePackage(value)
     const preferenceRevision = checkWritable()
-    const before = await capture(Boolean(value.assets))
+    const before = await capture(Boolean(value.assets), state => progress({ value: state.value * 0.3, label: '备份：' + state.label }), signal)
     backup = before.value
+    progress({ value: 0.3, label: '正在生成导入前备份…' })
+    await new Promise(resolve => window.setTimeout(resolve, 0))
+    checkTransferCancelled(signal)
     download(backup, 'before-import')
+    let completed = 0
+    const total = value.assets ? value.assets.emblems.items.length + 7 : 1
+    const step = label => progress({ value: 0.35 + 0.65 * completed / total, label })
     const undo = [], revisions = Object.fromEntries(Object.entries(before.states).map(([key, state]) => [key, state.revision]))
     const write = async (kind, data, previous) => {
+      checkTransferCancelled(signal)
+      // Await writes without aborting: their confirmed revision is needed for rollback.
       const result = await request(kind + '/configuration', { ...data, revision: revisions[kind] })
       revisions[kind] = result.revision
       undo.push(async () => {
@@ -146,24 +204,35 @@ export function createThemeTransfer({ window, getPreferences, savePreferences, c
       if (value.assets) {
         const a = value.assets, old = before.value.assets, drafts = []
         // Generate every custom draft before changing the active configuration.
-        for (const item of a.emblems.items) drafts.push(await request('emblems/import', item))
+        for (const item of a.emblems.items) {
+          step('正在导入徽记素材…')
+          checkTransferCancelled(signal)
+          drafts.push(await request('emblems/import', item)); completed++
+        }
         const entry = (ref, index) => ref === null ? null : ref.kind === 'builtin' ? ref : { kind: 'custom', key: 'import-' + index + '-' + drafts[ref.asset].draftId, label: ref.label, draftId: drafts[ref.asset].draftId }
         const configuration = { version: 2, hero: entry(a.emblems.hero, 'hero'), conversation: a.emblems.conversation.map(entry) }
-        for (const slot of transferSlots) await write('backgrounds', { slot, image: a.backgrounds[slot], region: a.backgroundRegions?.[slot] ?? null }, { slot, image: old.backgrounds[slot], region: old.backgroundRegions?.[slot] ?? null })
-        for (const role of transferRoles) await write('avatars', { role, image: a.avatars[role]?.image ?? null, crop: a.avatars[role]?.crop }, { role, image: old.avatars[role]?.image ?? null, crop: old.avatars[role]?.crop })
-        await write('emblems', { configuration }, { configuration: before.states.emblems.configuration })
+        for (const slot of transferSlots) { step('正在应用背景…'); await write('backgrounds', { slot, image: a.backgrounds[slot], region: a.backgroundRegions?.[slot] ?? null }, { slot, image: old.backgrounds[slot], region: old.backgroundRegions?.[slot] ?? null }); completed++ }
+        for (const role of transferRoles) { step('正在应用头像…'); await write('avatars', { role, image: a.avatars[role]?.image ?? null, crop: a.avatars[role]?.crop }, { role, image: old.avatars[role]?.image ?? null, crop: old.avatars[role]?.crop }); completed++ }
+        step('正在应用徽记排列…')
+        await write('emblems', { configuration }, { configuration: before.states.emblems.configuration }); completed++
       }
+      step('正在保存主题设置…')
+      checkTransferCancelled(signal)
+      progress({ value: 0.99, label: '正在保存主题设置…', cancellable: false })
       await savePreferences(mergeThemePreferences(before.value.preferences, value.preferences), preferenceRevision)
+      progress({ value: 1, label: '主题已保存' })
     } catch (error) {
+      progress({ value: null, label: signal?.aborted ? '正在取消，回退素材…' : '导入失败，正在回退素材…', cancellable: false })
       let failures = 0
       for (const restore of undo.reverse()) { try { await restore() } catch { failures++ } }
+      if (signal?.aborted && !failures && error.name === 'AbortError') throw Error('操作已取消，已回退已写入的素材。')
       throw Error(`${error.message}。${failures ? '部分素材未能自动恢复。' : '已回退已确认写入的素材。'}若连接中断，请检查实际状态；导入前备份已发起下载，可重新导入恢复。`)
     }
   }
   return {
-    export: includeAssets => exclusive(async () => { checkExport(); return (await capture(includeAssets)).value }),
-    import: value => exclusive(() => apply(value)),
-    restore: () => exclusive(() => { if (!backup) throw Error('没有可恢复的备份'); return apply(backup) }),
+    export: (includeAssets, progress, signal) => exclusive(async () => { checkExport(); return (await capture(includeAssets, progress, signal)).value }),
+    import: (value, progress, signal) => exclusive(() => apply(value, progress, signal)),
+    restore: (progress, signal) => exclusive(() => { if (!backup) throw Error('没有可恢复的备份'); return apply(backup, progress, signal) }),
     get hasBackup() { return Boolean(backup) },
     download,
   }