From 5996a7024af1153f588b45c7bcd8bd501b0624c1 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Thu, 23 Jun 2022 14:26:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=A4=9A=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/LanguageSelect.tsx | 49 +++++++++++++++------------
 web/src/routes/Entry/LoginView.tsx    |  5 ++-
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/web/src/components/LanguageSelect.tsx b/web/src/components/LanguageSelect.tsx
index dfee0291..a4c17284 100644
--- a/web/src/components/LanguageSelect.tsx
+++ b/web/src/components/LanguageSelect.tsx
@@ -1,31 +1,36 @@
-import { Select } from 'antd';
+import { Select, SelectProps } from 'antd';
 import React, { useCallback } from 'react';
 import { showToasts, t, useLanguage } from 'tailchat-shared';
 
+type LanguageSelectProps = Omit<SelectProps, 'value' | 'onChange'>;
+
 /**
  * 语言切换选择框
  */
-export const LanguageSelect: React.FC = React.memo(() => {
-  const { language, setLanguage } = useLanguage();
+export const LanguageSelect: React.FC<LanguageSelectProps> = React.memo(
+  (props) => {
+    const { language, setLanguage } = useLanguage();
 
-  const handleChangeLanguage = useCallback(
-    (newLang: string) => {
-      showToasts(t('刷新页面后生效'), 'info');
-      setLanguage(newLang);
-    },
-    [setLanguage]
-  );
+    const handleChangeLanguage = useCallback(
+      (newLang: string) => {
+        showToasts(t('刷新页面后生效'), 'info');
+        setLanguage(newLang);
+      },
+      [setLanguage]
+    );
 
-  return (
-    <Select
-      style={{ width: 280 }}
-      size="large"
-      value={language}
-      onChange={handleChangeLanguage}
-    >
-      <Select.Option value="zh-CN">简体中文</Select.Option>
-      <Select.Option value="en-US">English</Select.Option>
-    </Select>
-  );
-});
+    return (
+      <Select
+        style={{ width: 280 }}
+        size="large"
+        {...props}
+        value={language}
+        onChange={handleChangeLanguage}
+      >
+        <Select.Option value="zh-CN">简体中文</Select.Option>
+        <Select.Option value="en-US">English</Select.Option>
+      </Select>
+    );
+  }
+);
 LanguageSelect.displayName = 'LanguageSelect';
diff --git a/web/src/routes/Entry/LoginView.tsx b/web/src/routes/Entry/LoginView.tsx
index 6006e03c..8f936832 100644
--- a/web/src/routes/Entry/LoginView.tsx
+++ b/web/src/routes/Entry/LoginView.tsx
@@ -12,6 +12,7 @@ import { useNavToView } from './utils';
 import { IconBtn } from '@/components/IconBtn';
 import { openModal } from '@/components/Modal';
 import { ServiceUrlSettings } from '@/components/modals/ServiceUrlSettings';
+import { LanguageSelect } from '@/components/LanguageSelect';
 
 /**
  * TODO:
@@ -140,12 +141,14 @@ export const LoginView: React.FC = React.memo(() => {
         </button>
       </div>
 
-      <div className="absolute bottom-4 left-0">
+      <div className="absolute bottom-4 left-0 space-x-2">
         <IconBtn
           icon="mdi:cog"
           shape="square"
           onClick={() => openModal(<ServiceUrlSettings />)}
         />
+
+        <LanguageSelect size="middle" />
       </div>
     </div>
   );