MatchModifyRolePopup 角色选择

# MatchModifyRolePopup 角色选择

角色选择弹窗组件，用于展示用户的多个游戏角色并支持切换当前参赛角色。

# 引入

import PressMatchModifyRolePopup from 'press-next/press-match-modify-role-popup/press-match-modify-role-popup';

# 代码演示

# 基础用法

<template>
  <div class="demo-wrap">
    <PressButton @click="showRolePopup = true">
      选择角色
    </PressButton>
    <PressMatchModifyRolePopup
      :show="showRolePopup"
      :role-list="roleList"
      :current-account-name="accountName"
      @close="showRolePopup = false"
      @confirm="handleConfirm"
      @role-change="handleRoleChange"
      @switch-account="handleSwitchAccount"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import PressButton from 'press-ui/press-button/press-button.vue';
import PressMatchModifyRolePopup from 'press-next/press-match-modify-role-popup/press-match-modify-role-popup.vue';

const showRolePopup = ref(false);
const accountName = ref('玩家昵称（微信）');

const roleList = ref([
  {
    id: '1001',
    name: '游戏角色1',
    avatar: 'https://example.com/avatar1.jpg',
    tagList: ['iOS', 'VIP用户']
  },
  {
    id: '1002', 
    name: '游戏角色2',
    avatar: 'https://example.com/avatar2.jpg',
    tagList: ['Android', '新手玩家']
  }
]);

const handleConfirm = (selectedRole, selectedIndex) => {
  console.log('确认选择角色:', selectedRole, selectedIndex);
  showRolePopup.value = false;
};

const handleRoleChange = (selectedRole, selectedIndex) => {
  console.log('角色切换:', selectedRole, selectedIndex);
};

const handleSwitchAccount = () => {
  console.log('切换账号');
  // 这里可以跳转到账号切换页面或显示账号选择弹窗
};
</script>

# 设置默认选中角色

<template>
  <PressMatchModifyRolePopup
    :show="showPopup"
    :role-list="roleList"
    :default-role-index="1"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

# 自定义弹窗样式

<template>
  <PressMatchModifyRolePopup
    :show="showPopup"
    :role-list="roleList"
    :z-index="200"
    :is-pop-up-round="false"
    custom-class="custom-role-popup"
    @confirm="handleConfirm"
    @close="handleClose"
  />
</template>

<style>
:deep(.custom-role-popup) {
  .pm-modify-role-popup__body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: .2rem;
  }
  
  .pm-modify-role-popup__item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: .12rem;
    backdrop-filter: blur(10px);
  }
  
  .pm-modify-role-popup__name {
    color: #fff;
    font-weight: bold;
  }
}
</style>

# 自定义头部按钮

<template>
  <PressMatchModifyRolePopup
    :show="showPopup"
    :role-list="roleList"
    @confirm="handleConfirm"
    @close="handleClose"
    @switch-account="handleSwitchAccount"
  >
    <template #head-right>
      <div class="custom-switch-btn" @click="handleCustomSwitch">
        自定义切换
      </div>
    </template>
  </PressMatchModifyRolePopup>
</template>

<script setup>
const handleCustomSwitch = () => {
  console.log('自定义切换逻辑');
};
</script>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`100`
custom-class	自定义样式类	string	`''`
button-text	按钮文案	string	`'确定'`
title-text	标题文案	string	`'以下角色均可参赛'`
role-list	角色列表	RoleInfo[]	`[]`
current-account-name	当前账号名称	string	`''`
is-pop-up-round	是否圆角弹窗	boolean	`true`
default-role-index	默认选中的角色索引	number	`0`
tip-text	提示文案	string	`'使用以上任意角色参赛，成绩均会算到您的账号：'`
current-role-tag-text	当前角色标签文案	string	`'当前'`
switch-account-text	切换账号按钮文案	string	`'切换账号'`
show-switch-account	是否显示切换账号按钮	boolean	`true`

# RoleInfo 数据结构

interface RoleInfo {
  id: string;         // 角色唯一标识
  name: string;       // 角色名称
  avatar: string;     // 角色头像URL
  tagList?: string[]; // 角色标签列表，由业务方控制显示内容
}

# Events

事件名	说明	参数
close	关闭弹窗时触发	-
confirm	点击确认按钮时触发	`(selectedRole: RoleInfo, selectedIndex: number)`
role-change	切换角色时触发	`(selectedRole: RoleInfo, selectedIndex: number)`
switch-account	点击切换账号按钮时触发	-

# Slots

插槽名	说明	参数
head-right	自定义弹窗头部右侧内容	-
foot-btn	自定义底部按钮	-

# 方法

通过 ref 可以获取到组件实例并调用下述方法：

方法名	说明	参数	返回值
onClose	关闭弹窗	-	-
onSelectRole	选择角色	`index: number`	-
onSwitchAccount	切换账号	-	-

# 响应式属性

属性名	说明	类型
currentRoleIndex	当前选中的角色索引	Ref<number>

# 功能特性

# 🎯 角色切换

点击任意角色项可切换为"当前"状态
支持视觉反馈，当前角色会显示"当前"标签和特殊样式
实时触发 role-change 事件

# 📱 响应式设计

自动监听角色列表变化，智能重置选中状态
支持外部动态设置默认选中角色
兼容不同屏幕尺寸

# 🔧 灵活配置

支持自定义弹窗层级和样式
可配置是否显示圆角
支持自定义账号名称显示

# 🔄 账号管理

内置"切换账号"按钮，支持快速账号切换
按钮位于弹窗右上角，符合用户操作习惯
支持自定义按钮样式和交互效果

# 使用场景

游戏比赛报名时选择参赛角色
多角色账号的角色切换
需要展示用户多个游戏身份的场景

# 样式定制

# CSS 变量

组件提供了丰富的 CSS 变量用于样式定制，所有变量都使用 --mmrp- 前缀：

/* 间距系统 */
--mmrp-list-margin-bottom: .48rem;     /* 列表下边距 */
--mmrp-item-margin-bottom: .24rem;     /* 选项下边距 */
--mmrp-tags-gap: .1rem;                /* 标签间距 */
--mmrp-tip-margin-bottom: .34rem;      /* 提示区域下边距 */
--mmrp-body-margin: .2rem 0 .24rem;    /* 主体边距 */
--mmrp-item-padding: .36rem .4rem;     /* 选项内边距 */
--mmrp-current-tag-padding: .02rem .1rem; /* 当前标签内边距 */
--mmrp-tag-padding: .02rem .1rem;      /* 标签内边距 */
--mmrp-info-margin-left: .24rem;       /* 信息左边距 */
--mmrp-name-margin-bottom: .16rem;     /* 姓名下边距 */
--mmrp-name-max-width: 4.6rem;         /* 姓名最大宽度 */
--mmrp-content-spacing-lr: .48rem;     /* 内容左右边距调整 */
--mmrp-switch-account-btn-padding: .07rem .16rem; /* 切换账号按钮内边距 */

/* 块状系统 */
--mmrp-list-height: 4.84rem;           /* 列表高度 */
--mmrp-avatar-width: .92rem;           /* 头像宽度 */
--mmrp-avatar-height: .92rem;          /* 头像高度 */
--mmrp-close-size: .32rem;             /* 关闭按钮尺寸 */
--mmrp-btn-height: .8rem;              /* 按钮高度 */
--mmrp-current-icon-width: .5rem;      /* 当前标签宽度 */
--mmrp-current-icon-height: .5rem;     /* 当前标签尺寸高度 */
--mmrp-current-tag-width: .5rem;       /* 当前标签宽度 */
--mmrp-current-tag-height: .36rem;     /* 当前标签高度 */
--mmrp-tag-height: .34rem;             /* 标签高度 */
--mmrp-switch-account-btn-height: .56rem; /* 切换账号按钮高度 */

/* 颜色系统 */
--mmrp-overlay-bg: $color-surface-dark; /* 遮罩背景 */
--mmrp-content-bg: $color-surface-default; /* 内容背景 */
--mmrp-item-bg: $color-surface-brand-light; /* 选项背景颜色 */
--mmrp-tag-background-color: $color-surface-brand-light2; /* 标签背景颜色 */
--mmrp-name-text-color: $color-text-secondary; /* 姓名文字颜色 */
--mmrp-tag-text-color: $color-text-brand; /* 标签文字颜色 */
--mmrp-account-text-color: $color-text-brand; /* 账号文字颜色 */
--mmrp-tip-text-color: $color-text-invert-default; /* 提示文字颜色 */
--mmrp-current-tag-text-color: $color-surface-brand; /* 当前标签文字颜色 */
--mmrp-button-text-color: $color-text-invert-light; /* 按钮文字颜色 */
--mmrp-switch-account-btn-bg-color: transparent; /* 切换账号按钮背景颜色 */
--mmrp-switch-account-btn-text-color: $color-text-brand; /* 切换账号按钮文字颜色 */
--mmrp-switch-account-btn-border-color: $color-border-brand; /* 切换账号按钮边框颜色 */

/* 字体系统 */
--mmrp-tip-font-size: $font-size-sm;   /* 提示字体大小 */
--mmrp-name-font-size: $font-size-md;  /* 姓名字体大小 */
--mmrp-line-height: .36rem;            /* 行高 */
--mmrp-name-line-height: .42rem;       /* 姓名行高 */
--mmrp-current-tag-line-height: .36rem; /* 当前标签行高 */
--mmrp-tag-line-height: .34rem;        /* 标签行高 */
--mmrp-current-tag-font-size: .2rem;   /* 当前标签字体大小 */
--mmrp-tag-font-size: .2rem;           /* 标签字体大小 */
--mmrp-button-font-size: $font-size-lg; /* 按钮字体大小 */
--mmrp-font-weight-bold: $font-weight-bold; /* 加粗字重 */
--mmrp-switch-account-btn-font-size: .24rem; /* 切换账号按钮字体大小 */
--mmrp-switch-account-btn-line-height: .32rem; /* 切换账号按钮行高 */

/* 圆角系统 */
--mmrp-item-border-radius: $border-radius-xs; /* 选项圆角 */
--mmrp-avatar-border-radius: $border-radius-circle; /* 头像圆角 */
--mmrp-current-tag-border-radius: 0 0 $border-radius-xs 0; /* 当前标签圆角 */
--mmrp-switch-account-btn-border-radius: .5rem; /* 切换账号按钮圆角 */
--mmrp-switch-account-btn-font-weight: bold; /* 切换账号按钮字重 */
--mmrp-tag-margin-top: .16rem; /* 标签上边距 */

/* 其他 */
--mmrp-current-tag-image: url(https://image-1251917893.file.myqcloud.com/general-match-components/img/match-modify-role-popup/current-tag.png); /* 当前标签背景图片 */
--mmrp-background-size: 100% 100%;     /* 背景图片大小 */
--mmrp-text-align-center: center;      /* 居中对齐 */
--mmrp-switch-account-btn-border-width: .01rem; /* 切换账号按钮边框宽度 */

# 主题定制示例

/* 深色主题 */
.dark-theme {
  --mmrp-item-bg: rgba(255, 255, 255, 0.1);
  --mmrp-tag-bg: rgba(255, 255, 255, 0.2);
  --mmrp-text-primary: #ffffff;
  --mmrp-text-secondary: #cccccc;
  --mmrp-text-brand: #66b3ff;
}

/* 自定义品牌色 */
.custom-brand {
  --mmrp-text-brand: #ff6b35;
  --mmrp-tag-bg: #fff2ee;
  --mmrp-item-bg: #fef7f4;
}

/* 紧凑布局 */
.compact-layout {
  --mmrp-spacing-md: .16rem;
  --mmrp-spacing-lg: .24rem;
  --mmrp-item-padding: .24rem .32rem;
  --mmrp-avatar-size: .8rem;
}

# 设计系统集成

组件完全集成了设计系统，使用语义化变量：

颜色系统: 引用 $color-surface-*、$color-text-* 等语义变量
字体系统: 使用 $font-size-*、$font-weight-* 标准字体变量
间距系统: 遵循 $spacing-* 标准间距规范
圆角系统: 采用 $border-radius-* 统一圆角标准

# 注意事项

角色列表为空时，组件会正常显示但无可选项
当角色列表更新导致当前选中索引超出范围时，会自动重置为第一个角色
确认时会传递当前选中的角色信息，而不是固定的第一个角色
建议为角色头像设置合适的默认图片或加载失败处理
样式变量支持运行时动态修改，便于实现主题切换功能

← MatchJoinTeamPopup MatchModifyTeamEmblemDialog →