@lobehub/chat 1.97.17 → 1.98.1

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;

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

@@ -0,0 +1,28 @@
+import { notFound } from 'next/navigation';
+
+import { isDesktop } from '@/const/version';
+import { metadataModule } from '@/server/metadata';
+import { translation } from '@/server/translation';
+import { DynamicLayoutProps } from '@/types/next';
+import { RouteVariants } from '@/utils/server/routeVariants';
+
+import Client from './index';
+
+export const generateMetadata = async (props: DynamicLayoutProps) => {
+  const locale = await RouteVariants.getLocale(props);
+  const { t } = await translation('setting', locale);
+
+  return metadataModule.generate({
+    description: t('header.desc'),
+    title: t('tab.proxy'),
+    url: '/settings/proxy',
+  });
+};
+
+const Page = () => {
+  if (!isDesktop) return notFound();
+
+  return <Client />;
+};
+
+export default Page;

package/src/locales/default/electron.ts

@@ -1,4 +1,43 @@
 const electron = {
+  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/src/locales/default/setting.ts

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

package/src/services/electron/settings.ts

@@ -0,0 +1,33 @@
+import { NetworkProxySettings, dispatch } from '@lobechat/electron-client-ipc';
+
+class DesktopSettingsService {
+  /**
+   * 获取远程服务器配置
+   */
+  getProxySettings = async () => {
+    return dispatch('getProxySettings');
+  };
+
+  /**
+   * 设置远程服务器配置
+   */
+  setSettings = async (data: Partial<NetworkProxySettings>) => {
+    return dispatch('setProxySettings', data);
+  };
+
+  /**
+   * 测试代理连接
+   */
+  testProxyConnection = async (url: string) => {
+    return dispatch('testProxyConnection', url);
+  };
+
+  /**
+   * 测试指定的代理配置
+   */
+  testProxyConfig = async (config: NetworkProxySettings, testUrl?: string) => {
+    return dispatch('testProxyConfig', { config, testUrl });
+  };
+}
+
+export const desktopSettingsService = new DesktopSettingsService();

package/src/store/electron/actions/settings.ts

@@ -0,0 +1,55 @@
+import { NetworkProxySettings } from '@lobechat/electron-client-ipc';
+import isEqual from 'fast-deep-equal';
+import useSWR, { SWRResponse, mutate } from 'swr';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { desktopSettingsService } from '@/services/electron/settings';
+
+import type { ElectronStore } from '../store';
+
+/**
+ * 设置操作
+ */
+export interface ElectronSettingsAction {
+  refreshProxySettings: () => Promise<void>;
+  setProxySettings: (params: Partial<NetworkProxySettings>) => Promise<void>;
+  useGetProxySettings: () => SWRResponse;
+}
+
+const ELECTRON_PROXY_SETTINGS_KEY = 'electron:getProxySettings';
+
+export const settingsSlice: StateCreator<
+  ElectronStore,
+  [['zustand/devtools', never]],
+  [],
+  ElectronSettingsAction
+> = (set, get) => ({
+  refreshProxySettings: async () => {
+    await mutate(ELECTRON_PROXY_SETTINGS_KEY);
+  },
+
+  setProxySettings: async (values) => {
+    try {
+      // 更新设置
+      await desktopSettingsService.setSettings(values);
+
+      // 刷新状态
+      await get().refreshProxySettings();
+    } catch (error) {
+      console.error('代理设置更新失败:', error);
+    }
+  },
+
+  useGetProxySettings: () =>
+    useSWR<NetworkProxySettings>(
+      ELECTRON_PROXY_SETTINGS_KEY,
+      async () => desktopSettingsService.getProxySettings(),
+      {
+        onSuccess: (data) => {
+          if (!isEqual(data, get().proxySettings)) {
+            set({ proxySettings: data });
+          }
+        },
+      },
+    ),
+});

package/src/store/electron/initialState.ts

@@ -1,7 +1,16 @@
-import { DataSyncConfig, ElectronAppState } from '@lobechat/electron-client-ipc';
+import { DataSyncConfig, ElectronAppState, NetworkProxySettings } from '@lobechat/electron-client-ipc';
 
 export type RemoteServerError = 'CONFIG_ERROR' | 'AUTH_ERROR' | 'DISCONNECT_ERROR';
 
+export const defaultProxySettings: NetworkProxySettings = {
+  enableProxy: false,
+  proxyBypass: 'localhost, 127.0.0.1, ::1',
+  proxyPort: '',
+  proxyRequireAuth: false,
+  proxyServer: '',
+  proxyType: 'http',
+};
+
 export interface ElectronState {
   appState: ElectronAppState;
   dataSyncConfig: DataSyncConfig;
@@ -9,6 +18,7 @@ export interface ElectronState {
   isConnectingServer?: boolean;
   isInitRemoteServerConfig: boolean;
   isSyncActive?: boolean;
+  proxySettings: NetworkProxySettings;
   remoteServerSyncError?: { message?: string; type: RemoteServerError };
 }
 
@@ -19,4 +29,5 @@ export const initialState: ElectronState = {
   isConnectingServer: false,
   isInitRemoteServerConfig: false,
   isSyncActive: false,
+  proxySettings: defaultProxySettings,
 };

package/src/store/electron/selectors/__tests__/desktopState.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { ElectronState } from '@/store/electron/initialState';
+import { ElectronState, defaultProxySettings } from '@/store/electron/initialState';
 
 import { desktopStateSelectors } from '../desktopState';
 
@@ -25,6 +25,7 @@ describe('desktopStateSelectors', () => {
           storageMode: 'local',
         },
         isInitRemoteServerConfig: false,
+        proxySettings: defaultProxySettings,
       };
 
       expect(desktopStateSelectors.usePath(state)).toEqual({
@@ -47,6 +48,7 @@ describe('desktopStateSelectors', () => {
           storageMode: 'local',
         },
         isInitRemoteServerConfig: false,
+        proxySettings: defaultProxySettings,
       };
 
       expect(desktopStateSelectors.usePath(state)).toBeUndefined();

package/src/store/electron/store.ts

@@ -4,6 +4,7 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { createDevtools } from '../middleware/createDevtools';
 import { type ElectronAppAction, createElectronAppSlice } from './actions/app';
+import { type ElectronSettingsAction, settingsSlice } from './actions/settings';
 import { type ElectronRemoteServerAction, remoteSyncSlice } from './actions/sync';
 import { type ElectronState, initialState } from './initialState';
 
@@ -12,7 +13,8 @@ import { type ElectronState, initialState } from './initialState';
 export interface ElectronStore
   extends ElectronState,
     ElectronRemoteServerAction,
-    ElectronAppAction {
+    ElectronAppAction,
+    ElectronSettingsAction {
   /* empty */
 }
 
@@ -22,6 +24,7 @@ const createStore: StateCreator<ElectronStore, [['zustand/devtools', never]]> =
   ...initialState,
   ...remoteSyncSlice(...parameters),
   ...createElectronAppSlice(...parameters),
+  ...settingsSlice(...parameters),
 });
 
 //  ===============  实装 useStore ============ //

package/src/store/global/initialState.ts

@@ -31,6 +31,7 @@ export enum SettingsTabs {
   Hotkey = 'hotkey',
   LLM = 'llm',
   Provider = 'provider',
+  Proxy = 'proxy',
   Storage = 'storage',
   Sync = 'sync',
   SystemAgent = 'system-agent',

package/apps/desktop/scripts/pglite-server.ts

@@ -1,14 +0,0 @@
-import { PGlite } from "@electric-sql/pglite";
-import { createServer } from "pglite-server";
-
-// 创建或连接到您现有的 PGlite 数据库
-const db = new PGlite("/Users/arvinxx/Library/Application Support/lobehub-desktop/lobehub-local-db");
-await db.waitReady;
-
-// 创建服务器并监听端口
-const PORT = 6543;
-const pgServer = createServer(db);
-
-pgServer.listen(PORT, () => {
-  console.log(`PGlite 服务器已启动，监听端口 ${PORT}`);
-});