From ddc4cdeb60226590c5fca3cea58b20a79a1380ea Mon Sep 17 00:00:00 2001
From: Ember <15190419+0xEmberZz@users.noreply.github.com>
Date: Tue, 11 Nov 2025 12:17:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B0=8F=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E8=AE=BE=E5=A4=87=E4=B8=8A=E5=AF=B9=E8=AF=9D=E6=A1=86?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E8=BF=87=E9=AB=98=E6=97=A0=E6=B3=95=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98=20(#681)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AITradersPage.tsx     | 1159 ++++++++++++----------
 web/src/components/TraderConfigModal.tsx |   14 +-
 2 files changed, 666 insertions(+), 507 deletions(-)

diff --git a/web/src/components/AITradersPage.tsx b/web/src/components/AITradersPage.tsx
index 079a956d..32252ad1 100644
--- a/web/src/components/AITradersPage.tsx
+++ b/web/src/components/AITradersPage.tsx
@@ -1288,85 +1288,96 @@ function SignalSourceModal({
   }
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto">
       <div
-        className="bg-gray-800 rounded-lg p-6 w-full max-w-lg relative"
-        style={{ background: '#1E2329' }}
+        className="bg-gray-800 rounded-lg w-full max-w-lg relative my-8"
+        style={{
+          background: '#1E2329',
+          maxHeight: 'calc(100vh - 4rem)',
+        }}
       >
         <h3 className="text-xl font-bold mb-4" style={{ color: '#EAECEF' }}>
           {t('signalSourceConfig', language)}
         </h3>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label
-              className="block text-sm font-semibold mb-2"
-              style={{ color: '#EAECEF' }}
-            >
-              COIN POOL URL
-            </label>
-            <input
-              type="url"
-              value={coinPool}
-              onChange={(e) => setCoinPool(e.target.value)}
-              placeholder="https://api.example.com/coinpool"
-              className="w-full px-3 py-2 rounded"
-              style={{
-                background: '#0B0E11',
-                border: '1px solid #2B3139',
-                color: '#EAECEF',
-              }}
-            />
-            <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-              {t('coinPoolDescription', language)}
+        <form onSubmit={handleSubmit} className="px-6 pb-6">
+          <div
+            className="space-y-4 overflow-y-auto"
+            style={{ maxHeight: 'calc(100vh - 16rem)' }}
+          >
+            <div>
+              <label
+                className="block text-sm font-semibold mb-2"
+                style={{ color: '#EAECEF' }}
+              >
+                COIN POOL URL
+              </label>
+              <input
+                type="url"
+                value={coinPool}
+                onChange={(e) => setCoinPool(e.target.value)}
+                placeholder="https://api.example.com/coinpool"
+                className="w-full px-3 py-2 rounded"
+                style={{
+                  background: '#0B0E11',
+                  border: '1px solid #2B3139',
+                  color: '#EAECEF',
+                }}
+              />
+              <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                {t('coinPoolDescription', language)}
+              </div>
             </div>
-          </div>
 
-          <div>
-            <label
-              className="block text-sm font-semibold mb-2"
-              style={{ color: '#EAECEF' }}
-            >
-              OI TOP URL
-            </label>
-            <input
-              type="url"
-              value={oiTop}
-              onChange={(e) => setOiTop(e.target.value)}
-              placeholder="https://api.example.com/oitop"
-              className="w-full px-3 py-2 rounded"
+            <div>
+              <label
+                className="block text-sm font-semibold mb-2"
+                style={{ color: '#EAECEF' }}
+              >
+                OI TOP URL
+              </label>
+              <input
+                type="url"
+                value={oiTop}
+                onChange={(e) => setOiTop(e.target.value)}
+                placeholder="https://api.example.com/oitop"
+                className="w-full px-3 py-2 rounded"
+                style={{
+                  background: '#0B0E11',
+                  border: '1px solid #2B3139',
+                  color: '#EAECEF',
+                }}
+              />
+              <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                {t('oiTopDescription', language)}
+              </div>
+            </div>
+
+            <div
+              className="p-4 rounded"
               style={{
-                background: '#0B0E11',
-                border: '1px solid #2B3139',
-                color: '#EAECEF',
+                background: 'rgba(240, 185, 11, 0.1)',
+                border: '1px solid rgba(240, 185, 11, 0.2)',
               }}
-            />
-            <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-              {t('oiTopDescription', language)}
+            >
+              <div
+                className="text-sm font-semibold mb-2"
+                style={{ color: '#F0B90B' }}
+              >
+                ℹ️ {t('information', language)}
+              </div>
+              <div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
+                <div>{t('signalSourceInfo1', language)}</div>
+                <div>{t('signalSourceInfo2', language)}</div>
+                <div>{t('signalSourceInfo3', language)}</div>
+              </div>
             </div>
           </div>
 
           <div
-            className="p-4 rounded"
-            style={{
-              background: 'rgba(240, 185, 11, 0.1)',
-              border: '1px solid rgba(240, 185, 11, 0.2)',
-            }}
+            className="flex gap-3 mt-6 pt-4 sticky bottom-0"
+            style={{ background: '#1E2329' }}
           >
-            <div
-              className="text-sm font-semibold mb-2"
-              style={{ color: '#F0B90B' }}
-            >
-              ℹ️ {t('information', language)}
-            </div>
-            <div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
-              <div>{t('signalSourceInfo1', language)}</div>
-              <div>{t('signalSourceInfo2', language)}</div>
-              <div>{t('signalSourceInfo3', language)}</div>
-            </div>
-          </div>
-
-          <div className="flex gap-3 mt-6">
             <button
               type="button"
               onClick={onClose}
@@ -1447,12 +1458,18 @@ function ModelConfigModal({
   const availableModels = allModels || []
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto">
       <div
-        className="bg-gray-800 rounded-lg p-6 w-full max-w-lg relative"
-        style={{ background: '#1E2329' }}
+        className="bg-gray-800 rounded-lg w-full max-w-lg relative my-8"
+        style={{
+          background: '#1E2329',
+          maxHeight: 'calc(100vh - 4rem)',
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
+        <div
+          className="flex items-center justify-between p-6 pb-4 sticky top-0 z-10"
+          style={{ background: '#1E2329' }}
+        >
           <h3 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
             {editingModelId
               ? t('editAIModel', language)
@@ -1471,87 +1488,22 @@ function ModelConfigModal({
           )}
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {!editingModelId && (
-            <div>
-              <label
-                className="block text-sm font-semibold mb-2"
-                style={{ color: '#EAECEF' }}
-              >
-                {t('selectModel', language)}
-              </label>
-              <select
-                value={selectedModelId}
-                onChange={(e) => setSelectedModelId(e.target.value)}
-                className="w-full px-3 py-2 rounded"
-                style={{
-                  background: '#0B0E11',
-                  border: '1px solid #2B3139',
-                  color: '#EAECEF',
-                }}
-                required
-              >
-                <option value="">{t('pleaseSelectModel', language)}</option>
-                {availableModels.map((model) => (
-                  <option key={model.id} value={model.id}>
-                    {getShortName(model.name)} ({model.provider})
-                  </option>
-                ))}
-              </select>
-            </div>
-          )}
-
-          {selectedModel && (
-            <div
-              className="p-4 rounded"
-              style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
-            >
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 flex items-center justify-center">
-                  {getModelIcon(selectedModel.provider || selectedModel.id, {
-                    width: 32,
-                    height: 32,
-                  }) || (
-                    <div
-                      className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
-                      style={{
-                        background:
-                          selectedModel.id === 'deepseek'
-                            ? '#60a5fa'
-                            : '#c084fc',
-                        color: '#fff',
-                      }}
-                    >
-                      {selectedModel.name[0]}
-                    </div>
-                  )}
-                </div>
-                <div>
-                  <div className="font-semibold" style={{ color: '#EAECEF' }}>
-                    {getShortName(selectedModel.name)}
-                  </div>
-                  <div className="text-xs" style={{ color: '#848E9C' }}>
-                    {selectedModel.provider} • {selectedModel.id}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {selectedModel && (
-            <>
+        <form onSubmit={handleSubmit} className="px-6 pb-6">
+          <div
+            className="space-y-4 overflow-y-auto"
+            style={{ maxHeight: 'calc(100vh - 16rem)' }}
+          >
+            {!editingModelId && (
               <div>
                 <label
                   className="block text-sm font-semibold mb-2"
                   style={{ color: '#EAECEF' }}
                 >
-                  API Key
+                  {t('selectModel', language)}
                 </label>
-                <input
-                  type="password"
-                  value={apiKey}
-                  onChange={(e) => setApiKey(e.target.value)}
-                  placeholder={t('enterAPIKey', language)}
+                <select
+                  value={selectedModelId}
+                  onChange={(e) => setSelectedModelId(e.target.value)}
                   className="w-full px-3 py-2 rounded"
                   style={{
                     background: '#0B0E11',
@@ -1559,80 +1511,156 @@ function ModelConfigModal({
                     color: '#EAECEF',
                   }}
                   required
-                />
-              </div>
-
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: '#EAECEF' }}
                 >
-                  {t('customBaseURL', language)}
-                </label>
-                <input
-                  type="url"
-                  value={baseUrl}
-                  onChange={(e) => setBaseUrl(e.target.value)}
-                  placeholder={t('customBaseURLPlaceholder', language)}
-                  className="w-full px-3 py-2 rounded"
-                  style={{
-                    background: '#0B0E11',
-                    border: '1px solid #2B3139',
-                    color: '#EAECEF',
-                  }}
-                />
-                <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                  {t('leaveBlankForDefault', language)}
-                </div>
-              </div>
-
-              <div>
-                <label
-                  className="block text-sm font-semibold mb-2"
-                  style={{ color: '#EAECEF' }}
-                >
-                  Model Name (可选)
-                </label>
-                <input
-                  type="text"
-                  value={modelName}
-                  onChange={(e) => setModelName(e.target.value)}
-                  placeholder="例如: deepseek-chat, qwen3-max, gpt-5"
-                  className="w-full px-3 py-2 rounded"
-                  style={{
-                    background: '#0B0E11',
-                    border: '1px solid #2B3139',
-                    color: '#EAECEF',
-                  }}
-                />
-                <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                  留空使用默认模型名称
-                </div>
+                  <option value="">{t('pleaseSelectModel', language)}</option>
+                  {availableModels.map((model) => (
+                    <option key={model.id} value={model.id}>
+                      {getShortName(model.name)} ({model.provider})
+                    </option>
+                  ))}
+                </select>
               </div>
+            )}
 
+            {selectedModel && (
               <div
                 className="p-4 rounded"
-                style={{
-                  background: 'rgba(240, 185, 11, 0.1)',
-                  border: '1px solid rgba(240, 185, 11, 0.2)',
-                }}
+                style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
               >
-                <div
-                  className="text-sm font-semibold mb-2"
-                  style={{ color: '#F0B90B' }}
-                >
-                  ℹ️ {t('information', language)}
-                </div>
-                <div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
-                  <div>{t('modelConfigInfo1', language)}</div>
-                  <div>{t('modelConfigInfo2', language)}</div>
-                  <div>{t('modelConfigInfo3', language)}</div>
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    {getModelIcon(selectedModel.provider || selectedModel.id, {
+                      width: 32,
+                      height: 32,
+                    }) || (
+                      <div
+                        className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
+                        style={{
+                          background:
+                            selectedModel.id === 'deepseek'
+                              ? '#60a5fa'
+                              : '#c084fc',
+                          color: '#fff',
+                        }}
+                      >
+                        {selectedModel.name[0]}
+                      </div>
+                    )}
+                  </div>
+                  <div>
+                    <div className="font-semibold" style={{ color: '#EAECEF' }}>
+                      {getShortName(selectedModel.name)}
+                    </div>
+                    <div className="text-xs" style={{ color: '#848E9C' }}>
+                      {selectedModel.provider} • {selectedModel.id}
+                    </div>
+                  </div>
                 </div>
               </div>
-            </>
-          )}
+            )}
 
-          <div className="flex gap-3 mt-6">
+            {selectedModel && (
+              <>
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
+                    API Key
+                  </label>
+                  <input
+                    type="password"
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    placeholder={t('enterAPIKey', language)}
+                    className="w-full px-3 py-2 rounded"
+                    style={{
+                      background: '#0B0E11',
+                      border: '1px solid #2B3139',
+                      color: '#EAECEF',
+                    }}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
+                    {t('customBaseURL', language)}
+                  </label>
+                  <input
+                    type="url"
+                    value={baseUrl}
+                    onChange={(e) => setBaseUrl(e.target.value)}
+                    placeholder={t('customBaseURLPlaceholder', language)}
+                    className="w-full px-3 py-2 rounded"
+                    style={{
+                      background: '#0B0E11',
+                      border: '1px solid #2B3139',
+                      color: '#EAECEF',
+                    }}
+                  />
+                  <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                    {t('leaveBlankForDefault', language)}
+                  </div>
+                </div>
+
+                <div>
+                  <label
+                    className="block text-sm font-semibold mb-2"
+                    style={{ color: '#EAECEF' }}
+                  >
+                    Model Name (可选)
+                  </label>
+                  <input
+                    type="text"
+                    value={modelName}
+                    onChange={(e) => setModelName(e.target.value)}
+                    placeholder="例如: deepseek-chat, qwen3-max, gpt-5"
+                    className="w-full px-3 py-2 rounded"
+                    style={{
+                      background: '#0B0E11',
+                      border: '1px solid #2B3139',
+                      color: '#EAECEF',
+                    }}
+                  />
+                  <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                    留空使用默认模型名称
+                  </div>
+                </div>
+
+                <div
+                  className="p-4 rounded"
+                  style={{
+                    background: 'rgba(240, 185, 11, 0.1)',
+                    border: '1px solid rgba(240, 185, 11, 0.2)',
+                  }}
+                >
+                  <div
+                    className="text-sm font-semibold mb-2"
+                    style={{ color: '#F0B90B' }}
+                  >
+                    ℹ️ {t('information', language)}
+                  </div>
+                  <div
+                    className="text-xs space-y-1"
+                    style={{ color: '#848E9C' }}
+                  >
+                    <div>{t('modelConfigInfo1', language)}</div>
+                    <div>{t('modelConfigInfo2', language)}</div>
+                    <div>{t('modelConfigInfo3', language)}</div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          <div
+            className="flex gap-3 mt-6 pt-4 sticky bottom-0"
+            style={{ background: '#1E2329' }}
+          >
             <button
               type="button"
               onClick={onClose}
@@ -1872,12 +1900,18 @@ function ExchangeConfigModal({
   const availableExchanges = allExchanges || []
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 overflow-y-auto">
       <div
-        className="bg-gray-800 rounded-lg p-6 w-full max-w-lg relative"
-        style={{ background: '#1E2329' }}
+        className="bg-gray-800 rounded-lg w-full max-w-lg relative my-8"
+        style={{
+          background: '#1E2329',
+          maxHeight: 'calc(100vh - 4rem)',
+        }}
       >
-        <div className="flex items-center justify-between mb-4">
+        <div
+          className="flex items-center justify-between p-6 pb-4 sticky top-0 z-10"
+          style={{ background: '#1E2329' }}
+        >
           <h3 className="text-xl font-bold" style={{ color: '#EAECEF' }}>
             {editingExchangeId
               ? t('editExchange', language)
@@ -1915,224 +1949,187 @@ function ExchangeConfigModal({
           </div>
         </div>
 
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {!editingExchangeId && (
-            <div>
-              <label
-                className="block text-sm font-semibold mb-2"
-                style={{ color: '#EAECEF' }}
-              >
-                {t('selectExchange', language)}
-              </label>
-              <select
-                value={selectedExchangeId}
-                onChange={(e) => setSelectedExchangeId(e.target.value)}
-                className="w-full px-3 py-2 rounded"
-                style={{
-                  background: '#0B0E11',
-                  border: '1px solid #2B3139',
-                  color: '#EAECEF',
-                }}
-                required
-              >
-                <option value="">{t('pleaseSelectExchange', language)}</option>
-                {availableExchanges.map((exchange) => (
-                  <option key={exchange.id} value={exchange.id}>
-                    {getShortName(exchange.name)} ({exchange.type.toUpperCase()}
-                    )
+        <form onSubmit={handleSubmit} className="px-6 pb-6">
+          <div
+            className="space-y-4 overflow-y-auto"
+            style={{ maxHeight: 'calc(100vh - 16rem)' }}
+          >
+            {!editingExchangeId && (
+              <div>
+                <label
+                  className="block text-sm font-semibold mb-2"
+                  style={{ color: '#EAECEF' }}
+                >
+                  {t('selectExchange', language)}
+                </label>
+                <select
+                  value={selectedExchangeId}
+                  onChange={(e) => setSelectedExchangeId(e.target.value)}
+                  className="w-full px-3 py-2 rounded"
+                  style={{
+                    background: '#0B0E11',
+                    border: '1px solid #2B3139',
+                    color: '#EAECEF',
+                  }}
+                  required
+                >
+                  <option value="">
+                    {t('pleaseSelectExchange', language)}
                   </option>
-                ))}
-              </select>
-            </div>
-          )}
+                  {availableExchanges.map((exchange) => (
+                    <option key={exchange.id} value={exchange.id}>
+                      {getShortName(exchange.name)} (
+                      {exchange.type.toUpperCase()})
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
 
-          {selectedExchange && (
-            <div
-              className="p-4 rounded"
-              style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
-            >
-              <div className="flex items-center gap-3 mb-3">
-                <div className="w-8 h-8 flex items-center justify-center">
-                  {getExchangeIcon(selectedExchange.id, {
-                    width: 32,
-                    height: 32,
-                  })}
-                </div>
-                <div>
-                  <div className="font-semibold" style={{ color: '#EAECEF' }}>
-                    {getShortName(selectedExchange.name)}
+            {selectedExchange && (
+              <div
+                className="p-4 rounded"
+                style={{ background: '#0B0E11', border: '1px solid #2B3139' }}
+              >
+                <div className="flex items-center gap-3 mb-3">
+                  <div className="w-8 h-8 flex items-center justify-center">
+                    {getExchangeIcon(selectedExchange.id, {
+                      width: 32,
+                      height: 32,
+                    })}
                   </div>
-                  <div className="text-xs" style={{ color: '#848E9C' }}>
-                    {selectedExchange.type.toUpperCase()} •{' '}
-                    {selectedExchange.id}
+                  <div>
+                    <div className="font-semibold" style={{ color: '#EAECEF' }}>
+                      {getShortName(selectedExchange.name)}
+                    </div>
+                    <div className="text-xs" style={{ color: '#848E9C' }}>
+                      {selectedExchange.type.toUpperCase()} •{' '}
+                      {selectedExchange.id}
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {selectedExchange && (
-            <>
-              {/* Binance 和其他 CEX 交易所的字段 */}
-              {(selectedExchange.id === 'binance' ||
-                selectedExchange.type === 'cex') &&
-                selectedExchange.id !== 'hyperliquid' &&
-                selectedExchange.id !== 'aster' && (
-                  <>
-                    {/* 币安用户配置提示 (D1 方案) */}
-                    {selectedExchange.id === 'binance' && (
-                      <div
-                        className="mb-4 p-3 rounded cursor-pointer transition-colors"
-                        style={{
-                          background: '#1a3a52',
-                          border: '1px solid #2b5278',
-                        }}
-                        onClick={() => setShowBinanceGuide(!showBinanceGuide)}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            <span style={{ color: '#58a6ff' }}>ℹ️</span>
-                            <span
-                              className="text-sm font-medium"
-                              style={{ color: '#EAECEF' }}
-                            >
-                              <strong>币安用户必读：</strong>
-                              使用「现货与合约交易」API，不要用「统一账户 API」
+            {selectedExchange && (
+              <>
+                {/* Binance 和其他 CEX 交易所的字段 */}
+                {(selectedExchange.id === 'binance' ||
+                  selectedExchange.type === 'cex') &&
+                  selectedExchange.id !== 'hyperliquid' &&
+                  selectedExchange.id !== 'aster' && (
+                    <>
+                      {/* 币安用户配置提示 (D1 方案) */}
+                      {selectedExchange.id === 'binance' && (
+                        <div
+                          className="mb-4 p-3 rounded cursor-pointer transition-colors"
+                          style={{
+                            background: '#1a3a52',
+                            border: '1px solid #2b5278',
+                          }}
+                          onClick={() => setShowBinanceGuide(!showBinanceGuide)}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <span style={{ color: '#58a6ff' }}>ℹ️</span>
+                              <span
+                                className="text-sm font-medium"
+                                style={{ color: '#EAECEF' }}
+                              >
+                                <strong>币安用户必读：</strong>
+                                使用「现货与合约交易」API，不要用「统一账户
+                                API」
+                              </span>
+                            </div>
+                            <span style={{ color: '#8b949e' }}>
+                              {showBinanceGuide ? '▲' : '▼'}
                             </span>
                           </div>
-                          <span style={{ color: '#8b949e' }}>
-                            {showBinanceGuide ? '▲' : '▼'}
-                          </span>
-                        </div>
 
-                        {/* 展开的详细说明 */}
-                        {showBinanceGuide && (
-                          <div
-                            className="mt-3 pt-3"
-                            style={{
-                              borderTop: '1px solid #2b5278',
-                              fontSize: '0.875rem',
-                              color: '#c9d1d9',
-                            }}
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            <p className="mb-2" style={{ color: '#8b949e' }}>
-                              <strong>原因：</strong>统一账户 API
-                              权限结构不同，会导致订单提交失败
-                            </p>
-
-                            <p
-                              className="font-semibold mb-1"
-                              style={{ color: '#EAECEF' }}
-                            >
-                              正确配置步骤：
-                            </p>
-                            <ol
-                              className="list-decimal list-inside space-y-1 mb-3"
-                              style={{ paddingLeft: '0.5rem' }}
-                            >
-                              <li>
-                                登录币安 → 个人中心 → <strong>API 管理</strong>
-                              </li>
-                              <li>
-                                创建 API → 选择「
-                                <strong>系统生成的 API 密钥</strong>」
-                              </li>
-                              <li>
-                                勾选「<strong>现货与合约交易</strong>」（
-                                <span style={{ color: '#f85149' }}>
-                                  不选统一账户
-                                </span>
-                                ）
-                              </li>
-                              <li>
-                                IP 限制选「<strong>无限制</strong>」或添加服务器
-                                IP
-                              </li>
-                            </ol>
-
-                            <p
-                              className="mb-2 p-2 rounded"
+                          {/* 展开的详细说明 */}
+                          {showBinanceGuide && (
+                            <div
+                              className="mt-3 pt-3"
                               style={{
-                                background: '#3d2a00',
-                                border: '1px solid #9e6a03',
+                                borderTop: '1px solid #2b5278',
+                                fontSize: '0.875rem',
+                                color: '#c9d1d9',
                               }}
+                              onClick={(e) => e.stopPropagation()}
                             >
-                              💡 <strong>多资产模式用户注意：</strong>
-                              如果您开启了多资产模式，将强制使用全仓模式。建议关闭多资产模式以支持逐仓交易。
-                            </p>
+                              <p className="mb-2" style={{ color: '#8b949e' }}>
+                                <strong>原因：</strong>统一账户 API
+                                权限结构不同，会导致订单提交失败
+                              </p>
 
-                            <a
-                              href="https://www.binance.com/zh-CN/support/faq/how-to-create-api-keys-on-binance-360002502072"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              className="inline-block text-sm hover:underline"
-                              style={{ color: '#58a6ff' }}
-                            >
-                              📖 查看币安官方教程 ↗
-                            </a>
-                          </div>
-                        )}
-                      </div>
-                    )}
+                              <p
+                                className="font-semibold mb-1"
+                                style={{ color: '#EAECEF' }}
+                              >
+                                正确配置步骤：
+                              </p>
+                              <ol
+                                className="list-decimal list-inside space-y-1 mb-3"
+                                style={{ paddingLeft: '0.5rem' }}
+                              >
+                                <li>
+                                  登录币安 → 个人中心 →{' '}
+                                  <strong>API 管理</strong>
+                                </li>
+                                <li>
+                                  创建 API → 选择「
+                                  <strong>系统生成的 API 密钥</strong>」
+                                </li>
+                                <li>
+                                  勾选「<strong>现货与合约交易</strong>」（
+                                  <span style={{ color: '#f85149' }}>
+                                    不选统一账户
+                                  </span>
+                                  ）
+                                </li>
+                                <li>
+                                  IP 限制选「<strong>无限制</strong>
+                                  」或添加服务器 IP
+                                </li>
+                              </ol>
 
-                    <div>
-                      <label
-                        className="block text-sm font-semibold mb-2"
-                        style={{ color: '#EAECEF' }}
-                      >
-                        {t('apiKey', language)}
-                      </label>
-                      <input
-                        type="password"
-                        value={apiKey}
-                        onChange={(e) => setApiKey(e.target.value)}
-                        placeholder={t('enterAPIKey', language)}
-                        className="w-full px-3 py-2 rounded"
-                        style={{
-                          background: '#0B0E11',
-                          border: '1px solid #2B3139',
-                          color: '#EAECEF',
-                        }}
-                        required
-                      />
-                    </div>
+                              <p
+                                className="mb-2 p-2 rounded"
+                                style={{
+                                  background: '#3d2a00',
+                                  border: '1px solid #9e6a03',
+                                }}
+                              >
+                                💡 <strong>多资产模式用户注意：</strong>
+                                如果您开启了多资产模式，将强制使用全仓模式。建议关闭多资产模式以支持逐仓交易。
+                              </p>
 
-                    <div>
-                      <label
-                        className="block text-sm font-semibold mb-2"
-                        style={{ color: '#EAECEF' }}
-                      >
-                        {t('secretKey', language)}
-                      </label>
-                      <input
-                        type="password"
-                        value={secretKey}
-                        onChange={(e) => setSecretKey(e.target.value)}
-                        placeholder={t('enterSecretKey', language)}
-                        className="w-full px-3 py-2 rounded"
-                        style={{
-                          background: '#0B0E11',
-                          border: '1px solid #2B3139',
-                          color: '#EAECEF',
-                        }}
-                        required
-                      />
-                    </div>
+                              <a
+                                href="https://www.binance.com/zh-CN/support/faq/how-to-create-api-keys-on-binance-360002502072"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline-block text-sm hover:underline"
+                                style={{ color: '#58a6ff' }}
+                              >
+                                📖 查看币安官方教程 ↗
+                              </a>
+                            </div>
+                          )}
+                        </div>
+                      )}
 
-                    {selectedExchange.id === 'okx' && (
                       <div>
                         <label
                           className="block text-sm font-semibold mb-2"
                           style={{ color: '#EAECEF' }}
                         >
-                          {t('passphrase', language)}
+                          {t('apiKey', language)}
                         </label>
                         <input
                           type="password"
-                          value={passphrase}
-                          onChange={(e) => setPassphrase(e.target.value)}
-                          placeholder={t('enterPassphrase', language)}
+                          value={apiKey}
+                          onChange={(e) => setApiKey(e.target.value)}
+                          placeholder={t('enterAPIKey', language)}
                           className="w-full px-3 py-2 rounded"
                           style={{
                             background: '#0B0E11',
@@ -2142,62 +2139,232 @@ function ExchangeConfigModal({
                           required
                         />
                       </div>
-                    )}
 
-                    {/* Binance 白名单IP提示 */}
-                    {selectedExchange.id === 'binance' && (
-                      <div
-                        className="p-4 rounded"
-                        style={{
-                          background: 'rgba(240, 185, 11, 0.1)',
-                          border: '1px solid rgba(240, 185, 11, 0.2)',
-                        }}
-                      >
-                        <div
-                          className="text-sm font-semibold mb-2"
-                          style={{ color: '#F0B90B' }}
+                      <div>
+                        <label
+                          className="block text-sm font-semibold mb-2"
+                          style={{ color: '#EAECEF' }}
                         >
-                          {t('whitelistIP', language)}
-                        </div>
-                        <div
-                          className="text-xs mb-3"
-                          style={{ color: '#848E9C' }}
-                        >
-                          {t('whitelistIPDesc', language)}
-                        </div>
-
-                        {loadingIP ? (
-                          <div className="text-xs" style={{ color: '#848E9C' }}>
-                            {t('loadingServerIP', language)}
-                          </div>
-                        ) : serverIP && serverIP.public_ip ? (
-                          <div
-                            className="flex items-center gap-2 p-2 rounded"
-                            style={{ background: '#0B0E11' }}
-                          >
-                            <code
-                              className="flex-1 text-sm font-mono"
-                              style={{ color: '#F0B90B' }}
-                            >
-                              {serverIP.public_ip}
-                            </code>
-                            <button
-                              type="button"
-                              onClick={() => handleCopyIP(serverIP.public_ip)}
-                              className="px-3 py-1 rounded text-xs font-semibold transition-all hover:scale-105"
-                              style={{
-                                background: 'rgba(240, 185, 11, 0.2)',
-                                color: '#F0B90B',
-                              }}
-                            >
-                              {copiedIP
-                                ? t('ipCopied', language)
-                                : t('copyIP', language)}
-                            </button>
-                          </div>
-                        ) : null}
+                          {t('secretKey', language)}
+                        </label>
+                        <input
+                          type="password"
+                          value={secretKey}
+                          onChange={(e) => setSecretKey(e.target.value)}
+                          placeholder={t('enterSecretKey', language)}
+                          className="w-full px-3 py-2 rounded"
+                          style={{
+                            background: '#0B0E11',
+                            border: '1px solid #2B3139',
+                            color: '#EAECEF',
+                          }}
+                          required
+                        />
                       </div>
-                    )}
+
+                      {selectedExchange.id === 'okx' && (
+                        <div>
+                          <label
+                            className="block text-sm font-semibold mb-2"
+                            style={{ color: '#EAECEF' }}
+                          >
+                            {t('passphrase', language)}
+                          </label>
+                          <input
+                            type="password"
+                            value={passphrase}
+                            onChange={(e) => setPassphrase(e.target.value)}
+                            placeholder={t('enterPassphrase', language)}
+                            className="w-full px-3 py-2 rounded"
+                            style={{
+                              background: '#0B0E11',
+                              border: '1px solid #2B3139',
+                              color: '#EAECEF',
+                            }}
+                            required
+                          />
+                        </div>
+                      )}
+
+                      {/* Binance 白名单IP提示 */}
+                      {selectedExchange.id === 'binance' && (
+                        <div
+                          className="p-4 rounded"
+                          style={{
+                            background: 'rgba(240, 185, 11, 0.1)',
+                            border: '1px solid rgba(240, 185, 11, 0.2)',
+                          }}
+                        >
+                          <div
+                            className="text-sm font-semibold mb-2"
+                            style={{ color: '#F0B90B' }}
+                          >
+                            {t('whitelistIP', language)}
+                          </div>
+                          <div
+                            className="text-xs mb-3"
+                            style={{ color: '#848E9C' }}
+                          >
+                            {t('whitelistIPDesc', language)}
+                          </div>
+
+                          {loadingIP ? (
+                            <div
+                              className="text-xs"
+                              style={{ color: '#848E9C' }}
+                            >
+                              {t('loadingServerIP', language)}
+                            </div>
+                          ) : serverIP && serverIP.public_ip ? (
+                            <div
+                              className="flex items-center gap-2 p-2 rounded"
+                              style={{ background: '#0B0E11' }}
+                            >
+                              <code
+                                className="flex-1 text-sm font-mono"
+                                style={{ color: '#F0B90B' }}
+                              >
+                                {serverIP.public_ip}
+                              </code>
+                              <button
+                                type="button"
+                                onClick={() => handleCopyIP(serverIP.public_ip)}
+                                className="px-3 py-1 rounded text-xs font-semibold transition-all hover:scale-105"
+                                style={{
+                                  background: 'rgba(240, 185, 11, 0.2)',
+                                  color: '#F0B90B',
+                                }}
+                              >
+                                {copiedIP
+                                  ? t('ipCopied', language)
+                                  : t('copyIP', language)}
+                              </button>
+                            </div>
+                          ) : null}
+                        </div>
+                      )}
+                    </>
+                  )}
+
+                {/* Hyperliquid 交易所的字段 */}
+                {selectedExchange.id === 'hyperliquid' && (
+                  <>
+                    <div>
+                      <label
+                        className="block text-sm font-semibold mb-2"
+                        style={{ color: '#EAECEF' }}
+                      >
+                        {t('privateKey', language)}
+                      </label>
+                      <input
+                        type="password"
+                        value={apiKey}
+                        onChange={(e) => setApiKey(e.target.value)}
+                        placeholder={t('enterPrivateKey', language)}
+                        className="w-full px-3 py-2 rounded"
+                        style={{
+                          background: '#0B0E11',
+                          border: '1px solid #2B3139',
+                          color: '#EAECEF',
+                        }}
+                        required
+                      />
+                      <div
+                        className="text-xs mt-1"
+                        style={{ color: '#848E9C' }}
+                      >
+                        {t('hyperliquidPrivateKeyDesc', language)}
+                      </div>
+                    </div>
+                  </>
+                )}
+
+                {/* Aster 交易所的字段 */}
+                {selectedExchange.id === 'aster' && (
+                  <>
+                    <div>
+                      <label
+                        className="block text-sm font-semibold mb-2 flex items-center gap-2"
+                        style={{ color: '#EAECEF' }}
+                      >
+                        {t('user', language)}
+                        <Tooltip content={t('asterUserDesc', language)}>
+                          <HelpCircle
+                            className="w-4 h-4 cursor-help"
+                            style={{ color: '#F0B90B' }}
+                          />
+                        </Tooltip>
+                      </label>
+                      <input
+                        type="text"
+                        value={asterUser}
+                        onChange={(e) => setAsterUser(e.target.value)}
+                        placeholder={t('enterUser', language)}
+                        className="w-full px-3 py-2 rounded"
+                        style={{
+                          background: '#0B0E11',
+                          border: '1px solid #2B3139',
+                          color: '#EAECEF',
+                        }}
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label
+                        className="block text-sm font-semibold mb-2 flex items-center gap-2"
+                        style={{ color: '#EAECEF' }}
+                      >
+                        {t('signer', language)}
+                        <Tooltip content={t('asterSignerDesc', language)}>
+                          <HelpCircle
+                            className="w-4 h-4 cursor-help"
+                            style={{ color: '#F0B90B' }}
+                          />
+                        </Tooltip>
+                      </label>
+                      <input
+                        type="text"
+                        value={asterSigner}
+                        onChange={(e) => setAsterSigner(e.target.value)}
+                        placeholder={t('enterSigner', language)}
+                        className="w-full px-3 py-2 rounded"
+                        style={{
+                          background: '#0B0E11',
+                          border: '1px solid #2B3139',
+                          color: '#EAECEF',
+                        }}
+                        required
+                      />
+                    </div>
+
+                    <div>
+                      <label
+                        className="block text-sm font-semibold mb-2 flex items-center gap-2"
+                        style={{ color: '#EAECEF' }}
+                      >
+                        {t('privateKey', language)}
+                        <Tooltip content={t('asterPrivateKeyDesc', language)}>
+                          <HelpCircle
+                            className="w-4 h-4 cursor-help"
+                            style={{ color: '#F0B90B' }}
+                          />
+                        </Tooltip>
+                      </label>
+                      <input
+                        type="password"
+                        value={asterPrivateKey}
+                        onChange={(e) => setAsterPrivateKey(e.target.value)}
+                        placeholder={t('enterPrivateKey', language)}
+                        className="w-full px-3 py-2 rounded"
+                        style={{
+                          background: '#0B0E11',
+                          border: '1px solid #2B3139',
+                          color: '#EAECEF',
+                        }}
+                        required
+                      />
+                    </div>
                   </>
                 )}
 
@@ -2451,56 +2618,44 @@ function ExchangeConfigModal({
                       )}
                     </div>
                   </div>
-                </>
-              )}
-
-              <div>
-                <label className="flex items-center gap-2 text-sm">
-                  <input
-                    type="checkbox"
-                    checked={testnet}
-                    onChange={(e) => setTestnet(e.target.checked)}
-                    className="form-checkbox rounded"
-                    style={{ accentColor: '#F0B90B' }}
-                  />
-                  <span style={{ color: '#EAECEF' }}>
-                    {t('useTestnet', language)}
-                  </span>
-                </label>
-                <div className="text-xs mt-1" style={{ color: '#848E9C' }}>
-                  {t('testnetDescription', language)}
                 </div>
-              </div>
 
-              <div
-                className="p-4 rounded"
-                style={{
-                  background: 'rgba(240, 185, 11, 0.1)',
-                  border: '1px solid rgba(240, 185, 11, 0.2)',
-                }}
-              >
                 <div
-                  className="text-sm font-semibold mb-2"
-                  style={{ color: '#F0B90B' }}
+                  className="p-4 rounded"
+                  style={{
+                    background: 'rgba(240, 185, 11, 0.1)',
+                    border: '1px solid rgba(240, 185, 11, 0.2)',
+                  }}
                 >
-                  <span className="inline-flex items-center gap-1">
-                    <AlertTriangle className="w-4 h-4" />{' '}
-                    {t('securityWarning', language)}
-                  </span>
+                  <div
+                    className="text-sm font-semibold mb-2"
+                    style={{ color: '#F0B90B' }}
+                  >
+                    <span className="inline-flex items-center gap-1">
+                      <AlertTriangle className="w-4 h-4" />{' '}
+                      {t('securityWarning', language)}
+                    </span>
+                  </div>
+                  <div
+                    className="text-xs space-y-1"
+                    style={{ color: '#848E9C' }}
+                  >
+                    {selectedExchange.id === 'aster' && (
+                      <div>{t('asterUsdtWarning', language)}</div>
+                    )}
+                    <div>{t('exchangeConfigWarning1', language)}</div>
+                    <div>{t('exchangeConfigWarning2', language)}</div>
+                    <div>{t('exchangeConfigWarning3', language)}</div>
+                  </div>
                 </div>
-                <div className="text-xs space-y-1" style={{ color: '#848E9C' }}>
-                  {selectedExchange.id === 'aster' && (
-                    <div>{t('asterUsdtWarning', language)}</div>
-                  )}
-                  <div>{t('exchangeConfigWarning1', language)}</div>
-                  <div>{t('exchangeConfigWarning2', language)}</div>
-                  <div>{t('exchangeConfigWarning3', language)}</div>
-                </div>
-              </div>
-            </>
-          )}
+              </>
+            )}
+          </div>
 
-          <div className="flex gap-3 mt-6">
+          <div
+            className="flex gap-3 mt-6 pt-4 sticky bottom-0"
+            style={{ background: '#1E2329' }}
+          >
             <button
               type="button"
               onClick={onClose}
diff --git a/web/src/components/TraderConfigModal.tsx b/web/src/components/TraderConfigModal.tsx
index 548c4e0d..db343285 100644
--- a/web/src/components/TraderConfigModal.tsx
+++ b/web/src/components/TraderConfigModal.tsx
@@ -259,13 +259,14 @@ export function TraderConfigModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4 overflow-y-auto">
       <div
-        className="bg-[#1E2329] border border-[#2B3139] rounded-xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto"
+        className="bg-[#1E2329] border border-[#2B3139] rounded-xl shadow-2xl max-w-3xl w-full my-8"
+        style={{ maxHeight: 'calc(100vh - 4rem)' }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-[#2B3139] bg-gradient-to-r from-[#1E2329] to-[#252B35]">
+        <div className="flex items-center justify-between p-6 border-b border-[#2B3139] bg-gradient-to-r from-[#1E2329] to-[#252B35] sticky top-0 z-10 rounded-t-xl">
           <div className="flex items-center gap-3">
             <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#F0B90B] to-[#E1A706] flex items-center justify-center">
               <span className="text-lg">{isEditMode ? '✏️' : '➕'}</span>
@@ -288,7 +289,10 @@ export function TraderConfigModal({
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-8">
+        <div
+          className="p-6 space-y-8 overflow-y-auto"
+          style={{ maxHeight: 'calc(100vh - 16rem)' }}
+        >
           {/* Basic Info */}
           <div className="bg-[#0B0E11] border border-[#2B3139] rounded-lg p-5">
             <h3 className="text-lg font-semibold text-[#EAECEF] mb-5 flex items-center gap-2">
@@ -761,7 +765,7 @@ export function TraderConfigModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 p-6 border-t border-[#2B3139] bg-gradient-to-r from-[#1E2329] to-[#252B35]">
+        <div className="flex justify-end gap-3 p-6 border-t border-[#2B3139] bg-gradient-to-r from-[#1E2329] to-[#252B35] sticky bottom-0 z-10 rounded-b-xl">
           <button
             onClick={onClose}
             className="px-6 py-3 bg-[#2B3139] text-[#EAECEF] rounded-lg hover:bg-[#404750] transition-all duration-200 border border-[#404750]"