本地告警页面V0

src/components/Layout.vue

@@ -0,0 +1,167 @@
+<template>
+  <div id="layout">
+    <el-header >
+      <div class="logo">
+        <span>管理平台</span>
+      </div>
+      <div class="nav-menu">
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
+          <el-menu-item index="/" style="margin-left:230px">告警管理</el-menu-item>
+        </el-menu>
+      </div>
+      <div class="user-info">
+        <span>客流分析</span>
+        <span>|</span>
+        <span @click="showDialog = true" style="cursor: pointer;">选择摊位</span>
+        <span v-if="selectedStoreName">| 已选择: {{ selectedStoreName }}</span>
+        <span>|</span>
+        <span>区域管理</span>
+        <el-dropdown @command="handleCommand" placement="bottom-end">
+          <span class="el-dropdown-link">
+            {{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="logout">登出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </el-header>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+// import type { Store } from '@/utils/type'
+
+export default defineComponent({
+  name: 'Layout',
+  components: {
+  },
+  setup() {
+    const router = useRouter();
+    const route = useRoute();
+    const token = ref(localStorage.getItem('token') || '');
+    const isUserLoggedIn = computed(() => !!token.value);
+    const username = ref(localStorage.getItem('username') || '');
+    // const isUserLoggedIn = computed(() => !!username.value);
+    const activeIndex = ref(route.path);
+    const showDialog = ref(false);
+    // const selectedStore = ref<Store | null>(null);
+    const selectedStoreName = ref(localStorage.getItem('store_name') || '');
+
+
+    const handleCommand = (command: string) => {
+      if (command === 'logout') {
+        localStorage.removeItem('username');
+        localStorage.removeItem('token');
+        localStorage.removeItem('store_id');
+        localStorage.removeItem('store_name');
+        token.value = '';
+        username.value = '';
+        selectedStoreName.value = '';
+        router.push('/login');
+      }
+    };
+
+
+
+    watch(
+      () => route.path,
+      (newPath) => {
+        activeIndex.value = newPath;
+        // if (!token.value && newPath !== '/login') {
+        //   router.push('/login');
+        // }
+      }
+    );
+
+    onMounted(() => {
+      // if (!token.value) {
+      //   router.push('/login');
+      // } else {
+      //   selectedStoreName.value = localStorage.getItem('store_name') || '';
+      // }
+    });
+
+    return {
+      username,
+      token,
+      isUserLoggedIn,
+      activeIndex,
+      handleCommand,
+      showDialog,
+      selectedStoreName,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.el-header {
+  background-color: #1f2d3d;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  margin: 10px 20x;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.nav-menu {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  margin-left: 110px;
+  margin-right: 100px;
+}
+
+.el-menu-demo {
+  background-color: transparent;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  /* justify-content: flex-start; */
+  flex-grow: 1;
+}
+
+.el-menu-demo .el-menu-item {
+  padding: 0 20px;
+  text-align: center;
+  font-size: 16px;
+  color: #fff;
+  font-weight: bold;
+}
+
+.el-menu-demo .el-menu-item:hover {
+  color: #00aaff;
+}
+
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 10px;
+}
+
+.user-info span {
+  color: #fff;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #fff;
+  display: flex;
+  align-items: center;
+}
+</style>