klp-mono/apps/hand-factory/components/klp-collapse-panel/klp-collapse-panel.vue

<!-- components/collapse-panel.vue -->
<template>
  <view class="collapse-panel">
    <view 
      class="collapse-header"
      @click="toggleCollapse"
    >
      <view class="title">
        <uni-icons type="gear-filled" size="18" color="white" />
        <text>{{ title }}</text>
      </view>
      <view 
        class="arrow"
        :class="{ 'arrow-open': isOpen }"
      >
        <uni-icons type="arrowright" size="18" color="white" />
      </view>
    </view>
    
    <view 
      class="collapse-content"
      :style="contentStyle"
    >
      <slot /> <!-- 插槽保留，支持自定义内容 -->
    </view>
  </view>
</template>

<script>
// Vue 2 无需导入 Vue 核心API（如ref/computed），直接使用选项式API
export default {
  // 1. 定义组件接收的props（替代 Vue3 的 defineProps）
  props: {
    title: {
      type: String,
      required: true, // 标题为必填项
      default: "" // 兜底默认值（避免无值时异常）
    },
    duration: {
      type: Number,
      default: 300 // 动画时长默认300ms
    },
    isBorder: {
      type: Boolean,
      default: true // 默认显示边框
    }
  },
  // 2. 响应式数据（替代 Vue3 的 ref）
  data() {
    return {
      isOpen: false, // 控制折叠/展开状态
      contentHeight: 0 // 内容高度（原代码未实际使用，保留以备扩展）
    };
  },
  // 3. 计算属性（替代 Vue3 的 computed 函数）
  computed: {
    // 动态计算内容区域样式（控制展开/折叠动画）
    contentStyle() {
      return {
        "max-height": this.isOpen ? "1000px" : "0", // 展开时最大高度1000px（足够容纳多数内容）
        "transition": `all ${this.duration}ms ease`, // 动画过渡：时长从props获取
        "opacity": this.isOpen ? 1 : 0 // 展开时不透明，折叠时透明
      };
    }
  },
  // 4. 方法定义（替代 Vue3 的直接函数定义）
  methods: {
    // 切换折叠/展开状态
    toggleCollapse() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style lang="scss" scoped>
.collapse-panel {
  margin: 16rpx 0;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #eee;

  // 头部样式（点击区域）
  .collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background-color: #1a73e8;
    color: white;
    transition: background-color 0.2s;

    // 点击反馈（:active状态）
    &:active {
      background-color: #f1f3f5;
    }

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: white;
      display: flex;
      align-items: center;
      gap: 12rpx; // 图标与文字间距（原代码未显式设置，补充后排版更整齐）
    }

    // 箭头样式（旋转动画）
    .arrow {
      transition: transform 0.3s ease;
      color: white;

      // 展开时箭头旋转90度
      &-open {
        transform: rotate(90deg);
      }
    }
  }

  // 内容区域样式
  .collapse-content {
    overflow: hidden;
    padding: 0 24rpx;
    background-color: #fff;
    // 原代码中过渡类（.content-enter-active等）未关联<transition>组件，保留以备后续扩展
    &-enter-active,
    &-leave-active {
      transition: all 0.3s ease;
    }
    &-enter-from,
    &-leave-to {
      opacity: 0;
      max-height: 0;
    }
  }
}
</style>