style: 调整代码格式
- 根据ESLint文件规范格式化app文件夹中的代码
This commit is contained in:
@ -1,162 +1,183 @@
|
||||
<template>
|
||||
<div 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="productions" :route="$localePath('/productions')">
|
||||
<span class="title">{{ $t('navigation.productions') }}</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-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
|
||||
:prefix-icon="Search" clearable @keyup.enter="handleSearch" />
|
||||
<el-dropdown @command="setLocale">
|
||||
<el-link type="info" :underline="false">
|
||||
<el-icon class="mdi mdi-translate translate-link" />
|
||||
</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>
|
||||
<div 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="productions" :route="$localePath('/productions')">
|
||||
<span class="title">{{ $t("navigation.productions") }}</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-input
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
:placeholder="$t('search-placeholder')"
|
||||
:prefix-icon="Search"
|
||||
clearable
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<el-dropdown @command="setLocale">
|
||||
<el-link type="info" :underline="false">
|
||||
<el-icon class="mdi mdi-translate translate-link" />
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import { MeiliSearch } from "meilisearch";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { setLocale } = useI18n();
|
||||
|
||||
const searchQuery = ref('')
|
||||
const searchQuery = ref("");
|
||||
|
||||
const activeName = ref<string | undefined>(undefined)
|
||||
const activeName = ref<string | undefined>(undefined);
|
||||
|
||||
const handleSearch = () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
|
||||
console.log('Searching for:', searchQuery.value);
|
||||
// 示例：导航到搜索结果页面
|
||||
// router.push({ path: '/search', query: { q: searchQuery.value } });
|
||||
}
|
||||
}
|
||||
const handleSearch = async () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
|
||||
console.log("Searching for:", searchQuery.value);
|
||||
const meiliClient = new MeiliSearch({
|
||||
host: process.env.MEILI_HOST || "http://192.168.86.5:7700",
|
||||
});
|
||||
const index = meiliClient.index("production");
|
||||
const search = await index.search(searchQuery.value, {
|
||||
limit: 20,
|
||||
});
|
||||
console.log("Search results:", search.hits);
|
||||
}
|
||||
};
|
||||
|
||||
const refreshMenu = () => {
|
||||
const path = router.currentRoute.value.path;
|
||||
if (path.startsWith('/productions')) {
|
||||
activeName.value = 'productions';
|
||||
} 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; // 默认不激活任何菜单项
|
||||
}
|
||||
}
|
||||
const path = router.currentRoute.value.path;
|
||||
if (path.startsWith("/productions")) {
|
||||
activeName.value = "productions";
|
||||
} 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();
|
||||
// 监听路由变化以更新激活状态
|
||||
router.afterEach(() => {
|
||||
refreshMenu();
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-container {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
height: 80px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.website-logo {
|
||||
height: 64px;
|
||||
width: auto;
|
||||
height: 64px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
.header-menu-section {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
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%;
|
||||
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;
|
||||
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);
|
||||
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);
|
||||
border-bottom: 2.5px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.translate-link {
|
||||
font-size: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user