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;
+}

components/ResponseIntro/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="response-intro-wrapper">
+    <text class="response-intro-text">{{ introText }}</text>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  introText: {
+    type: String,
+    default:
+      "酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍酒店介绍",
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/ResponseIntro/prompt.md

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

components/ResponseIntro/styles/index.scss

@@ -0,0 +1,11 @@
+.response-intro-wrapper {
+  padding: 4px 8px 12px 12px;
+}
+
+.response-intro-text {
+  font-weight: 500;
+  font-size: 14px;
+  color: #333333;
+  line-height: 20px;
+  text-align: justify;
+}

components/ResponseWrapper/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <view class="response-wrapper">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>

components/ResponseWrapper/styles/index.scss

@@ -0,0 +1,7 @@
+.response-wrapper {
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 4px 20px 20px 20px;
+  border: 1px solid #fff;
+  padding: 12px;
+}