diff --git a/app/src/layout/topBar.ts b/app/src/layout/topBar.ts
new file mode 100644
index 000000000..ca10c221a
--- /dev/null
+++ b/app/src/layout/topBar.ts
@@ -0,0 +1,128 @@
+import {getWorkspaceName} from "../util/noRelyPCFunction";
+import {updateHotkeyTip} from "../protyle/util/compatibility";
+import {processSync} from "../dialog/processSystem";
+import {goBack, goForward} from "../util/backForward";
+import {syncGuide} from "../sync/syncGuide";
+import {workspaceMenu} from "../menus/workspace";
+import {editor} from "../config/editor";
+import {MenuItem} from "../menus/Menu";
+import {setMode} from "../util/assets";
+import {openSetting} from "../config";
+import {openSearch} from "../search/spread";
+import {setProxy} from "../util/onGetConfig";
+
+export const updateEditModeElement = () => {
+ const target = document.querySelector("#barReadonly");
+ if (window.siyuan.config.editor.readOnly) {
+ target.classList.add("toolbar__item--active");
+ target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editMode} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
+ target.querySelector("use").setAttribute("xlink:href", "#iconPreview");
+ } else {
+ target.classList.remove("toolbar__item--active");
+ target.setAttribute("aria-label", `${window.siyuan.languages.use} ${window.siyuan.languages.editReadonly} ${updateHotkeyTip(window.siyuan.config.keymap.general.editMode.custom)}`);
+ target.querySelector("use").setAttribute("xlink:href", "#iconEdit");
+ }
+};
+export const initBar = () => {
+ const toolbarElement = document.getElementById("toolbar");
+ toolbarElement.innerHTML = `
+
+ ${getWorkspaceName()}
+
+
+
+
+
+
+
+开发版，使用前请进行备份 Development version, please backup before use
+
+
+
+
+
+
+
+
+
+
+`;
+ processSync();
+ toolbarElement.addEventListener("click", (event: MouseEvent) => {
+ let target = event.target as HTMLElement;
+ while (!target.classList.contains("toolbar")) {
+ if (target.id === "barBack") {
+ goBack();
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barForward") {
+ goForward();
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barSync") {
+ syncGuide(target);
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barWorkspace") {
+ workspaceMenu(target.getBoundingClientRect());
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barReadonly") {
+ editor.setReadonly();
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barMode") {
+ if (!window.siyuan.menus.menu.element.classList.contains("fn__none") &&
+ window.siyuan.menus.menu.element.getAttribute("data-name") === "barmode") {
+ window.siyuan.menus.menu.remove();
+ return;
+ }
+ window.siyuan.menus.menu.remove();
+ window.siyuan.menus.menu.element.setAttribute("data-name", "barmode");
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: window.siyuan.languages.themeLight,
+ icon: "iconLight",
+ current: window.siyuan.config.appearance.mode === 0 && !window.siyuan.config.appearance.modeOS,
+ click: () => {
+ setMode(0);
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: window.siyuan.languages.themeDark,
+ current: window.siyuan.config.appearance.mode === 1 && !window.siyuan.config.appearance.modeOS,
+ icon: "iconDark",
+ click: () => {
+ setMode(1);
+ }
+ }).element);
+ window.siyuan.menus.menu.append(new MenuItem({
+ label: window.siyuan.languages.themeOS,
+ current: window.siyuan.config.appearance.modeOS,
+ icon: "iconMode",
+ click: () => {
+ setMode(2);
+ }
+ }).element);
+ const rect = target.getBoundingClientRect();
+ window.siyuan.menus.menu.popup({x: rect.right, y: rect.bottom}, true);
+ event.stopPropagation();
+ break;
+ } else if (target.id === "toolbarVIP") {
+ const dialogSetting = openSetting();
+ dialogSetting.element.querySelector('.b3-tab-bar [data-name="account"]').dispatchEvent(new CustomEvent("click"));
+ event.stopPropagation();
+ break;
+ } else if (target.id === "barSearch") {
+ openSearch(window.siyuan.config.keymap.general.globalSearch.custom);
+ event.stopPropagation();
+ break;
+ }
+ target = target.parentElement;
+ }
+ });
+ setProxy();
+};