diff --git a/frontend/src/components/Recommendations.css b/frontend/src/components/Recommendations.css
index 06d5edf..4edf196 100644
--- a/frontend/src/components/Recommendations.css
+++ b/frontend/src/components/Recommendations.css
@@ -331,12 +331,70 @@
   margin: 10px 0;
 }
 
+.user-guide-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
 .user-guide strong {
   display: block;
-  margin-bottom: 10px;
   font-size: 16px;
 }
 
+.user-guide-prices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.ug-pill {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  line-height: 1.2;
+}
+
+.collapsible-user-guide .cug-body {
+  position: relative;
+}
+
+.collapsible-user-guide .cug-body.collapsed {
+  overflow: hidden;
+}
+
+.collapsible-user-guide .cug-fade {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 36px;
+  background: linear-gradient(to bottom, rgba(102, 126, 234, 0), rgba(118, 75, 162, 0.9));
+  pointer-events: none;
+}
+
+.collapsible-user-guide .cug-toggle {
+  margin-top: 8px;
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  border-radius: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.collapsible-user-guide .cug-toggle:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
 .user-guide-content {
   margin: 0;
   white-space: pre-wrap;
diff --git a/frontend/src/components/Recommendations.jsx b/frontend/src/components/Recommendations.jsx
index 0029829..cb13b8b 100644
--- a/frontend/src/components/Recommendations.jsx
+++ b/frontend/src/components/Recommendations.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { api } from '../services/api'
 import './Recommendations.css'
+import CollapsibleUserGuide from './CollapsibleUserGuide'
 
 function Recommendations() {
   const [recommendations, setRecommendations] = useState([])
@@ -399,8 +400,24 @@ function Recommendations() {
                 {/* 用户指南（人话版计划） */}
                 {rec.user_guide && (
                   <div className="user-guide">
-                    <strong>📋 操作计划:(入场价格：{fmtPrice(rec.suggested_limit_price)} USDT，止损价格：{fmtPrice(rec.suggested_stop_loss)} USDT，第一目标：{fmtPrice(rec.suggested_take_profit_1)} USDT，第二目标：{fmtPrice(rec.suggested_take_profit_2)} USDT)</strong>
-                    <CollapsibleUserGuide text={rec.user_guide} suggested_limit_price={rec.suggested_limit_price} suggested_stop_loss={rec.suggested_stop_loss} suggested_take_profit_1={rec.suggested_take_profit_1} suggested_take_profit_2={rec.suggested_take_profit_2} />
+                    <div className="user-guide-head">
+                      <strong>📋 操作计划</strong>
+                      <div className="user-guide-prices">
+                        <span className="ug-pill">
+                          入场 {fmtPrice(rec.suggested_limit_price ?? rec.planned_entry_price)} USDT
+                        </span>
+                        <span className="ug-pill">
+                          止损 {fmtPrice(rec.suggested_stop_loss)} USDT
+                        </span>
+                        <span className="ug-pill">
+                          目标1 {fmtPrice(rec.suggested_take_profit_1)} USDT
+                        </span>
+                        <span className="ug-pill">
+                          目标2 {fmtPrice(rec.suggested_take_profit_2)} USDT
+                        </span>
+                      </div>
+                    </div>
+                    <CollapsibleUserGuide text={rec.user_guide} maxHeight={160} />
                   </div>
                 )}