frontend/app/analysis/page.tsx

@@ -39,7 +39,8 @@ export default function AnalysisPage() {
   return (
     <div className="container mx-auto px-4 py-12">
       <div className="max-w-6xl mx-auto space-y-8">
-        <div>
+        {/* 標題區域 - 置中對齊 */}
+        <div className="text-center">
           <h1 className="text-4xl font-bold mb-2">交易分析</h1>
           <p className="text-gray-600 dark:text-gray-400">
             配置並執行全面的多代理交易分析
@@ -58,32 +59,6 @@ export default function AnalysisPage() {
             <p className="text-red-600 dark:text-red-400">{error}</p>
           </div>
         )}
-
-        {result && !loading && (
-          <div className="space-y-8">
-            {/* 查看詳細結果按鈕 */}
-            <div className="flex justify-end">
-              <Button onClick={handleViewResults} size="lg" className="gap-2">
-                查看詳細分析結果 →
-              </Button>
-            </div>
-            
-            {/* 價格圖表 */}
-            {result.price_data && result.price_stats && (
-              <PriceChart
-                priceData={result.price_data}
-                priceStats={result.price_stats}
-                ticker={result.ticker}
-              />
-            )}
-            
-            {/* 交易決策 */}
-            <TradingDecision result={result} />
-            
-            {/* 分析報告 */}
-            {result.reports && <AnalystReport reports={result.reports} />}
-          </div>
-        )}
       </div>
     </div>
   );

frontend/app/analysis/results/page.tsx

@@ -2,12 +2,14 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { useAnalysisContext } from "@/context/AnalysisContext";
 import { PriceChart } from "@/components/analysis/PriceChart";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
-import { ArrowLeft } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 
 const ANALYSTS = [
   { key: "market", label: "市場分析師", reportKey: "market_report" },
@@ -63,7 +65,7 @@ export default function AnalysisResultsPage() {
             onClick={() => router.push("/analysis")}
             className="gap-2"
           >
-            <ArrowLeft className="h-4 w-4" />
+            <ChevronLeft className="h-4 w-4" />
             返回分析
           </Button>
         </div>
@@ -108,9 +110,9 @@ export default function AnalysisResultsPage() {
                   <CardContent>
                     {currentReport ? (
                       <div className="prose prose-sm max-w-none dark:prose-invert">
-                        <pre className="whitespace-pre-wrap font-sans text-sm leading-relaxed">
+                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
                           {currentReport}
-                        </pre>
+                        </ReactMarkdown>
                       </div>
                     ) : (
                       <div className="text-center py-8">

frontend/components/analysis/AnalysisForm.tsx

@@ -177,10 +177,10 @@ export function AnalysisForm({ onSubmit, loading = false }: AnalysisFormProps) {
                           <SelectValue placeholder="選擇研究深度" />
                         </SelectTrigger>
                       </FormControl>
-                      <SelectContent>
-                        <SelectItem value="1">淺層 - 快速研究，較少的辯論和策略討論</SelectItem>
-                        <SelectItem value="3">中等 - 中等程度，適度的辯論和策略討論</SelectItem>
-                        <SelectItem value="5">深層 - 全面研究，深入的辯論和策略討論</SelectItem>
+                      <SelectContent className="max-h-80">
+                        <SelectItem value="1" className="py-4 text-base cursor-pointer">淺層 - 快速研究，較少的辯論和策略討論</SelectItem>
+                        <SelectItem value="3" className="py-4 text-base cursor-pointer">中等 - 中等程度，適度的辯論和策略討論</SelectItem>
+                        <SelectItem value="5" className="py-4 text-base cursor-pointer">深層 - 全面研究，深入的辯論和策略討論</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormDescription>

frontend/components/analysis/AnalystReport.tsx

@@ -3,6 +3,8 @@
  */
 "use client";
 
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { Reports } from "@/lib/types";
@@ -126,7 +128,9 @@ function ReportSection({ title, content }: { title: string; content: string }) {
     <div className="border rounded-lg p-4">
       <h3 className="font-semibold text-lg mb-2">{title}</h3>
       <div className="prose prose-sm dark:prose-invert max-w-none">
-        <p className="whitespace-pre-wrap text-sm">{content}</p>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {content}
+        </ReactMarkdown>
       </div>
     </div>
   );

frontend/package.json

@@ -25,7 +25,10 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.66.1",
+    "react-markdown": "^10.1.0",
     "recharts": "^3.4.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0",
     "zod": "^4.1.12"
   },