feat: 首页增加多语言切换

web/src/components/LanguageSelect.tsx

@@ -1,11 +1,14 @@
-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(
+  (props) => {
     const { language, setLanguage } = useLanguage();
 
     const handleChangeLanguage = useCallback(
@@ -20,6 +23,7 @@ export const LanguageSelect: React.FC = React.memo(() => {
       <Select
         style={{ width: 280 }}
         size="large"
+        {...props}
         value={language}
         onChange={handleChangeLanguage}
       >
@@ -27,5 +31,6 @@ export const LanguageSelect: React.FC = React.memo(() => {
         <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>
   );