umi max

I have created the user settings model and a ProTable management page. The solution uses Umi Max's useModel for state, the built-in access plugin for permission logic, and ProTable for the UI.

Implementation

src/models/settings.ts

import { useState, useCallback } from 'react';

export default function useSettingsModel() {
  const [settings, setSettings] = useState({ theme: 'light', lang: 'en-US' });
  const updateSettings = useCallback((newSettings: Partial<typeof settings>) => {
    setSettings((prev) => ({ ...prev, ...newSettings }));
  }, []);

  return { settings, updateSettings };
}

src/pages/UserList/index.tsx

import React from 'react';
import { useAccess, useModel } from '@umijs/max';
import { ProTable, ActionType, ProColumns } from '@ant-design/pro-components';
import { Button, message, Popconfirm } from 'antd';
import { getUsers, deleteUser } from '@/services/user';

const UserList: React.FC = () => {
  const { canAdmin } = useAccess();
  const actionRef = React.useRef<ActionType>();

  const columns: ProColumns[] = [
    { title: 'Username', dataIndex: 'username', copyable: true },
    { title: 'Role', dataIndex: 'role', valueType: 'select', 
      valueEnum: { admin: { text: 'Admin', status: 'Error' }, user: { text: 'User', status: 'Default' } } 
    },
    {
      title: 'Actions',
      valueType: 'option',
      render: (_, record) => [
        canAdmin && (
          <Popconfirm
            key="delete"
            title="Delete user?"
            onConfirm={async () => {
              await deleteUser(record.id);
              message.success('Deleted');
              actionRef.current?.reload();
            }}
          >
            <a>Delete</a>
          </Popconfirm>
        ),
      ],
    },
  ];

  return (
    <ProTable
      headerTitle="User Management"
      actionRef={actionRef}
      rowKey="id"
      request={async (params) => {
        const res = await getUsers(params);
        return { data: res.data, success: true, total: res.total };
      }}
      columns={columns}
    />
  );
};

export default UserList;

Next steps

• Register the new page in config/routes.ts and assign the access: 'canAdmin' property if the entire page is restricted.
• Update src/access.ts to ensure the canAdmin boolean is correctly derived from initialState.
• Add the deleteUser method to src/services/user.ts using the Umi request utility.