xiaoqidun/ofdgo
1
0 Fork 0
mirror of https://github.com/xiaoqidun/ofdgo.git synced 2026-10-30 16:20:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(界面重构): 支持三种主题
build.yaml / build (push) Successful in 46s
Details

Browse Source
This commit is contained in:
xiaoqidun committed 2026-10-30 12:00:42 +08:00
1 parent 385d7aa531
commit 8d435fe109
11 files changed
+648 -188
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/webui/assets.go
+2 -2
View File
@@ -18,10 +18,10 @@ import "embed"
// FS WebUI嵌入静态文件
//
//go:embed index.html ofdgo.css ofdgo.ico ofdgo.js ofdgo.json ofdgo.png ofdgo.svg ofdgo_edit.js ofdgo_font.js ofdgo_host.js ofdgo_print.js ofdgo_util.js ofdgo_view.js ofdgo_wasm.js ofdgo_work.js wasm_exec.js
//go:embed index.html ofdgo.css ofdgo.ico ofdgo.js ofdgo.json ofdgo.png ofdgo.svg ofdgo_edit.js ofdgo_font.js ofdgo_host.js ofdgo_print.js ofdgo_theme.js ofdgo_util.js ofdgo_view.js ofdgo_wasm.js ofdgo_work.js wasm_exec.js
var FS embed.FS
// NativeFS WebView嵌入静态文件
//
//go:embed index.html ofdgo.css ofdgo.ico ofdgo.js ofdgo.json ofdgo.png ofdgo.svg ofdgo_edit.js ofdgo_font.js ofdgo_host.js ofdgo_print.js ofdgo_util.js ofdgo_view.js
//go:embed index.html ofdgo.css ofdgo.ico ofdgo.js ofdgo.json ofdgo.png ofdgo.svg ofdgo_edit.js ofdgo_font.js ofdgo_host.js ofdgo_print.js ofdgo_theme.js ofdgo_util.js ofdgo_view.js
var NativeFS embed.FS
assets/webui/index.html
+13
View File
@@ -8,6 +8,7 @@
<link rel="manifest" href="./ofdgo.json">
<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64 128x128 256x256" href="./ofdgo.ico">
<link rel="icon" type="image/svg+xml" href="./ofdgo.svg">
<script src="./ofdgo_theme.js"></script>
<link rel="stylesheet" href="./ofdgo.css">
</head>
<body>
@@ -16,6 +17,7 @@
<div id="documentTabs" class="document-tabs"></div>
<button id="documentNewTab" class="document-new-tab" type="button" title="新建"><span class="new-icon"></span></button>
<div class="document-title-drag"></div>
<button id="appearanceButton" class="app-appearance" type="button" title="设置"><span class="settings-icon"></span></button>
<button id="refreshAppButton" class="app-update" type="button" title="更新" hidden><span class="update-icon"></span></button>
</div>
<header class="toolbar-frame">
@@ -450,6 +452,17 @@
</div>
</form>
</dialog>
<dialog id="appearancePanel" class="form-dialog appearance-dialog">
<form method="dialog">
<div class="appearance-heading"><h2 id="appearanceTitle" class="form-title">设置</h2><button class="appearance-close" type="submit" title="关闭"><span class="close-icon"></span></button></div>
<div class="appearance-label">外观主题</div>
<div class="appearance-themes">
<button type="button" data-theme-choice="system"><span class="theme-system-icon"></span><span>系统</span></button>
<button type="button" data-theme-choice="light"><span class="theme-light-icon"></span><span>浅色</span></button>
<button type="button" data-theme-choice="dark"><span class="theme-dark-icon"></span><span>深色</span></button>
</div>
</form>
</dialog>
<dialog id="settingsPanel" class="form-dialog settings-dialog">
<form id="settingsForm">
<header class="settings-header">
assets/webui/ofdgo.css
+401 -155
View File
File diff suppressed because it is too large. Load diff
assets/webui/ofdgo.js
+13 -6
View File
@@ -192,6 +192,8 @@ function createDocumentState() {
let state = createDocumentState();
const el = {
appearanceButton: document.querySelector("#appearanceButton"),
appearancePanel: document.querySelector("#appearancePanel"),
printButton: document.querySelector("#printButton"),
printPanel: document.querySelector("#printPanel"),
documentTitleBar: document.querySelector("#documentTitleBar"),
@@ -711,8 +713,8 @@ const annotationFields = Object.fromEntries(["CreateForm", "CreateCancel", "Cont
el.editorTools.addEventListener("scroll", () => fontPicker.position());
const canvasEditor = new CanvasEditor(el.viewerPanel, {
textControls: [el.textAlign, el.textFont, el.textFontToggle, el.textFontAdd, el.textFontList, el.textSize, el.textColor, el.textLineHeight, el.textSpacing, el.textWrap, el.paragraphButton, el.paragraphPanel, textBackground, ...textFormatButtons, el.undoButton, el.redoButton, el.saveButton, el.saveAsButton, el.fontInput, document.querySelector("#textReflow")],
keepTextFocus: () => fontPicker.open || el.closePanel.open || el.paragraphPanel.open || canvasEditor.input?.fontDialog,
textControls: [el.appearanceButton, el.appearancePanel, el.textAlign, el.textFont, el.textFontToggle, el.textFontAdd, el.textFontList, el.textSize, el.textColor, el.textLineHeight, el.textSpacing, el.textWrap, el.paragraphButton, el.paragraphPanel, textBackground, ...textFormatButtons, el.undoButton, el.redoButton, el.saveButton, el.saveAsButton, el.fontInput, document.querySelector("#textReflow")],
keepTextFocus: () => el.appearancePanel.open || fontPicker.open || el.closePanel.open || el.paragraphPanel.open || canvasEditor.input?.fontDialog,
prepareTextCommit: flushEditorInputs,
onTextFormat: changeRangeFormat,
onRichInput: ensureRichInput,
@@ -2086,7 +2088,7 @@ function handleKeyDown(event) {
function formDialogOpen() {
if (documentTab().print?.context) return true;
return Boolean(sealPreview || resourceManager.pick) || el.aboutPanel.open || el.closePanel.open || el.attachmentDialog.open || settingsElements.Panel.open || fontBindingElements.Panel.open || el.signPanel.open || el.verifyPanel.open || el.credentialsPanel.open || el.encryptionPanel.open || batchElements.Panel.open || el.exportPanel.open || el.createPanel.open || el.insertPanel.open || el.pagePanel.open || el.paragraphPanel.open || el.importPanel.open || el.infoPanel.open || el.documentPanel.open
return el.appearancePanel.open || Boolean(sealPreview || resourceManager.pick) || el.aboutPanel.open || el.closePanel.open || el.attachmentDialog.open || settingsElements.Panel.open || fontBindingElements.Panel.open || el.signPanel.open || el.verifyPanel.open || el.credentialsPanel.open || el.encryptionPanel.open || batchElements.Panel.open || el.exportPanel.open || el.createPanel.open || el.insertPanel.open || el.pagePanel.open || el.paragraphPanel.open || el.importPanel.open || el.infoPanel.open || el.documentPanel.open
|| resourceElements.Panel.open || el.structureDialog.open || el.versionPanel.open || el.batchPagesPanel.open || el.objectStylePanel.open || el.outlinePanel.open || el.objectBoundsPanel.open || el.annotationNote.open || el.annotationCreate.open || el.objectPicker.open;
}
@@ -2638,9 +2640,6 @@ function applyTitleBarInfo(info) {
document.body.style.setProperty("--titlebar-height", `${info.height}px`);
el.documentTitleBar.style.setProperty("--titlebar-left", `${info.left}px`);
el.documentTitleBar.style.setProperty("--titlebar-right", `${info.right}px`);
for (const [name, value] of Object.entries(info.colors || {})) {
if (value) el.documentTitleBar.style.setProperty(`--titlebar-${name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)}`, value);
}
el.documentTitleBar.dataset.active = String(info.active);
el.documentTitleBar.dataset.maximized = String(info.maximized);
revealPanelTab(el.documentTabs);
@@ -5502,6 +5501,14 @@ 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`);
documentDialogs.showApplication(el.appearancePanel);
});
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)});
for (const panel of document.querySelectorAll("dialog.form-dialog")) if (panel !== el.printPanel) documentDialogs.register(panel, {persistent: panel === batchElements.Panel});
assets/webui/ofdgo_theme.js
+42
View File
@@ -0,0 +1,42 @@
(() => {
const root = document.documentElement;
const preference = matchMedia("(prefers-color-scheme: dark)");
const key = "ofdgo.theme";
let mode = root.dataset.themeMode || "system";
let host = null, report = null, pending = Promise.resolve();
if (!root.dataset.themeMode) {
try { mode = localStorage.getItem(key) || "system"; } catch {}
}
if (!["system", "light", "dark"].includes(mode)) mode = "system";
function apply() {
root.dataset.themeMode = mode;
root.dataset.theme = mode === "system" ? preference.matches ? "dark" : "light" : mode;
document.querySelector('meta[name="theme-color"]').content = root.dataset.theme === "dark" ? "#272e33" : "#fafbfc";
for (const button of document.querySelectorAll("[data-theme-choice]")) button.dataset.pressed = String(button.dataset.themeChoice === mode);
}
function sync() {
if (!host) return;
const value = {mode, dark: root.dataset.theme === "dark"};
pending = pending.then(() => host.call("appearance", value)).catch(error => report(error));
}
function set(value) {
mode = value;
apply();
if (!host) {
try { localStorage.setItem(key, mode); } catch {}
}
sync();
}
preference.addEventListener("change", () => {
if (mode !== "system") return;
apply();
sync();
});
window.addEventListener("storage", event => {
if (host || event.key !== key && event.key !== null) return;
mode = ["light", "dark"].includes(event.newValue) ? event.newValue : "system";
apply();
});
window.ofdgoTheme = {set, connect(value, onError) { host = value; report = onError; apply(); sync(); }};
apply();
})();
assets/webui/ofdgo_util.js
+1 -1
View File
@@ -4,7 +4,7 @@ export class DocumentDialogs {
this.backdrop = root.createElement("div");
this.backdrop.className = "document-dialog-backdrop";
this.backdrop.hidden = true;
Object.assign(this.backdrop.style, { position: "fixed", inset: "0", background: "rgb(31 36 40 / 18%)", zIndex: "1000" });
Object.assign(this.backdrop.style, { position: "fixed", inset: "0", background: "var(--backdrop)", zIndex: "1000" });
root.body.append(this.backdrop);
root.addEventListener("keydown", event => {
if (event.defaultPrevented || this.applicationOpen()) return;
assets/webui/ofdgo_work.js
+1 -1
View File
@@ -1,6 +1,6 @@
const CACHE_PREFIX = `ofdgo:${self.registration.scope}:app:`;
const META_CACHE = `${CACHE_PREFIX}meta`;
const ASSETS = ["./", "ofdgo.css", "ofdgo.ico", "ofdgo.js", "ofdgo.json", "ofdgo.png", "ofdgo.svg", "ofdgo.wasm", "ofdgo_edit.js", "ofdgo_font.js", "ofdgo_host.js", "ofdgo_print.js", "ofdgo_util.js", "ofdgo_view.js", "ofdgo_wasm.js", "ofdgo_work.js", "wasm_exec.js"]
const ASSETS = ["./", "ofdgo.css", "ofdgo.ico", "ofdgo.js", "ofdgo.json", "ofdgo.png", "ofdgo.svg", "ofdgo.wasm", "ofdgo_edit.js", "ofdgo_font.js", "ofdgo_host.js", "ofdgo_print.js", "ofdgo_theme.js", "ofdgo_util.js", "ofdgo_view.js", "ofdgo_wasm.js", "ofdgo_work.js", "wasm_exec.js"]
.map((path) => new URL(path, self.registration.scope).href);
const CLIENT_PREFIX = new URL("__client/", self.registration.scope).href;