添加‘更多’下拉菜单

dashboard/src/components/article/ArticleView.tsx

@@ -1,5 +1,12 @@
-import { Typography, Divider, Button, Skeleton, Space } from "antd";
-import { ReloadOutlined } from "@ant-design/icons";
+import { Typography, Divider, Button, Skeleton, Space, Dropdown } from "antd";
+import {
+  ReloadOutlined,
+  MoreOutlined,
+  InboxOutlined,
+  EditOutlined,
+  FileOutlined,
+  CopyOutlined,
+} from "@ant-design/icons";
 
 import MdView from "../template/MdView";
 import TocPath, { ITocPathNode } from "../corpus/TocPath";
@@ -7,6 +14,12 @@ import PaliChapterChannelList from "../corpus/PaliChapterChannelList";
 import { ArticleType } from "./Article";
 import VisibleObserver from "../general/VisibleObserver";
 import { IStudio } from "../auth/StudioName";
+import { useAppSelector } from "../../hooks";
+import { currentUser } from "../../reducers/current-user";
+import AddToAnthology from "./AddToAnthology";
+import { useState } from "react";
+import { fullUrl } from "../../utils";
+import { ArticleTplModal } from "../template/Builder/ArticleTpl";
 
 const { Paragraph, Title, Text } = Typography;
 export interface IFirstAnthology {
@@ -32,6 +45,7 @@ export interface IWidgetArticleData {
   anthology?: IFirstAnthology;
   onEnd?: Function;
   onPathChange?: Function;
+  onEdit?: Function;
 }
 
 const ArticleViewWidget = ({
@@ -52,8 +66,12 @@ const ArticleViewWidget = ({
   onEnd,
   remains,
   onPathChange,
+  onEdit,
 }: IWidgetArticleData) => {
   console.log("ArticleViewWidget render");
+  const user = useAppSelector(currentUser);
+  const [addToAnthologyOpen, setAddToAnthologyOpen] = useState(false);
+  const [tplOpen, setTplOpen] = useState(false);
 
   let currChannelList = <></>;
   switch (type) {
@@ -86,6 +104,70 @@ const ArticleViewWidget = ({
           size="small"
           icon={<ReloadOutlined />}
         />
+        <Dropdown
+          menu={{
+            items: [
+              {
+                label: "添加到文集",
+                key: "add_to_anthology",
+                icon: <InboxOutlined />,
+                disabled: type === "article" ? false : true,
+              },
+              {
+                label: "编辑",
+                key: "edit",
+                icon: <EditOutlined />,
+                disabled: user && type === "article" ? false : true,
+              },
+              {
+                label: "在Studio中打开",
+                key: "open-studio",
+                icon: <EditOutlined />,
+                disabled: user && type === "article" ? false : true,
+              },
+              {
+                label: "获取文章引用模版",
+                key: "tpl",
+                icon: <FileOutlined />,
+                disabled: user && type === "article" ? false : true,
+              },
+              {
+                label: "创建副本",
+                key: "fork",
+                icon: <CopyOutlined />,
+                disabled: user && type === "article" ? false : true,
+              },
+            ],
+            onClick: ({ key }) => {
+              console.log(`Click on item ${key}`);
+              switch (key) {
+                case "add_to_anthology":
+                  setAddToAnthologyOpen(true);
+                  break;
+                case "fork":
+                  const url = `/studio/${user?.nickName}/article/create?parent=${articleId}`;
+                  window.open(fullUrl(url), "_blank");
+                  break;
+                case "tpl":
+                  setTplOpen(true);
+                  break;
+                case "edit":
+                  if (typeof onEdit !== "undefined") {
+                    onEdit();
+                  }
+                  break;
+              }
+            },
+          }}
+          placement="bottomRight"
+        >
+          <Button
+            onClick={(e) => e.preventDefault()}
+            icon={<MoreOutlined />}
+            size="small"
+            type="link"
+          />
+        </Dropdown>
       </div>
 
       <Space direction="vertical">
@@ -138,6 +220,25 @@ const ArticleViewWidget = ({
           <Skeleton title={{ width: 200 }} paragraph={{ rows: 5 }} active />
         </>
       ) : undefined}
+
+      {articleId ? (
+        <AddToAnthology
+          open={addToAnthologyOpen}
+          onClose={(isOpen: boolean) => setAddToAnthologyOpen(isOpen)}
+          articleIds={[articleId]}
+        />
+      ) : undefined}
+      {type === "article" ? (
+        <ArticleTplModal
+          title={title}
+          type="article"
+          id={articleId}
+          open={tplOpen}
+          onOpenChange={(visible: boolean) => setTplOpen(visible)}
+        />
+      ) : (
+        <></>
+      )}
     </>
   );
 };