feat: ✨ 新增用户页面设计

apps/admin/src/views/user/addUser/index.tsx

@@ -1,16 +1,45 @@
+import { Card, Col, Flex, Row, Upload } from 'antd';
+import { SvgIcon, Translatex } from 'ui';
+
+import useStyles from './style';
+
 import type { FC } from 'react';
 
 interface PAddUser {
   onAdd?: (user: any) => void;
 }
 
 const AddUser: FC<PAddUser> = ({ onAdd = () => {} }) => {
-  console.log(onAdd);
-
+  const { Dragger } = Upload;
+  const { styles } = useStyles();
   return (
-    <div>
-      <div>添加用户</div>
-    </div>
+    <Translatex direction='left' run={true} delay={100}>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <Card>
+            <Dragger
+              // defaultFileList={dragImgs}
+              action='https://www.mocky.io/v2/5cc8019d300000980a055e76'
+              accept='.jpg, .jpeg, .gif, .png, .bmp'
+              multiple
+              className={styles['custom-upload-drag']}
+            >
+              <div className='add-phone-box'>
+                <Flex align='center' vertical justify='center' className='add-phone'>
+                  <SvgIcon name='camera' size={24} />
+                  <span>upload phone</span>
+                </Flex>
+              </div>
+              <p>
+                将图片拖到此处, 或<span style={{ color: '#1890ff;' }}>点击上传</span>
+              </p>
+              <p className='ant-upload-hint'>只能上传jpg、jpeg、gif、png、bmp文件, 且不超过500kb</p>
+            </Dragger>
+          </Card>
+        </Col>
+        <Col span={16}>2</Col>
+      </Row>
+    </Translatex>
   );
 };
 export default AddUser;

apps/admin/src/views/user/addUser/style.ts

@@ -0,0 +1,50 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token }) => ({
+  'custom-upload-drag': {
+    '.ant-upload-drag': {
+      background: '#fff',
+      border: 'none',
+      '&:hover': {
+        '.add-phone-box': {
+          border: `1px dashed ${token.colorPrimary}`,
+          '.add-phone': {
+            background: token.colorBgTextActive,
+          },
+        },
+      },
+      '.add-phone-box': {
+        width: '144px',
+        height: '144px',
+        borderRadius: '50%',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        margin: '0 auto',
+        padding: token.paddingSM,
+        border: `1px dashed ${token.colorBorderSecondary}`,
+        transition: 'border-color .3s ease',
+        '&:hover': {
+          border: `1px dashed ${token.colorPrimary}`,
+        },
+        '.add-phone': {
+          width: '100%',
+          height: '100%',
+          background: token.colorBgContainerDisabled,
+          borderRadius: '50%',
+          color: token.colorTextDisabled,
+          transition: 'all .3s ease',
+          '&:hover': {
+            background: token.colorBgTextActive,
+          },
+        },
+      },
+    },
+  },
+  'add-user-form': {
+    '.ant-input': {
+      borderRadius: token.borderRadiusLG,
+    },
+  },
+}));
+
+export default useStyles;