ui: Optimize AI interpretation button layout alignment

- Align AI interpretation buttons in same row within button group
- Place AI button group and download button in same row across all analysis pages
- Implement responsive layout: horizontal on desktop, vertical on mobile
- Update CompleteBaziAnalysis, CompleteZiweiAnalysis, CompleteYijingAnalysis
- Improve button spacing and alignment consistency
- Add proper flex layout with gap-4 spacing
- Maintain sticky positioning for download button

src/components/CompleteBaziAnalysis.tsx

@@ -280,25 +280,24 @@ const CompleteBaziAnalysis: React.FC<CompleteBaziAnalysisProps> = ({ birthDate,
     <div className="min-h-screen bg-gradient-to-br from-red-50 to-yellow-50 py-8">
       <div className="max-w-7xl mx-auto px-4 space-y-8" id="bazi-analysis-content" data-export-content>
         
-        {/* 下载按钮 */}
+        {/* 下载按钮和AI解读按钮 */}
-        <div className="flex justify-end no-export" data-no-export>
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 no-export" data-no-export>
-          <DownloadButton
+          <div className="flex-1">
-            analysisData={analysisData}
+            <AIInterpretationButton
-            analysisType="bazi"
+              analysisData={analysisData}
-            userName={birthDate.name}
+              analysisType="bazi"
-            targetElementId="bazi-analysis-content"
+              onConfigClick={() => setShowAIConfig(true)}
-            className="sticky top-4 z-10"
+            />
-          />
+          </div>
-        </div>
+          <div className="flex-shrink-0">
-        
+            <DownloadButton
-        {/* AI解读按钮 - 独立占用全宽 */}
+              analysisData={analysisData}
-        <div className="w-full no-export" data-no-export>
+              analysisType="bazi"
-          <AIInterpretationButton
+              userName={birthDate.name}
-            analysisData={analysisData}
+              targetElementId="bazi-analysis-content"
-            analysisType="bazi"
+              className="sticky top-4 z-10"
-            onConfigClick={() => setShowAIConfig(true)}
+            />
-            className="w-full"
+          </div>
-          />
         </div>
         
         {/* 标题和基本信息 */}

src/components/CompleteYijingAnalysis.tsx

@@ -268,25 +268,24 @@ const CompleteYijingAnalysis: React.FC<CompleteYijingAnalysisProps> = ({
     <div className="min-h-screen bg-gradient-to-br from-red-50 to-yellow-50 py-8">
       <div className="max-w-7xl mx-auto px-4 space-y-8" id="yijing-analysis-content" data-export-content>
         
-        {/* 下载按钮 */}
+        {/* 下载按钮和AI解读按钮 */}
-        <div className="flex justify-end no-export" data-no-export>
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 no-export" data-no-export>
-          <DownloadButton
+          <div className="flex-1">
-            analysisData={analysisData}
+            <AIInterpretationButton
-            analysisType="yijing"
+              analysisData={analysisData}
-            userName={question ? `占卜_${question.substring(0, 10)}` : 'user'}
+              analysisType="yijing"
-            targetElementId="yijing-analysis-content"
+              onConfigClick={() => setShowAIConfig(true)}
-            className="sticky top-4 z-10"
+            />
-          />
+          </div>
-        </div>
+          <div className="flex-shrink-0">
-        
+            <DownloadButton
-        {/* AI解读按钮 - 独立占用全宽 */}
+              analysisData={analysisData}
-        <div className="w-full no-export" data-no-export>
+              analysisType="yijing"
-          <AIInterpretationButton
+              userName={question ? `占卜_${question.substring(0, 10)}` : 'user'}
-            analysisData={analysisData}
+              targetElementId="yijing-analysis-content"
-            analysisType="yijing"
+              className="sticky top-4 z-10"
-            onConfigClick={() => setShowAIConfig(true)}
+            />
-            className="w-full"
+          </div>
-          />
         </div>
         
         {/* 标题和基本信息 */}

src/components/CompleteZiweiAnalysis.tsx

@@ -583,25 +583,24 @@ const CompleteZiweiAnalysis: React.FC<CompleteZiweiAnalysisProps> = ({ birthDate
     <div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-50 py-8">
       <div className="max-w-7xl mx-auto px-4 space-y-8" id="ziwei-analysis-content" data-export-content>
         
-        {/* 下载按钮 */}
+        {/* 下载按钮和AI解读按钮 */}
-        <div className="flex justify-end no-export" data-no-export>
+        <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 no-export" data-no-export>
-          <DownloadButton
+          <div className="flex-1">
-            analysisData={analysisData}
+            <AIInterpretationButton
-            analysisType="ziwei"
+              analysisData={analysisData}
-            userName={birthDate.name}
+              analysisType="ziwei"
-            targetElementId="ziwei-analysis-content"
+              onConfigClick={() => setShowAIConfig(true)}
-            className="sticky top-4 z-10"
+            />
-          />
+          </div>
-        </div>
+          <div className="flex-shrink-0">
-        
+            <DownloadButton
-        {/* AI解读按钮 - 独立占用全宽 */}
+              analysisData={analysisData}
-        <div className="w-full no-export" data-no-export>
+              analysisType="ziwei"
-          <AIInterpretationButton
+              userName={birthDate.name}
-            analysisData={analysisData}
+              targetElementId="ziwei-analysis-content"
-            analysisType="ziwei"
+              className="sticky top-4 z-10"
-            onConfigClick={() => setShowAIConfig(true)}
+            />
-            className="w-full"
+          </div>
-          />
         </div>
         
         {/* 标题和基本信息 */}

src/components/ui/AIInterpretationButton.tsx

@@ -199,7 +199,7 @@ const AIInterpretationButton: React.FC<AIInterpretationButtonProps> = ({
   return (
     <div className={cn('w-full space-y-4', className)}>
       {/* AI解读按钮区域 */}
-      <div className="flex items-center space-x-2 flex-wrap gap-2">
+      <div className="flex items-center justify-start space-x-2 sm:space-x-3 overflow-x-auto pb-2">
         <ChineseButton
           variant="outline"
           size="md"
@@ -215,7 +215,7 @@ const AIInterpretationButton: React.FC<AIInterpretationButtonProps> = ({
           }}
           disabled={isLoading || (!isConfigValid && !interpretation)}
           className={cn(
-            'min-h-[40px] px-3 sm:px-6 text-xs sm:text-sm flex-shrink-0',
+            'min-h-[40px] min-w-[100px] px-3 sm:px-6 text-xs sm:text-sm flex-shrink-0 whitespace-nowrap',
             !isConfigValid && !interpretation && 'opacity-50 cursor-not-allowed'
           )}
         >
@@ -241,7 +241,7 @@ const AIInterpretationButton: React.FC<AIInterpretationButtonProps> = ({
             size="md"
             onClick={handleReinterpret}
             disabled={isLoading}
-            className="min-h-[40px] px-3 sm:px-4 flex items-center space-x-1 flex-shrink-0"
+            className="min-h-[40px] min-w-[100px] px-3 sm:px-4 flex items-center justify-center space-x-1 flex-shrink-0 whitespace-nowrap"
           >
             <RefreshCw className={cn('h-3 w-3 sm:h-4 sm:w-4', isLoading && 'animate-spin')} />
             <span className="text-xs sm:text-sm">重新解读</span>
@@ -254,7 +254,7 @@ const AIInterpretationButton: React.FC<AIInterpretationButtonProps> = ({
             variant="ghost"
             size="md"
             onClick={onConfigClick}
-            className="min-h-[40px] px-3 sm:px-4 flex items-center space-x-1 text-gray-500 hover:text-gray-700 flex-shrink-0"
+            className="min-h-[40px] min-w-[80px] px-3 sm:px-4 flex items-center justify-center space-x-1 text-gray-500 hover:text-gray-700 flex-shrink-0 whitespace-nowrap"
           >
             <Settings className="h-3 w-3 sm:h-4 sm:w-4" />
             <span className="text-xs sm:text-sm">配置</span>