From 1cd188f1db5cde3c683ce5bbb2ca89f155122158 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=87=E6=B6=9B?= <1909118034@qq.com>
Date: Mon, 3 Mar 2025 20:42:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0hooks=E6=96=B9=E6=B3=95=20?=
=?UTF-8?q?=E5=88=A4=E6=96=AD=E8=B7=AF=E7=94=B1=E6=A0=88=E6=95=B0=E9=87=8F?=
=?UTF-8?q?=20=E5=85=BC=E5=AE=B9=E5=BE=AE=E4=BF=A1=E5=B0=8F=E7=A8=8B?=
=?UTF-8?q?=E5=BA=8F=E5=AF=BC=E8=88=AA=E6=A0=8F=E8=BF=94=E5=9B=9E=E9=A6=96?=
=?UTF-8?q?=E9=A1=B5=E7=9A=84=E5=8A=9F=E8=83=BD(home)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
hooks/README.md | 70 ++++++++++++++++++
hooks/useNavigation.ts | 48 ++++++++++++
pagesA/my_order/detail.vue | 15 +++-
pagesA/my_order/list.vue | 22 +++++-
pagesA/task_hall/list.vue | 22 +++++-
unocss/a-hua-unocss/index.scss | 130 +++++++++++++++++++++++++++------
6 files changed, 282 insertions(+), 25 deletions(-)
create mode 100644 hooks/README.md
create mode 100644 hooks/useNavigation.ts
diff --git a/hooks/README.md b/hooks/README.md
new file mode 100644
index 0000000..73a7ad5
--- /dev/null
+++ b/hooks/README.md
@@ -0,0 +1,70 @@
+# Composables 使用指南
+
+## 导航栏状态管理 (useNavigation)
+
+这个 composable 用于管理导航栏的状态，特别是检测当前路由栈中的页面数量，帮助决定是否显示返回首页按钮。
+
+### 基本用法
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 页面标题
+
+
+
+
+```
+
+### 关键属性和方法
+
+| 名称 | 类型 | 说明 |
+| --- | --- | --- |
+| hasMultiplePages | Ref\ | 路由栈中是否有多个页面，用于决定是否显示返回按钮 |
+| isTabBarPage | Ref\ | 当前页面是否为 tabBar 页面，用于决定是否显示返回首页按钮 |
+| checkRouteStack | Function | 检查并更新当前路由栈状态的方法，在页面显示时调用 |
+
+### 使用步骤
+
+1. 在页面中导入 `useNavigation`
+2. 在 `setup` 中调用此函数，获取状态和方法
+3. 在 `onShow` 生命周期中调用 `checkRouteStack()` 方法更新状态
+4. 在模板中根据 `hasMultiplePages` 和 `isTabBarPage` 状态显示或隐藏相应的按钮
+
+### 注意事项
+
+- 需要在每个页面的 `onShow` 生命周期中调用 `checkRouteStack()`，以确保状态始终是最新的
+- tabBar 页面列表已经预设为 `['pages/index/index', 'pages/message/index', 'pages/mine/index']`，如需修改请直接编辑 `useNavigation.ts` 文件
diff --git a/hooks/useNavigation.ts b/hooks/useNavigation.ts
new file mode 100644
index 0000000..ab28d71
--- /dev/null
+++ b/hooks/useNavigation.ts
@@ -0,0 +1,48 @@
+import { ref } from 'vue'
+
+/**
+ * 导航栏状态管理 Composable
+ * 检查当前路由栈是否大于1条，用于决定是否显示返回首页按钮
+ * @returns 包含路由栈状态和相关方法的对象
+ */
+export function useNavigation() {
+ // 是否有多个页面在路由栈中
+ const hasMultiplePages = ref(false)
+ // 当前页面是否为 tabBar 页面
+ const isTabBarPage = ref(false)
+ // tabBar 页面路径列表
+ const tabBarPages = [
+ 'pages/index/index',
+ 'pages/message/index',
+ 'pages/mine/index'
+ ]
+
+ /**
+ * 检查当前页面是否为 tabBar 页面
+ */
+ const checkIsTabBarPage = (currentRoute: string) => {
+ isTabBarPage.value = tabBarPages.includes(currentRoute)
+ }
+
+ /**
+ * 检查当前路由栈状态
+ * 在每个页面的 onShow 或 onLoad 生命周期调用此方法
+ */
+ const checkRouteStack = () => {
+ // 获取当前页面路由
+ const pages = getCurrentPages()
+ // 获取当前页面路径
+ const currentRoute = pages[pages.length - 1]?.route || ''
+
+ // 更新路由栈状态
+ hasMultiplePages.value = pages.length > 1
+ // 检查是否为 tabBar 页面
+ checkIsTabBarPage(currentRoute)
+ }
+
+ return {
+ hasMultiplePages,
+ isTabBarPage,
+ checkRouteStack
+ }
+}
diff --git a/pagesA/my_order/detail.vue b/pagesA/my_order/detail.vue
index 87ae5d6..8dfe123 100644
--- a/pagesA/my_order/detail.vue
+++ b/pagesA/my_order/detail.vue
@@ -6,7 +6,9 @@
safeAreaInsetTop fixed placeholder>
-
+
+
工单详情
@@ -139,7 +141,18 @@