前言

三国杀拥有丰富多样的游戏模式，每种模式都有独特的规则和策略。从经典的身份局到激烈的国战，从考验个人实力的1v1到注重团队配合的3v3，不同的模式为玩家提供了多样化的游戏体验。本文将实现一个全面的游戏模式介绍系统，帮助玩家了解和掌握各种游戏模式。

游戏模式体系设计

三国杀的游戏模式可以分为经典模式、竞技模式和娱乐模式三大类。每种模式都有不同的人数要求、胜利条件和策略重点，满足不同类型玩家的需求。

// lib/models/game_mode_model.dart
class GameModeModel {
  final String id;
  final String name;
  final String description;
  final String category;
  final int minPlayers;
  final int maxPlayers;
  final int estimatedDuration;
  final String difficulty;
  final List<String> features;
  final List<String> strategyTips;
  final String imageUrl;

  const GameModeModel({
    required this.id,
    required this.name,
    required this.description,
    required this.category,
    required this.minPlayers,
    required this.maxPlayers,
    required this.estimatedDuration,
    required this.difficulty,
    required this.features,
    required this.strategyTips,
    required this.imageUrl,
  });

  factory GameModeModel.fromJson(Map<String, dynamic> json) {
    return GameModeModel(
      id: json['id'] ?? '',
      name: json['name'] ?? '',
      description: json['description'] ?? '',
      category: json['category'] ?? '',
      minPlayers: json['minPlayers'] ?? 2,
      maxPlayers: json['maxPlayers'] ?? 10,
      estimatedDuration: json['estimatedDuration'] ?? 30,
      difficulty: json['difficulty'] ?? 'medium',
      features: List<String>.from(json['features'] ?? []),
      strategyTips: List<String>.from(json['strategyTips'] ?? []),
      imageUrl: json['imageUrl'] ?? '',
    );
  }
}

这个模型包含了游戏模式的所有基本信息。category 字段用于分类，minPlayers 和 maxPlayers 定义了人数范围，features 列出了模式的特色功能。这种结构化的设计让模式信息更加系统化。

身份局模式详解

身份局是三国杀的核心模式，也是最受欢迎的玩法。这个模式通过隐藏身份和不同的胜利条件，创造了丰富的策略空间和心理博弈。

// lib/models/identity_mode_model.dart
class IdentityModeModel {
  final String name;
  final int playerCount;
  final int estimatedDuration;
  final Map<String, IdentityRole> roles;
  final List<String> keyFeatures;

  const IdentityModeModel({
    required this.name,
    required this.playerCount,
    required this.estimatedDuration,
    required this.roles,
    required this.keyFeatures,
  });
}

class IdentityRole {
  final String name;
  final int count;
  final String winCondition;
  final List<String> features;
  final String strategy;
  final Color themeColor;

  const IdentityRole({
    required this.name,
    required this.count,
    required this.winCondition,
    required this.features,
    required this.strategy,
    required this.themeColor,
  });
}

class IdentityModeData {
  static IdentityModeModel getIdentityMode() {
    return IdentityModeModel(
      name: '身份局',
      playerCount: 8,
      estimatedDuration: 30,
      roles: {
        '主公': IdentityRole(
          name: '主公',
          count: 1,
          winCondition: '消灭所有反贼和内奸',
          features: ['身份公开', '额外体力', '主公技能'],
          strategy: '识别忠臣，保护自己，消灭敌人',
          themeColor: Colors.yellow,
        ),
        '忠臣': IdentityRole(
          name: '忠臣',
          count: 2,
          winCondition: '保护主公，消灭反贼和内奸',
          features: ['身份隐藏', '可暴露身份'],
          strategy: '保护主公，协助攻击，适时暴露',
          themeColor: Colors.blue,
        ),
        '反贼': IdentityRole(
          name: '反贼',
          count: 3,
          winCondition: '击杀主公',
          features: ['身份隐藏', '团队合作'],
          strategy: '隐藏身份，团队配合，集火主公',
          themeColor: Colors.red,
        ),
        '内奸': IdentityRole(
          name: '内奸',
          count: 1,
          winCondition: '成为最后存活者',
          features: ['身份隐藏', '独立行动'],
          strategy: '平衡局势，隐藏身份，最后获胜',
          themeColor: Colors.purple,
        ),
      },
      keyFeatures: [
        '身份隐藏机制',
        '多样化胜利条件',
        '心理博弈要素',
        '团队合作与背叛',
      ],
    );
  }
}

身份局的详细信息使用结构化数据进行管理。每种身份都有独立的 IdentityRole 对象，包含了人数、胜利条件、特色功能和策略要点。这种设计便于展示和维护复杂的规则信息。

国战模式实现

国战模式是基于势力对抗的团队模式，玩家根据武将的势力进行分组对战。这个模式强调团队配合和势力特色，提供了不同于身份局的游戏体验。

// lib/models/kingdom_war_model.dart
class KingdomWarModel {
  final String name;
  final int playerCount;
  final int estimatedDuration;
  final Map<String, Kingdom> kingdoms;
  final List<String> specialRules;

  const KingdomWarModel({
    required this.name,
    required this.playerCount,
    required this.estimatedDuration,
    required this.kingdoms,
    required this.specialRules,
  });
}

class Kingdom {
  final String name;
  final Color color;
  final String feature;
  final String strategy;
  final List<String> representativeHeroes;
  final String advantage;
  final String disadvantage;

  const Kingdom({
    required this.name,
    required this.color,
    required this.feature,
    required this.strategy,
    required this.representativeHeroes,
    required this.advantage,
    required this.disadvantage,
  });
}

class KingdomWarData {
  static KingdomWarModel getKingdomWarMode() {
    return KingdomWarModel(
      name: '国战',
      playerCount: 8,
      estimatedDuration: 40,
      kingdoms: {
        '魏': Kingdom(
          name: '魏',
          color: Colors.blue,
          feature: '强大的控制能力',
          strategy: '稳扎稳打，控制局面',
          representativeHeroes: ['曹操', '司马懿', '张辽', '徐晃'],
          advantage: '控制技能多，易于掌控局面',
          disadvantage: '缺乏爆发力，容易被反制',
        ),
        '蜀': Kingdom(
          name: '蜀',
          color: Colors.red,
          feature: '优秀的配合能力',
          strategy: '团结一致，配合作战',
          representativeHeroes: ['刘备', '关羽', '张飞', '诸葛亮'],
          advantage: '配合技能强，团队协作好',
          disadvantage: '单体能力一般，容易被各个击破',
        ),
        '吴': Kingdom(
          name: '吴',
          color: Colors.green,
          feature: '灵活的战术变化',
          strategy: '灵活应变，出其不意',
          representativeHeroes: ['孙权', '周瑜', '陆逊', '甘宁'],
          advantage: '灵活多变，适应性强',
          disadvantage: '策略复杂，容易出错',
        ),
        '群': Kingdom(
          name: '群',
          color: Colors.purple,
          feature: '独特的个人能力',
          strategy: '发挥特长，寻找机会',
          representativeHeroes: ['董卓', '吕布', '貂蝉', '华佗'],
          advantage: '个人能力强，特色明显',
          disadvantage: '缺乏团队配合，容易被围攻',
        ),
      },
      specialRules: [
        '势力技能系统',
        '珠联璧合机制',
        '势力胜利条件',
        '特殊卡牌效果',
      ],
    );
  }
}

国战模式的数据结构包含了每个势力的详细信息。advantage 和 disadvantage 字段帮助玩家理解各势力的优缺点，便于制定策略。

竞技模式设计

1v1单挑模式

1v1模式是纯技术对抗的模式，去除了团队因素，完全依靠个人的操作技巧和策略判断。这个模式对玩家的综合能力要求最高。

// lib/models/duel_mode_model.dart
class DuelModeModel {
  final String name;
  final int playerCount;
  final int estimatedDuration;
  final Map<String, dynamic> specialFeatures;
  final List<String> strategyTips;
  final List<HeroCombo> popularCombos;

  const DuelModeModel({
    required this.name,
    required this.playerCount,
    required this.estimatedDuration,
    required this.specialFeatures,
    required this.strategyTips,
    required this.popularCombos,
  });
}

class HeroCombo {
  final String hero1;
  final String hero2;
  final String synergy;
  final String description;
  final int winRate;

  const HeroCombo({
    required this.hero1,
    required this.hero2,
    required this.synergy,
    required this.description,
    required this.winRate,
  });
}

class DuelModeData {
  static DuelModeModel getDuelMode() {
    return DuelModeModel(
      name: '1v1单挑',
      playerCount: 2,
      estimatedDuration: 15,
      specialFeatures: {
        '选将机制': '轮流选择武将，策略性更强',
        '起始手牌': '通常为5张，保证开局平衡',
        '胜利条件': '击败对手武将即可获胜',
      },
      strategyTips: [
        '选将时考虑克制关系',
        '合理分配攻防资源',
        '把握关键时机',
        '心理博弈同样重要',
      ],
      popularCombos: [
        HeroCombo(
          hero1: '张辽',
          hero2: '甘宁',
          synergy: '高爆发组合',
          description: '快速击杀对手',
          winRate: 65,
        ),
        HeroCombo(
          hero1: '华佗',
          hero2: '大乔',
          synergy: '防御反击组合',
          description: '稳健防守，伺机反击',
          winRate: 58,
        ),
        HeroCombo(
          hero1: '吕布',
          hero2: '貂蝉',
          synergy: '控制输出组合',
          description: '控制对手，持续输出',
          winRate: 62,
        ),
      ],
    );
  }
}

1v1模式的数据包含了热门的武将组合。HeroCombo 类记录了组合的配合效果和胜率，帮助玩家选择强势的组合。

3v3团队模式

3v3模式强调团队配合，每个队伍有三名玩家，需要通过默契的配合来获得胜利。这个模式在竞技性和娱乐性之间找到了很好的平衡。

// lib/models/team_mode_model.dart
class TeamModeModel {
  final String name;
  final int playerCount;
  final int estimatedDuration;
  final Map<String, TeamPosition> positions;
  final List<String> cooperationTactics;

  const TeamModeModel({
    required this.name,
    required this.playerCount,
    required this.estimatedDuration,
    required this.positions,
    required this.cooperationTactics,
  });
}

class TeamPosition {
  final String name;
  final int position;
  final String responsibility;
  final List<String> recommendedTypes;
  final List<String> examples;
  final String keySkills;

  const TeamPosition({
    required this.name,
    required this.position,
    required this.responsibility,
    required this.recommendedTypes,
    required this.examples,
    required this.keySkills,
  });
}

class TeamModeData {
  static TeamModeModel getTeamMode() {
    return TeamModeModel(
      name: '3v3团队战',
      playerCount: 6,
      estimatedDuration: 30,
      positions: {
        '前排': TeamPosition(
          name: '前排',
          position: 1,
          responsibility: '承担伤害，保护队友',
          recommendedTypes: ['高血量武将', '防御型武将'],
          examples: ['刘备', '孙权', '袁绍'],
          keySkills: '防御、吸收伤害、嘲讽',
        ),
        '中排': TeamPosition(
          name: '中排',
          position: 2,
          responsibility: '输出伤害，控制局面',
          recommendedTypes: ['输出型武将', '控制型武将'],
          examples: ['诸葛亮', '周瑜', '司马懿'],
          keySkills: '输出、控制、支援',
        ),
        '后排': TeamPosition(
          name: '后排',
          position: 3,
          responsibility: '辅助队友，关键支援',
          recommendedTypes: ['辅助型武将', '功能型武将'],
          examples: ['华佗', '大乔', '小乔'],
          keySkills: '治疗、增益、保护',
        ),
      },
      cooperationTactics: [
        '前排吸引火力，后排输出',
        '中排控制节奏，配合队友',
        '关键时刻集中火力',
        '保护核心输出武将',
      ],
    );
  }
}

3v3模式的位置配置包含了详细的职责和推荐武将。keySkills 字段列出了每个位置需要的关键技能，帮助玩家选择合适的武将。

游戏模式屏幕实现

// lib/screens/game_modes_screen.dart
class GameModesScreen extends StatelessWidget {
  const GameModesScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('游戏模式'),
        backgroundColor: Colors.red[700],
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildHeader(),
            _buildModesSection(),
            _buildComparisonSection(),
          ],
        ),
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.all(16.w),
      color: Colors.red[700],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '游戏模式介绍',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 4.h),
          Text(
            '选择适合你的游戏模式，开启精彩对战',
            style: TextStyle(
              color: Colors.white70,
              fontSize: 13.sp,
            ),
          ),
        ],
      ),
    );
  }

主屏幕使用红色头部与应用主题保持一致，提供了清晰的视觉层次。SingleChildScrollView 确保内容过多时可以滚动。

模式卡片组件

  Widget _buildModesSection() {
    return Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        children: [
          _buildModeCard(
            '身份局',
            '经典模式，通过身份完成任务',
            Icons.people,
            Colors.blue,
            '5-10人',
            '20-40分钟',
          ),
          _buildModeCard(
            '国战',
            '四国对抗，势力之间的较量',
            Icons.flag,
            Colors.red,
            '6-8人',
            '30-50分钟',
          ),
          _buildModeCard(
            '1v1',
            '单挑模式，考验个人实力',
            Icons.sports_kabaddi,
            Colors.orange,
            '2人',
            '10-20分钟',
          ),
          _buildModeCard(
            '3v3',
            '团队竞技，配合至上',
            Icons.groups,
            Colors.green,
            '6人',
            '25-40分钟',
          ),
        ],
      ),
    );
  }

  Widget _buildModeCard(
    String title,
    String desc,
    IconData icon,
    Color color,
    String players,
    String duration,
  ) {
    return Container(
      margin: EdgeInsets.only(bottom: 12.h),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Container(
                width: 50.w,
                height: 50.w,
                decoration: BoxDecoration(
                  color: color.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(8.r),
                ),
                child: Icon(icon, color: color, size: 28.sp),
              ),
              SizedBox(width: 16.w),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 4.h),
                    Text(
                      desc,
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              Icon(Icons.arrow_forward_ios, size: 16.sp, color: Colors.grey),
            ],
          ),
          SizedBox(height: 12.h),
          Row(
            children: [
              Expanded(
                child: Row(
                  children: [
                    Icon(Icons.people, size: 14.sp, color: Colors.grey),
                    SizedBox(width: 4.w),
                    Text(players, style: TextStyle(fontSize: 12.sp, color: Colors.grey)),
                  ],
                ),
              ),
              Expanded(
                child: Row(
                  children: [
                    Icon(Icons.schedule, size: 14.sp, color: Colors.grey),
                    SizedBox(width: 4.w),
                    Text(duration, style: TextStyle(fontSize: 12.sp, color: Colors.grey)),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

模式卡片采用了统一的设计语言。白色背景确保内容的可读性，轻微的阴影增加了层次感。每个卡片都显示了人数和时长信息，帮助玩家快速了解模式的基本特征。

模式对比区域

  Widget _buildComparisonSection() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.blue.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12.r),
        border: Border.all(color: Colors.blue.withOpacity(0.2)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Icon(Icons.compare, color: Colors.blue, size: 20.sp),
              SizedBox(width: 8.w),
              Text(
                '模式对比',
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          _buildComparisonItem('身份局', '心理博弈', '团队合作', '中等'),
          _buildComparisonItem('国战', '势力对抗', '团队配合', '较高'),
          _buildComparisonItem('1v1', '个人实力', '单独行动', '高'),
          _buildComparisonItem('3v3', '位置配合', '团队协作', '中高'),
        ],
      ),
    );
  }

  Widget _buildComparisonItem(String mode, String feature, String teamwork, String difficulty) {
    return Container(
      margin: EdgeInsets.only(bottom: 8.h),
      padding: EdgeInsets.all(12.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Row(
        children: [
          Expanded(
            flex: 2,
            child: Text(
              mode,
              style: TextStyle(fontSize: 13.sp, fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
            flex: 2,
            child: Text(feature, style: TextStyle(fontSize: 12.sp)),
          ),
          Expanded(
            flex: 2,
            child: Text(teamwork, style: TextStyle(fontSize: 12.sp)),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
              decoration: BoxDecoration(
                color: _getDifficultyColor(difficulty).withOpacity(0.1),
                borderRadius: BorderRadius.circular(4.r),
              ),
              child: Text(
                difficulty,
                style: TextStyle(
                  fontSize: 10.sp,
                  color: _getDifficultyColor(difficulty),
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Color _getDifficultyColor(String difficulty) {
    switch (difficulty) {
      case '低':
        return Colors.green;
      case '中等':
        return Colors.orange;
      case '中高':
        return Colors.orange;
      case '较高':
        return Colors.red;
      case '高':
        return Colors.red;
      default:
        return Colors.grey;
    }
  }
}

模式对比区域提供了各种模式的快速对比。使用颜色编码表示难度等级，让用户能够一眼看出各模式的特点。

模式推荐系统

// lib/services/mode_recommendation_service.dart
class ModeRecommendationService {
  static Map<String, dynamic> recommendMode(Map<String, dynamic> playerProfile) {
    final experience = playerProfile['experience'] ?? 'beginner';
    final preferredStyle = playerProfile['preferredStyle'] ?? 'balanced';
    final availableTime = playerProfile['availableTime'] ?? 30;
    final teamPreference = playerProfile['teamPreference'] ?? 'solo';
    
    Map<String, int> scores = {
      '身份局': 0,
      '国战': 0,
      '1v1': 0,
      '3v3': 0,
    };
    
    // 根据经验等级评分
    switch (experience) {
      case 'beginner':
        scores['身份局'] = scores['身份局']! + 8;
        scores['1v1'] = scores['1v1']! + 5;
        break;
      case 'intermediate':
        scores['身份局'] = scores['身份局']! + 9;
        scores['国战'] = scores['国战']! + 7;
        scores['3v3'] = scores['3v3']! + 8;
        break;
      case 'advanced':
        scores['1v1'] = scores['1v1']! + 9;
        scores['国战'] = scores['国战']! + 8;
        scores['3v3'] = scores['3v3']! + 7;
        break;
    }
    
    // 根据游戏风格评分
    switch (preferredStyle) {
      case 'competitive':
        scores['1v1'] = scores['1v1']! + 8;
        scores['3v3'] = scores['3v3']! + 7;
        break;
      case 'social':
        scores['身份局'] = scores['身份局']! + 8;
        scores['国战'] = scores['国战']! + 7;
        break;
      case 'balanced':
        scores['身份局'] = scores['身份局']! + 6;
        scores['国战'] = scores['国战']! + 6;
        break;
    }
    
    // 根据可用时间评分
    if (availableTime < 20) {
      scores['1v1'] = scores['1v1']! + 5;
    } else if (availableTime > 40) {
      scores['国战'] = scores['国战']! + 4;
      scores['身份局'] = scores['身份局']! + 3;
    }
    
    // 根据团队偏好评分
    switch (teamPreference) {
      case 'solo':
        scores['1v1'] = scores['1v1']! + 6;
        break;
      case 'team':
        scores['3v3'] = scores['3v3']! + 8;
        scores['国战'] = scores['国战']! + 7;
        break;
      case 'mixed':
        scores['身份局'] = scores['身份局']! + 7;
        break;
    }
    
    final recommendedMode = scores.entries.reduce((a, b) => a.value > b.value ? a : b).key;
    
    return {
      'recommendedMode': recommendedMode,
      'reason': _getRecommendationReason(recommendedMode, playerProfile),
      'alternatives': _getAlternatives(scores, recommendedMode),
      'tips': _getModeTips(recommendedMode),
    };
  }
  
  static String _getRecommendationReason(String mode, Map<String, dynamic> profile) {
    switch (mode) {
      case '身份局':
        return '身份局是最经典的模式，适合各个水平的玩家。你可以在这里学习心理博弈和身份判断。';
      case '国战':
        return '国战强调团队配合和势力特色。如果你喜欢团队游戏，这是最好的选择。';
      case '1v1':
        return '1v1是纯技术对抗的模式。如果你想挑战自己的实力，这是最好的舞台。';
      case '3v3':
        return '3v3结合了竞技性和团队合作。如果你有固定的队友，这是最佳选择。';
      default:
        return '根据你的游戏风格推荐这个模式。';
    }
  }
  
  static List<String> _getAlternatives(Map<String, int> scores, String recommended) {
    final sorted = scores.entries.toList()
      ..sort((a, b) => b.value.compareTo(a.value));
    
    return sorted
        .where((e) => e.key != recommended)
        .take(2)
        .map((e) => e.key)
        .toList();
  }
  
  static List<String> _getModeTips(String mode) {
    switch (mode) {
      case '身份局':
        return [
          '观察其他玩家的出牌习惯',
          '学会识别不同身份的特征',
          '在关键时刻做出正确决策',
        ];
      case '国战':
        return [
          '了解各势力的特色和优势',
          '与队友保持良好沟通',
          '合理分配资源和目标',
        ];
      case '1v1':
        return [
          '选择克制对手的武将',
          '合理管理手牌和资源',
          '把握关键的出牌时机',
        ];
      case '3v3':
        return [
          '选择合适的位置和武将',
          '与队友配合默契',
          '保护核心输出武将',
        ];
      default:
        return [];
    }
  }
}

智能推荐系统根据玩家的多个维度来推荐最适合的游戏模式。包括经验等级、游戏风格、可用时间和团队偏好等因素。这种个性化的推荐提升了用户体验。

模式详情页面

// lib/screens/mode_detail_screen.dart
class ModeDetailScreen extends StatelessWidget {
  final GameModeModel mode;

  const ModeDetailScreen({Key? key, required this.mode}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(mode.name),
        backgroundColor: Colors.red[700],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _buildModeHeader(),
            _buildBasicInfo(),
            _buildFeatures(),
            _buildStrategyTips(),
          ],
        ),
      ),
    );
  }

  Widget _buildModeHeader() {
    return Container(
      padding: EdgeInsets.all(16.w),
      color: Colors.red[700],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            mode.name,
            style: TextStyle(
              color: Colors.white,
              fontSize: 24.sp,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 8.h),
          Text(
            mode.description,
            style: TextStyle(
              color: Colors.white70,
              fontSize: 14.sp,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBasicInfo() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildInfoItem('人数', '${mode.minPlayers}-${mode.maxPlayers}人', Icons.people),
          _buildInfoItem('时长', '${mode.estimatedDuration}分钟', Icons.schedule),
          _buildInfoItem('难度', mode.difficulty, Icons.trending_up),
        ],
      ),
    );
  }

  Widget _buildInfoItem(String label, String value, IconData icon) {
    return Column(
      children: [
        Icon(icon, color: Colors.red[700], size: 24.sp),
        SizedBox(height: 4.h),
        Text(label, style: TextStyle(fontSize: 12.sp, color: Colors.grey)),
        SizedBox(height: 2.h),
        Text(value, style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.bold)),
      ],
    );
  }

  Widget _buildFeatures() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.blue.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('模式特色', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold)),
          SizedBox(height: 12.h),
          ...mode.features.map((feature) => Padding(
            padding: EdgeInsets.only(bottom: 8.h),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(Icons.check_circle, color: Colors.blue, size: 16.sp),
                SizedBox(width: 8.w),
                Expanded(child: Text(feature, style: TextStyle(fontSize: 13.sp))),
              ],
            ),
          )),
        ],
      ),
    );
  }

  Widget _buildStrategyTips() {
    return Container(
      margin: EdgeInsets.all(16.w),
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.green.withOpacity(0.05),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('策略建议', style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.bold)),
          SizedBox(height: 12.h),
          ...mode.strategyTips.map((tip) => Padding(
            padding: EdgeInsets.only(bottom: 8.h),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('• ', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green)),
                Expanded(child: Text(tip, style: TextStyle(fontSize: 13.sp))),
              ],
            ),
          )),
        ],
      ),
    );
  }
}

模式详情页面提供了完整的模式信息展示。包括基本信息、特色功能和策略建议，帮助玩家全面了解每个模式。

总结

通过本文的实现，我们构建了一个全面的游戏模式介绍系统。这个系统不仅提供了各种模式的详细信息，还包含了智能推荐、规则解析、策略指导等高级功能。

核心功能特色：

• 四种主要游戏模式的完整介绍
• 结构化的规则和策略信息
• 视觉化的模式卡片设计
• 智能的模式推荐系统
• 详细的配合和战术指导
• 个性化的学习路径
• 模式对比和选择指南

这个游戏模式系统为玩家提供了全方位的模式学习工具，帮助他们选择合适的游戏模式并掌握相应的策略。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net