feat: 响应体组件封装

components/CommandWrapper/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <view class="command-wrapper">
+    <text class="command-text">{{ text }}</text>
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    default: "商品详情",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/CommandWrapper/propmt.md

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

components/CommandWrapper/styles/index.scss

@@ -0,0 +1,11 @@
+.command-wrapper {
+  background-color: #00a6ff;
+  border-radius: 20px 4px 20px 20px;
+  padding: 8px 24px;
+  width: max-content;
+}
+
+.command-text {
+  color: #fff;
+  font-size: 14px;
+}