删除弹窗垂直居中

src/index.less

@@ -401,6 +401,11 @@ textarea.ant-input {
   }
 }
 
+.ant-modal-confirm-btns > .ant-btn-default:hover {
+  color: #ff4d4f !important;
+  border-color: #ff4d4f;
+}
+
 .form-column {
   width: 1px;
   height: 14px;

src/pages/course/index.tsx

@@ -147,6 +147,7 @@ export const CoursePage = () => {
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
       content: "确认删除此课程？",
+      centered: true,
       okText: "确认",
       okType: "danger",
       cancelText: "取消",

src/pages/department/index.tsx

@@ -140,6 +140,7 @@ export const DepartmentPage: React.FC = () => {
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
       content: "确认删除此部门？",
+      centered: true,
       okText: "确认",
       okType: "danger",
       cancelText: "取消",

src/pages/member/index.tsx

@@ -1,23 +1,13 @@
 import React, { useState, useEffect } from "react";
-import {
-  Row,
-  Col,
-  Typography,
-  Input,
-  Select,
-  Button,
-  Space,
-  Table,
-  Popconfirm,
-  message,
-} from "antd";
+import { Typography, Input, Modal, Button, Space, Table, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { user } from "../../api/index";
 import { dateFormat } from "../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
 import { TreeDepartment, PerButton } from "../../compenents";
+const { confirm } = Modal;
 
 interface DataType {
   id: React.Key;
@@ -44,6 +34,7 @@ export const MemberPage: React.FC = () => {
   const [email, setEmail] = useState<string>("");
   const [id_card, setIdCard] = useState<string>("");
   const [dep_ids, setDepIds] = useState<any>([]);
+  const [selLabel, setLabel] = useState<string>("全部部门");
 
   const columns: ColumnsType<DataType> = [
     {
@@ -79,7 +70,7 @@ export const MemberPage: React.FC = () => {
       key: "action",
       fixed: "right",
       width: 160,
-      render: (_, record) => (
+      render: (_, record: any) => (
         <Space size="small">
           <PerButton
             type="link"
@@ -91,23 +82,15 @@ export const MemberPage: React.FC = () => {
             disabled={null}
           />
           <div className="form-column"></div>
-          <Popconfirm
-            title="警告"
-            description="即将删除此账号，确认操作？"
-            onConfirm={() => delUser(record.id)}
-            okText="确定"
-            cancelText="取消"
-          >
-            <PerButton
-              type="link"
-              text="删除"
-              class="b-link c-red"
-              icon={null}
-              p="user-destroy"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Popconfirm>
+          <PerButton
+            type="link"
+            text="删除"
+            class="b-link c-red"
+            icon={null}
+            p="user-destroy"
+            onClick={() => delUser(record.id)}
+            disabled={null}
+          />
         </Space>
       ),
     },
@@ -169,28 +152,71 @@ export const MemberPage: React.FC = () => {
     setSize(pageSize);
   };
 
-  const delUser = (id: any) => {
-    user.destroyUser(id).then((res: any) => {
-      message.success("操作成功");
-      setRefresh(!refresh);
+  const delUser = (id: number) => {
+    if (id === 0) {
+      return;
+    }
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此视频？",
+      centered: true,
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        user.destroyUser(id).then((res: any) => {
+          message.success("操作成功");
+          setRefresh(!refresh);
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 
   const hasSelected = selectedRowKeys.length > 0;
   return (
     <>
-      <Row>
-        <Col span={4}>
-          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <TreeDepartment
-              text={"部门"}
-              onUpdate={(keys: any) => setDepIds(keys)}
-            />
-          </div>
-        </Col>
-        <Col span={20}>
-          <div className="playedu-main-top mb-24">
-            <div className="float-left d-flex">
+      <div className="tree-main-body">
+        <div className="left-box">
+          <TreeDepartment
+            text={"部门"}
+            onUpdate={(keys: any, title: any) => {
+              setDepIds(keys);
+              setLabel(title);
+            }}
+          />
+        </div>
+        <div className="right-box">
+          <div className="playedu-main-title float-left mb-24">{selLabel}</div>
+          <div className="float-left j-b-flex mb-24">
+            <div className="d-flex">
+              <Link style={{ textDecoration: "none" }} to={`/member/create`}>
+                <PerButton
+                  type="primary"
+                  text="新建"
+                  class="mr-16"
+                  icon={<PlusOutlined />}
+                  p="user-store"
+                  onClick={() => null}
+                  disabled={null}
+                />
+              </Link>
+              <Link style={{ textDecoration: "none" }} to={`/member/import`}>
+                <PerButton
+                  type="primary"
+                  text="学员批量导入"
+                  class="mr-16"
+                  icon={null}
+                  p="user-store"
+                  onClick={() => null}
+                  disabled={null}
+                />
+              </Link>
+            </div>
+            <div className="d-flex">
               <div className="d-flex mr-24">
                 <Typography.Text>昵称：</Typography.Text>
                 <Input
@@ -240,56 +266,18 @@ export const MemberPage: React.FC = () => {
               </div>
             </div>
           </div>
-          <div className="playedu-main-body only">
-            <div className="float-left j-b-flex mb-24">
-              <div className="d-flex">
-                <Link style={{ textDecoration: "none" }} to={`/member/create`}>
-                  <PerButton
-                    type="primary"
-                    text="新建"
-                    class="mr-16"
-                    icon={<PlusOutlined />}
-                    p="user-store"
-                    onClick={() => null}
-                    disabled={null}
-                  />
-                </Link>
-                <Link style={{ textDecoration: "none" }} to={`/member/import`}>
-                  <PerButton
-                    type="primary"
-                    text="学员批量导入"
-                    class="mr-16"
-                    icon={null}
-                    p="user-store"
-                    onClick={() => null}
-                    disabled={null}
-                  />
-                </Link>
-              </div>
-              <div className="d-flex">
-                <Button
-                  type="link"
-                  icon={<ReloadOutlined />}
-                  style={{ color: "#333333" }}
-                  onClick={() => {
-                    setRefresh(!refresh);
-                  }}
-                ></Button>
-              </div>
-            </div>
-            <div className="float-left">
-              <Table
-                rowSelection={rowSelection}
-                columns={columns}
-                dataSource={list}
-                loading={loading}
-                pagination={paginationProps}
-                rowKey={(record) => record.id}
-              />
-            </div>
+          <div className="float-left">
+            <Table
+              rowSelection={rowSelection}
+              columns={columns}
+              dataSource={list}
+              loading={loading}
+              pagination={paginationProps}
+              rowKey={(record) => record.id}
+            />
           </div>
-        </Col>
-      </Row>
+        </div>
+      </div>
     </>
   );
 };

src/pages/resource/images/index.tsx

@@ -51,6 +51,7 @@ export const ResourceImagesPage = () => {
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
       content: "确认删除选中图片？",
+      centered: true,
       okText: "确认",
       okType: "danger",
       cancelText: "取消",

src/pages/resource/resource-category/index.tsx

@@ -143,6 +143,7 @@ export const ResourceCategoryPage: React.FC = () => {
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
       content: "确认删除此分类？",
+      centered: true,
       okText: "确认",
       okType: "danger",
       cancelText: "取消",

src/pages/resource/videos/index.tsx

@@ -101,6 +101,7 @@ export const ResourceVideosPage = () => {
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
       content: "确认删除此视频？",
+      centered: true,
       okText: "确认",
       okType: "danger",
       cancelText: "取消",