Update web/src/components/RightPanel.tsx

web/src/components/RightPanel.tsx

@@ -19,6 +19,10 @@ import {
   DialogFooter,
 } from './ui/dialog';
 
+// ✅ Markdown 渲染
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
 interface RightPanelProps {
   user: User | null;
   onLogin: (name: string, emailOrId: string) => void;
@@ -31,7 +35,6 @@ interface RightPanelProps {
   resultType: 'export' | 'quiz' | 'summary' | null;
   setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;
 
-  // ✅ Actions buttons callbacks (来自 App.tsx)
   onExport: () => void;
   onQuiz: () => void;
   onSummary: () => void;
@@ -155,49 +158,50 @@ export function RightPanel({
         )}
       </Card>
 
-      {/* ✅ Actions：三按钮并排（同宽） */}
-      {/* Actions */}
-      {/* Actions */}
+      {/* Actions (3 buttons in one row) */}
       <Card className="p-4">
         <div className="flex items-center justify-between mb-3">
-          <h3 className="text-base font-medium">Actions TEST 123</h3>
+          <h3 className="text-base font-medium">Actions</h3>
         </div>
-      
-        {/* 强制一排三个：不用 grid，直接 flex，最稳 */}
-        <div className="flex items-stretch gap-2">
+
+        {/* ✅ 关键点：
+            - flex + flex-1 保证同宽
+            - min-w-0 防止内容撑开导致换行
+            - h-11 / rounded-xl 统一尺寸
+        */}
+        <div className="flex gap-2">
           <Button
             variant="outline"
             onClick={onExport}
             disabled={!isLoggedIn}
             title="Export"
-            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
+            className="flex-1 min-w-0 h-11 px-0 rounded-xl flex items-center justify-center"
           >
             <Download className="h-4 w-4" />
           </Button>
-      
+
           <Button
             variant="outline"
             onClick={onQuiz}
             disabled={!isLoggedIn}
             title="Quiz"
-            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
+            className="flex-1 min-w-0 h-11 px-0 rounded-xl flex items-center justify-center"
           >
             <ClipboardList className="h-4 w-4" />
           </Button>
-      
+
           <Button
             variant="outline"
             onClick={onSummary}
             disabled={!isLoggedIn}
             title="Summary"
-            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
+            className="flex-1 min-w-0 h-11 px-0 rounded-xl flex items-center justify-center"
           >
             <Sparkles className="h-4 w-4" />
           </Button>
         </div>
       </Card>
 
-
       <Separator />
 
       {/* Results */}
@@ -225,7 +229,13 @@ export function RightPanel({
                   Copy
                 </Button>
               </div>
-              <div className="text-sm whitespace-pre-wrap text-foreground">{exportResult}</div>
+
+              {/* ✅ Markdown render (fix **bold**, lists, code blocks, etc.) */}
+              <div className="text-sm text-foreground whitespace-pre-wrap">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                  {exportResult}
+                </ReactMarkdown>
+              </div>
             </div>
           ) : (
             <div className="flex items-center justify-center h-full text-sm text-muted-foreground text-left">