Merge pull request #2027 from visuddhinanda/agile

article 编辑 支持cancel 按钮

dashboard/src/assets/icon/index.tsx

@@ -690,6 +690,23 @@ const AdminSvg = () => (
     ></path>
   </svg>
 );
+
+const TabSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="4260"
+    width="1em"
+    height="1em"
+  >
+    <path
+      d="M810.666667 810.666667 213.333333 810.666667 213.333333 213.333333 512 213.333333 512 384 810.666667 384M810.666667 128 213.333333 128C166.4 128 128 166.4 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 165.973333 857.6 128 810.666667 128Z"
+      fill="currentColor"
+      p-id="4261"
+    ></path>
+  </svg>
+);
 export const DictIcon = (props: Partial<CustomIconComponentProps>) => (
   <Icon component={DictSvg} {...props} />
 );
@@ -822,3 +839,7 @@ export const MergeIcon2 = (props: Partial<CustomIconComponentProps>) => (
 export const AdminIcon = (props: Partial<CustomIconComponentProps>) => (
   <Icon component={AdminSvg} {...props} />
 );
+
+export const TabIcon = (props: Partial<CustomIconComponentProps>) => (
+  <Icon component={TabSvg} {...props} />
+);

dashboard/src/components/article/ArticleEdit.tsx

@@ -40,18 +40,24 @@ interface IWidget {
   studioName?: string;
   articleId?: string;
   anthologyId?: string;
+  resetButton?: "reset" | "cancel";
   onReady?: Function;
   onLoad?: Function;
   onChange?: Function;
+  onCancel?: Function;
+  onSubmit?: Function;
 }
 
 const ArticleEditWidget = ({
   studioName,
   articleId,
   anthologyId,
+  resetButton = "reset",
   onReady,
   onLoad,
   onChange,
+  onCancel,
+  onSubmit,
 }: IWidget) => {
   const intl = useIntl();
   const [unauthorized, setUnauthorized] = useState(false);
@@ -92,6 +98,35 @@ const ArticleEditWidget = ({
       </div>
       <ProForm<IFormData>
         formRef={formRef}
+        submitter={{
+          // 完全自定义整个区域
+          render: (props, doms) => {
+            console.log(props);
+            return [
+              <Button
+                key="rest"
+                onClick={() => {
+                  if (resetButton === "reset") {
+                    props.form?.resetFields();
+                  } else {
+                    if (typeof onCancel !== "undefined") {
+                      onCancel();
+                    }
+                  }
+                }}
+              >
+                {resetButton === "reset" ? "重置" : "取消"}
+              </Button>,
+              <Button
+                type="primary"
+                key="submit"
+                onClick={() => props.form?.submit?.()}
+              >
+                提交
+              </Button>,
+            ];
+          },
+        }}
         onFinish={async (values: IFormData) => {
           const request: IArticleDataRequest = {
             uid: articleId ? articleId : "",
@@ -114,6 +149,9 @@ const ArticleEditWidget = ({
                 if (typeof onChange !== "undefined") {
                   onChange(res.data);
                 }
+                if (typeof onSubmit !== "undefined") {
+                  onSubmit(res.data);
+                }
                 formRef.current?.setFieldValue("content", res.data.content);
                 message.success(intl.formatMessage({ id: "flashes.success" }));
               } else {

dashboard/src/components/article/TypeArticle.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { Alert, Button } from "antd";
-
+import { Alert, Button, Modal } from "antd";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { IArticleDataResponse } from "../api/Article";
 import { ArticleMode, ArticleType } from "./Article";
 import TypeArticleReader from "./TypeArticleReader";
@@ -36,29 +36,29 @@ const TypeArticleWidget = ({
   onAnthologySelect,
   onArticleEdit,
 }: IWidget) => {
-  const [articleData, setArticleData] = useState<IArticleDataResponse>();
   const [edit, setEdit] = useState(false);
   return (
     <div>
-      <div>
-        {articleData?.role && articleData?.role !== "reader" && edit ? (
-          <Alert
-            message={"请在提交修改后点完成按钮"}
-            type="info"
-            action={<Button onClick={() => setEdit(!edit)}>{"完成"}</Button>}
-          />
-        ) : (
-          <></>
-        )}
-      </div>
       {edit ? (
         <ArticleEdit
           anthologyId={anthologyId ? anthologyId : undefined}
           articleId={articleId}
-          onChange={(value: IArticleDataResponse) => {
+          resetButton="cancel"
+          onSubmit={(value: IArticleDataResponse) => {
             if (typeof onArticleEdit !== "undefined") {
               onArticleEdit(value);
             }
+            setEdit(false);
+          }}
+          onCancel={() => {
+            Modal.confirm({
+              icon: <ExclamationCircleOutlined />,
+              content: "放弃修改吗？",
+              okType: "danger",
+              onOk() {
+                setEdit(false);
+              },
+            });
           }}
         />
       ) : (
@@ -77,7 +77,6 @@ const TypeArticleWidget = ({
             }
           }}
           onLoad={(data: IArticleDataResponse) => {
-            setArticleData(data);
             if (typeof onLoad !== "undefined") {
               onLoad(data);
             }

dashboard/src/components/article/TypeArticleReaderToolbar.tsx

@@ -17,6 +17,7 @@ import { ArticleTplModal } from "../template/Builder/ArticleTpl";
 import AnthologiesAtArticle from "./AnthologiesAtArticle";
 import { TRole } from "../api/Auth";
 import { useIntl } from "react-intl";
+import { TabIcon } from "../../assets/icon";
 
 interface IWidget {
   articleId?: string;
@@ -69,6 +70,7 @@ const TypeArticleReaderToolbarWidget = ({
             <Button
               type="link"
               size="small"
+              disabled={!editable}
               icon={<EditOutlined />}
               onClick={() => {
                 if (typeof onEdit !== "undefined") {
@@ -81,6 +83,13 @@ const TypeArticleReaderToolbarWidget = ({
           <Dropdown
             menu={{
               items: [
+                {
+                  label: intl.formatMessage({
+                    id: "buttons.open.in.new.tab",
+                  }),
+                  key: "open_in_tab",
+                  icon: <TabIcon />,
+                },
                 {
                   label: intl.formatMessage({
                     id: "buttons.add_to_anthology",
@@ -120,6 +129,12 @@ const TypeArticleReaderToolbarWidget = ({
               onClick: ({ key }) => {
                 console.log(`Click on item ${key}`);
                 switch (key) {
+                  case "open_in_tab":
+                    window.open(
+                      fullUrl(`/article/article/${articleId}`),
+                      "_blank"
+                    );
+                    break;
                   case "add_to_anthology":
                     setAddToAnthologyOpen(true);
                     break;