From 5abdb6a1035abc8cafbc105245ed1c5e900b19b8 Mon Sep 17 00:00:00 2001
From: yx9o <yangx_soft@163.com>
Date: Sun, 26 Jul 2026 15:46:35 +0800
Subject: [PATCH] fix: update TrustStore fields with client authentication

---
 web/src/pages/studio/SslSettings.tsx          |  3 ++-
 .../studio/__tests__/SslSettings.test.tsx     | 26 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/studio/SslSettings.tsx b/web/src/pages/studio/SslSettings.tsx
index 5359d953..652615b2 100644
--- a/web/src/pages/studio/SslSettings.tsx
+++ b/web/src/pages/studio/SslSettings.tsx
@@ -81,6 +81,7 @@ const SslSettingsPage = () => {
     certificateExpiry: '2025-12-31',
     certificateIssuer: "Let's Encrypt",
   });
+  const clientAuth = Form.useWatch('clientAuth', form) ?? sslConfig.clientAuth;
   const { t } = useLang();
   const { message } = App.useApp();
 
@@ -230,7 +231,7 @@ const SslSettingsPage = () => {
                 </Upload>
               </Form.Item>
 
-              {form.getFieldValue('clientAuth') !== 'none' && (
+              {clientAuth !== 'none' && (
                 <>
                   <Divider orientation="left">{t('ssl.truststoreConfig')}</Divider>
 
diff --git a/web/src/pages/studio/__tests__/SslSettings.test.tsx b/web/src/pages/studio/__tests__/SslSettings.test.tsx
index e02b60fe..f653dbc3 100644
--- a/web/src/pages/studio/__tests__/SslSettings.test.tsx
+++ b/web/src/pages/studio/__tests__/SslSettings.test.tsx
@@ -16,7 +16,7 @@
  */
 
 import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { App } from 'antd';
 import { LangProvider } from '../../../i18n/LangContext';
@@ -95,4 +95,28 @@ describe('SslSettings Page', () => {
     expect(screen.getByText('KeyStore 路径')).toBeInTheDocument();
     expect(screen.getByText('KeyStore 密码')).toBeInTheDocument();
   });
+
+  it('should show TrustStore fields when client authentication is required', async () => {
+    const user = userEvent.setup();
+    renderWithProviders(<SslSettings />);
+
+    await user.click(screen.getByRole('switch'));
+    expect(screen.queryByText('TrustStore 配置')).not.toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('客户端认证'));
+    await user.click(await screen.findByText('必需'));
+
+    expect(await screen.findByText('TrustStore 配置')).toBeInTheDocument();
+    expect(screen.getByText('TrustStore 类型')).toBeInTheDocument();
+    expect(screen.getByText('TrustStore 路径')).toBeInTheDocument();
+    expect(screen.getByText('TrustStore 密码')).toBeInTheDocument();
+
+    await user.click(screen.getByLabelText('客户端认证'));
+    await user.click(await screen.findByText('无'));
+    await waitFor(() => expect(screen.queryByText('TrustStore 配置')).not.toBeInTheDocument());
+
+    await user.click(screen.getByLabelText('客户端认证'));
+    await user.click(await screen.findByText('可选'));
+    expect(await screen.findByText('TrustStore 配置')).toBeInTheDocument();
+  });
 });