feat: 步进器组件封装

components/Stepper/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="stepper-wrapper">
+    <image
+      class="stepper-btn stepper-btn-minus"
+      src="./images/icon_minus.webp"
+      mode="aspectFill"
+      @click="decrease"
+    ></image>
+    <text class="stepper-text">{{ value }}</text>
+    <image
+      class="stepper-btn stepper-btn-plus"
+      src="./images/icon_plus.webp"
+      mode="aspectFill"
+      @click="increase"
+    ></image>
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+});
+
+// Emit
+const emit = defineEmits(["update:modelValue"]);
+
+// Local state
+const value = ref(props.modelValue);
+
+// Methods
+const decrease = () => {
+  if (value.value === 1) return;
+
+  if (value.value > props.min) {
+    value.value--;
+    emit("update:modelValue", value.value);
+  }
+};
+
+const increase = () => {
+  if (value.value < props.max) {
+    value.value++;
+    emit("update:modelValue", value.value);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/Stepper/propmt.md

@@ -0,0 +1,12 @@
+## 步进器组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、参考图片，高度还原交互设计，完成组件封装
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.stepper-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

components/Stepper/styles/index.scss

@@ -0,0 +1,23 @@
+.stepper-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.stepper-btn {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.stepper-btn-minus {
+  margin-right: 10px;
+}
+
+.stepper-btn-plus {
+  margin-left: 10px;
+}
+
+.stepper-text {
+  font-size: 16px;
+  color: #333;
+}