线上课列表操作按钮下拉

src/pages/course/index.tsx

@@ -9,10 +9,16 @@ import {
   message,
   Space,
   Tabs,
+  Dropdown,
 } from "antd";
 import { course } from "../../api";
 import styles from "./index.module.less";
-import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
+import {
+  PlusOutlined,
+  DownOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+import type { MenuProps } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { dateFormat } from "../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
@@ -164,8 +170,60 @@ export const CoursePage = () => {
       title: "操作",
       key: "action",
       fixed: "right",
-      width: 210,
+      width: 160,
-      render: (_, record: any) => (
+      render: (_, record: any) => {
+        const items: MenuProps["items"] = [
+          {
+            key: "1",
+            label: (
+              <PerButton
+                type="link"
+                text="课时"
+                class="b-link c-red"
+                icon={null}
+                p="course"
+                onClick={() => {
+                  setCid(Number(record.id));
+                  setHourUpdateVisible(true);
+                }}
+                disabled={null}
+              />
+            ),
+          },
+          {
+            key: "2",
+            label: (
+              <PerButton
+                type="link"
+                text="编辑"
+                class="b-link c-red"
+                icon={null}
+                p="course"
+                onClick={() => {
+                  setCid(Number(record.id));
+                  setUpdateVisible(true);
+                }}
+                disabled={null}
+              />
+            ),
+          },
+          {
+            key: "3",
+            label: (
+              <PerButton
+                type="link"
+                text="删除"
+                class="b-link c-red"
+                icon={null}
+                p="course"
+                onClick={() => delItem(record.id)}
+                disabled={null}
+              />
+            ),
+          },
+        ];
+
+        return (
           <Space size="small">
             <PerButton
               type="link"
@@ -180,43 +238,21 @@ export const CoursePage = () => {
               disabled={null}
             />
             <div className="form-column"></div>
-          <PerButton
+            <Dropdown menu={{ items }}>
+              <Button
                 type="link"
-            text="课时"
+                className="b-link c-red"
-            class="b-link c-red"
+                onClick={(e) => e.preventDefault()}
-            icon={null}
+              >
-            p="course"
+                <Space>
-            onClick={() => {
+                  更多
-              setCid(Number(record.id));
+                  <DownOutlined />
-              setHourUpdateVisible(true);
-            }}
-            disabled={null}
-          />
-          <div className="form-column"></div>
-          <PerButton
-            type="link"
-            text="编辑"
-            class="b-link c-red"
-            icon={null}
-            p="course"
-            onClick={() => {
-              setCid(Number(record.id));
-              setUpdateVisible(true);
-            }}
-            disabled={null}
-          />
-          <div className="form-column"></div>
-          <PerButton
-            type="link"
-            text="删除"
-            class="b-link c-red"
-            icon={null}
-            p="course"
-            onClick={() => delItem(record.id)}
-            disabled={null}
-          />
                 </Space>
-      ),
+              </Button>
+            </Dropdown>
+          </Space>
+        );
+      },
     },
   ];