app/components/JinshenHeader.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="header-container">
+        <NuxtLink to="/" class="logo-section">
+            <el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
+        </NuxtLink>
+
+        <!-- 导航菜单 -->
+        <el-menu default-active="productions" class="header-menu" mode="horizontal" :ellipsis="false" router>
+            <el-menu-item index="/productions">
+                <span class="title">产品中心</span>
+            </el-menu-item>
+            <el-menu-item index="/solutions">
+                <span class="title">解决方案</span>
+            </el-menu-item>
+            <el-menu-item index="/support">
+                <span class="title">服务支持</span>
+            </el-menu-item>
+            <el-menu-item index="/about">
+                <span class="title">关于我们</span>
+            </el-menu-item>
+        </el-menu>
+
+        <!-- 右侧功能区 -->
+        <div class="header-actions">
+            <el-input
+v-model="searchQuery" class="search-input" placeholder="搜索..." :prefix-icon="Search" clearable
+                @keyup.enter="handleSearch" />
+            <el-dropdown>
+                <el-link type="info" :underline="false">
+                    <el-icon class="mdi mdi-translate translate-link" />
+                </el-link>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item>中文</el-dropdown-item>
+                        <el-dropdown-item>English</el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+
+const searchQuery = ref('')
+
+const handleSearch = () => {
+    if (searchQuery.value.trim()) {
+        // 这里可以添加搜索逻辑，例如导航到搜索结果页面
+        console.log('Searching for:', searchQuery.value);
+        // 示例：导航到搜索结果页面
+        // router.push({ path: '/search', query: { q: searchQuery.value } });
+    }
+}
+</script>
+
+<style scoped>
+.header-container {
+    margin: 0 auto;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.logo-section {
+    display: flex;
+    flex: 1;
+    align-items: center;
+}
+
+.website-logo {
+    height: 64px;
+    width: auto;
+}
+
+.header-menu {
+    margin-right: 40px;
+    border-bottom: none !important;
+    width: auto;
+}
+
+.header-menu .el-menu-item {
+    border-bottom: none !important;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.search-input {
+    width: 200px;
+}
+
+.translate-link {
+    font-size: 20px;
+}
+</style>

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "nuxt-app",
       "dependencies": {
+        "@mdi/font": "^7.4.47",
         "@nuxt/eslint": "1.8.0",
         "@nuxt/fonts": "0.11.4",
         "@nuxt/icon": "2.0.0",
@@ -237,6 +238,8 @@
 
     "@mapbox/node-pre-gyp": ["@mapbox/node-pre-gyp@2.0.0", "", { "dependencies": { "consola": "^3.2.3", "detect-libc": "^2.0.0", "https-proxy-agent": "^7.0.5", "node-fetch": "^2.6.7", "nopt": "^8.0.0", "semver": "^7.5.3", "tar": "^7.4.0" }, "bin": { "node-pre-gyp": "bin/node-pre-gyp" } }, "sha512-llMXd39jtP0HpQLVI37Bf1m2ADlEb35GYSh1SDSLsBhR+5iCxiNGlT31yqbNtVHygHAtMy6dWFERpU2JgufhPg=="],
 
+    "@mdi/font": ["@mdi/font@7.4.47", "", {}, "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.0.3", "", { "dependencies": { "@emnapi/core": "^1.4.5", "@emnapi/runtime": "^1.4.5", "@tybys/wasm-util": "^0.10.0" } }, "sha512-rZxtMsLwjdXkMUGC3WwsPwLNVqVqnTJT6MNIB6e+5fhMcSCPP0AOsNWuMQ5mdCq6HNjs/ZeWAEchpqeprqBD2Q=="],
 
     "@netlify/binary-info": ["@netlify/binary-info@1.0.0", "", {}, "sha512-4wMPu9iN3/HL97QblBsBay3E1etIciR84izI3U+4iALY+JHCrI+a2jO0qbAZ/nxKoegypYEaiiqWXylm+/zfrw=="],

nuxt.config.ts

@@ -19,7 +19,11 @@ export default defineNuxtConfig({
   },
 
   // css
-  css: ["@unocss/reset/tailwind.css", "~/assets/scss/index.scss"],
+  css: [
+    "@unocss/reset/tailwind.css",
+    "~/assets/scss/index.scss",
+    "@mdi/font/css/materialdesignicons.min.css",
+  ],
 
   nitro: {
     esbuild: {

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
     "@nuxt/eslint": "1.8.0",
     "@nuxt/fonts": "0.11.4",
     "@nuxt/icon": "2.0.0",