light-chaser-pro 1.0.0

package/light-chaser-app/src/pages/home/user-management/UserManagement.tsx

@@ -0,0 +1,209 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {ColumnsType} from "antd/es/table";
+import {Button, Input, Table} from "antd";
+import {Delete, Search} from "@icon-park/react";
+import {observer} from "mobx-react";
+import userManagementStore, {IUser} from "./UserManagementStore.ts";
+import {Key, KeyboardEvent, useEffect} from "react";
+import UserPanel from "./UserPanel.tsx";
+import {globalModal} from "light-chaser-ui/lib/message/GlobalModal.tsx";
+import PageContainer from "../page-container/PageContainer.tsx";
+import styles from "./UserManagement.module.less";
+
+const UserManagement = observer(() => {
+    const {
+        userPageData,
+        user,
+        userPanelVisible,
+        setUserPanelVisible,
+        openUserPanelWhenCreate,
+        doBatchDeleteUser,
+        doUpdateUser,
+        docCreateUser,
+        setSearchValue,
+        doGetUserList,
+        changeCurrentPage,
+        destroy
+    } = userManagementStore;
+    const {current, records, size, total} = userPageData;
+    let selectedIds: string[] = [];
+
+    const columns: ColumnsType<object> = [
+        {
+            title: '序号',
+            dataIndex: 'no',
+            key: 'no',
+            width: '5%',
+            className: styles.tableCell,
+        },
+        {
+            title: '账户',
+            dataIndex: 'name',
+            key: 'name',
+            className: styles.tableCell,
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+            className: styles.tableCell,
+        },
+        {
+            title: '电话',
+            dataIndex: 'phone',
+            key: 'phone',
+            className: styles.tableCell,
+        },
+        {
+            title: '邮箱',
+            dataIndex: 'email',
+            key: 'email',
+            className: styles.tableCell,
+        },
+        {
+            title: '操作',
+            key: 'operation',
+            className: styles.tableCell,
+            render: (record: IUser) => {
+                const {id} = record;
+                return (
+                    <div className={styles.actionButtons}>
+                        <Button
+                            type="link"
+                            className={styles.editButton}
+                            onClick={() => userManagementStore.doEditUserInfo(id!)}
+                        >
+                            {'编辑'}
+                        </Button>
+                        <Button
+                            type="link"
+                            className={styles.deleteButton}
+                            onClick={() => {
+                                globalModal.modalApi?.confirm({
+                                    title: '删除确认',
+                                    content: '确定删除该用户吗？',
+                                    onOk: () => userManagementStore.doBatchDeleteUser([id!]),
+                                });
+                            }}
+                        >
+                            {'删除'}
+                        </Button>
+                    </div>
+                );
+            },
+        }
+    ];
+
+    const rowSelection = {
+        onChange: (selectedRowKeys: Key[]) => {
+            selectedIds = [...selectedRowKeys as string[]];
+        }
+    };
+
+    const doSubmit = (data: IUser) => {
+        if (data.id)
+            doUpdateUser(data);
+        else
+            docCreateUser(data);
+    }
+
+    const onKeydown = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter')
+            return;
+        doSearch((event.target as any).value);
+    }
+
+    const doSearch = (event: KeyboardEvent) => {
+        setSearchValue((event.target as HTMLInputElement).value);
+        doGetUserList();
+    }
+
+    useEffect(() => {
+        doGetUserList();
+        return () => {
+            destroy();
+        }
+    }, []);
+
+    return (
+        <PageContainer
+            title={'用户管理'}
+            className={styles.pageContainer}
+            tools={[
+                <Input
+                    placeholder={'请输入用户名'}
+                    size={"middle"}
+                    prefix={<Search className={styles.searchIcon}/>}
+                    className={styles.searchInput}
+                    onKeyDown={onKeydown}
+                    onPressEnter={doSearch}
+                />,
+                <Button
+                    size={'middle'}
+                    type={"primary"}
+                    className={styles.createButton}
+                    onClick={() => openUserPanelWhenCreate()}
+                >
+                    + {'新建'}
+                </Button>,
+                <Button
+                    size={'middle'}
+                    danger={true}
+                    type={"primary"}
+                    className={styles.batchDeleteButton}
+                    onClick={() => {
+                        if (selectedIds.length === 0)
+                            return;
+                        globalModal.modalApi?.confirm({
+                            title: '删除确认',
+                            content: '确定删除选中的用户吗？',
+                            onOk: () => doBatchDeleteUser(selectedIds)
+                        });
+                    }}
+                >
+                    <Delete className={styles.deleteIcon}/>
+                    {'删除'}
+                </Button>
+            ]}
+            content={
+                <div className={styles.contentWrapper}>
+                    <Table
+                        dataSource={records}
+                        columns={columns}
+                        rowSelection={{
+                            type: 'checkbox',
+                            ...rowSelection,
+                        }}
+                        onChange={(pagination) => changeCurrentPage(pagination.current!)}
+                        pagination={{
+                            showTotal: () => `${'总计'} ${total}`,
+                            pageSize: size,
+                            current: current,
+                            total: total,
+                        }}
+                        className={styles.userTable}
+                    />
+                    <UserPanel
+                        visible={userPanelVisible}
+                        title={user.id ? '编辑用户' : '新增用户'}
+                        data={user}
+                        onClose={() => setUserPanelVisible(false)}
+                        onSubmitted={doSubmit}
+                    />
+                </div>
+            }
+        />
+    );
+});
+
+export default UserManagement;

package/light-chaser-app/src/pages/home/user-management/UserManagementStore.ts

@@ -0,0 +1,183 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {action, makeObservable, observable, runInAction} from "mobx";
+import AuthFetchUtil from "../../../util/AuthFetchUtil.ts";
+import {globalMessage} from "light-chaser-ui/lib/message/GlobalMessage.tsx";
+import {IPage} from "light-chaser-types/types/DesignerTypes.ts";
+import {HybridCryptoUtil} from "../../../util/HybridCryptoUtil.ts";
+
+export interface Option {
+    value: string;
+    label: string;
+}
+
+export interface IUser {
+    no?: number;
+    key?: string;
+    id?: string;
+    name?: string;
+    password?: string;
+    username?: string;
+    phone?: string;
+    email?: string;
+    avatar?: string;
+    avatarFile?: File;
+}
+
+class UserManagementStore {
+    constructor() {
+        makeObservable(this, {
+            searchValue: observable,
+            userPageData: observable,
+            user: observable,
+            userPanelVisible: observable,
+            roleOptions: observable,
+            setSearchValue: action,
+            setUserPageData: action,
+            setUser: action,
+            setUserPanelVisible: action,
+            changeCurrentPage: action,
+            setRoleOptions: action,
+        })
+    }
+
+    searchValue: string | null = null;
+
+    userPanelVisible: boolean = false;
+
+    userPageData: IPage<IUser> = {
+        records: [],
+        total: 0,
+        size: 10,
+        current: 1
+    };
+
+    user: IUser = {
+        id: undefined,
+        name: undefined,
+        password: undefined,
+        username: undefined,
+        phone: undefined,
+        email: undefined,
+    }
+
+    roleOptions: Option[] = [];
+
+    setRoleOptions = (roleOptions: Option[]) => this.roleOptions = roleOptions;
+
+    setUserPanelVisible = (visible: boolean) => this.userPanelVisible = visible;
+
+    changeCurrentPage = (current: number) => {
+        this.userPageData.current = current;
+        this.doGetUserList();
+    }
+
+
+    setSearchValue = (value: string) => this.searchValue = value;
+
+    setUserPageData = (userPageData: IPage<IUser>) => this.userPageData = userPageData;
+
+    setUser = (user: IUser) => this.user = user;
+
+    openUserPanelWhenCreate = () => {
+        this.setUserPanelVisible(true);
+        this.setUser({
+            id: undefined,
+            name: undefined,
+            password: undefined,
+            username: undefined,
+            phone: undefined,
+        });
+    }
+
+    doGetUserList = () => {
+        AuthFetchUtil.post<IPage<IUser>>('/api/user/pageList', {
+            current: this.userPageData.current,
+            size: this.userPageData.size,
+            searchValue: this.searchValue
+        }).then((res) => {
+            if (res !== null) {
+                res.records = res.records.map((item: IUser, index: number) => {
+                    item.no = index + 1;
+                    item.key = item.id!;
+                    return item;
+                });
+                this.setUserPageData(res);
+            }
+        })
+    }
+
+    docCreateUser = (user: IUser) => {
+        AuthFetchUtil.post('/api/user/create', user).then((res) => {
+            if (res !== null) {
+                globalMessage.messageApi?.success('创建成功');
+                this.doGetUserList();
+                this.setUserPanelVisible(false);
+            }
+        })
+    }
+
+    doUpdateUser = (user: IUser) => {
+        HybridCryptoUtil.encryptRequest(JSON.stringify(user)).then(encoded => {
+            AuthFetchUtil.post('/api/user/update', encoded).then((res) => {
+                if (res !== null) {
+                    globalMessage.messageApi?.success('更新成功');
+                    this.doGetUserList();
+                    this.setUserPanelVisible(false);
+                }
+            })
+        });
+    }
+
+    doEditUserInfo = (id: string) => {
+        AuthFetchUtil.get<IUser>(`/api/user/getUser/${id}`).then((res) => {
+            if (res !== null) {
+                this.setUser(res);
+                this.setUserPanelVisible(true);
+            }
+        })
+    }
+
+    doBatchDeleteUser = (ids: string[]) => {
+        AuthFetchUtil.post('/api/user/batchDel', ids).then((res) => {
+            if (res !== null) {
+                globalMessage.messageApi?.success('删除成功');
+                this.doGetUserList();
+            }
+        })
+    }
+
+    destroy = () => {
+        runInAction(() => {
+            this.searchValue = null;
+            this.userPageData = {
+                records: [],
+                total: 0,
+                size: 10,
+                current: 1
+            };
+            this.user = {
+                id: undefined,
+                name: undefined,
+                password: undefined,
+                username: undefined,
+                phone: undefined,
+                email: undefined,
+            };
+            this.userPanelVisible = false;
+        })
+    }
+
+}
+
+const userManagementStore = new UserManagementStore();
+export default userManagementStore;

package/light-chaser-app/src/pages/home/user-management/UserPanel.tsx

@@ -0,0 +1,113 @@
+/*
+ * Copyright © 2023-2025 puyinzhen
+ * All rights reserved.
+ *
+ * The copyright of this work (or idea/project/document) is owned by puyinzhen. Without explicit written permission, no part of this work may be reproduced, distributed, or modified in any form for commercial purposes.
+ *
+ * This copyright statement applies to, but is not limited to: concept descriptions, design documents, source code, images, presentation files, and any related content.
+ *
+ * For permission to use this work or any part of it, please contact 1182810784@qq.com to obtain written authorization.
+ */
+
+import {Button, Col, Drawer, Form, Input, Row, Space} from "antd";
+import {IUser} from "./UserManagementStore.ts";
+import {useEffect} from "react";
+import {getRoles, quickSearchRole} from "../../../api/RoleApi.ts";
+import SearchableSelect from "light-chaser-ui/lib/searchable-select/SearchableSelect.tsx";
+
+
+export interface UserPanelProps {
+    width?: number;
+    title?: string;
+    visible: boolean;
+    onClose: () => void;
+    onSubmitted: (data: IUser) => void;
+    data?: IUser;
+}
+
+export default function UserPanel(props: UserPanelProps) {
+    const {visible, onClose, data, onSubmitted, title, width = 700} = props;
+    const [form] = Form.useForm();
+
+    const submit = () => {
+        form.validateFields().then((values) => {
+            onSubmitted(values);
+        }).catch((error) => {
+            console.error(error);
+        })
+    }
+
+    const _onClose = () => {
+        form.resetFields();
+        onClose();
+    }
+
+    useEffect(() => {
+        if (visible)
+            form.setFieldsValue(data);
+    }, [visible]);
+
+    return (
+        <Drawer title={title}
+                className="user-panel"
+                placement="right"
+                closable={true}
+                width={width}
+                onClose={_onClose}
+                open={visible}
+                getContainer={false}
+                extra={
+                    <Space>
+                        <Button onClick={_onClose}>{'取消'}</Button>
+                        <Button type="primary" onClick={submit}>{'提交'}</Button>
+                    </Space>
+                }>
+            <Form layout="vertical" requiredMark={true} form={form}>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item hidden={true} name="id">
+                            <Input/>
+                        </Form.Item>
+                        <Form.Item name="username" label={'用户名'}
+                                   rules={[{required: true, message: '请输入用户名'}]}>
+                            <Input placeholder={"请输入用户名（用于登录）"}/>
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item name="name"
+                                   label={"姓名"}
+                                   rules={[{required: true, message: '请输入姓名（用于显示）'}]}>
+                            <Input placeholder={"请输入姓名"}/>
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item name="phone" label={"电话"}>
+                            <Input placeholder={"请输入电话"}/>
+                        </Form.Item>
+                    </Col>
+                    <Col span={12}>
+                        <Form.Item name="email" label={"邮箱"}>
+                            <Input placeholder={"请输入邮箱"}/>
+                        </Form.Item>
+                    </Col>
+                </Row>
+                <Row gutter={16}>
+                    <Col span={12}>
+                        <Form.Item name="roles" label={"角色"}>
+                            <SearchableSelect
+                                fetcher={quickSearchRole}
+                                mode="multiple"
+                                initializer={async (v) => await getRoles(v as string[])}
+                                allowClear
+                                showSearch
+                                placeholder="请选择角色"
+                                transformer={(role) => ({label: role.description, value: role.id})}/>
+                        </Form.Item>
+                    </Col>
+                </Row>
+            </Form>
+        </Drawer>
+    )
+}