soilgd12/src/components/layout/AppLayout.vue

<template>
  <div
    class="layout-wrapper"
    :class="{ 'full-screen': isFullScreen }"
    :style="isSpecialBg ? backgroundStyle : {}"
  >
    <!-- 背景层 -->
    <div v-if="isSpecialBg" class="background-layer"></div>

   <!-- Header -->
    <el-header
      class="layout-header"
      v-if="!isFullScreen"
      :class="{ 'transparent-header': isSpecialBg }"
    >
      <div class="logo-title-row">
        <!-- 左侧：Logo 和标题 -->
        <div class="left-section">
          <img src="@/assets/logo.png" alt="Logo" class="logo" />
          <span class="project-name" :class="{ 'light-text': isSpecialBg }">
            {{ t('Header.title') }}
          </span>
        </div>

        <!-- 右侧：用户信息 -->
        <div class="right-section" v-if="!isSelectCity">
          <div class="user-info-row">
            <div class="lang-buttons">
            <!-- 语言切换按钮 -->
            <button 
              class="lang-toggle-btn"
              :class="{ 'light-text': isSpecialBg }"
              @click="toggleLanguage"
              :title="currentLang === 'zh' ? 'Switch to English' : '切换到中文'"
            >
              <i class="el-icon-globe"></i>
              <span class="lang-label">{{ currentLang === 'zh' ? '中文' : 'English' }}</span>
            </button>
         </div>

            <span class="welcome-text" :class="{ 'light-text': isSpecialBg }">
              {{ t('Header.welcome') }} {{ userInfo.name }} 
            </span>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar
                  :size="40"
                  :class="{ 'light-avatar-border': isSpecialBg }"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item disabled>
                    {{ t('Header.username') }}: {{ userInfo.name }}
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">
                    {{ t('Header.logout') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>

    <div class="tabs-row" v-if="!isFullScreen">
      <el-tabs
        v-if="showTabs"
        v-model="activeName"
        class="demo-tabs"
        :style="tabStyle"
        @tab-click="handleClick"
      >
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :name="tab.name">
          <template #label>
            <i :class="['tab-icon', tab.icon]"></i>
            <span class="tab-label-text">{{ tab.label }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div v-else class="single-tab" @click="handleClick(tabs[0], $event)">
        <i :class="['tab-icon', tabs[0].icon]"></i>
        <span class="tab-label-text">{{ tabs[0].label }}</span>
      </div>
    </div>

    <!-- Main Content -->
    <el-container class="layout-main-container">
      <el-aside v-if="showAside && showTabs" class="layout-aside">
        <component
          :is="AsideComponent"
          :activeTab="activeName"
          :showTabs="showTabs"
        />
      </el-aside>

      <el-main class="layout-content-wrapper" :style="mainStyle">
        <div
          class="scrollable-content"
          :class="{ 'transparent-scroll': isSpecialBg }"
        >
          <div :class="{ 'select-city-container': isSelectCity }">
            <RouterView />
          </div>
        </div>
      </el-main>
    </el-container>
    
    <!-- 全局消息提示组件 -->
    <div v-if="showGlobalMessage" class="global-message">
      <div class="message-content" :class="messageType">
        {{ globalMessage }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, defineAsyncComponent } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useTokenStore } from "@/stores/mytoken";
import { ElMessageBox, ElMessage } from "element-plus";
import { logout } from "@/API/users";
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()
const currentLang = ref(locale.value || 'zh')

// 切换语言
const changeLanguage = () => {
  locale.value = currentLang.value
  localStorage.setItem('language', currentLang.value)
  
  // 触发一个自定义事件，让其他组件知道语言改变了
  window.dispatchEvent(new CustomEvent('languageChanged', { 
    detail: { lang: currentLang.value } 
  }))
}

// 按钮点击切换
const toggleLanguage = () => {
  currentLang.value = currentLang.value === 'zh' ? 'en' : 'zh'
  changeLanguage()
}

// 监听语言变化
watch(locale, (newVal) => {
  currentLang.value = newVal
})

const router = useRouter();
const route = useRoute();
const tokenStore = useTokenStore();
const currentBgImage = ref("");

// ============ 新增状态 ============
const showGlobalMessage = ref(false);
const globalMessage = ref("");
const messageType = ref("success");

currentBgImage.value = `url(${new URL('../../assets/bg/background.jpg', import.meta.url).href})`;

const isSpecialBg = computed(() => true);

const backgroundStyle = computed(() => ({
  backgroundImage: currentBgImage.value,
  backgroundSize: "cover",
  backgroundPosition: "center",
  backgroundRepeat: "no-repeat",
  backgroundAttachment: "fixed",
}));

const isFullScreen = computed(() => route.meta.fullScreen === true);
const isSelectCity = computed(() => route.path === "/select-city");

// 当前用户信息
const userInfo = reactive({
  name: tokenStore.userName,
  type: tokenStore.userType,
});

const tabs = computed(() => {
  if (userInfo.type === "admin") {
    return [
      {
        name: "dataManagement",
        label: t('Menu.dataManagement'),
        icon: "el-icon-folder",
        routes: [
          "/soilAcidReductionData",
          "/soilAcidificationData",
          "/crossSectionSampleData",
          "/irrigationWaterInputFluxData",
          "/heavyMetalEnterpriseData",
          "/atmosphericSampleData",
        ],
      },
      {
        name: "infoManagement",
        label: t('Menu.infoManagement'),
        icon: "el-icon-document",
        routes: ["/IntroductionUpdate"],
      },
      {
        name: "modelManagement",
        label: t('Menu.modelManagement'),
        icon: "el-icon-cpu",
        routes: ["/ModelSelection", "/thres", "/ModelTrain"],
      },
      {
        name: "userManagement",
        label: t('Menu.userManagement'),
        icon: "el-icon-user",
        routes: ["/UserManagement"],
      },
    ];
  } else {
    return [
      {
        name: "introduction",
        label: t('Menu.swIntroduce'),
        icon: "el-icon-info-filled",
        routes: ["/SoilPro", "/Overview", "/ResearchFindings", "/Unit"],
      },
      {
        name: "acidmodelmap",
        label: t('Menu.mapcalulate'),
        icon: "el-icon-data-analysis",
        routes: ["/shaoguan_acidmodelmap","nanxiong_acidmodelmap"],
      },
      {
        name: "Calculation",
        label: t('Menu.reversionmodel'),
        icon: "el-icon-data-analysis",
        routes: ["/Calculation", "/SoilAcidReductionIterativeEvolution"],
      },
      {
        name: "AcidNeutralizationModel",
        label: t('Menu.reducemodel'),
        icon: "el-icon-data-analysis",
        routes: ["/AcidNeutralizationModel", "/SoilAcidificationIterativeEvolution"],
      },
      {
        name: "dataStatistics",
        label: t('Menu.dataStatistics'),
        icon: "el-icon-pie-chart",
        routes: [
          "/DetectionStatistics",
          "/FarmlandPollutionStatistics",
          "/LandClutivatesStatistics",
          "/SoilacidificationStatistics",
        ],
      },
    ];
  }
});

const activeName = ref(tabs.value[0]?.name || "");
const showTabs = computed(() => tabs.value.length > 1);
const tabStyle = computed(() =>
  tabs.value.length === 1 ? { width: "100%", justifyContent: "center" } : {}
);
let hasNavigated = false;

watch(
  () => activeName.value,
  (newTab) => {
    const tab = tabs.value.find((t) => t.name === newTab);
    const targetPath = tab?.routes?.[0];
    if (!hasNavigated) {
      hasNavigated = true;
      return;
    }
    if (tab && targetPath && router.currentRoute.value.path !== targetPath)
      router.push({ path: targetPath });
  },
  { immediate: true }
);

const activeAsideTab = ref(activeName.value || "");
const handleClick = (tab: any, _event?: Event) => {
  activeAsideTab.value = tab.name || tab.props?.name;
};

const AsideComponent = computed(() => {
  return [
    "dataManagement",
    "infoManagement",
    "modelManagement",
    "userManagement",
  ].includes(activeName.value)
    ? defineAsyncComponent(() => import("./AppAsideForTab2.vue"))
    : defineAsyncComponent(() => import("./AppAside.vue"));
});

const showAside = computed(
  () =>
    !isFullScreen.value && !["cropRiskAssessment"].includes(activeName.value)
);

const mainStyle = computed(() => ({
  padding: ["mapView", "infoManagement"].includes(activeName.value)
    ? "0"
    : "20px",
  overflow: "hidden",
}));

// 登出逻辑 - 支持多语言
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm(
      t('logout.confirmMessage'), 
      t('logout.confirmTitle'),
      {
        confirmButtonText: t('logout.confirmButton'),
        cancelButtonText: t('logout.cancelButton'),
        type: "warning",
      }
    );
    await logout();
    tokenStore.clearToken();
    
    ElMessage.success(t('logout.logoutSuccess'));
    
    setTimeout(() => {
      router.push("/login");
    }, 1000);
  } catch (error) {
    if (error === 'cancel' || error?.toString().includes('cancel')) {
      // 用户取消操作
    } else {
      ElMessage.error(t('logout.logoutFailed'));
      console.error("退出登录错误:", error);
    }
  }
};
</script>

<style>
/* 隐藏所有滚动条 */
*::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

* {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* 整体布局容器 */
.layout-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative; /* 创建层叠上下文 */
  background-color: #f5f7fa; /* 默认背景色 */
  /* 确保 layout-wrapper 自身的 z-index 不干扰子元素，或根据需要设置 */
  /* z-index: 0; */ /* 通常不需要显式设置，除非有特殊需求 */
}

/* 背景层 - 关键修改 */
.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 将背景层的 z-index 设为一个较低的负值或非常小的正值，确保它在最底层 */
  z-index: -1; /* 修改点：使用负值确保其在最底层，避免任何可能的遮挡 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.8);
}

/* 全屏页面特殊处理 */
.layout-wrapper.full-screen {
  background: none;
  min-height: 100vh;
}

/* 特殊背景页面的Header样式 */
.transparent-header {
  background: transparent !important;
  backdrop-filter: blur(2px); /* 添加轻微模糊效果增强可读性 */
}

/* 特殊背景页面的文字颜色 */
.light-text {
  color: #ffffff !important; /* 白色文字 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* 文字阴影增强可读性 */
}

/* 特殊背景页面的头像边框 */
.light-avatar-border {
  border: 2px solid #ffffff !important; /* 白色边框 */
}

/* 内容区域在特殊背景页面透明 */
.transparent-scroll {
  background-color: transparent !important;
}

/* Header 样式 */
.layout-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333; /* 深色文字 */
  flex-shrink: 0;
  /* 确保在背景层上方 */
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
  background-color: white; /* 默认背景色 */
}

/* 修改Header布局样式 */
.logo-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右两侧分布 */
  width: 100%;
  gap: 24px;
}

.title-and-user {
  display: flex;
  flex-direction: row;
  flex: 1;
}

/* 用户信息区域样式调整 */
.user-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #333;
}

.welcome-text {
  font-size: 28px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap; /* 防止文字换行 */
}

/* Tab 区域 - 不透明 */
.tabs-row {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  background: linear-gradient(to right, #1092d8, #02c3ad);
  border-bottom: none !important;
  flex-shrink: 0;
  /* 确保在背景层上方 */
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

/* el-tabs 外层容器 */
.demo-tabs {
  height: 48px !important;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

/* 清除滑块条和底部线条 */
.el-tabs__nav-wrap::after,
.el-tabs__active-bar {
  display: none !important;
  height: 0 !important;
  border: none !important;
}

.el-tabs__nav-scroll {
  padding: 0 !important;
  margin: 0 !important;
}

/* Tabs 单项样式 */
.el-tabs__item {
  height: 48px !important;
  line-height: 48px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 20px !important;
  font-size: 20px;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
  background-color: transparent;
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

/* 激活 Tab */
.el-tabs__item.is-active {
  background-color: #2a53ba;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(26, 188, 156, 0.4);
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 11; /* 激活项可以更高一点 */
}

/* 鼠标悬停 */
.el-tabs__item:hover {
  background-color: #455a64;
  color: #ffffff;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 11; /* 悬停时也可以更高 */
}

/* 图标样式 */
.tab-icon {
  font-size: 24px;
  margin-right: 4px;
  color: inherit;
}

/* 文字样式 */
.tab-label-text {
  font-size: 20px;
  color: inherit;
  line-height: 1;
  display: inline-block;
}

.logo {
  height: 60px;
}

.project-name {
  font-size: 32px; /* 适当调整字体大小 */
  font-weight: bold;
  color: #333;
  white-space: nowrap; /* 防止标题换行 */
}

/* 响应式设计：在小屏幕上调整布局 */
@media (max-width: 1200px) {
  .project-name {
    font-size: 20px;
  }
  
  .welcome-text {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .logo-title-row {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .left-section {
    order: 1;
    width: 100%;
    justify-content: center;
  }
  
  .right-section {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  
  .project-name {
    font-size: 18px;
    text-align: center;
  }
}

.layout-main-container {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
  /* 确保在背景层上方 */
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

/* 侧边栏 - 白色背景 */
.layout-aside {
  width: 280px;
  background: linear-gradient(to bottom, #b7f1fc, #fff8f0);
  border-right: 1px solid;
  overflow-y: auto;
  color: #000000;
  padding-top: 8px;
  height: 100%;
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

/* 隐藏侧边栏滚动条 */
.layout-aside::-webkit-scrollbar {
  display: none;
}

.layout-aside .el-menu-item,
.layout-aside .el-sub-menu__title {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  background-color: transparent;
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 12px 16px !important;
}

.layout-aside .el-menu-item:hover,
.layout-aside .el-sub-menu__title:hover {
  background-color: rgba(16, 146, 216, 0.1);
  color: #1092d8;
}

.layout-aside .el-menu-item.is-active,
.layout-aside .el-sub-menu__title.is-active {
  background: linear-gradient(to right, #1092d8, #02c3ad);
  color: #000000 !important;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(16, 146, 216, 0.25);
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 11; /* 激活项可以更高一点 */
}

.layout-content-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

/* 强制重置 el-tabs header 高度/边距/背景/阴影，避免背景层穿透错位 */
.el-tabs__header.is-top {
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10 !important; /* 增大 z-index */
}

/* 全屏页面特殊处理 */
.layout-wrapper.full-screen .layout-main-container {
  height: 100vh;
}

.scrollable-content {
  flex: 1;
  overflow: auto;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: white; /* 默认背景色 */
  position: relative; /* 确保它可以参与 z-index 计算 */
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 增大 z-index */
}

.scrollable-content.transparent-scroll {
  background-color: transparent;
  /* 修改点：增大 z-index 确保在背景层之上 */
  z-index: 10; /* 即使透明也应保持在上层 */
}

/* 左侧区域 */
.left-section {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0; /* 防止缩小 */
}

/* 右侧区域 */
.right-section {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0; /* 防止缩小 */
}

/* 语言切换按钮样式 */
.lang-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.lang-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.lang-toggle-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.lang-toggle-btn .el-icon-globe {
  font-size: 18px;
  color: #ffffff;
}

.lang-toggle-btn .lang-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 浅色文字模式（特殊背景页面） */
.lang-toggle-btn.light-text {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.lang-toggle-btn.light-text .el-icon-globe {
  color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lang-toggle-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .lang-toggle-btn .el-icon-globe {
    font-size: 16px;
  }
  
  .lang-toggle-btn .lang-label {
    font-size: 11px;
  }
}
</style>