@ash-qw/dsh-theme-prts 2.0.0 → 2.1.0

package/src/client/opacity-dial.js

@@ -0,0 +1,137 @@
+// 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: 'railOpacity', label: '设置侧栏', property: '--prts-rail-opacity', value: 70, blurKey: 'railBlur', blurProperty: '--prts-rail-blur', blurDefault: 12, fullBackgroundOnly: true },
+  { 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' },
+])
+const dialClamp = value => Math.min(100, Math.max(0, Math.round(value)))
+const dialPoint = angle => [100 + Math.cos(angle * Math.PI / 180) * 80, 100 + Math.sin(angle * Math.PI / 180) * 80]
+const dialArc = (start, end) => {
+  const [x, y] = dialPoint(start), [ex, ey] = dialPoint(end)
+  return `M ${x} ${y} A 80 80 0 ${end - start > 180 ? 1 : 0} 1 ${ex} ${ey}`
+}
+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>'
+    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>
+      <div data-prts-material-preview="${key}" aria-hidden="true"><div data-prts-material-preview-surface>${sample}</div></div>
+      <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>`
+}
+export function mountOpacityDials({ section, window, onChange }) {
+  const root = section.ownerDocument.documentElement
+  const controls = BACKGROUND_OPACITY_CONTROLS.map(definition => {
+    const container = section.querySelector(`[data-prts-opacity-control="${definition.key}"]`)
+    const svg = container.querySelector('[data-prts-opacity-dial] svg'), input = container.querySelector('[data-prts-opacity-number] input'), tail = svg.querySelector('[data-dial-tail]')
+    const blurControl = container.querySelector('[data-prts-blur-control]')
+    const blurInput = blurControl.querySelector('input'), blurOutput = blurControl.querySelector('output')
+    const materialPreview = container.querySelector('[data-prts-material-preview]')
+    let value = definition.value, saved = value, grip = null, timer
+    let blurValue = definition.blurDefault, savedBlur = blurValue
+    const paint = next => {
+      const previous = value
+      value = dialClamp(next)
+      const angle = 110 + value * 3.2, [x,y] = dialPoint(angle)
+      svg.querySelector('[data-dial-lit]').setAttribute('d', value ? dialArc(110,angle) : '')
+      const head = svg.querySelector('[data-dial-head]');head.setAttribute('cx', x);head.setAttribute('cy', y)
+      svg.setAttribute('aria-valuenow', value);svg.setAttribute('aria-valuetext', `${value}%`)
+      input.value = value
+      window.clearTimeout(timer)
+      const reach = Math.min(65, Math.abs(value - previous) * 3.2)
+      tail.setAttribute('d', reach && value !== previous ? dialArc(Math.max(110, value > previous ? angle-reach : angle), Math.min(430, value > previous ? angle : angle+reach)) : '')
+      tail.style.opacity = reach ? '.5' : '0'
+      if (reach) timer = window.setTimeout(() => {tail.style.opacity = '0'}, 160)
+    }
+    const preview = next => { paint(next);root.style.setProperty(definition.property, `${100 - value}%`) }
+    const commit = () => { if (value !== saved) { saved = value;onChange(definition.key, (100 - value) / 100) } }
+    const position = event => {
+      const b = svg.getBoundingClientRect()
+      const x = (event.clientX-b.left)/b.width*200-100, y = (event.clientY-b.top)/b.height*200-100
+      if (Math.hypot(x,y) < 35) return value
+      let angle = (Math.atan2(y,x)*180/Math.PI-110+720)%360
+      // Keep a drag on its own side of the dead zone, avoiding 100 -> 0 jumps.
+      if (angle > 320) angle = grip?.side === 'high' ? 320 : grip?.side === 'low' ? 0 : angle < 340 ? 320 : 0
+      else if (grip) grip.side = angle > 160 ? 'high' : 'low'
+      return angle/3.2
+    }
+    const down = event => {
+      if (event.button > 0 || grip) return
+      event.preventDefault();svg.focus({preventScroll:true})
+      grip = { id: event.pointerId, side: null }
+      svg.setPointerCapture?.(event.pointerId);container.setAttribute('data-dragging','')
+      preview(position(event))
+    }
+    const move = event => { if (grip?.id === event.pointerId) preview(position(event)) }
+    const finish = (event, cancel = false) => {
+      if (!grip || (event.pointerId !== undefined && grip.id !== event.pointerId)) return
+      const id = grip.id;grip = null;container.removeAttribute('data-dragging')
+      if (svg.hasPointerCapture?.(id)) svg.releasePointerCapture(id)
+      if (cancel) preview(saved);else commit()
+    }
+    const up = event => finish(event)
+    const cancel = event => finish(event,true)
+    const key = event => {
+      if (event.key === 'Escape') { if(grip){event.preventDefault();event.stopPropagation();finish(event,true)}return }
+      const step = event.shiftKey ? 10 : 1
+      const next = {ArrowRight:value+step,ArrowUp:value+step,ArrowLeft:value-step,ArrowDown:value-step,PageUp:value+10,PageDown:value-10,Home:0,End:100}[event.key]
+      if (next === undefined) return
+      event.preventDefault();preview(next);commit()
+    }
+    const change = () => { const n = input.valueAsNumber;if(!Number.isFinite(n)){paint(saved);return}preview(n);commit() }
+    const reset = () => { preview(definition.value);commit() }
+    const paintBlur = next => {
+      blurValue = Math.min(32, Math.max(0, Math.round(next)))
+      blurInput.value = blurValue
+      blurOutput.value = `${blurValue}px`
+      materialPreview.style.setProperty(definition.blurProperty, `${blurValue}px`)
+    }
+    const previewBlur = next => {
+      paintBlur(next)
+      if (root.hasAttribute('data-dsh-prts')) root.style.setProperty(definition.blurProperty, `${blurValue}px`)
+    }
+    const commitBlur = () => { if (blurValue !== savedBlur) { savedBlur = blurValue;onChange(definition.blurKey, blurValue) } }
+    const blurChange = () => { previewBlur(blurInput.valueAsNumber);commitBlur() }
+    const blurCancel = event => { if (event.key === 'Escape') { event.preventDefault();previewBlur(savedBlur);blurInput.blur() } }
+    const resetBlur = () => { previewBlur(definition.blurDefault);commitBlur() }
+    const resetButton = container.querySelector('[data-prts-opacity-reset]')
+    const blurResetButton = blurControl.querySelector('[data-prts-blur-reset]')
+    const bindings = [[svg,'pointerdown',down],[svg,'pointermove',move],[svg,'pointerup',up],[svg,'pointercancel',cancel],[svg,'lostpointercapture',cancel],[svg,'keydown',key],[input,'change',change],[resetButton,'click',reset],[blurInput,'input',event=>previewBlur(event.target.valueAsNumber)],[blurInput,'change',blurChange],[blurInput,'keydown',blurCancel],[blurResetButton,'click',resetBlur],[window,'blur',cancel]]
+    for(const [el,type,fn] of bindings)el.addEventListener(type,fn)
+    paint(value)
+    return {
+      update(preferences, active) {
+        container.hidden = Boolean((definition.theme && preferences.conversationStyle !== definition.theme)
+          || (definition.fullBackgroundOnly && preferences.backgroundMode !== 'full'))
+        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 ? '' : '当前未启用此材质'
+      },
+      dispose() { if(grip)finish({},true);window.clearTimeout(timer);for(const [el,type,fn] of bindings)el.removeEventListener(type,fn) },
+    }
+  })
+  return {
+    update(preferences, state) {
+      const full = preferences.backgroundMode === 'full' && Boolean(state.full)
+      const split = preferences.backgroundMode === 'split'
+      section.querySelector('[data-prts-opacity-settings]').hidden = preferences.backgroundMode === 'off'
+      const conversationImage = full || (split && Boolean(state.conversation))
+      const active = [full || (split && Boolean(state.sidebar)), full,
+        conversationImage && preferences.conversationStyle === 'deck-chat',
+        conversationImage && preferences.conversationStyle === 'native']
+      controls.forEach((control,i)=>control.update(preferences,active[i]))
+    },
+    dispose() {for(const control of controls)control.dispose()},
+  }
+}

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

@@ -45,7 +45,7 @@ export function createOperationsShell({
   onSchemeToggle = () => {},
   onSchemeDragStart = () => undefined,
   onThemeDisable = () => {},
-  customEmblemStore, avatarStore,
+  customEmblemStore, avatarStore, backgroundStore,
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
   onVisualReset = () => {},
@@ -455,7 +455,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,
+      customEmblemStore, avatarStore, backgroundStore,
       onPreferenceChange,
       onPreferencePreview,
       onResetVisual: onVisualReset,

package/src/client/preferences.js

@@ -24,6 +24,17 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   glass: 'standard',
   motion: 'system',
   bootAnimation: true,
+  composerGlass: false,
+  backgroundMode: 'off',
+  backgroundDim: .45,
+  sidebarOpacity: .06,
+  railOpacity: .3,
+  bakerOpacity: .5,
+  classicUserOpacity: .5,
+  sidebarBlur: 8,
+  railBlur: 12,
+  bakerBlur: 8,
+  classicUserBlur: 8,
   cursor: 'prts',
   conversationParticleDensity: 'sparse',
   heroParticleDensity: 'light',
@@ -48,6 +59,7 @@ export const DEFAULT_PREFERENCES = Object.freeze({
   sessionFlowSpeed: SESSION_FLOW_SPEED_DEFAULT,
   conversationStyle: 'native',
   bakerGroupAvatars: true,
+  bakerLoading: false,
   conversationEmblem: true,
 })
 
@@ -85,12 +97,12 @@ export const PARTICLE_DETAIL_LEVELS = Object.freeze({
   precise: Object.freeze({ conversationParticleDensity: 'dense', heroParticleDensity: 'ultra' }),
 })
 export const PREFERENCE_GROUPS = Object.freeze({
-  background: Object.freeze(['texture']),
+  background: Object.freeze(['texture', 'backgroundMode', 'backgroundDim', 'sidebarOpacity', 'railOpacity', 'bakerOpacity', 'classicUserOpacity', 'sidebarBlur', 'railBlur', 'bakerBlur', 'classicUserBlur']),
   particles: Object.freeze(['conversationParticleDensity', 'heroParticleDensity', 'particleTraversalSpeed']),
-  material: Object.freeze(['glass']),
+  material: Object.freeze(['glass', 'composerGlass']),
   accessibility: Object.freeze(['motion', 'bootAnimation', 'cursor']),
   navigation: Object.freeze(['railDefaultHidden', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning', 'previewReplyLimit']),
-  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'conversationEmblem']),
+  conversation: Object.freeze(['sessionFlow', 'sessionGlow', 'sessionFlowPalette', 'sessionFlowColorBack', 'sessionFlowColorCore', 'sessionFlowColorFront', 'sessionFlowSpeed', 'conversationStyle', 'bakerGroupAvatars', 'bakerLoading', 'conversationEmblem']),
 })
 
 const TEXTURES = new Set(['off', 'restrained', 'full'])
@@ -134,6 +146,12 @@ function colorOr(value, fallback) {
   return typeof value === 'string' && /^#[\da-f]{6}$/i.test(value) ? value.toLowerCase() : fallback
 }
 
+function materialBlurOr(value, fallback) {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(32, Math.max(0, Math.round(value)))
+    : fallback
+}
+
 function particleTraversalSpeedOr(value, fallback) {
   const numeric = Number(value)
   if (!Number.isFinite(numeric)) return fallback
@@ -189,6 +207,18 @@ export function normalizePreferences(value) {
     texture: enumOr(input.texture, TEXTURES, DEFAULT_PREFERENCES.texture),
     glass: normalizeGlass(input),
     motion: input.motion === 'full' ? 'system' : enumOr(input.motion, MOTIONS, DEFAULT_PREFERENCES.motion),
+    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,
+    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),
+    railBlur: materialBlurOr(input.railBlur, DEFAULT_PREFERENCES.railBlur),
+    bakerBlur: materialBlurOr(input.bakerBlur, DEFAULT_PREFERENCES.bakerBlur),
+    classicUserBlur: materialBlurOr(input.classicUserBlur, DEFAULT_PREFERENCES.classicUserBlur),
+    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),
     cursor: input.cursor === 'system' ? 'system' : DEFAULT_PREFERENCES.cursor,
     conversationParticleDensity: enumOr(legacyDensities.conversation, PARTICLE_DENSITIES, particlePreset.conversationParticleDensity),

package/src/client/settings-page.js

@@ -1,8 +1,8 @@
 export function createSettingsPage(React, meta = {}) {
   const h = React.createElement
 
-  return function PrtsPluginSettingsPage({ useStore, updatePreference }) {
-    const { preferences } = useStore(state => ({ preferences: state.preferences }))
+  return function PrtsPluginSettingsPage({ useStore, updatePreference, retryPersistence }) {
+    const { preferences, persistence } = useStore(state => ({ preferences: state.preferences, persistence: state.status?.settingsPersistence }))
     const safeMode = Boolean(meta.safeMode)
     const enabled = Boolean(preferences.enabled) && !safeMode
     const bootAnimation = preferences.bootAnimation !== false
@@ -40,6 +40,11 @@ export function createSettingsPage(React, meta = {}) {
     safeMode && h('p', { className: 'prts-plugin-settings__safe', role: 'status' },
       '安全模式已暂停主题。移除地址中的 ?prts-safe=1 后即可恢复。',
     ),
+    persistence?.phase === 'error' && h('div', { role: 'alert' },
+      h('p', null, '设置未保存到 DSH。请检查连接或持久化支持；重试会重新提交本次修改。'),
+      h('button', { type: 'button', onClick: retryPersistence }, '重试保存'),
+    ),
+    persistence?.phase === 'saving' && h('p', { role: 'status' }, '正在保存…'),
     h('div', { className: 'prts-plugin-settings__list' },
       settingRow({
         key: 'enabled',

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

@@ -14,6 +14,7 @@ const ROOT_ATTRIBUTES = [
   'data-prts-session-flow-palette',
   'data-prts-session-flow-speed',
   'data-prts-conversation-style',
+  'data-prts-background-mode',
 ]
 const SESSION_FLOW_COLOR_PROPERTIES = {
   '--prts-session-flow-back': 'sessionFlowColorBack',
@@ -112,6 +113,12 @@ export function createThemeController({ document, window, cssText, service, curs
   }
 
   function clearThemeState() {
+    root.removeAttribute('data-prts-baker-loading')
+    root.style.removeProperty('--prts-background-shade')
+    for (const name of ['sidebar', 'rail', 'baker']) root.style.removeProperty(`--prts-${name}-opacity`)
+    root.style.removeProperty('--prts-classic-user-opacity')
+    for (const name of ['sidebar', 'rail', 'baker']) root.style.removeProperty(`--prts-${name}-blur`)
+    root.style.removeProperty('--prts-classic-user-blur')
     for (const attribute of ROOT_ATTRIBUTES) root.removeAttribute(attribute)
     for (const property of Object.keys(SESSION_FLOW_COLOR_PROPERTIES)) root.style.removeProperty(property)
     clearTransitionState()
@@ -734,6 +741,13 @@ export function createThemeController({ document, window, cssText, service, curs
       root.dataset.prtsSessionFlowSpeed = String(preferences.sessionFlowSpeed)
       for (const [property, key] of Object.entries(SESSION_FLOW_COLOR_PROPERTIES)) root.style.setProperty(property, preferences[key])
       root.dataset.prtsConversationStyle = preferences.conversationStyle
+      root.toggleAttribute('data-prts-baker-loading', preferences.bakerLoading === true)
+      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-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-classic-user-blur', `${preferences.classicUserBlur}px`)
       refresh()
     },
     sync,

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

@@ -1,3 +1,4 @@
+import { backgroundMarkup, mountBackgroundSettings } from './custom-background.js'
 import { avatarMarkup, mountAvatarSettings } from './custom-avatar.js'
 import { customEmblemMarkup, mountCustomEmblemEditor } from './custom-emblem.js'
 import { PARTICLE_TRAVERSAL_SPEED_DEFAULT, PARTICLE_TRAVERSAL_SPEED_MAX, PARTICLE_TRAVERSAL_SPEED_MIN, PARTICLE_TRAVERSAL_SPEED_STEP, SESSION_FLOW_SPEED_DEFAULT, SESSION_FLOW_SPEED_MAX, SESSION_FLOW_SPEED_MIN, SESSION_FLOW_SPEED_STEP, resolveParticleDetail } from './preferences.js'
@@ -37,7 +38,11 @@ function previewSetting(key, label, description) {
 }
 
 function settingButtons(key, label, options) {
-  const note = key === 'motion'
+  const note = key === 'composerGlass'
+      ? '<small data-prts-setting-note>增强输入框的背景模糊与轻微折射，关闭时使用原有材质</small>'
+      : key === 'bakerLoading'
+      ? '<small data-prts-setting-note>每轮正文生成时显示三点动画，完成后显示全文；中断时保留已收到的内容</small>'
+      : key === 'motion'
       ? '<small data-prts-setting-note>关闭后减少装饰动效，保留运行状态等必要反馈</small><small data-prts-setting-note data-prts-effective-motion hidden>系统当前要求减少动态</small>'
       : key === 'railDefaultHidden'
         ? '<small data-prts-setting-note>在任意窗口宽度下默认收起 P.R.T.S. 导航，可从左侧按钮临时展开</small>'
@@ -54,7 +59,7 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
-  if (['motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', 'previewWarning', 'previewDone', 'previewDoubleClick', 'previewFollowOngoing', 'previewFollowWarning'].includes(key)) return `<div data-prts-setting-row="${key}">
+  if (['composerGlass', 'bakerLoading', 'motion', 'cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow', 'bakerGroupAvatars', 'conversationEmblem', 'sessionPreview', 'previewOngoing', '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>`
@@ -116,7 +121,8 @@ export function themeSettingsMarkup() {
         <div data-prts-settings-body>
         <div data-prts-settings-sidebar>
         <nav data-prts-settings-nav role="tablist" aria-label="设置分区">
-          <button type="button" data-prts-settings-jump="appearance" role="tab" id="prts-tab-appearance" aria-controls="prts-page-appearance" aria-selected="true" tabindex="0">会话外观</button>
+          <button type="button" data-prts-settings-jump="appearance" role="tab" id="prts-tab-appearance" aria-controls="prts-page-appearance" aria-selected="true" tabindex="0">会话主题</button>
+          <button type="button" data-prts-settings-jump="background" role="tab" id="prts-tab-background" aria-controls="prts-page-background" aria-selected="false" tabindex="-1">会话背景</button>
           <button type="button" data-prts-settings-jump="interaction" role="tab" id="prts-tab-interaction" aria-controls="prts-page-interaction" aria-selected="false" tabindex="-1">交互</button>
           <button type="button" data-prts-settings-jump="flow" role="tab" id="prts-tab-flow" aria-controls="prts-page-flow" aria-selected="false" tabindex="-1">会话流线</button>
           <button type="button" data-prts-settings-jump="particles" role="tab" id="prts-tab-particles" aria-controls="prts-page-particles" aria-selected="false" tabindex="-1">粒子徽记</button>
@@ -124,7 +130,7 @@ export function themeSettingsMarkup() {
         </nav>
           <footer data-prts-settings-actions aria-label="全局主题设置操作">
             <div data-prts-persistence-error hidden role="alert">
-              <span><strong>仅本次会话生效</strong><small>无法写入本地设置，当前视觉效果仍会保留。</small></span>
+              <span><strong>设置未保存</strong><small>未能保存到 DSH，可能存在连接中断、配置冲突或当前访问不支持持久保存。重试将重新提交本次修改。</small></span>
               <button type="button" data-prts-retry-save>重试保存</button>
             </div>
             <div data-prts-reset-zone>
@@ -148,9 +154,14 @@ export function themeSettingsMarkup() {
             </div>
             <div data-prts-classic-options>${settingButtons('conversationEmblem', '正文徽记', [])}</div>
             ${avatarMarkup()}
-            <div data-prts-baker-options>${settingButtons('bakerGroupAvatars', '合并过程回复头像', [])}</div>
+            <div data-prts-baker-options>${settingButtons('bakerGroupAvatars', '合并过程回复头像', [])}${settingButtons('bakerLoading', '回复完成前显示加载动画', [])}</div>
           </section>
           </section>
+          <section data-prts-settings-section="background" role="tabpanel" id="prts-page-background" aria-labelledby="prts-tab-background" tabindex="0" hidden>
+            ${backgroundMarkup()}
+            <div data-prts-composer-glass-setting>${settingButtons('composerGlass', '输入框增强毛玻璃', [])}</div>
+            <small data-prts-composer-glass-required hidden>自定义背景下，输入框增强毛玻璃始终开启。</small>
+          </section>
           <section data-prts-settings-common data-prts-settings-section="interaction" role="tabpanel" id="prts-page-interaction" aria-labelledby="prts-tab-interaction" tabindex="0" hidden>
             <div data-prts-settings-common-grid>
               ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
@@ -222,7 +233,7 @@ export function createThemeSettingsOverlay({
   trigger,
   panel,
   backdrop,
-  customEmblemStore, avatarStore,
+  customEmblemStore, avatarStore, backgroundStore,
   onOpen = () => {},
   onPreferenceChange = () => {},
   onPreferencePreview = () => {},
@@ -230,6 +241,7 @@ export function createThemeSettingsOverlay({
   onRetrySave = () => {},
 }) {
   const window = document?.defaultView
+  const backgroundEditor = mountBackgroundSettings({panel,window,store:backgroundStore,onChange:onPreferenceChange})
   const avatarEditor = mountAvatarSettings({panel,window,store:avatarStore})
   const customEditor = mountCustomEmblemEditor({ panel, window, store: customEmblemStore })
   const transparencyMedia = window?.matchMedia?.('(prefers-reduced-transparency: reduce)')
@@ -474,8 +486,8 @@ export function createThemeSettingsOverlay({
     if (phase === 'saved' && revision === renderedPersistenceRevision) return
     if (savedTimer !== undefined) window?.clearTimeout?.(savedTimer)
     savedTimer = undefined
-    status.hidden = phase !== 'saved'
-    status.textContent = phase === 'saved' ? '已保存' : ''
+    status.hidden = phase !== 'saved' && phase !== 'saving'
+    status.textContent = phase === 'saved' ? '已保存' : phase === 'saving' ? '正在保存…' : ''
     if (phase === 'saved') {
       renderedPersistenceRevision = revision
       savedTimer = window?.setTimeout?.(() => { status.hidden = true; savedTimer = undefined }, reducedMotion() ? 500 : 1200)
@@ -707,6 +719,10 @@ export function createThemeSettingsOverlay({
       panel.querySelector('[data-prts-classic-options]').hidden = preferences?.conversationStyle === 'deck-chat'
       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-composer-glass-setting]').hidden = customBackground
+      panel.querySelector('[data-prts-composer-glass-required]').hidden = !customBackground
+      backgroundEditor.update(preferences)
       currentPreferences = preferences
       currentStatus = status
       currentPersistence = persistenceState ?? { phase: 'idle', revision: 0 }
@@ -723,6 +739,7 @@ export function createThemeSettingsOverlay({
     dispose() {
       customEditor.dispose()
       avatarEditor.dispose()
+      backgroundEditor.dispose()
       isOpen = false
       hidePanel()
       if (savedTimer !== undefined) window?.clearTimeout?.(savedTimer)

package/src/index.js

@@ -1,3 +1,6 @@
+import { createBackgroundService, registerBackgroundApi } from './server/backgrounds.js'
+import Schema from '@deepseek-ai/schemastery'
+import { DEFAULT_PREFERENCES } from './client/preferences.js'
 import { createAvatarService, registerAvatarApi } from './server/avatars.js'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
@@ -9,11 +12,22 @@ export const PACKAGE_ID = '@ash-qw/dsh-theme-prts'
 export const THEME_PLUGIN_ID = 'dsh-theme-prts'
 export const inject = ['tools', 'attachments', 'connection', 'webServer']
 
+export const Config = Schema.object(Object.fromEntries([
+  ...Object.entries(DEFAULT_PREFERENCES).map(([key, value]) => [key,
+    (typeof value === 'boolean' ? Schema.boolean() : typeof value === 'number' ? Schema.number() : Schema.string()).default(value).volatile(),
+  ]),
+  ['preferencesInitialized', Schema.boolean().default(false).volatile()],
+]))
+
 export async function apply(ctx) {
+  ctx.inject(['settings'], settingsCtx => {
+    settingsCtx.effect(() => settingsCtx.settings.configure({ auto: false }, ctx.fiber))
+  })
   const directory=join(process.env.DSH_HOME?.trim() || join(homedir(),'.dsh'),'plugins','dsh-theme-prts','emblems')
   const service=await createEmblemService(directory)
+  const backgrounds=await createBackgroundService(join(directory,'..','backgrounds'))
   const avatars=await createAvatarService(join(directory,'..','avatars'))
   const disposers=[...emblemTools(service,ctx.attachments),...avatarTools(avatars,ctx.attachments)].map(tool=>ctx.tools.register(tool))
-  disposers.push(registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars))
-  ctx.effect(()=>async()=>{for(const dispose of disposers.reverse())dispose();await service.dispose()})
+  disposers.push(registerEmblemApi(ctx,service),registerAvatarApi(ctx,avatars),registerBackgroundApi(ctx,backgrounds))
+  ctx.effect(()=>async()=>{for(const dispose of disposers.reverse())dispose();await service.dispose();await backgrounds.dispose()})
 }

package/src/server/backgrounds.js

@@ -0,0 +1,97 @@
+import { mkdir, readFile, writeFile, rename, rm } from 'node:fs/promises'
+import { join } from 'node:path'
+import { randomUUID } from 'node:crypto'
+import sharp from 'sharp'
+import { body, json, isBase64 } from './api.js'
+import { fault } from './emblems.js'
+
+export const BACKGROUND_API = '/prts-theme-api/backgrounds'
+const BACKGROUND_SLOTS = ['full', 'sidebar', 'conversation']
+export async function createBackgroundService(directory) {
+  await mkdir(directory, { recursive: true, mode: 0o700 })
+  const configurationPath = join(directory, 'configuration.json')
+  let state = { revision: 0, full: null, sidebar: null, conversation: null }
+  try { state = JSON.parse(await readFile(configurationPath, 'utf8')) } catch (error) { if (error.code !== 'ENOENT') throw error }
+  let queue = Promise.resolve()
+  const listeners = new Set()
+  const snapshot = () => structuredClone(state)
+  return {
+    snapshot,
+    subscribe(fn) { listeners.add(fn); return () => listeners.delete(fn) },
+    async image(id) {
+      if (!BACKGROUND_SLOTS.some(slot => state[slot]?.id === id)) throw fault(404, '背景不存在')
+      return readFile(join(directory, id + '.webp'))
+    },
+    save(data) {
+      const task = queue.then(async () => {
+        if (!BACKGROUND_SLOTS.includes(data?.slot)) throw fault(400, '背景区域无效')
+        if (data.revision !== state.revision) throw fault(409, '背景已在其他页面更新，请重新操作')
+        let entry = null, output
+        if (data.image !== null) {
+          if (!isBase64(data.image) || data.image.length > 14 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
+          const bytes = Buffer.from(data.image, 'base64')
+          if (!bytes.length || bytes.length > 10 * 1024 * 1024) throw fault(400, '请上传不超过 10 MB 的图片')
+          try {
+            const input = sharp(bytes, { limitInputPixels: 40000000, animated: false })
+            const metadata = await input.metadata()
+            if (!['png', 'jpeg', 'webp', 'avif'].includes(metadata.format)) throw Error('format')
+            const result = await input.rotate().resize({ width: 3840, height: 2160, fit: 'inside', withoutEnlargement: true }).webp({ quality: 86 }).toBuffer({ resolveWithObject: true })
+            output = result.data
+            entry = { id: randomUUID(), width: result.info.width, height: result.info.height }
+          } catch { throw fault(400, '无法读取图片，请使用 PNG、JPEG、WebP 或 AVIF（最多 4000 万像素）') }
+        }
+        const next = { ...state, revision: state.revision + 1, [data.slot]: entry }
+        const temporary = configurationPath + '.' + randomUUID() + '.tmp'
+        try {
+          if (entry) await writeFile(join(directory, entry.id + '.webp'), output, { mode: 0o600 })
+          await writeFile(temporary, JSON.stringify(next), { mode: 0o600 })
+          await rename(temporary, configurationPath)
+        } catch (error) {
+          if (entry) await rm(join(directory, entry.id + '.webp'), { force: true }).catch(() => {})
+          throw error
+        } finally { await rm(temporary, { force: true }).catch(() => {}) }
+        const previous = state[data.slot]
+        state = next
+        if (previous) await rm(join(directory, previous.id + '.webp'), { force: true }).catch(() => {})
+        for (const listener of listeners) { try { listener(state.revision) } catch {} }
+        return snapshot()
+      })
+      queue = task.catch(() => {})
+      return task
+    },
+    async dispose() { listeners.clear(); await queue },
+  }
+}
+
+export function registerBackgroundApi(ctx, service) {
+  const connection = ctx.connection
+  let disposed = false
+  const streams = new Set()
+  const unregister = ctx.webServer.register({ kind: 'prefix', path: BACKGROUND_API, handler: async (req, res) => {
+    try {
+      if (disposed) throw fault(503, '主题服务正在重新加载')
+      if ('rejection' in connection.admit(req)) throw fault(401, '请先登录 DSH')
+      const path = new URL(req.url, 'http://localhost').pathname.slice(BACKGROUND_API.length)
+      if (req.method === 'GET' && path === '/events') {
+        res.writeHead(200, { 'content-type': 'text/event-stream', 'cache-control': 'no-cache', 'x-accel-buffering': 'no' })
+        streams.add(res)
+        const send = revision => res.write('data: ' + JSON.stringify({ revision }) + '\n\n')
+        const unsubscribe = service.subscribe(send)
+        send(service.snapshot().revision)
+        const timer = setInterval(() => res.write(': heartbeat\n\n'), 25000)
+        res.on('close', () => { clearInterval(timer); unsubscribe(); streams.delete(res) })
+        return
+      }
+      if (req.method === 'GET' && /^\/image\/[a-f0-9-]{36}$/.test(path)) {
+        const bytes = await service.image(path.slice(7))
+        res.writeHead(200, { 'content-type': 'image/webp', 'cache-control': 'private, max-age=31536000, immutable', 'x-content-type-options': 'nosniff' }); res.end(bytes); return
+      }
+      if (path !== '/configuration') throw fault(404, '接口不存在')
+      if (req.method === 'GET') { json(res, 200, service.snapshot()); return }
+      if (req.method !== 'POST') throw fault(405, '请求方法不支持')
+      if (req.headers['x-prts-request'] !== '1') throw fault(403, '缺少请求标识')
+      json(res, 200, await service.save(await body(req)))
+    } catch (error) { if (!res.headersSent) json(res, error.status || 500, { error: error.message }); else res.end() }
+  } })
+  return () => { disposed = true; unregister(); for (const stream of streams) stream.end(); streams.clear() }
+}

package/src/styles/cursor.css

@@ -16,10 +16,12 @@
   html[data-dsh-prts][data-prts-cursor="prts"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]) {
     cursor: var(--prts-text-cursor), text;
   }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-opacity-dial] svg,
   html[data-dsh-prts][data-prts-cursor="prts"] [data-emblem-key],
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled {
     cursor: url("__PRTS_GRAB__") 22 19, grab;
   }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-opacity-control][data-dragging] svg,
   html[data-dsh-prts][data-prts-cursor="prts"] :is(.dsh-partner-pendant-hit, .dsh-partner-pendant-anchor, [data-prts-emblem-reorder]):enabled:active {
     cursor: var(--prts-sort-cursor);
   }