Selaa lähdekoodia

顶栏添加返回 Main 页面的 Home 按钮

  新增 HomeButton 组件,置于 DashboardLayout 顶部右上角的全屏按钮
  左侧,点击跳转 /main,已在 /main 时不重复跳转。视觉规格沿用
  FullscreenToggle(24×24、opacity 0.75 → hover 1)。

  Main.vue 不使用 DashboardLayout,按钮天然只在子页面显示;
  LoginLayout 未动,登录页无需该按钮。

  涉及文件:
  - 新增 src/components/ui/HomeButton.vue
  - src/layouts/DashboardLayout.vue —— 注册并放置在 top-right-actions 内
画安 1 päivä sitten
vanhempi
commit
eea75e3e32

BIN
src/assets/images/icon_home.png


+ 34 - 0
src/components/ui/HomeButton.vue

@@ -0,0 +1,34 @@
+<template>
+  <img class="home-btn" :src="icon" alt="返回主页" @click="goHome" />
+</template>
+
+<script>
+import icon from '@/assets/images/icon_home.png';
+
+export default {
+  name: 'HomeButton',
+  data() {
+    return { icon };
+  },
+  methods: {
+    goHome() {
+      if (this.$route.path === '/main') return;
+      this.$router.push('/main').catch(() => {});
+    },
+  },
+};
+</script>
+
+<style scoped>
+.home-btn {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  opacity: 0.75;
+  transition: opacity 0.2s;
+  pointer-events: auto;
+}
+.home-btn:hover {
+  opacity: 1;
+}
+</style>

+ 3 - 0
src/layouts/DashboardLayout.vue

@@ -6,6 +6,7 @@
             </div>
             <div class="title glow-text" :data-text="brand.title">{{ brand.title }}</div>
             <div class="top-right-actions">
+                <HomeButton />
                 <FullscreenToggle />
                 <UserProfile />
             </div>
@@ -86,6 +87,7 @@ import SmartDialog from '@/components/ui/SmartDialog.vue';
 import dialogManager from '@/mixins/dialogManager';
 import UserProfile from '@/components/ui/UserProfile.vue';
 import FullscreenToggle from '@/components/ui/FullscreenToggle.vue';
+import HomeButton from '@/components/ui/HomeButton.vue';
 
 // 注册所有可能在弹窗中使用的内容组件
 import DeviceStatusPanel from '@/components/ui/DeviceStatusPanel.vue';
@@ -118,6 +120,7 @@ export default {
         SmartDialog,
         UserProfile,
         FullscreenToggle,
+        HomeButton,
         DeviceStatusPanel,
         SecurityRoutePanel,
         IntersectionMapVideos,