From 9b4d8fc0012303440a02397fa34360b7f057c9a4 Mon Sep 17 00:00:00 2001
From: WrBug <iwrbug@gmail.com>
Date: Thu, 26 Feb 2026 20:50:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E4=BC=98=E5=8C=96=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=86=E4=BB=B7=E5=B7=AE=E7=AD=96=E7=95=A5=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移动端策略选择器：标题与下拉框垂直布局，支持换行显示
- 下拉框选项支持文本换行，避免长策略名称被截断
- 移动端手动下单按钮改为底部悬浮固定显示
- 两个按钮均分屏幕宽度，符合移动端触摸操作规范

Made-with: Cursor
---
 frontend/src/pages/CryptoTailMonitor.tsx | 115 ++++++++++++++++-------
 1 file changed, 81 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/CryptoTailMonitor.tsx b/frontend/src/pages/CryptoTailMonitor.tsx
index 57ce647..797fc18 100644
--- a/frontend/src/pages/CryptoTailMonitor.tsx
+++ b/frontend/src/pages/CryptoTailMonitor.tsx
@@ -851,18 +851,22 @@ const CryptoTailMonitor: React.FC = () => {
 
       {/* 顶部控制区 */}
       <Card style={{ marginBottom: 16 }}>
-        <Space wrap size="middle">
-          <Space>
+        <Space direction={isMobile ? 'vertical' : 'horizontal'} size="middle" style={{ width: '100%' }}>
+          <Space direction={isMobile ? 'vertical' : 'horizontal'} size="small" style={{ width: isMobile ? '100%' : 'auto' }}>
             <Text strong>{t('cryptoTailMonitor.selectStrategy')}</Text>
             <Select
-              style={{ minWidth: isMobile ? 200 : 300 }}
+              style={{ minWidth: isMobile ? '100%' : 300, width: isMobile ? '100%' : 'auto' }}
               loading={strategiesLoading}
               value={selectedStrategyId}
               onChange={(id) => setSelectedStrategyId(id)}
               placeholder={t('cryptoTailMonitor.selectStrategyPlaceholder')}
+              popupMatchSelectWidth={false}
+              dropdownStyle={{ minWidth: isMobile ? 280 : 'auto', wordWrap: 'break-word', whiteSpace: 'normal' }}
+              optionLabelProp="label"
               options={strategies.map(s => ({
                 label: `${s.name || s.marketSlugPrefix} (${s.intervalSeconds === 300 ? '5m' : '15m'})`,
-                value: s.id
+                value: s.id,
+                style: { whiteSpace: 'normal', wordWrap: 'break-word' }
               }))}
             />
           </Space>
@@ -1049,36 +1053,38 @@ const CryptoTailMonitor: React.FC = () => {
           </Card>
 
           {/* 手动下单 */}
-          <Card title={t('cryptoTailMonitor.manualOrder.title')} style={{ marginTop: 16 }}>
-            <Row gutter={16}>
-              <Col span={12}>
-                <Button
-                  type="primary"
-                  icon={<ShoppingCartOutlined />}
-                  disabled={!pushData || pushData.triggered || pushData.periodEnded}
-                  onClick={() => handleOpenManualOrderModal('UP')}
-                  loading={ordering}
-                  block
-                  style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
-                >
-                  {t('cryptoTailMonitor.manualOrder.buttonUp')}
-                </Button>
-              </Col>
-              <Col span={12}>
-                <Button
-                  type="primary"
-                  icon={<ShoppingCartOutlined />}
-                  disabled={!pushData || pushData.triggered || pushData.periodEnded}
-                  onClick={() => handleOpenManualOrderModal('DOWN')}
-                  loading={ordering}
-                  block
-                  style={{ backgroundColor: '#fa8c16', borderColor: '#fa8c16' }}
-                >
-                  {t('cryptoTailMonitor.manualOrder.buttonDown')}
-                </Button>
-              </Col>
-            </Row>
-          </Card>
+          {!isMobile ? (
+            <Card title={t('cryptoTailMonitor.manualOrder.title')} style={{ marginTop: 16 }}>
+              <Row gutter={16}>
+                <Col span={12}>
+                  <Button
+                    type="primary"
+                    icon={<ShoppingCartOutlined />}
+                    disabled={!pushData || pushData.triggered || pushData.periodEnded}
+                    onClick={() => handleOpenManualOrderModal('UP')}
+                    loading={ordering}
+                    block
+                    style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
+                  >
+                    {t('cryptoTailMonitor.manualOrder.buttonUp')}
+                  </Button>
+                </Col>
+                <Col span={12}>
+                  <Button
+                    type="primary"
+                    icon={<ShoppingCartOutlined />}
+                    disabled={!pushData || pushData.triggered || pushData.periodEnded}
+                    onClick={() => handleOpenManualOrderModal('DOWN')}
+                    loading={ordering}
+                    block
+                    style={{ backgroundColor: '#fa8c16', borderColor: '#fa8c16' }}
+                  >
+                    {t('cryptoTailMonitor.manualOrder.buttonDown')}
+                  </Button>
+                </Col>
+              </Row>
+            </Card>
+          ) : null}
 
           {/* 策略信息 */}
           <Card title={t('cryptoTailMonitor.strategyInfo.title')} style={{ marginTop: 16 }}>
@@ -1207,6 +1213,47 @@ const CryptoTailMonitor: React.FC = () => {
           </Space>
         )}
       </Modal>
+
+      {/* 移动端底部悬浮按钮 */}
+      {isMobile && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            padding: '12px 16px',
+            background: 'rgba(255, 255, 255, 0.95)',
+            backdropFilter: 'blur(10px)',
+            borderTop: '1px solid #f0f0f0',
+            boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.06)'
+          }}
+        >
+          <div style={{ display: 'flex', width: '100%', gap: 0 }}>
+            <Button
+              type="primary"
+              icon={<ShoppingCartOutlined />}
+              disabled={!pushData || pushData.triggered || pushData.periodEnded}
+              onClick={() => handleOpenManualOrderModal('UP')}
+              loading={ordering}
+              style={{ flex: 1, backgroundColor: '#1890ff', borderColor: '#1890ff', height: 44, borderRadius: '6px 0 0 6px' }}
+            >
+              {t('cryptoTailMonitor.manualOrder.buttonUp')}
+            </Button>
+            <Button
+              type="primary"
+              icon={<ShoppingCartOutlined />}
+              disabled={!pushData || pushData.triggered || pushData.periodEnded}
+              onClick={() => handleOpenManualOrderModal('DOWN')}
+              loading={ordering}
+              style={{ flex: 1, backgroundColor: '#fa8c16', borderColor: '#fa8c16', height: 44, borderRadius: '0 6px 6px 0' }}
+            >
+              {t('cryptoTailMonitor.manualOrder.buttonDown')}
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }