v4->v6

dashboard-v6/documents/development/v6-todo-list.md

@@ -28,7 +28,7 @@
 - [ ] `/dict/list`=>`resources/dict`
 - [x] `/term/list`=>`workgroup/term`
 - [ ] `/article/list`=>`workgroup/article`
-- [ ] `/anthology/list`=>`workgroup/anthology`
+- [x] `/anthology/list`=>`workgroup/anthology`
 - [ ] `/attachment/list`=>`resources/attachment`
 - [ ] `/tags/list`=>`resources/tags`
 
@@ -36,7 +36,7 @@
 
 ### 4️⃣ Collaboration 模块
 
-- [ ] `/group/list`=>`collaboration/team-space`
+- [ ] `/group/list`=>`collaboration/team`
 - [ ] `/invite/list`=>`collaboration/invite`
 - [ ] `/transfer/list`=>`collaboration/transfer`
 

dashboard-v6/src/Router.tsx

@@ -118,7 +118,7 @@ const router = createBrowserRouter(
                   Component: WorkspaceAnthologyList,
                 },
                 {
-                  path: ":id",
+                  path: ":anthologyId",
                   loader: anthologyLoader,
                   handle: {
                     crumb: (match: { data: { title: string } }) =>
@@ -133,6 +133,10 @@ const router = createBrowserRouter(
                       },
                       Component: WorkspaceAnthologyEdit,
                     },
+                    {
+                      path: ":articleId",
+                      Component: WorkspaceArticleShow,
+                    },
                   ],
                 },
               ],
@@ -149,7 +153,7 @@ const router = createBrowserRouter(
                   Component: WorkspaceArticleList,
                 },
                 {
-                  path: ":id",
+                  path: ":articleId",
                   Component: WorkspaceArticleShow,
                   loader: articleLoader,
                   handle: {

dashboard-v6/src/api/Article.ts

@@ -575,32 +575,32 @@ export const fetchAnthology = (id: string): Promise<IAnthologyResponse> => {
 };
 
 export async function anthologyLoader({ params }: LoaderFunctionArgs) {
-  const id = params.id;
+  const id = params.anthologyId;
 
   if (!id) {
-    throw new Response("Missing channelId", { status: 400 });
+    throw new Response("Missing anthologyId", { status: 400 });
   }
 
   const res = await fetchAnthology(id);
 
   if (!res.ok) {
-    throw new Response("Channel not found", { status: 404 });
+    throw new Response("anthology not found", { status: 404 });
   }
 
   return res.data;
 }
 
 export async function articleLoader({ params }: LoaderFunctionArgs) {
-  const id = params.id;
+  const id = params.articleId;
 
   if (!id) {
-    throw new Response("Missing channelId", { status: 400 });
+    throw new Response("Missing articleId", { status: 400 });
   }
 
   const res = await fetchArticle(id);
 
   if (!res.ok) {
-    throw new Response("Channel not found", { status: 404 });
+    throw new Response("article not found", { status: 404 });
   }
 
   return res.data;

dashboard-v6/src/components/anthology/AnthologyDetail.tsx → dashboard-v6/src/components/anthology/AnthologyReader.tsx

@@ -1,22 +1,26 @@
-import { Divider, Typography } from "antd";
+import { Button, Divider, Space, Typography } from "antd";
+import { EditOutlined, ReloadOutlined } from "@ant-design/icons";
 
-import AnthologyTocTree from "../anthology/AnthologyTocTree";
+import AnthologyTocTree from "./AnthologyTocTree";
 import { useIntl } from "react-intl";
 import ArticleSkeleton from "../article/components/ArticleSkeleton";
 import ErrorResult from "../general/ErrorResult";
 import AnthologyInfo from "./components/AnthologyInfo";
 import { useAnthology } from "./hooks/useAnthology";
+import ArticleHeader from "../article/components/ArticleHeader";
+import type { TTarget } from "../../types";
 
 const { Title } = Typography;
 
 interface Props {
   id?: string;
   channels?: string[];
-  onArticleClick?: (anthologyId: string, id: string, target: string) => void;
+  onArticleClick?: (anthologyId: string, id: string, target?: TTarget) => void;
+  onEdit?: () => void;
 }
 
-const AnthologyDetailWidget = ({ id, channels, onArticleClick }: Props) => {
-  const { data, loading, errorCode } = useAnthology(id);
+const AnthologyReader = ({ id, channels, onArticleClick, onEdit }: Props) => {
+  const { data, loading, errorCode, refresh } = useAnthology(id);
   const intl = useIntl();
 
   return (
@@ -25,6 +29,20 @@ const AnthologyDetailWidget = ({ id, channels, onArticleClick }: Props) => {
       {!loading && errorCode && <ErrorResult code={errorCode} />}
       {!loading && !errorCode && (
         <>
+          <ArticleHeader
+            action={
+              <Space>
+                <Button type="primary" icon={<EditOutlined />} onClick={onEdit}>
+                  edit
+                </Button>
+                <Button
+                  type="link"
+                  icon={<ReloadOutlined />}
+                  onClick={refresh}
+                />
+              </Space>
+            }
+          />
           <AnthologyInfo data={data} />
           <Divider />
           <Title level={5}>
@@ -44,4 +62,4 @@ const AnthologyDetailWidget = ({ id, channels, onArticleClick }: Props) => {
   );
 };
 
-export default AnthologyDetailWidget;
+export default AnthologyReader;

dashboard-v6/src/components/anthology/AnthologyTocTree.tsx

@@ -4,15 +4,12 @@ import { get } from "../../request";
 import type { IArticleMapListResponse } from "../../api/Article";
 import type { ListNodeData } from "../article/components/EditableTree";
 import TocTree from "../article/components/TocTree";
+import type { TTarget } from "../../types";
 
 interface IWidget {
   anthologyId?: string;
   channels?: string[];
-  onClick?: (
-    anthologyId: string,
-    id: string,
-    target: "_blank" | "self"
-  ) => void;
+  onClick?: (anthologyId: string, id: string, target?: TTarget) => void;
   onArticleSelect?: (anthologyId: string, keys: string[]) => void;
 }
 const AnthologyTocTreeWidget = ({
@@ -72,7 +69,7 @@ const AnthologyTocTreeWidget = ({
         id: string,
         e: React.MouseEvent<HTMLSpanElement, MouseEvent>
       ) => {
-        const target = e.ctrlKey || e.metaKey ? "_blank" : "self";
+        const target = e.ctrlKey || e.metaKey ? "_blank" : "_self";
         if (
           typeof onClick !== "undefined" &&
           typeof anthologyId !== "undefined"

dashboard-v6/src/components/article/TypeAnthology.tsx

@@ -1,7 +1,7 @@
 import "./article.css";
 
 import type { ArticleMode } from "../../api/Article";
-import AnthologyDetail from "../anthology/AnthologyDetail";
+import AnthologyDetail from "../anthology/AnthologyReader";
 
 interface IWidget {
   id?: string;

dashboard-v6/src/pages/workspace/anthology/show.tsx

@@ -1,9 +1,9 @@
 import { useNavigate, useParams, useSearchParams } from "react-router";
 
-import AnthologyDetail from "../../../components/anthology/AnthologyDetail";
+import AnthologyReader from "../../../components/anthology/AnthologyReader";
 
 const Widget = () => {
-  const { id } = useParams(); //url 参数
+  const { anthologyId } = useParams(); //url 参数
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
 
@@ -13,12 +13,15 @@ const Widget = () => {
   return (
     <>
       <title>{"anthology-"}</title>
-      <AnthologyDetail
+      <AnthologyReader
         channels={channels}
-        id={id}
+        id={anthologyId}
         onArticleClick={(anthologyId, articleId, target) => {
           console.log("click", target);
-          navigate(`/workspace/article/${articleId}?anthology=${anthologyId}`);
+          navigate(`/workspace/anthology/${anthologyId}/${articleId}`);
+        }}
+        onEdit={() => {
+          navigate(`/workspace/anthology/${anthologyId}/edit`);
         }}
       />
     </>

dashboard-v6/src/pages/workspace/article/show.tsx

@@ -2,33 +2,61 @@ import { useNavigate, useParams, useSearchParams } from "react-router";
 import TypeArticle from "../../../components/article/TypeArticle";
 import SplitLayout from "../../../components/general/SplitLayout";
 import type { ArticleMode } from "../../../api/Article";
+import AnthologyTocTree from "../../../components/anthology/AnthologyTocTree";
 
 const Widget = () => {
-  const { id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const { articleId, anthologyId } = useParams();
+  const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const mode = searchParams.get("mode") ?? "read";
   const channelId = searchParams.get("channel");
   const anthology = searchParams.get("anthology");
 
   return (
-    <SplitLayout key="mode-a" sidebarTitle="table of content" sidebar={<></>}>
+    <SplitLayout
+      key="mode-a"
+      sidebarTitle="table of content"
+      sidebar={
+        anthologyId ? (
+          <AnthologyTocTree
+            anthologyId={anthologyId}
+            channels={channelId ? channelId.split("_") : undefined}
+            onClick={(anthology, article, target) => {
+              if (target && target === "_blank") {
+                window.open(
+                  `${window.location.origin}${import.meta.env.BASE_URL}workspace/anthology/${anthology}/${article}`,
+                  "_blank"
+                );
+              } else {
+                navigate(`/workspace/anthology/${anthology}/${article}`);
+              }
+            }}
+          />
+        ) : (
+          <></>
+        )
+      }
+    >
       {({ expandButton }) => (
         <TypeArticle
-          articleId={id}
+          articleId={articleId}
           mode={mode as ArticleMode}
-          anthologyId={anthology}
+          anthologyId={anthologyId ?? anthology}
           channelId={channelId}
           headerExtra={expandButton}
           onAnthologySelect={(id) => {
-            setSearchParams((prev) => {
-              const next = new URLSearchParams(prev);
-              next.set("anthology", id);
-              return next;
-            });
+            navigate(`/workspace/anthology/${id}/${articleId}`);
           }}
           onArticleChange={(type, id) => {
-            navigate(`/workspace/${type}/${id}`);
+            if (anthologyId) {
+              if (type === "article") {
+                navigate(`/workspace/anthology/${anthologyId}/${id}`);
+              } else {
+                navigate(`/workspace/${type}/${id}`);
+              }
+            } else {
+              navigate(`/workspace/${type}/${id}`);
+            }
           }}
         />
       )}