duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove outdated component documentation and demo files

Browse Source 
Clean up the repository by deleting all old component-specific README files, prompt instruction docs, demo examples, and the Chinese TopNavBar usage guide to remove unused project assets.
This commit is contained in:
duanshuwen
2026-05-27 19:00:08 +08:00
parent e2891f5793
commit cd39a9a65c
18 changed files with 0 additions and 2125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/CommandWrapper/propmt.md
View File

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

25
src/components/CreateServiceOrder/prompt.md
View File

@@ -1,25 +0,0 @@
## 消息体组件信息
组件名称：消息体创建服务工单
服务名称：加一台麻将机
房间号：302
服务时间：2025-09-12 12:00
联系房客：
联系电话：
立即呼叫按钮
呼叫成功之后
1、呼叫按钮变为两个按钮 查看工单和已完成，见图中的布局
2、联系人和联系电话，仅展示，不能编辑
## 提示词：
使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
1、按照提供的图片高度还原交互设计
2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.create-service-order
3、可以使用 uniapp 内置的组件
4、联系房客/联系电话，需要用户自己填写
## 备注
仅供学习、交流使用，请勿用于商业用途。

473
src/components/FormCard/README.md
View File

@@ -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

234
src/components/FormCard/demo.vue
View File

@@ -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>

14
src/components/FormCard/propmt.md
View File

@@ -1,14 +0,0 @@
## 表单组件
## 提示词：
使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
1、参考图片，高度还原交互设计，完成组件封装
2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.form-wrapper
3、可以使用 uniapp 内置的组件
4、姓名、手机号，需要用户自己填写
5、验证手机号格式是否正确
## 备注
仅供学习、交流使用，请勿用于商业用途。

334
src/components/ImageSwiper/README.md
View File

@@ -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

244
src/components/ImageSwiper/demo.vue
View File

@@ -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>

15
src/components/ImageSwiper/prompt.md
View File

@@ -1,15 +0,0 @@
## 图片详情组件
组件名称：图片详情组件
## 提示词：
使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
1、按照提供的图片 100%还原交互设计
2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.image-swiper
3、可以使用 uniapp swiper 内置的组件
4、可以使用网络图片地址
## 备注
仅供学习、交流使用，请勿用于商业用途。

14
src/components/ModuleTitle/prompt.md
View File

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

14
src/components/ResponseIntro/prompt.md
View File

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

16
src/components/ServiceTipsWord/prompt.md
View File

@@ -1,16 +0,0 @@
## 消息体提示词组件
组件名称：消息体提示词组件
帮我加一张床、房间热水不够热、帮我加一台麻将机
## 提示词：
使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
1、按照提供的图片高度还原交互设计
2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.service-prompt
3、可以使用 uniapp 内置的组件
4、帮忙加一张床、房间热水不够热、帮忙加一台麻将机有点击交互
## 备注
仅供学习、交流使用，请勿用于商业用途。

72
src/components/Stepper/README.md
View File

@@ -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设计
- 📱 移动端适配

12
src/components/Stepper/propmt.md
View File

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

12
src/components/SumCard/propmt.md
View File

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

14
src/components/TagsGroup/prompt.md
View File

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

180
src/components/TopNavBar/README.md
View File

@@ -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
- 初始版本发布
- 支持基础导航栏功能
- 支持固定定位配置
- 支持自定义样式和插槽

142
src/components/TopNavBar/demo.vue
View File

@@ -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>

298
src/components/TopNavBar/使用指南.md
View File

@@ -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 属性。