MatchCreateGame 创建赛事

一个功能完整的赛事创建组件，支持赛事logo上传、玩法选择、基础设置配置、奖品设置等功能，适用于各种竞技类游戏的赛事创建场景。

引入

import PressMatchCreateGame from 'press-next/press-match-create-game/press-match-create-game';

代码演示

基础用法

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    @create-game-click="handleCreateGame"
    @change-logo-click="handleChangeLogoClick"
    @change-match-name="handleChangeMatchName"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/logo.png');
const matchName = ref('我的赛事');

const modeList = ref([
  {
    id: 1,
    title: '经典模式',
    description: '传统的竞技模式',
    srcPic: 'https://example.com/mode1.png',
    hot: true,
    label: '推荐'
  },
  {
    id: 2,
    title: '快速模式',
    description: '快节奏的对战体验',
    srcPic: 'https://example.com/mode2.png'
  }
]);

const createList = ref([
  {
    title: '开启AI',
    tip: 'AI将协助管理赛事',
    showSwitch: true,
    checked: false,
    isBasic: true
  },
  {
    title: '比赛规则',
    desc: '设置详细规则',
    showSwitch: false,
    isBasic: true
  }
]);

const handleCreateGame = () => {
  console.log('创建赛事');
};

const handleChangeLogoClick = () => {
  console.log('更换logo');
};

const handleChangeMatchName = (value) => {
  matchName.value = value;
};
</script>

修改模式

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    :is-modify="true"
    create-button-text="保存修改"
    @create-game-click="handleSaveGame"
    @change-logo-click="handleChangeLogoClick"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/existing-logo.png');
const matchName = ref('已存在的赛事名称');

const modeList = ref([
  {
    id: 1,
    title: '经典模式',
    description: '传统的竞技模式',
    srcPic: 'https://example.com/mode1.png',
    hot: true
  }
]);

const createList = ref([
  {
    title: '开启AI',
    tip: 'AI将协助管理赛事',
    showSwitch: true,
    checked: true,
    isBasic: true,
    aiType: 'GPT-4智能助手'
  }
]);

const handleSaveGame = () => {
  console.log('保存赛事修改');
};

const handleChangeLogoClick = () => {
  console.log('更换logo');
};
</script>

快速创建模式

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
    :is-create-quick="true"
    create-button-text="快速创建"
    @create-game-click="handleQuickCreate"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('');
const matchName = ref('快速赛事');

const modeList = ref([
  {
    id: 1,
    title: '标准模式',
    description: '适合新手的标准玩法',
    srcPic: 'https://example.com/standard.png'
  }
]);

const createList = ref([
  {
    title: '开启AI',
    tip: '智能管理赛事',
    showSwitch: true,
    checked: false,
    isBasic: true
  },
  {
    title: '高级设置',
    desc: '更多配置选项',
    showSwitch: false,
    isBasic: false,
    isMore: true
  }
]);

const handleQuickCreate = () => {
  console.log('快速创建赛事');
};
</script>

完整功能示例

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :cur-mode-index="curModeIndex"
    :mode-list="modeList"
    :create-list="createList"
    :is-show-more="isShowMore"
    :prize-list="prizeList"
    more-text="AI直播、比赛规则、奖品等更多设置"
    @create-game-click="handleCreateGame"
    @update:cur-mode-index="handleModeChange"
    @change-logo-click="handleChangeLogoClick"
    @change-match-name="handleChangeMatchName"
    @click-cell-item="handleClickCellItem"
    @on-change-switch="handleSwitchChange"
    @update:is-show-more="handleShowMoreToggle"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @prize-change="handlePrizeChange"
    @update:prize-list="handlePrizeListUpdate"
  />
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('https://example.com/logo.png');
const matchName = ref('王者争霸赛');
const curModeIndex = ref(0);
const isShowMore = ref(false);

const modeList = ref([
  {
    id: 1,
    title: '经典5V5',
    description: '传统的5V5对战模式',
    srcPic: 'https://example.com/5v5.png',
    hot: true,
    label: '热门'
  },
  {
    id: 2,
    title: '大乱斗',
    description: '多人混战模式',
    srcPic: 'https://example.com/brawl.png',
    label: '新玩法'
  },
  {
    id: 3,
    title: '排位赛',
    description: '竞技排位模式',
    srcPic: 'https://example.com/ranked.png'
  }
]);

const createList = ref([
  {
    title: '比赛类型',
    desc: '团队赛（四人)',
    showSwitch: false,
    isBasic: true,
    type: 'match-type'
  },
  {
    title: '比赛局数及地图',
    desc: '共一局(零号大坝)',
    showSwitch: false,
    isBasic: true,
    type: 'map'
  },
  {
    title: '报名截止',
    desc: '6月10日 10:50',
    showSwitch: false,
    isBasic: true,
    type: 'signup-deadline'
  },
  {
    title: '开赛时间',
    desc: '6月10日 10:50',
    showSwitch: false,
    isBasic: true,
    type: 'start-time'
  },
  {
    title: '开启ai直播',
    aiType: '单人解说',
    showSwitch: true,
    checked: true,
    isBasic: false,
    isMore: true,
    type: 'ai'
  },
  {
    title: '比赛群二维码',
    desc: '',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'qrcode'
  },
  {
    title: '比赛规则',
    desc: '默认规则',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'rules'
  },
  {
    title: '开赛方式',
    desc: '手动开赛',
    showSwitch: false,
    isBasic: false,
    isMore: true,
    type: 'start-mode'
  }
]);

// 奖品列表配置
const prizeList = ref([
  {
    id: 1,
    title: '冠军奖励',
    name: '王者荣耀限定皮肤',
    description: '赛季限定皮肤礼包 + 专属头像框',
    image: 'https://example.com/prize-champion.png',
    quantity: 1,
    quantityType: 'per_person'
  },
  {
    id: 2,
    title: '亚军奖励',
    name: '游戏点券',
    description: '价值500元游戏点券',
    image: 'https://example.com/prize-runner.png',
    quantity: 2,
    quantityType: 'per_person'
  },
  {
    id: 3,
    title: '季军奖励',
    name: '游戏道具',
    description: '稀有游戏道具礼包',
    image: 'https://example.com/prize-third.png',
    quantity: 3,
    quantityType: 'total'
  }
]);

// 事件处理
const handleCreateGame = () => {
  console.log('创建赛事，当前配置：', {
    matchName: matchName.value,
    modeIndex: curModeIndex.value,
    settings: createList.value,
    prizes: prizeList.value
  });
};

const handleModeChange = (index) => {
  curModeIndex.value = index;
  console.log('切换到模式：', modeList.value[index].title);
};

const handleChangeLogoClick = () => {
  console.log('打开logo选择器');
  // 这里可以打开图片选择器或logo库
};

const handleChangeMatchName = (value) => {
  matchName.value = value;
  console.log('赛事名称更新：', value);
};

const handleClickCellItem = (index) => {
  const item = createList.value[index];
  console.log('点击设置项：', item.title);
  
  // 根据不同类型打开对应的设置页面
  switch (item.type) {
    case 'match-type':
      console.log('打开比赛类型选择');
      break;
    case 'map':
      console.log('打开地图选择');
      break;
    case 'signup-deadline':
    case 'start-time':
      console.log('打开时间选择器');
      break;
    case 'rules':
      console.log('打开比赛规则设置');
      break;
    default:
      console.log('打开通用设置');
  }
};

const handleSwitchChange = (eventData) => {
  console.log('开关状态变更：', eventData);
  
  // 更新对应项的状态
  const item = createList.value[eventData.index];
  if (item) {
    item.checked = eventData.value;
    
    // 特殊处理AI设置
    if (eventData.type === 'ai' && eventData.value) {
      item.aiType = '单人解说';
    }
  }
};

const handleShowMoreToggle = () => {
  isShowMore.value = !isShowMore.value;
  console.log('更多设置', isShowMore.value ? '展开' : '收起');
};

// 奖品相关事件 - 由业务层处理
const handleAddPrize = () => {
  console.log('添加奖品，当前奖品数量:', prizeList.value.length);
  // 业务层创建新奖品
  const newPrize = {
    id: Date.now(),
    title: `奖项${prizeList.value.length + 1}`,
    name: '',
    description: '',
    image: '',
    quantity: 1,
    quantityType: 'per_person'
  };
  prizeList.value.push(newPrize);
  console.log('新增奖品:', newPrize);
};

const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    // 不允许删除时提示用户
    console.warn('至少需要保留一个奖项设置');
    uni.showToast({
      title: '至少需要保留一个奖项',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  console.log('删除奖品, 索引:', index);
  // 注意：组件内部已处理删除逻辑，这里可以添加额外的业务逻辑
};

const handlePrizeChange = (index) => {
  console.log('奖品数据变更, 索引:', index);
  console.log('当前奖品数据:', prizeList.value[index]);
};

const handlePrizeListUpdate = (list) => {
  console.log('奖品列表更新:', list);
  prizeList.value = list;
};
</script>

自定义底部按钮

<template>
  <PressMatchCreateGame
    :logo-pic="logoPic"
    :match-name="matchName"
    :mode-list="modeList"
    :create-list="createList"
  >
    <template #foot-btn>
      <div class="custom-buttons">
        <PressButton
          type="default"
          @click="handleSaveDraft"
        >
          保存草稿
        </PressButton>
        <PressButton
          type="primary"
          @click="handlePublish"
        >
          发布赛事
        </PressButton>
      </div>
    </template>
  </PressMatchCreateGame>
</template>

<script setup>
import { ref } from 'vue';

const logoPic = ref('');
const matchName = ref('');
const modeList = ref([]);
const createList = ref([]);

const handleSaveDraft = () => {
  console.log('保存为草稿');
};

const handlePublish = () => {
  console.log('发布赛事');
};
</script>

<style scoped>
.custom-buttons {
  display: flex;
  gap: 12px;
}

.custom-buttons .press-button {
  flex: 1;
}
</style>

奖品列表管理

组件支持完整的奖品列表管理功能，包括添加、删除、编辑奖品。组件采用单向数据流 + 事件更新的模式，确保数据流清晰且易于追踪。

<template>
  <PressMatchCreateGame
    :prize-list="prizeList"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @prize-change="handlePrizeChange"
    @update:prize-list="handlePrizeListUpdate"
  />
</template>

<script setup>
import { ref } from 'vue';

const prizeList = ref([
  {
    id: 1,
    title: '冠军奖励',
    name: '王者荣耀限定皮肤',
    description: '赛季限定皮肤礼包',
    type: '实物奖品', // 奖品类型字段
    image: 'https://example.com/prize1.png',
    quantity: 1,
    quantityType: 'per_person'
  }
]);

// 添加奖品 - 由业务层创建新奖品数据
const handleAddPrize = () => {
  const newPrize = {
    id: Date.now(),
    title: `奖项${prizeList.value.length + 1}`,
    name: '',
    description: '',
    type: '', // 初始化奖品类型
    image: '',
    quantity: 1,
    quantityType: 'per_person'
  };
  prizeList.value.push(newPrize);
};

// 删除奖品 - 组件会传递 canDelete 参数
const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    // 至少保留一个奖项
    uni.showToast({
      title: '至少需要保留一个奖项',
      icon: 'none'
    });
    return;
  }
  // 删除成功后的业务逻辑
  console.log('删除奖品成功');
};

// 奖品数据变更 - 由 PressMatchPrizeSet 组件触发
const handlePrizeChange = (index) => {
  console.log('奖品变更，索引:', index);
  console.log('奖品数据:', prizeList.value[index]);
};

// 奖品列表更新 - 所有数据变更的统一出口
const handlePrizeListUpdate = (list) => {
  console.log('===== 奖品列表更新 =====');
  prizeList.value = [...list]; // 创建新数组引用，确保响应式更新
  
  // 打印所有奖品信息（包括 type 字段）
  list.forEach((prize, index) => {
    console.log(`奖品 ${index + 1}:`, {
      name: prize.name,
      description: prize.description,
      type: prize.type, // 类型字段会正确同步
      quantity: prize.quantity,
      quantityType: prize.quantityType
    });
  });
};
</script>

重要说明：

1. 数据流向：

   • 用户在 PressMatchPrizeSet 中编辑 → 触发 change 事件 → press-match-create-game 接收 → 更新 internalPrizeList → 触发 update:prizeList 事件 → 业务层接收最新数据

2. 添加奖品：add-prize 事件仅触发通知，新奖品的创建应在业务层完成，这样可以自定义初始化数据（记得初始化 type 字段）

3. 删除限制：组件内部会确保至少保留一个奖项，delete-prize 事件会传递 canDelete 参数表示是否允许删除

4. 数据同步：

   • 所有奖品数据变更都会通过 update:prizeList 事件同步
   • 使用 [...list] 创建新数组引用，确保 Vue 响应式正确触发
   • 输入框、选择器、数量等所有字段的变更都能正确同步

自定义奖品字段

通过 customFormFields 属性可以自定义奖品设置表单的字段配置，支持输入框和选择器两种类型。组件内部会根据每个奖品的数据动态计算 selectedValue，确保选择器正确显示已选值。

<template>
  <PressMatchCreateGame
    :prize-list="prizeList"
    :custom-form-fields="customFormFields"
    @field-select="handleFieldSelect"
    @add-prize="handleAddPrize"
    @delete-prize="handleDeletePrize"
    @update:prize-list="handlePrizeListUpdate"
  />
  
  <!-- 字段选择器 -->\n  <PressActionSheet
    v-model:show="showFieldSheet"
    :actions="fieldActions"
    :title="currentFieldLabel"
    @select="handleFieldValueSelect"
  />
</template>

<script setup>
import { ref, computed } from 'vue';

const prizeList = ref([
  {
    id: 1,
    title: '冠军奖励',
    name: '王者荣耀限定皮肤',
    description: '赛季限定皮肤礼包',
    image: 'https://example.com/prize1.png',
    quantity: 1,
    quantityType: 'per_person',
    type: '实物奖品', // 自定义字段 - 奖品类型
    level: '一等奖', // 自定义字段 - 奖品等级
    category: '游戏道具' // 自定义字段 - 奖品分类
  }
]);

// 自定义表单字段配置（建议使用 computed 确保配置最新）
const customFormFields = computed(() => [
  {
    key: 'name',
    label: '奖项名称',
    placeholder: '请输入奖项名称',
    type: 'input'
  },
  {
    key: 'description',
    label: '奖品描述',
    placeholder: '请输入奖品描述',
    type: 'input'
  },
  {
    key: 'type',
    label: '奖品类型',
    type: 'select',
    selectedValue: '', // 会在组件内部动态计算
    defaultText: '请选择'
  },
  {
    key: 'level',
    label: '奖品等级',
    type: 'select',
    selectedValue: '', // 会在组件内部动态计算
    defaultText: '请选择等级'
  },
  {
    key: 'category',
    label: '奖品分类',
    type: 'select',
    selectedValue: '', // 会在组件内部动态计算
    defaultText: '请选择分类'
  }
]);

const showFieldSheet = ref(false);
const currentFieldKey = ref('');
const currentFieldLabel = ref('');
const currentPrizeIndex = ref(0);

// 字段选择器选项配置
const fieldOptionsMap = {
  type: [
    { name: '实物奖品', value: '实物奖品' },
    { name: '虚拟奖品', value: '虚拟奖品' },
    { name: '现金红包', value: '现金红包' },
    { name: '优惠券', value: '优惠券' },
    { name: '积分', value: '积分' }
  ],
  level: [
    { name: '一等奖', value: '一等奖' },
    { name: '二等奖', value: '二等奖' },
    { name: '三等奖', value: '三等奖' },
    { name: '参与奖', value: '参与奖' }
  ],
  category: [
    { name: '游戏道具', value: '游戏道具' },
    { name: '实物礼品', value: '实物礼品' },
    { name: '电子产品', value: '电子产品' },
    { name: '优惠权益', value: '优惠权益' }
  ]
};

const fieldActions = computed(() => fieldOptionsMap[currentFieldKey.value] || []);

// 字段选择事件处理
const handleFieldSelect = (index, fieldKey) => {
  currentPrizeIndex.value = index;
  currentFieldKey.value = fieldKey;
  
  const labelMap = {
    type: '奖品类型',
    level: '奖品等级',
    category: '奖品分类'
  };
  
  currentFieldLabel.value = `选择${labelMap[fieldKey] || '字段'}`;
  showFieldSheet.value = true;
};

// 字段值选择回调 - 优化：创建新对象触发响应式
const handleFieldValueSelect = (action) => {
  if (prizeList.value[currentPrizeIndex.value]) {
    // 创建新对象触发响应式更新
    prizeList.value[currentPrizeIndex.value] = {
      ...prizeList.value[currentPrizeIndex.value],
      [currentFieldKey.value]: action.value
    };
    console.log('已更新奖品数据:', prizeList.value[currentPrizeIndex.value]);
  }
  
  showFieldSheet.value = false;
};

// 添加奖品时初始化自定义字段
const handleAddPrize = () => {
  const newPrize = {
    id: Date.now(),
    title: `奖项${prizeList.value.length + 1}`,
    name: '',
    description: '',
    image: '',
    quantity: 1,
    quantityType: 'per_person',
    type: '', // 初始化自定义字段
    level: '',
    category: ''
  };
  prizeList.value.push(newPrize);
};

const handleDeletePrize = (index, canDelete) => {
  if (!canDelete) {
    uni.showToast({
      title: '至少需要保留一个奖项',
      icon: 'none'
    });
  }
};

// 奖品列表更新
const handlePrizeListUpdate = (list) => {
  prizeList.value = [...list]; // 创建新数组引用，确保响应式更新
};
</script>

自定义字段使用说明：

1. 字段类型：

   • input：输入框类型，支持 placeholder 属性
   • select：选择器类型，selectedValue 会在 PressMatchPrizeSet 组件内部根据奖品数据动态计算

2. 字段配置：

   • key：字段键名，必须与奖品数据中的字段名对应
   • label：字段显示的标签文本
   • type：字段类型（input 或 select）
   • selectedValue：选择器的初始值（组件内部会动态更新）
   • defaultText：选择器未选择时的提示文本

3. 事件处理：

   • field-select：点击选择器字段时触发，参数为 (index, fieldKey)
   • 需要配合 ActionSheet 或其他选择器组件使用
   • 选择后创建新对象更新数据，确保响应式触发

4. 数据同步：

   • 输入框字段：通过 PressField 的 v-model 自动同步
   • 选择器字段：通过业务层更新 prizeList 数据，组件会自动显示最新值
   • 所有字段变更都会触发 update:prizeList 事件

5. 最佳实践：

   • 使用 computed 定义 customFormFields，确保配置始终最新
   • selectedValue 设置为空字符串，让组件内部动态计算
   • 选择器回调中使用对象解构创建新对象，触发 Vue 响应式

API

Props

参数	说明	类型	默认值
customClass	自定义CSS类名	string	''
logoPic	赛事logo图片URL	string	''
createButtonText	创建按钮文字	string	'创建赛事'
saveButtonText	保存按钮文字	string	'保存修改'
isModify	是否为修改模式	boolean	false
matchName	赛事名称	string	''
curModeIndex	当前选中的模式索引	number	1
modeList	模式列表数据	ModeItem[]	[]
createList	设置项列表数据	CreateItem[]	[]
isCreateQuick	是否为快速创建模式	boolean	false
isShowMore	是否显示更多设置	boolean	false
moreText	更多设置提示文字	string	'AI直播、比赛规则、奖品等更多设置'
prizeData	单个奖品数据（兼容旧版本）	PrizeSetData	{}
prizeList	奖品列表数据	PrizeSetData[]	[]
isViewMode	是否为查看模式	boolean	false
customFormFields	自定义表单字段配置	FormFieldConfig[]	undefined

ModeItem 数据结构

interface ModeItem {
  id: string | number; // 模式ID
  title: string; // 模式标题
  description: string; // 模式描述
  hot?: boolean; // 是否显示热门标识
  label?: string; // 模式标签
  srcPic?: string; // 模式图片URL
}

CreateItem 数据结构

interface CreateItem {
  title: string; // 设置项标题
  tip?: string; // 提示文字
  desc?: string; // 描述文字
  switchSize?: string; // 开关大小
  activeColor?: string; // 开关激活颜色
  showSwitch?: boolean; // 是否显示开关
  showTitle?: boolean; // 是否显示标题
  checked?: boolean; // 开关状态
  disabled?: boolean; // 是否禁用
  aiType?: string; // AI类型描述
  type?: string; // 设置项类型
  isBasic?: boolean; // 是否为基础设置项
  isMore?: boolean; // 是否为更多设置项
}

PrizeSetData 数据结构

interface PrizeSetData {
  id?: string | number; // 奖品ID
  title: string; // 奖品标题
  name: string; // 奖品名称
  description: string; // 奖品描述
  type?: string; // 奖品类型（支持自定义）
  image: string; // 奖品图片URL
  quantity: number; // 奖品数量
  quantityType?: 'per_person' | 'total'; // 数量类型：每人/总计
  [key: string]: string | number | undefined; // 支持动态字段扩展
}

FormFieldConfig 数据结构

用于自定义奖品设置的表单字段：

interface FormFieldConfig {
  key: string; // 字段键名
  label: string; // 字段标签
  placeholder?: string; // 占位符（input类型）
  type?: 'input' | 'select'; // 字段类型
  selectedValue?: string; // 选择器回选值（select类型）
  defaultText?: string; // 选择器默认文本（select类型）
}

Events

事件名	说明	回调参数
create-game-click	创建/保存按钮点击	-
change-logo-click	logo点击事件	-
click-change-ai	AI设置点击事件	-
click-cell-item	设置项点击事件	index: number
update:curModeIndex	模式索引更新	value: number
update:isShowMore	更多设置展开状态更新	-
change-match-name	赛事名称变更	value: string
on-change-switch	开关状态变更	eventData: SwitchEventData
add-prize	添加奖品事件（由业务层创建奖品）	-
delete-prize	删除奖品事件	index: number, canDelete: boolean
prize-change	奖品数据变更	index: number
image-edit	奖品图片编辑	index: number
field-select	字段选择事件	index: number, fieldKey: string
quantity-type-change	奖品数量类型变更	index: number, type: 'per_person' | 'total'
update:prizeList	奖品列表数据更新	list: PrizeSetData[]

SwitchEventData 数据结构

interface SwitchEventData {
  item: CreateItem; // 当前设置项
  index: number; // 设置项索引
  value: boolean; // 开关状态
  title: string; // 设置项标题
  type: string; // 设置项类型
}

Slots

名称	说明	参数
foot-btn	自定义底部按钮区域	-

CSS 变量

组件提供了以下 CSS 变量，可用于自定义样式：

间距系统

CSS 变量	说明	默认值
--pmcg-head-padding-top	头部内容上间距	$spacing-md
--pmcg-upload-margin-bottom	logo上传下间距	$spacing-md
--pmcg-imgwrap-spacing	logo容器内边距	.04rem
--pmcg-swiper-spacing-tb	轮播区域上下间距	0
--pmcg-swiper-spacing-lr	轮播区域左右间距	$spacing-lg
--pmcg-play-margin-bottom	轮播标题下间距	$spacing-lg
--pmcg-swiper-card-padding-lr	轮播卡片左右内边距	$spacing-md
--pmcg-swiper-card-desc-tb	轮播卡片描述上下边距	$spacing-xs
--pmcg-hot-maring-left	热门图标左边距	$spacing-xs
--pmcg-label-margin-botttom	标签底部边距	$spacing-xs
--pmcg-label-padding-lr	标签左右内边距	$spacing-xs
--pmcg-prize-set-spacing	奖品设置内边距	$spacing-lg
--pmcg-prize-item-margin-bottom	奖品项底部间距	$spacing-lg
--pmcg-setting-margin-top	设置区域顶部间距	$spacing-lg
--pmcg-cell-spacing	设置项内间距	$spacing-lg
--pmcg-cell-icon-maring-left	设置项图标左边距	$spacing-sm
--pmcg-foot-spacing-lr	底部左右边距	.72rem
--pmcg-foot-spacing-tb	底部上下边距	$spacing-lg
--pmcg-container-padding-bottom	容器底部间距	2rem

尺寸系统

CSS 变量	说明	默认值
--pmcg-head-height	头部高度	3rem
--pmcg-upload-logo-size	logo上传尺寸	1.44rem
--pmcg-exchange-size	切换图标尺寸	.4rem
--pmcg-hot-icon-size	热门图标尺寸	.32rem
--pmcg-label-height	标签高度	.28rem
--pmcg-swiper-wrap-height	轮播外层高度	1.46rem
--pmcg-swiper-wrap-height-xiushi	轮播外层额外高度	.3rem
--pmcg-swiper-card-height	轮播卡片高度	1.24rem
--pmcg-swiper-card-active-height	轮播卡片激活高度	1.46rem
--pmcg-foot-height	底部高度	1.4rem
--pmcg-cell-more-height	更多设置高度	1.08rem
--pmcg-swiper-card-name-width	轮播卡片名称宽度	2rem
--pmcg-exchange-icon-size	切换图标尺寸	.32rem
--pmcg-name-icon-size	名称编辑图标尺寸	.28rem
--pmcg-play-title-height	赛事名称高度	$spacing-xl
--pmcg-prize-set-border	奖品设置边框宽度	.12rem
--pmcg-more-border-width	更多设置边框宽度	.12rem
--pmcg-swiper-select-width	轮播选中图标宽度	.44rem
--pmcg-swiper-select-height	轮播选中图标高度	.44rem

颜色系统

CSS 变量	说明	默认值
--pmcg-cell-icon-color-text	设置项图标颜色	$color-icon-default
--pmcg-cell-desc-color-text	设置项描述文字颜色	$color-text-secondary
--pmcg-cell-tip-color-text	设置项提示文字颜色	$color-text-invert-default
--pmcg-cell-title-color-text	设置项标题文字颜色	$color-text-primary
--pmcg-cell-more-color-text	更多文字颜色	$color-text-primary
--pmcg-cell-color-border	设置项边框颜色	$color-divider-light
--pmcg-label-color-text	标签文字颜色	$color-text-invert-default
--pmcg-label-color-border	标签边框颜色	$color-border-secondary
--pmcg-swiper-card-desc-text-color	轮播卡片描述文字颜色	$color-text-invert-dark
--pmcg-swiper-card-name-color	轮播卡片名称颜色	$color-text-primary
--pmcg-swiper-card-active-name-color	轮播卡片激活名称颜色	$color-text-brand
--pmcg-title-info-color-text	标题信息文字颜色	$color-text-invert-default
--pmcg-title-color-text	标题文字颜色	$color-text-primary
--pmcg-name-icon-color	名称编辑图标颜色	$color-text-primary
--pmcg-name-text-color	名称文字颜色	$color-text-primary
--pmcg-exchange-color-text	切换图标文字颜色	$color-text-invert-light
--pmcg-imgwrap-color-border	logo容器边框颜色	$color-divider-light
--pmcg-imgwrap-bg-color	logo容器背景色	$color-surface-default
--pmcg-exchange-bg-color	切换图标背景色	$color-surface-brand
--pmcg-foot-bg-color	底部背景色	#fff
--pmcg-prize-set-border-color	奖品设置边框颜色	$color-divider-light
--pmcg-more-border-color	更多设置边框颜色	$color-divider-light
--pmcg-swiper-card-color-border	轮播卡片边框颜色	$color-surface-brand-light2
--pmcg-swiper-card-active-color-border	轮播卡片激活边框颜色	$color-surface-brand

字体系统

CSS 变量	说明	默认值
--pmcg-font-weight-bold	加粗字体	$font-weight-bold
--pmcg-cell-more-font-size	更多文字大小	$font-size-sm
--pmcg-cell-icon-font-size	设置项图标大小	.4rem
--pmcg-cell-desc-font-size	设置项描述文字大小	$font-size-md
--pmcg-cell-tip-font-size	设置项提示文字大小	$font-size-xs
--pmcg-cell-title-font-size	设置项标题文字大小	$font-size-lg
--pmcg-label-font-size	标签文字大小	$font-size-xs
--pmcg-swiper-card-desc-font-size	轮播卡片描述文字大小	.16rem
--pmcg-swiper-card-name-font-size	轮播卡片名称字体大小	$font-size-sm
--pmcg-swiper-card-active-name-font-size	轮播卡片激活名称字体大小	$font-size-md
--pmcg-swiper-card-active-desc-font-size	轮播卡片激活描述字体大小	.18rem
--pmcg-title-info-font-size	标题信息字体大小	$font-size-md
--pmcg-title-text-font-size	标题文字字体大小	$font-size-lg
--pmcg-name-font-weight	logo名称字体粗细	$font-weight-bold

圆角系统

CSS 变量	说明	默认值
--pmcg-border-radius-circle	圆角	$border-radius-circle
--pmcg-label-border-radius	标签圆角	.04rem
--pmcg-swiper-card-radius	轮播卡片圆角	$border-radius-xs

阴影系统

CSS 变量	说明	默认值
--pmcg-foot-shadow	底部阴影	$shadow-lg
--pmcg-swiper-card-shadow	轮播卡片阴影	0 2px 2px rgba(104, 130, 201, .17)

其他

CSS 变量	说明	默认值
--pmcg-bg-pic	页面背景图片	url('...')
--pmcg-hot-icon-pic	热门图标图片	url('...')
--pmcg-swiper-select-icon	选中图标图片	url('...')

使用示例

/* 自定义创建赛事组件样式 */
:root {
  --pmcg-foot-bg-color: #f5f5f5;
  --pmcg-swiper-card-active-color-border: #1890ff;
  --pmcg-title-color-text: #333;
}

/* 或通过customClass覆盖 */
.custom-create-game {
  --pmcg-head-height: 4rem;
  --pmcg-swiper-card-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

使用场景

1. 游戏赛事创建

• 支持多种游戏模式选择
• 灵活的赛事配置选项
• 完整的奖品设置功能

2. 竞技比赛组织

• 快速创建标准化比赛
• AI辅助赛事管理
• 自定义比赛规则设置

3. 社区活动创建

• 简化的活动创建流程
• 丰富的活动配置选项
• 支持多种活动形式

注意事项

1. 数据结构：确保传入的数据结构完整，特别是modeList和createList
2. 图片资源：建议使用高质量的模式图片和logo，推荐尺寸为正方形
3. 权限控制：根据用户权限显示不同的设置选项
4. 状态管理：正确处理各种开关状态和数据同步
5. 小程序兼容：支持微信小程序virtualHost配置
6. 响应式设计：组件会根据内容自动调整布局

依赖组件

• PressMatchPrizeSet: 奖品设置组件
• PressButton: 按钮组件
• PressField: 输入框组件
• PressSwiper: 轮播组件
• PressSwiperItem: 轮播项组件
• PressSwitch: 开关组件