@bbki.ng/site 1.4.2 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.5.1
+
+## 1.5.0
+
 ## 1.4.2
 
 ## 1.4.1

package/dev-dist/sw.js

@@ -98,7 +98,7 @@ define(["./workbox-baccbcc1"], function (workbox) {
     [
       {
         url: "index.html",
-        revision: "0.a0iqm7b3nfg",
+        revision: "0.kalvqia0m7o",
       },
     ],
     {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {

package/src/components/Auth.tsx

@@ -0,0 +1,17 @@
+import { Role, useRole } from "@/hooks/use_role";
+import React from "react";
+import { Navigate } from "react-router-dom";
+
+export const Auth = (props: {
+  children: any;
+  shouldRedirect?: boolean;
+  role?: Role[];
+}) => {
+  const myRole = useRole();
+
+  if (props.role && !props.role.includes(myRole)) {
+    return props.shouldRedirect ? <Navigate to={"/login"} /> : null;
+  }
+
+  return props.children;
+};

package/src/components/ImageUploader.tsx

@@ -1,9 +1,11 @@
 import React, { useContext } from "react";
 import { DropImage } from "@bbki.ng/components";
-import { AuthRequired } from "@/auth_required";
 import { useUploader } from "@/hooks/use_uploader";
 import { ImageUploaderProps } from "@/types/upload";
 import { GlobalLoadingContext } from "@/global_loading_state_provider";
+import { Auth } from "@/components/Auth";
+import { Role } from "@/hooks/use_role";
+import { useParams } from "react-router-dom";
 
 export const ImageUploader = (props: ImageUploaderProps) => {
   const {
@@ -18,9 +20,11 @@ export const ImageUploader = (props: ImageUploaderProps) => {
 
   const { setIsLoading } = useContext(GlobalLoadingContext);
   const uploader = useUploader();
+  const isProjectOfQueen = projectName === "小乌鸦";
+  const role = isProjectOfQueen ? [Role.QUEEN, Role.KING] : [Role.KING];
 
   return (
-    <AuthRequired shouldBeKing>
+    <Auth role={role}>
       <DropImage
         {...rest}
         className="mb-256"
@@ -46,6 +50,6 @@ export const ImageUploader = (props: ImageUploaderProps) => {
       >
         {() => null}
       </DropImage>
-    </AuthRequired>
+    </Auth>
   );
 };

package/src/components/Img_ctx_menu/index.tsx

@@ -0,0 +1,36 @@
+import {
+  ContextMenuItem,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+} from "@bbki.ng/components";
+import React, { ReactElement } from "react";
+import { useParams } from "react-router-dom";
+import { Auth } from "@/components/Auth";
+import { Role } from "@/hooks/use_role";
+import { confirm } from "@/utils";
+
+export const ImgCtxMenu = (props: { children: ReactElement }) => {
+  const param = useParams();
+  const imgId = param.id;
+  const isImgOfQueen = imgId === "小乌鸦";
+  const role = isImgOfQueen ? [Role.QUEEN, Role.KING] : [Role.KING];
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{props.children}</ContextMenuTrigger>
+      <Auth role={role}>
+        <ContextMenuContent>
+          <ContextMenuItem
+            onClick={() => {
+              confirm("确认删除？", () => {
+                console.log("delete");
+              });
+            }}
+          >
+            Delete
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </Auth>
+    </ContextMenu>
+  );
+};

package/src/components/app_ctx_menu/LoginMenuItem.tsx

@@ -8,13 +8,29 @@ import {
 } from "@bbki.ng/components";
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { supabase } from "@/constants";
+import { toast } from "sonner";
 
 export const LoginMenuItem = () => {
   const sess = useSupabaseSession();
   const nav = useNavigate();
 
   if (sess?.user != null) {
-    return <ContextMenuLabel inset>{sess?.user?.email ?? ""}</ContextMenuLabel>;
+    return (
+      <>
+        <ContextMenuLabel inset>{sess?.user?.email ?? ""}</ContextMenuLabel>
+        <ContextMenuItem
+          inset
+          onClick={() => {
+            supabase.auth.signOut().then(() => {
+              toast.success("已退出登录");
+            });
+          }}
+        >
+          Logout
+        </ContextMenuItem>
+      </>
+    );
   }
 
   return (

package/src/constants/index.ts

@@ -8,9 +8,11 @@ export const SUPABASE: {
   ANNO: string;
   URL: string;
   BB_KING_ID: string;
+  BB_QUEEN_ID: string;
 } = {
   ANNO: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN2eHFtdXNmYXh3dXl2eXV1ZWNvIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NDQ4MjkwNTEsImV4cCI6MTk2MDQwNTA1MX0.lg90OVR7s6tjbDamVaI9FR2M2fc6OVfsfGd4j9MXu3M",
   URL: "https://cvxqmusfaxwuyvyuueco.supabase.co",
   BB_KING_ID: "e6795b1d-7ee0-4afe-be63-796670848175",
+  BB_QUEEN_ID: "ca7d5130-2826-4bcb-86ad-6fab1fae8e3d",
 };
 export const supabase = createClient(SUPABASE.URL, SUPABASE.ANNO);

package/src/hooks/use_role.ts

@@ -0,0 +1,19 @@
+import { useSupabaseSession } from "@/hooks/use_supa_session";
+
+export enum Role {
+  KING = "king",
+  QUEEN = "queen",
+  ANNO = "anno",
+}
+export const useRole = (): Role => {
+  const sess = useSupabaseSession();
+  if (sess?.isKing) {
+    return Role.KING;
+  }
+
+  if (sess?.isQueen) {
+    return Role.QUEEN;
+  }
+
+  return Role.ANNO;
+};

package/src/hooks/use_supa_session.ts

@@ -13,6 +13,7 @@ export const useSupabaseSession = (): BBKingSession | null => {
     return {
       ...sess,
       isKing: sess.user?.id === SUPABASE.BB_KING_ID,
+      isQueen: sess.user?.id === SUPABASE.BB_QUEEN_ID,
     };
   };
 

package/src/pages/cover/index.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { CenterLinkList } from "@/components";
-import { ContextMenuDemo } from "@/demo/DemoMenu";
 
 export const Cover = (props: { className: string }) => {
   return (
     <CenterLinkList
+      className="select-none"
       links={[
         {
           to: "/projects",

package/src/pages/extensions/png/png_projects.tsx

@@ -6,6 +6,9 @@ import { imageFormatter } from "@/utils";
 import { Gallery, Nav, Link } from "@bbki.ng/components";
 import { usePaths } from "@/hooks";
 import { ImageUploader } from "@/components/ImageUploader";
+import classnames from "classnames";
+import { ImageRenderer } from "@bbki.ng/components/lib";
+import { ImgCtxMenu } from "@/components/Img_ctx_menu";
 
 const ProjectDetail = () => {
   const { id } = useParams();
@@ -17,6 +20,21 @@ const ProjectDetail = () => {
     };
   }, []);
 
+  const renderImage: ImageRenderer = (img, index, col) => {
+    return (
+      <ImgCtxMenu>
+        <div
+          className={classnames("mb-128 select-none", {
+            "md:mr-64": col === 0,
+            "md:ml-64": col !== 0,
+          })}
+        >
+          {img}
+        </div>
+      </ImgCtxMenu>
+    );
+  };
+
   const renderUploader = () => (
     <ImageUploader
       onUploadFinish={refresh}
@@ -27,7 +45,10 @@ const ProjectDetail = () => {
 
   return (
     <>
-      <Gallery images={projects.images.map(imageFormatter)}>
+      <Gallery
+        images={projects.images.map(imageFormatter)}
+        imageRenderer={renderImage}
+      >
         {renderUploader()}
       </Gallery>
     </>

package/src/types/supabase.ts

@@ -2,6 +2,7 @@ import { Session } from "@supabase/supabase-js";
 
 export interface BBKingSession extends Session {
   isKing: boolean;
+  isQueen: boolean;
 }
 
 export enum OauthProvider {

package/src/auth_required.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Navigate } from "react-router-dom";
-import { useSupabaseSession } from "@/hooks/use_supa_session";
-
-export const AuthRequired = (props: {
-  children: any;
-  shouldRedirect?: boolean;
-  shouldBeKing?: boolean;
-}) => {
-  const { access_token: token, isKing } = useSupabaseSession() || {};
-
-  if (!token || (props.shouldBeKing && !isKing)) {
-    return props.shouldRedirect ? <Navigate to={"/login"} /> : null;
-  }
-
-  return props.children;
-};