miniprogram-linejoy/src/components/room/host/HostSettings.vue

<template>
    <view class="game-settings">
      <nut-divider 
        content-position="center"
        :style="{ color: '#3C92FB', borderColor: '#3C92FB', padding: '0 16px', margin: '12px 0 12px 0' }"
      >
        游戏设置
      </nut-divider>
      
      <!-- 1. 主题选择 -->
      <view class="setting-item">
        <view class="setting-label">主题选择</view>
        <nut-cell 
          :desc="selectedTheme?.text || '请选择游戏主题'" 
          @click="onShowThemeSelector"
        >
          <template #link>
            <IconFont name="right" size="16"></IconFont>
          </template>
        </nut-cell>
      </view>
      
      <!-- 2. 难度选择 -->
      <view class="setting-item">
        <view class="setting-label">游戏难度</view>
        <nut-cell 
          :desc="difficultyText" 
          @click="onShowDifficultySelector"
        >
          <template #link>
            <IconFont name="right" size="16"></IconFont>
          </template>
        </nut-cell>
      </view>
      
      <!-- 3. 题目选择 (只有当主题和难度都选择后才显示) -->
      <view class="setting-item" v-if="selectedThemeId && selectedDifficulty">
        <view class="setting-label">题目选择</view>
        <nut-cell 
          :desc="selectedPuzzle?.text || '请选择游戏题目'" 
          @click="selectedThemeId ? onShowPuzzleSelector() : null"
        >
          <template #link>
            <IconFont name="right" size="16"></IconFont>
          </template>
        </nut-cell>
      </view>
    </view>
  </template>
  
  <script lang="ts">
  import { defineComponent, PropType } from 'vue'
  import { IconFont } from '@nutui/icons-vue-taro'
  import { TurtleSoupDifficulty } from '@/types/games/turtlesoup'
  import { CascaderOption } from '@/types/cascader'
  
  export default defineComponent({
    name: 'GameSettings',
    components: {
      IconFont
    },
    props: {
      selectedTheme: {
        type: Object as PropType<CascaderOption | null>,
        default: null
      },
      selectedPuzzle: {
        type: Object as PropType<CascaderOption | null>,
        default: null
      },
      selectedThemeId: {
        type: String,
        default: ''
      },
      selectedDifficulty: {
        type: String,
        default: TurtleSoupDifficulty.MEDIUM
      },
      difficultyText: {
        type: String,
        default: '中等'
      }
    },
    setup(props, { emit }) {
      const onShowThemeSelector = () => {
        emit('show-theme-selector')
      }
      
      const onShowDifficultySelector = () => {
        emit('show-difficulty-selector')
      }
      
      const onShowPuzzleSelector = () => {
        emit('show-puzzle-selector')
      }
  
      return {
        onShowThemeSelector,
        onShowDifficultySelector,
        onShowPuzzleSelector
      }
    }
  })
  </script>
  
  <style lang="scss">
  .game-settings {
    background-color: $background-color-light;
    border-radius: $border-radius-small;
    padding: $spacing-base;
    margin-bottom: $spacing-base;
    box-shadow: $shadow-light;
    
    .setting-item {
      margin-bottom: $spacing-base;
      
      .setting-label {
        font-size: $font-size-small;
        color: $text-color-secondary;
        margin-bottom: $spacing-mini;
        font-weight: $font-weight-medium;
      }
    }
  }
  </style>