feat: 首页增加多语言切换

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(() => {
+export const LanguageSelect: React.FC<LanguageSelectProps> = React.memo(
-  const { language, setLanguage } = useLanguage();
+  (props) => {
+    const { language, setLanguage } = useLanguage();
 
-  const handleChangeLanguage = useCallback(
+    const handleChangeLanguage = useCallback(
-    (newLang: string) => {
+      (newLang: string) => {
-      showToasts(t('刷新页面后生效'), 'info');
+        showToasts(t('刷新页面后生效'), 'info');
-      setLanguage(newLang);
+        setLanguage(newLang);
-    },
+      },
-    [setLanguage]
+      [setLanguage]
-  );
+    );
 
-  return (
+    return (
-    <Select
+      <Select
-      style={{ width: 280 }}
+        style={{ width: 280 }}
-      size="large"
+        size="large"
-      value={language}
+        {...props}
-      onChange={handleChangeLanguage}
+        value={language}
-    >
+        onChange={handleChangeLanguage}
-      <Select.Option value="zh-CN">简体中文</Select.Option>
+      >
-      <Select.Option value="en-US">English</Select.Option>
+        <Select.Option value="zh-CN">简体中文</Select.Option>
-    </Select>
+        <Select.Option value="en-US">English</Select.Option>
-  );
+      </Select>
-});
+    );
+  }
+);
 LanguageSelect.displayName = 'LanguageSelect';

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>
   );