text-adventure-game/components/common/TextButton.vue

<template>
  <view
    class="text-button"
    :class="[
      `text-button--${type}`,
      {
        'text-button--disabled': disabled,
        'text-button--loading': loading
      }
    ]"
    @click="handleClick"
  >
    <text v-if="!loading" class="text-button__text">{{ text }}</text>
    <view v-else class="text-button__spinner"></view>
  </view>
</template>

<script setup>
const props = defineProps({
  text: { type: String, required: true },
  type: { type: String, default: 'default' },
  disabled: { type: Boolean, default: false },
  loading: { type: Boolean, default: false }
})

const emit = defineEmits(['click'])

function handleClick() {
  if (!props.disabled && !props.loading) {
    emit('click')
  }
}
</script>

<style lang="scss" scoped>
.text-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  font-weight: 500;
  overflow: hidden;
  transition: all 0.2s ease;
  user-select: none;

  // 涟漪效果
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
  }

  &:active::after {
    width: 200%;
    height: 200%;
  }

  &__text {
    position: relative;
    z-index: 1;
  }

  &--default {
    background-color: $bg-tertiary;
    color: $text-primary;
    border: 1rpx solid transparent;

    &:active {
      background-color: $bg-secondary;
      transform: scale(0.98);
    }
  }

  &--primary {
    background-color: $accent;
    color: #fff;
    border: 1rpx solid $accent;
    box-shadow: 0 4rpx 12rpx rgba($accent, 0.3);

    &:active {
      background-color: darken($accent, 10%);
      transform: scale(0.98);
      box-shadow: 0 2rpx 6rpx rgba($accent, 0.3);
    }
  }

  &--danger {
    background-color: rgba($danger, 0.15);
    color: $danger;
    border: 1rpx solid rgba($danger, 0.3);

    &:active {
      background-color: rgba($danger, 0.25);
      transform: scale(0.98);
    }
  }

  &--warning {
    background-color: rgba($warning, 0.15);
    color: $warning;
    border: 1rpx solid rgba($warning, 0.3);

    &:active {
      background-color: rgba($warning, 0.25);
      transform: scale(0.98);
    }
  }

  &--success {
    background-color: rgba($success, 0.15);
    color: $success;
    border: 1rpx solid rgba($success, 0.3);

    &:active {
      background-color: rgba($success, 0.25);
      transform: scale(0.98);
    }
  }

  &--info {
    background-color: rgba($info, 0.15);
    color: $info;
    border: 1rpx solid rgba($info, 0.3);

    &:active {
      background-color: rgba($info, 0.25);
      transform: scale(0.98);
    }
  }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.5);
  }

  &--loading {
    pointer-events: none;
  }

  &__spinner {
    width: 32rpx;
    height: 32rpx;
    border: 3rpx solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>