perf: 改名 Highlights Hub

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Global Highlights Hub</title>
+    <title>Highlights Hub</title>
     <style>
       .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}

src/views/Login.jsx

@@ -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() {
-  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) => {
-    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) {
-      navigate(defaultRoute)
+      navigate(defaultRoute);
     }
-  }, [loginStatus])
+  }, [loginStatus]);
 
   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({
-          message: t('Validation.Title'),
+        message: t("Validation.Title"),
-          description: t('Validation.LoginFailed'),
+        description: t("Validation.LoginFailed"),
-          placement: 'top',
+        placement: "top",
         duration: 4,
-        })
+      });
-      })
+    });
-  }
+  };
 
   const onFinishFailed = (errorInfo) => {
-    console.log('Failed:', errorInfo);
+    console.log("Failed:", errorInfo);
-  }
+  };
 
   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
+      </Typography.Title>
+      <Row justify="center" align="middle" className="min-h-96">
         <Form
-        name='login'
+          name="login"
-        layout='vertical'
+          layout="vertical"
           form={form}
-        size='large'
+          size="large"
           labelCol={{
             span: 8,
           }}
           wrapperCol={{
             span: 24,
           }}
-        className='max-w-xl'
+          className="max-w-xl"
           initialValues={{
             language: defaultLng,
           }}
           onFinish={onFinish}
           onFinishFailed={onFinishFailed}
-        autoComplete='off'
+          autoComplete="off"
         >
           <Form.Item
-          label={t('Username')}
+            label={t("Username")}
-          name='username'
+            name="username"
             rules={[
               {
                 required: true,
-              message: t('Validation.UsernameIsEmpty'),
+                message: t("Validation.UsernameIsEmpty"),
               },
             ]}
           >
             <Input />
           </Form.Item>
           <Form.Item
-          label={t('Password')}
+            label={t("Password")}
-          name='password'
+            name="password"
             rules={[
               {
                 required: true,
-              message: t('Validation.PasswordIsEmpty'),
+                message: t("Validation.PasswordIsEmpty"),
               },
             ]}
           >
             <Input.Password />
           </Form.Item>
-        <Form.Item name='language'>
+          <Form.Item name="language">
-          <Radio.Group onChange={e => handleLngChange(e.target.value)}>
+            <Radio.Group onChange={(e) => handleLngChange(e.target.value)}>
-            <Radio value='zh'>中文</Radio>
+              <Radio value="zh">中文</Radio>
-            <Radio value='en'>English</Radio>
+              <Radio value="en">English</Radio>
             </Radio.Group>
           </Form.Item>
           <Form.Item>
-          <Button type='primary' htmlType='submit' className='w-full'>
+            <Button type="primary" htmlType="submit" className="w-full">
-            {t('Login')}
+              {t("Login")}
             </Button>
           </Form.Item>
         </Form>
       </Row>
     </>
-  )
+  );
 }
 
-export default Login
+export default Login;