📝 docking something

ileostar · Sep 12, 2024 · 4f7cf15 · 4f7cf15
1 parent df6ded0
commit 4f7cf15
Show file tree

Hide file tree

Showing 16 changed files with 429 additions and 190 deletions.
diff --git a/apps/web/api/types/work.ts b/apps/web/api/types/work.ts
@@ -54,14 +54,16 @@ export type copyWorkResponse = {
   status: number;
   userId: string;
   workId: string;
-};;
+};
 
 export type getWorkResponse = createWorkBody & {
   author: string;
   userId: string;
   workId: string;
 };
 
+export type updateWorkBody = createWorkBody;
+
 export type updateWorkResponse = {
   title: string;
   desc: string;
@@ -73,7 +75,7 @@ export type updateWorkResponse = {
   isTemplate: boolean;
   isPublic: boolean;
   status: number;
-};;
+};
 
 export type publishWorkToTemplateResponse = {
   url: string;

diff --git a/apps/web/api/work.ts b/apps/web/api/work.ts
@@ -9,6 +9,7 @@ import {
   getWorkListResponse,
   getWorkResponse,
   publishWorkToTemplateResponse,
+  updateWorkBody,
   updateWorkResponse,
 } from "./types/work";
 
@@ -33,8 +34,8 @@ export function getWork(workId: string) {
 }
 
 /** 更新单个工作区 */
-export function updateWork(workId: string) {
-  return http.put<ResponseData<updateWorkResponse>>(`/works/${workId}`);
+export function updateWork(workId: string, body: updateWorkBody) {
+  return http.put<ResponseData<updateWorkResponse>>(`/works/${workId}`, body);
 }
 
 /** 删除单个工作区 */

diff --git a/apps/web/app/[locale]/page.tsx b/apps/web/app/[locale]/page.tsx
@@ -9,8 +9,8 @@ function Main() {
     <BaseLayout>
       <Hero />
       <Introduce />
-      <WorksList />
       <TemplateList />
+      <WorksList />
     </BaseLayout>
   );
 }

diff --git a/apps/web/app/[locale]/user/[userId]/page.tsx b/apps/web/app/[locale]/user/[userId]/page.tsx
@@ -1,14 +1,30 @@
+"use client";
+
 import BaseDivider from "@/components/base/BaseDivider";
 import BaseLayout from "@/components/layouts/BaseLayout";
 import MyWorks from "@/components/pages/user/MyWorks";
 import UserInfos from "@/components/pages/user/UserInfos";
+import { useEffect, useState } from "react";
 
 function Main({ params }: { params: { userId: string } }) {
+  const [isMyself, setIsMyself] = useState(true);
+
+  useEffect(() => {
+    const userId = localStorage.getItem("userId");
+    console.log(userId);
+    console.log(params.userId);
+    if (userId && params.userId === userId) {
+      setIsMyself(true);
+    } else {
+      setIsMyself(false);
+    }
+  }, [params.userId]);
+
   return (
     <BaseLayout>
-      <UserInfos />
+      <UserInfos isMyself={isMyself} />
       <BaseDivider />
-      <MyWorks />
+      <MyWorks isMyself={isMyself} />
     </BaseLayout>
   );
 }

diff --git a/apps/web/app/[locale]/works/page.tsx b/apps/web/app/[locale]/works/page.tsx
@@ -5,16 +5,8 @@ import { getWorkList } from "@/api/work";
 import BaseCard from "@/components/base/BaseCard";
 import BaseLayout from "@/components/layouts/BaseLayout";
 import Banner from "@/components/shared/Banner";
+import CustomPagination from "@/components/shared/CustomPagination";
 import BaseList from "@/components/shared/ShowLists";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
@@ -31,6 +23,7 @@ function Main() {
     const res = await getWorkList({ pageIndex, pageSize, title });
     setWorkList(res.data.data.list);
     setPageIndex(pageIndex);
+    setPageSize(pageSize);
     setTotalPage(Math.ceil(res.data.data.count / pageSize));
   };
 
@@ -60,54 +53,13 @@ function Main() {
           />
         ))}
       </BaseList>
-      <Pagination className="mt-3">
-        <PaginationContent>
-          {pageIndex - 1 === 0 ? null : (
-            <PaginationItem>
-              <PaginationPrevious
-                href="#"
-                onClick={() => getList(pageIndex - 1, pageSize, title)}
-              />
-            </PaginationItem>
-          )}
-          {pageIndex - 1 === 0 ? null : (
-            <PaginationItem>
-              <PaginationLink
-                href="#"
-                onClick={() => getList(pageIndex - 1, pageSize, title)}
-              >
-                {pageIndex - 1}
-              </PaginationLink>
-            </PaginationItem>
-          )}
-          <PaginationItem className="bg-[#c8e0ef]">
-            <PaginationLink href="#">{pageIndex}</PaginationLink>
-          </PaginationItem>
-          {totalPage < pageIndex + 1 ? null : (
-            <PaginationItem>
-              <PaginationLink
-                href="#"
-                onClick={() => getList(pageIndex + 1, pageSize, title)}
-              >
-                {pageIndex + 1}
-              </PaginationLink>
-            </PaginationItem>
-          )}
-          {totalPage <= pageIndex + 1 ? null : (
-            <PaginationItem>
-              <PaginationEllipsis />
-            </PaginationItem>
-          )}
-          {totalPage < pageIndex + 1 ? null : (
-            <PaginationItem>
-              <PaginationNext
-                href="#"
-                onClick={() => getList(pageIndex + 1, pageSize, title)}
-              />
-            </PaginationItem>
-          )}
-        </PaginationContent>
-      </Pagination>
+      <CustomPagination
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        title={title}
+        totalPage={totalPage}
+        getList={getList}
+      />
     </BaseLayout>
   );
 }

diff --git a/apps/web/components/layouts/common/GlobalDrawer.tsx b/apps/web/components/layouts/common/GlobalDrawer.tsx
@@ -5,48 +5,55 @@ import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from "@/components/
 import { GlobalEnvConfig } from "@/config";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import { useEffect, useState } from "react";
 
 interface GlobalDrawerProps {
   className?: string;
 }
 
-// TODO 替换接口来的信息或者从store获取
-const userInfo = {
-  avatar: "",
-  username: "LeoStar",
-  nickname: "LeoStar",
-  email: "",
-  phone: "",
-  address: "",
-};
-
-const DrawerMenuItems = [
-  {
-    href: "/settings",
-    iconClass: "icon-[carbon--settings]",
-    text: "设置",
-  },
-  {
-    href: "/user",
-    iconClass: "icon-[carbon--user-avatar]",
-    text: "个人中心",
-  },
-  {
-    href: GlobalEnvConfig.DEV_DOCS,
-    iconClass: "icon-[carbon--document-multiple-01]",
-    text: "开发文档",
-  },
-  {
-    href: "https://github.com/ileostar/PosterCraft",
-    iconClass: "icon-[carbon--logo-github]",
-    text: "项目地址",
-  },
-];
-
 const GlobalDrawer: React.FC<GlobalDrawerProps> = ({ className }) => {
   // TODO 退出登陆
   const logout = async () => {};
 
+  const [userId, setUserId] = useState<string | null>(null);
+
+  // TODO 替换接口来的信息或者从store获取
+  const userInfo = {
+    avatar: "",
+    username: "LeoStar",
+    nickname: "LeoStar",
+    email: "",
+    phone: "",
+    address: "",
+  };
+
+  const DrawerMenuItems = [
+    {
+      href: "/settings",
+      iconClass: "icon-[carbon--settings]",
+      text: "设置",
+    },
+    {
+      href: `/user/${userId}`,
+      iconClass: "icon-[carbon--user-avatar]",
+      text: "个人中心",
+    },
+    {
+      href: GlobalEnvConfig.DEV_DOCS,
+      iconClass: "icon-[carbon--document-multiple-01]",
+      text: "开发文档",
+    },
+    {
+      href: "https://github.com/ileostar/PosterCraft",
+      iconClass: "icon-[carbon--logo-github]",
+      text: "项目地址",
+    },
+  ];
+
+  useEffect(() => {
+    setUserId(window.localStorage.getItem("userId"));
+  }, []);
+
   return (
     <Drawer direction="right">
       <DrawerTrigger className="overflow-visible">

diff --git a/apps/web/components/pages/editor/Header/EditorFeature.tsx b/apps/web/components/pages/editor/Header/EditorFeature.tsx
@@ -1,7 +1,8 @@
 import GlobalDrawer from "@/components/layouts/common/GlobalDrawer";
 import { cn } from "@/lib/utils";
 
-import Dialog from "../Header/Dialog";
+import PublishDialog from "./PublishDialog";
+import SaveDialog from "./SaveDialog";
 
 interface EditorFeatureProps {
   className?: string;
@@ -11,7 +12,7 @@ const EditorFeature: React.FC<EditorFeatureProps> = ({ className }) => {
   return (
     <nav className={cn("h-full flex items-center justify-between gap-5", className)}>
       <div className="flex items-center gap-2">
-        <Dialog>
+        <SaveDialog>
           <button className="cursor-pointer bg-[#3D7FFF] relative items-center justify-center flex gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#3D7FFF]/90 text-white h-7 px-3">
             <svg
               className="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
@@ -32,28 +33,30 @@ const EditorFeature: React.FC<EditorFeatureProps> = ({ className }) => {
             </svg>
             保存
           </button>
-        </Dialog>
+        </SaveDialog>
 
-        <button className="cursor-pointer bg-[#3D7FFF] relative items-center justify-center flex gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#3D7FFF]/90 text-white h-7 px-3">
-          <svg
-            className="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
-            strokeLinejoin="round"
-            strokeLinecap="round"
-            strokeWidth="2"
-            stroke="#fff"
-            fill="none"
-            viewBox="0 0 24 24"
-            height="18"
-            width="18"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
-            <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
-            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
-            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
-          </svg>
-          发布
-        </button>
+        <PublishDialog>
+          <button className="cursor-pointer bg-[#3D7FFF] relative items-center justify-center flex gap-2 rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-[#3D7FFF]/90 text-white h-7 px-3">
+            <svg
+              className="lucide lucide-rocket text-cyan-500 dark:text-cyan-400"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              strokeWidth="2"
+              stroke="#fff"
+              fill="none"
+              viewBox="0 0 24 24"
+              height="18"
+              width="18"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
+              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
+              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
+              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
+            </svg>
+            发布
+          </button>
+        </PublishDialog>
       </div>
       <GlobalDrawer className="w-8 h-8" />
     </nav>