建立按钮改为点击弹窗

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

@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import { ActionType, ProTable } from "@ant-design/pro-components";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
-import { message, Modal, Space, Table, Typography } from "antd";
+import { message, Modal, Typography } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Popover } from "antd";
 import {
@@ -18,7 +18,7 @@ import {
 } from "../../../components/api/Article";
 import { delete_, get } from "../../../request";
 import { PublicityValueEnum } from "../../../components/studio/table";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 const { Text } = Typography;
 
@@ -35,7 +35,8 @@ interface IItem {
 const Widget = () => {
   const intl = useIntl();
   const { studioname } = useParams();
-  const anthologyCreate = <AnthologyCreate studio={studioname} />;
+  const [openCreate, setOpenCreate] = useState(false);
+
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
       icon: <ExclamationCircleOutlined />,
@@ -196,37 +197,6 @@ const Widget = () => {
             ],
           },
         ]}
-        rowSelection={{
-          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
-          // 注释该行则默认不显示下拉选项
-          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-        }}
-        tableAlertRender={({
-          selectedRowKeys,
-          selectedRows,
-          onCleanSelected,
-        }) => (
-          <Space size={24}>
-            <span>
-              {intl.formatMessage({ id: "buttons.selected" })}{" "}
-              {selectedRowKeys.length}
-              <Button
-                type="link"
-                style={{ marginInlineStart: 8 }}
-                onClick={onCleanSelected}
-              >
-                {intl.formatMessage({ id: "buttons.unselect" })}
-              </Button>
-            </span>
-          </Space>
-        )}
-        tableAlertOptionRender={() => {
-          return (
-            <Space size={16}>
-              <Button type="link">批量删除</Button>
-            </Space>
-          );
-        }}
         request={async (params = {}, sorter, filter) => {
           // TODO
           console.log(params, sorter, filter);
@@ -271,9 +241,21 @@ const Widget = () => {
         }}
         toolBarRender={() => [
           <Popover
-            content={anthologyCreate}
+            content={
+              <AnthologyCreate
+                studio={studioname}
+                onSuccess={() => {
+                  setOpenCreate(false);
+                  ref.current?.reload();
+                }}
+              />
+            }
             placement="bottomRight"
             trigger="click"
+            open={openCreate}
+            onOpenChange={(open: boolean) => {
+              setOpenCreate(open);
+            }}
           >
             <Button key="button" icon={<PlusOutlined />} type="primary">
               {intl.formatMessage({ id: "buttons.create" })}

dashboard/src/pages/studio/article/list.tsx

@@ -1,16 +1,6 @@
 import { useParams, Link } from "react-router-dom";
 import { useIntl } from "react-intl";
-
-import {
-  Space,
-  Button,
-  Popover,
-  Dropdown,
-  Table,
-  Typography,
-  Modal,
-  message,
-} from "antd";
+import { Button, Popover, Dropdown, Typography, Modal, message } from "antd";
 import { ActionType, ProTable } from "@ant-design/pro-components";
 import {
   PlusOutlined,
@@ -26,7 +16,7 @@ import {
   IDeleteResponse,
 } from "../../../components/api/Article";
 import { PublicityValueEnum } from "../../../components/studio/table";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 const { Text } = Typography;
 
@@ -42,7 +32,7 @@ interface DataItem {
 const Widget = () => {
   const intl = useIntl(); //i18n
   const { studioname } = useParams(); //url 参数
-  const articleCreate = <ArticleCreate studio={studioname} />;
+  const [openCreate, setOpenCreate] = useState(false);
 
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
@@ -215,45 +205,7 @@ const Widget = () => {
             },
           },
         ]}
-        rowSelection={{
-          // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
-          // 注释该行则默认不显示下拉选项
-          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
-        }}
-        tableAlertRender={({
-          selectedRowKeys,
-          selectedRows,
-          onCleanSelected,
-        }) => (
-          <Space size={24}>
-            <span>
-              {intl.formatMessage({ id: "buttons.selected" })}
-              {selectedRowKeys.length}
-              <Button
-                type="link"
-                style={{ marginInlineStart: 8 }}
-                onClick={onCleanSelected}
-              >
-                {intl.formatMessage({
-                  id: "buttons.unselect",
-                })}
-              </Button>
-            </span>
-          </Space>
-        )}
-        tableAlertOptionRender={() => {
-          return (
-            <Space size={16}>
-              <Button type="link">
-                {intl.formatMessage({
-                  id: "buttons.delete.all",
-                })}
-              </Button>
-            </Space>
-          );
-        }}
         request={async (params = {}, sorter, filter) => {
-          // TODO
           console.log(params, sorter, filter);
           let url = `/v2/article?view=studio&name=${studioname}`;
           const offset =
@@ -295,9 +247,21 @@ const Widget = () => {
         }}
         toolBarRender={() => [
           <Popover
-            content={articleCreate}
-            title="Create"
+            content={
+              <ArticleCreate
+                studio={studioname}
+                onSuccess={() => {
+                  setOpenCreate(false);
+                  ref.current?.reload();
+                }}
+              />
+            }
             placement="bottomRight"
+            trigger="click"
+            open={openCreate}
+            onOpenChange={(open: boolean) => {
+              setOpenCreate(open);
+            }}
           >
             <Button key="button" icon={<PlusOutlined />} type="primary">
               {intl.formatMessage({ id: "buttons.create" })}

dashboard/src/pages/studio/channel/list.tsx

@@ -16,7 +16,7 @@ import { delete_, get } from "../../../request";
 import { IApiResponseChannelList } from "../../../components/api/Channel";
 import { PublicityValueEnum } from "../../../components/studio/table";
 import { IDeleteResponse } from "../../../components/api/Article";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 const { Text } = Typography;
 
 interface IItem {
@@ -32,7 +32,7 @@ interface IItem {
 const Widget = () => {
   const intl = useIntl();
   const { studioname } = useParams();
-  const channelCreate = <ChannelCreate studio={studioname} />;
+  const [openCreate, setOpenCreate] = useState(false);
 
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
@@ -316,9 +316,21 @@ const Widget = () => {
         }}
         toolBarRender={() => [
           <Popover
-            content={channelCreate}
-            title="new channel"
+            content={
+              <ChannelCreate
+                studio={studioname}
+                onSuccess={() => {
+                  setOpenCreate(false);
+                  ref.current?.reload();
+                }}
+              />
+            }
             placement="bottomRight"
+            trigger="click"
+            open={openCreate}
+            onOpenChange={(open: boolean) => {
+              setOpenCreate(open);
+            }}
           >
             <Button key="button" icon={<PlusOutlined />} type="primary">
               {intl.formatMessage({ id: "buttons.create" })}

dashboard/src/pages/studio/course/list.tsx

@@ -7,8 +7,6 @@ import {
   Button,
   Popover,
   Dropdown,
-  MenuProps,
-  Menu,
   Table,
   Image,
   message,
@@ -19,7 +17,6 @@ import { ProTable, ActionType } from "@ant-design/pro-components";
 import {
   PlusOutlined,
   DeleteOutlined,
-  TeamOutlined,
   ExclamationCircleOutlined,
 } from "@ant-design/icons";
 
@@ -79,18 +76,6 @@ const Widget = () => {
   const ref = useRef<ActionType>();
   const [openCreate, setOpenCreate] = useState(false);
 
-  const courseCreate = (
-    <CourseCreate
-      studio={studioname}
-      onCreate={() => {
-        //新建课程成功后刷新
-        setActiveKey("create");
-        setCreateNumber(createNumber + 1);
-        ref.current?.reload();
-        setOpenCreate(false);
-      }}
-    />
-  );
   useEffect(() => {
     /**
      * 获取各种课程的数量
@@ -399,7 +384,18 @@ const Widget = () => {
         }}
         toolBarRender={() => [
           <Popover
-            content={courseCreate}
+            content={
+              <CourseCreate
+                studio={studioname}
+                onCreate={() => {
+                  //新建课程成功后刷新
+                  setActiveKey("create");
+                  setCreateNumber(createNumber + 1);
+                  ref.current?.reload();
+                  setOpenCreate(false);
+                }}
+              />
+            }
             title="Create"
             placement="bottomRight"
             trigger="click"

dashboard/src/pages/studio/dict/list.tsx

@@ -25,7 +25,7 @@ import { useRef, useState } from "react";
 import DictEdit from "../../../components/dict/DictEdit";
 import { IDeleteResponse } from "../../../components/api/Article";
 
-const { Text } = Typography;
+const { Link, Text } = Typography;
 
 interface IItem {
   sn: number;
@@ -220,9 +220,7 @@ const Widget = () => {
                     },
                   }}
                 >
-                  <Button
-                    type="link"
-                    size="small"
+                  <Link
                     onClick={() => {
                       setWordId(row.wordId);
                       setDrawerTitle(row.word);
@@ -232,7 +230,7 @@ const Widget = () => {
                     {intl.formatMessage({
                       id: "buttons.edit",
                     })}
-                  </Button>
+                  </Link>
                 </Dropdown.Button>,
               ];
             },
@@ -266,7 +264,6 @@ const Widget = () => {
           return (
             <Space size={16}>
               <Button type="link">批量删除</Button>
-              <Button type="link">导出数据</Button>
             </Space>
           );
         }}
@@ -306,7 +303,7 @@ const Widget = () => {
             data: items,
           };
         }}
-        rowKey="id"
+        rowKey="sn"
         bordered
         pagination={{
           showQuickJumper: true,
@@ -326,6 +323,7 @@ const Widget = () => {
               setDrawerTitle("New word");
               setIsCreateOpen(true);
             }}
+            disabled={true}
           >
             {intl.formatMessage({ id: "buttons.create" })}
           </Button>,

dashboard/src/pages/studio/group/list.tsx

@@ -13,7 +13,7 @@ import { IGroupListResponse } from "../../../components/api/Group";
 import GroupCreate from "../../../components/group/GroupCreate";
 import { RoleValueEnum } from "../../../components/studio/table";
 import { IDeleteResponse } from "../../../components/api/Article";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 
 const { Text } = Typography;
 
@@ -29,6 +29,7 @@ interface DataItem {
 const Widget = () => {
   const intl = useIntl(); //i18n
   const { studioname } = useParams(); //url 参数
+  const [openCreate, setOpenCreate] = useState(false);
 
   const showDeleteConfirm = (id: string, title: string) => {
     Modal.confirm({
@@ -221,11 +222,17 @@ const Widget = () => {
               <GroupCreate
                 studio={studioname}
                 onCreate={() => {
+                  setOpenCreate(false);
                   ref.current?.reload();
                 }}
               />
             }
             placement="bottomRight"
+            trigger="click"
+            open={openCreate}
+            onOpenChange={(open: boolean) => {
+              setOpenCreate(open);
+            }}
           >
             <Button key="button" icon={<PlusOutlined />} type="primary">
               {intl.formatMessage({ id: "buttons.create" })}