feat: 添加基于NodeBB的用户系统

Author: zty012

app/src/core/service/GlobalMenu.tsx

@@ -1,3 +1,5 @@
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
 import {
   Menubar,
   MenubarContent,
@@ -9,8 +11,6 @@ import {
   MenubarSubTrigger,
   MenubarTrigger,
 } from "@/components/ui/menubar";
-import { Button } from "@/components/ui/button";
-import { Dialog } from "@/components/ui/dialog";
 
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
@@ -20,10 +20,18 @@ import { activeProjectAtom, isClassroomModeAtom, projectsAtom, store } from "@/s
 import AIWindow from "@/sub/AIWindow";
 import AttachmentsWindow from "@/sub/AttachmentsWindow";
 import ExportPngWindow from "@/sub/ExportPngWindow";
+import FindWindow from "@/sub/FindWindow";
+import LoginWindow from "@/sub/LoginWindow";
 import NodeDetailsWindow from "@/sub/NodeDetailsWindow";
+import RecentFilesWindow from "@/sub/RecentFilesWindow";
 import SettingsWindow from "@/sub/SettingsWindow";
+import TestWindow from "@/sub/TestWindow";
+import UserWindow from "@/sub/UserWindow";
 import { getDeviceId } from "@/utils/otherApi";
+import { PathString } from "@/utils/pathString";
+import { Color, Vector } from "@graphif/data-structures";
 import { deserialize, serialize } from "@graphif/serializer";
+import { Rectangle } from "@graphif/shapes";
 import { Decoder } from "@msgpack/msgpack";
 import { getVersion } from "@tauri-apps/api/app";
 import { appCacheDir, dataDir, join } from "@tauri-apps/api/path";
@@ -90,15 +98,9 @@ import { LineEdge } from "../stage/stageObject/association/LineEdge";
 import { TextNode } from "../stage/stageObject/entity/TextNode";
 import { RecentFileManager } from "./dataFileService/RecentFileManager";
 import { FeatureFlags } from "./FeatureFlags";
-import { Telemetry } from "./Telemetry";
-import { SubWindow } from "./SubWindow";
-import { Rectangle } from "@graphif/shapes";
-import { Color, Vector } from "@graphif/data-structures";
-import FindWindow from "@/sub/FindWindow";
 import { Settings } from "./Settings";
-import TestWindow from "@/sub/TestWindow";
-import { PathString } from "@/utils/pathString";
-import RecentFilesWindow from "@/sub/RecentFilesWindow";
+import { SubWindow } from "./SubWindow";
+import { Telemetry } from "./Telemetry";
 
 const Content = MenubarContent;
 const Item = MenubarItem;
@@ -1005,6 +1007,8 @@ export function GlobalMenu() {
                 >
                   输出选中节点的详细信息
                 </Item>
+                <Item onClick={() => LoginWindow.open()}>login</Item>
+                <Item onClick={() => UserWindow.open()}>user</Item>
               </SubContent>
             </Sub>
           </Content>

app/src/sub/LoginWindow.tsx

@@ -0,0 +1,87 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { SubWindow } from "@/core/service/SubWindow";
+import { Vector } from "@graphif/data-structures";
+import { Rectangle } from "@graphif/shapes";
+import { fetch } from "@tauri-apps/plugin-http";
+import { open } from "@tauri-apps/plugin-shell";
+import { Check, ExternalLink, KeyRound, User } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export default function LoginWindow() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function login() {
+    // 获取 CSRF Token
+    const loginPageHtml = await (await fetch("https://bbs.project-graph.top/login")).text();
+    const csrfTokenMatch = loginPageHtml.match(/"csrf_token":"([a-z0-9]+)"/);
+    if (!csrfTokenMatch) {
+      throw new Error("获取 CSRF Token 失败");
+    }
+    const csrfToken = csrfTokenMatch[1];
+    // 发送登录请求，获取 Cookie
+    const response = await fetch("https://bbs.project-graph.top/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: new URLSearchParams({
+        username: username,
+        password: password,
+        noscript: "false",
+        remember: "on",
+        _csrf: csrfToken,
+      }).toString(),
+    });
+    if (response.status !== 200) {
+      const data = await response.text();
+      if (data === "Forbidden") {
+        throw new Error("CSRF Token 不正确");
+      } else if (data === "[[error:invalid-login-credentials]]") {
+        throw new Error("无效的登录凭证");
+      }
+      return;
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-4">
+      <span className="flex items-center gap-4">
+        <User />
+        <Input placeholder="邮箱 / 用户名" value={username} onChange={(e) => setUsername(e.target.value)} />
+      </span>
+      <span className="flex items-center gap-4">
+        <KeyRound />
+        <Input placeholder="密码" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+      </span>
+      <span className="flex gap-4">
+        <Button
+          onClick={() =>
+            toast.promise(login, {
+              loading: "正在登录...",
+              success: "登录成功",
+              error: (err) => `登录失败: ${err.message}`,
+            })
+          }
+        >
+          <Check />
+          登录
+        </Button>
+        <Button variant="outline" onClick={() => open("https://bbs.project-graph.top/register")}>
+          <ExternalLink />
+          前往注册
+        </Button>
+      </span>
+    </div>
+  );
+}
+
+LoginWindow.open = () => {
+  SubWindow.create({
+    title: "登录",
+    children: <LoginWindow />,
+    rect: Rectangle.inCenter(new Vector(230, 240)),
+  });
+};

app/src/sub/UserWindow.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@/components/ui/button";
+import { SubWindow } from "@/core/service/SubWindow";
+import { Vector } from "@graphif/data-structures";
+import { Rectangle } from "@graphif/shapes";
+import { fetch } from "@tauri-apps/plugin-http";
+import { LogOut } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+export default function UserWindow() {
+  const [status, setStatus] = useState<"loading" | "ok" | "out">("loading");
+  const [user, setUser] = useState<any>({});
+
+  useEffect(() => {
+    (async () => {
+      const loginApiResponse = await (await fetch("https://bbs.project-graph.top/api/login")).text();
+      if (loginApiResponse.startsWith('"')) {
+        setStatus("ok");
+        // "/user/<username>"
+        const userDataEndpoint = loginApiResponse.slice(1, -1);
+        const userData = await (await fetch(`https://bbs.project-graph.top/api${userDataEndpoint}`)).json();
+        setUser(userData);
+      } else {
+        setStatus("out");
+      }
+    })();
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-4">
+      {status === "loading" && <span>加载中...</span>}
+      {status === "out" && <span>未登录</span>}
+      {status === "ok" && (
+        <>
+          <div className="flex items-center gap-2">
+            <img src={`https://bbs.project-graph.top${user.uploadedpicture}`} crossOrigin="" className="size-12" />
+            <div className="flex flex-col gap-1">
+              <span>{user.username}</span>
+              <span className="text-sm opacity-50">UID: {user.uid}</span>
+            </div>
+          </div>
+          <Button
+            onClick={() => {
+              fetch("https://bbs.project-graph.top/logout", {
+                method: "POST",
+              });
+              toast.success("已退出登录");
+            }}
+          >
+            <LogOut />
+            退出登录
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}
+
+UserWindow.open = () => {
+  SubWindow.create({
+    title: "用户",
+    children: <UserWindow />,
+    rect: Rectangle.inCenter(new Vector(230, 240)),
+  });
+};