AIClass/src/components/aiCourse/engine/InputButtons.vue

<template>
  <div class="input-buttons-container">
    <!-- 上一个对话按钮 -->
    <div class="arrow-icon-circle" @click="handlePrev" :class="{ 'disabled': !canPrev }">
      <el-icon class="arrow-icon"><CaretLeft /></el-icon>
    </div>
    <!-- 下一个对话按钮 -->
    <div class="arrow-icon-circle" @click="handleNext" :class="{ 'disabled': !canNext }">
      <el-icon class="arrow-icon"><CaretRight /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { CaretLeft, CaretRight } from '@element-plus/icons-vue';

/**
 * InputButtons - 底部控制按钮组件
 * 包含上一句/下一句切换按钮
 */

/**
 * Props 定义
 * @prop {Boolean} canPrev - 是否可以切换到上一句
 * @prop {Boolean} canNext - 是否可以切换到下一句
 */
const props = defineProps({
  canPrev: {
    type: Boolean,
    default: true
  },
  canNext: {
    type: Boolean,
    default: true
  }
});

/**
 * Emits 定义
 * @event prev - 切换到上一句
 * @event next - 切换到下一句
 */
const emit = defineEmits(['prev', 'next']);

const handlePrev = () => {
  if (props.canPrev) emit('prev');
};

const handleNext = () => {
  if (props.canNext) emit('next');
};
</script>

<style scoped lang="scss">
@use "sass:math";

@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}

.input-buttons-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 10;
  transition: all 0.3s ease;
  gap: rpx(20);
  margin-bottom: 0;
  padding-bottom: rpx(10);
}

  .arrow-icon-circle {
    width: rpx(20);
    height: rpx(20);
    border-radius: 50%;
    border: rpx(1) solid rgba(0, 100, 192);
    background: linear-gradient(135deg, #A0DCF0, #50BEF0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover:not(.disabled) {
      transform: scale(1.1);
      box-shadow: 0 rpx(1) rpx(6) rgba(0, 0, 0, 0.3);
    }

    &:active:not(.disabled) {
      transform: scale(0.95);
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: rgba(0, 100, 192, 0.3);
      background: linear-gradient(135deg, rgba(160, 220, 240, 0.5), rgba(80, 190, 240, 0.5));
    }

    .arrow-icon {
      font-size: rpx(15);
      color: #0064BE;
    }
  }

</style>