refactor: 调整components目录

- 将components根据作用范围/可复用性进行分类
2025-10-28 16:01:34 +08:00
parent 8883dc3fcc
commit dc90e1045b
13 changed files with 7 additions and 0 deletions
--- a/app/components/shared/JinshenHeader.vue
+++ b/app/components/shared/JinshenHeader.vue
@ -0,0 +1,170 @@
+<template>
+  <header class="header-container">
+    <div class="logo-section">
+      <NuxtLink :to="$localePath('/')" class="logo-link">
+        <el-image
+          class="website-logo"
+          src="/jinshen-logo.png"
+          alt="Jinshen Logo"
+          fit="contain"
+        />
+      </NuxtLink>
+    </div>
+
+    <div class="header-menu-section">
+      <!-- 导航菜单 -->
+      <el-menu
+        :default-active="activeName"
+        class="header-menu"
+        mode="horizontal"
+        :ellipsis="false"
+        :persistent="false"
+        router
+      >
+        <el-menu-item index="products" :route="$localePath('/products')">
+          <span class="title">{{ $t('navigation.products') }}</span>
+        </el-menu-item>
+        <el-menu-item index="solutions" :route="$localePath('/solutions')">
+          <span class="title">{{ $t('navigation.solutions') }}</span>
+        </el-menu-item>
+        <el-menu-item index="support" :route="$localePath('/support')">
+          <span class="title">{{ $t('navigation.support') }}</span>
+        </el-menu-item>
+        <el-menu-item index="about" :route="$localePath('/about')">
+          <span class="title">{{ $t('navigation.about-us') }}</span>
+        </el-menu-item>
+      </el-menu>
+    </div>
+
+    <!-- 右侧功能区 -->
+    <div class="header-actions">
+      <el-link
+        class="search-link"
+        :underline="false"
+        type="info"
+        @click="navigateTo(localePath('/search'))"
+      >
+        <el-icon class="mdi mdi-magnify action-icon" />
+      </el-link>
+
+      <el-link
+        type="info"
+        :underline="false"
+        href="http://cal.jinshen.cn"
+        target="_blank"
+      >
+        <el-icon class="mdi mdi-calculator action-icon" />
+      </el-link>
+
+      <el-dropdown @command="setLocale">
+        <el-link type="info" :underline="false">
+          <el-icon class="mdi mdi-translate action-icon" />
+        </el-link>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
+            <el-dropdown-item command="en">English</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+  const router = useRouter();
+  const localePath = useLocalePath();
+
+  const { setLocale } = useI18n();
+
+  const activeName = ref<string | undefined>(undefined);
+
+  const refreshMenu = () => {
+    const path = router.currentRoute.value.path;
+    if (path.startsWith('/products')) {
+      activeName.value = 'products';
+    } else if (path.startsWith('/solutions')) {
+      activeName.value = 'solutions';
+    } else if (path.startsWith('/support')) {
+      activeName.value = 'support';
+    } else if (path.startsWith('/about')) {
+      activeName.value = 'about';
+    } else {
+      activeName.value = undefined; // 默认不激活任何菜单项
+    }
+  };
+
+  onMounted(() => {
+    refreshMenu();
+    // 监听路由变化以更新激活状态
+    router.afterEach(() => {
+      refreshMenu();
+    });
+  });
+</script>
+
+<style scoped>
+  .header-container {
+    padding: 0 10px;
+    display: flex;
+    height: 80px;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .logo-section {
+    display: flex;
+    flex: 1;
+    margin-left: 20px;
+  }
+
+  .logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
+
+  .website-logo {
+    height: 64px;
+    width: auto;
+  }
+
+  .header-menu-section {
+    flex: 2;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .header-menu {
+    margin-right: 40px;
+    border-bottom: none !important;
+    width: auto;
+    --el-menu-horizontal-height: 100%;
+  }
+
+  .header-menu .el-menu-item {
+    font-size: 16px;
+    background-color: transparent !important;
+  }
+
+  .header-menu .el-menu-item.is-active {
+    border-bottom: 2.5px solid var(--el-color-primary-dark-2);
+    color: var(--el-color-primary);
+  }
+
+  .header-menu .el-menu-item:hover {
+    border-bottom: 2.5px solid var(--el-color-primary);
+  }
+
+  .header-actions {
+    flex: 1;
+    justify-content: flex-end;
+    display: flex;
+    gap: 16px;
+  }
+
+  .action-icon {
+    font-size: 24px;
+  }
+</style>