feat(布局): 添加返回按钮状态管理和导航历史追踪

实现返回按钮的禁用状态控制，当无法返回时禁用按钮并改变样式。

src/layout/index.vue

@@ -36,8 +36,20 @@
             v-if="routes && routes.length > 1"
             :title="routes[routes.length - 1]?.breadcrumbName"
             :breadcrumb="breadcrumbConfig"
-            @back="() => $router.go(-1)"
-          />
+            @back="backHandler"
+          >
+            <template #backIcon>
+              <div
+                :style="{
+                  pointerEvents: !canGoBack ? 'none' : 'auto',
+                  cursor: !canGoBack ? 'none' : 'pointer',
+                  color: !canGoBack ? 'rgba(0, 0, 0, 0.25)' : 'inherit',
+                }"
+              >
+                <ArrowLeftOutlined />
+              </div>
+            </template>
+          </a-page-header>
         </slot>
         <slot></slot>
       </a-layout-content>
@@ -51,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineOptions, reactive, watchEffect, computed, h, onUnmounted } from 'vue'
+import { ref, defineOptions, reactive, watchEffect, computed, h, onUnmounted, onMounted } from 'vue'
 import userDropdown from './components/userDropdown/index.vue'
 import { menus } from '@/const/menus'
 import { useRoute, useRouter } from 'vue-router'
@@ -60,6 +72,7 @@ import type { Route } from 'ant-design-vue/es/breadcrumb/Breadcrumb'
 import mqtt, { MqttClient } from 'mqtt'
 import { useUserStore } from '@/stores/user'
 import AlertModal from './components/alertModal/index.vue'
+import { ArrowLeftOutlined } from '@ant-design/icons-vue'
 
 const userStore = useUserStore()
 const userId = ref(userStore?.userInfo?.userId || '')
@@ -267,6 +280,48 @@ const clickMenuItemHandler = ({ key, keyPath }: { key: string; keyPath: string[]
     router.push({ name: key })
   }
 }
+
+const canGoBack = ref(false)
+const navigationHistory = ref<string[]>([])
+let isBackNavigation = false
+
+onMounted(() => {
+  // 初始化导航历史
+  navigationHistory.value = [router.currentRoute.value.path]
+  canGoBack.value = false
+})
+
+// 监听路由变化，更新导航历史和canGoBack状态
+watchEffect(() => {
+  const currentPath = router.currentRoute.value.path
+
+  if (isBackNavigation) {
+    // 如果是返回导航，不添加到历史记录
+    isBackNavigation = false
+  } else {
+    // 确保只添加新的路径
+    if (navigationHistory.value[navigationHistory.value.length - 1] !== currentPath) {
+      navigationHistory.value.push(currentPath)
+    }
+  }
+
+  // 当历史记录长度大于1时可以返回
+  canGoBack.value = navigationHistory.value.length > 1
+})
+
+const backHandler = async () => {
+  if (navigationHistory.value.length > 1) {
+    // 移除当前路径
+    navigationHistory.value.pop()
+
+    // 设置返回导航标志
+    isBackNavigation = true
+
+    // 返回到上一个路径
+    const prevPath = navigationHistory.value[navigationHistory.value.length - 1]
+    await router.push(prevPath)
+  }
+}
 </script>
 
 <style scoped lang="less">