feat: 新增订单列表交互

pages/order/components/TopNavBar/prompt.md

@@ -0,0 +1,114 @@
+## 顶部导航栏组件
+
+组件名称：顶部导航栏组件
+
+## 功能特性
+
+1. **自适应状态栏高度**：自动获取设备状态栏高度并适配
+2. **返回功能**：左侧返回按钮，支持自定义返回事件
+3. **标题显示**：支持传入标题文本或使用插槽自定义标题内容
+4. **右侧扩展**：支持右侧插槽，可添加自定义操作按钮
+5. **响应式设计**：适配不同屏幕尺寸
+
+## 使用方法
+
+### 基础用法
+
+```vue
+<template>
+  <TopNavBar title="服务工单" />
+</template>
+
+<script setup>
+import TopNavBar from './components/TopNavBar/index.vue'
+</script>
+```
+
+### 自定义标题
+
+```vue
+<template>
+  <TopNavBar>
+    <template #title>
+      <text class="custom-title">自定义标题</text>
+    </template>
+  </TopNavBar>
+</template>
+```
+
+### 自定义右侧操作
+
+```vue
+<template>
+  <TopNavBar title="服务工单">
+    <template #right>
+      <image class="menu-icon" src="./images/menu.png" @click="showMenu" />
+    </template>
+  </TopNavBar>
+</template>
+```
+
+### 自定义返回事件
+
+```vue
+<template>
+  <TopNavBar title="服务工单" @back="handleBack" />
+</template>
+
+<script setup>
+const handleBack = () => {
+  // 自定义返回逻辑
+  console.log('自定义返回')
+}
+</script>
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| title | String | '' | 导航栏标题 |
+| showBack | Boolean | true | 是否显示返回按钮 |
+
+## Events
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| back | 点击返回按钮时触发 | - |
+
+## Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| title | 自定义标题内容 |
+| right | 自定义右侧操作区域 |
+
+## 样式定制
+
+组件支持通过CSS变量进行样式定制：
+
+```scss
+.top-nav-bar {
+  --nav-bg-color: #fff;           // 背景色
+  --nav-title-color: #333;        // 标题颜色
+  --nav-border-color: #f0f0f0;    // 边框颜色
+}
+```
+
+## 技术实现
+
+- 使用 uniapp + Vue3 组合式 API 开发
+- 自动获取系统状态栏高度进行适配
+- 使用 fixed 定位实现固定顶部效果
+- 支持插槽扩展，提供良好的可定制性
+- 响应式设计，适配不同设备屏幕
+
+## 兼容性
+
+- 微信小程序
+- H5
+- App
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。