image.png

    1. import React, { useState } from 'react';
    2. import { PageContainer } from '@ant-design/pro-components';
    3. import { Alert, Card, Col, Row } from 'antd';
    4. import { FormGroup } from '@/components';
    5. import { generatePassword } from '@/utils'
    6. import List from './List'
    8. const initialValues = {
    9.   ignore: 'iIl1o0O',
    10.   length: 6,
    11.   type: [1, 2, 3],
    12.   total: 1,
    13. };
    15. const GeneratePassword: React.FC = () => {
    16.   const [state, setState] = useState([]);
    18.   const fields = [
    19.     {
    20.       name: 'type',
    21.       label: '密码格式',
    22.       component: 'CheckboxGroup',
    23.       props: {
    24.         options: [
    25.           { label: '大写字母 [A-Z]', value: 1 },
    26.           { label: '小写字母 [a-z]', value: 2 },
    27.           { label: '数字 [0-9]', value: 3 },
    28.         ],
    29.       },
    30.     },
    31.     {
    32.       name: 'ignore',
    33.       label: '排除字符',
    34.       component: 'Input',
    35.       props: {},
    36.     },
    37.     {
    38.       label: ' ',
    39.       colon: false,
    40.       component: 'Title',
    41.       // noStyle: true,
    42.       props: { children: '密码强度', level: 5 },
    43.     },
    44.     {
    45.       name: 'length',
    46.       label: '密码长度',
    47.       component: 'Slider',
    48.       props: {
    49.         min: 4,
    50.         max: 128,
    51.         step: 2,
    52.         marks: {
    53.           6: 6,
    54.           24: 24,
    55.           48: 48,
    56.           80: 80,
    57.           128: 128,
    58.         }
    59.       },
    60.     },
    61.     {
    62.       name: 'total',
    63.       label: '密码数量',
    64.       component: 'InputNumber',
    65.       props: {
    66.         defaultValue: 1,
    67.       },
    68.     },
    69.   ];
    71.   function onFinish(values) {
    72.     const passwords = generatePassword(values);
    73.     setState(passwords);
    74.     console.log(60, values);
    75.   }
    78.   return (
    79.     <PageContainer>
    80.       <Card bordered={false}>
    81.         <FormGroup
    82.           initialValues={initialValues}
    83.           fields={fields}
    84.           col={24}
    85.           style={{ width: '50%' }}
    86.           okButtonProps={{
    87.             children: '生成密码',
    88.           }}
    89.           cancelButtonProps={{ danger: true }}
    90.           confirmLoading={false}
    91.           onFinish={onFinish}
    92.           onReset={() => setState([])}
    93.           mode='submit'
    94.         />
    95.       </Card>
    96.     </PageContainer>
    97.   );
    98. };
    100. export default GeneratePassword;