From f7233616f7b7fbab4314381366996f63fef1826e Mon Sep 17 00:00:00 2001 From: xiaoqidun Date: Fri, 30 Oct 2026 21:17:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=95=8C=E9=9D=A2=E8=AE=BE=E8=AE=A1):=20?= =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE=E6=94=B9=E4=B8=BA=E5=88=86?= =?UTF-8?q?=E7=B1=BB=E5=AF=B9=E8=AF=9D=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/webui/index.html | 34 ++++++++++------ assets/webui/ofdgo.css | 89 ++++++++++++++++++++++++++++++++--------- assets/webui/ofdgo.js | 19 ++++++--- 3 files changed, 107 insertions(+), 35 deletions(-) diff --git a/assets/webui/index.html b/assets/webui/index.html index ef3e2e1..0bf841d 100644 --- a/assets/webui/index.html +++ b/assets/webui/index.html @@ -447,20 +447,30 @@
-

设置

-
外观主题
-
- - - +

系统设置

+
+ +
+
+
外观主题
+
+ + + +
+
+ +
-
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css index b839617..9dbc8e0 100644 --- a/assets/webui/ofdgo.css +++ b/assets/webui/ofdgo.css @@ -1111,11 +1111,6 @@ button:not(:disabled):hover { overflow-wrap: anywhere; } -.appearance-associations { - padding: 12px; - border-top: 1px solid var(--line); -} - .association-row { display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; @@ -1139,8 +1134,8 @@ button:not(:disabled):hover { #associationMessage { margin-top: 12px; - white-space: nowrap; - overflow-x: auto; + white-space: normal; + overflow-wrap: anywhere; } .form-title { @@ -4839,27 +4834,85 @@ audio.page-media { } .appearance-dialog { - inset: var(--appearance-top, 40px) min(var(--appearance-right, 12px), max(12px, calc(100vw - 297px))) auto auto; - margin: 0; - width: 285px; - max-width: calc(100vw - 24px); - max-height: calc(100dvh - var(--appearance-top, 40px) - 12px); + width: 680px; + height: 440px; + overflow: hidden; +} + +.appearance-dialog > form { + display: grid; + grid-template-rows: auto minmax(0, 1fr); + height: 100%; padding: 0; - border-radius: var(--radius-dialog); - background: var(--popup); - box-shadow: var(--shadow-flyout); } .appearance-dialog::backdrop { - background: transparent; + top: 0; } .appearance-heading { display: flex; align-items: center; justify-content: space-between; - font-weight: 600; - margin-bottom: 12px; + padding: 12px 16px; + border-bottom: 1px solid var(--line); +} + +.appearance-body { + display: grid; + grid-template-columns: 140px minmax(0, 1fr); + min-height: 0; +} + +.appearance-navigation { + display: flex; + flex-direction: column; + gap: 4px; + padding: 12px 8px; + overflow-y: auto; + border-right: 1px solid var(--line); + background: var(--panel); +} + +.appearance-navigation button { + flex: none; + min-height: 32px; + padding: 6px 12px; + border: 1px solid transparent; + border-radius: var(--radius-control); + background: transparent; + text-align: left; +} + +.appearance-navigation button[data-selected="true"] { + background: var(--selected); + color: var(--accent-strong); +} + +.appearance-content { + min-width: 0; + padding: 20px; + overflow-y: auto; +} + +@media (max-width: 600px) { + .appearance-body { + grid-template-columns: minmax(0, 1fr); + grid-template-rows: auto minmax(0, 1fr); + } + .appearance-navigation { + flex-direction: row; + flex-wrap: wrap; + padding: 8px 12px; + border-right: 0; + border-bottom: 1px solid var(--line); + } + .appearance-content { + padding: 16px; + } + .appearance-dialog .association-row { + gap: 8px; + } } .appearance-label { diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js index 8e18c41..5218c1f 100644 --- a/assets/webui/ofdgo.js +++ b/assets/webui/ofdgo.js @@ -203,6 +203,7 @@ const el = { aboutPanel: document.querySelector("#aboutPanel"), aboutVersion: document.querySelector("#aboutVersion"), associationSection: document.querySelector("#associationSection"), + associationCategory: document.querySelector("#associationCategory"), associationMessage: document.querySelector("#associationMessage"), signButton: document.querySelector("#signButton"), signPanel: document.querySelector("#signPanel"), @@ -2122,6 +2123,12 @@ async function openAboutPanel() { el.aboutVersion.textContent = `${day}-${match[2].slice(0, 7)}`; } +function selectAppearanceCategory(value) { + for (const button of el.appearancePanel.querySelectorAll("[data-appearance-category]")) button.dataset.selected = String(button.dataset.appearanceCategory === value); + for (const section of el.appearancePanel.querySelectorAll("[data-appearance-page]")) section.hidden = section.dataset.appearancePage !== value; + el.appearancePanel.querySelector(".appearance-content").scrollTop = 0; +} + async function refreshFileAssociations() { if (!nativeHost || el.associationSection.dataset.busy) return; el.associationSection.dataset.busy = "true"; @@ -2132,7 +2139,11 @@ async function refreshFileAssociations() { } try { const states = await nativeHost.call("association.query", {}); - el.associationSection.hidden = !states.user.supported; + el.associationCategory.hidden = !states.user.supported; + if (el.associationCategory.hidden && el.associationCategory.dataset.selected === "true") { + selectAppearanceCategory("theme"); + if (el.appearancePanel.open) el.appearancePanel.querySelector('[data-appearance-category="theme"]').focus({preventScroll:true}); + } for (const row of el.associationSection.querySelectorAll(".association-row")) { const state = states[row.dataset.scope]; const label = row.querySelector(".association-state"); @@ -2142,7 +2153,7 @@ async function refreshFileAssociations() { row.querySelector('[data-action="remove"]').disabled = !state.writable || !!state.error || !state.registered; } } catch (error) { - el.associationSection.hidden = false; + el.associationCategory.hidden = false; for (const label of el.associationSection.querySelectorAll(".association-state")) label.textContent = "不可用"; el.associationMessage.textContent = `查询失败：${error.message}`; el.associationMessage.hidden = false; @@ -5518,13 +5529,11 @@ function resizeViewer() { async function boot() { window.ofdgoTheme.connect(nativeHost, error => showError(error, false)); el.appearanceButton.addEventListener("click", () => { - const bounds = el.appearanceButton.getBoundingClientRect(); - el.appearancePanel.style.setProperty("--appearance-top", `${bounds.bottom + 4}px`); - el.appearancePanel.style.setProperty("--appearance-right", `${Math.max(12, innerWidth - bounds.right)}px`); el.associationMessage.hidden = true; documentDialogs.showApplication(el.appearancePanel); if (nativeHost) void refreshFileAssociations(); }); + for (const button of el.appearancePanel.querySelectorAll("[data-appearance-category]")) button.addEventListener("click", () => selectAppearanceCategory(button.dataset.appearanceCategory)); for (const button of el.appearancePanel.querySelectorAll("[data-theme-choice]")) button.addEventListener("click", () => window.ofdgoTheme.set(button.dataset.themeChoice)); documentDialogs = new DocumentDialogs({document, titlebar: el.documentTitleBar, targets: () => [...document.body.children].filter(node => node !== el.documentTitleBar)});