💄 优化UI

LiRenTech · Jan 13, 2025 · 9b98eba · 9b98eba
1 parent f5532a8
commit 9b98eba
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 68 deletions.
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -179,9 +179,11 @@ export default function App() {
   React.useEffect(() => {
     if (file === Stage.Path.draftName) {
       getCurrentWindow().setTitle(Stage.Path.draftName);
+      document.title = Stage.Path.draftName;
       Stage.Path.setPathInEffect(Stage.Path.draftName);
     } else {
       getCurrentWindow().setTitle(`${filename} - Project Graph`);
+      document.title = `${filename} - Project Graph`;
       Stage.Path.setPathInEffect(file);
     }
   }, [file]);
@@ -297,7 +299,7 @@ export default function App() {
           />
         </IconButton>
         {/* 中间标题 */}
-        {useNativeTitleBar ? (
+        {useNativeTitleBar || isWeb ? (
           // h-0 才能完全摆脱划线时经过此区域的卡顿问题
           <div className="pointer-events-none h-0 flex-1"></div>
         ) : (

diff --git a/src/pages/_app_menu.tsx b/src/pages/_app_menu.tsx
@@ -352,7 +352,7 @@ export default function AppMenu({
   return (
     <div
       className={cn(
-        "!pointer-events-none flex origin-top-left scale-0 flex-col gap-4 rounded-md border border-neutral-700 bg-neutral-800 p-3 opacity-0",
+        "!pointer-events-none flex origin-top-left scale-0 flex-col gap-4 rounded-md border border-neutral-700 bg-neutral-800/20 p-3 opacity-0 backdrop-blur-sm",
         {
           "!pointer-events-auto scale-100 opacity-100": open,
         },
@@ -367,48 +367,59 @@ export default function AppMenu({
         <Col icon={<FileText />} onClick={onOpen}>
           {t("file.items.open")}
         </Col>
-        <Col icon={<FileText />} onClick={() => setRecentFilePanelOpen(true)}>
-          {t("file.items.recent")}
-        </Col>
-        <Col icon={<Save />} onClick={onSave}>
-          {t("file.items.save")}
-        </Col>
+        {!isWeb && (
+          <>
+            <Col
+              icon={<FileText />}
+              onClick={() => setRecentFilePanelOpen(true)}
+            >
+              {t("file.items.recent")}
+            </Col>
+            <Col icon={<Save />} onClick={onSave}>
+              {t("file.items.save")}
+            </Col>
+          </>
+        )}
         <Col icon={<Save />} onClick={onSaveNew}>
           {t("file.items.saveAs")}
         </Col>
 
-        <Col icon={<Database />} onClick={onBackup}>
-          {t("file.items.backup")}
-        </Col>
-      </Row>
-      <Row icon={<Folder />} title={t("location.title")}>
-        <Col
-          icon={<FolderCog />}
-          onClick={async () => {
-            Dialog.show({
-              title: "数据文件夹位置",
-              type: "info",
-              code: await dataDir(),
-              content: "软件数据文件夹位置",
-            });
-          }}
-        >
-          {t("location.items.openDataFolder")}
-        </Col>
-        <Col
-          icon={<FolderOpen />}
-          onClick={() => {
-            Dialog.show({
-              title: "数据文件夹位置",
-              type: "info",
-              code: file,
-              content: "软件数据文件夹位置",
-            });
-          }}
-        >
-          {t("location.items.openProjectFolder")}
-        </Col>
+        {!isWeb && (
+          <Col icon={<Database />} onClick={onBackup}>
+            {t("file.items.backup")}
+          </Col>
+        )}
       </Row>
+      {!isWeb && (
+        <Row icon={<Folder />} title={t("location.title")}>
+          <Col
+            icon={<FolderCog />}
+            onClick={async () => {
+              Dialog.show({
+                title: "数据文件夹位置",
+                type: "info",
+                code: await dataDir(),
+                content: "软件数据文件夹位置",
+              });
+            }}
+          >
+            {t("location.items.openDataFolder")}
+          </Col>
+          <Col
+            icon={<FolderOpen />}
+            onClick={() => {
+              Dialog.show({
+                title: "数据文件夹位置",
+                type: "info",
+                code: file,
+                content: "软件数据文件夹位置",
+              });
+            }}
+          >
+            {t("location.items.openProjectFolder")}
+          </Col>
+        </Row>
+      )}
       <Row icon={<File />} title={t("export.title")}>
         <Col icon={<FileCode />} onClick={onSaveSVGNew}>
           {t("export.items.exportAsSVGByAll")}
@@ -454,23 +465,25 @@ export default function AppMenu({
           {t("more.items.welcome")}
         </Col>
       </Row>
-      <Row icon={<AppWindow />} title={t("window.title")}>
-        {import.meta.env.DEV && (
-          <Col icon={<RefreshCcw />} onClick={() => window.location.reload()}>
-            重载
+      {!isWeb && (
+        <Row icon={<AppWindow />} title={t("window.title")}>
+          {import.meta.env.DEV && (
+            <Col icon={<RefreshCcw />} onClick={() => window.location.reload()}>
+              重载
+            </Col>
+          )}
+          <Col
+            icon={<Fullscreen />}
+            onClick={() =>
+              getCurrentWindow()
+                .isFullscreen()
+                .then((res) => getCurrentWindow().setFullscreen(!res))
+            }
+          >
+            {t("window.items.fullscreen")}
           </Col>
-        )}
-        <Col
-          icon={<Fullscreen />}
-          onClick={() =>
-            getCurrentWindow()
-              .isFullscreen()
-              .then((res) => getCurrentWindow().setFullscreen(!res))
-          }
-        >
-          {t("window.items.fullscreen")}
-        </Col>
-      </Row>
+        </Row>
+      )}
       <Row icon={<Dock />} title="测试">
         <Col icon={<TestTube2 />} onClick={() => navigate("/test")}>
           测试页面

diff --git a/src/pages/_toolbar.tsx b/src/pages/_toolbar.tsx
@@ -1,10 +1,5 @@
-import { open } from "@tauri-apps/plugin-shell";
-import { useEffect, useState } from "react";
-import { Color } from "../core/dataStruct/Color";
-import { StageManager } from "../core/stage/stageManager/StageManager";
-import { cn } from "../utils/cn";
-// https://lucide.dev/icons
 import { save as saveFileDialog } from "@tauri-apps/plugin-dialog";
+import { open } from "@tauri-apps/plugin-shell";
 import {
   AlignCenterHorizontal,
   AlignCenterVertical,
@@ -20,33 +15,36 @@ import {
   ClipboardX,
   Globe,
   LayoutDashboard,
+  Network,
   Package,
   PaintBucket,
+  RefreshCcw,
   Repeat,
   SaveAll,
   Square,
   Tag,
   Trash2,
-  RefreshCcw,
-  Network,
 } from "lucide-react";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Box from "../components/ui/Box";
 import Button from "../components/ui/Button";
 import Input from "../components/ui/Input";
 import { ApiKeyManager } from "../core/ai/ApiKeyManager";
+import { Color } from "../core/dataStruct/Color";
 import { TextRiseEffect } from "../core/effect/concrete/TextRiseEffect";
 import { ViewFlashEffect } from "../core/effect/concrete/ViewFlashEffect";
 import { Stage } from "../core/stage/Stage";
 import { StageDumper } from "../core/stage/StageDumper";
 import { StageDumperSvg } from "../core/stage/StageDumperSvg";
+import { StageManager } from "../core/stage/stageManager/StageManager";
+import { cn } from "../utils/cn";
 // import { StageSaveManager } from "../core/stage/StageSaveManager";
 import { Dialog } from "../utils/dialog";
 import { writeTextFile } from "../utils/fs";
 import { Popup } from "../utils/popup";
 // import { PathString } from "../utils/pathString";
-import ColorManagerPanel from "./_color_manager_panel";
 import { ColorManager } from "../core/ColorManager";
+import ColorManagerPanel from "./_color_manager_panel";
 
 interface ToolbarItemProps {
   icon: React.ReactNode; // 定义 icon 的类型
@@ -79,7 +77,7 @@ function ColorPanel() {
     ColorManager.getUserEntityFillColors().then((colors) => {
       setCurrentColors(colors);
     });
-  });
+  }, []);
   return (
     <>
       <div className="flex flex-wrap items-center justify-center">
@@ -335,7 +333,7 @@ export default function Toolbar({ className = "" }: { className?: string }) {
     >
       <Box
         className={cn(
-          "flex w-10 origin-right scale-[10%] flex-col items-center gap-4 rounded-full bg-white px-8 py-6 opacity-25 group-hover/wrapper:scale-100 group-hover/wrapper:bg-neutral-800 group-hover/wrapper:opacity-100",
+          "flex w-10 origin-right scale-[10%] flex-col items-center gap-4 rounded-full bg-white px-8 py-6 opacity-25 backdrop-blur-sm group-hover/wrapper:scale-100 group-hover/wrapper:bg-neutral-800/20 group-hover/wrapper:opacity-100",
           className,
         )}
       >

diff --git a/src/utils/dialog.tsx b/src/utils/dialog.tsx
@@ -69,7 +69,7 @@ export namespace Dialog {
     React.useEffect(() => {
       setTimeout(() => {
         setShow(true);
-      }, 1);
+      }, 10);
     }, []);
 
     return (