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

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "tabToWindow": "Move Tab to New Window",
   "exitFocus": "Exit focus",
   "pointExchangeSize": "Point Exchange",
   "panel": "Panel",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "tabToWindow": "Mover pestaña a nueva ventana",
   "exitFocus": "Salir del enfoque",
   "pointExchangeSize": "Intercambio de puntos",
   "panel": "Panel",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "tabToWindow": "Déplacer l'onglet vers une nouvelle fenêtre",
   "exitFocus": "Quitter le focus",
   "pointExchangeSize": "Échange de points",
   "panel": "Panneau",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "tabToWindow": "移動頁簽到新窗口",
   "exitFocus": "退出聚焦",
   "pointExchangeSize": "積分兌換",
   "panel": "面板",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "tabToWindow": "移动页签到新窗口",
   "exitFocus": "退出聚焦",
   "pointExchangeSize": "积分兑换",
   "panel": "面板",

app/src/assets/scss/base.scss

@@ -184,6 +184,18 @@ progressLoading: 400
     padding-left: 0;
   }
 
+  &__window {
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    z-index: 502;
+
+    .toolbar__item {
+      padding: 14px;
+    }
+  }
+
   #windowAppIcon {
     -webkit-app-region: drag;
     width: 42px;

app/src/menus/tab.ts

@@ -1,7 +1,7 @@
 import {Tab} from "../layout/Tab";
 import {MenuItem} from "./Menu";
 import {Editor} from "../editor";
-import {copyTab} from "../layout/util";
+import {copyTab, layoutToJSON} from "../layout/util";
 /// #if !BROWSER
 import {BrowserWindow} from "@electron/remote";
 import * as path from "path";
@@ -205,10 +205,12 @@ export const initTabMenu = (tab: Tab) => {
     }
     /// #if !BROWSER
     window.siyuan.menus.menu.append(new MenuItem({
-        label: "new window",
+        label: window.siyuan.languages.tabToWindow,
+        icon: "iconMove",
         click: () => {
             const win = new BrowserWindow({
                 show: true,
+                trafficLightPosition: {x: 8, y: 13},
                 width: 1032,
                 height: 650,
                 frame: "darwin" === window.siyuan.config.system.os,
@@ -221,7 +223,10 @@ export const initTabMenu = (tab: Tab) => {
                     webSecurity: false,
                 },
             });
-            win.loadURL(`${window.location.protocol}//${window.location.host}/stage/build/app/window.html?v=${Constants.SIYUAN_VERSION}&id=${rootId}`)
+            const json = {}
+            layoutToJSON(tab, json)
+            win.loadURL(`${window.location.protocol}//${window.location.host}/stage/build/app/window.html?v=${Constants.SIYUAN_VERSION}&json=${JSON.stringify(json)}`)
+            tab.parent.removeTab(tab.id);
         }
     }).element);
     /// #endif

app/src/util/onGetConfig.ts

@@ -518,7 +518,7 @@ export const initWindow = () => {
     </svg>
 </div>`;
     if (isWindow()) {
-        document.body.insertAdjacentHTML("beforeend", `<div style="position: fixed;top: 0;right: 0;display: flex;z-index: 502;">${controlsHTML}</div>`)
+        document.body.insertAdjacentHTML("beforeend", `<div class="toolbar__window">${controlsHTML}</div>`)
     } else {
         document.getElementById("windowControls").innerHTML = controlsHTML;
     }

app/src/window/index.ts

@@ -1,13 +1,13 @@
-import {Constants} from "./constants";
-import {Menus} from "./menus";
-import {Model} from "./layout/Model";
-import "./assets/scss/base.scss";
-import {initBlockPopover} from "./block/popover";
-import {addScript, addScriptSync} from "./protyle/util/addScript";
-import {genUUID} from "./util/genID";
-import {fetchGet, fetchPost} from "./util/fetch";
-import {addBaseURL, setNoteBook} from "./util/pathName";
-import {openFileById} from "./editor/util";
+import {Constants} from "../constants";
+import {Menus} from "../menus";
+import {Model} from "../layout/Model";
+import "../assets/scss/base.scss";
+import {initBlockPopover} from "../block/popover";
+import {addScript, addScriptSync} from "../protyle/util/addScript";
+import {genUUID} from "../util/genID";
+import {fetchGet, fetchPost} from "../util/fetch";
+import {addBaseURL, setNoteBook} from "../util/pathName";
+import {openFileById} from "../editor/util";
 import {
     downloadProgress,
     processSync, progressBackgroundTask,
@@ -15,12 +15,12 @@ import {
     progressStatus,
     setTitle,
     transactionError
-} from "./dialog/processSystem";
-import {promiseTransactions} from "./protyle/wysiwyg/transaction";
-import {initMessage} from "./dialog/message";
-import {getAllTabs} from "./layout/getAll";
-import {getLocalStorage} from "./protyle/util/compatibility";
-import {init} from "./window/init";
+} from "../dialog/processSystem";
+import {promiseTransactions} from "../protyle/wysiwyg/transaction";
+import {initMessage} from "../dialog/message";
+import {getAllTabs} from "../layout/getAll";
+import {getLocalStorage} from "../protyle/util/compatibility";
+import {init} from "../window/init";
 
 class App {
     constructor() {

app/src/window/init.ts

@@ -16,27 +16,16 @@ export const init = () => {
     globalShortcut();
     fetchPost("/api/system/getEmojiConf", {}, response => {
         window.siyuan.emojis = response.data as IEmoji[];
-        const id = getSearch("id");
+        const tabJSON = JSON.parse(getSearch("json"));
         JSONToCenter({
-            "direction": "lr",
-            "resize": "lr",
-            "size": "auto",
-            "type": "center",
-            "instance": "Layout",
-            "children": [{
-                "instance": "Wnd",
-                "children": [{
-                    "instance": "Tab",
-                    active: true,
-                    docIcon: "1f389",
-                    title: "请从这里开始",
-                    "children": [{
-                        rootId: id,
-                        blockId: id,
-                        instance: "Editor",
-                        mode: "wysiwyg"
-                    }]
-                }]
+            direction: "lr",
+            resize: "lr",
+            size: "auto",
+            type: "center",
+            instance: "Layout",
+            children: [{
+                instance: "Wnd",
+                children: [tabJSON]
             }]
         });
         window.siyuan.layout.centerLayout = window.siyuan.layout.layout;

app/src/window/setHeader.ts

@@ -39,7 +39,7 @@ export const setTabPosition = () => {
             }
         } else {
             if (rect.top <= 0 && rect.right >= window.innerWidth) {
-                (headerElement.lastElementChild as HTMLElement).style.paddingRight = (32 * 3) + "px";
+                (headerElement.lastElementChild as HTMLElement).style.paddingRight = (42 * 3) + "px";
             } else {
                 (headerElement.lastElementChild as HTMLElement).style.paddingRight = "";
             }

app/webpack.config.js

@@ -19,7 +19,7 @@ module.exports = (env, argv) => {
     },
     entry: {
       'main': './src/index.ts',
-      'window': './src/window.ts',
+      'window': './src/window/index.ts',
     },
     resolve: {
       extensions: ['.ts', '.js', '.tpl', '.scss', '.png', '.svg'],