将overlay 升级为menu

dashboard/src/components/template/SentEdit/SentEditMenu.tsx

@@ -1,6 +1,7 @@
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown } from "antd";
 import { useState } from "react";
 import { EditOutlined, CopyOutlined, MoreOutlined } from "@ant-design/icons";
+import type { MenuProps } from "antd";
 
 interface ISentEditMenu {
   children?: React.ReactNode;
@@ -9,23 +10,19 @@ interface ISentEditMenu {
 const Widget = ({ children, onModeChange }: ISentEditMenu) => {
   const [isHover, setIsHover] = useState(false);
 
-  const menu = (
-    <Menu
-      onClick={(e) => {
-        console.log(e);
-      }}
-      items={[
-        {
-          key: "en",
-          label: "时间线",
-        },
-        {
-          key: "zh-Hans",
-          label: "分享",
-        },
-      ]}
-    />
-  );
+  const onClick: MenuProps["onClick"] = (e) => {
+    console.log(e);
+  };
+  const items = [
+    {
+      key: "en",
+      label: "时间线",
+    },
+    {
+      key: "zh-Hans",
+      label: "分享",
+    },
+  ];
 
   return (
     <div
@@ -54,7 +51,7 @@ const Widget = ({ children, onModeChange }: ISentEditMenu) => {
           }}
         />
         <Button icon={<CopyOutlined />} size="small" />
-        <Dropdown overlay={menu} placement="bottomRight">
+        <Dropdown menu={{ items, onClick }} placement="bottomRight">
           <Button icon={<MoreOutlined />} size="small" />
         </Dropdown>
       </div>

dashboard/src/pages/studio/recent/index.tsx

@@ -2,8 +2,7 @@ import { useParams } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { Layout, Space, Table } from "antd";
-import type { MenuProps } from "antd";
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
 import { ProTable } from "@ant-design/pro-components";
 
@@ -11,33 +10,6 @@ import LeftSider from "../../../components/studio/LeftSider";
 
 const { Content } = Layout;
 
-const onMenuClick: MenuProps["onClick"] = (e) => {
-  console.log("click", e);
-};
-
-const menu = (
-  <Menu
-    onClick={onMenuClick}
-    items={[
-      {
-        key: "1",
-        label: "在藏经阁中打开",
-        icon: <SearchOutlined />,
-      },
-      {
-        key: "2",
-        label: "分享",
-        icon: <SearchOutlined />,
-      },
-      {
-        key: "3",
-        label: "删除",
-        icon: <SearchOutlined />,
-      },
-    ]}
-  />
-);
-
 interface IItem {
   id: number;
   title: string;
@@ -120,7 +92,40 @@ const Widget = () => {
               width: 120,
               valueType: "option",
               render: (text, row, index, action) => [
-                <Dropdown.Button type="link" key={index} overlay={menu}>
+                <Dropdown.Button
+                  type="link"
+                  key={index}
+                  trigger={["click", "contextMenu"]}
+                  menu={{
+                    items: [
+                      {
+                        key: "open",
+                        label: "在藏经阁中打开",
+                        icon: <SearchOutlined />,
+                      },
+                      {
+                        key: "share",
+                        label: "分享",
+                        icon: <SearchOutlined />,
+                      },
+                      {
+                        key: "delete",
+                        label: "删除",
+                        icon: <SearchOutlined />,
+                      },
+                    ],
+                    onClick: (e) => {
+                      switch (e.key) {
+                        case "share":
+                          break;
+                        case "delete":
+                          break;
+                        default:
+                          break;
+                      }
+                    },
+                  }}
+                >
                   {intl.formatMessage({ id: "buttons.edit" })}
                 </Dropdown.Button>,
               ],