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

feat(界面设计): 新增标题材质切换与保存
build.yaml / build (push) Successful in 45s
Details

Browse Source
This commit is contained in:
xiaoqidun committed 2026-10-31 10:33:15 +08:00
1 parent c2d390e945
commit cd191ac679
8 files changed
+98 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/webui/index.html
+1
View File
@@ -460,6 +460,7 @@
<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>
<label class="appearance-material" hidden><span>标题材质</span><select id="titleBarMaterial"><option value="solid">纯色</option><option value="mica">云母</option><option value="acrylic">亚克力</option></select></label>
</section>
<section id="associationSection" data-appearance-page="association" hidden>
<div class="association-row" data-scope="user"><span>当前用户</span><span class="association-state"></span><div class="association-actions"><button class="small-button" type="button" data-action="register">注册</button><button class="small-button" type="button" data-action="remove">撤销</button></div></div>
assets/webui/ofdgo.css
+13
View File
@@ -1685,6 +1685,7 @@ button:not(:disabled):hover {
.gradient-stop-row input[type="number"],
.structure-attribute > input,
.print-options select,
.appearance-material select,
.form-row input[type="text"],
.form-row input[type="password"],
.form-row input[type="number"],
@@ -4946,6 +4947,18 @@ audio.page-media {
}
}
.appearance-material:not([hidden]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
.appearance-material select {
width: 120px;
}
.appearance-themes {
display: flex;
gap: 3px;
assets/webui/ofdgo.js
+1 -1
View File
@@ -2647,7 +2647,7 @@ function isForegroundDocument(tab) {
function applyTitleBarInfo(info) {
if (!info || !info.height) return;
workspace.titleBarReady = true;
document.documentElement.toggleAttribute("data-titlebar-material", info.material === 1);
document.documentElement.toggleAttribute("data-titlebar-material", info.material === 1 || info.material === 2);
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`);
assets/webui/ofdgo_theme.js
+28 -4
View File
@@ -3,7 +3,8 @@
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();
let material = root.dataset.titlebarChoice || "mica";
let host = null, report = null, pending = Promise.resolve(), revision = 0, committed = null;
if (!root.dataset.themeMode) {
try { mode = localStorage.getItem(key) || "system"; } catch {}
}
@@ -13,11 +14,21 @@
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);
const select = document.querySelector("#titleBarMaterial");
if (select) select.value = material;
}
function sync() {
if (!host) return;
const value = {mode, dark: root.dataset.theme === "dark"};
pending = pending.then(() => host.call("appearance", value)).catch(error => report(error));
const value = {mode, dark: root.dataset.theme === "dark", material};
const current = ++revision;
pending = pending.then(() => host.call("appearance", value)).then(() => { committed = value; }).catch(error => {
if (current === revision) {
mode = committed.mode;
material = committed.material;
apply();
}
report(error);
});
}
function set(value) {
mode = value;
@@ -37,6 +48,19 @@
mode = ["light", "dark"].includes(event.newValue) ? event.newValue : "system";
apply();
});
window.ofdgoTheme = {set, connect(value, onError) { host = value; report = onError; apply(); sync(); }};
window.ofdgoTheme = {set, connect(value, onError) {
host = value;
report = onError;
const select = document.querySelector("#titleBarMaterial");
const materials = (root.dataset.titlebarMaterials || "").split(",");
if (host && materials.length > 1) {
for (const option of [...select.options]) if (!materials.includes(option.value)) option.remove();
select.closest(".appearance-material").hidden = false;
select.addEventListener("change", () => { material = select.value; sync(); });
}
apply();
sync();
}};
apply();
committed = {mode, material};
})();
go.mod
+1 -1
View File
@@ -8,7 +8,7 @@ require (
github.com/go-text/typesetting v0.3.5
github.com/tdewolff/canvas v0.0.0-20260923214215-09804640d00c
github.com/tdewolff/font v0.0.0-20261010204837-88a7f6b56918
github.com/xiaoqidun/guigo v0.0.0-20261030153939-c39abf593a0f
github.com/xiaoqidun/guigo v0.0.0-20261031023018-a9906e2ff59e
github.com/xiaoqidun/j2kgo v1.0.2
github.com/xiaoqidun/jbig2 v1.1.8
github.com/xiaoqidun/pdfgo v0.0.0-20261026125713-90454771d5d0
go.sum
+2 -2
View File
@@ -60,8 +60,8 @@ github.com/tdewolff/parse/v2 v2.8.16 h1:bLk5svUOQRkW/Y2SJ+DeENSIkZBcTIkq+Atyv5D8
github.com/tdewolff/parse/v2 v2.8.16/go.mod h1:XdsoSFThlVIRIajAuqz1evNY7bagZS8LBOPA3aVopwQ=
github.com/tdewolff/test v1.0.12 h1:7F21DqIajswxuche0geHdrUZRCWE4oko4b7bcmkkrxk=
github.com/tdewolff/test v1.0.12/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
github.com/xiaoqidun/guigo v0.0.0-20261030153939-c39abf593a0f h1:wek1tEiTjf0i5eT6w6ILJLEPwdXP+TaH3qtRBOO1xeI=
github.com/xiaoqidun/guigo v0.0.0-20261030153939-c39abf593a0f/go.mod h1:bXz+dPMVntPIVwePTTuMXt8Q0z1YoUGuROQSsXyUEfY=
github.com/xiaoqidun/guigo v0.0.0-20261031023018-a9906e2ff59e h1:kSMo+IlFgsZSTH0QYOfkhZcpMNxzLSlmOrFmMAVSo+Y=
github.com/xiaoqidun/guigo v0.0.0-20261031023018-a9906e2ff59e/go.mod h1:bXz+dPMVntPIVwePTTuMXt8Q0z1YoUGuROQSsXyUEfY=
github.com/xiaoqidun/j2kgo v1.0.2 h1:OAjjEOfaBaQzBNcj9wx+eM68UI5pewR6SzNZa1R1DIw=
github.com/xiaoqidun/j2kgo v1.0.2/go.mod h1:DCwAfuDzCDYqUiAlZ7BDwigTjaXw7o9L1FtEma/D1aA=
github.com/xiaoqidun/jbig2 v1.1.8 h1:dERPW7F8gs18a/DOD9gXHR3fP1Vl6KhCNsLnq5l3BIo=
internal/webview/webview.go
+2 -1
View File
@@ -112,6 +112,7 @@ func Run(ctx context.Context, paths []string, dataDir string) error {
return err
}
options.TitleBarColors = themeColors(h.theme.Dark)
options.TitleBarMaterial = titleBarMaterial(h.theme.Material)
data, err := json.Marshal(paths)
if err != nil {
return err
@@ -437,7 +438,7 @@ func (h *Host) call(ctx context.Context, name string, value any) (any, error) {
flag := func(key string) bool { value, _ := args[key].(bool); return value }
switch name {
case "appearance":
return nil, h.setTheme(applicationTheme{Mode: text("mode"), Dark: flag("dark")})
return nil, h.setTheme(applicationTheme{Mode: text("mode"), Dark: flag("dark"), Material: text("material")})
case "print.capabilities", "print.dialog", "print.printers", "print.query", "print.properties", "print":
h.mu.Lock()
window := h.window
internal/webview/webview_theme.go
+50 -9
View File
@@ -19,18 +19,21 @@ package webview
import (
"bytes"
"encoding/json"
"errors"
"fmt"
"os"
"path/filepath"
"strings"
"github.com/xiaoqidun/guigo"
webuiassets "github.com/xiaoqidun/ofdgo/assets/webui"
)
// applicationTheme 保存应用主题偏好及最后一次解析的系统外观
// applicationTheme 保存主题、标题材质及最后一次解析的系统外观
type applicationTheme struct {
Mode string `json:"mode"`
Dark bool `json:"dark"`
Mode string `json:"mode"`
Dark bool `json:"dark"`
Material string `json:"material"`
}
// themeColors 返回应用对应外观的原生标题栏配色
@@ -46,7 +49,7 @@ func themeColors(dark bool) guigo.TitleBarColors {
// loadTheme 在创建窗口前读取用户目录中的主题偏好
// 返回: error 读取或解析错误
func (h *Host) loadTheme() error {
h.theme = applicationTheme{Mode: "system"}
h.theme = applicationTheme{Mode: "system", Material: "mica"}
data, err := os.ReadFile(h.themePath)
if os.IsNotExist(err) {
return nil
@@ -69,6 +72,9 @@ func (a applicationTheme) validate() error {
if a.Mode == "light" && a.Dark || a.Mode == "dark" && !a.Dark {
return fmt.Errorf("主题配色无效")
}
if a.Material != "solid" && a.Material != "mica" && a.Material != "acrylic" {
return fmt.Errorf("标题材质无效")
}
return nil
}
@@ -80,18 +86,24 @@ func (h *Host) themeIndex() ([]byte, error) {
return nil, err
}
h.themeMu.Lock()
mode := h.theme.Mode
mode, material := h.theme.Mode, h.theme.Material
h.themeMu.Unlock()
if mode == "" {
mode = "system"
}
return bytes.Replace(data, []byte(`<html lang="zh-CN">`), []byte(`<html lang="zh-CN" data-theme-mode="`+mode+`">`), 1), nil
materials := []string{"solid"}
for _, choice := range []string{"mica", "acrylic"} {
if titleBarMaterial(choice) != guigo.TitleBarSolid {
materials = append(materials, choice)
}
}
return bytes.Replace(data, []byte(`<html lang="zh-CN">`), []byte(`<html lang="zh-CN" data-theme-mode="`+mode+`" data-titlebar-choice="`+material+`" data-titlebar-materials="`+strings.Join(materials, ",")+`">`), 1), nil
}
// setTheme 串行保存应用偏好并同步当前窗口配色
// setTheme 串行更新窗口配色及材质，成功保存后确认应用偏好
// 入参: value 已解析的主题偏好
// 返回: error 校验、持久化或窗口更新错误
func (h *Host) setTheme(value applicationTheme) error {
func (h *Host) setTheme(value applicationTheme) (err error) {
if err := value.validate(); err != nil {
return err
}
@@ -103,6 +115,18 @@ func (h *Host) setTheme(value applicationTheme) error {
if window == nil {
return fmt.Errorf("窗口尚未就绪")
}
previous := h.theme
defer func() {
if err != nil {
err = errors.Join(err, window.SetTitleBarMaterial(titleBarMaterial(previous.Material)), window.SetTitleBarColors(themeColors(previous.Dark)))
}
}()
if err = window.SetTitleBarMaterial(titleBarMaterial(value.Material)); err != nil {
return err
}
if err = window.SetTitleBarColors(themeColors(value.Dark)); err != nil {
return err
}
if h.theme != value {
data, err := json.Marshal(value)
if err != nil {
@@ -126,5 +150,22 @@ func (h *Host) setTheme(value applicationTheme) error {
}
h.theme = value
}
return window.SetTitleBarColors(themeColors(value.Dark))
return nil
}
// titleBarMaterial 将应用偏好转换为当前平台支持的原生材质
// 入参: value 材质偏好
// 返回: guigo.TitleBarMaterial 可用的标题栏材质
func titleBarMaterial(value string) guigo.TitleBarMaterial {
material := guigo.TitleBarSolid
switch value {
case "mica":
material = guigo.TitleBarMicaAlt
case "acrylic":
material = guigo.TitleBarAcrylic
}
if !guigo.SupportsTitleBarMaterial(material) {
return guigo.TitleBarSolid
}
return material
}