remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加搜索功能 #10

Manually merged
remilia merged 8 commits from dev/search into master 2025-09-16 16:15:43 +08:00
Conversation 0 Commits 8 Files Changed 41 +13708 -4239
41 changed files with 13708 additions and 4239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -23,7 +23,7 @@
## 安装与设置 ## 安装与设置
> [!NOTE] > [!NOTE]
> 本项目默认使用bun作为包管理器 > 本项目默认使用pnpm作为包管理器
1. 克隆项目仓库： 1. 克隆项目仓库：
@ -40,13 +40,13 @@ cd jinshen-website
3. 安装依赖 3. 安装依赖
``` bash ``` bash
bun install pnpm install
``` ```
4. 运行开发环境 4. 运行开发环境
``` bash ``` bash
bun run dev pnpm run dev
``` ```
5. 访问开发环境 5. 访问开发环境
@ -66,12 +66,12 @@ bun run dev
项目构建 项目构建
``` bash ``` bash
bun run build pnpm run build
``` ```
预览构建版本 预览构建版本
```bash ```bash
bun run preview pnpm run preview
``` ```
2. 部署 2. 部署

13
app/app.vue
View File

@ -9,7 +9,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ElConfigProvider } from 'element-plus'; import { ElConfigProvider } from "element-plus";
const { login } = useStrapiAuth(); const { login } = useStrapiAuth();
@ -17,21 +17,20 @@ const { getElementPlusLocale } = useLocalizations();
const elementPlusLocale = getElementPlusLocale(); const elementPlusLocale = getElementPlusLocale();
onMounted(() => { onMounted(() => {
// 检查用户是否已登录 // 检查用户是否已登录
const user = useStrapiUser(); const user = useStrapiUser();
if (!user.value) { if (!user.value) {
// 如果未登录，重定向到登录页面 // 如果未登录，重定向到登录页面
login({ identifier: 'remilia', password: 'huanshuo51' }) login({ identifier: "remilia", password: "huanshuo51" })
.then(() => { .then(() => {
console.log('Login successful'); console.log("Login successful");
}) })
.catch((error) => { .catch((error) => {
console.error('Login failed:', error); console.error("Login failed:", error);
}); });
} else { } else {
console.log('User is already logged in:', user.value); console.log("User is already logged in:", user.value);
} }
}); });
</script> </script>

96
app/components/DocumentList.vue
View File

@ -1,65 +1,75 @@
<template> <template>
<div class="document-list"> <div class="document-list">
<el-card v-for="(doc, index) in documents" :key="index" class="document-card"> <el-card
<div class="document-info"> v-for="(doc, index) in documents"
<h3>{{ doc.caption || doc.name }}</h3> :key="index"
<div class="document-content"> class="document-card"
<span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }} </span> >
<span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span> <div class="document-info">
<el-button <h3>{{ doc.caption || doc.name }}</h3>
class="download-button" type="primary" <div class="document-content">
@click="handleDownload(doc.name, doc.url)"> <span v-if="doc.size" class="document-meta"
下载 >大小: {{ formatFileSize(doc.size) }}
</el-button> </span>
</div> <span v-if="doc.ext" class="document-meta"
</div> >格式: {{ formatFileExtension(doc.ext) }}</span
</el-card> >
</div> <el-button
class="download-button"
type="primary"
@click="handleDownload(doc.name, doc.url)"
>
下载
</el-button>
</div>
</div>
</el-card>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps({ defineProps({
documents: { documents: {
type: Array as () => Array<StrapiMedia>, type: Array as () => Array<StrapiMedia>,
default: () => [] default: () => [],
} },
}) });
const handleDownload = async (fileName: string, fileUrl: string) => { const handleDownload = async (fileName: string, fileUrl: string) => {
const response = await fetch(fileUrl) const response = await fetch(fileUrl);
const blob = await response.blob() const blob = await response.blob();
const url = window.URL.createObjectURL(blob) const url = window.URL.createObjectURL(blob);
const link = document.createElement('a') const link = document.createElement("a");
link.href = url link.href = url;
link.download = fileName link.download = fileName;
document.body.appendChild(link) document.body.appendChild(link);
link.click() link.click();
document.body.removeChild(link) document.body.removeChild(link);
window.URL.revokeObjectURL(url) window.URL.revokeObjectURL(url);
} };
</script> </script>
<style scoped> <style scoped>
.document-list { .document-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
width: 100%; width: 100%;
} }
.document-meta { .document-meta {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
} }
.download-button { .download-button {
margin-left: auto; margin-left: auto;
} }
.document-content { .document-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
</style> </style>

73
app/components/JinshenFooter.vue
View File

@ -5,55 +5,63 @@
<div class="footer-section"> <div class="footer-section">
<div class="footer-logo"> <div class="footer-logo">
<img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image"> <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image">
<h3>{{ $t('company-name') }}</h3> <h3>{{ $t("company-name") }}</h3>
</div> </div>
<p class="company-description"> <p class="company-description">
{{ $t('company-description') }} {{ $t("company-description") }}
</p> </p>
</div> </div>
<!-- 快速链接 --> <!-- 快速链接 -->
<div class="footer-section"> <div class="footer-section">
<h4>{{ $t('quick-links') }}</h4> <h4>{{ $t("quick-links") }}</h4>
<ul class="footer-links"> <ul class="footer-links">
<li> <li>
<NuxtLinkLocale to="/">{{ $t('navigation.home') }}</NuxtLinkLocale> <NuxtLinkLocale to="/">{{ $t("navigation.home") }}</NuxtLinkLocale>
</li> </li>
<li> <li>
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink> <NuxtLink :to="$localePath('/productions')">{{
$t("navigation.productions")
}}</NuxtLink>
</li> </li>
<li> <li>
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink> <NuxtLink :to="$localePath('/solutions')">{{
$t("navigation.solutions")
}}</NuxtLink>
</li> </li>
<li> <li>
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink> <NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</NuxtLink>
</li> </li>
<li> <li>
<NuxtLink :to="$localePath('/about')">{{ $t('navigation.about-us') }}</NuxtLink> <NuxtLink :to="$localePath('/about')">{{
$t("navigation.about-us")
}}</NuxtLink>
</li> </li>
</ul> </ul>
</div> </div>
<!-- 联系信息 --> <!-- 联系信息 -->
<div class="footer-section"> <div class="footer-section">
<h4>{{ $t('contact-info') }}</h4> <h4>{{ $t("contact-info") }}</h4>
<div class="contact-item"> <div class="contact-item">
<el-icon><Phone /></el-icon> <el-icon><Phone /></el-icon>
<span>{{ $t('telephone') }}: 0573-88187988</span> <span>{{ $t("telephone") }}: 0573-88187988</span>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<el-icon><Message /></el-icon> <el-icon><Message /></el-icon>
<span>{{ $t('email') }}: jinshen@wzjinshen.com</span> <span>{{ $t("email") }}: jinshen@wzjinshen.com</span>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<el-icon><Location /></el-icon> <el-icon><Location /></el-icon>
<span>{{ $t('address') }}: {{ $t('company-address') }}</span> <span>{{ $t("address") }}: {{ $t("company-address") }}</span>
</div> </div>
</div> </div>
<!-- 社交媒体 --> <!-- 社交媒体 -->
<div class="footer-section"> <div class="footer-section">
<h4>{{ $t('follow-us') }}</h4> <h4>{{ $t("follow-us") }}</h4>
<div class="social-links"> <div class="social-links">
<a href="#" class="social-link" aria-label="WeChat"> <a href="#" class="social-link" aria-label="WeChat">
<el-icon size="20"><ChatDotRound /></el-icon> <el-icon size="20"><ChatDotRound /></el-icon>
@ -75,15 +83,22 @@
<div class="footer-bottom"> <div class="footer-bottom">
<div class="footer-container"> <div class="footer-container">
<div class="copyright"> <div class="copyright">
<p>&copy; {{ currentYear }} {{ $t('company-name') }}. {{ $t('all-rights-reserved') }}</p> <p>
&copy; {{ currentYear }} {{ $t("company-name") }}.
{{ $t("all-rights-reserved") }}
</p>
<p>备案号: 浙ICP备12003709号-5</p> <p>备案号: 浙ICP备12003709号-5</p>
</div> </div>
<div class="footer-links-bottom"> <div class="footer-links-bottom">
<NuxtLink :to="$localePath('/privacy')">{{ $t('privacy-policy') }}</NuxtLink> <NuxtLink :to="$localePath('/privacy')">{{
$t("privacy-policy")
}}</NuxtLink>
<span class="separator">|</span> <span class="separator">|</span>
<NuxtLink :to="$localePath('/terms')">{{ $t('terms-of-service') }}</NuxtLink> <NuxtLink :to="$localePath('/terms')">{{
$t("terms-of-service")
}}</NuxtLink>
<span class="separator">|</span> <span class="separator">|</span>
<NuxtLink :to="$localePath('/sitemap')">{{ $t('sitemap') }}</NuxtLink> <NuxtLink :to="$localePath('/sitemap')">{{ $t("sitemap") }}</NuxtLink>
</div> </div>
</div> </div>
</div> </div>
@ -91,16 +106,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { import {
Phone, Phone,
Message, Message,
Location, Location,
ChatDotRound, ChatDotRound,
Star, Star,
Link Link,
} from '@element-plus/icons-vue' } from "@element-plus/icons-vue";
const currentYear = new Date().getFullYear() const currentYear = new Date().getFullYear();
</script> </script>
<style scoped> <style scoped>
@ -249,13 +264,13 @@ const currentYear = new Date().getFullYear()
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 1.5rem 1rem; padding: 1.5rem 1rem;
} }
.footer-bottom .footer-container { .footer-bottom .footer-container {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
gap: 1rem; gap: 1rem;
} }
.footer-links-bottom { .footer-links-bottom {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -267,7 +282,7 @@ const currentYear = new Date().getFullYear()
.jinshen-footer { .jinshen-footer {
background: var(--el-bg-color-page); background: var(--el-bg-color-page);
} }
.footer-bottom { .footer-bottom {
background: var(--el-fill-color-darker); background: var(--el-fill-color-darker);
} }

228
app/components/JinshenHeader.vue
View File

@ -1,162 +1,180 @@
<template> <template>
<div class="header-container"> <div class="header-container">
<div class="logo-section"> <div class="logo-section">
<NuxtLink :to="$localePath('/')" class="logo-link"> <NuxtLink :to="$localePath('/')" class="logo-link">
<el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" /> <el-image
</NuxtLink> class="website-logo"
</div> src="/jinshen-logo.png"
alt="Jinshen Logo"
<div class="header-menu-section"> fit="contain"
<!-- 导航菜单 --> />
<el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false" </NuxtLink>
: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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Search } from '@element-plus/icons-vue'; import { Search } from "@element-plus/icons-vue";
const router = useRouter(); const router = useRouter();
const localePath = useLocalePath();
const { setLocale } = useI18n(); const { setLocale } = useI18n();
const searchQuery = ref('') const searchQuery = ref("");
const activeName = ref<string | undefined>(undefined) const activeName = ref<string | undefined>(undefined);
const handleSearch = () => { const handleSearch = () => {
if (searchQuery.value.trim()) { const trimmed = searchQuery.value.trim();
// 这里可以添加搜索逻辑，例如导航到搜索结果页面 if (!trimmed) return;
console.log('Searching for:', searchQuery.value); navigateTo({
// 示例：导航到搜索结果页面 path: localePath("/search"),
// router.push({ path: '/search', query: { q: searchQuery.value } }); query: {
} query: trimmed,
} },
});
searchQuery.value = "";
};
const refreshMenu = () => { const refreshMenu = () => {
const path = router.currentRoute.value.path; const path = router.currentRoute.value.path;
if (path.startsWith('/productions')) { if (path.startsWith("/productions")) {
activeName.value = 'productions'; activeName.value = "productions";
} else if (path.startsWith('/solutions')) { } else if (path.startsWith("/solutions")) {
activeName.value = 'solutions'; activeName.value = "solutions";
} else if (path.startsWith('/support')) { } else if (path.startsWith("/support")) {
activeName.value = 'support'; activeName.value = "support";
} else if (path.startsWith('/about')) { } else if (path.startsWith("/about")) {
activeName.value = 'about'; activeName.value = "about";
} else { } else {
activeName.value = undefined; // 默认不激活任何菜单项 activeName.value = undefined; // 默认不激活任何菜单项
} }
} };
onMounted(() => { onMounted(() => {
refreshMenu();
// 监听路由变化以更新激活状态
router.afterEach(() => {
refreshMenu(); refreshMenu();
// 监听路由变化以更新激活状态 });
router.afterEach(() => { });
refreshMenu();
});
})
</script> </script>
<style scoped> <style scoped>
.header-container { .header-container {
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
height: 80px; height: 80px;
align-items: center; align-items: center;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
} }
.logo-section { .logo-section {
display: flex; display: flex;
flex: 1; flex: 1;
margin-left: 20px; margin-left: 20px;
} }
.logo-link { .logo-link {
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
} }
.website-logo { .website-logo {
height: 64px; height: 64px;
width: auto; width: auto;
} }
.header-menu-section { .header-menu-section {
flex: 2; flex: 2;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
} }
.header-menu { .header-menu {
margin-right: 40px; margin-right: 40px;
border-bottom: none !important; border-bottom: none !important;
width: auto; width: auto;
--el-menu-horizontal-height: 100%; --el-menu-horizontal-height: 100%;
} }
.header-menu .el-menu-item { .header-menu .el-menu-item {
font-size: 16px; font-size: 16px;
background-color: transparent !important; background-color: transparent !important;
} }
.header-menu .el-menu-item.is-active { .header-menu .el-menu-item.is-active {
border-bottom: 2.5px solid var(--el-color-primary-dark-2); border-bottom: 2.5px solid var(--el-color-primary-dark-2);
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.header-menu .el-menu-item:hover { .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 { .header-actions {
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
display: flex; display: flex;
gap: 16px; gap: 16px;
} }
.search-input { .search-input {
width: 200px; width: 200px;
} }
.translate-link { .translate-link {
font-size: 20px; font-size: 20px;
} }
</style> </style>

13
app/components/MarkdownRenderer.vue
View File

@ -6,19 +6,18 @@
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
content: string content: string;
} }
const props = defineProps<Props>() const props = defineProps<Props>();
const contentWithAbsoluteUrls = convertMedia(props.content) const contentWithAbsoluteUrls = convertMedia(props.content);
// 将 Markdown 转换成 HTML // 将 Markdown 转换成 HTML
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls)) const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls));
// const safeHtml = computed(() => renderMarkdown(props.content)) // const safeHtml = computed(() => renderMarkdown(props.content))
console.log('Rendered HTML:', safeHtml.value) console.log("Rendered HTML:", safeHtml.value);
</script> </script>
<style> <style>
@ -70,4 +69,4 @@ console.log('Rendered HTML:', safeHtml.value)
border-top: 1px solid var(--el-border-color); border-top: 1px solid var(--el-border-color);
margin: 20px 0; margin: 20px 0;
} }
</style> </style>

99
app/components/ProductionCard.vue
View File

@ -1,87 +1,86 @@
<template> <template>
<el-card class="production-card" @click="handleClick"> <el-card class="production-card" @click="handleClick">
<template #header> <template #header>
<!-- Image --> <!-- Image -->
<el-image class="production-image" :src="imageUrl" fit="contain" /> <el-image class="production-image" :src="imageUrl" fit="contain" />
</template> </template>
<div class="card-body"> <div class="card-body">
<!-- Name --> <!-- Name -->
<div class="text-center"> <div class="text-center">
<span class="production-name">{{ name }}</span> <span class="production-name">{{ name }}</span>
</div> </div>
<!-- Description --> <!-- Description -->
<div class="card-description text-left opacity-25">{{ description }}</div> <div class="card-description text-left opacity-25">{{ description }}</div>
</div> </div>
</el-card> </el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
name: string name: string;
description: string description: string;
imageUrl: string imageUrl: string;
id?: string | number id?: string | number;
slug?: string slug?: string;
} }
const props = defineProps<Props>() const props = defineProps<Props>();
const localePath = useLocalePath() const localePath = useLocalePath();
const handleClick = () => { const handleClick = () => {
// 优先使用 slug，如果没有则使用 id // 优先使用 slug，如果没有则使用 id
const routeParam = props.slug || props.id const routeParam = props.slug || props.id;
if (routeParam) { if (routeParam) {
navigateTo(localePath(`/productions/${routeParam}`)) navigateTo(localePath(`/productions/${routeParam}`));
} }
} };
</script> </script>
<style scoped> <style scoped>
.production-card { .production-card {
width: 30%; width: 30%;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
text-align: center; text-align: center;
} }
.production-card:hover { .production-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
.production-name { .production-name {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
.card-description { .card-description {
font-size: 0.8rem; font-size: 0.8rem;
margin-top: 5px; margin-top: 5px;
} }
.production-card .el-image { .production-card .el-image {
height: 150px; height: 150px;
border-radius: 4px; border-radius: 4px;
} }
.card-body { .card-body {
margin: 10px auto; margin: 10px auto;
padding: 0px auto; padding: 0px auto;
height: 100px; height: 100px;
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 1200px) { @media (max-width: 1200px) {
.production-card { .production-card {
width: 45%; width: 45%;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.production-card { .production-card {
width: 90%; width: 90%;
} }
} }
</style> </style>

67
app/components/QuestionList.vue
View File

@ -1,60 +1,61 @@
<template> <template>
<div class="question-list"> <div class="question-list">
<el-collapse class="question-collapse" accordion> <el-collapse class="question-collapse" accordion>
<el-collapse-item <el-collapse-item
v-for="(question, index) in questions" :key="index" :title="question.title" v-for="(question, index) in questions"
:name="String(index)"> :key="index"
<markdown-renderer :content="question.content || ''" /> :title="question.title"
</el-collapse-item> :name="String(index)"
</el-collapse> >
</div> <markdown-renderer :content="question.content || ''" />
</el-collapse-item>
</el-collapse>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
defineProps({ defineProps({
questions: { questions: {
type: Array as () => Array<{ title: string; content: string }>, type: Array as () => Array<{ title: string; content: string }>,
default: () => [] default: () => [],
} },
}) });
</script> </script>
<style scoped> <style scoped>
.question-list { .question-list {
width: 100%; width: 100%;
} }
.question-collapse { .question-collapse {
border: none; border: none;
} }
.question-collapse :deep(.el-collapse-item) { .question-collapse :deep(.el-collapse-item) {
margin-bottom: 1rem; margin-bottom: 1rem;
border-radius: 8px; border-radius: 8px;
} }
.question-collapse :deep(.el-collapse-item__header) { .question-collapse :deep(.el-collapse-item__header) {
font-size: 1rem; font-size: 1rem;
padding: 1rem; padding: 1rem;
border-radius: 8px; border-radius: 8px;
background-color: #f5f7fa; background-color: #f5f7fa;
transition: all 0.3s ease; transition: all 0.3s ease;
&.is-active { &.is-active {
background-color: #e1e6eb; background-color: #e1e6eb;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
.question-collapse :deep(.el-collapse-item__wrap) { .question-collapse :deep(.el-collapse-item__wrap) {
border: none; border: none;
} }
.question-collapse :deep(.el-collapse-item__content) { .question-collapse :deep(.el-collapse-item__content) {
padding: 1rem; padding: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
</style>
</style>

98
app/components/SolutionCard.vue
View File

@ -1,83 +1,85 @@
<template> <template>
<el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick"> <el-card
<template #header> class="solution-card"
<!-- Cover Image --> body-class="card-body"
<el-image class="solution-cover" :src="coverUrl" fit="cover" /> header-class="card-header"
</template> @click="handleClick"
<!-- Title --> >
<template #default> <template #header>
<div class="text-center mx-auto text-md"> <!-- Cover Image -->
<span class="solution-title">{{ title }}</span> <el-image class="solution-cover" :src="coverUrl" fit="cover" />
</div> </template>
<!-- Summary --> <!-- Title -->
<div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div> <template #default>
</template> <div class="text-center mx-auto text-md">
</el-card> <span class="solution-title">{{ title }}</span>
</div>
<!-- Summary -->
<div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
</template>
</el-card>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
title: string title: string;
summary: string summary: string;
coverUrl: string coverUrl: string;
documentId?: string documentId?: string;
} }
const props = defineProps<Props>() const props = defineProps<Props>();
const localePath = useLocalePath() const localePath = useLocalePath();
const handleClick = () => { const handleClick = () => {
const routeParam = props.documentId const routeParam = props.documentId;
if (routeParam) { if (routeParam) {
navigateTo(localePath(`/solutions/${routeParam}`)) navigateTo(localePath(`/solutions/${routeParam}`));
} }
} };
</script> </script>
<style scoped> <style scoped>
.solution-card { .solution-card {
width: 30%; width: 30%;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
text-align: center; text-align: center;
} }
.solution-card:hover { .solution-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
.solution-title { .solution-title {
font-weight: 600; font-weight: 600;
} }
:deep(.card-header) { :deep(.card-header) {
padding: 0; padding: 0;
border-bottom: none !important; border-bottom: none !important;
} }
:deep(.card-body) { :deep(.card-body) {
margin: 10px auto; margin: 10px auto;
padding: 1px auto; padding: 1px auto;
} }
.solution-card .el-image { .solution-card .el-image {
height: 250px; height: 250px;
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.solution-card { .solution-card {
width: 45%; width: 45%;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.solution-card { .solution-card {
width: 90%; width: 90%;
margin: 10px auto; margin: 10px auto;
} }
} }
</style> </style>

55
app/components/SpecTable.vue
View File

@ -1,34 +1,45 @@
<template> <template>
<div class="spec-collapse"> <div class="spec-collapse">
<el-collapse v-model="activeName"> <el-collapse v-model="activeName">
<el-collapse-item v-for="item in data" :key="item.title" :title="item.title" :name="item.title"> <el-collapse-item
<el-descriptions :column="1" border> v-for="item in data"
<el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label"> :key="item.title"
{{ subItem.value }} :title="item.title"
</el-descriptions-item> :name="item.title"
</el-descriptions> >
</el-collapse-item> <el-descriptions :column="1" border>
</el-collapse> <el-descriptions-item
</div> v-for="subItem in item.items"
:key="subItem.label"
:label="subItem.label"
>
{{ subItem.value }}
</el-descriptions-item>
</el-descriptions>
</el-collapse-item>
</el-collapse>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object as () => ProductionSpecGroup[], type: Object as () => ProductionSpecGroup[],
required: true required: true,
} },
}) });
// 默认全部展开 // 默认全部展开
const activeName = ref<string[]>(props.data.map((item: ProductionSpecGroup) => { const activeName = ref<string[]>(
return item.title props.data.map((item: ProductionSpecGroup) => {
}) || []) return item.title;
}) || []
);
</script> </script>
<style scoped> <style scoped>
.spec-collapse ::v-deep(.el-collapse-item__header) { .spec-collapse ::v-deep(.el-collapse-item__header) {
font-size: 1rem; font-size: 1rem;
padding: 1rem; padding: 1rem;
} }
</style> </style>

87
app/components/SupportTabs.vue
View File

@ -1,65 +1,64 @@
<template> <template>
<div class="page-tab"> <div class="page-tab">
<el-segmented <el-segmented
v-model="activeTab" v-model="activeTab"
class="segmented" class="segmented"
:options="options" :options="options"
block block
size="large" size="large"
@change="handleSegmentedChange" @change="handleSegmentedChange"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: String, type: String,
default: '', default: "",
}, },
}) });
const activeTab = ref(props.modelValue || '') const activeTab = ref(props.modelValue || "");
const options = [ const options = [
{ label: '服务支持', value: '' }, { label: "服务支持", value: "" },
{ label: '常见问题', value: 'faq' }, { label: "常见问题", value: "faq" },
{ label: '文档资料', value: 'documents' }, { label: "文档资料", value: "documents" },
{ label: '联系售后', value: 'contact-us' }, { label: "联系售后", value: "contact-us" },
] ];
const handleSegmentedChange = (value: string) => { const handleSegmentedChange = (value: string) => {
const localePath = useLocalePath() const localePath = useLocalePath();
navigateTo(localePath(`/support/${value}`)) navigateTo(localePath(`/support/${value}`));
} };
</script> </script>
<style scoped> <style scoped>
.segmented { .segmented {
--el-segmented-bg-color: transparent; --el-segmented-bg-color: transparent;
--el-segmented-item-active-color: var(--el-color-primary); --el-segmented-item-active-color: var(--el-color-primary);
--el-segmented-item-color: var(--el-text-color-secondary); --el-segmented-item-color: var(--el-text-color-secondary);
--el-segmented-item-hover-color: var(--el-color-primary); --el-segmented-item-hover-color: var(--el-color-primary);
--el-segmented-item-border-color: transparent; --el-segmented-item-border-color: transparent;
--el-segmented-item-active-border-color: transparent; --el-segmented-item-active-border-color: transparent;
border-bottom: 1px solid var(--el-border-color-light); border-bottom: 1px solid var(--el-border-color-light);
} }
.segmented :deep(.el-segmented__item-selected) { .segmented :deep(.el-segmented__item-selected) {
/* --el-border-radius-base: 16px; */ /* --el-border-radius-base: 16px; */
transition: none; transition: none;
background: transparent; background: transparent;
} }
.segmented :deep(.el-segmented__item) { .segmented :deep(.el-segmented__item) {
&:hover {
background: transparent;
color: var(--el-color-primary);
}
&:hover { &.is-selected {
background: transparent; color: var(--el-color-primary-dark-2);
color: var(--el-color-primary); border-bottom: 4px solid var(--el-color-primary-dark-2);
} }
&.is-selected {
color: var(--el-color-primary-dark-2);
border-bottom: 4px solid var(--el-color-primary-dark-2);
}
} }
</style> </style>

57
app/composables/useLocalizations.ts
View File

@ -1,39 +1,40 @@
import type { StrapiLocale } from '@nuxtjs/strapi'; import type { StrapiLocale } from "@nuxtjs/strapi";
import type { Language as ElementLanguage } from 'element-plus/es/locale'; import type { Language as ElementLanguage } from "element-plus/es/locale";
import zhCn from 'element-plus/es/locale/lang/zh-cn'; import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from 'element-plus/es/locale/lang/en'; import en from "element-plus/es/locale/lang/en";
// Strapi本地化映射 // Strapi本地化映射
export const strapiLocales: Record<string, StrapiLocale> = { export const strapiLocales: Record<string, StrapiLocale> = {
'zh': 'zh-CN', zh: "zh-CN",
'en': 'en' en: "en",
} };
// Element Plus本地化映射 // Element Plus本地化映射
export const elementPlusLocales: Record<string, ElementLanguage> = { export const elementPlusLocales: Record<string, ElementLanguage> = {
'zh': zhCn, zh: zhCn,
'en': en en: en,
} };
export const useLocalizations = () => { export const useLocalizations = () => {
const { locale } = useI18n(); const { locale } = useI18n();
// 获取Strapi本地化代码 // 获取Strapi本地化代码
const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => { const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
const currentLocale = nuxtLocale || locale.value; const currentLocale = nuxtLocale || locale.value;
return strapiLocales[currentLocale] || 'zh-Hans'; return strapiLocales[currentLocale] || "zh-Hans";
} };
// 获取Element Plus本地化 // 获取Element Plus本地化
const getElementPlusLocale = (nuxtLocale?: string) => { const getElementPlusLocale = (nuxtLocale?: string) => {
const currentLocale = nuxtLocale || locale.value; const currentLocale = nuxtLocale || locale.value;
const elementPlusLocale = elementPlusLocales[currentLocale] || elementPlusLocales['zh']; const elementPlusLocale =
return elementPlusLocale; elementPlusLocales[currentLocale] || elementPlusLocales["zh"];
} return elementPlusLocale;
};
return { return {
locale: readonly(locale), locale: readonly(locale),
getStrapiLocale, getStrapiLocale,
getElementPlusLocale, getElementPlusLocale,
} };
} };

132
app/composables/useMeilisearch.ts Normal file
View File

@ -0,0 +1,132 @@
import { MeiliSearch } from "meilisearch";
import type { SearchParams, SearchResponse } from "meilisearch";
interface RawSearchSection {
indexUid: string;
response: SearchResponse<Record<string, unknown>>;
}
export interface SearchHit extends Record<string, unknown> {
indexUid: string;
objectID?: string | number;
}
export interface SearchSection {
indexUid: string;
hits: SearchHit[];
estimatedTotalHits: number;
processingTimeMs: number;
}
const parseIndexes = (indexes: string | string[] | undefined): string[] => {
if (!indexes) {
return [];
}
if (Array.isArray(indexes)) {
return indexes.map((item) => item.trim()).filter(Boolean);
}
return indexes
.split(",")
.map((item) => item.trim())
.filter(Boolean);
};
export const useMeilisearch = () => {
const runtimeConfig = useRuntimeConfig();
const indexes = computed(() =>
parseIndexes(runtimeConfig.public?.meili?.indexes)
);
let meiliClient: MeiliSearch | null = null;
const ensureClient = () => {
if (meiliClient) return meiliClient;
const host = runtimeConfig.public?.meili?.host;
if (!host) {
console.warn("Meilisearch host is not configured.");
return null;
}
const apiKey = runtimeConfig.public?.meili?.searchKey;
meiliClient = new MeiliSearch({
host,
apiKey: apiKey || undefined,
});
return meiliClient;
};
const search = async (
query: string,
params: SearchParams = {}
): Promise<SearchSection[]> => {
const trimmedQuery = query.trim();
if (!trimmedQuery) {
return [];
}
const client = ensureClient();
if (!client) {
return [];
}
const activeIndexes = indexes.value;
if (!activeIndexes.length) {
console.warn("No Meilisearch indexes configured.");
return [];
}
const requests = activeIndexes.map(async (indexUid) => {
const response = await client.index(indexUid).search(trimmedQuery, {
limit: params.limit ?? 10,
...params,
});
const safeResponse = JSON.parse(JSON.stringify(response));
return {
indexUid,
response: {
hits: safeResponse.hits,
estimatedTotalHits:
safeResponse.estimatedTotalHits ?? safeResponse.hits.length,
processingTimeMs: safeResponse.processingTimeMs ?? 0,
query: safeResponse.query,
},
} satisfies RawSearchSection;
});
console.log((await requests[0])?.response.hits[0]?.locale);
const settled = await Promise.allSettled(requests);
settled
.filter(
(result): result is PromiseRejectedResult =>
result.status === "rejected"
)
.forEach((result) => {
console.error("Meilisearch query failed", result.reason);
});
return settled
.filter((result) => result.status === "fulfilled")
.map((result) => {
const fulfilled = result as PromiseFulfilledResult<RawSearchSection>;
return {
indexUid: fulfilled.value.indexUid,
hits: fulfilled.value.response.hits.map((hit) => ({
...hit,
indexUid: fulfilled.value.indexUid,
})),
estimatedTotalHits:
fulfilled.value.response.estimatedTotalHits ??
fulfilled.value.response.hits.length,
processingTimeMs: fulfilled.value.response.processingTimeMs ?? 0,
};
});
};
return {
search,
indexes,
};
};

44
app/layouts/default.vue
View File

@ -1,37 +1,37 @@
<template> <template>
<el-container class="app-container"> <el-container class="app-container">
<el-header height="auto" class="page-header"> <el-header height="auto" class="page-header">
<jinshen-header /> <jinshen-header />
</el-header> </el-header>
<el-main class="main-content"> <el-main class="main-content">
<slot /> <slot />
</el-main> </el-main>
<el-footer height="auto" class="page-footer"> <el-footer height="auto" class="page-footer">
<jinshen-footer /> <jinshen-footer />
</el-footer> </el-footer>
</el-container> </el-container>
</template> </template>
<style scoped> <style scoped>
.app-container { .app-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
} }
.page-header { .page-header {
padding: 0px; padding: 0px;
margin-bottom: auto; margin-bottom: auto;
} }
.main-content { .main-content {
flex: 1; flex: 1;
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
} }
.page-footer { .page-footer {
padding: 0px; padding: 0px;
} }
</style> </style>

18
app/pages/[...all].vue
View File

@ -1,17 +1,17 @@
<template> <template>
<main p="x4 y10" text="center teal-700 dark:gray-200"> <main p="x4 y10" text="center teal-700 dark:gray-200">
<div text4xl> <div text4xl>
<div i-ep-warning inline-block /> <div i-ep-warning inline-block />
</div> </div>
<div>{{ $t('not-found') }}</div> <div>{{ $t("not-found") }}</div>
<div> <div>
<button text-sm btn m="3 t8" @click="router.back()"> <button text-sm btn m="3 t8" @click="router.back()">
{{ $t('back') }} {{ $t("back") }}
</button> </button>
</div> </div>
</main> </main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const router = useRouter() const router = useRouter();
</script> </script>

160
app/pages/about/index.vue
View File

@ -1,125 +1,129 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="content"> <div v-if="content">
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')"> <NuxtLink :to="$localePath('/')">
{{ $t('navigation.home') }} {{ $t("navigation.home") }}
</NuxtLink> </NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/about')"> <NuxtLink :to="$localePath('/about')">
{{ $t('navigation.about-us') }} {{ $t("navigation.about-us") }}
</NuxtLink> </NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="content"> <div class="content">
<markdown-renderer :content="content || ''" /> <markdown-renderer :content="content || ''" />
</div> </div>
<el-divider content-position="left">更多信息</el-divider> <el-divider content-position="left">更多信息</el-divider>
<div class="button-group"> <div class="button-group">
<NuxtLink :to="$localePath('/support/contact-us')"> <NuxtLink :to="$localePath('/support/contact-us')">
<el-card class="card-button"> <el-card class="card-button">
<el-icon class="icon" size="80"> <el-icon class="icon" size="80">
<ElIconService /> <ElIconService />
</el-icon> </el-icon>
<br> <br>
联系信息 联系信息
</el-card> </el-card>
</NuxtLink> </NuxtLink>
</div> </div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div> </div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { findOne } = useStrapi() const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const content = ref<string | null>(null) const content = ref<string | null>(null);
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<StrapiCompanyProfile>('company-profile', undefined, { const response = await findOne<StrapiCompanyProfile>(
locale: strapiLocale, "company-profile",
}) undefined,
if (response.data) { {
content.value = response.data.content || '' locale: strapiLocale,
} else { }
console.warn('No company profile data found') );
} if (response.data) {
} catch (error) { content.value = response.data.content || "";
console.error('Failed to fetch company profile:', error) } else {
console.warn("No company profile data found");
} }
}) } catch (error) {
console.error("Failed to fetch company profile:", error);
}
});
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
padding: 2rem 1rem; padding: 2rem 1rem;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.breadcrumb { .breadcrumb {
padding: 1rem 1rem; padding: 1rem 1rem;
} }
.content { .content {
padding: 1rem; padding: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
:deep(.markdown-body p) { :deep(.markdown-body p) {
text-indent: 2em; text-indent: 2em;
} }
:deep(.markdown-body h2) { :deep(.markdown-body h2) {
text-align: center; text-align: center;
} }
:deep(.el-divider__text) { :deep(.el-divider__text) {
color: var(--el-color-info); color: var(--el-color-info);
font-size: 1em; font-size: 1em;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: left; justify-content: left;
margin-top: 2rem; margin-top: 2rem;
margin-left: 2rem; margin-left: 2rem;
} }
.card-button { .card-button {
width: 20%; width: 20%;
min-width: 200px; min-width: 200px;
padding: 20px; padding: 20px;
margin: 0 auto; margin: 0 auto;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
} }
.card-button:hover { .card-button:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
.icon { .icon {
padding: 10px; padding: 10px;
} }
.loading { .loading {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 1rem; margin-top: 1rem;
} }
</style> </style>

165
app/pages/index.vue
View File

@ -1,28 +1,62 @@
<template> <template>
<div class="homepage"> <div class="homepage">
<div v-if="!pending" class="carousel"> <div v-if="!pending" class="carousel">
<el-carousel class="homepage-carousel" height="auto" :interval="5000" arrow="never" autoplay> <el-carousel
class="homepage-carousel"
height="auto"
:interval="5000"
arrow="never"
autoplay
>
<el-carousel-item v-for="(item, index) in carouselImages" :key="index"> <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
<div class="carousel-item"> <div class="carousel-item">
<el-image class="carousel-image" :src="useStrapiMedia(item.url || '')" <el-image
:alt="item.alternativeText || `Carousel Image ${index + 1}`" fit="contain" lazy /> class="carousel-image"
<p v-if="item.caption" class="carousel-image-caption">{{ item.caption }}</p> :src="useStrapiMedia(item.url || '')"
:alt="item.alternativeText || `Carousel Image ${index + 1}`"
fit="contain"
lazy
/>
<p v-if="item.caption" class="carousel-image-caption">
{{ item.caption }}
</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<section> <section>
<h2>推荐产品</h2> <h2>推荐产品</h2>
<p>探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。</p> <p>
<el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside" 探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
:autoplay="false"> </p>
<el-carousel-item v-for="n in Math.floor(recommend_productions.length / 3) + 1" :key="n" <el-carousel
class="recommend-list"> class="recommend-carousel"
height="auto"
arrow="never"
indicator-position="outside"
:autoplay="false"
>
<el-carousel-item
v-for="n in Math.floor(recommend_productions.length / 3) + 1"
:key="n"
class="recommend-list"
>
<div class="recommend-card-group"> <div class="recommend-card-group">
<el-card v-for="(item, index) in recommend_productions.slice((n - 1) * 3, n * 3)" :key="index" <el-card
class="recommend-card" @click="handleProductionCardClick(item.documentId || '')"> v-for="(item, index) in recommend_productions.slice(
(n - 1) * 3,
n * 3
)"
:key="index"
class="recommend-card"
@click="handleProductionCardClick(item.documentId || '')"
>
<template #header> <template #header>
<el-image :src="useStrapiMedia(item.cover?.url || '')" <el-image
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy /> :src="useStrapiMedia(item.cover?.url || '')"
:alt="item.cover?.alternativeText || item.title"
fit="cover"
lazy
/>
</template> </template>
<div class="recommend-card-body"> <div class="recommend-card-body">
<!-- Title --> <!-- Title -->
@ -30,7 +64,9 @@
<span class="recommend-card-title">{{ item.title }}</span> <span class="recommend-card-title">{{ item.title }}</span>
</div> </div>
<!-- Description --> <!-- Description -->
<div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div> <div class="recommend-card-description text-left opacity-25">
{{ item.summary }}
</div>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -40,15 +76,35 @@
<section> <section>
<h2>推荐解决方案</h2> <h2>推荐解决方案</h2>
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p> <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
<el-carousel class="recommend-carousel" height="auto" arrow="never" indicator-position="outside" <el-carousel
:autoplay="false"> class="recommend-carousel"
<el-carousel-item v-for="n in Math.floor(recommend_solutions.length / 3) + 1" :key="n" class="recommend-list"> height="auto"
arrow="never"
indicator-position="outside"
:autoplay="false"
>
<el-carousel-item
v-for="n in Math.floor(recommend_solutions.length / 3) + 1"
:key="n"
class="recommend-list"
>
<div class="recommend-card-group"> <div class="recommend-card-group">
<el-card v-for="(item, index) in recommend_solutions.slice((n - 1) * 3, n * 3)" :key="index" <el-card
class="recommend-card" @click="handleSolutionCardClick(item.documentId || '')"> v-for="(item, index) in recommend_solutions.slice(
(n - 1) * 3,
n * 3
)"
:key="index"
class="recommend-card"
@click="handleSolutionCardClick(item.documentId || '')"
>
<template #header> <template #header>
<el-image :src="useStrapiMedia(item.cover?.url || '')" <el-image
:alt="item.cover?.alternativeText || item.title" fit="cover" lazy /> :src="useStrapiMedia(item.cover?.url || '')"
:alt="item.cover?.alternativeText || item.title"
fit="cover"
lazy
/>
</template> </template>
<div class="recommend-card-body"> <div class="recommend-card-body">
<!-- Title --> <!-- Title -->
@ -56,13 +112,14 @@
<span class="recommend-card-title">{{ item.title }}</span> <span class="recommend-card-title">{{ item.title }}</span>
</div> </div>
<!-- Description --> <!-- Description -->
<div class="recommend-card-description text-left opacity-25">{{ item.summary }}</div> <div class="recommend-card-description text-left opacity-25">
{{ item.summary }}
</div>
</div> </div>
</el-card> </el-card>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</section> </section>
</div> </div>
<div v-else class="loading"> <div v-else class="loading">
@ -72,72 +129,71 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { findOne } = useStrapi() const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const carouselImages = ref<StrapiImage[]>([]) const carouselImages = ref<StrapiImage[]>([]);
const recommend_productions = ref<Production[]>([]) const recommend_productions = ref<Production[]>([]);
const recommend_solutions = ref<Solution[]>([]) const recommend_solutions = ref<Solution[]>([]);
const pending = ref(true) const pending = ref(true);
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<StrapiHomepage>('homepage', undefined, { const response = await findOne<StrapiHomepage>("homepage", undefined, {
populate: { populate: {
carousel: { carousel: {
populate: '*', populate: "*",
}, },
recommend_productions: { recommend_productions: {
populate: { populate: {
cover: { cover: {
populate: '*', populate: "*",
}, },
}, },
}, },
recommend_solutions: { recommend_solutions: {
populate: { populate: {
cover: { cover: {
populate: '*', populate: "*",
}, },
}, },
}, },
}, },
locale: strapiLocale, locale: strapiLocale,
}) });
if (response.data) { if (response.data) {
carouselImages.value = response.data.carousel || [] carouselImages.value = response.data.carousel || [];
recommend_productions.value = response.data.recommend_productions || [] recommend_productions.value = response.data.recommend_productions || [];
recommend_solutions.value = response.data.recommend_solutions || [] recommend_solutions.value = response.data.recommend_solutions || [];
console.log('推荐产品:', recommend_productions.value) console.log("推荐产品:", recommend_productions.value);
console.log('推荐解决方案:', recommend_solutions.value) console.log("推荐解决方案:", recommend_solutions.value);
} }
} catch (error) { } catch (error) {
console.error('Error fetching homepage data:', error) console.error("Error fetching homepage data:", error);
} finally { } finally {
pending.value = false pending.value = false;
} }
}) });
const handleProductionCardClick = (documentId: string) => { const handleProductionCardClick = (documentId: string) => {
// 使用路由导航到产品详情页 // 使用路由导航到产品详情页
if (documentId) { if (documentId) {
const localePath = useLocalePath() const localePath = useLocalePath();
const router = useRouter() const router = useRouter();
router.push(localePath(`/productions/${documentId}`)) router.push(localePath(`/productions/${documentId}`));
} }
} };
const handleSolutionCardClick = (documentId: string) => { const handleSolutionCardClick = (documentId: string) => {
// 使用路由导航到解决方案详情页 // 使用路由导航到解决方案详情页
if (documentId) { if (documentId) {
const localePath = useLocalePath() const localePath = useLocalePath();
const router = useRouter() const router = useRouter();
router.push(localePath(`/solutions/${documentId}`)) router.push(localePath(`/solutions/${documentId}`));
} }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -157,7 +213,6 @@ section p {
line-height: 1.6; line-height: 1.6;
} }
.homepage-carousel .el-carousel__item { .homepage-carousel .el-carousel__item {
width: 100%; width: 100%;
height: 33vw; height: 33vw;
@ -220,7 +275,6 @@ section p {
height: 100%; height: 100%;
} }
.recommend-card { .recommend-card {
width: 33%; width: 33%;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -237,7 +291,6 @@ section p {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
} }
.recommend-card-body { .recommend-card-body {
margin: 10px auto; margin: 10px auto;
padding: 0px auto; padding: 0px auto;
@ -257,4 +310,4 @@ section p {
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
} }
</style> </style>

141
app/pages/productions/[...slug].vue
View File

@ -4,23 +4,51 @@
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> <NuxtLink :to="$localePath('/')">{{
$t("navigation.home")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink> <NuxtLink :to="$localePath('/productions')">{{
$t("navigation.productions")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opactiy-50">{{ production.title }}</el-breadcrumb-item> <el-breadcrumb-item class="text-md opactiy-50">{{
production.title
}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<!-- 产品详情内容 --> <!-- 产品详情内容 -->
<div class="production-header"> <div class="production-header">
<div class="production-image"> <div class="production-image">
<el-image v-if="production.production_images.length <= 1" :src="useStrapiMedia(production?.cover?.url || '')" :alt="production.title" fit="contain" /> <el-image
<el-carousel v-else class="production-carousel" height="500px" :autoplay="false" :loop="false" arrow="always"> v-if="production.production_images.length <= 1"
<el-carousel-item v-for="(item, index) in production.production_images || []" :key="index"> :src="useStrapiMedia(production?.cover?.url || '')"
:alt="production.title"
fit="contain"
/>
<el-carousel
v-else
class="production-carousel"
height="500px"
:autoplay="false"
:loop="false"
arrow="always"
>
<el-carousel-item
v-for="(item, index) in production.production_images || []"
:key="index"
>
<div class="production-carousel-item"> <div class="production-carousel-item">
<el-image :src="useStrapiMedia(item.url || '')" :alt="item.alternativeText || production.title" fit="contain" lazy /> <el-image
<p v-if="item.caption" class="production-image-caption">{{ item.caption }}</p> :src="useStrapiMedia(item.url || '')"
:alt="item.alternativeText || production.title"
fit="contain"
lazy
/>
<p v-if="item.caption" class="production-image-caption">
{{ item.caption }}
</p>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
@ -44,7 +72,12 @@
<question-list :questions="production.questions" /> <question-list :questions="production.questions" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="相关文档" name="documents"> <el-tab-pane label="相关文档" name="documents">
<document-list :documents="production.production_documents.map(item => item.document) || []" /> <document-list
:documents="
production.production_documents.map((item) => item.document) ||
[]
"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -62,10 +95,14 @@
<!-- 未找到产品 --> <!-- 未找到产品 -->
<div v-else class="not-found"> <div v-else class="not-found">
<el-result icon="warning" :title="$t('product-not-found')" :sub-title="$t('product-not-found-desc')"> <el-result
icon="warning"
:title="$t('product-not-found')"
:sub-title="$t('product-not-found-desc')"
>
<template #extra> <template #extra>
<el-button type="primary" @click="$router.push('/productions')"> <el-button type="primary" @click="$router.push('/productions')">
{{ $t('back-to-productions') }} {{ $t("back-to-productions") }}
</el-button> </el-button>
</template> </template>
</el-result> </el-result>
@ -74,65 +111,69 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute() const route = useRoute();
const { findOne } = useStrapi() const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const production = ref<Production | null>(null) const production = ref<Production | null>(null);
const pending = ref(true) const pending = ref(true);
const activeName = ref('details') // 默认选中概览标签 const activeName = ref("details"); // 默认选中概览标签
// 获取路由参数（slug 或 id） // 获取路由参数（slug 或 id）
const documentId = computed(() => route.params.slug as string) const documentId = computed(() => route.params.slug as string);
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<Production>('productions', documentId.value, { const response = await findOne<Production>(
populate: { "productions",
production_specs: { documentId.value,
populate: '*', {
populate: {
production_specs: {
populate: "*",
},
production_images: {
populate: "*",
},
cover: {
populate: "*",
},
questions: {
populate: "*",
},
production_documents: {
populate: "document",
},
}, },
production_images: { locale: strapiLocale,
populate: '*', }
}, );
cover: {
populate: '*',
},
questions: {
populate: '*',
},
production_documents: {
populate: 'document',
},
},
locale: strapiLocale,
})
if (response.data) { if (response.data) {
const item = response.data const item = response.data;
production.value = { production.value = {
...item, ...item,
} };
console.log('Fetched production:', production.value) console.log("Fetched production:", production.value);
} }
} catch (error) { } catch (error) {
console.error('Failed to fetch production:', error) console.error("Failed to fetch production:", error);
} finally { } finally {
pending.value = false pending.value = false;
} }
}) });
// SEO // SEO
useHead({ useHead({
title: computed(() => production.value?.title || 'Product Detail'), title: computed(() => production.value?.title || "Product Detail"),
meta: [ meta: [
{ {
name: 'description', name: "description",
content: computed(() => production.value?.summary || '') content: computed(() => production.value?.summary || ""),
} },
] ],
}) });
</script> </script>
<style scoped> <style scoped>

211
app/pages/productions/index.vue
View File

@ -1,143 +1,158 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('our-productions') }}</h1> <h1 class="page-title">{{ $t("our-productions") }}</h1>
<el-breadcrumb class="breadcrumb"> <el-breadcrumb class="breadcrumb">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> <NuxtLink :to="$localePath('/')">{{
</el-breadcrumb-item> $t("navigation.home")
<el-breadcrumb-item class="text-md opacity-50"> }}</NuxtLink>
<NuxtLink :to="$localePath('/productions')">{{ $t('navigation.productions') }}</NuxtLink> </el-breadcrumb-item>
</el-breadcrumb-item> <el-breadcrumb-item class="text-md opacity-50">
</el-breadcrumb> <NuxtLink :to="$localePath('/productions')">{{
</div> $t("navigation.productions")
<div class="page-content"> }}</NuxtLink>
<div class="productions-container"> </el-breadcrumb-item>
<el-collapse v-model="activeNames" class="production-collapse"> </el-breadcrumb>
<el-collapse-item v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'"
:name="type || 'no-category'">
<div class="group-list">
<production-card v-for="production in group" :key="production.documentId || production.id"
:slug="production.documentId" :image-url="useStrapiMedia(production?.cover?.url || '')"
:name="production.title" :description="production.summary || ''" />
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div> </div>
<div class="page-content">
<div class="productions-container">
<el-collapse v-model="activeNames" class="production-collapse">
<el-collapse-item
v-for="(group, type) in groupedProductions"
:key="type"
:title="type || '未分类'"
:name="type || 'no-category'"
>
<div class="group-list">
<production-card
v-for="production in group"
:key="production.documentId || production.id"
:slug="production.documentId"
:image-url="useStrapiMedia(production?.cover?.url || '')"
:name="production.title"
:description="production.summary || ''"
/>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { find } = useStrapi() const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const activeNames = ref<string[]>([]) const activeNames = ref<string[]>([]);
const productions = ref<Production[]>([]) const productions = ref<Production[]>([]);
// 按类型分组 // 按类型分组
// 兼容 production_type 既可能为对象也可能为字符串 // 兼容 production_type 既可能为对象也可能为字符串
const groupedProductions = computed(() => { const groupedProductions = computed(() => {
const groups: Record<string, Production[]> = {} const groups: Record<string, Production[]> = {};
for (const prod of productions.value) { for (const prod of productions.value) {
let typeKey = '' let typeKey = "";
if (typeof prod.production_type === 'string') { if (typeof prod.production_type === "string") {
typeKey = prod.production_type typeKey = prod.production_type;
} else if (prod.production_type && typeof prod.production_type === 'object' && 'type' in prod.production_type) { } else if (
typeKey = prod.production_type.type || '' prod.production_type &&
} typeof prod.production_type === "object" &&
if (!groups[typeKey]) groups[typeKey] = [] "type" in prod.production_type
groups[typeKey]?.push(prod) ) {
typeKey = prod.production_type.type || "";
} }
return groups if (!groups[typeKey]) groups[typeKey] = [];
}) groups[typeKey]?.push(prod);
}
return groups;
});
onMounted(async () => { onMounted(async () => {
try { try {
const response = await find<Production>('productions', { const response = await find<Production>("productions", {
populate: { populate: {
cover: { cover: {
populate: '*', populate: "*",
}, },
production_type: { production_type: {
populate: '*' populate: "*",
}, },
}, },
filters: { filters: {
show_in_production_list: { show_in_production_list: {
$eq: true, // 只获取在产品列表中显示的产品 $eq: true, // 只获取在产品列表中显示的产品
}, },
}, },
locale: strapiLocale, locale: strapiLocale,
}) });
productions.value = response.data.map((item: Production) => ({ productions.value = response.data.map((item: Production) => ({
...item, ...item,
// 保持 production_type 原始类型，兼容对象或字符串 // 保持 production_type 原始类型，兼容对象或字符串
production_type: item.production_type, production_type: item.production_type,
})) }));
// 默认展开所有分组 // 默认展开所有分组
activeNames.value = Object.keys(groupedProductions.value) activeNames.value = Object.keys(groupedProductions.value);
activeNames.value.push('no-category') // 展开未分类 activeNames.value.push("no-category"); // 展开未分类
} catch (error) { } catch (error) {
console.error('Failed to fetch productions:', error) console.error("Failed to fetch productions:", error);
} }
}); });
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
padding: 2rem; padding: 2rem;
margin: 0 auto; margin: 0 auto;
max-width: 1200px; max-width: 1200px;
} }
.page-header { .page-header {
display: flex; display: flex;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.productions-container { .productions-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 40px; gap: 40px;
} }
.production-group { .production-group {
margin-bottom: 32px; margin-bottom: 32px;
} }
.group-title { .group-title {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.group-list { .group-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 1rem; padding-top: 1rem;
gap: 20px; gap: 20px;
justify-content: flex-start; justify-content: flex-start;
} }
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
padding: 30px auto; padding: 30px auto;
font-size: 1.5rem; font-size: 1.5rem;
} }
</style> </style>

368
app/pages/search.vue Normal file
View File

@ -0,0 +1,368 @@
<template>
<div class="search-page">
<div class="search-header">
<h1 class="page-title">{{ $t("search.title") }}</h1>
<div class="search-bar">
<el-input
v-model="keyword"
class="search-input"
:placeholder="$t('search-placeholder')"
:prefix-icon="Search"
clearable
@keyup.enter="navigateToQuery(keyword)"
@input="handleInput(keyword)"
@clear="handleClear"
/>
<el-button type="primary" @click="navigateToQuery(keyword)">
{{ $t("search.search-button") }}
</el-button>
</div>
<p v-if="keyword && hasResults" class="search-meta">
{{ $t("search.results-for", { query: keyword }) }}
</p>
</div>
<div v-if="loading" class="search-state">
<el-skeleton :rows="4" animated />
</div>
<div v-else-if="hasResults" class="search-results">
<section
v-for="section in filteredSections"
:key="section.indexUid"
class="search-section"
>
<header class="section-header">
<h2 class="section-title">
{{ getIndexLabel(section.indexUid) }}
<span class="section-count">{{
$t("search.result-count", { count: section.estimatedTotalHits })
}}</span>
</h2>
</header>
<div class="section-results">
<el-card
v-for="(hit, hitIndex) in section.hits"
:key="`${section.indexUid}-${getHitIdentifier(hit, hitIndex)}`"
class="result-card"
>
<NuxtLink
v-if="resolveHitLink(hit)"
:to="resolveHitLink(hit) || ''"
class="result-title"
>
{{ getHitTitle(hit) }}
</NuxtLink>
<h3 v-else class="result-title">{{ getHitTitle(hit) }}</h3>
<p v-if="getHitSummary(hit)" class="result-summary">
{{ getHitSummary(hit) }}
</p>
</el-card>
</div>
</section>
</div>
<div v-else class="search-state">
<el-empty
:description="
keyword
? $t('search.no-results', { query: keyword })
: $t('search.no-query')
"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import type { SearchHit, SearchSection } from "~/composables/useMeilisearch";
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const localePath = useLocalePath();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();
const { search } = useMeilisearch();
const loading = ref(true);
const keyword = ref("");
const sections = ref<SearchSection[]>([]);
const localeSections = computed(() =>
sections.value.map((section) => ({
...section,
hits: section.hits.filter(
(hit) =>
!hit.locale ||
String(hit.locale).toLowerCase() === strapiLocale.toLowerCase()
),
}))
);
const filteredSections = computed(() =>
localeSections.value.filter((section) => section.hits.length > 0)
);
const activeRequestId = ref(0);
const indexLabels = computed<Record<string, string>>(() => ({
production: t("search.sections.production"),
solution: t("search.sections.solution"),
support: t("search.sections.support"),
default: t("search.sections.default"),
}));
const getIndexLabel = (indexUid: string) =>
indexLabels.value[indexUid] || indexLabels.value.default;
const hasResults = computed(() =>
localeSections.value.some((section) => section.hits.length > 0)
);
const getHitIdentifier = (hit: SearchHit, index: number) => {
const candidate = [hit.objectID, hit.documentId, hit.id, hit.slug].find(
(value) =>
["string", "number"].includes(typeof value) && String(value).length > 0
);
return candidate != null ? String(candidate) : String(index);
};
const getHitTitle = (hit: SearchHit) => {
const candidate = [hit.title, hit.name, hit.heading, hit.documentTitle].find(
(value) => typeof value === "string" && value.trim().length > 0
);
return candidate ? String(candidate) : t("search.untitled");
};
const getHitSummary = (hit: SearchHit) => {
const candidate = [
hit.summary,
hit.description,
hit.snippet,
hit.content,
hit.text,
].find((value) => typeof value === "string" && value.trim().length > 0);
return candidate ? String(candidate) : "";
};
const resolveHitLink = (hit: SearchHit) => {
if (typeof hit.route === "string" && hit.route.trim().length > 0) {
return localePath(hit.route);
}
const slugCandidate = [hit.slug, hit.documentId, hit.id, hit.objectID].find(
(value) =>
["string", "number"].includes(typeof value) && String(value).length > 0
);
if (!slugCandidate) {
return null;
}
const slug = String(slugCandidate);
if (hit.indexUid === "production") {
return localePath({ path: `/productions/${slug}` });
}
if (hit.indexUid === "solution") {
return localePath({ path: `/solutions/${slug}` });
}
return null;
};
const navigateToQuery = (value: string) => {
const trimmed = value.trim();
if (!trimmed) return;
navigateTo({
path: localePath("/search"),
query: { query: trimmed },
});
};
const performSearch = async (value: string) => {
activeRequestId.value += 1;
const requestId = activeRequestId.value;
const trimmed = value.trim();
if (!trimmed) {
if (requestId === activeRequestId.value) {
sections.value = [];
loading.value = false;
}
return;
}
loading.value = true;
try {
const results = await search(trimmed, { limit: 12 });
if (requestId === activeRequestId.value) {
sections.value = results;
}
console.log(results);
console.log(localeSections.value);
} catch (error) {
console.error("Failed to perform search", error);
if (requestId === activeRequestId.value) {
sections.value = [];
}
} finally {
if (requestId === activeRequestId.value) {
loading.value = false;
}
}
};
function debounce<T extends (...args: never[]) => void>(
fn: T,
delay: number
): (...args: Parameters<T>) => void {
let timer: ReturnType<typeof setTimeout> | null = null;
return function (this: never, ...args: Parameters<T>) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
const handleInput = debounce((value: string) => {
performSearch(value);
}, 300);
const handleClear = () => {
keyword.value = "";
sections.value = [];
router.replace(localePath({ path: "/search" }));
};
onMounted(() => {
if (typeof route.query.query === "string" && route.query.query.trim()) {
keyword.value = route.query.query;
performSearch(route.query.query);
} else {
loading.value = false;
}
});
useHead(() => ({
title: t("search.head-title"),
}));
</script>
<style scoped>
.search-page {
margin: 0 auto;
max-width: 960px;
padding: 2.5rem 1.5rem 3rem;
min-height: 70vh;
}
.search-header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.page-title {
font-size: 2.25rem;
font-weight: 600;
color: var(--el-text-color-primary);
}
.search-bar {
display: flex;
gap: 1rem;
align-items: center;
}
.search-input {
flex: 1;
}
.search-meta {
font-size: 0.9rem;
color: var(--el-text-color-secondary);
}
.search-state {
display: flex;
justify-content: center;
padding: 3rem 0;
}
.search-results {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.search-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.section-header {
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--el-text-color-primary);
}
.section-count {
font-size: 0.9rem;
color: var(--el-text-color-secondary);
}
.section-results {
display: grid;
gap: 1.5rem;
}
.result-card {
border-radius: 12px;
transition: box-shadow 0.2s ease;
}
.result-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}
.result-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--el-color-primary);
margin-bottom: 0.5rem;
display: inline-block;
}
.result-summary {
font-size: 0.95rem;
color: var(--el-text-color-regular);
line-height: 1.6;
}
@media (max-width: 640px) {
.search-page {
padding: 2rem 1rem;
}
.search-bar {
flex-direction: column;
align-items: stretch;
}
.search-input {
width: 100%;
}
}
</style>

170
app/pages/solutions/[...slug].vue
View File

@ -1,124 +1,130 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="solution"> <div v-if="solution">
<div class="page-header"> <div class="page-header">
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> <NuxtLink :to="$localePath('/')">{{
</el-breadcrumb-item> $t("navigation.home")
<el-breadcrumb-item class="text-md opacity-50"> }}</NuxtLink>
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink> </el-breadcrumb-item>
</el-breadcrumb-item> <el-breadcrumb-item class="text-md opacity-50">
<el-breadcrumb-item class="text-md opacity-50">{{ solution.title }}</el-breadcrumb-item> <NuxtLink :to="$localePath('/solutions')">{{
</el-breadcrumb> $t("navigation.solutions")
</div> }}</NuxtLink>
<div class="page-content"> </el-breadcrumb-item>
<div class="solution-info"> <el-breadcrumb-item class="text-md opacity-50">{{
<h1>{{ solution.title }}</h1> solution.title
<div class="solution-meta"> }}</el-breadcrumb-item>
<span class="solution-date"> </el-breadcrumb>
CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }} </div>
</span> <div class="page-content">
</div> <div class="solution-info">
</div> <h1>{{ solution.title }}</h1>
<p class="summary">{{ solution.summary }}</p> <div class="solution-meta">
<div class="solution-content"> <span class="solution-date">
<markdown-renderer :content="solution.content || ''" /> CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
</div> </span>
</div> </div>
</div> </div>
<div v-else class="loading"> <p class="summary">{{ solution.summary }}</p>
<el-skeleton :rows="5" animated /> <div class="solution-content">
<markdown-renderer :content="solution.content || ''" />
</div> </div>
</div>
</div> </div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute() const route = useRoute();
const { findOne } = useStrapi() const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const solution = ref<Solution | null>(null) const solution = ref<Solution | null>(null);
// 获取路由参数(documentId) // 获取路由参数(documentId)
const documentId = computed(() => route.params.slug as string) const documentId = computed(() => route.params.slug as string);
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<Solution>('solutions', documentId.value, { const response = await findOne<Solution>("solutions", documentId.value, {
populate: '*', populate: "*",
locale: strapiLocale, locale: strapiLocale,
}) });
if (response.data) { if (response.data) {
solution.value = { solution.value = {
...response.data, ...response.data,
// 确保 solution_type 保持原始类型 // 确保 solution_type 保持原始类型
solution_type: response.data.solution_type, solution_type: response.data.solution_type,
} };
}
console.log('Fetched Solution:', solution.value)
} catch (error) {
console.error('Failed to fetch solution:', error)
} }
}) console.log("Fetched Solution:", solution.value);
} catch (error) {
console.error("Failed to fetch solution:", error);
}
});
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
padding: 1rem; padding: 1rem;
min-height: 80vh; min-height: 80vh;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.breadcrumb { .breadcrumb {
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.solution-header { .solution-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
} }
.solution-header el-image { .solution-header el-image {
width: 200px; width: 200px;
height: 200px; height: 200px;
border-radius: 4px; border-radius: 4px;
} }
.page-content h1 { .page-content h1 {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
text-align: center; text-align: center;
} }
.solution-meta { .solution-meta {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
} }
.summary { .summary {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);
text-align: center; text-align: center;
} }
.solution-content { .solution-content {
margin-top: 1rem; margin-top: 1rem;
} }
.loading { .loading {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 1rem; margin-top: 1rem;
} }
</style> </style>

203
app/pages/solutions/index.vue
View File

@ -1,127 +1,138 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('learn-our-solutions') }}</h1> <h1 class="page-title">{{ $t("learn-our-solutions") }}</h1>
<el-breadcrumb class="breadcrumb"> <el-breadcrumb class="breadcrumb">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> <NuxtLink :to="$localePath('/')">{{
</el-breadcrumb-item> $t("navigation.home")
<el-breadcrumb-item class="text-md opacity-50"> }}</NuxtLink>
<NuxtLink :to="$localePath('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink> </el-breadcrumb-item>
</el-breadcrumb-item> <el-breadcrumb-item class="text-md opacity-50">
</el-breadcrumb> <NuxtLink :to="$localePath('/solutions')">{{
</div> $t("navigation.solutions")
<div class="solutions-container"> }}</NuxtLink>
<el-tabs v-model="activeName" class="solutions-tabs"> </el-breadcrumb-item>
<el-tab-pane :label="$t('all')" name="all"> </el-breadcrumb>
<div class="solution-list">
<solution-card
v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
:summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')"
:document-id="solution.documentId" />
</div>
</el-tab-pane>
<el-tab-pane
v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'"
:name="type || 'no-category'"
>
<div class="solution-list">
<solution-card
v-for="solution in group"
:key="solution.documentId"
:document-id="solution.documentId"
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
:title="solution.title"
:summary="solution.summary || ''"
/>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div> </div>
<div class="solutions-container">
<el-tabs v-model="activeName" class="solutions-tabs">
<el-tab-pane :label="$t('all')" name="all">
<div class="solution-list">
<solution-card
v-for="solution in solutions"
:key="solution.documentId"
:title="solution.title"
:summary="solution.summary || ''"
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
:document-id="solution.documentId"
/>
</div>
</el-tab-pane>
<el-tab-pane
v-for="(group, type) in groupedSolutions"
:key="type"
:label="type || '未分类'"
:name="type || 'no-category'"
>
<div class="solution-list">
<solution-card
v-for="solution in group"
:key="solution.documentId"
:document-id="solution.documentId"
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
:title="solution.title"
:summary="solution.summary || ''"
/>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { find } = useStrapi() const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const activeName = ref<string>('all') const activeName = ref<string>("all");
const solutions = ref<Solution[]>([]) const solutions = ref<Solution[]>([]);
// 按类型分组 // 按类型分组
const groupedSolutions = computed(() => { const groupedSolutions = computed(() => {
const gourps: Record<string, Solution[]> = {} const gourps: Record<string, Solution[]> = {};
for (const sol of solutions.value) { for (const sol of solutions.value) {
let typeKey = '' let typeKey = "";
if (typeof sol.solution_type === 'string') { if (typeof sol.solution_type === "string") {
typeKey = sol.solution_type typeKey = sol.solution_type;
} else if (sol.solution_type && typeof sol.solution_type === 'object' && 'type' in sol.solution_type) { } else if (
typeKey = sol.solution_type.type || '' sol.solution_type &&
} typeof sol.solution_type === "object" &&
if (!gourps[typeKey]) gourps[typeKey] = [] "type" in sol.solution_type
gourps[typeKey]?.push(sol) ) {
typeKey = sol.solution_type.type || "";
} }
return gourps if (!gourps[typeKey]) gourps[typeKey] = [];
}) gourps[typeKey]?.push(sol);
}
return gourps;
});
onMounted(async () => { onMounted(async () => {
try { try {
const response = await find<Solution>('solutions', { const response = await find<Solution>("solutions", {
populate: { populate: {
cover: { cover: {
populate: '*', populate: "*",
}, },
solution_type: { solution_type: {
populate: '*', populate: "*",
}, },
}, },
locale: strapiLocale, locale: strapiLocale,
}) });
solutions.value = response.data.map((item: Solution) => ({ solutions.value = response.data.map((item: Solution) => ({
...item, ...item,
solution_type: item.solution_type, solution_type: item.solution_type,
})) }));
console.log('Fetched Solutions:', solutions.value) console.log("Fetched Solutions:", solutions.value);
console.log('Grouped Solutions:', groupedSolutions.value) console.log("Grouped Solutions:", groupedSolutions.value);
} catch (error) { } catch (error) {
console.error('Failed to fetch solutions:', error) console.error("Failed to fetch solutions:", error);
} }
}) });
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
padding: 2rem; padding: 2rem;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
display: flex; display: flex;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
margin-bottom: 1rem; margin-bottom: 1rem;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.solution-list { .solution-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
gap: 40px; gap: 40px;
} }
</style> </style>

124
app/pages/support/contact-us.vue
View File

@ -1,91 +1,95 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="content"> <div v-if="content">
<support-tabs model-value="contact-us" /> <support-tabs model-value="contact-us" />
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('navigation.contact-info') }}</h1> <h1 class="page-title">{{ $t("navigation.contact-info") }}</h1>
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')"> <NuxtLink :to="$localePath('/')">
{{ $t('navigation.home') }} {{ $t("navigation.home") }}
</NuxtLink> </NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')"> <NuxtLink :to="$localePath('/support')">
{{ $t('navigation.support') }} {{ $t("navigation.support") }}
</NuxtLink> </NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50"> <el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support/contact-us')"> <NuxtLink :to="$localePath('/support/contact-us')">
{{ $t('navigation.contact-info') }} {{ $t("navigation.contact-info") }}
</NuxtLink> </NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="page-content"> <div class="page-content">
<markdown-renderer :content="content || ''" /> <markdown-renderer :content="content || ''" />
</div> </div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div> </div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { findOne } = useStrapi() const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const content = ref<string>('') const content = ref<string>("");
onMounted(async () => { onMounted(async () => {
try { try {
const response = await findOne<StrapiContactInfo>('contact-info', undefined, { const response = await findOne<StrapiContactInfo>(
populate: '*', "contact-info",
locale: strapiLocale, undefined,
}) {
if (response.data) { populate: "*",
content.value = response.data.content || '' locale: strapiLocale,
} else { }
console.warn('No contact info data found') );
} if (response.data) {
} catch (error) { content.value = response.data.content || "";
console.error('Failed to fetch contact info:', error) } else {
console.warn("No contact info data found");
} }
}) } catch (error) {
console.error("Failed to fetch contact info:", error);
}
});
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
display: flex; display: flex;
padding: 2rem 2rem 0rem; padding: 2rem 2rem 0rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.page-content { .page-content {
padding: 2rem; padding: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
:deep(.markdown-body ul) { :deep(.markdown-body ul) {
list-style-type: none; list-style-type: none;
} }
</style> </style>

117
app/pages/support/documents.vue
View File

@ -1,82 +1,89 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="pending"> <div v-if="pending">
<el-skeleton :rows="5" animated /> <el-skeleton :rows="5" animated />
</div>
<div v-else>
<support-tabs model-value="documents" />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.documents') }}</h1>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support/documents')">{{ $t('navigation.documents') }}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<document-list :documents="documents" />
</div>
</div>
</div> </div>
<div v-else>
<support-tabs model-value="documents" />
<div class="page-header">
<h1 class="page-title">{{ $t("navigation.documents") }}</h1>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{
$t("navigation.home")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support/documents')">{{
$t("navigation.documents")
}}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<document-list :documents="documents" />
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { find } = useStrapi() const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations() const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale() const strapiLocale = getStrapiLocale();
const pending = ref(true) const pending = ref(true);
const documents = ref<StrapiMedia[]>([]) const documents = ref<StrapiMedia[]>([]);
onMounted(async () => { onMounted(async () => {
try { try {
const response = await find<ProductionDocument>('production-documents', { const response = await find<ProductionDocument>("production-documents", {
locale: strapiLocale, locale: strapiLocale,
populate: 'document', populate: "document",
}) });
if(response.data) { if (response.data) {
documents.value = response.data.map(item => ({ documents.value =
...item.document, response.data.map((item) => ({
})) || [] ...item.document,
} })) || [];
} catch (error) {
console.error('Error fetching documents:', error)
} finally {
pending.value = false
} }
}) } catch (error) {
console.error("Error fetching documents:", error);
} finally {
pending.value = false;
}
});
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
display: flex; display: flex;
padding: 2rem 2rem 0rem; padding: 2rem 2rem 0rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.page-content { .page-content {
padding: 1rem 2rem 2rem; padding: 1rem 2rem 2rem;
} }
</style> </style>

101
app/pages/support/faq.vue
View File

@ -1,32 +1,37 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<div v-if="pending" class="flex justify-center items-center h-64"> <div v-if="pending" class="flex justify-center items-center h-64">
<el-spinner /> <el-spinner />
</div>
<div v-else>
<support-tabs model-value="faq" />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.faq') }}</h1>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support/faq')">{{ $t('navigation.faq') }}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<question-list :questions="questions" />
</div>
</div>
</div> </div>
<div v-else>
<support-tabs model-value="faq" />
<div class="page-header">
<h1 class="page-title">{{ $t("navigation.faq") }}</h1>
<el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/')">{{
$t("navigation.home")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</NuxtLink>
</el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">
<NuxtLink :to="$localePath('/support/faq')">{{
$t("navigation.faq")
}}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<question-list :questions="questions" />
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { find } = useStrapi(); const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations(); const { getStrapiLocale } = useLocalizations();
@ -37,44 +42,44 @@ const questions = ref<Question[]>([]);
const pending = ref(true); const pending = ref(true);
onMounted(async () => { onMounted(async () => {
try { try {
const faqData = await find<Question>('questions', { const faqData = await find<Question>("questions", {
locale: strapiLocale, locale: strapiLocale,
}); });
if (faqData) { if (faqData) {
questions.value = faqData.data || []; questions.value = faqData.data || [];
}
} catch (error) {
console.error('Failed to fetch FAQ data:', error);
} finally {
pending.value = false;
} }
}) } catch (error) {
console.error("Failed to fetch FAQ data:", error);
} finally {
pending.value = false;
}
});
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
display: flex; display: flex;
padding: 2rem 2rem 0rem; padding: 2rem 2rem 0rem;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.page-content { .page-content {
padding: 1rem 2rem 2rem; padding: 1rem 2rem 2rem;
} }
</style> </style>

294
app/pages/support/index.vue
View File

@ -1,202 +1,208 @@
<template> <template>
<div class="page-container"> <div class="page-container">
<support-tabs /> <support-tabs />
<div class="page-content"> <div class="page-content">
<div class="page-header">
<div class="page-header"> <h1 class="page-title">{{ $t("navigation.support") }}</h1>
<h1 class="page-title">{{ $t('navigation.support') }}</h1> <el-breadcrumb class="breadcrumb" separator="/">
<el-breadcrumb class="breadcrumb" separator="/"> <el-breadcrumb-item class="text-md opacity-50">
<el-breadcrumb-item class="text-md opacity-50"> <NuxtLink :to="$localePath('/')">{{
<NuxtLink :to="$localePath('/')">{{ $t('navigation.home') }}</NuxtLink> $t("navigation.home")
</el-breadcrumb-item> }}</NuxtLink>
<el-breadcrumb-item class="text-md opacity-50"> </el-breadcrumb-item>
<NuxtLink :to="$localePath('/support')">{{ $t('navigation.support') }}</NuxtLink> <el-breadcrumb-item class="text-md opacity-50">
</el-breadcrumb-item> <NuxtLink :to="$localePath('/support')">{{
</el-breadcrumb> $t("navigation.support")
}}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<section style="margin-bottom: 2rem">
<p>
金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。
</p>
</section>
<div class="card-group">
<el-card class="card">
<el-row>
<el-col :span="6">
<el-icon class="card-icon" size="80">
<ElIconQuestionFilled />
</el-icon>
</el-col>
<el-col :span="18">
<div class="card-title">
<span>{{ $t("navigation.faq") }}</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="card-content">
<p>我们为用户整理了常见问题的答案，帮助您快速解决疑惑。</p>
</div> </div>
<section style="margin-bottom: 2rem;"> </el-row>
<p>金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。</p> <el-row>
</section> <NuxtLink class="card-link" :to="$localePath('/support/faq')">
<div class="card-group"> <el-button class="card-button" round>
<el-card class="card"> <span>了解更多 > </span>
<el-row> </el-button>
<el-col :span="6"> </NuxtLink>
<el-icon class="card-icon" size="80"> </el-row>
<ElIconQuestionFilled /> </el-card>
</el-icon> <el-card class="card">
</el-col> <el-row>
<el-col :span="18"> <el-col :span="6">
<div class="card-title"> <el-icon class="card-icon" size="80">
<span>{{ $t('navigation.faq') }}</span> <ElIconDocumentChecked />
</div> </el-icon>
</el-col> </el-col>
</el-row> <el-col :span="18">
<el-row> <div class="card-title">
<div class="card-content"> <span>{{ $t("navigation.documents") }}</span>
<p>我们为用户整理了常见问题的答案，帮助您快速解决疑惑。</p> </div>
</div> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<NuxtLink class="card-link" :to="$localePath('/support/faq')"> <div class="card-content">
<el-button class="card-button" round> <p>我们为用户整理了常见问题的答案，为您快速解决疑惑。</p>
<span>了解更多 > </span>
</el-button>
</NuxtLink>
</el-row>
</el-card>
<el-card class="card">
<el-row>
<el-col :span="6">
<el-icon class="card-icon" size="80">
<ElIconDocumentChecked />
</el-icon>
</el-col>
<el-col :span="18">
<div class="card-title">
<span>{{ $t('navigation.documents') }}</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="card-content">
<p>我们为用户整理了常见问题的答案，为您快速解决疑惑。</p>
</div>
</el-row>
<el-row>
<NuxtLink class="card-link" :to="$localePath('/support/documents')">
<el-button class="card-button" round>
<span>了解更多 > </span>
</el-button>
</NuxtLink>
</el-row>
</el-card>
<el-card class="card">
<el-row>
<el-col :span="6">
<el-icon class="card-icon" size="80">
<ElIconService />
</el-icon>
</el-col>
<el-col :span="18">
<div class="card-title">
<span>{{ $t('navigation.contact-info') }}</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="card-content">
<p>通过电话、邮箱联系我们，我们将现场为您服务。</p>
</div>
</el-row>
<el-row>
<NuxtLink class="card-link" :to="$localePath('/support/contact-us')">
<el-button class="card-button" round>
<span>了解更多 > </span>
</el-button>
</NuxtLink>
</el-row>
</el-card>
</div> </div>
</div> </el-row>
<el-row>
<NuxtLink class="card-link" :to="$localePath('/support/documents')">
<el-button class="card-button" round>
<span>了解更多 > </span>
</el-button>
</NuxtLink>
</el-row>
</el-card>
<el-card class="card">
<el-row>
<el-col :span="6">
<el-icon class="card-icon" size="80">
<ElIconService />
</el-icon>
</el-col>
<el-col :span="18">
<div class="card-title">
<span>{{ $t("navigation.contact-info") }}</span>
</div>
</el-col>
</el-row>
<el-row>
<div class="card-content">
<p>通过电话、邮箱联系我们，我们将现场为您服务。</p>
</div>
</el-row>
<el-row>
<NuxtLink
class="card-link"
:to="$localePath('/support/contact-us')"
>
<el-button class="card-button" round>
<span>了解更多 > </span>
</el-button>
</NuxtLink>
</el-row>
</el-card>
</div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.page-header { .page-header {
display: flex; display: flex;
} }
.page-title { .page-title {
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.breadcrumb { .breadcrumb {
margin-left: auto; margin-left: auto;
} }
.page-content { .page-content {
padding: 1rem 2rem 2rem; padding: 1rem 2rem 2rem;
} }
section { section {
line-height: 1.6; line-height: 1.6;
width: 60%; width: 60%;
} }
.card-group { .card-group {
display: flex; display: flex;
gap: 50px; gap: 50px;
justify-content: space-around; justify-content: space-around;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.el-card { .el-card {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
box-shadow: none; box-shadow: none;
border-radius: 8px; border-radius: 8px;
} }
.card-icon { .card-icon {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.card-title { .card-title {
display: flex; display: flex;
height: 100%; height: 100%;
align-items: center; align-items: center;
margin-left: 2rem; margin-left: 2rem;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
color: var(--el-color-primary); color: var(--el-color-primary);
} }
.card-link { .card-link {
margin-left: auto; margin-left: auto;
} }
.card-button { .card-button {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
font-size: 1rem; font-size: 1rem;
color: var(--el-color-primary); color: var(--el-color-primary);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.button-group { .button-group {
display: flex; display: flex;
justify-content: left; justify-content: left;
margin-top: 2rem; margin-top: 2rem;
margin-left: 2rem; margin-left: 2rem;
gap: 20px; gap: 20px;
} }
.el-row { .el-row {
margin-bottom: 20px; margin-bottom: 20px;
} }
.el-row:last-child { .el-row:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.el-col { .el-col {
border-radius: 4px; border-radius: 4px;
} }
.grid-content { .grid-content {
border-radius: 4px; border-radius: 4px;
min-height: 36px; min-height: 36px;
} }
</style> </style>

72
app/types/strapi/common.ts
View File

@ -1,49 +1,53 @@
export interface StrapiEntity { export interface StrapiEntity {
id: number; id: number;
documentId: string; documentId: string;
createdAt: string; createdAt: string;
updatedAt: string; updatedAt: string;
publishedAt: string; publishedAt: string;
locale: string; locale: string;
} }
export interface StrapiMedia { export interface StrapiMedia {
id: number; id: number;
url: string; url: string;
ext: string; ext: string;
name: string; name: string;
size: number; size: number;
alternativeText: string; alternativeText: string;
caption: string; caption: string;
} }
export interface StrapiImageFormat { export interface StrapiImageFormat {
url: string; url: string;
width: number; width: number;
height: number; height: number;
size: number; size: number;
} }
export interface StrapiImage extends StrapiMedia { export interface StrapiImage extends StrapiMedia {
width: number; width: number;
height: number; height: number;
formats: { formats: {
small: StrapiImageFormat; small: StrapiImageFormat;
medium: StrapiImageFormat; medium: StrapiImageFormat;
thumbnail: StrapiImageFormat; thumbnail: StrapiImageFormat;
} };
} }
export interface StrapiResponse<T> { export interface StrapiResponse<T> {
data: T; data: T;
meta: { meta: {
pagination: { pagination: {
page: number; page: number;
pageSize: number; pageSize: number;
pageCount: number; pageCount: number;
total: number; total: number;
} };
} };
} }
export type StrapiRelation<T, K extends keyof T = never> = Omit<T, K | keyof StrapiEntity> & StrapiEntity; export type StrapiRelation<T, K extends keyof T = never> = Omit<
T,
K | keyof StrapiEntity
> &
StrapiEntity;

10
app/types/strapi/index.ts
View File

@ -1,5 +1,5 @@
export * from './common'; export * from "./common";
export * from './production'; export * from "./production";
export * from './singleTypes'; export * from "./singleTypes";
export * from './solution'; export * from "./solution";
export * from './question'; export * from "./question";

46
app/types/strapi/production.ts
View File

@ -1,33 +1,41 @@
import type { StrapiEntity, StrapiImage, StrapiMedia, StrapiRelation } from './common'; import type {
StrapiEntity,
StrapiImage,
StrapiMedia,
StrapiRelation,
} from "./common";
export interface ProductionType extends StrapiEntity { export interface ProductionType extends StrapiEntity {
type: string; type: string;
} }
export interface ProductionSpecItem { export interface ProductionSpecItem {
label: string; label: string;
value: string; value: string;
} }
export interface ProductionSpecGroup { export interface ProductionSpecGroup {
title: string; title: string;
items: ProductionSpecItem[]; items: ProductionSpecItem[];
} }
export interface Production extends StrapiEntity { export interface Production extends StrapiEntity {
title: string; title: string;
summary: string; summary: string;
production_type: ProductionType; production_type: ProductionType;
cover: StrapiImage; cover: StrapiImage;
production_images: StrapiImage[]; production_images: StrapiImage[];
production_details: string; production_details: string;
production_specs: ProductionSpecGroup[]; production_specs: ProductionSpecGroup[];
production_documents: StrapiRelation<ProductionDocument, 'related_productions'>[]; production_documents: StrapiRelation<
questions: StrapiRelation<Question, 'related_productions'>[]; ProductionDocument,
show_in_production_list: boolean; "related_productions"
>[];
questions: StrapiRelation<Question, "related_productions">[];
show_in_production_list: boolean;
} }
export interface ProductionDocument extends StrapiEntity { export interface ProductionDocument extends StrapiEntity {
document: StrapiMedia; document: StrapiMedia;
related_productions: StrapiRelation<Production, 'production_documents'>[]; related_productions: StrapiRelation<Production, "production_documents">[];
} }

8
app/types/strapi/question.ts
View File

@ -1,5 +1,5 @@
export interface Question extends StrapiEntity { export interface Question extends StrapiEntity {
title: string; title: string;
content: string; content: string;
related_productions: StrapiRelation<Production, 'questions'>[]; related_productions: StrapiRelation<Production, "questions">[];
} }

12
app/types/strapi/singleTypes.ts
View File

@ -1,13 +1,13 @@
export interface StrapiCompanyProfile extends StrapiEntity { export interface StrapiCompanyProfile extends StrapiEntity {
content: string; content: string;
} }
export interface StrapiContactInfo extends StrapiEntity { export interface StrapiContactInfo extends StrapiEntity {
content: string; content: string;
} }
export interface StrapiHomepage extends StrapiEntity { export interface StrapiHomepage extends StrapiEntity {
carousel: StrapiImage[]; carousel: StrapiImage[];
recommend_productions: StrapiRelation<Production>[]; recommend_productions: StrapiRelation<Production>[];
recommend_solutions: StrapiRelation<Solution>[]; recommend_solutions: StrapiRelation<Solution>[];
} }

16
app/types/strapi/solution.ts
View File

@ -1,13 +1,13 @@
import type { StrapiEntity, StrapiImage } from './common'; import type { StrapiEntity, StrapiImage } from "./common";
export interface SolutionType extends StrapiEntity { export interface SolutionType extends StrapiEntity {
type: string; type: string;
} }
export interface Solution extends StrapiEntity { export interface Solution extends StrapiEntity {
title: string; title: string;
summary: string; summary: string;
cover: StrapiImage; cover: StrapiImage;
solution_type: SolutionType; solution_type: SolutionType;
content: string; content: string;
} }

16
app/utils/file.ts
View File

@ -1,12 +1,12 @@
export function formatFileSize(sizeInKB: number): string { export function formatFileSize(sizeInKB: number): string {
if (sizeInKB < 1024) { if (sizeInKB < 1024) {
return `${sizeInKB.toFixed(2)} KB`; return `${sizeInKB.toFixed(2)} KB`;
} else { } else {
const sizeInMB = sizeInKB / 1024; const sizeInMB = sizeInKB / 1024;
return `${sizeInMB.toFixed(2)} MB`; return `${sizeInMB.toFixed(2)} MB`;
} }
} }
export function formatFileExtension(ext: string): string { export function formatFileExtension(ext: string): string {
return ext.startsWith('.') ? ext.slice(1).toUpperCase() : ext.toUpperCase(); return ext.startsWith(".") ? ext.slice(1).toUpperCase() : ext.toUpperCase();
} }

44
app/utils/markdown.ts
View File

@ -1,34 +1,34 @@
import MarkdownIt from 'markdown-it'; import MarkdownIt from "markdown-it";
const md = new MarkdownIt({ const md = new MarkdownIt({
html: true, html: true,
linkify: true, linkify: true,
typographer: true, typographer: true,
breaks: true, breaks: true,
}) });
export function renderMarkdown(content: string): string { export function renderMarkdown(content: string): string {
const dirtyHtml = md.render(content); const dirtyHtml = md.render(content);
if (typeof window !== 'undefined') { if (typeof window !== "undefined") {
import('dompurify').then((DOMPurify => { import("dompurify").then((DOMPurify) => {
return DOMPurify.default.sanitize(dirtyHtml) return DOMPurify.default.sanitize(dirtyHtml);
})) });
} }
return dirtyHtml return dirtyHtml;
} }
export function convertMedia(content: string): string { export function convertMedia(content: string): string {
// 通过正则表达式替换Markdown中的图片链接 // 通过正则表达式替换Markdown中的图片链接
// ![alt text](image-url) -> ![alt text](strapiMedia(image-url)) // ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
if(!content) return ''; if (!content) return "";
const contentWithAbsoluteUrls = content.replace( const contentWithAbsoluteUrls = content.replace(
/!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g, /!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
(_, alt, url) => `![${alt}](${useStrapiMedia(url)})` (_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
) );
return contentWithAbsoluteUrls; return contentWithAbsoluteUrls;
} }

2914
bun.lock
View File

File diff suppressed because it is too large Load Diff

16
i18n/locales/en.json
View File

@ -2,6 +2,22 @@
"back": "Back", "back": "Back",
"not-found": "Page Not Found", "not-found": "Page Not Found",
"search-placeholder": "Search...", "search-placeholder": "Search...",
"search": {
"title": "Search",
"head-title": "Search",
"search-button": "Search",
"results-for": "Results for \"{query}\"",
"result-count": "{count} results",
"no-results": "No results found for \"{query}\".",
"no-query": "Enter a keyword to start searching.",
"untitled": "Untitled",
"sections": {
"production": "Products",
"solution": "Solutions",
"support": "Support",
"default": "Other"
}
},
"company-name": "Jinshen Machinary Manufacturing Co., Ltd.", "company-name": "Jinshen Machinary Manufacturing Co., Ltd.",
"company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.", "company-description": "We specialize in manufacturing a range of paper tube and can equipment, integrating design, manufacturing, sales, and service.",
"learn-more": "Learn More", "learn-more": "Learn More",

16
i18n/locales/zh.json
View File

@ -2,6 +2,22 @@
"back": "返回", "back": "返回",
"not-found": "页面不存在", "not-found": "页面不存在",
"search-placeholder": "搜索...", "search-placeholder": "搜索...",
"search": {
"title": "站内搜索",
"head-title": "搜索",
"search-button": "搜索",
"results-for": "“{query}” 的搜索结果",
"result-count": "共 {count} 条结果",
"no-results": "没有找到与 “{query}” 匹配的内容。",
"no-query": "请输入关键字开始搜索。",
"untitled": "未命名条目",
"sections": {
"production": "产品",
"solution": "解决方案",
"support": "服务支持",
"default": "其他内容"
}
},
"company-name": "金申机械制造有限公司", "company-name": "金申机械制造有限公司",
"company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。", "company-description": "专业生产一系列纸管、纸罐设备，集设计、制造、销售、服务于一体。",
"learn-more": "了解更多", "learn-more": "了解更多",

14
nuxt.config.ts
View File

@ -18,6 +18,20 @@ export default defineNuxtConfig({
}, },
}, },
runtimeConfig: {
public: {
meili: {
host: process.env.MEILI_HOST || "http://localhost:7700",
searchKey: process.env.MEILI_SEARCH_KEY || "",
indexes: process.env.MEILI_SEARCH_INDEXES
? (typeof process.env.MEILI_SEARCH_INDEXES === "string"
? process.env.MEILI_SEARCH_INDEXES.split(",").map(i => i.trim())
: process.env.MEILI_SEARCH_INDEXES)
: ["production", "solution"],
},
},
},
fonts: { fonts: {
provider: 'local', provider: 'local',
}, },

1
package.json
View File

@ -27,6 +27,7 @@
"element-plus": "^2.10.7", "element-plus": "^2.10.7",
"eslint": "^9.0.0", "eslint": "^9.0.0",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"meilisearch": "^0.53.0",
"nuxt": "^4.0.3", "nuxt": "^4.0.3",
"sass": "^1.90.0", "sass": "^1.90.0",
"sharp": "^0.34.3", "sharp": "^0.34.3",

11612
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,6 @@
onlyBuiltDependencies:
- '@parcel/watcher'
- esbuild
- sharp
- unrs-resolver
- vue-demi