build formily in vite, no display the form #2686

sia-fl · 2021-12-27T13:23:33Z

sia-fl
Dec 27, 2021

[ tried check issues?] yes

my package version

vite: 2.7.7
@formily/antd: 2.0.7
@formily/react: 2.0.7

local dev preview

nginx dist display

page code

import type { ReactElement } from 'react'
import { Tabs, message } from 'antd'
import { Submit, Form } from '@formily/antd'
import { createForm, onFormSubmit, onFormMount } from '@formily/core'
import { SchemaField } from '@/Page/Component/Schema'
import request from 'umi-request'
import store from 'store2'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { JSEncrypt } from 'jsencrypt'

export const PubKey = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvOnq4w6dqVFi8aZ0wRjo
S8/JVB3qLDamcVmRNUKtde6/DP3BI0tYBx/NvnJ3IhTyi9tdm3li7kanMMEj5k0t
e09tukHzlHszmeS3VhUAPERf6enJ7oss/pwmGJjC2fu5HFZn1Gz1zjlMI5TLmj7O
YRunT5Qj7PSDurRetSeVONRxSehjvAbdonZQ2LCMv1YeVr2x8//k9qxx3AIdMYps
AYWIEVSHTcopSuxdjltuJb46ZKiuJtJsnr9fN2xwivsZyjFg4p/v8P9OV3CRhF+y
Oolo8D0PpBUFxKUI0Rt2aeelMXhtfEhG7LDqQ15t8IhOfOPQhmFU7CEemUXDZDVQ
cwIDAQAB
-----END PUBLIC KEY-----
`

function AuthLogin(): ReactElement {
	const navigate = useNavigate()
	const [loginForm] = useState(createForm({
		validateFirst: true,
		effects() {
			if (import.meta.env.VITE_DEBUG === 'true') {
				onFormMount((form) => {
					form.setValues({
						phone: '19977775555',
						password: '123456',
						verify_code: '666666',
						allow_policy: true
					})
				})
			}
			onFormSubmit(async (form) => {
				if (form.invalid) {
					return
				}
				form.submitting = true
				const { values }: any = form
				if (!values.allow_policy) {
					message.warn('请阅读用户隐私政策, 并勾选')
				}
				const payload = { ...form.values }
				const { password } = payload
				const encrypt = new JSEncrypt()
				encrypt.setPublicKey(PubKey)
				payload.password = encrypt.encrypt(password)
				const result: any = await request('/api/login', { data: payload })
				if (result === undefined) {
					form.submitting = false
				} else {
					message.success('登陆成功')
					if (import.meta.env.VITE_DEBUG === 'true') {
						store.remove('routeTraces');
						store.remove('routeTraceArchives');
					}
					store.set('token', result.token)
					store.set('userinfo', result.data)
					store.set('permission', result.permissionKeys)
					navigate('/dash')
				}
			})
		}
	}))
	return (
		<Tabs centered className='w-full full-tabs'>
			<Tabs.TabPane key='login' tab='账号登陆'>
				<Form
					form={loginForm}
					layout='vertical'
					size='large'
					className='mt-1'
				>
					<SchemaField>
						<SchemaField.String
							name='phone'
							title='用户名'
							x-validator='phone'
							x-decorator='FormItem'
							x-component='Input'
							x-component-props={{
								prefix: '{{icon("UserOutlined")}}'
							}}
							required
						/>
						<SchemaField.String
							name='password'
							title='用户密码'
							x-decorator='FormItem'
							x-component='Password'
							x-component-props={{
								prefix: '{{icon("LockOutlined")}}'
							}}
							required
						/>
						<SchemaField.String
							name='verify_code'
							title='验证码'
							x-decorator='FormItem'
							x-component='VerifyCode'
							x-component-props={{
								prefix: '{{icon("MessageOutlined")}}',
								url: '/admin/login_sms_code'
							}}
							required
							x-reactions={[
								{
									dependencies: ['.phone#value', '.phone#valid'],
									fulfill: {
										state: {
											'component[1].readyPost': '{{$deps[0] && $deps[1]}}',
											'component[1].phoneNumber': '{{$deps[0]}}'
										}
									}
								}
							]}
						/>
						<SchemaField.Boolean
							name='remember'
							x-decorator='FormItem'
							x-decorator-props={{
								size: 'small'
							}}
							x-component='Checkbox'
							x-component-props={{
								children: '保持登陆'
							}}
						/>
					</SchemaField>
					<div className='flex justify-between'>
						<SchemaField>
							<SchemaField.Boolean
								name='allow_policy'
								x-decorator='FormItem'
								x-decorator-props={{
									size: 'small'
								}}
								x-component='Checkbox'
								x-component-props={{
									children: '同意用户隐私协议'
								}}
							/>
						</SchemaField>
						<span className='text-base text-blue-1100'>
								查看用户隐私协议
							</span>
					</div>
					<Submit block size='large'>登陆</Submit>
				</Form>
			</Tabs.TabPane>
			<Tabs.TabPane key='forgot' tab='重置密码' />
		</Tabs>
	)
}

export default AuthLogin