diff --git a/src/components/CommandWrapper/propmt.md b/src/components/CommandWrapper/propmt.md
deleted file mode 100644
index ad076dc..0000000
--- a/src/components/CommandWrapper/propmt.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## 消息体指令组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片高度还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.command-wrapper
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/CreateServiceOrder/prompt.md b/src/components/CreateServiceOrder/prompt.md
deleted file mode 100644
index dbe2dd0..0000000
--- a/src/components/CreateServiceOrder/prompt.md
+++ /dev/null
@@ -1,25 +0,0 @@
-## 消息体组件信息
-
-组件名称：消息体创建服务工单
-服务名称：加一台麻将机
-房间号：302
-服务时间：2025-09-12 12:00
-联系房客：
-联系电话：
-立即呼叫按钮
-
-呼叫成功之后 
-1、呼叫按钮变为两个按钮 查看工单和已完成，见图中的布局
-2、联系人和联系电话，仅展示，不能编辑
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片高度还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.create-service-order
-3、可以使用 uniapp 内置的组件
-4、联系房客/联系电话，需要用户自己填写
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/FormCard/README.md b/src/components/FormCard/README.md
deleted file mode 100644
index a4bf1f2..0000000
--- a/src/components/FormCard/README.md
+++ /dev/null
@@ -1,473 +0,0 @@
-# FormCard 表单卡片组件
-
-一个功能完整的表单卡片组件，支持姓名和手机号输入，具备数据验证和双向绑定功能。
-
-## 功能特性
-
-- 📝 **双向绑定**：支持 v-model 双向数据绑定
-- ✅ **数据验证**：内置手机号格式验证
-- 🎨 **自定义标题**：可配置游客标题文本
-- 🗑️ **删除功能**：支持删除操作，可配置显示/隐藏
-- 💫 **交互反馈**：输入框聚焦效果和错误状态提示
-- 📱 **响应式设计**：适配不同屏幕尺寸
-- 🎯 **事件支持**：完整的事件系统
-- ⚡ **性能优化**：使用计算属性优化渲染
-
-## 基础用法
-
-### 默认使用
-
-```vue
-<template>
-  <FormCard
-    :form="form"
-    @update:name="form.name = $event"
-    @update:phone="form.phone = $event"
-    @delete="handleDelete"
-  />
-</template>
-
-<script setup>
-import { reactive } from "vue";
-import FormCard from "@/components/FormCard/index.vue";
-
-const form = reactive({
-  name: "",
-  phone: "",
-});
-
-const handleDelete = () => {
-  console.log("删除表单");
-};
-</script>
-```
-
-### 自定义标题
-
-```vue
-<template>
-  <FormCard
-    :form="form"
-    title="成人票"
-    @update:name="form.name = $event"
-    @update:phone="form.phone = $event"
-    @delete="handleDelete"
-  />
-</template>
-```
-
-### 隐藏删除图标
-
-```vue
-<template>
-  <FormCard
-    :form="form"
-    title="联系人信息"
-    :show-delete-icon="false"
-    @update:name="form.name = $event"
-    @update:phone="form.phone = $event"
-  />
-</template>
-```
-
-### 多个表单卡片
-
-```vue
-<template>
-  <div>
-    <FormCard
-      v-for="(item, index) in formList"
-      :key="index"
-      :form="item"
-      :title="`游客${index + 1}`"
-      @update:name="item.name = $event"
-      @update:phone="item.phone = $event"
-      @delete="handleDeleteForm(index)"
-    />
-    <button @click="addForm">添加游客</button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const formList = ref([
-  { name: "", phone: "" },
-  { name: "", phone: "" },
-]);
-
-const handleDeleteForm = (index) => {
-  formList.value.splice(index, 1);
-};
-
-const addForm = () => {
-  formList.value.push({ name: "", phone: "" });
-};
-</script>
-```
-
-### 表单验证
-
-```vue
-<template>
-  <FormCard
-    ref="formCardRef"
-    :form="form"
-    title="验证示例"
-    @update:name="form.name = $event"
-    @update:phone="form.phone = $event"
-  />
-  <button @click="validateForm">验证表单</button>
-</template>
-
-<script setup>
-import { ref, reactive } from "vue";
-
-const formCardRef = ref();
-const form = reactive({
-  name: "",
-  phone: "",
-});
-
-const validateForm = () => {
-  // 手动触发验证
-  formCardRef.value.validateName();
-  formCardRef.value.validatePhone();
-
-  // 或者使用工具函数检查
-  const nameError = formCardRef.value.getNameError(form.name);
-  const phoneError = formCardRef.value.getPhoneError(form.phone);
-
-  if (!nameError && !phoneError) {
-    console.log("表单验证通过");
-  }
-};
-</script>
-```
-
-## API 文档
-
-### Props
-
-| 参数           | 类型    | 默认值                    | 说明                                  |
-| -------------- | ------- | ------------------------- | ------------------------------------- |
-| title          | String  | "游客1"                   | 表单卡片标题                          |
-| form           | Object  | `{ name: '', phone: '' }` | 表单数据对象，包含 name 和 phone 字段 |
-| form.name      | String  | ""                        | 姓名值                                |
-| form.phone     | String  | ""                        | 手机号值                              |
-| showDeleteIcon | Boolean | true                      | 是否显示删除图标                      |
-
-### Events
-
-| 事件名       | 参数            | 说明                                   |
-| ------------ | --------------- | -------------------------------------- |
-| update:name  | (value: string) | 姓名值更新时触发，自动去除首尾空格     |
-| update:phone | (value: string) | 手机号值更新时触发，自动过滤非数字字符 |
-| delete       | -               | 点击删除图标时触发                     |
-
-### Methods (通过 ref 调用)
-
-| 方法名        | 参数            | 返回值 | 说明                   |
-| ------------- | --------------- | ------ | ---------------------- |
-| validateName  | -               | void   | 手动触发姓名验证       |
-| validatePhone | -               | void   | 手动触发手机号验证     |
-| getNameError  | (name: string)  | string | 获取姓名验证错误信息   |
-| getPhoneError | (phone: string) | string | 获取手机号验证错误信息 |
-
-### 数据验证
-
-组件内置完整的表单验证：
-
-- **姓名验证**：不能为空，自动去除首尾空格
-- **手机号验证**：支持中国大陆手机号格式（1开头，第二位为3-9，总长度11位）
-- **失焦验证**：只在输入框失去焦点时进行验证，避免输入干扰
-- **错误提示**：验证失败时显示错误信息，带有淡入动画效果
-- **视觉反馈**：输入框边框变红提示错误状态
-- **自动过滤**：手机号输入时自动过滤非数字字符
-
-## 样式定制
-
-### CSS 变量系统
-
-组件使用 CSS 变量系统，支持主题定制：
-
-```scss
-:root {
-  --form-primary-color: #00a6ff; // 主色调
-  --form-error-color: #ff4d4f; // 错误色
-  --form-text-color: #333; // 文本色
-  --form-label-color: #86909c; // 标签色
-  --form-border-color: #e5e8ef; // 边框色
-  --form-input-border-color: #ddd; // 输入框边框色
-  --form-bg-color: #fff; // 背景色
-  --form-header-bg-color: rgba(25, 144, 255, 0.06); // 头部背景色
-  --form-border-radius: 8px; // 圆角大小
-  --form-transition: all 0.2s ease; // 过渡动画
-}
-```
-
-### 主要样式类
-
-```scss
-.form-wrapper {
-  // 表单容器，支持悬停效果和阴影
-}
-
-.form-header {
-  // 表单头部，包含标题和删除按钮
-}
-
-.form-title {
-  // 标题文本，支持文本溢出省略
-}
-
-.form-item {
-  // 表单项容器，支持分隔线
-}
-
-.form-input {
-  // 输入框，支持聚焦和错误状态
-}
-
-.form-error {
-  // 错误信息，带有淡入动画
-}
-```
-
-### 响应式设计
-
-组件内置响应式支持，在小屏幕设备上自动调整：
-
-- 320px 以下设备优化布局
-- 自动调整字体大小和间距
-- 保持良好的可用性
-
-### 自定义主题
-
-通过覆盖 CSS 变量来自定义主题：
-
-```scss
-// 自定义主题色
-:root {
-  --form-primary-color: #your-primary-color;
-  --form-error-color: #your-error-color;
-  --form-border-radius: 12px;
-}
-
-// 或者针对特定组件
-.your-custom-form {
-  --form-primary-color: #your-primary-color;
-  --form-header-bg-color: rgba(your-color, 0.1);
-}
-```
-
-## 高级用法
-
-### 表单验证集成
-
-```vue
-<template>
-  <FormCard
-    ref="formCardRef"
-    :form="form"
-    title="游客信息"
-    @update:name="form.name = $event"
-    @update:phone="form.phone = $event"
-    @delete="handleDelete"
-  />
-  <button @click="validateForm">提交</button>
-</template>
-
-<script setup>
-import { reactive, ref } from "vue";
-
-const formCardRef = ref();
-const form = reactive({
-  name: "",
-  phone: "",
-});
-
-const validateForm = () => {
-  // 使用组件内置的验证方法
-  const nameError = formCardRef.value.getNameError(form.name);
-  const phoneError = formCardRef.value.getPhoneError(form.phone);
-
-  if (nameError) {
-    uni.showToast({
-      title: nameError,
-      icon: "none",
-    });
-    return;
-  }
-
-  if (phoneError) {
-    uni.showToast({
-      title: phoneError,
-      icon: "none",
-    });
-    return;
-  }
-
-  // 提交表单
-  console.log("表单数据:", form);
-};
-</script>
-```
-
-### 动态表单管理
-
-```vue
-<template>
-  <div>
-    <FormCard
-      v-for="(item, index) in passengers"
-      :key="item.id"
-      :form="item"
-      @update:name="item.name = $event"
-      @update:phone="item.phone = $event"
-      :title="getPassengerTitle(item.type, index)"
-      :show-delete-icon="passengers.length > 1"
-      @delete="removePassenger(index)"
-    />
-
-    <div class="action-buttons">
-      <button @click="addAdult">添加成人</button>
-      <button @click="addChild">添加儿童</button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const passengers = ref([{ id: 1, type: "adult", name: "", phone: "" }]);
-
-let nextId = 2;
-
-const getPassengerTitle = (type, index) => {
-  return type === "adult" ? `成人${index + 1}` : `儿童${index + 1}`;
-};
-
-const addAdult = () => {
-  passengers.value.push({
-    id: nextId++,
-    type: "adult",
-    name: "",
-    phone: "",
-  });
-};
-
-const addChild = () => {
-  passengers.value.push({
-    id: nextId++,
-    type: "child",
-    name: "",
-    phone: "",
-  });
-};
-
-const removePassenger = (index) => {
-  if (passengers.value.length > 1) {
-    passengers.value.splice(index, 1);
-  }
-};
-</script>
-```
-
-## 注意事项
-
-1. **数据传递**：使用 `:form` 对象传递数据，包含 `name` 和 `phone` 字段
-2. **双向绑定**：通过 `@update:name` 和 `@update:phone` 事件进行双向绑定
-3. **验证机制**：只在失去焦点时进行验证，避免输入干扰
-4. **手机号验证**：仅支持中国大陆手机号格式验证（1开头，第二位3-9，总长度11位）
-5. **自动处理**：手机号自动过滤非数字字符，姓名自动去除首尾空格
-6. **删除功能**：删除事件需要父组件处理具体逻辑
-7. **方法调用**：通过 `ref` 可调用组件内部的验证方法
-8. **兼容性**：支持微信小程序、H5、App等平台
-
-## 更新日志
-
-### v1.3.0 (2024-12-19)
-
-**性能与可维护性全面优化**
-
-- 🚀 **性能优化**：提取常量定义，优化计算属性逻辑
-- 🛠️ **代码重构**：添加完整的 JSDoc 注释和类型定义
-- 🎨 **样式升级**：使用 CSS 变量系统，支持主题定制
-- ✨ **功能增强**：手机号自动过滤非数字字符，姓名自动去除空格
-- 🎭 **UI 改进**：新增悬停效果、错误信息动画和阴影效果
-- 📱 **响应式设计**：优化小屏幕设备适配
-- 🔧 **开发体验**：添加 defineExpose 暴露验证方法，便于测试
-- 📝 **文档完善**：更新演示和使用说明
-
-### v1.2.3 (2024-12-19)
-
-**优化验证行为**
-
-- 🎨 优化验证行为，移除实时验证
-- ✨ 姓名和手机号只在失去焦点时进行验证
-- 🔧 移除不必要的 watch 监听器
-- 📝 更新文档和演示说明
-- ⚡ 提升组件性能和用户体验
-
-### v1.2.2 (2024-12-19)
-
-**新增姓名验证功能**
-
-- ✨ 新增姓名非空验证功能
-- 👤 姓名为空时显示"请输入姓名"提示
-- 🔄 支持姓名实时验证，输入内容时错误信息自动隐藏
-- 🎯 完善表单验证体系，提升数据完整性
-- 💫 优化用户体验，提供友好的输入提示
-
-### v1.2.1 (2024-12-19)
-
-**优化手机号验证功能**
-
-- 🐛 修复validatePhone方法中props引用错误的问题
-- ✨ 新增手机号实时验证功能
-- 🔄 输入正确手机号时错误信息自动隐藏
-- 📱 优化用户输入体验，提供即时反馈
-- 🎯 完善demo页面，增加功能说明
-
-### v1.2.0 (2024-12-19)
-
-**新增删除功能**
-
-- ✨ 支持删除表单卡片
-- 🎯 可配置删除图标显示/隐藏
-- 🔄 完善事件系统，支持delete事件
-- 💫 优化用户交互体验
-
-### v2.0.0
-
-- ✨ 重构组件，支持 props 传值和双向绑定
-- ✨ 新增 `title` 属性，支持自定义标题
-- ✨ 新增 `showDeleteIcon` 属性，控制删除图标显示
-- ✨ 新增完整的事件系统（update:name, update:phone, delete）
-- 🎨 优化样式，新增错误状态和交互效果
-- 🔧 改进手机号验证逻辑
-- 📝 新增完整的文档和演示示例
-
-### v1.0.0
-
-- 🎉 初始版本发布
-- ✨ 基础表单功能
-- ✨ 手机号验证
-- ✨ 基础样式
-
-## 技术栈
-
-- Vue 3 Composition API
-- SCSS
-- uni-app
-
-## 浏览器支持
-
-- 微信小程序
-- H5 (Chrome, Firefox, Safari, Edge)
-- App (iOS, Android)
-
-## 许可证
-
-MIT License
diff --git a/src/components/FormCard/demo.vue b/src/components/FormCard/demo.vue
deleted file mode 100644
index ff80f43..0000000
--- a/src/components/FormCard/demo.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="demo-title">FormCard 表单组件演示</div>
-
-    <div class="demo-description">
-      <text>✨ 支持姓名和手机号输入，自动过滤非数字字符</text>
-      <text>👤 姓名失去焦点时验证，自动去除首尾空格</text>
-      <text>📱 手机号失去焦点时验证，支持中国大陆手机号格式</text>
-      <text>🎨 优化UI设计，支持悬停效果和动画</text>
-      <text>🗑️ 支持删除操作（可配置显示/隐藏）</text>
-      <text>📱 响应式设计，适配小屏幕设备</text>
-    </div>
-
-    <!-- 示例1: 基础用法 -->
-    <div class="demo-section">
-      <div class="section-title">示例1: 基础用法</div>
-      <FormCard :form="form1" title="游客1" @update:name="form1.name = $event" @update:phone="form1.phone = $event"
-        @delete="handleDelete1" />
-      <div class="form-data">
-        <text>姓名: {{ form1.name }}</text>
-        <text>手机号: {{ form1.phone }}</text>
-      </div>
-    </div>
-
-    <!-- 示例2: 自定义标题 -->
-    <div class="demo-section">
-      <div class="section-title">示例2: 自定义标题</div>
-      <FormCard :form="form2" title="成人票" @update:name="form2.name = $event" @update:phone="form2.phone = $event"
-        @delete="handleDelete2" />
-      <div class="form-data">
-        <text>姓名: {{ form2.name }}</text>
-        <text>手机号: {{ form2.phone }}</text>
-      </div>
-    </div>
-
-    <!-- 示例3: 隐藏删除图标 -->
-    <div class="demo-section">
-      <div class="section-title">示例3: 隐藏删除图标</div>
-      <FormCard :form="form3" title="联系人信息" :show-delete-icon="false" @update:name="form3.name = $event"
-        @update:phone="form3.phone = $event" />
-      <div class="form-data">
-        <text>姓名: {{ form3.name }}</text>
-        <text>手机号: {{ form3.phone }}</text>
-      </div>
-    </div>
-
-    <!-- 示例4: 多个表单卡片 -->
-    <div class="demo-section">
-      <div class="section-title">示例4: 多个表单卡片</div>
-      <FormCard v-for="(item, index) in formList" :key="index" :form="item" :title="`游客${index + 1}`"
-        @update:name="item.name = $event" @update:phone="item.phone = $event" @delete="handleDeleteForm(index)" />
-      <button class="add-btn" @click="addForm">添加游客</button>
-
-      <div class="form-list-data">
-        <div class="list-title">表单数据:</div>
-        <div v-for="(item, index) in formList" :key="index" class="list-item">
-          <text>游客{{ index + 1 }}: {{ item.name }} - {{ item.phone }}</text>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from "vue";
-import FormCard from "./index.vue";
-
-// 单个表单数据
-const form1 = reactive({
-  name: "",
-  phone: "",
-});
-
-const form2 = reactive({
-  name: "张三",
-  phone: "13800138000",
-});
-
-const form3 = reactive({
-  name: "",
-  phone: "",
-});
-
-// 多个表单数据
-const formList = ref([
-  { name: "", phone: "" },
-  { name: "", phone: "" },
-]);
-
-// 事件处理
-const handleDelete1 = () => {
-  console.log("删除表单1");
-  uni.showToast({
-    title: "删除表单1",
-    icon: "none",
-  });
-};
-
-const handleDelete2 = () => {
-  console.log("删除表单2");
-  uni.showToast({
-    title: "删除表单2",
-    icon: "none",
-  });
-};
-
-const handleDeleteForm = (index) => {
-  console.log(`删除表单${index + 1}`);
-  formList.value.splice(index, 1);
-  uni.showToast({
-    title: `删除游客${index + 1}`,
-    icon: "none",
-  });
-};
-
-const addForm = () => {
-  formList.value.push({ name: "", phone: "" });
-  uni.showToast({
-    title: "添加游客成功",
-    icon: "none",
-  });
-};
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20rpx;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.demo-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 20rpx;
-  color: #333;
-}
-
-.demo-description {
-  margin-bottom: 40rpx;
-  padding: 20rpx;
-  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-  border-radius: 12rpx;
-  border: 1px solid #bae6fd;
-
-  text {
-    display: block;
-    font-size: 26rpx;
-    color: #0369a1;
-    margin-bottom: 8rpx;
-    line-height: 1.5;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.demo-section {
-  margin-bottom: 60rpx;
-}
-
-.section-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  margin-bottom: 20rpx;
-  color: #333;
-  border-left: 6rpx solid #0CCD58;
-  padding-left: 16rpx;
-}
-
-.form-data {
-  margin-top: 20rpx;
-  padding: 20rpx;
-  background: #fff;
-  border-radius: 8rpx;
-  border: 1px solid #e5e8ef;
-
-  text {
-    display: block;
-    font-size: 24rpx;
-    color: #666;
-    margin-bottom: 8rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.add-btn {
-  width: 100%;
-  height: 80rpx;
-  background: #0CCD58;
-  color: #fff;
-  border: none;
-  border-radius: 8rpx;
-  font-size: 28rpx;
-  margin-top: 20rpx;
-
-  &:active {
-    background: #0056b3;
-  }
-}
-
-.form-list-data {
-  margin-top: 30rpx;
-  padding: 20rpx;
-  background: #fff;
-  border-radius: 8rpx;
-  border: 1px solid #e5e8ef;
-}
-
-.list-title {
-  font-size: 26rpx;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.list-item {
-  margin-bottom: 8rpx;
-
-  text {
-    font-size: 24rpx;
-    color: #666;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/src/components/FormCard/propmt.md b/src/components/FormCard/propmt.md
deleted file mode 100644
index ffc14ac..0000000
--- a/src/components/FormCard/propmt.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## 表单组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、参考图片，高度还原交互设计，完成组件封装
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.form-wrapper
-3、可以使用 uniapp 内置的组件
-4、姓名、手机号，需要用户自己填写
-5、验证手机号格式是否正确
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ImageSwiper/README.md b/src/components/ImageSwiper/README.md
deleted file mode 100644
index 36f5b45..0000000
--- a/src/components/ImageSwiper/README.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# ImageSwiper 轮播图组件
-
-一个功能丰富的轮播图组件，支持自定义圆角、缩略图导航和图片描述。
-
-## 功能特性
-
-- 🎨 **可配置圆角**：支持数字(px)或字符串形式的圆角设置
-- 📏 **可配置高度**：支持数字(px)或字符串形式的高度设置
-- 🖼️ **缩略图导航**：底部缩略图快速切换，支持左右滑动
-- 👁️ **缩略图控制**：可配置显示或隐藏缩略图
-- 📱 **响应式设计**：适配不同屏幕尺寸
-- 🎯 **自定义数据**：支持传入自定义图片数据
-- 📊 **进度指示器**：显示当前图片位置
-- 🎭 **选中状态**：缩略图选中时高亮显示，带缩放动画
-- 🔄 **自动滚动**：缩略图自动滚动到可视区域
-- ⚡ **性能优化**：使用计算属性优化渲染
-
-## 基础用法
-
-### 默认使用
-
-```vue
-<template>
-  <ImageSwiper />
-</template>
-
-<script setup>
-import ImageSwiper from "@/components/ImageSwiper/index.vue";
-</script>
-```
-
-### 自定义圆角
-
-```vue
-<template>
-  <!-- 数字形式 (px) -->
-  <ImageSwiper :border-radius="12" />
-
-  <!-- 字符串形式 -->
-  <ImageSwiper border-radius="1rem" />
-
-  <!-- 无圆角 -->
-  <ImageSwiper :border-radius="0" />
-</template>
-```
-
-### 自定义高度
-
-```vue
-<template>
-  <!-- 数字形式 (px) -->
-  <ImageSwiper :height="300" />
-
-  <!-- 字符串形式 -->
-  <ImageSwiper height="50vh" />
-
-  <!-- 小高度轮播图 -->
-  <ImageSwiper :height="120" />
-</template>
-```
-
-### 隐藏缩略图
-
-```vue
-<template>
-  <!-- 隐藏缩略图，只显示主轮播图 -->
-  <ImageSwiper :show-thumbnails="false" />
-
-  <!-- 结合其他属性使用 -->
-  <ImageSwiper :height="250" :border-radius="15" :show-thumbnails="false" />
-</template>
-```
-
-### 自定义图片数据
-
-```vue
-<template>
-  <ImageSwiper :border-radius="15" :images="customImages" />
-</template>
-
-<script setup>
-import { ref } from "vue";
-import ImageSwiper from "@/components/ImageSwiper/index.vue";
-
-const customImages = ref([
-  {
-    photoUrl: "https://example.com/image1.jpg",
-    photoName: "图片描述1",
-  },
-  {
-    photoUrl: "https://example.com/image2.jpg",
-    photoName: "图片描述2",
-  },
-]);
-</script>
-```
-
-### 缩略图滑动功能
-
-组件支持缩略图左右滑动，当图片数量较多时，缩略图会自动滚动到可视区域：
-
-```vue
-<template>
-  <!-- 多图片展示，缩略图支持滑动 -->
-  <ImageSwiper :images="manyImages" />
-</template>
-
-<script setup>
-const manyImages = ref([
-  { photoUrl: "https://example.com/1.jpg", photoName: "图片1" },
-  { photoUrl: "https://example.com/2.jpg", photoName: "图片2" },
-  { photoUrl: "https://example.com/3.jpg", photoName: "图片3" },
-  // ... 更多图片
-  { photoUrl: "https://example.com/10.jpg", photoName: "图片10" },
-]);
-</script>
-```
-
-## API 文档
-
-### Props
-
-| 参数           | 类型             | 默认值 | 说明                             |
-| -------------- | ---------------- | ------ | -------------------------------- |
-| borderRadius   | Number \| String | 8      | 轮播图圆角大小，数字时单位为px   |
-| height         | Number \| String | 200    | 轮播图高度，数字时单位为px       |
-| showThumbnails | Boolean          | true   | 是否显示缩略图                   |
-| images         | Array            | []     | 图片数据数组，为空时使用默认数据 |
-
-### images 数组结构
-
-```typescript
-interface ImageItem {
-  photoUrl: string; // 图片URL
-  photoName: string; // 图片名称/描述
-}
-```
-
-## 样式定制
-
-### 圆角配置示例
-
-```vue
-<!-- 小圆角 -->
-<ImageSwiper :border-radius="4" />
-
-<!-- 中等圆角 -->
-<ImageSwiper :border-radius="12" />
-
-<!-- 大圆角 -->
-<ImageSwiper :border-radius="24" />
-
-<!-- 使用rem单位 -->
-<ImageSwiper border-radius="0.5rem" />
-
-<!-- 使用百分比 -->
-<ImageSwiper border-radius="10%" />
-```
-
-### 动态圆角控制
-
-```vue
-<template>
-  <div>
-    <slider :value="radius" :min="0" :max="50" @change="handleChange" />
-    <ImageSwiper :border-radius="radius" />
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const radius = ref(8);
-
-const handleChange = (e) => {
-  radius.value = e.detail.value;
-};
-</script>
-```
-
-## 高级用法
-
-### 响应式配置
-
-```vue
-<template>
-  <ImageSwiper
-    :border-radius="responsiveRadius"
-    :height="responsiveHeight"
-    :show-thumbnails="showThumbnails"
-  />
-</template>
-
-<script setup>
-import { computed, ref } from "vue";
-
-// 根据屏幕宽度动态调整圆角和高度
-const responsiveRadius = computed(() => {
-  const screenWidth = uni.getSystemInfoSync().screenWidth;
-  return screenWidth > 750 ? 16 : 8;
-});
-
-const responsiveHeight = computed(() => {
-  const screenWidth = uni.getSystemInfoSync().screenWidth;
-  return screenWidth > 750 ? 300 : 200;
-});
-
-// 动态控制缩略图显示
-const showThumbnails = ref(true);
-</script>
-```
-
-### 动态控制示例
-
-```vue
-<template>
-  <div>
-    <!-- 控制面板 -->
-    <div class="control-panel">
-      <text>高度: {{ dynamicHeight }}px</text>
-      <slider
-        :value="dynamicHeight"
-        :min="100"
-        :max="400"
-        @change="handleHeightChange"
-      />
-
-      <div class="checkbox-wrapper">
-        <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
-        <text>显示缩略图</text>
-      </div>
-    </div>
-
-    <!-- 轮播图组件 -->
-    <ImageSwiper
-      :height="dynamicHeight"
-      :show-thumbnails="showThumbnails"
-      :border-radius="10"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const dynamicHeight = ref(200);
-const showThumbnails = ref(true);
-
-const handleHeightChange = (e) => {
-  dynamicHeight.value = e.detail.value;
-};
-
-const handleThumbnailToggle = (e) => {
-  showThumbnails.value = e.detail.value;
-};
-</script>
-```
-
-### 主题适配
-
-```vue
-<template>
-  <ImageSwiper :border-radius="themeRadius" />
-</template>
-
-<script setup>
-import { computed } from "vue";
-
-// 根据主题调整圆角
-const isDarkMode = ref(false);
-const themeRadius = computed(() => {
-  return isDarkMode.value ? 12 : 8;
-});
-</script>
-```
-
-## 注意事项
-
-1. **圆角单位**：数字类型自动添加px单位，字符串类型直接使用
-2. **高度单位**：数字类型自动添加px单位，字符串类型直接使用（支持vh、rem等）
-3. **缩略图显示**：当设置 `showThumbnails` 为 `false` 时，缩略图完全隐藏
-4. **图片比例**：建议使用相同比例的图片以获得最佳显示效果
-5. **性能优化**：大量图片时建议使用懒加载
-6. **兼容性**：支持微信小程序、H5、App等平台
-
-## 更新日志
-
-### v1.3.0
-
-- ✨ 新增 `height` 属性，支持自定义轮播图高度
-- ✨ 新增 `showThumbnails` 属性，支持隐藏缩略图
-- 🎨 优化样式系统，移除硬编码高度
-- 🔧 改进计算属性，支持动态高度和缩略图控制
-- 📝 更新文档和演示示例，新增多个高级用法示例
-- 🎯 增强组件灵活性，适应更多使用场景
-
-### v1.2.0
-
-- ✨ 新增缩略图左右滑动功能
-- ✨ 新增缩略图选中状态高亮显示
-- ✨ 新增缩略图自动滚动到可视区域
-- 🎨 优化缩略图动画效果和交互体验
-- 🔧 改进主轮播图与缩略图的联动机制
-- 📝 更新文档和演示示例
-
-### v1.1.0
-
-- ✨ 新增 `borderRadius` 属性，支持自定义圆角
-- ✨ 新增 `images` 属性，支持自定义图片数据
-- 🔧 优化组件结构，使用计算属性提升性能
-- 📝 完善文档和示例
-
-### v1.0.0
-
-- 🎉 初始版本发布
-- ✨ 基础轮播图功能
-- ✨ 缩略图导航
-- ✨ 进度指示器
-
-## 技术栈
-
-- Vue 3 Composition API
-- SCSS
-- uni-app
-
-## 浏览器支持
-
-- 微信小程序
-- H5 (Chrome, Firefox, Safari, Edge)
-- App (iOS, Android)
-
-## 许可证
-
-MIT License
diff --git a/src/components/ImageSwiper/demo.vue b/src/components/ImageSwiper/demo.vue
deleted file mode 100644
index a0461cf..0000000
--- a/src/components/ImageSwiper/demo.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <div class="demo-container">
-    <div class="demo-title">ImageSwiper 轮播图组件演示</div>
-
-    <!-- 示例1: 默认圆角 -->
-    <div class="demo-section">
-      <div class="section-title">示例1: 默认圆角 (8px)</div>
-      <imgSwiper />
-    </div>
-
-    <!-- 示例2: 无圆角 -->
-    <div class="demo-section">
-      <div class="section-title">示例2: 无圆角 (0px)</div>
-      <imgSwiper :border-radius="0" />
-    </div>
-
-    <!-- 示例3: 大圆角 -->
-    <div class="demo-section">
-      <div class="section-title">示例3: 大圆角 (20px)</div>
-      <imgSwiper :border-radius="20" />
-    </div>
-
-    <!-- 示例4: 字符串圆角 -->
-    <div class="demo-section">
-      <div class="section-title">示例4: 字符串圆角 (1rem)</div>
-      <imgSwiper border-radius="1rem" />
-    </div>
-
-    <!-- 示例5: 自定义图片数据 -->
-    <div class="demo-section">
-      <div class="section-title">示例5: 自定义图片数据 + 圆角15px</div>
-      <imgSwiper :border-radius="15" :images="customImages" />
-    </div>
-
-    <!-- 示例7: 多图片测试滑动 -->
-    <div class="demo-section">
-      <div class="section-title">示例7: 多图片测试缩略图滑动</div>
-      <imgSwiper :border-radius="10" :images="manyImages" />
-    </div>
-
-    <!-- 示例6: 动态圆角控制 -->
-    <div class="demo-section">
-      <div class="section-title">示例6: 动态圆角控制</div>
-      <div class="control-panel">
-        <text>圆角大小: {{ dynamicRadius }}px</text>
-        <slider :value="dynamicRadius" :min="0" :max="50" @change="handleRadiusChange" activeColor="#007AFF" />
-      </div>
-      <imgSwiper :border-radius="dynamicRadius" />
-    </div>
-
-    <!-- 示例8: 自定义高度 -->
-    <div class="demo-section">
-      <div class="section-title">示例8: 自定义高度 (300px)</div>
-      <imgSwiper :height="300" :border-radius="12" />
-    </div>
-
-    <!-- 示例9: 小高度轮播图 -->
-    <div class="demo-section">
-      <div class="section-title">示例9: 小高度轮播图 (120px)</div>
-      <imgSwiper :height="120" :border-radius="8" />
-    </div>
-
-    <!-- 示例10: 隐藏缩略图 -->
-    <div class="demo-section">
-      <div class="section-title">示例10: 隐藏缩略图</div>
-      <imgSwiper :show-thumbnails="false" :border-radius="15" />
-    </div>
-
-    <!-- 示例11: 动态高度和缩略图控制 -->
-    <div class="demo-section">
-      <div class="section-title">示例11: 动态高度和缩略图控制</div>
-      <div class="control-panel">
-        <text>高度: {{ dynamicHeight }}px</text>
-        <slider :value="dynamicHeight" :min="100" :max="400" @change="handleHeightChange" activeColor="#007AFF" />
-        <div class="checkbox-wrapper">
-          <checkbox :checked="showThumbnails" @change="handleThumbnailToggle" />
-          <span class="checkbox-label">显示缩略图</span>
-        </div>
-      </div>
-      <imgSwiper :height="dynamicHeight" :show-thumbnails="showThumbnails" :border-radius="10" />
-    </div>
-
-    <!-- 示例12: 字符串高度 -->
-    <div class="demo-section">
-      <div class="section-title">示例12: 字符串高度 (50vh)</div>
-      <imgSwiper height="50vh" :border-radius="20" :show-thumbnails="false" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import ImageSwiper from "./index.vue";
-
-// 动态圆角控制
-const dynamicRadius = ref(8);
-
-// 动态高度控制
-const dynamicHeight = ref(200);
-
-// 缩略图显示控制
-const showThumbnails = ref(true);
-
-// 自定义图片数据
-const customImages = ref([
-  {
-    photoUrl:
-      "https://fastly.picsum.photos/id/100/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
-    photoName: "自定义图片1",
-  },
-  {
-    photoUrl:
-      "https://fastly.picsum.photos/id/200/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
-    photoName: "自定义图片2",
-  },
-  {
-    photoUrl:
-      "https://fastly.picsum.photos/id/300/654/400.jpg?hmac=lYhMw5jKKjJJKjJKjJKjJKjJKjJKjJKjJKjJKjJKjJK",
-    photoName: "自定义图片3",
-  },
-]);
-
-// 多图片数据，用于测试缩略图滑动
-const manyImages = ref([
-  {
-    photoUrl: "https://fastly.picsum.photos/id/10/654/400.jpg",
-    photoName: "风景1",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/20/654/400.jpg",
-    photoName: "风景2",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/30/654/400.jpg",
-    photoName: "风景3",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/40/654/400.jpg",
-    photoName: "风景4",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/50/654/400.jpg",
-    photoName: "风景5",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/60/654/400.jpg",
-    photoName: "风景6",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/70/654/400.jpg",
-    photoName: "风景7",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/80/654/400.jpg",
-    photoName: "风景8",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/90/654/400.jpg",
-    photoName: "风景9",
-  },
-  {
-    photoUrl: "https://fastly.picsum.photos/id/110/654/400.jpg",
-    photoName: "风景10",
-  },
-]);
-
-// 处理圆角变化
-const handleRadiusChange = (e) => {
-  dynamicRadius.value = e.detail.value;
-};
-
-// 处理高度变化
-const handleHeightChange = (e) => {
-  dynamicHeight.value = e.detail.value;
-};
-
-// 处理缩略图显示切换
-const handleThumbnailToggle = (e) => {
-  showThumbnails.value = e.detail.value;
-};
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20rpx;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.demo-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  text-align: center;
-  margin-bottom: 40rpx;
-  color: #333;
-}
-
-.demo-section {
-  margin-bottom: 60rpx;
-  background: #fff;
-  border-radius: 16rpx;
-  padding: 30rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  font-size: 28rpx;
-  font-weight: 600;
-  margin-bottom: 20rpx;
-  color: #333;
-  border-left: 6rpx solid #007aff;
-  padding-left: 16rpx;
-}
-
-.control-panel {
-  margin-bottom: 30rpx;
-  padding: 20rpx;
-  background: #f8f9fa;
-  border-radius: 12rpx;
-}
-
-.control-panel text {
-  display: block;
-  font-size: 24rpx;
-  color: #666;
-  margin-bottom: 16rpx;
-}
-
-slider {
-  width: 100%;
-}
-
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  margin-top: 20rpx;
-}
-
-.checkbox-label {
-  margin-left: 16rpx;
-  font-size: 24rpx;
-  color: #666;
-}
-</style>
diff --git a/src/components/ImageSwiper/prompt.md b/src/components/ImageSwiper/prompt.md
deleted file mode 100644
index 62dc411..0000000
--- a/src/components/ImageSwiper/prompt.md
+++ /dev/null
@@ -1,15 +0,0 @@
-## 图片详情组件
-
-组件名称：图片详情组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片 100%还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.image-swiper
-3、可以使用 uniapp swiper 内置的组件
-4、可以使用网络图片地址
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ModuleTitle/prompt.md b/src/components/ModuleTitle/prompt.md
deleted file mode 100644
index c906bbc..0000000
--- a/src/components/ModuleTitle/prompt.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## 图片详情组件
-
-组件名称：模块标题组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片 100%还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.module-title
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ResponseIntro/prompt.md b/src/components/ResponseIntro/prompt.md
deleted file mode 100644
index e0f2ea6..0000000
--- a/src/components/ResponseIntro/prompt.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## 消息响应体文本介绍组件
-
-组件名称：消息响应体文本介绍组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、参考图片，还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.response-intro-text
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/ServiceTipsWord/prompt.md b/src/components/ServiceTipsWord/prompt.md
deleted file mode 100644
index 5d3fa49..0000000
--- a/src/components/ServiceTipsWord/prompt.md
+++ /dev/null
@@ -1,16 +0,0 @@
-## 消息体提示词组件
-
-组件名称：消息体提示词组件
-帮我加一张床、房间热水不够热、帮我加一台麻将机
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片高度还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-prompt
-3、可以使用 uniapp 内置的组件
-4、帮忙加一张床、房间热水不够热、帮忙加一台麻将机有点击交互
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/Stepper/README.md b/src/components/Stepper/README.md
deleted file mode 100644
index 2411ffc..0000000
--- a/src/components/Stepper/README.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Stepper 数字步进器组件
-
-一个简洁易用的数字步进器组件，支持增减操作和数值范围限制。
-
-## 功能特性
-
-- ✨ **双向数据绑定**：支持 v-model 语法糖
-- 🔢 **数值范围控制**：可设置最小值和最大值
-- 🎯 **响应式更新**：实时响应外部数值变化
-- 🎨 **简洁UI设计**：使用 uni-icons 图标，界面清爽
-- 📱 **移动端适配**：完美适配各种屏幕尺寸
-
-## 使用方法
-
-### 基础用法
-
-```vue
-<template>
-  <Stepper v-model="quantity" />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import Stepper from '@/components/Stepper/index.vue'
-
-const quantity = ref(1)
-</script>
-```
-
-### 设置数值范围
-
-```vue
-<template>
-  <Stepper 
-    v-model="quantity" 
-    :min="1" 
-    :max="10" 
-  />
-</template>
-```
-
-## API
-
-### Props
-
-| 参数 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| modelValue | Number | 1 | 当前数值，支持 v-model |
-| min | Number | 1 | 最小值 |
-| max | Number | 100 | 最大值 |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|--------|------|----------|
-| update:modelValue | 数值变化时触发 | (value: number) |
-
-## 更新日志
-
-### v1.1.0 (2024-12-19)
-**修复响应性问题**
-- 🐛 修复组件不响应外部 modelValue 变化的问题
-- 🔄 添加 watch 监听器，确保实时同步外部值变化
-- ✨ 提升组件响应性和数据同步准确性
-- 🎯 完善与父组件的双向数据绑定
-
-### v1.0.0
-**初始版本**
-- ✨ 基础数字步进器功能
-- 🔢 支持数值范围控制
-- 🎨 简洁的UI设计
-- 📱 移动端适配
\ No newline at end of file
diff --git a/src/components/Stepper/propmt.md b/src/components/Stepper/propmt.md
deleted file mode 100644
index efbfc76..0000000
--- a/src/components/Stepper/propmt.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## 步进器组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、参考图片，高度还原交互设计，完成组件封装
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.stepper-wrapper
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/SumCard/propmt.md b/src/components/SumCard/propmt.md
deleted file mode 100644
index 095fcf5..0000000
--- a/src/components/SumCard/propmt.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## 价格组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、参考图片，高度还原交互设计，完成组件封装
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.sum-wrapper
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/TagsGroup/prompt.md b/src/components/TagsGroup/prompt.md
deleted file mode 100644
index ff73993..0000000
--- a/src/components/TagsGroup/prompt.md
+++ /dev/null
@@ -1,14 +0,0 @@
-## 标签组件
-
-组件名称：标签组件
-
-## 提示词：
-
-使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
-1、按照提供的图片 100%还原交互设计
-2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.tags-group
-3、可以使用 uniapp 内置的组件
-
-## 备注
-
-仅供学习、交流使用，请勿用于商业用途。
diff --git a/src/components/TopNavBar/README.md b/src/components/TopNavBar/README.md
deleted file mode 100644
index 679f3d7..0000000
--- a/src/components/TopNavBar/README.md
+++ /dev/null
@@ -1,180 +0,0 @@
-# TopNavBar 顶部导航栏组件
-
-一个功能完整的顶部导航栏组件，支持固定定位、自定义样式和插槽内容。
-
-## 功能特性
-
-- ✅ 支持固定在页面顶部（可配置）
-- ✅ 自动适配状态栏高度
-- ✅ 支持自定义标题和颜色
-- ✅ 支持插槽自定义内容
-- ✅ 内置返回按钮功能
-- ✅ 响应式设计
-- ✅ 深色模式支持
-- ✅ 安全区域适配
-
-## 基础用法
-
-### 简单使用
-
-```vue
-<template>
-  <TopNavBar title="页面标题" />
-</template>
-
-<script setup>
-import TopNavBar from "@/components/TopNavBar/index.vue";
-</script>
-```
-
-### 固定在顶部
-
-```vue
-<template>
-  <TopNavBar title="页面标题" :fixed="true" />
-</template>
-```
-
-### 自定义样式
-
-```vue
-<template>
-  <TopNavBar
-    title="页面标题"
-    backgroundColor="#007AFF"
-    titleColor="#ffffff"
-    backIconColor="#ffffff"
-  />
-</template>
-```
-
-### 标题对齐方式
-
-```vue
-<template>
-  <!-- 标题居中显示（默认） -->
-  <TopNavBar title="居中标题" titleAlign="center" />
-
-  <!-- 标题左对齐显示 -->
-  <TopNavBar title="左对齐标题" titleAlign="left" />
-</template>
-```
-
-### 使用插槽
-
-```vue
-<template>
-  <TopNavBar>
-    <template #title>
-      <div class="custom-title">
-        <text>自定义标题内容</text>
-      </div>
-    </template>
-
-    <template #right>
-      <uni-icons type="more" size="20" color="#333" />
-    </template>
-  </TopNavBar>
-</template>
-```
-
-## API
-
-### Props
-
-| 参数            | 类型    | 默认值    | 说明                                   |
-| --------------- | ------- | --------- | -------------------------------------- |
-| title           | String  | ''        | 导航栏标题                             |
-| fixed           | Boolean | false     | 是否固定在页面顶部                     |
-| showBack        | Boolean | true      | 是否显示返回按钮                       |
-| backgroundColor | String  | '#ffffff' | 背景颜色                               |
-| titleColor      | String  | '#333333' | 标题文字颜色                           |
-| backIconColor   | String  | '#333333' | 返回按钮图标颜色                       |
-| hideStatusBar   | Boolean | false     | 是否隐藏状态栏占位                     |
-| zIndex          | Number  | 999       | 层级索引                               |
-| titleAlign      | String  | 'center'  | 标题对齐方式，可选值：'center'、'left' |
-
-### Events
-
-| 事件名 | 说明               | 参数 |
-| ------ | ------------------ | ---- |
-| back   | 点击返回按钮时触发 | -    |
-
-### Slots
-
-| 插槽名 | 说明           |
-| ------ | -------------- |
-| title  | 自定义标题内容 |
-| right  | 自定义右侧内容 |
-
-## 使用示例
-
-### 订单列表页面
-
-```vue
-<template>
-  <div>
-    <TopNavBar>
-      <template #title>
-        <Tabs
-          :tabs="tabList"
-          :defaultActive="currentTabIndex"
-          @change="handleTabChange"
-        />
-      </template>
-    </TopNavBar>
-
-    <!-- 页面内容 -->
-    <div class="page-content">
-      <!-- 内容区域 -->
-    </div>
-  </div>
-</template>
-```
-
-### 商品详情页面
-
-```vue
-<template>
-  <div>
-    <TopNavBar title="商品详情" :fixed="true" @back="handleBack">
-      <template #right>
-        <uni-icons type="share" size="20" color="#333" />
-      </template>
-    </TopNavBar>
-
-    <!-- 页面内容 -->
-    <div class="page-content">
-      <!-- 内容区域 -->
-    </div>
-  </div>
-</template>
-
-<script setup>
-const handleBack = () => {
-  // 自定义返回逻辑
-  console.log("自定义返回处理");
-};
-</script>
-```
-
-## 注意事项
-
-1. **固定定位使用**：当设置 `fixed="true"` 时，组件会固定在页面顶部，此时需要为页面内容添加适当的顶部间距。
-
-2. **状态栏适配**：组件会自动获取系统状态栏高度并进行适配，无需手动处理。
-
-3. **返回按钮**：默认点击返回按钮会执行 `uni.navigateBack()`，如果需要自定义返回逻辑，请监听 `@back` 事件。
-
-4. **样式覆盖**：如需自定义样式，建议通过 props 传入颜色值，或在父组件中使用深度选择器覆盖样式。
-
-5. **插槽使用**：title 插槽会完全替换默认的标题显示，right 插槽用于添加右侧操作按钮。
-
-## 更新日志
-
-### v1.0.0
-
-- 初始版本发布
-- 支持基础导航栏功能
-- 支持固定定位配置
-- 支持自定义样式和插槽
diff --git a/src/components/TopNavBar/demo.vue b/src/components/TopNavBar/demo.vue
deleted file mode 100644
index aec40d1..0000000
--- a/src/components/TopNavBar/demo.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-  <div class="demo-container">
-    <!-- 示例1: 基础用法 -->
-    <div class="demo-section">
-      <div class="demo-title">基础用法</div>
-      <TopNavBar title="基础导航栏" />
-    </div>
-
-    <!-- 示例2: 固定在顶部 -->
-    <div class="demo-section">
-      <div class="demo-title">固定在顶部</div>
-      <TopNavBar title="固定导航栏" :fixed="true" />
-    </div>
-
-    <!-- 示例3: 自定义颜色 -->
-    <div class="demo-section">
-      <div class="demo-title">自定义颜色</div>
-      <TopNavBar title="蓝色导航栏" backgroundColor="#007AFF" titleColor="#ffffff" backIconColor="#ffffff" />
-    </div>
-
-    <!-- 示例4: 隐藏返回按钮 -->
-    <div class="demo-section">
-      <div class="demo-title">隐藏返回按钮</div>
-      <TopNavBar title="无返回按钮" :showBack="false" />
-    </div>
-
-    <!-- 示例5: 标题左对齐 -->
-    <div class="demo-section">
-      <div class="demo-title">标题左对齐</div>
-      <TopNavBar title="左对齐标题" titleAlign="left" />
-    </div>
-
-    <!-- 示例6: 标题居中对齐（默认） -->
-    <div class="demo-section">
-      <div class="demo-title">标题居中对齐（默认）</div>
-      <TopNavBar title="居中对齐标题" titleAlign="center" />
-    </div>
-
-    <!-- 示例7: 使用插槽 -->
-    <div class="demo-section">
-      <div class="demo-title">使用插槽</div>
-      <TopNavBar>
-        <template #title>
-          <div class="custom-title">
-            <uni-icons type="star" size="16" color="#FFD700" />
-            <span class="title-text">自定义标题</span>
-          </div>
-        </template>
-
-        <template #right>
-          <div class="right-actions">
-            <uni-icons type="search" size="20" color="#333" style="margin-right: 10px" />
-            <uni-icons type="more" size="20" color="#333" />
-          </div>
-        </template>
-      </TopNavBar>
-    </div>
-
-    <!-- 示例8: 渐变背景 -->
-    <div class="demo-section">
-      <div class="demo-title">渐变背景</div>
-      <TopNavBar title="渐变导航栏" backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" titleColor="#ffffff"
-        backIconColor="#ffffff" />
-    </div>
-
-    <!-- 内容区域 -->
-    <div class="content-area">
-      <div class="content-item" v-for="i in 20" :key="i">
-        <text>内容项 {{ i }}</text>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import TopNavBar from "./index.vue";
-</script>
-
-<style scoped lang="scss">
-.demo-container {
-  padding: 20px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.demo-title {
-  padding: 15px 20px;
-  background-color: #f8f9fa;
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-  border-bottom: 1px solid #e9ecef;
-}
-
-.custom-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .title-text {
-    margin-left: 8px;
-    font-size: 18px;
-    font-weight: 500;
-    color: #333;
-  }
-}
-
-.right-actions {
-  display: flex;
-  align-items: center;
-}
-
-.content-area {
-  margin-top: 40px;
-  padding: 20px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.content-item {
-  padding: 15px 0;
-  border-bottom: 1px solid #f0f0f0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  text {
-    font-size: 16px;
-    color: #666;
-  }
-}
-</style>
diff --git a/src/components/TopNavBar/使用指南.md b/src/components/TopNavBar/使用指南.md
deleted file mode 100644
index ab692aa..0000000
--- a/src/components/TopNavBar/使用指南.md
+++ /dev/null
@@ -1,298 +0,0 @@
-# TopNavBar 组件使用指南
-
-## 组件概述
-
-TopNavBar 是一个功能完整的顶部导航栏组件，专为 uni-app 项目设计。该组件支持固定定位、自定义样式、插槽内容等功能，可以满足大部分页面的导航需求。
-
-## 核心特性
-
-### 1. 可配置固定定位
-
-- **默认行为**: 组件默认不固定，跟随页面滚动
-- **固定模式**: 设置 `fixed="true"` 可将导航栏固定在页面顶部
-- **自动适配**: 固定模式下自动处理状态栏高度和安全区域
-
-### 2. 智能状态栏适配
-
-- 自动获取系统状态栏高度
-- 支持不同平台的导航栏高度适配（iOS: 44px, Android: 48px）
-- 可选择隐藏状态栏占位区域
-
-### 3. 灵活的自定义选项
-
-- 支持自定义背景色、标题色、图标色
-- 可控制返回按钮显示/隐藏
-- 支持自定义 z-index 层级
-- 支持标题对齐方式配置（居中/左对齐）
-
-## 快速开始
-
-### 基础使用
-
-```vue
-<!-- 最简单的使用方式 -->
-<TopNavBar title="页面标题" />
-```
-
-### 固定在顶部
-
-```vue
-<!-- 固定导航栏，适合长页面滚动 -->
-<template>
-  <div class="page-container">
-    <TopNavBar title="商品详情" :fixed="true" />
-    <div class="page-content">
-      <!-- 页面内容 -->
-    </div>
-  </div>
-</template>
-
-<style>
-.page-content {
-  /* 为固定导航栏预留空间 */
-  padding-top: calc(var(--status-bar-height, 44px) + 44px);
-}
-</style>
-```
-
-### 自定义样式
-
-```vue
-<!-- 深色主题导航栏 -->
-<TopNavBar
-  title="深色导航栏"
-  backgroundColor="#1a1a1a"
-  titleColor="#ffffff"
-  backIconColor="#ffffff"
-/>
-
-<!-- 品牌色导航栏 -->
-<TopNavBar
-  title="品牌导航栏"
-  backgroundColor="#007AFF"
-  titleColor="#ffffff"
-  backIconColor="#ffffff"
-/>
-
-<!-- 左对齐标题 -->
-<TopNavBar title="左对齐标题" titleAlign="left" />
-
-<!-- 居中标题（默认） -->
-<TopNavBar title="居中标题" titleAlign="center" />
-```
-
-## 高级用法
-
-### 使用插槽自定义内容
-
-```vue
-<template>
-  <TopNavBar>
-    <!-- 自定义标题区域 -->
-    <template #title>
-      <div class="custom-title">
-        <img src="/static/logo.png" class="logo" />
-        <text class="brand-name">品牌名称</text>
-      </div>
-    </template>
-
-    <!-- 自定义右侧操作 -->
-    <template #right>
-      <div class="nav-actions">
-        <uni-icons type="search" size="20" @click="handleSearch" />
-        <uni-icons type="more" size="20" @click="showMore" />
-      </div>
-    </template>
-  </TopNavBar>
-</template>
-
-<style>
-.custom-title {
-  display: flex;
-  align-items: center;
-
-  .logo {
-    width: 24px;
-    height: 24px;
-    margin-right: 8px;
-  }
-
-  .brand-name {
-    font-size: 18px;
-    font-weight: 600;
-  }
-}
-
-.nav-actions {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-}
-</style>
-```
-
-### 监听返回事件
-
-```vue
-<template>
-  <TopNavBar title="自定义返回" @back="handleCustomBack" />
-</template>
-
-<script setup>
-const handleCustomBack = () => {
-  // 自定义返回逻辑
-  uni.showModal({
-    title: "提示",
-    content: "确定要离开当前页面吗？",
-    success: (res) => {
-      if (res.confirm) {
-        uni.navigateBack();
-      }
-    },
-  });
-};
-</script>
-```
-
-## 实际应用场景
-
-### 1. 商品详情页
-
-```vue
-<template>
-  <div class="goods-detail">
-    <TopNavBar
-      title="商品详情"
-      :fixed="true"
-      backgroundColor="rgba(255, 255, 255, 0.95)"
-    >
-      <template #right>
-        <uni-icons type="share" size="20" @click="shareGoods" />
-      </template>
-    </TopNavBar>
-
-    <div class="goods-content">
-      <!-- 商品内容 -->
-    </div>
-  </div>
-</template>
-```
-
-### 2. 订单列表页
-
-```vue
-<template>
-  <div class="order-list">
-    <TopNavBar>
-      <template #title>
-        <Tabs :tabs="orderTabs" :active="activeTab" @change="switchTab" />
-      </template>
-    </TopNavBar>
-
-    <div class="order-content">
-      <!-- 订单列表 -->
-    </div>
-  </div>
-</template>
-```
-
-### 3. 聊天页面
-
-```vue
-<template>
-  <div class="chat-page">
-    <TopNavBar title="客服小沐" :fixed="true" backgroundColor="#f8f9fa">
-      <template #right>
-        <uni-icons type="phone" size="20" @click="makeCall" />
-      </template>
-    </TopNavBar>
-
-    <div class="chat-content">
-      <!-- 聊天内容 -->
-    </div>
-  </div>
-</template>
-```
-
-## 最佳实践
-
-### 1. 固定导航栏的页面布局
-
-```scss
-// 推荐的页面结构
-.page-container {
-  .page-content {
-    // 方法1: 使用 padding-top
-    padding-top: calc(var(--status-bar-height, 44px) + 44px);
-
-    // 方法2: 使用 margin-top
-    // margin-top: calc(var(--status-bar-height, 44px) + 44px);
-  }
-}
-```
-
-### 2. 响应式设计
-
-```scss
-// 适配不同屏幕尺寸
-@media screen and (max-width: 375px) {
-  .page-content {
-    padding-top: calc(var(--status-bar-height, 44px) + 40px);
-  }
-}
-```
-
-### 3. 主题适配
-
-```vue
-<script setup>
-import { computed } from "vue";
-
-// 根据系统主题动态调整颜色
-const navBarStyle = computed(() => {
-  const isDark = uni.getSystemInfoSync().theme === "dark";
-  return {
-    backgroundColor: isDark ? "#1a1a1a" : "#ffffff",
-    titleColor: isDark ? "#ffffff" : "#333333",
-    backIconColor: isDark ? "#ffffff" : "#333333",
-  };
-});
-</script>
-
-<template>
-  <TopNavBar
-    title="自适应主题"
-    :backgroundColor="navBarStyle.backgroundColor"
-    :titleColor="navBarStyle.titleColor"
-    :backIconColor="navBarStyle.backIconColor"
-  />
-</template>
-```
-
-## 注意事项
-
-1. **固定定位的性能考虑**: 固定导航栏会创建新的层叠上下文，在复杂页面中可能影响性能
-
-2. **状态栏适配**: 在不同设备上状态栏高度可能不同，组件会自动处理，但建议在测试时验证各种设备
-
-3. **插槽内容**: 使用插槽时注意内容的响应式设计，确保在不同屏幕尺寸下都能正常显示
-
-4. **z-index 管理**: 如果页面中有其他固定定位元素，注意调整 z-index 避免层级冲突
-
-5. **返回按钮**: 默认返回行为是 `uni.navigateBack()`，如需自定义请监听 `@back` 事件
-
-## 故障排除
-
-### 常见问题
-
-**Q: 固定导航栏下的内容被遮挡了？**
-A: 需要为页面内容添加顶部间距，参考上面的最佳实践。
-
-**Q: 在某些设备上状态栏高度不正确？**
-A: 组件会自动获取状态栏高度，如果仍有问题，可以手动设置 `hideStatusBar="true"` 并自行处理。
-
-**Q: 自定义颜色不生效？**
-A: 确保传入的颜色值格式正确，支持 hex、rgb、rgba 等标准 CSS 颜色格式。
-
-**Q: 插槽内容显示异常？**
-A: 检查插槽内容的样式，确保没有影响导航栏布局的 CSS 属性。