dsh-long-plugins 1.3.10 → 2.1.0

package/README.md

@@ -124,6 +124,26 @@ MIT
 
 ## Changelog / 更新记录
 
+### v2.1.0
+- 增强：毛玻璃界面（玻璃拟态）进一步打磨。
+- 主题感知磨砂：磨砂卡片颜色跟随系统深色/浅色主题自动反转（浅色=白磨砂深字 / 深色=深磨砂浅字）。
+- 会话区内容反底色全透明化：去掉代码块/提示/气泡等反底色小块，统一融入磨砂卡片。
+- 会话区「启用玻璃」开关：可单独禁用会话区磨砂（还原原生）。
+- 会话区/输入区各自独立「罩色 + 罩强度 + 透明度」调节。
+- 新增「背景图罩」：背景图上叠一层半透明罩色，深度可调。
+- 手机端/窄屏(≤768px)自动禁用毛玻璃，还原 DSH 原生。
+- 输入卡片/底部白色层透明化，更透背景。
+- 修复：输入框下拉/悬浮菜单（`/` 命令、`@` 提及）背景透明，改为不透明随主题色。
+- 修复：玻璃界面自定义背景图上传超大文件报 `Unexpected token '<'` 错误——上传上限提升到 4MiB。
+
+### v2.0.0
+- 新增：毛玻璃界面（玻璃拟态）。为 DSH 网页叠加自定义毛玻璃效果，将界面打磨成"玻璃"质感。
+- **自定义背景图**：上传一张背景图铺满整个页面（含左边栏、顶部、会话区），实现桌面壁纸式的背景；左边栏 / 顶部半透明透出背景图，界面更通透。
+- **分区独立磨砂与罩色**：会话区、输入区各自独立设置「罩色 + 罩强度」，互不影响，实现"玻璃卡片"的分区质感；会话窗口磨砂玻璃悬浮卡片效果。
+- **磨砂模糊**：全局磨砂模糊强度可调（0–80px），文字清晰可读。
+- **跟随系统主题**：界面文字/内容颜色跟随系统深色/浅色主题，不强制改色，保证任意主题下可读。
+- **设置面板「毛玻璃界面」**：总开关、背景图上传、磨砂模糊、会话区/输入区各自的罩色与罩强度，实时保存生效。
+
 ### v1.3.10
 - 新增 `.xlsx` 浏览器端预览：用 SheetJS 解析并显示为表格（行列标头、合并单元格、多工作表切换），预览支持 − / ＋ / 适合宽度缩放，默认整表适配；浏览器端处理，不占用 NAS 本地资源。
 - 工作区浏览、工作区文件、上传文件列表中的 `.xlsx` 均接入该预览页。

package/client/client.js

@@ -3034,6 +3034,349 @@ window.__ModuleLoader__.load({
       },
     }
 
+    // ===== dsh-long-plugins: 毛玻璃界面 (glass UI) =====
+    // 简洁方案：共用一张背景图铺满 body；左边栏 + 顶部各加一层半透明"罩"；
+    // 会话窗口(centerCol)做成磨砂玻璃悬浮卡片(backdrop-filter blur + 半透明背景)。
+    const GLASS_CSS = `
+      html[data-dsh-glass="on"] body { position: relative; }
+      /* 方案A：背景图铺满整页(含左栏/顶栏/底部，全透明透出)；仅会话滚动区做磨砂玻璃卡片。 */
+      /* 左栏内部容器(或其它用此变量的)也透明，让背景图透到左栏。只覆盖左栏专用变量，避免影响设置面板。 */
+      html[data-dsh-glass="on"] body {
+        --dsw-specific-sidebar-fill: transparent !important;
+      }
+      /* 左栏 / 顶栏 / 底部：完全透明，让 frame 背景图连成一张透出（不做罩/不做磨砂） */
+      html[data-dsh-glass="on"] #root [class*="sidebarCol"],
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_header"],
+      html[data-dsh-glass="on"] #root [class*="centerCol"],
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_root"] {
+        background-color: transparent !important;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+      /* 左栏内部根 / 底部容器也用透明（这些是 DSH 当前版本哈希类名；背景图要透到左栏与底部） */
+      html[data-dsh-glass="on"] #root [class*="hHd-Xa_root"],
+      html[data-dsh-glass="on"] #root [class*="FJxK0a_root"] {
+        background-color: transparent !important;
+      }
+      /* 会话滚动区：磨砂玻璃悬浮卡片（居中收窄，不占满宽度，四周透背景图） */
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] {
+        background: linear-gradient(var(--dsh-glass-session-white, rgba(255,255,255,0.5)), var(--dsh-glass-session-white, rgba(255,255,255,0.5))) var(--dsh-glass-session-bg, rgba(26,35,50,0.45)) !important;
+        backdrop-filter: blur(var(--dsh-glass-blur, 16px));
+        -webkit-backdrop-filter: blur(var(--dsh-glass-blur, 16px));
+        border-radius: 16px;
+        overflow: auto;
+        margin: 0 auto !important;
+        /* 柔和阴影 + 边缘渐隐，让磨砂卡片边缘过渡自然（悬浮玻璃质感） */
+        box-shadow: 0 8px 40px rgba(0,0,0,0.28), 0 2px 12px rgba(0,0,0,0.18);
+      }
+      /* 滚动条：细、半透明、圆角，且左移贴在内容区（不占卡片最右边缘），让右边缘过渡柔和 */
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"]::-webkit-scrollbar { width: 8px; }
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"]::-webkit-scrollbar-track { background: transparent; }
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 8px; }
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"]::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
+      /* 会话区禁用玻璃：scrollBody 还原为透明、无磨砂、无圆角/阴影（保持 DSH 原生会话区外观） */
+      html[data-dsh-glass="on"][data-dsh-session-glass="off"] #root [class*="wSkVaW_scrollBody"] {
+        background-color: transparent !important;
+        background-image: none !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+      }
+      /* 底部输入卡片：深色半透明磨砂（参考图：深色玻璃卡片 + 白字，与背景区分开） */
+      html[data-dsh-glass="on"] #root [class*="uV2eYG_card"] {
+        background: linear-gradient(var(--dsh-glass-input-white, rgba(255,255,255,0.3)), var(--dsh-glass-input-white, rgba(255,255,255,0.3))) var(--dsh-glass-input-bg, rgba(26,35,50,0.6)) !important;
+        backdrop-filter: blur(var(--dsh-glass-blur, 16px));
+        -webkit-backdrop-filter: blur(var(--dsh-glass-blur, 16px));
+      }
+      
+      html[data-dsh-glass="off"] #root [class*="sidebarCol"],
+      html[data-dsh-glass="off"] #root [class*="header"],
+      html[data-dsh-glass="off"] #root [class*="centerCol"],
+      html[data-dsh-glass="off"] #root [class*="wSkVaW_root"],
+      html[data-dsh-glass="off"] #root [class*="wSkVaW_scrollBody"],
+      html[data-dsh-glass="off"] #root [class*="uV2eYG_card"] { background-color: transparent !important; backdrop-filter: none; }
+      /* 用户消息气泡：浅色半透明底(随主题)，与 AI 消息(透明/磨砂)区分 */
+      html[data-dsh-glass="on"] #root [class*="ngdEzaw_bubble"]:not([class*="button"]) {
+        background-color: color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) 62%, transparent) !important;
+      }
+      /* 会话区所有内容元素背景透明化：去掉"反底色"小块衬底，统一融入磨砂卡片 */
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] *:not([class*="button"]):not([class*="bubble"]):not([class*="_menu"]) {
+        background-color: transparent !important;
+      }
+      /* 会话区内容衬底(代码块/提示/气泡/引用等)玻璃开启时透明化，融入磨砂卡片，去掉浅色小块衬底 */
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] [class*="n_block"],
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] [class*="n_bannerWrap"],
+
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] [class*="n_plain"],
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] [class*="n_copyButton"],
+      html[data-dsh-glass="on"] #root [class*="wSkVaW_scrollBody"] [class*="md-code-block"] {
+        background-color: transparent !important;
+      }
+      /* uV2eYG_add: composer 里随内容变化的白色衬底，玻璃开启时透明化 */
+      html[data-dsh-glass="on"] #root [class*="uV2eYG_add"] {
+        background-color: transparent !important;
+      }
+      /* 输入框下拉/悬浮菜单(如 / 命令、@ 提及)：背景给不透明随主题色，避免叠在会话磨砂卡上重叠看不清 */
+      html[data-dsh-glass="on"] #root [class*="_menu"][class*="_menu"][class*="_menu"][class*="_menu"] {
+        background-color: var(--dsw-specific-input-major, #e8edf3) !important;
+        background-color: color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) 97%, transparent) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+      }
+      /* 输入框旁权限/功能选择下拉(盾牌 Full access 等 Radix 风格菜单)：与 / 命令菜单同样处理 */
+      html[data-dsh-glass="on"] #root [class*="uV2eYG_card"] [class*="_root_"]:has([class*="_list_"]) {
+        background-color: var(--dsw-specific-input-major, #e8edf3) !important;
+        background-color: color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) 97%, transparent) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+      }
+      html[data-dsh-glass="on"] #root [class*="uV2eYG_card"] [class*="_list_"] {
+        background-color: var(--dsw-specific-input-major, #e8edf3) !important;
+        background-color: color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) 97%, transparent) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+      }
+      .dsh-glass-section{display:flex;flex-direction:column;gap:16px;min-width:0;padding:4px 2px 24px;color:var(--dsw-alias-label-primary)}
+      .dsh-glass-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
+      .dsh-glass-head h2{margin:0;font-size:20px;line-height:28px}
+      .dsh-glass-head p{margin:4px 0 0;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px}
+      .dsh-glass-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--dsw-alias-label-secondary);cursor:pointer;white-space:nowrap;user-select:none}
+      .dsh-glass-switch input{width:34px;height:20px;accent-color:var(--dsw-alias-state-business-primary);cursor:pointer}
+      .dsh-glass-card{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:10px;background:var(--dsw-specific-input-major)}
+      .dsh-glass-zone-title{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}
+      .dsh-glass-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
+      .dsh-glass-row label{font-size:13px;color:var(--dsw-alias-label-primary);flex:none}
+      .dsh-glass-range{flex:1;min-width:160px;max-width:320px;accent-color:var(--dsw-alias-state-business-primary)}
+      .dsh-glass-val{flex:none;font-size:12px;color:var(--dsw-alias-label-secondary);min-width:56px;text-align:right;font-variant-numeric:tabular-nums}
+      .dsh-glass-swatches{display:flex;gap:8px;flex-wrap:wrap}
+      .dsh-glass-swatch{width:26px;height:26px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);cursor:pointer;padding:0;transition:transform .12s}
+      .dsh-glass-swatch:hover{transform:scale(1.12)}
+      .dsh-glass-swatch.on{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}
+      .dsh-glass-colorpicker{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:transparent;cursor:pointer}
+      .dsh-glass-colorpicker input[type=color]{width:30px;height:24px;border:none;background:none;padding:0;cursor:pointer}
+      .dsh-glass-bg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+      .dsh-glass-file{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font-size:12px;cursor:pointer}
+      .dsh-glass-file input{display:none}
+      .dsh-glass-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
+      .dsh-glass-actions button{padding:7px 16px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;cursor:pointer}
+      .dsh-glass-actions .primary{background:var(--dsw-alias-state-business-primary);border-color:var(--dsw-alias-state-business-primary);color:#fff}
+      .dsh-glass-actions button:disabled{opacity:.55;cursor:not-allowed}
+      .dsh-glass-error{padding:10px 12px;border-radius:8px;background:var(--dsw-alias-interactive-bg-hover-danger);color:var(--dsw-alias-state-error-primary);font-size:12px}
+      .dsh-glass-note{margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary)}
+    `
+    const GLASS_SWATCHES = ['#0f1420', '#14161a', '#1a2530', '#26324d', '#153a3a', '#3b2a4a', '#4a1f1f', '#2d3748']
+    const glassText = (e) => (e && e.message) ? e.message : String(e)
+    function glassImageInput(value, onChange) {
+      return React.createElement('label', { className: 'dsh-glass-file' },
+        React.createElement('span', null, '上传背景图'),
+        React.createElement('input', { type: 'file', accept: 'image/png,image/jpeg,image/webp,image/gif', onChange: (e) => {
+          const f = e.target.files && e.target.files[0]
+          if (!f) return
+          const reader = new FileReader()
+          reader.onload = () => onChange(String(reader.result || ''))
+          reader.readAsDataURL(f)
+        } }),
+        value ? React.createElement('span', { style: { width: 22, height: 22, borderRadius: 4, backgroundImage: 'url(' + value + ')', backgroundSize: 'cover', display: 'inline-block' } }) : null,
+      )
+    }
+    // 会话区/输入区共用设置卡：罩色 + 罩强度
+    const GlassZoneCard = ({ title, zone, onChange, showGlassToggle }) => {
+      const z = zone || { color: '#1a2332', mask: 0.45, enabled: true }
+      const setPatch = (p) => onChange({ ...z, ...p })
+      return React.createElement('div', { className: 'dsh-glass-card' },
+        React.createElement('div', { className: 'dsh-glass-zone-title' }, title),
+        showGlassToggle ? React.createElement('div', { className: 'dsh-glass-row' },
+          React.createElement('label', { className: 'dsh-glass-switch' }, React.createElement('input', { type: 'checkbox', checked: z.enabled !== false, onChange: (e) => setPatch({ enabled: e.target.checked }) }), title + ' 启用玻璃'),
+        ) : null,
+        React.createElement('div', { className: 'dsh-glass-row' },
+          React.createElement('label', null, title + ' 罩色'),
+          React.createElement('div', { className: 'dsh-glass-swatches' },
+            GLASS_SWATCHES.map((c) => React.createElement('button', { key: c, type: 'button', className: 'dsh-glass-swatch' + ((z.color || '#1a2332') === c ? ' on' : ''), style: { background: c }, 'aria-label': '颜色 ' + c, onClick: () => setPatch({ color: c }) })),
+          ),
+          React.createElement('label', { className: 'dsh-glass-colorpicker' }, '色盘', React.createElement('input', { type: 'color', value: z.color || '#1a2332', onChange: (e) => setPatch({ color: e.target.value }) })),
+        ),
+        React.createElement('div', { className: 'dsh-glass-row' },
+          React.createElement('label', null, title + ' 罩强度'),
+          React.createElement('input', { type: 'range', className: 'dsh-glass-range', min: 0, max: 0.95, step: 0.01, value: z.mask ?? 0.45, onChange: (e) => setPatch({ mask: Number(e.target.value) }) }),
+          React.createElement('span', { className: 'dsh-glass-val' }, `${Math.round((Number(z.mask ?? 0.45)) * 100)}%`),
+        ),
+        React.createElement('div', { className: 'dsh-glass-row' },
+          React.createElement('label', null, title + ' 透明度'),
+          React.createElement('input', { type: 'range', className: 'dsh-glass-range', min: 0, max: 1, step: 0.01, value: z.opacity ?? 0.5, onChange: (e) => setPatch({ opacity: Number(e.target.value) }) }),
+          React.createElement('span', { className: 'dsh-glass-val' }, `${Math.round((Number(z.opacity ?? 0.5)) * 100)}%`),
+        ),
+      )
+    }
+    const GlassSettingsSection = () => {
+      const [state, setState] = React.useState({ loading: true, saving: false, error: '', cfg: null, bgImage: '' })
+      const load = React.useCallback(async () => {
+        setState((s) => ({ ...s, loading: true, error: '' }))
+        try {
+          const r = await fetch('/api/dsh-uploads/glass-config', { cache: 'no-store' })
+          const b = await r.json()
+          if (!r.ok) throw new Error(b.error || ('HTTP ' + r.status))
+          setState((s) => ({ ...s, loading: false, cfg: b.cfg, bgImage: b.bgImage || '' }))
+        } catch (e) { setState((s) => ({ ...s, loading: false, error: glassText(e) })) }
+      }, [])
+      React.useEffect(() => { load(); }, [load])
+      const patch = React.useCallback((p) => setState((s) => ({ ...s, cfg: { ...(s.cfg || {}), ...p } })), [])
+      const patchZone = React.useCallback((key, p) => setState((s) => ({ ...s, cfg: { ...(s.cfg || {}), [key]: p } })), [])
+      const save = React.useCallback(async () => {
+        setState((s) => ({ ...s, saving: true, error: '' }))
+        try {
+          const cfg = state.cfg || {}
+          const payload = {
+            enabled: !!cfg.enabled, blur: Number(cfg.blur) || 0,
+            bgImage: state.bgImage || cfg.bgImage || '', bgMask: Number(cfg.bgMask) || 0.28, bgColor: cfg.bgColor || '#1a2332',
+            zone: {
+              session: { enabled: cfg.session && cfg.session.enabled !== false, color: (cfg.session && cfg.session.color) || '#1a2332', mask: Number((cfg.session && cfg.session.mask)) || 0.45, opacity: Number((cfg.session && cfg.session.opacity)) || 0.5 },
+              input: { color: (cfg.input && cfg.input.color) || '#1a2332', mask: Number((cfg.input && cfg.input.mask)) || 0.6, opacity: Number((cfg.input && cfg.input.opacity)) || 0.55 },
+            },
+          }
+          const r = await fetch('/api/dsh-uploads/glass-config', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(payload) })
+          const b = await r.json()
+          if (!r.ok) throw new Error(b.error || ('HTTP ' + r.status))
+          window.__dshGlassApply && window.__dshGlassApply(payload)
+          setState((s) => ({ ...s, saving: false, cfg: { ...(s.cfg || {}), ...payload }, bgImage: payload.bgImage, error: '' }))
+        } catch (e) { setState((s) => ({ ...s, saving: false, error: glassText(e) })) }
+      }, [state])
+      const cfg = state.cfg || {}
+      if (state.loading) return React.createElement('div', { className: 'dsh-glass-section' }, '加载中…')
+      return React.createElement('div', { className: 'dsh-glass-section' },
+        React.createElement('div', { className: 'dsh-glass-head' },
+          React.createElement('div', null, React.createElement('h2', null, '毛玻璃界面'), React.createElement('p', null, '共用一张背景图铺满整页，仅消息滚动区做居中磨砂玻璃卡片，其余区域透出背景图。')),
+          React.createElement('label', { className: 'dsh-glass-switch' }, React.createElement('input', { type: 'checkbox', checked: !!cfg.enabled, onChange: (e) => patch({ enabled: e.target.checked }) }), cfg.enabled ? '已开启' : '已关闭'),
+        ),
+        state.error ? React.createElement('div', { className: 'dsh-glass-error' }, state.error) : null,
+        React.createElement('div', { className: 'dsh-glass-card' },
+          React.createElement('div', { className: 'dsh-glass-row' },
+            React.createElement('label', null, '磨砂模糊强度'),
+            React.createElement('input', { type: 'range', className: 'dsh-glass-range', min: 0, max: 80, value: cfg.blur ?? 20, onChange: (e) => patch({ blur: Number(e.target.value) }) }),
+            React.createElement('span', { className: 'dsh-glass-val' }, `${Number(cfg.blur ?? 20)} px`),
+          ),
+          React.createElement(GlassZoneCard, { title: '会话区', zone: cfg.session, onChange: (p) => patchZone('session', p), showGlassToggle: true }),
+          React.createElement(GlassZoneCard, { title: '输入区', zone: cfg.input, onChange: (p) => patchZone('input', p) }),
+          React.createElement('div', { className: 'dsh-glass-row' },
+            React.createElement('label', null, '共用背景图'),
+            React.createElement('div', { className: 'dsh-glass-bg' }, glassImageInput(state.bgImage, (v) => setState((s) => ({ ...s, bgImage: v })))),
+          ),
+          React.createElement('div', { className: 'dsh-glass-row' },
+            React.createElement('label', null, '背景图罩'),
+            React.createElement('input', { type: 'range', className: 'dsh-glass-range', min: 0, max: 0.95, step: 0.01, value: cfg.bgMask ?? 0.28, onChange: (e) => patch({ bgMask: Number(e.target.value) }) }),
+            React.createElement('span', { className: 'dsh-glass-val' }, `${Math.round((Number(cfg.bgMask ?? 0.28)) * 100)}%`),
+          ),
+          React.createElement('p', { className: 'dsh-glass-note' }, '提示：背景图铺满整页(可加背景图罩)；会话区/输入区各自使用自己的罩色、罩强度与透明度；左栏/顶部透出背景图。'),
+          React.createElement('div', { className: 'dsh-glass-actions' },
+            React.createElement('button', { type: 'button', onClick: load }, '重置'),
+            React.createElement('button', { type: 'button', className: 'primary', disabled: state.saving, onClick: save }, state.saving ? '保存中…' : '保存生效'),
+          ),
+        ),
+      )
+    }
+    const glassPlugin = {
+      inject: ['slots'],
+      apply(ctx) {
+        const hexToRgb = (hex) => { const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(String(hex || '')); return m ? `${parseInt(m[1],16)},${parseInt(m[2],16)},${parseInt(m[3],16)}` : '15,20,32' }
+        ctx.effect(() => {
+          const style = document.createElement('style')
+          style.dataset.plugin = 'dsh-long-plugins'
+          style.dataset.pluginCss = 'dsh-long-plugins/glass'
+          style.textContent = GLASS_CSS
+          document.head.appendChild(style)
+          return () => style.remove()
+        }, 'dsh-long-plugins: glass styles')
+        ctx.effect(() => {
+          const root = document.documentElement
+          
+          // 磨砂卡片与底部输入卡片对齐：宽度取输入卡片宽度，translateX 补偿使左右边界对齐输入卡。
+          const centerScroll = () => {
+            const el = document.querySelector('#root [class*="wSkVaW_scrollBody"]')
+            if (!el) return
+            const card = document.querySelector('#root [class*="uV2eYG_card"]')
+            const r = el.getBoundingClientRect()
+            const target = card ? card.getBoundingClientRect() : null
+            // 不改磨砂卡片宽度（保留默认 width:min() 原始宽度），仅水平居中到输入卡片中心。
+            const diff = (target ? (target.left + target.right) / 2 : window.innerWidth / 2) - (r.left + r.right) / 2
+            el.style.transform = 'translateX(' + Math.round(diff) + 'px)'
+          }
+          window.addEventListener('resize', centerScroll)
+          window.__dshGlassCenter = centerScroll
+          // win 风格文字：给左栏/顶栏内的可见文字元素加白色+深色描边；跳过弹窗(modal/overlay/dialog/settings/panel)内元素。
+
+          window.__dshGlassApply = (cfg) => {
+            const c = cfg || {}
+            // 手机端/窄屏(<=768px)：不开启毛玻璃，还原 DSH 原生样式（清背景图/罩变量/磨砂）。
+            if (window.innerWidth <= 768) {
+              root.setAttribute('data-dsh-glass', 'off')
+              root.setAttribute('data-dsh-session-glass', 'off')
+              root.style.setProperty('--dsh-glass-blur', '')
+              root.style.setProperty('--dsh-glass-session-bg', '')
+              root.style.setProperty('--dsh-glass-input-bg', '')
+              root.style.setProperty('--dsh-glass-bg-zone', '')
+              const b = document.body
+              b.style.backgroundImage = 'none'; b.style.backgroundSize = ''; b.style.backgroundPosition = ''; b.style.backgroundRepeat = ''
+              const fr = document.querySelector('#root > div > div') || document.querySelector('#root > div')
+              if (fr) { fr.style.backgroundColor = ''; fr.style.backgroundImage = 'none'; fr.style.backgroundSize = ''; fr.style.backgroundPosition = ''; fr.style.backgroundRepeat = '' }
+              return
+            }
+            root.setAttribute('data-dsh-glass', c.enabled ? 'on' : 'off')
+            const sessOn = !(c.zone && c.zone.session && c.zone.session.enabled === false)
+            root.setAttribute('data-dsh-session-glass', sessOn ? 'on' : 'off')
+            const blur = Number(c.blur) || 16
+            root.style.setProperty('--dsh-glass-blur', blur + 'px')
+            const zs = (c.zone && c.zone.session) || { color: '#1a2332', mask: 0.45, opacity: 0.5 }
+            const zi = (c.zone && c.zone.input) || { color: '#1a2332', mask: 0.6, opacity: 0.55 }
+            root.style.setProperty('--dsh-glass-session-bg', `rgba(${hexToRgb(zs.color)},${Math.min(0.95, Math.max(0, Number(zs.mask) || 0.45))})`)
+            root.style.setProperty('--dsh-glass-input-bg', `rgba(${hexToRgb(zi.color)},${Math.min(0.95, Math.max(0, Number(zi.mask) || 0.6))})`)
+            const sa = Math.round(Math.min(1, Math.max(0, Number(zs.opacity) || 0.5)) * 100)
+            root.style.setProperty('--dsh-glass-session-white', `color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) ${sa}%, transparent)`)
+            const ia = Math.round(Math.min(1, Math.max(0, Number(zi.opacity) === 0 ? 0 : (Number(zi.opacity) || 0.3))) * 100)
+            root.style.setProperty('--dsh-glass-input-white', `color-mix(in srgb, var(--dsw-specific-input-major, #e8edf3) ${ia}%, transparent)`)
+            // 背景图罩：整页背景图上叠一层半透明罩色
+            const bgc = c.bgColor || '#1a2332'
+            const bgm = Math.min(0.95, Math.max(0, Number(c.bgMask) || 0.28))
+            root.style.setProperty('--dsh-glass-bg-zone', `rgba(${hexToRgb(bgc)},${bgm})`)
+
+            const body = document.body
+            const frame = document.querySelector('#root > div > div') || document.querySelector('#root > div')
+            const applyBg = (el) => {
+              if (!el) return
+              if (c.enabled && c.bgImage) {
+                // 背景图 + 罩色：先叠加一层背景罩(linear-gradient)，再铺背景图，实现"背景图上有罩"。
+                const gz = root.style.getPropertyValue('--dsh-glass-bg-zone') || 'rgba(26,35,50,0.28)'
+                el.style.backgroundImage = `linear-gradient(${gz},${gz}), url('${c.bgImage}')`
+                el.style.backgroundSize = 'cover'
+                el.style.backgroundPosition = 'center'
+                el.style.backgroundRepeat = 'no-repeat'
+              } else {
+                el.style.backgroundImage = 'none'
+                el.style.backgroundSize = ''
+                el.style.backgroundPosition = ''
+                el.style.backgroundRepeat = ''
+              }
+            }
+            // body 背景色也设透明，避免 body 白色露底形成"白色遮盖层"（背景图 cover 铺底即可）。
+            if (c.enabled && c.bgImage) { body.style.backgroundColor = 'transparent' } else { body.style.backgroundColor = '' }
+            applyBg(body)
+            if (frame) { frame.style.backgroundColor = 'transparent'; applyBg(frame) }
+            centerScroll()
+          }
+          return () => {
+            window.__dshGlassApply = undefined
+            window.removeEventListener('resize', centerScroll)
+            window.__dshGlassCenter = undefined
+          }
+        }, 'dsh-long-plugins: glass applier')
+        ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'glass-ui', order: 40, label: '毛玻璃界面' }, GlassSettingsSection))
+        ctx.effect(() => {
+          fetch('/api/dsh-uploads/glass-config', { cache: 'no-store' }).then((r) => r.json()).then((b) => {
+            if (b && b.cfg) { window.__dshGlassApply && window.__dshGlassApply({ enabled: b.cfg.enabled, blur: b.cfg.blur, mask: b.cfg.mask, color: b.cfg.color, bgImage: b.bgImage }) }
+          }).catch(() => {})
+        }, 'dsh-long-plugins: glass boot')
+      },
+    }
+
     const inject = Array.from(new Set([
       ...uploadPlugin.inject,
       ...skillDocsPlugin.inject,
@@ -3041,6 +3384,7 @@ window.__ModuleLoader__.load({
       ...mobilePlugin.inject,
       ...workspaceFilesPlugin.inject,
       ...turnRulerPlugin.inject,
+      ...glassPlugin.inject,
     ]))
 
     function apply(ctx) {
@@ -3057,6 +3401,7 @@ window.__ModuleLoader__.load({
       safeApply('mobile-hamburger', (c) => mobilePlugin.apply(c))
       safeApply('workspace-files', (c) => workspaceFilesPlugin.apply(c))
       safeApply('turn-ruler', (c) => turnRulerPlugin.apply(c))
+      safeApply('glass', (c) => glassPlugin.apply(c))
     }
 
     exports.apply = apply

package/dsh.plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-long-plugins",
   "description": "Merged DSH web plugins: upload manager (drag-and-drop attach any file to the message), workspace output files, skill docs, account balance, Markdown-to-Word (md2docx), and polished file preview (Word & PowerPoint real preview with zoom/pan, rendered Markdown), plus an auto-repair install for DSH core patches (reverse-proxy WebSocket heartbeat, upgrade relink). | 一个插件整合 DSH Web 的常用增强：上传管理（拖放上传：拖任意文件到会话框直接附加）、工作区「输出文件」面板、技能文档浏览、账户余额显示、Markdown 转 Word（md2docx）、Word/PowerPoint 真实预览（可缩放、翻页）；并自带修复安装，自动重连 DSH 核心补丁（反代 WebSocket 心跳、升级重连）。",
-  "version": "1.3.9",
+  "version": "2.1.0",
   "entry": {
     "name": "dsh-long-plugins",
     "inject": [

package/lib/index.js

@@ -190,20 +190,24 @@ export function isTrustedUploadRequest(req, trustedHosts = []) {
 }
 
 /** Read a JSON request body (bounded; 1 MiB to fit large edited documents). */
-function readJsonBody(request) {
+function readJsonBody(request, maxBytes = 1024 * 1024) {
   return new Promise((resolvePromise, rejectPromise) => {
     let size = 0;
+    let tooBig = false;
     const chunks = [];
     request.on("data", (chunk) => {
+      if (tooBig) return;
       size += chunk.length;
-      if (size > 1024 * 1024) {
-        rejectPromise(new Error("body too large"));
-        request.destroy();
+      if (size > maxBytes) {
+        tooBig = true;
+        chunks.length = 0;
+        rejectPromise(new HttpError(413, "body too large"));
         return;
       }
       chunks.push(chunk);
     });
     request.on("end", () => {
+      if (tooBig) return;
       try {
         resolvePromise(JSON.parse(Buffer.concat(chunks).toString("utf8")));
       } catch (error) {
@@ -666,6 +670,36 @@ async function officePreviewHtml(name, buffer) {
   return null;
 }
 
+/** 仅保留毛玻璃配置允许字段并 clamp，避免写入任意/超大内容。背景图只收 data:image/*;base64 且限 2MB。 */
+function sanitizeGlass(input) {
+  const out = {};
+  if ("enabled" in input) out.enabled = input.enabled === true;
+  if ("blur" in input) { const n = Number(input.blur); out.blur = Number.isFinite(n) ? Math.max(0, Math.min(80, Math.round(n))) : undefined; }
+  if ("mask" in input) { const n = Number(input.mask); out.mask = Number.isFinite(n) ? Math.max(0, Math.min(0.95, n)) : undefined; }
+  if ("color" in input) out.color = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(String(input.color)) ? String(input.color) : undefined;
+  const sanitizeUri = (v) => { const s = String(v ?? ""); return (/^data:image\/(png|jpe?g|webp|gif);base64,/.test(s) && s.length <= 2 * 1024 * 1024 + 256) ? s : undefined; };
+  if ("bgImage" in input) out.bgImage = sanitizeUri(input.bgImage);
+  if ("bgColor" in input) out.bgColor = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(String(input.bgColor)) ? String(input.bgColor) : undefined;
+  if ("bgMask" in input) { const n = Number(input.bgMask); out.bgMask = Number.isFinite(n) ? Math.max(0, Math.min(0.95, n)) : undefined; }
+  // 会话区/输入区各自独立罩色+罩强度
+  if (input.zone && typeof input.zone === "object") {
+    const zo = {};
+    for (const key of ["session", "input"]) {
+      const z = input.zone[key];
+      if (z && typeof z === "object") {
+        const o = {};
+        if ("enabled" in z) o.enabled = z.enabled === true;
+        if ("color" in z) o.color = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(String(z.color)) ? String(z.color) : undefined;
+        if ("mask" in z) { const n = Number(z.mask); o.mask = Number.isFinite(n) ? Math.max(0, Math.min(0.95, n)) : undefined; }
+        if ("opacity" in z) { const n = Number(z.opacity); o.opacity = Number.isFinite(n) ? Math.max(0, Math.min(1, n)) : undefined; }
+        zo[key] = Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined));
+      }
+    }
+    if (Object.keys(zo).length) out.zone = zo;
+  }
+  return Object.fromEntries(Object.entries(out).filter(([, v]) => v !== undefined));
+}
+
 export function createHandlers(options = {}) {
   const root = resolve(options.root || resolveUploadRoot());
   const maxFileBytes = positiveInteger(options.maxFileBytes, resolveMaxFileBytes());
@@ -1554,7 +1588,53 @@ window.addEventListener('resize',function(){ try{ if(fitMode) zoomFit(); else ap
     }
   };
 
-  return { root, maxFileBytes, totalMaxBytes, api, download, preview, workspaceList, workspaceFile, workspacePreview, workspaceBrowse, workspaceDelete, workspaceRename, workspaceSave, docxPreviewPage, docxPreviewAsset, pptxPreviewPage, xlsxPreviewPage, xlsxPreviewAsset };
+  // ---- 毛玻璃界面 (glass UI) 配置：读写 ~/.dsh-long-plugins/glass.json ----
+  // 背景图以 data-URI 存进配置，随配置持久化。enabled=总开关；blur=磨砂模糊；mask=整页罩强度；
+  // color=叠加/罩色；bgImage=共用背景图。顶栏/左栏的"罩"与整页共用 mask+color（不再单独存，简化）。
+  const GLASS_DEFAULTS = {
+    enabled: false, blur: 20, bgImage: "", bgColor: "#1a2332", bgMask: 0.28,
+    zone: { session: { color: "#1a2332", mask: 0.45, opacity: 0.5 }, input: { color: "#1a2332", mask: 0.6, opacity: 0.55 } },
+  };
+  const glassDir = resolve(homedir(), ".dsh-long-plugins");
+  const glassFile = join(glassDir, "glass.json");
+  async function readGlassJSON() {
+    try { const raw = JSON.parse(await readFile(glassFile, "utf8")); return { ...GLASS_DEFAULTS, ...(raw && typeof raw === "object" ? raw : {}) }; }
+    catch { return { ...GLASS_DEFAULTS }; }
+  }
+  const glassConfig = async (req, res) => {
+    try {
+      requireTrusted(req);
+      if (req.method === "GET" || req.method === "HEAD") {
+        const cfg = await readGlassJSON();
+        sendJson(res, 200, {
+          found: true,
+          cfg: {
+            enabled: cfg.enabled, blur: cfg.blur,
+            session: cfg.zone?.session || { enabled: true, color: "#1a2332", mask: 0.45, opacity: 0.5 },
+            input: cfg.zone?.input || { color: "#1a2332", mask: 0.6, opacity: 0.55 },
+            bgColor: cfg.bgColor || "#1a2332", bgMask: cfg.bgMask ?? 0.28,
+            bgImage: cfg.bgImage ? { present: true, bytes: Math.round((cfg.bgImage.length * 3) / 4) } : { present: false },
+          },
+          bgImage: cfg.bgImage,
+        });
+        return;
+      }
+      if (req.method === "POST") {
+        const body = await readJsonBody(req, 4 * 1024 * 1024);
+        const current = await readGlassJSON();
+        const next = { ...current, ...sanitizeGlass(typeof body === "object" && body !== null ? body : {}) };
+        await mkdir(glassDir, { recursive: true, mode: 0o700 });
+        await writeFile(glassFile, JSON.stringify(next, null, 2), "utf8");
+        sendJson(res, 200, { ok: true, saved: true });
+        return;
+      }
+      methodNotAllowed(res, ["GET", "HEAD", "POST"]);
+    } catch (error) {
+      sendError(res, error, onError);
+    }
+  };
+
+  return { root, maxFileBytes, totalMaxBytes, api, download, preview, workspaceList, workspaceFile, workspacePreview, workspaceBrowse, workspaceDelete, workspaceRename, workspaceSave, docxPreviewPage, docxPreviewAsset, pptxPreviewPage, xlsxPreviewPage, xlsxPreviewAsset, glassConfig };
 }
 
 /** 人类可读文件大小。 */
@@ -2453,6 +2533,12 @@ export async function apply(ctx, config = {}) {
     handler: handlers.xlsxPreviewAsset,
   }), "dsh-long-plugins: xlsx-preview vendor assets");
 
+  ctx.effect(() => ctx.webServer.register({
+    kind: "exact",
+    path: "/api/dsh-uploads/glass-config",
+    handler: handlers.glassConfig,
+  }), "dsh-long-plugins: glass-ui config route");
+
   ctx.effect(() => ctx.webServer.register({
     kind: "exact",
     path: "/api/dsh-uploads/workspace-browse",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-long-plugins",
-  "version": "1.3.10",
+  "version": "2.1.0",
   "description": "Merged DSH web plugins: upload manager (drag-and-drop attach any file to the message), workspace output files, skill docs, account balance, Markdown-to-Word (md2docx), and polished file preview (Word & PowerPoint real preview with zoom/pan, rendered Markdown), plus an auto-repair install for DSH core patches (reverse-proxy WebSocket heartbeat, upgrade relink). | 一个插件整合 DSH Web 的常用增强：上传管理（拖放上传：拖任意文件到会话框直接附加）、工作区「输出文件」面板、技能文档浏览、账户余额显示、Markdown 转 Word（md2docx）、Word/PowerPoint 真实预览（可缩放、翻页）；并自带修复安装，自动重连 DSH 核心补丁（反代 WebSocket 心跳、升级重连）。",
   "type": "module",
   "license": "MIT",