diff --git a/web/src/App.tsx b/web/src/App.tsx
index be3b0b35..e420ffb3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -83,14 +83,17 @@ export const App: React.FC = React.memo(() => {
-
- {/* 这个host用于处理其他页面(非main)的modal */}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
{/* NOTICE: Switch里不能出现动态路由 */}
{pluginRootRoute.map((r, i) => (
{
component={r.component}
/>
))}
-
-
-
-
+
+
+
+
);
diff --git a/web/src/components/LanguageSelect.tsx b/web/src/components/LanguageSelect.tsx
new file mode 100644
index 00000000..dfee0291
--- /dev/null
+++ b/web/src/components/LanguageSelect.tsx
@@ -0,0 +1,31 @@
+import { Select } from 'antd';
+import React, { useCallback } from 'react';
+import { showToasts, t, useLanguage } from 'tailchat-shared';
+
+/**
+ * 语言切换选择框
+ */
+export const LanguageSelect: React.FC = React.memo(() => {
+ const { language, setLanguage } = useLanguage();
+
+ const handleChangeLanguage = useCallback(
+ (newLang: string) => {
+ showToasts(t('刷新页面后生效'), 'info');
+ setLanguage(newLang);
+ },
+ [setLanguage]
+ );
+
+ return (
+
+ );
+});
+LanguageSelect.displayName = 'LanguageSelect';
diff --git a/web/src/components/modals/SettingsView/System.tsx b/web/src/components/modals/SettingsView/System.tsx
index f158bbdc..82a30383 100644
--- a/web/src/components/modals/SettingsView/System.tsx
+++ b/web/src/components/modals/SettingsView/System.tsx
@@ -1,17 +1,11 @@
import { FullModalField } from '@/components/FullModal/Field';
+import { LanguageSelect } from '@/components/LanguageSelect';
import { pluginColorScheme } from '@/plugin/common';
import { Select, Switch } from 'antd';
-import React, { useCallback } from 'react';
-import {
- showToasts,
- t,
- useColorScheme,
- useSingleUserSetting,
-} from 'tailchat-shared';
-import { useLanguage } from 'tailchat-shared';
+import React from 'react';
+import { t, useColorScheme, useSingleUserSetting } from 'tailchat-shared';
export const SettingsSystem: React.FC = React.memo(() => {
- const { language, setLanguage } = useLanguage();
const { colorScheme, setColorScheme } = useColorScheme();
const {
value: messageListVirtualization,
@@ -19,30 +13,9 @@ export const SettingsSystem: React.FC = React.memo(() => {
loading,
} = useSingleUserSetting('messageListVirtualization', false);
- const handleChangeLanguage = useCallback(
- (newLang: string) => {
- showToasts(t('刷新页面后生效'), 'info');
- setLanguage(newLang);
- },
- [setLanguage]
- );
-
return (
-
- 简体中文
- English
-
- }
- />
+ } />