添加掌上工厂应用

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

@@ -0,0 +1,136 @@
+<!-- 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: #2bf;
+    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>