@bbki.ng/site 1.5.6 → 1.5.8

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @bbki.ng/site
 
+## 1.5.8
+
+## 1.5.7
+
 ## 1.5.6
 
 ## 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -16,7 +16,7 @@
     "url": "git+https://github.com/bbbottle/bbki.ng.git"
   },
   "dependencies": {
-    "@bbki.ng/components": "workspace:2.4.5",
+    "@bbki.ng/components": "workspace:2.4.7",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",
@@ -28,7 +28,7 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
-    "@bbki.ng/stylebase": "workspace:0.3.5",
+    "@bbki.ng/stylebase": "workspace:0.3.7",
     "@mdx-js/mdx": "2.0.0-next.9",
     "@mdx-js/react": "^1.6.22",
     "@mdx-js/rollup": "3.0.0",

package/src/components/Img_ctx_menu/index.tsx

@@ -3,29 +3,58 @@ import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuTrigger,
+  ContextMenuLabel,
 } from "@bbki.ng/components";
-import React, { ReactElement } from "react";
+import React, { ReactElement, useContext } from "react";
 import { useParams } from "react-router-dom";
 import { Auth } from "@/components/Auth";
 import { Role } from "@/hooks/use_role";
 import { confirm } from "@/utils";
+import { ContextMenuSeparator } from "@bbki.ng/components";
+import { useDelImg } from "@/hooks/use_del_img";
+import { toast } from "sonner";
+import { GlobalLoadingContext } from "@/global_loading_state_provider";
 
-export const ImgCtxMenu = (props: { children: ReactElement }) => {
+export const ImgCtxMenu = (props: {
+  children: ReactElement;
+  name: string;
+  date: string;
+  width: number;
+  height: number;
+  id: number;
+  onRemoved?: () => Promise<void>;
+}) => {
   const param = useParams();
+  const delImg = useDelImg();
   const imgId = param.id;
   const isImgOfQueen = imgId === "小乌鸦";
   const role = isImgOfQueen ? [Role.QUEEN, Role.KING] : [Role.KING];
+  const date = new Date(props.date).toLocaleString();
+  const { setIsLoading } = useContext(GlobalLoadingContext);
+
   return (
     <ContextMenu>
       <ContextMenuTrigger draggable={false}>
         {props.children}
       </ContextMenuTrigger>
       <Auth role={role}>
-        <ContextMenuContent>
+        <ContextMenuContent className="w-256">
+          <ContextMenuLabel>{props.name}</ContextMenuLabel>
+          <ContextMenuItem disabled>
+            {props.width} * {props.height}
+          </ContextMenuItem>
+          <ContextMenuItem disabled>{date}</ContextMenuItem>
+          <ContextMenuSeparator />
           <ContextMenuItem
             onClick={() => {
-              confirm("确认删除？", () => {
-                console.log("delete");
+              confirm("确认删除？", async () => {
+                setIsLoading(true);
+                await delImg(props.id);
+                await props.onRemoved?.();
+                toast.success("删除成功", {
+                  position: "top-center",
+                });
+                setIsLoading(false);
               });
             }}
           >

package/src/components/app_ctx_menu/LoginMenuItem.tsx

@@ -29,7 +29,7 @@ export const LoginMenuItem = () => {
             });
           }}
         >
-          Logout
+          logout
         </ContextMenuItem>
       </>
     );

package/src/constants/routes.ts

@@ -22,6 +22,7 @@ export const API = {
   UPLOAD_IMG: "upload",
   POST: "post",
   REMOVE_POST: "remove_post",
+  REMOVE_IMG: "remove_image",
   MOVIES: "movies",
   IMAGES: "images",
   BOOKS: "books",

package/src/hooks/use_del_img.ts

@@ -0,0 +1,22 @@
+import { useAuthedFetcher } from "@/hooks/use_authed_fetcher";
+import { useCallback } from "react";
+import { API } from "@/constants/routes";
+
+export const useDelImg = () => {
+  const authedFetcher = useAuthedFetcher();
+
+  const req = useCallback(
+    async (url: string, { arg }: { arg: { id: number } }) => {
+      return authedFetcher(url, {
+        method: "POST",
+        body: JSON.stringify(arg),
+      });
+    },
+    [authedFetcher]
+  );
+
+  return useCallback(
+    (id: number) => req(API.REMOVE_IMG, { arg: { id } }),
+    [req]
+  );
+};

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

@@ -3,8 +3,7 @@ import { MySuspense } from "@/components";
 import { useParams } from "react-router-dom";
 import { useProjects } from "@/hooks/use_projects";
 import { imageFormatter } from "@/utils";
-import { Gallery, Nav, Link } from "@bbki.ng/components";
-import { usePaths } from "@/hooks";
+import { Gallery } from "@bbki.ng/components";
 import { ImageUploader } from "@/components/ImageUploader";
 import classnames from "classnames";
 import { ImageRenderer } from "@bbki.ng/components/lib";
@@ -21,8 +20,17 @@ const ProjectDetail = () => {
   }, []);
 
   const renderImage: ImageRenderer = (img, index, col) => {
+    const imgInfo = projects.images[index];
+
     return (
-      <ImgCtxMenu>
+      <ImgCtxMenu
+        date={imgInfo.created_at}
+        name={imgInfo.title}
+        width={imgInfo.width}
+        height={imgInfo.height}
+        id={imgInfo.id}
+        onRemoved={refresh}
+      >
         <div
           className={classnames("mb-128 select-none", {
             "md:mr-64": col === 0,

package/vite.config.js

@@ -60,7 +60,7 @@ export default defineConfig({
         "Logo.svg",
       ],
       devOptions: {
-        enabled: true,
+        enabled: false,
         /* other options */
       },
       workbox: {