// 測試創意測試結果頁面的響應式設計 const responsiveClasses = { // 統計數據區域 statsGrid: "grid grid-cols-3 gap-4 mb-6", statsText: "text-xs text-muted-foreground", // 能力維度分析區域 categoryGrid: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6", categoryItem: "space-y-2 md:space-y-3", categoryTitle: "text-sm md:text-base", categoryBadge: "text-xs", categoryScore: "text-xs md:text-sm", // 詳細反饋區域 feedbackCard: "p-3 md:p-4", feedbackTitle: "text-sm md:text-base", feedbackText: "text-xs md:text-sm", feedbackGrid: "grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4", // 按鈕區域 buttonContainer: "flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center", button: "w-full sm:w-auto" } console.log('📱 創意測試結果頁面響應式設計測試') console.log('=' .repeat(60)) console.log('\n📊 統計數據區域:') console.log(`網格佈局: ${responsiveClasses.statsGrid}`) console.log(`標籤文字: ${responsiveClasses.statsText}`) console.log('\n📋 能力維度分析區域:') console.log(`網格佈局: ${responsiveClasses.categoryGrid}`) console.log(`項目間距: ${responsiveClasses.categoryItem}`) console.log(`標題大小: ${responsiveClasses.categoryTitle}`) console.log(`徽章大小: ${responsiveClasses.categoryBadge}`) console.log(`分數文字: ${responsiveClasses.categoryScore}`) console.log('\n💬 詳細反饋區域:') console.log(`卡片內邊距: ${responsiveClasses.feedbackCard}`) console.log(`標題大小: ${responsiveClasses.feedbackTitle}`) console.log(`文字大小: ${responsiveClasses.feedbackText}`) console.log(`網格佈局: ${responsiveClasses.feedbackGrid}`) console.log('\n🔘 按鈕區域:') console.log(`按鈕容器: ${responsiveClasses.buttonContainer}`) console.log(`按鈕樣式: ${responsiveClasses.button}`) console.log('\n✅ 響應式設計配置完成') console.log('\n📱 手機版特點:') console.log('- 統計數據始終 3 欄並排顯示') console.log('- 文字大小在手機上較小,桌面版較大') console.log('- 能力維度分析在手機上單欄顯示,桌面版雙欄') console.log('- 按鈕在手機上全寬顯示,桌面版自動寬度') console.log('- 內邊距在手機上較小,桌面版較大')