npm - dsh-remote-plugin - Versions diffs - 0.5.3 → 0.5.5 - Mend

dsh-remote-plugin 0.5.3 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/apk/dsh-remote.apk CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "dsh-remote-plugin",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "DSH Remote 官方 bundle 插件：DSH 左侧原生边栏入口 + 右侧抽屉内嵌管理控制台；内置网关随 DSH 自动启停(systemd 独立单元)，抽屉直显令牌与设备监控；网关提供 /fs/* 文件传输端点(列表/断点下载/上传)，配合 Android App 远程操控会话/审批/提问/goal 与文件互传(多服务器测速切换、聊天记录离线缓存)。",
   "type": "module",
   "main": "./index.mjs",

package/public/admin.html CHANGED Viewed

@@ -3,68 +3,99 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="#0b0e1a">
+  <meta name="theme-color" content="#05348B">
   <title>DSH Remote · 管理</title>
+  <script>/* 首帧前应用皮肤 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="stylesheet" href="../styles.css">
   <style>
-    .admin-wrap { max-width: 860px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 40px; }
+    .admin-wrap { max-width: 1180px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 40px; }
     .admin-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
     .admin-title h1 { font-size: 20px; margin: 0; white-space: nowrap; }
-    .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; gap: 8px; }
-    .login-card input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; outline: none; }
-    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
-    .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
-    .stat-card .v { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
-    .stat-card .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
-    .stat-card.ok .v { color: var(--cyan); } .stat-card.warn .v { color: var(--orange); }
-    .table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
-    table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
-    th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
-    th { font-size: 11px; color: var(--muted); letter-spacing: .5px; white-space: nowrap; }
+    .login-card { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); padding: 16px; display: flex; gap: 8px; }
+    .login-card input { flex: 1; background: var(--dsr-bg); color: var(--dsr-text); border: 1px solid var(--dsr-line); border-radius: 10px; padding: 10px 12px; font: inherit; outline: none; }
+    .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
+    .stat-card { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); padding: 12px 14px; }
+    .stat-card .v { font-size: 20px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .stat-card .k { font-size: 11px; color: var(--dsr-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .stat-card.ok .v { color: var(--dsr-success); } .stat-card.warn .v { color: var(--dsr-warning); }
+    .table-wrap { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); overflow-x: auto; }
+    table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 0; }
+    th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--dsr-line); vertical-align: top; }
+    th { font-size: 11px; color: var(--dsr-muted); letter-spacing: .5px; white-space: nowrap; }
     tr:last-child td { border-bottom: none; }
-    .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
-    .badge.app { color: var(--blue); border-color: rgba(91,140,255,.4); background: rgba(91,140,255,.08); }
-    .badge.admin { color: var(--purple); border-color: rgba(180,140,255,.4); background: rgba(180,140,255,.08); }
-    .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); margin-right: 5px; }
-    .dot.on { background: var(--cyan); box-shadow: 0 0 6px rgba(125,207,255,.9); }
-    .dot.off { background: var(--orange); }
+    .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--dsr-line); color: var(--dsr-muted); white-space: nowrap; }
+    .badge.app { color: var(--dsr-accent-strong); border-color: var(--dsr-accent-line); background: var(--dsr-accent-soft); }
+    .badge.admin { color: var(--dsr-accent-2); border-color: var(--dsr-accent-2-line); background: var(--dsr-accent-2-soft); }
+    .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dsr-line); margin-right: 5px; }
+    .dot.on { background: var(--dsr-success); box-shadow: 0 0 6px var(--dsr-success-line); }
+    .dot.off { background: var(--dsr-warning); }
     .mono { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }
     .nowrap { white-space: nowrap; }
-    .ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+    .ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dsr-muted); }
+    /* 宽屏: 固定列宽让表格铺满容器, 名称列吸收剩余宽度, 消除临界横向滚动条 */
+    @media (min-width: 1000px) {
+      table { table-layout: fixed; }
+      th:nth-child(1) { width: 80px; }
+      th:nth-child(2) { width: 180px; }
+      th:nth-child(3) { width: 88px; }
+      th:nth-child(4) { width: 120px; }
+      th:nth-child(5) { width: 84px; }
+      th:nth-child(6) { width: 56px; }
+      th:nth-child(7) { width: 110px; }
+      th:nth-child(8) { width: 280px; }
+      th:nth-child(9) { width: 72px; }
+      td:nth-child(2) { white-space: nowrap; }
+      td:nth-child(2) b { display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
+      tbody tr:hover { background: var(--dsr-accent-soft); }
+    }
     .token-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 10px 0 14px; }
-    .token-row code { flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; white-space: nowrap; overflow-x: auto; }
+    .token-row code { flex: none; width: 100%; background: var(--dsr-bg); border: 1px solid var(--dsr-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; white-space: nowrap; overflow-x: auto; }
     .token-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+    .token-actions .mini-btn { flex: 1 1 auto; text-align: center; padding: 6px 8px; font-size: 12.5px; }
     .conn-badge { white-space: nowrap; }
-    @media (max-width: 620px) {
+    #btn-close-drawer { white-space: nowrap; }
+    @media (max-width: 720px) {
       .admin-title h1 { font-size: 16px; }
       .admin-title .right { gap: 6px; }
-      .gh-btn span { display: none; }
+      .gh-btn { display: none; }
+      #btn-close-drawer span { display: none; }
+      #btn-close-drawer { padding: 5px 9px; }
+      #btn-console span { display: none; }
+      #btn-console { padding: 5px 9px; }
+      .conn-badge { padding: 3px 7px; }
     }
-    @media (max-width: 560px) {
+    @media (max-width: 760px) {
       .table-wrap { overflow: visible; background: transparent; border: none; }
       .table-wrap table { min-width: 0; }
       .table-wrap thead { display: none; }
       .table-wrap tbody { display: flex; flex-direction: column; gap: 8px; }
-      .table-wrap tr { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
+      .table-wrap tr { display: block; background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: 12px; padding: 10px 12px; }
       .table-wrap tr:last-child td { border-bottom: none; }
-      .table-wrap td { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
+      .table-wrap td { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--dsr-divider); }
       .table-wrap td:last-child { border-bottom: none; }
-      .table-wrap td[data-label]::before { content: attr(data-label); min-width: 64px; font-size: 11px; color: var(--muted); flex: none; }
+      .table-wrap td[data-label]::before { content: attr(data-label); min-width: 64px; font-size: 11px; color: var(--dsr-muted); flex: none; }
       .table-wrap td.ua { display: none; }
       .table-wrap td.act { justify-content: flex-end; }
       .table-wrap td .mini-btn { margin-left: auto; }
     }
-    .pair-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; text-align: center; }
+    .pair-box { background: var(--dsr-panel); border: 1px solid var(--dsr-line); border-radius: var(--dsr-radius); padding: 14px; margin-bottom: 14px; text-align: center; }
     .pair-box .pair-title { font-weight: 600; margin-bottom: 8px; }
     .pair-qr { display: inline-block; background: #fff; border-radius: 8px; padding: 6px; line-height: 0; }
     .pair-qr svg { display: block; width: 180px; height: 180px; }
     .pair-box .muted { margin-top: 8px; font-size: 12px; }
-    .empty { text-align: center; color: var(--muted); padding: 30px 0; }
+    .empty { text-align: center; color: var(--dsr-muted); padding: 30px 0; }
     .empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
     a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }
-    .gh-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
+    .gh-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--dsr-text); }
     .gh-btn svg { width: 16px; height: 16px; fill: currentColor; }
     .admin-title .right { display: flex; align-items: center; gap: 10px; }
+    /* 放在 .gh-btn 基础规则之后, 窄屏才能覆盖 display */
+    @media (max-width: 720px) {
+      a.gh-btn { display: none; }
+    }
+    @media (max-width: 400px) {
+      .admin-title h1 span { display: none; }
+    }
   </style>
 </head>
 <body>
@@ -80,6 +111,9 @@
           <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8a8.01 8.01 0 0 0 5.47 7.59c.4.08.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
           <span data-i18n="repo">仓库</span>
         </a>
+        <button id="btn-theme" class="mini-btn" title="">
+          <span id="theme-swatch" class="theme-swatch-dot"></span><span id="theme-label" class="t-label">默认深空</span>
+        </button>
         <button id="btn-lang" class="mini-btn" title="Language / 语言">EN</button>
         <button id="conn-badge" class="conn-badge off" title="网关面板"><span data-i18n="unauth">未认证</span></button>
       </div>
@@ -125,6 +159,17 @@
     </div>
   </div>
+  <!-- 皮肤选择模态 -->
+  <div id="modal-theme" class="modal hidden">
+    <div class="modal-card">
+      <div class="modal-title" data-i18n="theme.panelTitle">选择配色</div>
+      <div id="theme-options" class="theme-panel-list"></div>
+      <div class="modal-actions">
+        <button id="theme-close" class="btn subtle" data-i18n="theme.close">关闭</button>
+      </div>
+    </div>
+  </div>
   <div id="toast" class="toast hidden"></div>
   <script>
     window.ADMIN_STR = {
@@ -133,6 +178,8 @@
         'consoleTitle': '返回控制台',
         'collapse': '收起面板',
         'admin': '管理',
+        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔',
+        'theme.panelTitle': '选择配色', 'theme.close': '关闭',
         'repo': '仓库',
         'unauth': '未认证',
         'tokenPlaceholder': '输入网关访问令牌',
@@ -191,6 +238,8 @@
         'consoleTitle': 'Back to console',
         'collapse': 'Collapse panel',
         'admin': 'Admin',
+        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower',
+        'theme.panelTitle': 'Choose theme', 'theme.close': 'Close',
         'repo': 'Repo',
         'unauth': 'Not connected',
         'tokenPlaceholder': 'Gateway access token',
@@ -248,6 +297,7 @@
   </script>
   <script src="../qrcode.min.js"></script>
   <script src="../i18n.js"></script>
+  <script src="../theme.js"></script>
   <script src="../admin.js"></script>
 </body>
 </html>

package/public/admin.js CHANGED Viewed

@@ -92,7 +92,7 @@ function render(st) {
   const upOk = st.upstream.reachable
   const hostIPs = (st.lanIPs || []).join(t('stat.ipSep')) || '127.0.0.1'
   const latestHtml = st.latest?.newer
-    ? `<div class="v">${t('stat.updateAvailable', { version: st.latest.version })}</div><div class="k">${t('stat.currentV', { version: st.version })} · <a href="${st.latest.url || '#'}" target="_blank" rel="noopener" style="color:var(--orange)">${t('stat.download')}</a></div>`
+    ? `<div class="v">${t('stat.updateAvailable', { version: st.latest.version })}</div><div class="k">${t('stat.currentV', { version: st.version })} · <a href="${st.latest.url || '#'}" target="_blank" rel="noopener" style="color:var(--dsr-accent-strong)">${t('stat.download')}</a></div>`
     : `<div class="v">v${st.version}</div><div class="k">${isPlugin ? t('stat.embedded') : st.latest?.error ? t('stat.updateCheck', { error: st.latest.error }) : st.latest?.version ? t('stat.latest') : t('stat.notChecked')}</div>`
   $('stats').innerHTML = `
     <div class="stat-card"><div class="v">v${st.version}</div><div class="k">${t(isPlugin ? 'stat.pluginVersion' : 'stat.gatewayVersion')}</div></div>
@@ -332,13 +332,60 @@ function renderLangBtn() {
   if (btn) btn.textContent = I18N.lang === 'zh' ? 'EN' : '中文'
   document.title = t('login.title')
 }
+const THEME_META = [
+  { id: 'default', sw: ['#0B0E1A', '#151B33', '#5B8CFF'] },
+  { id: 'dark', sw: ['#05348B', '#0D438F', '#F9A647'] },
+  { id: 'light', sw: ['#EFEEEC', '#FAF8F5', '#E6BC7B'] },
+  { id: 'neutral', sw: ['#DDD4B8', '#585818', '#832D15'] }
+]
+function renderThemeBtn() {
+  const cur = window.DSHTheme.get()
+  const meta = THEME_META.find(m => m.id === cur)
+  const label = $('theme-label')
+  const swatch = $('theme-swatch')
+  if (label) label.textContent = t('theme.' + cur)
+  if (swatch && meta) swatch.style.background = meta.sw[0]
+  const btn = $('btn-theme')
+  if (btn) btn.title = t('theme.' + cur)
+}
+function renderThemeOptions() {
+  const box = $('theme-options')
+  if (!box) return
+  const cur = window.DSHTheme.get()
+  box.innerHTML = THEME_META.map(m => `
+    <button class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" title="${t('theme.' + m.id)}">
+      <span class="theme-swatches">${m.sw.map(c => `<i style="background:${c}"></i>`).join('')}</span>
+      <span class="theme-name">${t('theme.' + m.id)}</span>
+      <span class="theme-check">${m.id === cur ? '✓' : ''}</span>
+    </button>`).join('')
+  box.querySelectorAll('.theme-option').forEach(btn =>
+    btn.addEventListener('click', () => {
+      window.DSHTheme.set(btn.dataset.theme)
+      renderThemeBtn()
+      renderThemeOptions()
+      $('modal-theme').classList.add('hidden')
+    }))
+}
+function openThemePanel() {
+  renderThemeOptions()
+  $('modal-theme').classList.remove('hidden')
+}
 $('btn-lang').addEventListener('click', () => {
   I18N.setLang(I18N.lang === 'zh' ? 'en' : 'zh')
   renderLangBtn()
+  renderThemeBtn()
   if (lastState) render(lastState)
   else if (!token && !pluginMode) $('conn-badge').textContent = t('unauth')
 })
+$('btn-theme').addEventListener('click', openThemePanel)
+$('theme-close').addEventListener('click', () => $('modal-theme').classList.add('hidden'))
 function start(showLogin) {
   if (!showLogin) {
     $('login-view').classList.add('hidden')
@@ -363,3 +410,4 @@ if (pluginMode) {
   $('login-view').classList.remove('hidden')
 }
 renderLangBtn()
+renderThemeBtn()

package/public/app.js CHANGED Viewed

@@ -1713,6 +1713,24 @@ function cmpVersion(a, b) {
   return 0
 }
+function resetUpdateExpand() {
+  const desc = $('update-desc')
+  if (desc) desc.classList.remove('expanded')
+  const btn = $('btn-update-expand')
+  if (btn) btn.classList.add('hidden')
+}
+function renderUpdateExpandBtn() {
+  const btn = $('btn-update-expand')
+  if (!btn || btn.classList.contains('hidden')) return
+  btn.textContent = t($('update-desc').classList.contains('expanded') ? 'update.collapse' : 'update.expand')
+}
+function toggleUpdateExpand() {
+  $('update-desc').classList.toggle('expanded')
+  renderUpdateExpandBtn()
+}
 async function loadLocalVersion() {
   try {
     const res = await fetch('version.json?t=' + Date.now())
@@ -1722,10 +1740,17 @@ async function loadLocalVersion() {
 }
 async function checkUpdate(silent) {
+  if (!state.localVersion) {
+    $('update-desc').textContent = t('update.noVersion')
+    resetUpdateExpand()
+    if (!silent) toast(t('update.noVersion'), 'err')
+    return
+  }
   const base = state.server
   if (!base) {
     if (!silent) toast(t('update.needServer'), 'err')
     $('update-desc').textContent = state.localVersion ? `${t('update.currentV', { version: state.localVersion })} · ${t('update.needServer')}` : t('update.needServer')
+    resetUpdateExpand()
     return
   }
   if (!silent) toast(t('update.checking'))
@@ -1735,7 +1760,11 @@ async function checkUpdate(silent) {
     const info = await res.json()
     if (info.version && cmpVersion(info.version, state.localVersion) > 0) {
       state.updateInfo = info
-      $('update-desc').textContent = t('update.found', { version: info.version, notes: info.notes ? '：' + info.notes : '' })
+      const hasNotes = !!(info.notes && String(info.notes).trim())
+      $('update-desc').textContent = t('update.found', { version: info.version, notes: hasNotes ? '：' + info.notes : '' })
+      $('update-desc').classList.remove('expanded')
+      $('btn-update-expand').classList.toggle('hidden', !hasNotes)
+      renderUpdateExpandBtn()
       $('btn-download-update').classList.remove('hidden')
       if (!silent) toast(t('update.found', { version: info.version }), 'ok')
       else notify(t('update.foundTitle'), t('update.foundBody', { version: info.version }))
@@ -1743,10 +1772,12 @@ async function checkUpdate(silent) {
       state.updateInfo = null
       $('update-desc').textContent = state.localVersion ? t('update.latestV', { version: state.localVersion }) : t('update.latestRemote', { version: info.version || '?' })
       $('btn-download-update').classList.add('hidden')
+      resetUpdateExpand()
       if (!silent) toast(t('update.latestToast'), 'ok')
     }
   } catch (e) {
     $('update-desc').textContent = t('update.checkFailedDesc', { msg: e.message || t('fs.networkError') })
+    resetUpdateExpand()
     if (!silent) toast(t('update.checkFailed', { msg: e.message }), 'err')
   }
 }
@@ -1960,11 +1991,50 @@ function renderLangBtn() {
   if (btn) btn.textContent = I18N.lang === 'zh' ? 'EN' : '中文'
 }
+const THEME_META = [
+  { id: 'default', sw: ['#0B0E1A', '#151B33', '#5B8CFF'] },
+  { id: 'dark', sw: ['#05348B', '#0D438F', '#F9A647'] },
+  { id: 'light', sw: ['#EFEEEC', '#FAF8F5', '#E6BC7B'] },
+  { id: 'neutral', sw: ['#DDD4B8', '#585818', '#832D15'] }
+]
+function renderThemeBtn() {
+  const btn = $('btn-theme')
+  if (btn) btn.textContent = t('theme.' + window.DSHTheme.get())
+}
+function renderThemeOptions() {
+  const box = $('theme-options')
+  if (!box) return
+  const cur = window.DSHTheme.get()
+  box.innerHTML = THEME_META.map(m => `
+    <button class="theme-option ${m.id === cur ? 'current' : ''}" data-theme="${m.id}" title="${t('theme.' + m.id)}">
+      <span class="theme-swatches">${m.sw.map(c => `<i style="background:${c}"></i>`).join('')}</span>
+      <span class="theme-name">${t('theme.' + m.id)}</span>
+      <span class="theme-check">${m.id === cur ? '✓' : ''}</span>
+    </button>`).join('')
+  box.querySelectorAll('.theme-option').forEach(btn =>
+    btn.addEventListener('click', () => {
+      window.DSHTheme.set(btn.dataset.theme)
+      renderThemeBtn()
+      renderThemeOptions()
+      $('modal-theme').classList.add('hidden')
+    }))
+}
+function openThemePanel() {
+  renderThemeOptions()
+  $('modal-theme').classList.remove('hidden')
+}
 function bindUi() {
   renderLangBtn()
+  renderThemeBtn()
   $('btn-lang').addEventListener('click', () => {
     I18N.setLang(I18N.lang === 'zh' ? 'en' : 'zh')
     renderLangBtn()
+    renderThemeBtn()
+    renderUpdateExpandBtn()
     renderServers()
     renderSessions()
     renderPending(); renderQueue(); renderJobs()
@@ -1975,6 +2045,8 @@ function bindUi() {
     if (state.hostInfo) $('host-desc').textContent = t('settings.hostDesc', { version: state.hostInfo.version, cwd: state.hostInfo.cwd, n: state.hostInfo.attachedSessions })
     $('token-desc').textContent = state.token ? t('token.savedLocal') : t('token.notSet')
   })
+  $('btn-theme').addEventListener('click', openThemePanel)
+  $('theme-close').addEventListener('click', () => $('modal-theme').classList.add('hidden'))
   renderServers()
   // 底部导航
   document.querySelectorAll('.nav-btn').forEach(b =>
@@ -2041,6 +2113,7 @@ function bindUi() {
   })
   $('btn-check-update').addEventListener('click', () => checkUpdate(false))
   $('btn-download-update').addEventListener('click', downloadUpdate)
+  $('btn-update-expand').addEventListener('click', toggleUpdateExpand)
   $('btn-reset').addEventListener('click', () => {
     if (!confirm(t('settings.confirmReset'))) return
     LS.del('token'); LS.del('notify'); LS.del('server')

package/public/i18n.js CHANGED Viewed

@@ -22,7 +22,12 @@
     let s = table[key]
     if (s == null) s = (dict && dict.zh && dict.zh[key]) != null ? dict.zh[key] : key
     s = String(s)
-    if (vars) for (const [k, v] of Object.entries(vars)) s = s.replaceAll('{' + k + '}', String(v ?? ''))
+    if (vars) {
+      const keys = new Set(Object.keys(vars))
+      s = s.replace(/\{([A-Za-z0-9_]+)\}/g, (m, k) => keys.has(k) ? String(vars[k] ?? '') : '')
+    } else {
+      s = s.replace(/\{[A-Za-z0-9_]+\}/g, '')
+    }
     return s
   }

package/public/index.html CHANGED Viewed

@@ -3,10 +3,11 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
-  <meta name="theme-color" content="#0b0e1a">
+  <meta name="theme-color" content="#05348B">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <title>DSH Remote</title>
+  <script>/* 首帧前应用皮肤, 避免闪白/闪黑 */ (function(){try{var t=localStorage.getItem('dshTheme');if(t!=='default'&&t!=='dark'&&t!=='light'&&t!=='neutral'){t=window.matchMedia('(prefers-color-scheme: light)').matches?'light':'default'}document.documentElement.setAttribute('data-theme',t)}catch(e){}})()</script>
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="icon" href="icon.svg" type="image/svg+xml">
   <link rel="stylesheet" href="styles.css">
@@ -155,6 +156,10 @@
           <div><div class="setting-name" data-i18n="settings.langTitle">语言 / Language</div><div class="setting-desc" data-i18n="settings.langDesc">界面语言，跟随系统或手动切换</div></div>
           <button id="btn-lang" class="mini-btn">EN</button>
         </div>
+        <div class="setting-row">
+          <div><div class="setting-name" data-i18n="settings.themeTitle">皮肤</div><div class="setting-desc" data-i18n="settings.themeDesc">默认深空 / 落日 / 易北爱乐厅 / 草原孤塔</div></div>
+          <button id="btn-theme" class="mini-btn" style="min-width:104px">默认深空</button>
+        </div>
         <div class="setting-row">
           <div><div class="setting-name" data-i18n="settings.tokenTitle">访问令牌</div><div class="setting-desc" id="token-desc" data-i18n="token.notSet">未设置</div></div>
           <button id="btn-change-token" class="mini-btn" data-i18n="settings.change">更换</button>
@@ -165,7 +170,8 @@
         </div>
         <div class="setting-row">
           <div><div class="setting-name" data-i18n="settings.updateTitle">检查更新</div><div class="setting-desc" id="update-desc" data-i18n="settings.updateLoading">加载中…</div>
-          <button id="btn-download-update" class="mini-btn hidden" style="margin-top:6px" data-i18n="settings.downloadUpdate">下载并安装更新</button></div>
+          <button id="btn-download-update" class="mini-btn hidden" style="margin-top:6px" data-i18n="settings.downloadUpdate">下载并安装更新</button>
+          <button id="btn-update-expand" class="mini-btn hidden" style="margin-top:6px" data-i18n="update.expand">展开</button></div>
           <button id="btn-check-update" class="mini-btn" data-i18n="settings.check">检查</button>
         </div>
       </div>
@@ -233,6 +239,17 @@
     </div>
   </div>
+  <!-- 皮肤选择模态 -->
+  <div id="modal-theme" class="modal hidden">
+    <div class="modal-card">
+      <div class="modal-title" data-i18n="theme.panelTitle">选择配色</div>
+      <div id="theme-options" class="theme-panel-list"></div>
+      <div class="modal-actions">
+        <button id="theme-close" class="btn subtle" data-i18n="theme.close">关闭</button>
+      </div>
+    </div>
+  </div>
   <div id="toast" class="toast hidden"></div>
   <script>
@@ -324,6 +341,7 @@
         'update.checkFailedDesc': '检查失败：{msg}', 'update.checkFailed': '检查更新失败：{msg}',
         'update.downloadStarted': '开始下载，完成后会弹出安装页', 'update.downloadFailed': '无法启动下载：{msg}',
         'update.installUnsupported': '当前版本不支持 App 内安装，已转浏览器下载',
+        'update.expand': '展开', 'update.collapse': '收起',
         'scan.imageLoadFailed': '图片加载失败', 'scan.decodeUnsupported': '当前设备不支持图片解码',
         'scan.browserHint': '浏览器请打开主机管理页，用手机相机扫码', 'scan.unsupported': '当前 App 版本不支持拍照扫码，请先更新 App',
         'scan.permissionDenied': '未授予相机权限',
@@ -336,6 +354,9 @@
         'settings.notifyTitle': '通知', 'settings.notifyDesc': '收到审批/提问时推送',
         'settings.toolsTitle': '显示工具调用', 'settings.toolsDesc': '关闭后隐藏 🔧/📦 工具调用与结果',
         'settings.langTitle': '语言 / Language', 'settings.langDesc': '界面语言，跟随系统或手动切换',
+        'settings.themeTitle': '皮肤', 'settings.themeDesc': '默认深空 / 落日 / 易北爱乐厅 / 草原孤塔',
+        'theme.default': '默认深空', 'theme.dark': '落日', 'theme.light': '易北爱乐厅', 'theme.neutral': '草原孤塔',
+        'theme.panelTitle': '选择配色', 'theme.close': '关闭',
         'settings.tokenTitle': '访问令牌', 'settings.change': '更换',
         'settings.hostTitle': 'DSH 状态', 'settings.hostProbing': '探测中…', 'settings.probe': '探测', 'settings.probeFailed': '探测失败',
         'settings.hostDesc': 'DSH {version} · {cwd} · 附加会话 {n}',
@@ -437,6 +458,7 @@
         'update.checkFailedDesc': 'Check failed: {msg}', 'update.checkFailed': 'Update check failed: {msg}',
         'update.downloadStarted': 'Downloading, the install page will open when ready', 'update.downloadFailed': 'Could not start download: {msg}',
         'update.installUnsupported': 'This version cannot install in-app, opening browser download',
+        'update.expand': 'Expand', 'update.collapse': 'Collapse',
         'scan.imageLoadFailed': 'Image failed to load', 'scan.decodeUnsupported': 'This device cannot decode images',
         'scan.browserHint': 'In a browser, open the host admin page and scan with your phone camera', 'scan.unsupported': 'This app version cannot scan, please update first',
         'scan.permissionDenied': 'Camera permission not granted',
@@ -449,6 +471,9 @@
         'settings.notifyTitle': 'Notifications', 'settings.notifyDesc': 'Push on approvals / questions',
         'settings.toolsTitle': 'Show tool calls', 'settings.toolsDesc': 'Hide 🔧/📦 tool calls and results when off',
         'settings.langTitle': 'Language / 语言', 'settings.langDesc': 'UI language, follows system or switch manually',
+        'settings.themeTitle': 'Theme', 'settings.themeDesc': 'Default deep space / Sunset / Elbphilharmonie / Prairie Tower',
+        'theme.default': 'Default', 'theme.dark': 'Sunset', 'theme.light': 'Elbphilharmonie', 'theme.neutral': 'Prairie Tower',
+        'theme.panelTitle': 'Choose theme', 'theme.close': 'Close',
         'settings.tokenTitle': 'Access token', 'settings.change': 'Change',
         'settings.hostTitle': 'DSH status', 'settings.hostProbing': 'Probing…', 'settings.probe': 'Probe', 'settings.probeFailed': 'Probe failed',
         'settings.hostDesc': 'DSH {version} · {cwd} · {n} attached sessions',
@@ -468,6 +493,7 @@
   <script src="sha256.js"></script>
   <script src="jsqr.min.js"></script>
   <script src="i18n.js"></script>
+  <script src="theme.js"></script>
   <script src="app.js"></script>
 </body>
 </html>