@lobehub/chat 1.97.17 → 1.98.0

package/locales/vi-VN/electron.json

@@ -1,4 +1,43 @@
 {
+  "proxy": {
+    "auth": "Cần xác thực",
+    "authDesc": "Nếu máy chủ proxy yêu cầu tên đăng nhập và mật khẩu",
+    "authSettings": "Cài đặt xác thực",
+    "basicSettings": "Cài đặt proxy",
+    "basicSettingsDesc": "Cấu hình các tham số kết nối của máy chủ proxy",
+    "bypass": "Địa chỉ không sử dụng proxy",
+    "connectionTest": "Kiểm tra kết nối",
+    "enable": "Bật proxy",
+    "enableDesc": "Khi bật, truy cập mạng sẽ thông qua máy chủ proxy",
+    "password": "Mật khẩu",
+    "password_placeholder": "Vui lòng nhập mật khẩu",
+    "port": "Cổng",
+    "resetButton": "Đặt lại",
+    "saveButton": "Lưu",
+    "saveFailed": "Lưu thất bại: {{error}}",
+    "saveSuccess": "Lưu cài đặt proxy thành công",
+    "server": "Địa chỉ máy chủ",
+    "testButton": "Kiểm tra kết nối",
+    "testDescription": "Sử dụng cấu hình proxy hiện tại để kiểm tra kết nối, xác nhận cấu hình hoạt động bình thường",
+    "testFailed": "Kết nối thất bại",
+    "testSuccessWithTime": "Kiểm tra kết nối thành công, thời gian: {{time}} ms",
+    "testUrl": "Địa chỉ kiểm tra",
+    "testUrlPlaceholder": "Vui lòng nhập URL cần kiểm tra",
+    "testing": "Đang kiểm tra kết nối...",
+    "type": "Loại proxy",
+    "unsavedChanges": "Bạn có các thay đổi chưa được lưu",
+    "username": "Tên người dùng",
+    "username_placeholder": "Vui lòng nhập tên người dùng",
+    "validation": {
+      "passwordRequired": "Mật khẩu là bắt buộc khi bật xác thực",
+      "portInvalid": "Cổng phải là số từ 1 đến 65535",
+      "portRequired": "Cổng là bắt buộc khi bật proxy",
+      "serverInvalid": "Vui lòng nhập địa chỉ máy chủ hợp lệ (IP hoặc tên miền)",
+      "serverRequired": "Địa chỉ máy chủ là bắt buộc khi bật proxy",
+      "typeRequired": "Loại proxy là bắt buộc khi bật proxy",
+      "usernameRequired": "Tên đăng nhập là bắt buộc khi bật xác thực"
+    }
+  },
   "remoteServer": {
     "authError": "Xác thực thất bại: {{error}}",
     "authPending": "Vui lòng hoàn tất xác thực trong trình duyệt",

package/locales/vi-VN/setting.json

@@ -520,6 +520,7 @@
     "hotkey": "Phím tắt",
     "llm": "Mô hình ngôn ngữ",
     "provider": "Nhà cung cấp AI",
+    "proxy": "Mạng proxy",
     "storage": "Lưu trữ dữ liệu",
     "sync": "Đồng bộ trên đám mây",
     "system-agent": "Trợ lý hệ thống",

package/locales/zh-CN/electron.json

@@ -1,4 +1,43 @@
 {
+  "proxy": {
+    "auth": "需要认证",
+    "authDesc": "如果代理服务器需要用户名和密码",
+    "authSettings": "认证设置",
+    "basicSettings": "代理设置",
+    "basicSettingsDesc": "配置代理服务器的连接参数",
+    "bypass": "不使用代理的地址",
+    "connectionTest": "连接测试",
+    "enable": "启用代理",
+    "enableDesc": "开启后将通过代理服务器访问网络",
+    "password": "密码",
+    "password_placeholder": "请输入密码",
+    "port": "端口",
+    "resetButton": "重置",
+    "saveButton": "保存",
+    "saveFailed": "保存失败：{{error}}",
+    "saveSuccess": "代理设置保存成功",
+    "server": "服务器地址",
+    "testButton": "测试连接",
+    "testDescription": "使用当前代理配置测试连接，验证配置是否正常工作",
+    "testFailed": "连接失败",
+    "testSuccessWithTime": "测试连接成功，耗时 {{time}} ms",
+    "testUrl": "测试地址",
+    "testUrlPlaceholder": "请输入要测试的 URL",
+    "testing": "正在测试连接...",
+    "type": "代理类型",
+    "unsavedChanges": "您有未保存的更改",
+    "username": "用户名",
+    "username_placeholder": "请输入用户名",
+    "validation": {
+      "passwordRequired": "启用认证时密码为必填项",
+      "portInvalid": "端口必须是 1 到 65535 之间的数字",
+      "portRequired": "启用代理时端口为必填项",
+      "serverInvalid": "请输入有效的服务器地址（IP 或域名）",
+      "serverRequired": "启用代理时服务器地址为必填项",
+      "typeRequired": "启用代理时代理类型为必填项",
+      "usernameRequired": "启用认证时用户名为必填项"
+    }
+  },
   "remoteServer": {
     "authError": "授权失败: {{error}}",
     "authPending": "请在浏览器中完成授权",

package/locales/zh-CN/setting.json

@@ -520,6 +520,7 @@
     "hotkey": "快捷键",
     "llm": "语言模型",
     "provider": "AI 服务商",
+    "proxy": "网络代理",
     "storage": "数据存储",
     "sync": "云端同步",
     "system-agent": "系统助手",

package/locales/zh-TW/electron.json

@@ -1,4 +1,43 @@
 {
+  "proxy": {
+    "auth": "需要認證",
+    "authDesc": "如果代理伺服器需要使用者名稱和密碼",
+    "authSettings": "認證設定",
+    "basicSettings": "代理設定",
+    "basicSettingsDesc": "配置代理伺服器的連線參數",
+    "bypass": "不使用代理的地址",
+    "connectionTest": "連線測試",
+    "enable": "啟用代理",
+    "enableDesc": "開啟後將透過代理伺服器存取網路",
+    "password": "密碼",
+    "password_placeholder": "請輸入密碼",
+    "port": "埠號",
+    "resetButton": "重設",
+    "saveButton": "儲存",
+    "saveFailed": "儲存失敗：{{error}}",
+    "saveSuccess": "代理設定儲存成功",
+    "server": "伺服器地址",
+    "testButton": "測試連接",
+    "testDescription": "使用目前代理設定測試連線，驗證設定是否正常運作",
+    "testFailed": "連線失敗",
+    "testSuccessWithTime": "測試連線成功，耗時 {{time}} 毫秒",
+    "testUrl": "測試地址",
+    "testUrlPlaceholder": "請輸入要測試的 URL",
+    "testing": "正在測試連接...",
+    "type": "代理類型",
+    "unsavedChanges": "您有未儲存的變更",
+    "username": "使用者名稱",
+    "username_placeholder": "請輸入使用者名稱",
+    "validation": {
+      "passwordRequired": "啟用認證時密碼為必填項",
+      "portInvalid": "連接埠必須是 1 到 65535 之間的數字",
+      "portRequired": "啟用代理時連接埠為必填項",
+      "serverInvalid": "請輸入有效的伺服器位址（IP 或網域名稱）",
+      "serverRequired": "啟用代理時伺服器位址為必填項",
+      "typeRequired": "啟用代理時代理類型為必填項",
+      "usernameRequired": "啟用認證時使用者名稱為必填項"
+    }
+  },
   "remoteServer": {
     "authError": "授權失敗: {{error}}",
     "authPending": "請在瀏覽器中完成授權",

package/locales/zh-TW/setting.json

@@ -520,6 +520,7 @@
     "hotkey": "快速鍵",
     "llm": "語言模型",
     "provider": "AI 服務商",
+    "proxy": "網路代理",
     "storage": "資料儲存",
     "sync": "雲端同步",
     "system-agent": "系統助手",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.97.17",
+  "version": "1.98.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -118,7 +118,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
     "@ant-design/pro-components": "^2.8.7",
-    "@anthropic-ai/sdk": "^0.54.0",
+    "@anthropic-ai/sdk": "^0.56.0",
     "@auth/core": "^0.38.0",
     "@aws-sdk/client-bedrock-runtime": "^3.821.0",
     "@aws-sdk/client-s3": "^3.821.0",
@@ -199,7 +199,7 @@
     "langfuse": "^3.37.3",
     "langfuse-core": "^3.37.3",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.522.0",
+    "lucide-react": "^0.525.0",
     "mammoth": "^1.9.1",
     "markdown-to-txt": "^2.0.1",
     "mdast-util-to-markdown": "^2.1.2",

package/packages/electron-client-ipc/src/events/index.ts

@@ -1,6 +1,7 @@
 import { LocalFilesDispatchEvents } from './localFile';
 import { MenuDispatchEvents } from './menu';
 import { RemoteServerBroadcastEvents, RemoteServerDispatchEvents } from './remoteServer';
+import { DesktopSettingsDispatchEvents } from './settings';
 import { ShortcutDispatchEvents } from './shortcut';
 import { SystemBroadcastEvents, SystemDispatchEvents } from './system';
 import { TrayDispatchEvents } from './tray';
@@ -21,7 +22,8 @@ export interface ClientDispatchEvents
     ShortcutDispatchEvents,
     RemoteServerDispatchEvents,
     UploadFilesDispatchEvents,
-    TrayDispatchEvents {}
+    TrayDispatchEvents,
+    DesktopSettingsDispatchEvents {}
 
 export type ClientDispatchEventKey = keyof ClientDispatchEvents;
 

package/packages/electron-client-ipc/src/events/settings.ts

@@ -0,0 +1,12 @@
+import { NetworkProxySettings } from '../types';
+
+export interface DesktopSettingsDispatchEvents {
+  getProxySettings: () => NetworkProxySettings;
+  setProxySettings: (settings: Partial<NetworkProxySettings>) => void;
+  testProxyConfig: (data: { config: NetworkProxySettings; testUrl?: string }) => Promise<{
+    message?: string;
+    responseTime?: number;
+    success: boolean;
+  }>;
+  testProxyConnection: (url: string) => Promise<{ message?: string; success: boolean }>;
+}

package/packages/electron-client-ipc/src/types/index.ts

@@ -1,6 +1,7 @@
 export * from './dataSync';
 export * from './dispatch';
 export * from './localFile';
+export * from './proxy';
 export * from './proxyTRPCRequest';
 export * from './route';
 export * from './shortcut';

package/packages/electron-client-ipc/src/types/proxy.ts

@@ -0,0 +1,12 @@
+export type ProxyType = 'http' | 'https' | 'socks5';
+
+export interface NetworkProxySettings {
+  enableProxy: boolean;
+  proxyBypass?: string;
+  proxyPassword?: string;
+  proxyPort: string;
+  proxyRequireAuth: boolean;
+  proxyServer: string;
+  proxyType: ProxyType;
+  proxyUsername?: string;
+}

package/src/app/[variants]/(main)/settings/hooks/useCategory.tsx

@@ -4,6 +4,7 @@ import {
   Brain,
   Cloudy,
   Database,
+  EthernetPort,
   Info,
   KeyboardIcon,
   Mic2,
@@ -16,7 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import type { MenuProps } from '@/components/Menu';
-import { isDeprecatedEdition } from '@/const/version';
+import { isDeprecatedEdition, isDesktop } from '@/const/version';
 import { SettingsTabs } from '@/store/global/initialState';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
@@ -117,6 +118,15 @@ export const useCategory = () => {
         {
           type: 'divider',
         },
+        isDesktop && {
+          icon: <Icon icon={EthernetPort} />,
+          key: SettingsTabs.Proxy,
+          label: (
+            <Link href={'/settings/proxy'} onClick={(e) => e.preventDefault()}>
+              {t('tab.proxy')}
+            </Link>
+          ),
+        },
         {
           icon: <Icon icon={Database} />,
           key: SettingsTabs.Storage,

package/src/app/[variants]/(main)/settings/proxy/features/ProxyForm.tsx

@@ -0,0 +1,369 @@
+'use client';
+
+import { NetworkProxySettings } from '@lobechat/electron-client-ipc';
+import { Alert, Block, Text } from '@lobehub/ui';
+import { App, Button, Divider, Form, Input, Radio, Skeleton, Space, Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { desktopSettingsService } from '@/services/electron/settings';
+import { useElectronStore } from '@/store/electron';
+
+interface ProxyTestResult {
+  message?: string;
+  responseTime?: number;
+  success: boolean;
+}
+
+const ProxyForm = () => {
+  const { t } = useTranslation('electron');
+  const [form] = Form.useForm();
+  const { message } = App.useApp();
+  const [testUrl, setTestUrl] = useState('https://www.google.com');
+  const [isTesting, setIsTesting] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [testResult, setTestResult] = useState<ProxyTestResult | null>(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const isEnableProxy = Form.useWatch('enableProxy', form);
+  const proxyRequireAuth = Form.useWatch('proxyRequireAuth', form);
+
+  const [setProxySettings, useGetProxySettings] = useElectronStore((s) => [
+    s.setProxySettings,
+    s.useGetProxySettings,
+  ]);
+  const { data: proxySettings, isLoading } = useGetProxySettings();
+
+  useEffect(() => {
+    if (proxySettings) {
+      form.setFieldsValue(proxySettings);
+      setHasUnsavedChanges(false);
+    }
+  }, [form, proxySettings]);
+
+  // 监听表单变化
+  const handleValuesChange = useCallback(() => {
+    setHasUnsavedChanges(true);
+    setTestResult(null); // 清除之前的测试结果
+  }, []);
+
+  const updateFormValue = (value: any) => {
+    const preValues = form.getFieldsValue();
+    form.setFieldsValue(value);
+    const newValues = form.getFieldsValue();
+    if (isEqual(newValues, preValues)) return;
+
+    handleValuesChange();
+  };
+
+  // 保存配置
+  const handleSave = useCallback(async () => {
+    try {
+      setIsSaving(true);
+      const values = await form.validateFields();
+      await setProxySettings(values);
+      setHasUnsavedChanges(false);
+      message.success(t('proxy.saveSuccess'));
+    } catch (error) {
+      if (error instanceof Error) {
+        message.error(t('proxy.saveFailed', { error: error.message }));
+      }
+    } finally {
+      setIsSaving(false);
+    }
+  }, [form, t, message]);
+
+  // 重置配置
+  const handleReset = useCallback(() => {
+    if (proxySettings) {
+      form.setFieldsValue(proxySettings);
+      setHasUnsavedChanges(false);
+      setTestResult(null);
+    }
+  }, [form, proxySettings]);
+
+  // 测试代理配置
+  const handleTest = useCallback(async () => {
+    try {
+      setIsTesting(true);
+      setTestResult(null);
+
+      // 验证表单并获取当前配置
+      const values = await form.validateFields();
+      const config: NetworkProxySettings = {
+        ...proxySettings,
+        ...values,
+      };
+
+      // 使用新的 testProxyConfig 方法测试用户正在配置的代理
+      const result = await desktopSettingsService.testProxyConfig(config, testUrl);
+
+      setTestResult(result);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      const result: ProxyTestResult = {
+        message: errorMessage,
+        success: false,
+      };
+      setTestResult(result);
+      message.error(t('proxy.testFailed'));
+    } finally {
+      setIsTesting(false);
+    }
+  }, [proxySettings, testUrl]);
+
+  if (isLoading) return <Skeleton />;
+
+  return (
+    <Form
+      disabled={isSaving}
+      form={form}
+      layout="vertical"
+      onValuesChange={handleValuesChange}
+      requiredMark={false}
+    >
+      <Flexbox gap={24}>
+        {/* 基本代理设置 */}
+        <Block
+          paddingBlock={16}
+          paddingInline={24}
+          style={{ borderRadius: 12 }}
+          variant={'outlined'}
+        >
+          <Form.Item name="enableProxy" noStyle valuePropName="checked">
+            <Flexbox align={'center'} horizontal justify={'space-between'}>
+              <Flexbox>
+                <Text as={'h4'}>{t('proxy.enable')}</Text>
+                <Text type={'secondary'}>{t('proxy.enableDesc')}</Text>
+              </Flexbox>
+              <Switch
+                checked={isEnableProxy}
+                onChange={(checked) => {
+                  updateFormValue({ enableProxy: checked });
+                }}
+              />
+            </Flexbox>
+          </Form.Item>
+        </Block>
+
+        {/* 认证设置 */}
+        <Block
+          paddingBlock={16}
+          paddingInline={24}
+          style={{ borderRadius: 12 }}
+          variant={'outlined'}
+        >
+          <Flexbox gap={24}>
+            <Flexbox>
+              <Text as={'h4'}>{t('proxy.basicSettings')}</Text>
+              <Text type={'secondary'}>{t('proxy.basicSettingsDesc')}</Text>
+            </Flexbox>
+            <Flexbox>
+              <Form.Item
+                dependencies={['enableProxy']}
+                label={t('proxy.type')}
+                name="proxyType"
+                rules={[
+                  ({ getFieldValue }) => ({
+                    message: t('proxy.validation.typeRequired'),
+                    required: getFieldValue('enableProxy'),
+                  }),
+                ]}
+              >
+                <Radio.Group disabled={!form.getFieldValue('enableProxy')}>
+                  <Radio value="http">HTTP</Radio>
+                  <Radio value="https">HTTPS</Radio>
+                  <Radio value="socks5">SOCKS5</Radio>
+                </Radio.Group>
+              </Form.Item>
+
+              <Space.Compact style={{ width: '100%' }}>
+                <Form.Item
+                  dependencies={['enableProxy']}
+                  label={t('proxy.server')}
+                  name="proxyServer"
+                  rules={[
+                    ({ getFieldValue }) => ({
+                      message: t('proxy.validation.serverRequired'),
+                      required: getFieldValue('enableProxy'),
+                    }),
+                    {
+                      message: t('proxy.validation.serverInvalid'),
+                      pattern:
+                        /^((25[0-5]|2[0-4]\d|[01]?\d{1,2})\.){3}(25[0-5]|2[0-4]\d|[01]?\d{1,2})$|^[\dA-Za-z]([\dA-Za-z-]*[\dA-Za-z])?(\.[\dA-Za-z]([\dA-Za-z-]*[\dA-Za-z])?)*$/,
+                    },
+                  ]}
+                  style={{ flex: 1, marginBottom: 0 }}
+                >
+                  <Input disabled={!form.getFieldValue('enableProxy')} placeholder="127.0.0.1" />
+                </Form.Item>
+
+                <Form.Item
+                  dependencies={['enableProxy']}
+                  label={t('proxy.port')}
+                  name="proxyPort"
+                  rules={[
+                    ({ getFieldValue }) => ({
+                      message: t('proxy.validation.portRequired'),
+                      required: getFieldValue('enableProxy'),
+                    }),
+                    {
+                      message: t('proxy.validation.portInvalid'),
+                      pattern:
+                        /^([1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/,
+                    },
+                  ]}
+                  style={{ marginBottom: 0, width: 120 }}
+                >
+                  <Input disabled={!form.getFieldValue('enableProxy')} placeholder="7890" />
+                </Form.Item>
+              </Space.Compact>
+            </Flexbox>
+            <Divider size={'small'} />
+            <Flexbox gap={12}>
+              <Form.Item
+                dependencies={['enableProxy']}
+                name="proxyRequireAuth"
+                noStyle
+                valuePropName="checked"
+              >
+                <Flexbox align={'center'} horizontal justify={'space-between'}>
+                  <Flexbox>
+                    <Text as={'h5'}>{t('proxy.auth')}</Text>
+                    <Text type={'secondary'}>{t('proxy.authDesc')}</Text>
+                  </Flexbox>
+                  <Switch
+                    checked={proxyRequireAuth}
+                    disabled={!isEnableProxy}
+                    onChange={(checked) => {
+                      updateFormValue({ proxyRequireAuth: checked });
+                    }}
+                  />
+                </Flexbox>
+              </Form.Item>
+
+              <Form.Item
+                dependencies={['proxyRequireAuth', 'enableProxy']}
+                label={t('proxy.username')}
+                name="proxyUsername"
+                rules={[
+                  ({ getFieldValue }) => ({
+                    message: t('proxy.validation.usernameRequired'),
+                    required: getFieldValue('proxyRequireAuth') && getFieldValue('enableProxy'),
+                  }),
+                ]}
+                style={{
+                  display:
+                    form.getFieldValue('proxyRequireAuth') && form.getFieldValue('enableProxy')
+                      ? 'block'
+                      : 'none',
+                }}
+              >
+                <Input placeholder={t('proxy.username_placeholder')} />
+              </Form.Item>
+
+              <Form.Item
+                dependencies={['proxyRequireAuth', 'enableProxy']}
+                label={t('proxy.password')}
+                name="proxyPassword"
+                rules={[
+                  ({ getFieldValue }) => ({
+                    message: t('proxy.validation.passwordRequired'),
+                    required: getFieldValue('proxyRequireAuth') && getFieldValue('enableProxy'),
+                  }),
+                ]}
+                style={{
+                  display:
+                    form.getFieldValue('proxyRequireAuth') && form.getFieldValue('enableProxy')
+                      ? 'block'
+                      : 'none',
+                }}
+              >
+                <Input.Password placeholder={t('proxy.password_placeholder')} />
+              </Form.Item>
+            </Flexbox>
+          </Flexbox>
+        </Block>
+
+        {/* 连接测试 */}
+
+        <Block
+          paddingBlock={16}
+          paddingInline={24}
+          style={{ borderRadius: 12 }}
+          variant={'outlined'}
+        >
+          <Flexbox gap={24}>
+            <Flexbox>
+              <Text as={'h4'}>{t('proxy.connectionTest')}</Text>
+              <Text type={'secondary'}>{t('proxy.testDescription')}</Text>
+            </Flexbox>
+            <Form.Item label={t('proxy.testUrl')}>
+              <Flexbox gap={8}>
+                <Space.Compact style={{ width: '100%' }}>
+                  <Input
+                    onChange={(e) => setTestUrl(e.target.value)}
+                    placeholder={t('proxy.testUrlPlaceholder')}
+                    style={{ flex: 1 }}
+                    value={testUrl}
+                  />
+                  <Button loading={isTesting} onClick={handleTest} type="default">
+                    {t('proxy.testButton')}
+                  </Button>
+                </Space.Compact>
+                {/* 测试结果显示 */}
+                {!testResult ? null : testResult.success ? (
+                  <Alert
+                    closable
+                    message={
+                      <Flexbox align="center" gap={8} horizontal>
+                        {t('proxy.testSuccessWithTime', { time: testResult.responseTime })}
+                      </Flexbox>
+                    }
+                    type={'success'}
+                  />
+                ) : (
+                  <Alert
+                    closable
+                    message={
+                      <Flexbox align="center" gap={8} horizontal>
+                        {t('proxy.testFailed')}: {testResult.message}
+                      </Flexbox>
+                    }
+                    type={'error'}
+                    variant={'outlined'}
+                  />
+                )}
+              </Flexbox>
+            </Form.Item>
+          </Flexbox>
+        </Block>
+        {/* 操作按钮 */}
+        <Space>
+          <Button
+            disabled={!hasUnsavedChanges}
+            loading={isSaving}
+            onClick={handleSave}
+            type="primary"
+          >
+            {t('proxy.saveButton')}
+          </Button>
+
+          <Button disabled={!hasUnsavedChanges || isSaving} onClick={handleReset}>
+            {t('proxy.resetButton')}
+          </Button>
+
+          {hasUnsavedChanges && (
+            <Text style={{ marginLeft: 8 }} type="warning">
+              {t('proxy.unsavedChanges')}
+            </Text>
+          )}
+        </Space>
+      </Flexbox>
+    </Form>
+  );
+};
+
+export default ProxyForm;

package/src/app/[variants]/(main)/settings/proxy/index.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+import ProxyForm from './features/ProxyForm';
+
+const ProxySettings = () => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <div>
+      <PageTitle title={t('tab.proxy')} />
+      <ProxyForm />
+    </div>
+  );
+};
+
+ProxySettings.displayName = 'ProxySettings';
+
+export default ProxySettings;