feat(界面设计): 全界面材质适配

assets/webui/ofdgo.css

@@ -203,12 +203,28 @@
 	user-select: none;
 }
 
-:root[data-titlebar-material],
-:root[data-titlebar-material] body,
-:root[data-titlebar-material] .document-titlebar {
+:root[data-window-material],
+:root[data-window-material] body,
+:root[data-window-material] .document-titlebar {
 	background: transparent;
 }
 
+:root[data-window-material] :is(.toolbar-frame, .editor-toolbar, .app-footer, .document-tab[data-selected="true"]) {
+	background: color-mix(in srgb, var(--bar-bg) 65%, transparent);
+}
+
+:root[data-window-material] .toolbar-frame > .toolbar {
+	background: transparent;
+}
+
+:root[data-window-material] :is(.page-list-panel, .meta-panel) {
+	background: color-mix(in srgb, var(--panel) 70%, transparent);
+}
+
+:root[data-window-material] .viewer-panel {
+	background-color: color-mix(in srgb, var(--canvas) 50%, transparent);
+}
+
 .document-titlebar::before {
 	content: "";
 	position: absolute;

assets/webui/ofdgo.js

@@ -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 || info.material === 2);
+	document.documentElement.toggleAttribute("data-window-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

@@ -3,7 +3,7 @@
 	const preference = matchMedia("(prefers-color-scheme: dark)");
 	const key = "ofdgo.theme";
 	let mode = root.dataset.themeMode || "system";
-	let material = root.dataset.titlebarChoice || "acrylic";
+	let material = root.dataset.windowChoice || "acrylic";
 	let host = null, report = null, pending = Promise.resolve(), revision = 0, committed = null;
 	if (!root.dataset.themeMode) {
 		try { mode = localStorage.getItem(key) || "system"; } catch {}
@@ -57,7 +57,7 @@
 	window.ofdgoTheme = {set, flush, connect(value, onError) {
 		host = value;
 		report = onError;
-		const materials = (root.dataset.titlebarMaterials || "").split(",");
+		const materials = (root.dataset.windowMaterials || "").split(",");
 		if (host && materials.length > 1) {
 			document.querySelector(".appearance-material").hidden = false;
 			for (const button of document.querySelectorAll("[data-material-choice]")) {

go.mod

@@ -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-20261031024401-21bc22729961
+	github.com/xiaoqidun/guigo v0.0.0-20261031042954-4f7b3d9d7efd
 	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

@@ -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-20261031024401-21bc22729961 h1:syGJJRYLYuGEv8d0bcSZBFBxJDy2Omq/gpnJ7CVbQLg=
-github.com/xiaoqidun/guigo v0.0.0-20261031024401-21bc22729961/go.mod h1:bXz+dPMVntPIVwePTTuMXt8Q0z1YoUGuROQSsXyUEfY=
+github.com/xiaoqidun/guigo v0.0.0-20261031042954-4f7b3d9d7efd h1:hhjluGQoMk8xv1KG/r/I92QvoUHUdD3/V8l4LlaVlyk=
+github.com/xiaoqidun/guigo v0.0.0-20261031042954-4f7b3d9d7efd/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

@@ -112,7 +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)
+	options.WindowMaterial = windowMaterial(h.theme.Material)
 	data, err := json.Marshal(paths)
 	if err != nil {
 		return err
@@ -1213,16 +1213,16 @@ func windowOptions(dataDir string) (guigo.Options, error) {
 	if err != nil {
 		return guigo.Options{}, err
 	}
-	material := guigo.TitleBarSolid
-	if guigo.SupportsTitleBarMaterial(guigo.TitleBarAcrylic) {
-		material = guigo.TitleBarAcrylic
+	material := guigo.WindowSolid
+	if guigo.SupportsWindowMaterial(guigo.WindowAcrylic) {
+		material = guigo.WindowAcrylic
 	}
 	return guigo.Options{
 		AppID:          appID,
 		Title:          "OFDGo - OFD编辑器",
 		TitleBar:       guigo.TitleBarContent,
 		TitleBarColors: themeColors(false),
-		TitleBarMaterial: material,
+		WindowMaterial: material,
 		Icon:           icon,
 		Width:          1440,
 		Height:         900,

internal/webview/webview_theme.go

@@ -29,7 +29,7 @@ import (
 	webuiassets "github.com/xiaoqidun/ofdgo/assets/webui"
 )
 
-// applicationTheme 保存主题、标题材质及最后一次解析的系统外观
+// applicationTheme 保存主题、窗口材质及最后一次解析的系统外观
 type applicationTheme struct {
 	Mode     string `json:"mode"`
 	Dark     bool   `json:"dark"`
@@ -73,7 +73,7 @@ func (a applicationTheme) validate() error {
 		return fmt.Errorf("主题配色无效")
 	}
 	if a.Material != "solid" && a.Material != "mica" && a.Material != "acrylic" {
-		return fmt.Errorf("标题材质无效")
+		return fmt.Errorf("窗口材质无效")
 	}
 	return nil
 }
@@ -93,11 +93,15 @@ func (h *Host) themeIndex() ([]byte, error) {
 	}
 	materials := []string{"solid"}
 	for _, choice := range []string{"acrylic", "mica"} {
-		if titleBarMaterial(choice) != guigo.TitleBarSolid {
+		if windowMaterial(choice) != guigo.WindowSolid {
 			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
+	background := ""
+	if windowMaterial(material) != guigo.WindowSolid {
+		background = " data-window-material"
+	}
+	return bytes.Replace(data, []byte(`<html lang="zh-CN">`), []byte(`<html lang="zh-CN" data-theme-mode="`+mode+`" data-window-choice="`+material+`" data-window-materials="`+strings.Join(materials, ",")+`"`+background+`>`), 1), nil
 }
 
 // setTheme 串行更新窗口配色及材质，成功保存后确认应用偏好
@@ -118,10 +122,10 @@ func (h *Host) setTheme(value applicationTheme) (err error) {
 	previous := h.theme
 	defer func() {
 		if err != nil {
-			err = errors.Join(err, window.SetTitleBarMaterial(titleBarMaterial(previous.Material)), window.SetTitleBarColors(themeColors(previous.Dark)))
+			err = errors.Join(err, window.SetWindowMaterial(windowMaterial(previous.Material)), window.SetTitleBarColors(themeColors(previous.Dark)))
 		}
 	}()
-	if err = window.SetTitleBarMaterial(titleBarMaterial(value.Material)); err != nil {
+	if err = window.SetWindowMaterial(windowMaterial(value.Material)); err != nil {
 		return err
 	}
 	if err = window.SetTitleBarColors(themeColors(value.Dark)); err != nil {
@@ -153,19 +157,19 @@ func (h *Host) setTheme(value applicationTheme) (err error) {
 	return nil
 }
 
-// titleBarMaterial 将应用偏好转换为当前平台支持的原生材质
+// windowMaterial 将应用偏好转换为当前平台支持的原生材质
 // 入参: value 材质偏好
-// 返回: guigo.TitleBarMaterial 可用的标题栏材质
-func titleBarMaterial(value string) guigo.TitleBarMaterial {
-	material := guigo.TitleBarSolid
+// 返回: guigo.WindowMaterial 可用的窗口材质
+func windowMaterial(value string) guigo.WindowMaterial {
+	material := guigo.WindowSolid
 	switch value {
 	case "mica":
-		material = guigo.TitleBarMica
+		material = guigo.WindowMica
 	case "acrylic":
-		material = guigo.TitleBarAcrylic
+		material = guigo.WindowAcrylic
 	}
-	if !guigo.SupportsTitleBarMaterial(material) {
-		return guigo.TitleBarSolid
+	if !guigo.SupportsWindowMaterial(material) {
+		return guigo.WindowSolid
 	}
 	return material
 }