init frontend

2026-06-04 22:32:55 +00:00 · 2025-07-05 23:22:48 +08:00
parent 94953a5eac
commit 602f4629ff
771 changed files with 194268 additions and 1 deletions
@@ -0,0 +1,149 @@
+import React from "react";
+import { MainMenu } from "../../packages/excalidraw/index";
+import { LanguageList } from "./LanguageList";
+import { useAtom, useSetAtom } from "jotai";
+import { userAtom, saveAsDialogAtom } from "../app-jotai";
+import {
+  GithubIcon,
+  saveAs,
+  extraToolsIcon,
+} from "../../packages/excalidraw/components/icons";
+import DropdownMenuItemLink from "../../packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink";
+import { useI18n } from "../../packages/excalidraw/i18n";
+
+export const AppMainMenu: React.FC<{
+  onCollabDialogOpen: () => any;
+  isCollaborating: boolean;
+  isCollabEnabled: boolean;
+  onStorageSettingsClick: () => void;
+}> = React.memo((props) => {
+  const [user, setUser] = useAtom(userAtom);
+  const { t } = useI18n();
+  const setSaveAsDialog = useSetAtom(saveAsDialogAtom);
+
+  const handleLogin = () => {
+    window.location.href = "/auth/github/login";
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem("token");
+    setUser(null);
+    window.location.reload(); // Reload to clear all state
+  };
+
+  return (
+    <MainMenu>
+      <MainMenu.DefaultItems.LoadScene />
+      <MainMenu.DefaultItems.SaveToActiveFile />
+      <MainMenu.Item
+        onSelect={() => setSaveAsDialog({ isOpen: true })}
+        icon={saveAs}
+      >
+        Save as New Canvas...
+      </MainMenu.Item>
+      <MainMenu.DefaultItems.Export />
+      {props.isCollabEnabled && (
+        <MainMenu.DefaultItems.LiveCollaborationTrigger
+          isCollaborating={props.isCollaborating}
+          onSelect={() => props.onCollabDialogOpen()}
+        />
+      )}
+
+      <MainMenu.DefaultItems.Help />
+      <MainMenu.DefaultItems.ClearCanvas />
+      <MainMenu.Separator />
+      <MainMenu.Item
+        onSelect={props.onStorageSettingsClick}
+        icon={extraToolsIcon}
+      >
+        Data Source Settings...
+      </MainMenu.Item>
+      <MainMenu.Separator />
+      {user ? (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "0.5rem",
+            padding: "0 0.5rem",
+            width: "100%",
+            fontSize: "14px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              overflow: "hidden",
+              flexShrink: 1,
+            }}
+          >
+            <img
+              src={user.avatarUrl}
+              alt={user.login}
+              style={{
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                flexShrink: 0,
+              }}
+            />
+            <span
+              style={{
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {user.name || user.login}
+            </span>
+          </div>
+          <button
+            onClick={handleLogout}
+            style={{
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "0.25rem 0.5rem",
+              borderRadius: "4px",
+              textAlign: "center",
+              color: "inherit",
+              flexShrink: 0,
+              marginRight: "1rem",
+              font: "var(--ui-font)",
+              fontSize: "14px",
+            }}
+            onMouseOver={(e) =>
+              (e.currentTarget.style.background = "var(--button-gray-1)")
+            }
+            onMouseOut={(e) =>
+              (e.currentTarget.style.background = "transparent")
+            }
+          >
+            Logout
+          </button>
+        </div>
+      ) : (
+        <MainMenu.Item onSelect={handleLogin} icon={GithubIcon}>
+          Login with GitHub
+        </MainMenu.Item>
+      )}
+      <MainMenu.Separator />
+      <DropdownMenuItemLink
+        icon={GithubIcon}
+        href="https://github.com/excalidraw/excalidraw"
+        aria-label="GitHub"
+      >
+        GitHub
+      </DropdownMenuItemLink>
+      <MainMenu.Separator />
+      <MainMenu.DefaultItems.ToggleTheme />
+      <MainMenu.ItemCustom>
+        <LanguageList style={{ width: "100%" }} />
+      </MainMenu.ItemCustom>
+      <MainMenu.DefaultItems.ChangeCanvasBackground />
+    </MainMenu>
+  );
+});