web: React18+TDesign 网页控制台（登录/工作台/素材/账号/任务/审核/挑战/通知/审计/成员/设置/admin）

2026-08-20 20:38:21 +08:00
parent cc8845dcec
commit 33b7d57498
131 changed files with 15279 additions and 0 deletions
@@ -0,0 +1,91 @@
+import React, { useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
+import { LockOnIcon, MailIcon, BrowseOffIcon, BrowseIcon, UserIcon } from 'tdesign-icons-react';
+import classnames from 'classnames';
+import { useAppDispatch } from 'modules/store';
+import { register } from 'modules/user';
+
+import Style from './index.module.less';
+
+const { FormItem } = Form;
+
+export default function Register() {
+  const [showPsw, toggleShowPsw] = useState(false);
+  const formRef = useRef<FormInstanceFunctions>();
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  const onSubmit = async (e: SubmitContext) => {
+    if (e.validateResult === true) {
+      const formValue = (formRef.current?.getFieldsValue?.(true) || {}) as {
+        email: string;
+        password: string;
+        nickname: string;
+        checked: boolean;
+      };
+      if (!formValue.checked) {
+        MessagePlugin.error('请同意服务协议与隐私声明');
+        return;
+      }
+      try {
+        const nickname = formValue.nickname || formValue.email.split('@')[0];
+        await dispatch(register({ email: formValue.email, password: formValue.password, nickname })).unwrap();
+        MessagePlugin.success('注册成功，已自动登录');
+        navigate('/dashboard/base');
+      } catch (err: any) {
+        MessagePlugin.error(err?.response?.data?.message || '注册失败，请稍后重试');
+      }
+    }
+  };
+
+  return (
+    <div>
+      <Form ref={formRef} className={classnames(Style.itemContainer, 'register-email')} labelWidth={0} onSubmit={onSubmit}>
+        <FormItem name='nickname'>
+          <Input size='large' placeholder='请输入昵称（选填）' prefixIcon={<UserIcon />} />
+        </FormItem>
+        <FormItem
+          name='email'
+          rules={[
+            { required: true, message: '邮箱必填', type: 'error' },
+            { email: true, message: '请输入正确的邮箱', type: 'warning' },
+          ]}
+        >
+          <Input type='text' size='large' placeholder='请输入邮箱' prefixIcon={<MailIcon />} />
+        </FormItem>
+        <FormItem
+          name='password'
+          rules={[
+            { required: true, message: '密码必填', type: 'error' },
+            { min: 8, message: '密码至少 8 位', type: 'warning' },
+          ]}
+        >
+          <Input
+            size='large'
+            type={showPsw ? 'text' : 'password'}
+            clearable
+            placeholder='请输入密码（至少 8 位）'
+            prefixIcon={<LockOnIcon />}
+            suffixIcon={
+              showPsw ? (
+                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
+              ) : (
+                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
+              )
+            }
+          />
+        </FormItem>
+        <FormItem className={Style.checkContainer} name='checked' initialData={false}>
+          <Checkbox>我已阅读并同意</Checkbox> <span className='tip'>EveryPublish 服务协议</span> 和
+          <span className='tip'>隐私声明</span>
+        </FormItem>
+        <FormItem>
+          <Button block size='large' type='submit'>
+            注册
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  );
+}