添加掌上工厂应用

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

@@ -0,0 +1,145 @@
+<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="header-right">
+        <view class="extra" @click.stop>
+          <slot name="extra"></slot>
+        </view>
+        <view 
+          class="arrow"
+          :class="{ 'arrow-open': isOpen }"
+        >
+          <uni-icons type="arrowright" size="18" color="white" />
+        </view>
+      </view>
+    </view>
+    
+    <view 
+      class="collapse-content"
+      :style="contentStyle"
+    >
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  // 定义组件接收的属性
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    isBorder: {
+      type: Boolean,
+      default: true
+    }
+  },
+  // 响应式数据
+  data() {
+    return {
+      isOpen: false,
+      contentHeight: 0
+    };
+  },
+  // 计算属性
+  computed: {
+    contentStyle() {
+      return {
+        'max-height': this.isOpen ? '1000px' : '0',
+        'transition': `all ${this.duration}ms ease`,
+        'opacity': this.isOpen ? 1 : 0
+      };
+    }
+  },
+  // 方法定义
+  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 {
+      background-color: #f1f3f5;
+    }
+
+    .title {
+      font-size: 32rpx;
+      font-weight: 500;
+      color: white;
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 16rpx;
+    }
+
+    .extra {
+      display: flex;
+      align-items: center;
+    }
+
+    .arrow {
+      transition: transform 0.3s ease;
+      color: white;
+
+      &-open {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .collapse-content {
+    overflow: hidden;
+    padding: 0 24rpx;
+    background-color: #fff;
+    
+    // 展开动画
+    &-enter-active,
+    &-leave-active {
+      transition: all 0.3s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+      max-height: 0;
+    }
+  }
+}
+</style>
+