🎨 https://github.com/siyuan-note/siyuan/issues/8345

2025-12-21 09:00:12 +01:00 · 2023-06-03 17:55:45 +08:00 · 2023-06-03 17:55:45 +08:00 · ad174f8d56
commit ad174f8d56
parent 922f9ee820
8 changed files with 84 additions and 2 deletions
--- a/app/appearance/icons/ant/icon.js
+++ b/app/appearance/icons/ant/icon.js
@ -1,5 +1,8 @@
 document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconPlugin" viewBox="0 0 32 32">
+    <path d="M14.077 4.077c0.431 0 0.769 0.338 0.769 0.769v3.077h9.231v9.231h3.077c0.431 0 0.769 0.338 0.769 0.769s-0.338 0.769-0.769 0.769h-3.077v9.231h-3.262c-1.046-2.692-3.677-4.615-6.738-4.615s-5.692 1.923-6.738 4.615h-3.262v-3.262c2.692-1.046 4.615-3.677 4.615-6.738s-1.908-5.692-4.6-6.738l-0.015-3.262h9.231v-3.077c0-0.431 0.338-0.769 0.769-0.769zM14.077 1c-2.123 0-3.846 1.723-3.846 3.846h-6.154c-1.692 0-3.062 1.385-3.062 3.077v5.846h0.446c2.292 0 4.154 1.862 4.154 4.154s-1.862 4.154-4.154 4.154h-0.462v5.846c0 1.692 1.385 3.077 3.077 3.077h5.846v-0.462c0-2.292 1.862-4.154 4.154-4.154s4.154 1.862 4.154 4.154v0.462h5.846c1.692 0 3.077-1.385 3.077-3.077v-6.154c2.123 0 3.846-1.723 3.846-3.846s-1.723-3.846-3.846-3.846v-6.154c0-1.692-1.385-3.077-3.077-3.077h-6.154c0-2.123-1.723-3.846-3.846-3.846z"></path>
+  </symbol>
  <symbol id="iconUsers" viewBox="0 0 32 32">
    <path d="M27.707 23.047c-0.915-0.916-1.987-1.676-3.171-2.236l-0.069-0.029c1.699-1.376 2.782-3.476 2.782-5.831 0-4.155-3.465-7.564-7.62-7.5-4.091 0.064-7.387 3.397-7.387 7.5 0 2.355 1.087 4.455 2.782 5.831-1.253 0.589-2.325 1.349-3.24 2.265l-0 0c-2.047 2.051-3.21 4.759-3.285 7.646-0 0.002-0 0.005-0 0.008 0 0.166 0.134 0.3 0.3 0.3 0 0 0 0 0 0h2.1c0.161 0 0.296-0.128 0.3-0.289 0.071-2.175 0.952-4.211 2.501-5.756 1.539-1.547 3.67-2.505 6.025-2.505 0.008 0 0.017 0 0.025 0h-0.001c2.284 0 4.432 0.889 6.049 2.505 1.545 1.545 2.426 3.581 2.501 5.756 0.004 0.161 0.139 0.289 0.3 0.289h2.1c0 0 0 0 0 0 0.166 0 0.3-0.134 0.3-0.3 0-0.003-0-0.005-0-0.008v0c-0.075-2.887-1.237-5.595-3.292-7.646zM19.75 19.75c-1.282 0-2.49-0.499-3.394-1.406-0.869-0.862-1.407-2.057-1.407-3.377 0-0.023 0-0.046 0-0.069l-0 0.003c0.011-1.23 0.502-2.419 1.361-3.3 0.9-0.922 2.104-1.436 3.39-1.451 1.271-0.011 2.505 0.484 3.412 1.372 0.93 0.911 1.44 2.13 1.44 3.427 0 1.282-0.499 2.486-1.406 3.394-0.865 0.869-2.061 1.406-3.384 1.406-0.005 0-0.010 0-0.015-0h0.001zM10.356 15.94c-0.034-0.326-0.053-0.656-0.053-0.99 0-0.596 0.056-1.177 0.161-1.744 0.026-0.135-0.045-0.274-0.169-0.33-0.51-0.229-0.979-0.544-1.384-0.941-0.897-0.87-1.453-2.087-1.453-3.434 0-0.051 0.001-0.101 0.002-0.151l-0 0.007c0.034-1.204 0.517-2.347 1.361-3.21 0.926-0.949 2.171-1.466 3.495-1.451 1.196 0.011 2.351 0.473 3.225 1.29 0.296 0.277 0.551 0.585 0.765 0.915 0.075 0.116 0.221 0.165 0.349 0.12 0.66-0.229 1.357-0.39 2.074-0.465 0.21-0.022 0.33-0.247 0.236-0.435-1.219-2.411-3.709-4.076-6.589-4.121-4.159-0.064-7.623 3.345-7.623 7.496 0 2.355 1.084 4.455 2.782 5.831-1.192 0.551-2.291 1.312-3.244 2.265-2.055 2.051-3.217 4.759-3.292 7.65-0 0.002-0 0.005-0 0.008 0 0.166 0.134 0.3 0.3 0.3 0 0 0 0 0 0h2.104c0.161 0 0.296-0.128 0.3-0.289 0.071-2.175 0.952-4.211 2.501-5.756 1.102-1.102 2.452-1.867 3.926-2.239 0.146-0.038 0.244-0.176 0.225-0.326z"></path>
  </symbol>
--- a/app/appearance/icons/index.html
+++ b/app/appearance/icons/index.html
@ -28,6 +28,12 @@
 <body>
 <h2>SiYuan</h2>
 <div class="fn__clear">
+    <div>
+        <svg>
+            <use xlink:href="#iconPlugin"></use>
+        </svg>
+        iconPlugin
+    </div>
    <div>
        <svg>
            <use xlink:href="#iconUsers"></use>
--- a/app/appearance/icons/material/icon.js
+++ b/app/appearance/icons/material/icon.js
@ -1,5 +1,8 @@
 document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">
 <defs>
+  <symbol id="iconPlugin" viewBox="0 0 32 32">
+    <path d="M14.077 4.077c0.431 0 0.769 0.338 0.769 0.769v3.077h9.231v9.231h3.077c0.431 0 0.769 0.338 0.769 0.769s-0.338 0.769-0.769 0.769h-3.077v9.231h-3.262c-1.046-2.692-3.677-4.615-6.738-4.615s-5.692 1.923-6.738 4.615h-3.262v-3.262c2.692-1.046 4.615-3.677 4.615-6.738s-1.908-5.692-4.6-6.738l-0.015-3.262h9.231v-3.077c0-0.431 0.338-0.769 0.769-0.769zM14.077 1c-2.123 0-3.846 1.723-3.846 3.846h-6.154c-1.692 0-3.062 1.385-3.062 3.077v5.846h0.446c2.292 0 4.154 1.862 4.154 4.154s-1.862 4.154-4.154 4.154h-0.462v5.846c0 1.692 1.385 3.077 3.077 3.077h5.846v-0.462c0-2.292 1.862-4.154 4.154-4.154s4.154 1.862 4.154 4.154v0.462h5.846c1.692 0 3.077-1.385 3.077-3.077v-6.154c2.123 0 3.846-1.723 3.846-3.846s-1.723-3.846-3.846-3.846v-6.154c0-1.692-1.385-3.077-3.077-3.077h-6.154c0-2.123-1.723-3.846-3.846-3.846z"></path>
+  </symbol>
  <symbol id="iconUsers" viewBox="0 0 32 32">
    <path d="M1.424 26.553v-3.1q0-1.154 0.594-2.094t1.649-1.402q2.407-1.055 4.337-1.517t3.974-0.462 3.957 0.462 4.32 1.517q1.055 0.462 1.665 1.402t0.61 2.094v3.1h-21.106zM24.508 26.553v-3.1q0-2.078-1.055-3.413t-2.77-2.16q2.275 0.264 4.287 0.775t3.265 1.171q1.088 0.627 1.715 1.55t0.627 2.078v3.1h-6.068zM11.977 15.967q-2.177 0-3.562-1.385t-1.385-3.562 1.385-3.562 3.562-1.385 3.562 1.385 1.385 3.562-1.385 3.562-3.562 1.385zM23.849 11.020q0 2.177-1.385 3.562t-3.562 1.385q-0.363 0-0.808-0.050t-0.808-0.181q0.791-0.825 1.204-2.028t0.412-2.688-0.412-2.622-1.204-2.094q0.363-0.099 0.808-0.165t0.808-0.066q2.177 0 3.562 1.385t1.385 3.562zM3.402 24.574h17.149v-1.121q0-0.528-0.313-1.022t-0.775-0.693q-2.374-1.055-3.99-1.418t-3.496-0.363-3.512 0.363-4.007 1.418q-0.462 0.198-0.758 0.693t-0.297 1.022v1.121zM11.977 13.988q1.286 0 2.127-0.841t0.841-2.127-0.841-2.127-2.127-0.841-2.127 0.841-0.841 2.127 0.841 2.127 2.127 0.841z"></path>
  </symbol>
--- a/app/src/layout/topBar.ts
+++ b/app/src/layout/topBar.ts
@ -15,6 +15,7 @@ import {webFrame} from "electron";
 /// #endif
 import {Constants} from "../constants";
 import {isBrowser, isWindow} from "../util/functions";
+import {Menu} from "../plugin/API";

 export const updateEditModeElement = () => {
    const target = document.querySelector("#barReadonly");
@ -47,6 +48,9 @@ export const initBar = (app: App) => {
 </button>
 <div class="fn__flex-1 fn__ellipsis" id="drag"><span class="fn__none">开发版，使用前请进行备份 Development version, please backup before use</span></div>
 <div id="toolbarVIP" class="fn__flex${window.siyuan.config.readonly ? " fn__none" : ""}"></div>
+<div id="barPlugins" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.plugin}">
+    <svg><use xlink:href="#iconPlugin"></use></svg>
+</div>
 <div id="barSearch" class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.globalSearch} ${updateHotkeyTip(window.siyuan.config.keymap.general.globalSearch.custom)}">
    <svg><use xlink:href="#iconSearch"></use></svg>
 </div>
@ -177,6 +181,10 @@ export const initBar = (app: App) => {
                });
                event.stopPropagation();
                break;
+            } else if (targetId === "barPlugins") {
+                openPlugin(app, target);
+                event.stopPropagation();
+                break;
            } else if (targetId === "barZoom") {
                if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
                    window.siyuan.menus.menu.element.getAttribute("data-name") === "barZoom") {
@ -259,3 +267,62 @@ export const setZoom = (type: "zoomIn" | "zoomOut" | "restore") => {
    }
    /// #endif
 };
+
+const openPlugin = (app: App, target: Element) => {
+    const menu = new Menu("topBarPlugin");
+    let hasPlugin = false;
+    app.plugins.forEach((plugin) => {
+        // @ts-ignore
+        const hasSetting = plugin.setting || plugin.__proto__.hasOwnProperty("openSetting");
+        plugin.topBarIcons.forEach(item => {
+            const menuOption: IMenu = {
+                icon: "iconInfo",
+                label: item.getAttribute("aria-label"),
+                click() {
+                    item.dispatchEvent(new CustomEvent("click"))
+                },
+                type: "submenu",
+                submenu: [{
+                    icon: "iconPin",
+                    label: window.siyuan.languages.pin,
+                    click() {
+
+                    }
+                }, {
+                    icon: "iconSettings",
+                    label: window.siyuan.languages.config,
+                    disabled: !hasSetting,
+                    click() {
+                        plugin.openSetting();
+                    },
+                }]
+            }
+            if (item.querySelector("use")) {
+                menuOption.icon = item.querySelector("use").getAttribute("xlink:href").replace("#", "");
+            } else {
+                const svgElement = item.querySelector("svg");
+                svgElement.classList.add("b3-menu__icon")
+                menuOption.iconHTML = svgElement.outerHTML;
+            }
+            menu.addItem(menuOption);
+            hasPlugin = true
+        })
+    })
+
+    if (hasPlugin) {
+        menu.addSeparator()
+    }
+    menu.addItem({
+        icon: "iconSettings",
+        label: window.siyuan.languages.config,
+        click() {
+            const dialogSetting = openSetting(app);
+            dialogSetting.element.querySelector('.b3-tab-bar [data-name="bazaar"]').dispatchEvent(new CustomEvent("click"));
+        }
+    });
+    let rect = target.getBoundingClientRect();
+    if (rect.width === 0) {
+        rect = document.querySelector("#barMore").getBoundingClientRect();
+    }
+    menu.open({x: rect.right, y: rect.bottom, isLeft: true})
+}
--- a/app/src/plugin/API.ts
+++ b/app/src/plugin/API.ts
@ -53,7 +53,7 @@ export class Menu {
        this.menu.addSeparator(index);
    }

-    open(options: { x: number, y: number, h?: number, w?: number, isLeft: false }) {
+    open(options: { x: number, y: number, h?: number, w?: number, isLeft?: boolean }) {
        if (this.isOpen) {
            return;
        }
--- a/app/src/plugin/loader.ts
+++ b/app/src/plugin/loader.ts
@ -141,7 +141,7 @@ export const afterLoadPlugin = (plugin: Plugin) => {
            if (isMobile()) {
                document.querySelector("#menuAbout").after(element);
            } else if (!isWindow()) {
-                document.querySelector("#" + (element.getAttribute("data-position") === "right" ? "barSearch" : "drag")).before(element);
+                document.querySelector("#" + (element.getAttribute("data-position") === "right" ? "barPlugins" : "drag")).before(element);
            }
        });
    }
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@ -736,6 +736,7 @@ export class Gutter {
            window.siyuan.menus.menu.append(new MenuItem({type: "separator"}).element);
            window.siyuan.menus.menu.append(new MenuItem({
                label: window.siyuan.languages.plugin,
+                icon: "iconPlugin",
                type: "submenu",
                submenu: pluginSubMenu.menus,
            }).element);
@ -1552,6 +1553,7 @@ export class Gutter {
        if (pluginSubMenu.menus.length > 0) {
            window.siyuan.menus.menu.append(new MenuItem({
                label: window.siyuan.languages.plugin,
+                icon: "iconPlugin",
                type: "submenu",
                submenu: pluginSubMenu.menus,
            }).element);
--- a/app/src/protyle/header/Title.ts
+++ b/app/src/protyle/header/Title.ts
@ -413,6 +413,7 @@ export class Title {
                window.siyuan.menus.menu.append(new MenuItem({ type: "separator" }).element);
                window.siyuan.menus.menu.append(new MenuItem({
                    label: window.siyuan.languages.plugin,
+                    icon: "iconPlugin",
                    type: "submenu",
                    submenu: pluginSubMenu.menus,
                }).element);