Haina
/
GHHub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: 改名 Highlights Hub

Browse Source
main
LiaoYijun 2 months ago
parent 4f8e38bbe8
commit 49641b1450
2 changed files with 97 additions and 93 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global Highlights Hub</title> <title>Highlights Hub</title>
<style> <style>
.loading{width:150px;height:8px;border-radius:4px;margin:0 auto;margin-top:200px;position:relative;background:#777;overflow:hidden} .loading{width:150px;height:8px;border-radius:4px;margin:0 auto;margin-top:200px;position:relative;background:#777;overflow:hidden}
.loading span{display:block;width:100%;height:100%;border-radius:3px;background:#00b96b;animation:changePosition 4s linear infinite} .loading span{display:block;width:100%;height:100%;border-radius:3px;background:#00b96b;animation:changePosition 4s linear infinite}

188
src/views/Login.jsx
Unescape Escape View File

@ -1,112 +1,116 @@
import { useNavigate } from 'react-router-dom' import { useNavigate } from "react-router-dom";
import { useEffect } from 'react' import { useEffect } from "react";
import { Button, Form, Input, Row, Radio, App, Typography } from 'antd' import { Button, Form, Input, Row, Radio, App, Typography } from "antd";
import { useTranslation } from 'react-i18next' import { useTranslation } from "react-i18next";
import useAuthStore from '@/stores/Auth' import useAuthStore from "@/stores/Auth";
import { appendRequestParams } from '@/utils/request' import { appendRequestParams } from "@/utils/request";
function Login() { function Login() {
const [authenticate, loginStatus, defaultRoute] = const [authenticate, loginStatus, defaultRoute] = useAuthStore((state) => [
useAuthStore((state) => [state.authenticate, state.loginStatus, state.defaultRoute]) state.authenticate,
state.loginStatus,
state.defaultRoute,
]);
const { t, i18n } = useTranslation() const { t, i18n } = useTranslation();
const { notification } = App.useApp() const { notification } = App.useApp();
const navigate = useNavigate() const navigate = useNavigate();
const [form] = Form.useForm() const [form] = Form.useForm();
const handleLngChange = (lng) => { const handleLngChange = (lng) => {
appendRequestParams('lgc', lng === 'zh' ? 2 : 1) appendRequestParams("lgc", lng === "zh" ? 2 : 1);
i18n.changeLanguage(lng) i18n.changeLanguage(lng);
} };
const defaultLng = i18n.language??'zh' const defaultLng = i18n.language ?? "zh";
appendRequestParams('lgc', defaultLng === 'zh' ? 2 : 1) appendRequestParams("lgc", defaultLng === "zh" ? 2 : 1);
useEffect (() => { useEffect(() => {
if (loginStatus === 302) { if (loginStatus === 302) {
navigate(defaultRoute) navigate(defaultRoute);
} }
}, [loginStatus]) }, [loginStatus]);
const onFinish = (values) => { const onFinish = (values) => {
authenticate(values.username, values.password) authenticate(values.username, values.password).catch((ex) => {
.catch(ex => { console.error(ex);
console.error(ex) notification.error({
notification.error({ message: t("Validation.Title"),
message: t('Validation.Title'), description: t("Validation.LoginFailed"),
description: t('Validation.LoginFailed'), placement: "top",
placement: 'top', duration: 4,
duration: 4, });
}) });
}) };
}
const onFinishFailed = (errorInfo) => { const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo); console.log("Failed:", errorInfo);
} };
return ( return (
<> <>
<Typography.Title className="text-center" level={3}>Global Highlights Hub</Typography.Title> <Typography.Title className="text-center" level={3}>
<Row justify='center' align='middle' className='min-h-96'> Highlights Hub
<Form </Typography.Title>
name='login' <Row justify="center" align="middle" className="min-h-96">
layout='vertical' <Form
form={form} name="login"
size='large' layout="vertical"
labelCol={{ form={form}
span: 8, size="large"
}} labelCol={{
wrapperCol={{ span: 8,
span: 24, }}
}} wrapperCol={{
className='max-w-xl' span: 24,
initialValues={{ }}
language: defaultLng, className="max-w-xl"
}} initialValues={{
onFinish={onFinish} language: defaultLng,
onFinishFailed={onFinishFailed} }}
autoComplete='off' onFinish={onFinish}
> onFinishFailed={onFinishFailed}
<Form.Item autoComplete="off"
label={t('Username')}
name='username'
rules={[
{
required: true,
message: t('Validation.UsernameIsEmpty'),
},
]}
> >
<Input /> <Form.Item
</Form.Item> label={t("Username")}
<Form.Item name="username"
label={t('Password')} rules={[
name='password' {
rules={[ required: true,
{ message: t("Validation.UsernameIsEmpty"),
required: true, },
message: t('Validation.PasswordIsEmpty'), ]}
}, >
]} <Input />
> </Form.Item>
<Input.Password /> <Form.Item
</Form.Item> label={t("Password")}
<Form.Item name='language'> name="password"
<Radio.Group onChange={e => handleLngChange(e.target.value)}> rules={[
<Radio value='zh'>中文</Radio> {
<Radio value='en'>English</Radio> required: true,
</Radio.Group> message: t("Validation.PasswordIsEmpty"),
</Form.Item> },
<Form.Item> ]}
<Button type='primary' htmlType='submit' className='w-full'> >
{t('Login')} <Input.Password />
</Button> </Form.Item>
</Form.Item> <Form.Item name="language">
</Form> <Radio.Group onChange={(e) => handleLngChange(e.target.value)}>
</Row> <Radio value="zh">中文</Radio>
<Radio value="en">English</Radio>
</Radio.Group>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="w-full">
{t("Login")}
</Button>
</Form.Item>
</Form>
</Row>
</> </>
) );
} }
export default Login export default Login;

Write Preview
Loading…
Cancel
Save