rn-app/pages/HomeScreen/components/GameSubMenus/styles.ts

/**
 * GameSubMenus 组件样式
 * 支持水平和竖直两种布局
 */

import { createThemeStyles } from '@/theme';

export const styles = createThemeStyles((colors) => ({
  // ========== 容器样式 ==========
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },

  // ========== 水平布局样式 ==========
  horizontalContainer: {
    paddingVertical: 12,
    paddingHorizontal: 8,
    backgroundColor: colors.background,
  },

  horizontalScrollView: {
    flexGrow: 0,
  },

  // ========== 竖直布局样式 ==========
  verticalContainer: {
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: colors.background,
  },

  verticalScrollView: {
    flexGrow: 0,
  },

  // ========== 菜单项样式 ==========
  menuItem: {
    minWidth: 90,
    height: 33,
    marginHorizontal: 6,
    paddingHorizontal: 8,
    // paddingVertical: 8,
    borderRadius: 6,
    backgroundColor: '#f6f6f7',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
  },

  menuItemActive: {
    backgroundColor: colors.primary,
  },

  menuItemVertical: {
    width: 120,
    height: 120,
    marginBottom: 12,
    marginHorizontal: 0,
  },

  menuIcon: {
    height: 16,
    width: 48,
    // 宽度由 Image 组件根据 autoMeasure 自动计算
    resizeMode: 'contain',
  },

  menuText: {
    fontSize: 12,
    fontWeight: '500',
    color: colors.text + '80',
    textAlign: 'center',
    // marginTop: 4,
  },

  menuTextActive: {
    color: '#fff',
    fontWeight: '600',
  },

  // ========== 弹窗样式 ==========
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },

  modalContent: {
    backgroundColor: colors.background,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: 16,
    paddingBottom: 24,
    maxHeight: '70%',
  },

  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },

  modalTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text,
  },

  modalCloseButton: {
    padding: 8,
  },

  modalGrid: {
    paddingHorizontal: 12,
    paddingVertical: 12,
  },

  modalGridItem: {
    flex: 1,
    margin: 6,
    height: 120,
    borderRadius: 12,
    backgroundColor: colors.card,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },

  modalGridItemActive: {
    backgroundColor: colors.primary,
  },

  modalGridIcon: {
    // 只设置高度，宽度由 Image 组件根据 adaptiveMode="height" 自动计算
    height: 60,
    marginBottom: 8,
    // 注意：resizeMode 不应该在样式中，应该作为 Image 组件的 prop
  },

  modalGridText: {
    fontSize: 12,
    fontWeight: '500',
    color: colors.text + '80',
    textAlign: 'center',
  },

  modalGridTextActive: {
    color: '#fff',
    fontWeight: '600',
  },

  // ========== 加载状态 ==========
  skeleton: {
    backgroundColor: colors.card,
    borderRadius: 12,
  },

  skeletonHorizontal: {
    width: 100,
    height: 96,
    marginHorizontal: 6,
  },

  skeletonVertical: {
    width: 120,
    height: 120,
    marginBottom: 12,
  },
}));