feat(webview): 网页视图支持自定义网页背景颜色 | Web view supports custom web page ba…

…ckground color.
Zuoqiu-Yingyi · Jul 2, 2023 · 62aab8e · 62aab8e
1 parent 9a8156c
commit 62aab8e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 7 deletions.
diff --git a/public/i18n/en_US.json b/public/i18n/en_US.json
@@ -18,6 +18,10 @@
     "nonStandardURL": "is not standardized, please enter the URL address of the specification"
   },
   "settings": {
+    "backgroundColor": {
+      "description": "The background color of the web page",
+      "title": "Background color"
+    },
     "general": "General",
     "generalSettings": {
       "reset": {

diff --git a/public/i18n/zh_CHT.json b/public/i18n/zh_CHT.json
@@ -18,6 +18,10 @@
     "nonStandardURL": "不規範，請輸入規範的 URL 地址"
   },
   "settings": {
+    "backgroundColor": {
+      "description": "網頁的背景顏色",
+      "title": "背景顏色"
+    },
     "general": "常規",
     "generalSettings": {
       "reset": {

diff --git a/public/i18n/zh_CN.json b/public/i18n/zh_CN.json
@@ -1,15 +1,15 @@
 {
   "displayName": "网页视图",
   "menu": {
+    "openDesktopWindow": {
+      "label": "打开思源桌面端窗口"
+    },
     "openEditor": {
       "label": "在新窗口打开"
     },
     "openFocusedEditor": {
       "label": "在新窗口打开并聚焦"
     },
-    "openDesktopWindow": {
-      "label": "打开思源桌面端窗口"
-    },
     "openMobildWindow": {
       "label": "打开思源移动端窗口"
     }
@@ -18,6 +18,10 @@
     "nonStandardURL": "不规范，请输入规范的 URL 地址"
   },
   "settings": {
+    "backgroundColor": {
+      "description": "网页的背景颜色",
+      "title": "背景颜色"
+    },
     "general": "常规",
     "generalSettings": {
       "reset": {

diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
@@ -173,6 +173,23 @@
             />
         </Item>
 
+        <!-- 背景颜色 -->
+        <Item
+            title={i18n.settings.backgroundColor.title}
+            text={i18n.settings.backgroundColor.description}
+        >
+            <Input
+                slot="input"
+                type={ItemType.text}
+                settingKey="text"
+                settingValue={config.general.backgroundColor}
+                on:changed={e => {
+                    config.general.backgroundColor = e.detail.value;
+                    updated();
+                }}
+            />
+        </Item>
+
         <!-- 重置设置 -->
         <Item
             title={i18n.settings.generalSettings.reset.title}

diff --git a/src/components/Webview.svelte b/src/components/Webview.svelte
@@ -30,6 +30,7 @@
     export let plugin: InstanceType<typeof WebviewPlugin>;
 
     export let useragent: string = plugin.useragent; // 用户代理
+    export let backgroundColor: string = plugin.backgroundColor; // 用户代理
 
     const i18n = plugin.i18n as unknown as I18N;
 
@@ -327,6 +328,7 @@
     </div>
 
     <!-- 主体 -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
         on:mouseenter={e => (webview_pointer_events_disable = e.button === 0 ? false : true)}
         on:mouseleave={() => (webview_pointer_events_disable = true)}
@@ -336,12 +338,14 @@
             bind:this={webview}
             {src}
             {useragent}
+            style:background-color={backgroundColor}
             class:pointer-events-disable={webview_pointer_events_disable}
             class="fn__flex-1"
             allowpopups
         />
     </div>
     {#if status_display}
+        <!-- 状态提示 (显示超链接地址) -->
         <div
             class="webview-status tooltip"
             in:fade={{ delay: 0, duration: 125 }}

diff --git a/src/configs/default.ts b/src/configs/default.ts
@@ -24,6 +24,7 @@ import { EditorType } from "@workspace/utils/siyuan";
 export const DEFAULT_CONFIG: IConfig = {
     general: {
         useragent: "",
+        backgroundColor: "transparent",
     },
     tab: {
         enable: true,

diff --git a/src/index.ts b/src/index.ts
@@ -228,6 +228,11 @@ export default class WebviewPlugin extends siyuan.Plugin {
         return this.config.general.useragent || global.navigator.userAgent;
     }
 
+    /* 获得背景颜色 */
+    public get backgroundColor(): string {
+        return this.config.general.backgroundColor;
+    }
+
     /* 打开新标签页 */
     public openWebviewTab(href: string, title?: string, icon: string = "iconLanguage") {
         siyuan.openTab({
@@ -263,7 +268,10 @@ export default class WebviewPlugin extends siyuan.Plugin {
             const url = new URL(href);
             const window = openNewWindow(
                 url,
-                this.config.window.params,
+                {
+                    backgroundColor: this.backgroundColor,
+                    ...this.config.window.params,
+                },
                 params,
                 webPreferences,
                 this,

diff --git a/src/types/config.d.ts b/src/types/config.d.ts
@@ -22,6 +22,7 @@ import { IMouseStatus, type IKeyboardStatus } from "@workspace/utils/shortcut";
 /* 常规设置 */
 export interface IGeneral {
     useragent: string, // 用户代理
+    backgroundColor: string, // 背景颜色
 }
 
 /* 打开的目标类型 */
@@ -69,6 +70,7 @@ export interface ISiyuanWindow {
 export interface IConfig {
     /* 常规设置 */
     general: IGeneral,
+
     /* 标签页打开 */
     tab: {
         enable: boolean, // 是否启用

diff --git a/src/utils/window.ts b/src/utils/window.ts
@@ -21,9 +21,9 @@ import type { Electron } from "@workspace/types/electron";
 import { isElectron } from "@workspace/utils/env/front-end";
 import { merge } from "@workspace/utils/misc/merge";
 
-import type { IWindowParams } from "./../types/config";
-import { createMenuTemplate } from "../configs/menuTemplae";
-import type WebviewPlugin from "..";
+import type { IWindowParams } from "@/types/config";
+import { createMenuTemplate } from "@/configs/menuTemplae";
+import type WebviewPlugin from "@/index";
 
 /* 菜单栏状态 */
 export enum MenuBarStatus {