:sparkles: 文集目录添加文章

dashboard/src/components/anthology/EditableTocTree.tsx

@@ -1,5 +1,6 @@
-import { message } from "antd";
+import { Button, message } from "antd";
 import { useEffect, useState } from "react";
+import { FileAddOutlined } from "@ant-design/icons";
 
 import { get, put } from "../../request";
 import {
@@ -7,15 +8,24 @@ import {
   IArticleMapListResponse,
   IArticleMapUpdateRequest,
 } from "../api/Article";
-import EditableTree, { ListNodeData } from "../article/EditableTree";
+import ArticleListModal from "../article/ArticleListModal";
+import EditableTree, {
+  ListNodeData,
+  TreeNodeData,
+} from "../article/EditableTree";
 
 interface IWidget {
   anthologyId?: string;
+  studioName?: string;
   onSelect?: Function;
 }
-const EditableTocTreeWidget = ({ anthologyId, onSelect }: IWidget) => {
+const EditableTocTreeWidget = ({
+  anthologyId,
+  studioName,
+  onSelect,
+}: IWidget) => {
   const [tocData, setTocData] = useState<ListNodeData[]>([]);
-
+  const [addArticle, setAddArticle] = useState<TreeNodeData>();
   useEffect(() => {
     get<IArticleMapListResponse>(
       `/v2/article-map?view=anthology&id=${anthologyId}`
@@ -38,6 +48,23 @@ const EditableTocTreeWidget = ({ anthologyId, onSelect }: IWidget) => {
     <div>
       <EditableTree
         treeData={tocData}
+        addOnArticle={addArticle}
+        addFileButton={
+          <ArticleListModal
+            studioName={studioName}
+            trigger={<Button icon={<FileAddOutlined />}>添加</Button>}
+            onSelect={(id: string, title: string) => {
+              console.log("add article", id);
+              const newNode: TreeNodeData = {
+                key: id,
+                title: title,
+                children: [],
+                level: 1,
+              };
+              setAddArticle(newNode);
+            }}
+          />
+        }
         onChange={(data: ListNodeData[]) => {
           console.log("onChange", data);
         }}

dashboard/src/components/api/Article.ts

@@ -12,7 +12,7 @@ export interface IArticleListApiResponse {
 export interface IAnthologyDataRequest {
   title: string;
   subtitle: string;
-  summary: string;
+  summary?: string;
   article_list?: IArticleListApiResponse[];
   lang: string;
   status: number;

dashboard/src/components/article/AnthologyInfoEdit.tsx

@@ -11,7 +11,7 @@ import PublicitySelect from "../studio/PublicitySelect";
 interface IFormData {
   title: string;
   subtitle: string;
-  summary: string;
+  summary?: string;
   lang: string;
   status: number;
 }
@@ -66,7 +66,7 @@ const AnthologyInfoEditWidget = ({ anthologyId, onTitleChange }: IWidget) => {
           return {
             title: res.data.title,
             subtitle: res.data.subtitle,
-            summary: res.data.summary,
+            summary: res.data.summary ? res.data.summary : undefined,
             lang: res.data.lang,
             status: res.data.status,
           };

dashboard/src/components/article/ArticleList.tsx

@@ -171,7 +171,7 @@ const ArticleListWidget = ({
                     <Typography.Link
                       onClick={() => {
                         if (typeof onSelect !== "undefined") {
-                          onSelect(row.id);
+                          onSelect(row.id, row.title);
                         }
                       }}
                     >

dashboard/src/components/article/EditableTree.tsx

@@ -3,17 +3,13 @@ import { useEffect } from "react";
 import { Tree, Typography } from "antd";
 import type { DataNode, TreeProps } from "antd/es/tree";
 import { Key } from "antd/lib/table/interface";
-import {
-  FileAddOutlined,
-  DeleteOutlined,
-  SaveOutlined,
-} from "@ant-design/icons";
+import { DeleteOutlined, SaveOutlined } from "@ant-design/icons";
 import { Button, Divider, Space } from "antd";
 import { useIntl } from "react-intl";
 
 const { Text } = Typography;
 
-interface TreeNodeData {
+export interface TreeNodeData {
   key: string;
   title: string | React.ReactNode;
   children: TreeNodeData[];
@@ -119,24 +115,42 @@ function treeToList(treeNode: TreeNodeData[]): ListNodeData[] {
 
   return arrTocTree;
 }
-interface IWidgetEditableTree {
+interface IWidget {
   treeData: ListNodeData[];
+  addFileButton?: React.ReactNode;
+  addOnArticle?: TreeNodeData;
   onChange?: Function;
   onSelect?: Function;
   onSave?: Function;
+  onAddFile?: Function;
 }
 const EditableTreeWidget = ({
   treeData,
+  addFileButton,
+  addOnArticle,
   onChange,
   onSelect,
   onSave,
-}: IWidgetEditableTree) => {
+  onAddFile,
+}: IWidget) => {
   const intl = useIntl();
 
   const [gData, setGData] = useState<TreeNodeData[]>([]);
   const [listTreeData, setListTreeData] = useState<ListNodeData[]>();
   const [keys, setKeys] = useState<Key>("");
 
+  useEffect(() => {
+    if (typeof addOnArticle === "undefined") {
+      return;
+    }
+    console.log("add ", addOnArticle);
+
+    const newTreeData = [...gData, addOnArticle];
+    setGData(newTreeData);
+    const list = treeToList(newTreeData);
+    setListTreeData(list);
+  }, [addOnArticle]);
+
   useEffect(() => {
     const data = tocGetTreeData(treeData);
     console.log("tree data", data);
@@ -223,7 +237,8 @@ const EditableTreeWidget = ({
   return (
     <>
       <Space>
-        <Button icon={<FileAddOutlined />}>添加</Button>
+        {addFileButton}
+
         <Button
           icon={<DeleteOutlined />}
           danger

dashboard/src/pages/studio/anthology/edit.tsx

@@ -59,7 +59,9 @@ const Widget = () => {
             {
               key: "toc",
               label: `目录`,
-              children: <TocTree anthologyId={anthology_id} />,
+              children: (
+                <TocTree studioName={studioname} anthologyId={anthology_id} />
+              ),
             },
           ]}
         />