✨ fix: #177 窗口卷起功能并固定的功能

Author: Littlefean

app/src-tauri/capabilities/default.json

@@ -19,6 +19,8 @@
     "core:window:allow-destroy",
     "core:window:allow-hide",
     "core:window:allow-set-skip-taskbar",
+    "core:window:allow-set-size",
+    "core:window:allow-set-always-on-top",
     "clipboard-manager:allow-clear",
     "clipboard-manager:allow-read-image",
     "clipboard-manager:allow-write-text",

app/src/pages/_app.tsx

@@ -1,5 +1,17 @@
 import { useAtom } from "jotai";
-import { ChevronDown, ChevronLeft, ChevronUp, Cpu, Diamond, Menu, RectangleEllipsis, Tag, X, Zap } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronUp,
+  Cpu,
+  Diamond,
+  Menu,
+  RectangleEllipsis,
+  SquareArrowUp,
+  Tag,
+  X,
+  Zap,
+} from "lucide-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
@@ -10,7 +22,7 @@ import { StageSaveManager } from "../core/service/dataFileService/StageSaveManag
 import { Settings } from "../core/service/Settings";
 import { Stage } from "../core/stage/Stage";
 import { StageDumper } from "../core/stage/StageDumper";
-import { fileAtom } from "../state";
+import { fileAtom, isWindowCollapsingAtom } from "../state";
 import { cn } from "../utils/cn";
 import { PathString } from "../utils/pathString";
 import { appScale, getCurrentWindow, isDesktop, isMac, isMobile, isWeb } from "../utils/platform";
@@ -21,6 +33,7 @@ import LogicNodePanel from "./_logic_node_panel";
 import RecentFilesPanel from "./_recent_files_panel";
 import StartFilePanel from "./_start_file_panel";
 import TagPanel from "./_tag_panel";
+import { LogicalSize } from "@tauri-apps/api/dpi";
 
 export default function App() {
   const [maxmized, setMaxmized] = React.useState(false);
@@ -37,6 +50,8 @@ export default function App() {
   const [file, setFile] = useAtom(fileAtom);
   const filename = React.useMemo(() => PathString.absolute2file(file), [file]);
   const [useNativeTitleBar, setUseNativeTitleBar] = React.useState(false);
+  const [isWindowCollapsing, setIsWindowCollapsing] = useAtom(isWindowCollapsingAtom);
+
   const { t } = useTranslation("app");
 
   React.useEffect(() => {
@@ -320,17 +335,40 @@ export default function App() {
             )}
           </>
         )}
-
-        {/* 右上角图钉按钮 */}
+        {/* 右上角闪电按钮 */}
         <IconButton
           onClick={(e) => {
             e.stopPropagation();
             setIsStartFilePanelOpen(!isStartFilePanelOpen);
           }}
           tooltip="设置启动时打开的文件"
+          disabled={isMobile}
         >
           <Zap className={cn("cursor-pointer", isStartFilePanelOpen ? "rotate-45 scale-125" : "")} />
         </IconButton>
+        {isDesktop && (
+          <IconButton
+            onClick={async (e) => {
+              e.stopPropagation();
+              // const size = await getCurrentWindow().outerSize();
+              const tauriWindow = getCurrentWindow();
+              if (isWindowCollapsing) {
+                // 纵向展开
+                tauriWindow.setSize(new LogicalSize(1100, 800));
+                tauriWindow.setAlwaysOnTop(false);
+              } else {
+                // 纵向收起
+                tauriWindow.setSize(new LogicalSize(1100, 100));
+                tauriWindow.setAlwaysOnTop(true);
+              }
+              setIsWindowCollapsing(!isWindowCollapsing);
+            }}
+            tooltip={isWindowCollapsing ? "展开并取消顶置窗口" : "卷起并顶置窗口"}
+          >
+            <SquareArrowUp className={cn("cursor-pointer", isWindowCollapsing ? "rotate-180 scale-125" : "")} />
+          </IconButton>
+        )}
+
         {/* 右上角窗口控制按钮 */}
         {isDesktop && !useNativeTitleBar && !isMac && !isWeb && (
           <Button className="right-4 top-4 flex items-center gap-1 active:scale-100">

app/src/pages/index.tsx

@@ -14,6 +14,8 @@ import DetailsEditSidePanel from "./_details_edit_side_panel";
 import HintText from "./_hint_text";
 import SearchingNodePanel from "./_searching_node_panel";
 import Toolbar from "./_toolbar";
+import { useAtom } from "jotai";
+import { isWindowCollapsingAtom } from "../state";
 
 export default function Home() {
   const canvasRef: React.RefObject<HTMLCanvasElement | null> = useRef(null);
@@ -24,6 +26,7 @@ export default function Home() {
   // const [nodeDetailsPanel, setNodeDetailsPanel] = React.useState("vditor");
   const [nodeDetailsPanel] = Settings.use("nodeDetailsPanel");
   const [isProtectPrivacy, setIsProtectPrivacy] = React.useState(false);
+  const [isWindowCollapsing] = useAtom(isWindowCollapsingAtom);
 
   useEffect(() => {
     const handleResize = () => {
@@ -104,11 +107,11 @@ export default function Home() {
 
   return (
     <>
-      <Toolbar />
+      {!isWindowCollapsing && <Toolbar />}
       <SearchingNodePanel />
       {/* 这个打算被取代 */}
       {nodeDetailsPanel === "small" ? <DetailsEditSmallPanel /> : <DetailsEditSidePanel />}
-      <HintText />
+      {!isWindowCollapsing && <HintText />}
       {isMobile && (
         <Button
           className="z-5 absolute bottom-10 left-4"

app/src/state.tsx

@@ -17,3 +17,5 @@ export const isRecentFilePanelOpenAtom = atom(false);
  * 是否显示导出树形纯文本节点面板
  */
 export const isExportTreeTextPanelOpenAtom = atom(false);
+
+export const isWindowCollapsingAtom = atom(false);