MoeNovaClient/pages/isLand/talkGuide.vue

<template>
  <view class="talk-guide" v-if="isShow" @click="handleClick">
    <view class="guide-content" :class="{ 'right-aligned': currentStep.position === 'right' }">
      <view class="character-container" :class="{ 'right-aligned': currentStep.position === 'right' }">
        <image 
          class="character-image" 
          :class="{ 'mirror': currentStep.isMirror }"
          :src="currentStep.characterImage" 
          mode="aspectFit" 
        />
      </view>
      <view class="dialog-box" :class="{ 'right-aligned': currentStep.position === 'right' }">
        <view class="character-name" :class="{ 'right-aligned': currentStep.position === 'right' }" v-if="currentStep.characterName">
          {{ currentStep.characterName === '我' ? playerName : currentStep.characterName }}
        </view>
        <view class="dialog-text">{{ currentStep.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TalkGuide',
  props: {
    guideData: {
      type: Array,
      default: () => []
    },
    playerName: {
      type: String,
      default: '主角'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentIndex: 0,
      isShow: false
    }
  },
  computed: {
    currentStep() {
      return this.guideData[this.currentIndex] || {}
    },
    isLastStep() {
      return this.currentIndex === this.guideData.length - 1
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newVal) {
        this.isShow = newVal;
        if (newVal) {
          this.currentIndex = 0;
        }
      }
    },
    guideData: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.currentIndex = 0;
        }
      },
      deep: true
    }
  },
  methods: {
    handleClick() {
      if (this.isLastStep) {
        this.isShow = false
        this.$emit('talk-complete')
      } else {
        this.nextStep()
      }
    },
    nextStep() {
      if (this.currentIndex < this.guideData.length - 1) {
        this.currentIndex++
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.talk-guide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .guide-content {
    position: absolute;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    &.right-aligned {
      align-items: flex-end;
    }
  }

  .character-container {
    width: 300rpx;
    height: 358rpx;
    margin-bottom: -60rpx;
    margin-left: -40rpx;
    position: relative;
    z-index: 1;

    &.right-aligned {
      margin-left: 0;
      margin-right: -40rpx;
    }

    .character-image {
      height: 100%;
      transition: transform 0.3s ease;

      &.mirror {
        transform: scaleX(-1);
      }
    }
  }

  .dialog-box {
    background: rgba(255,241,228,0.95);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    border: 4rpx solid #E3985A;    
    padding: 20rpx;
    min-height: 120rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    padding-top: 30rpx;
    width: 100%;
    box-sizing: border-box;

    &.right-aligned {
      border-radius: 28rpx 28rpx 28rpx 28rpx;
    }

    .character-name {
      font-size: 20rpx;
      font-weight: bold;
      color: #987453;
      margin-bottom: 10rpx;
      display: inline-block;
      background-color: #F8F3E9;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
      border: 2rpx solid #DEB691;
      position: absolute;
      top: -25rpx;
      left: 5%;
      z-index: 3;
      width: 156rpx;
      height: 48rpx;
      text-align: center;

      &.right-aligned {
        left: auto;
        right: 5%;
      }
    }

    .dialog-text {
      font-size: 20rpx;
      font-weight: bold;
      color: #A95F3C;
      line-height: 1.5;
      padding: 0 20rpx;
    }
  }
}
</style>