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

style: 调整代码格式

Browse Source 
- 根据ESLint文件规范格式化app文件夹中的代码
This commit is contained in:
R2m1liA
2025-09-15 17:02:04 +08:00
parent 67794e9523
commit 92c5a3baab
31 changed files with 1542 additions and 1321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
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>

48
app/components/DocumentList.vue
View File

@ -1,14 +1,24 @@
<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
v-for="(doc, index) in documents"
:key="index"
class="document-card"
>
<div class="document-info"> <div class="document-info">
<h3>{{ doc.caption || doc.name }}</h3> <h3>{{ doc.caption || doc.name }}</h3>
<div class="document-content"> <div class="document-content">
<span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }} </span> <span v-if="doc.size" class="document-meta"
<span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span> >大小: {{ formatFileSize(doc.size) }}
</span>
<span v-if="doc.ext" class="document-meta"
>格式: {{ formatFileExtension(doc.ext) }}</span
>
<el-button <el-button
class="download-button" type="primary" class="download-button"
@click="handleDownload(doc.name, doc.url)"> type="primary"
@click="handleDownload(doc.name, doc.url)"
>
下载 下载
</el-button> </el-button>
</div> </div>
@ -21,23 +31,23 @@ class="download-button" type="primary"
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>

55
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>
@ -97,10 +112,10 @@ import {
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>

81
app/components/JinshenHeader.vue
View File

@ -2,35 +2,50 @@
<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
class="website-logo"
src="/jinshen-logo.png"
alt="Jinshen Logo"
fit="contain"
/>
</NuxtLink> </NuxtLink>
</div> </div>
<div class="header-menu-section"> <div class="header-menu-section">
<!-- 导航菜单 --> <!-- 导航菜单 -->
<el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false" <el-menu
:persistent="false" router> :default-active="activeName"
class="header-menu"
mode="horizontal"
:ellipsis="false"
:persistent="false"
router
>
<el-menu-item index="productions" :route="$localePath('/productions')"> <el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span> <span class="title">{{ $t("navigation.productions") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="solutions" :route="$localePath('/solutions')"> <el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t('navigation.solutions') }}</span> <span class="title">{{ $t("navigation.solutions") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="support" :route="$localePath('/support')"> <el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t('navigation.support') }}</span> <span class="title">{{ $t("navigation.support") }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="about" :route="$localePath('/about')"> <el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t('navigation.about-us') }}</span> <span class="title">{{ $t("navigation.about-us") }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
<!-- 右侧功能区 --> <!-- 右侧功能区 -->
<div class="header-actions"> <div class="header-actions">
<el-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')" <el-input
:prefix-icon="Search" clearable @keyup.enter="handleSearch" /> v-model="searchQuery"
class="search-input"
:placeholder="$t('search-placeholder')"
:prefix-icon="Search"
clearable
@keyup.enter="handleSearch"
/>
<el-dropdown @command="setLocale"> <el-dropdown @command="setLocale">
<el-link type="info" :underline="false"> <el-link type="info" :underline="false">
<el-icon class="mdi mdi-translate translate-link" /> <el-icon class="mdi mdi-translate translate-link" />
@ -47,39 +62,46 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Search } from '@element-plus/icons-vue'; import { Search } from "@element-plus/icons-vue";
import { MeiliSearch } from "meilisearch";
const router = useRouter(); const router = useRouter();
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 = async () => {
if (searchQuery.value.trim()) { if (searchQuery.value.trim()) {
// 这里可以添加搜索逻辑，例如导航到搜索结果页面 // 这里可以添加搜索逻辑，例如导航到搜索结果页面
console.log('Searching for:', searchQuery.value); console.log("Searching for:", searchQuery.value);
// 示例：导航到搜索结果页面 const meiliClient = new MeiliSearch({
// router.push({ path: '/search', query: { q: searchQuery.value } }); host: process.env.MEILI_HOST || "http://192.168.86.5:7700",
} });
const index = meiliClient.index("production");
const search = await index.search(searchQuery.value, {
limit: 20,
});
console.log("Search results:", search.hits);
} }
};
const refreshMenu = () => { const 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(); refreshMenu();
@ -87,7 +109,7 @@ onMounted(() => {
router.afterEach(() => { router.afterEach(() => {
refreshMenu(); refreshMenu();
}); });
}) });
</script> </script>
<style scoped> <style scoped>
@ -116,7 +138,6 @@ onMounted(() => {
width: auto; width: auto;
} }
.header-menu-section { .header-menu-section {
flex: 2; flex: 2;
display: flex; display: flex;

11
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>

21
app/components/ProductionCard.vue
View File

@ -17,25 +17,24 @@
</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>

15
app/components/QuestionList.vue
View File

@ -2,8 +2,11 @@
<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"
:title="question.title"
:name="String(index)"
>
<markdown-renderer :content="question.content || ''" /> <markdown-renderer :content="question.content || ''" />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -14,9 +17,9 @@ v-for="(question, index) in questions" :key="index" :title="question.title"
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>
@ -33,7 +36,6 @@ defineProps({
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;
@ -56,5 +58,4 @@ defineProps({
padding: 1rem; padding: 1rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
</style> </style>

28
app/components/SolutionCard.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<el-card class="solution-card" body-class="card-body" header-class="card-header" @click="handleClick"> <el-card
class="solution-card"
body-class="card-body"
header-class="card-header"
@click="handleClick"
>
<template #header> <template #header>
<!-- Cover Image --> <!-- Cover Image -->
<el-image class="solution-cover" :src="coverUrl" fit="cover" /> <el-image class="solution-cover" :src="coverUrl" fit="cover" />
@ -15,27 +20,25 @@
</el-card> </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%;
@ -63,7 +66,6 @@ const handleClick = () => {
padding: 1px auto; padding: 1px auto;
} }
.solution-card .el-image { .solution-card .el-image {
height: 250px; height: 250px;
} }

27
app/components/SpecTable.vue
View File

@ -1,9 +1,18 @@
<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
v-for="item in data"
:key="item.title"
:title="item.title"
:name="item.title"
>
<el-descriptions :column="1" border> <el-descriptions :column="1" border>
<el-descriptions-item v-for="subItem in item.items" :key="subItem.label" :label="subItem.label"> <el-descriptions-item
v-for="subItem in item.items"
:key="subItem.label"
:label="subItem.label"
>
{{ subItem.value }} {{ subItem.value }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
@ -16,14 +25,16 @@
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>

23
app/components/SupportTabs.vue
View File

@ -15,22 +15,22 @@
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>
@ -51,7 +51,6 @@ const handleSegmentedChange = (value: string) => {
} }
.segmented :deep(.el-segmented__item) { .segmented :deep(.el-segmented__item) {
&:hover { &:hover {
background: transparent; background: transparent;
color: var(--el-color-primary); color: var(--el-color-primary);

33
app/composables/useLocalizations.ts
View File

@ -1,19 +1,19 @@
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();
@ -21,19 +21,20 @@ export const useLocalizations = () => {
// 获取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 =
elementPlusLocales[currentLocale] || elementPlusLocales["zh"];
return elementPlusLocale; return elementPlusLocale;
} };
return { return {
locale: readonly(locale), locale: readonly(locale),
getStrapiLocale, getStrapiLocale,
getElementPlusLocale, getElementPlusLocale,
} };
} };

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

@ -3,15 +3,15 @@
<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>

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

@ -4,12 +4,12 @@
<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>
@ -38,27 +38,31 @@
</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>(
"company-profile",
undefined,
{
locale: strapiLocale, locale: strapiLocale,
}) }
);
if (response.data) { if (response.data) {
content.value = response.data.content || '' content.value = response.data.content || "";
} else { } else {
console.warn('No company profile data found') console.warn("No company profile data found");
} }
} catch (error) { } catch (error) {
console.error('Failed to fetch company profile:', error) console.error("Failed to fetch company profile:", error);
} }
}) });
</script> </script>
<style scoped> <style scoped>

163
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;

117
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>(
"productions",
documentId.value,
{
populate: { populate: {
production_specs: { production_specs: {
populate: '*', populate: "*",
}, },
production_images: { production_images: {
populate: '*', populate: "*",
}, },
cover: { cover: {
populate: '*', populate: "*",
}, },
questions: { questions: {
populate: '*', populate: "*",
}, },
production_documents: { production_documents: {
populate: 'document', populate: "document",
}, },
}, },
locale: strapiLocale, 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>

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

@ -1,25 +1,38 @@
<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('/')">{{
$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> </el-breadcrumb>
</div> </div>
<div class="page-content"> <div class="page-content">
<div class="productions-container"> <div class="productions-container">
<el-collapse v-model="activeNames" class="production-collapse"> <el-collapse v-model="activeNames" class="production-collapse">
<el-collapse-item v-for="(group, type) in groupedProductions" :key="type" :title="type || '未分类'" <el-collapse-item
:name="type || 'no-category'"> v-for="(group, type) in groupedProductions"
:key="type"
:title="type || '未分类'"
:name="type || 'no-category'"
>
<div class="group-list"> <div class="group-list">
<production-card v-for="production in group" :key="production.documentId || production.id" <production-card
:slug="production.documentId" :image-url="useStrapiMedia(production?.cover?.url || '')" v-for="production in group"
:name="production.title" :description="production.summary || ''" /> :key="production.documentId || production.id"
:slug="production.documentId"
:image-url="useStrapiMedia(production?.cover?.url || '')"
:name="production.title"
:description="production.summary || ''"
/>
</div> </div>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
@ -28,44 +41,46 @@
</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" &&
"type" in prod.production_type
) {
typeKey = prod.production_type.type || "";
} }
if (!groups[typeKey]) groups[typeKey] = [] if (!groups[typeKey]) groups[typeKey] = [];
groups[typeKey]?.push(prod) groups[typeKey]?.push(prod);
} }
return groups 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: {
@ -74,17 +89,17 @@ onMounted(async () => {
}, },
}, },
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>

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

@ -4,12 +4,18 @@
<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('/')">{{
$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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink> <NuxtLink :to="$localePath('/solutions')">{{
$t("navigation.solutions")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item class="text-md opacity-50">{{ solution.title }}</el-breadcrumb-item> <el-breadcrumb-item class="text-md opacity-50">{{
solution.title
}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="page-content"> <div class="page-content">
@ -34,34 +40,34 @@
</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);
console.log('Fetched Solution:', solution.value)
} catch (error) { } catch (error) {
console.error('Failed to fetch solution:', error) console.error("Failed to fetch solution:", error);
} }
}) });
</script> </script>
<style scoped> <style scoped>

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

@ -1,13 +1,17 @@
<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('/')">{{
$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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink> <NuxtLink :to="$localePath('/solutions')">{{
$t("navigation.solutions")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -16,13 +20,19 @@
<el-tab-pane :label="$t('all')" name="all"> <el-tab-pane :label="$t('all')" name="all">
<div class="solution-list"> <div class="solution-list">
<solution-card <solution-card
v-for="solution in solutions" :key="solution.documentId" :title="solution.title" v-for="solution in solutions"
:summary="solution.summary || ''" :cover-url="useStrapiMedia(solution?.cover?.url || '')" :key="solution.documentId"
:document-id="solution.documentId" /> :title="solution.title"
:summary="solution.summary || ''"
:cover-url="useStrapiMedia(solution?.cover?.url || '')"
:document-id="solution.documentId"
/>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane
v-for="(group, type) in groupedSolutions" :key="type" :label="type || '未分类'" v-for="(group, type) in groupedSolutions"
:key="type"
:label="type || '未分类'"
:name="type || 'no-category'" :name="type || 'no-category'"
> >
<div class="solution-list"> <div class="solution-list">
@ -42,57 +52,58 @@ v-for="solution in solutions" :key="solution.documentId" :title="solution.title"
</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" &&
"type" in sol.solution_type
) {
typeKey = sol.solution_type.type || "";
} }
if (!gourps[typeKey]) gourps[typeKey] = [] if (!gourps[typeKey]) gourps[typeKey] = [];
gourps[typeKey]?.push(sol) gourps[typeKey]?.push(sol);
} }
return gourps 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>

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

@ -3,21 +3,21 @@
<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>
@ -34,28 +34,32 @@
</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",
undefined,
{
populate: "*",
locale: strapiLocale, locale: strapiLocale,
}) }
);
if (response.data) { if (response.data) {
content.value = response.data.content || '' content.value = response.data.content || "";
} else { } else {
console.warn('No contact info data found') console.warn("No contact info data found");
} }
} catch (error) { } catch (error) {
console.error('Failed to fetch contact info:', error) console.error("Failed to fetch contact info:", error);
} }
}) });
</script> </script>
<style scoped> <style scoped>

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

@ -6,16 +6,22 @@
<div v-else> <div v-else>
<support-tabs model-value="documents" /> <support-tabs model-value="documents" />
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('navigation.documents') }}</h1> <h1 class="page-title">{{ $t("navigation.documents") }}</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('/')">{{ $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('/support')">{{ $t('navigation.support') }}</NuxtLink> <NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</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/documents')">{{ $t('navigation.documents') }}</NuxtLink> <NuxtLink :to="$localePath('/support/documents')">{{
$t("navigation.documents")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -27,31 +33,32 @@
</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 =
response.data.map((item) => ({
...item.document, ...item.document,
})) || [] })) || [];
} }
} catch (error) { } catch (error) {
console.error('Error fetching documents:', error) console.error("Error fetching documents:", error);
} finally { } finally {
pending.value = false pending.value = false;
} }
}) });
</script> </script>
<style scoped> <style scoped>

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

@ -6,16 +6,22 @@
<div v-else> <div v-else>
<support-tabs model-value="faq" /> <support-tabs model-value="faq" />
<div class="page-header"> <div class="page-header">
<h1 class="page-title">{{ $t('navigation.faq') }}</h1> <h1 class="page-title">{{ $t("navigation.faq") }}</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('/')">{{ $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('/support')">{{ $t('navigation.support') }}</NuxtLink> <NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</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/faq')">{{ $t('navigation.faq') }}</NuxtLink> <NuxtLink :to="$localePath('/support/faq')">{{
$t("navigation.faq")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
@ -26,7 +32,6 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const { find } = useStrapi(); const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations(); const { getStrapiLocale } = useLocalizations();
@ -38,18 +43,18 @@ 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) { } catch (error) {
console.error('Failed to fetch FAQ data:', error); console.error("Failed to fetch FAQ data:", error);
} finally { } finally {
pending.value = false; pending.value = false;
} }
}) });
</script> </script>
<style scoped> <style scoped>

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

@ -2,20 +2,25 @@
<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('/')">{{ $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('/support')">{{ $t('navigation.support') }}</NuxtLink> <NuxtLink :to="$localePath('/support')">{{
$t("navigation.support")
}}</NuxtLink>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<section style="margin-bottom: 2rem;"> <section style="margin-bottom: 2rem">
<p>金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。</p> <p>
金申机械制造有限公司致力于为客户提供优质的产品与服务。针对纸管机、分纸机、纸吸管等产品，我们提供全方位的售后服务，确保客户能够安心地使用我们的产品。
</p>
</section> </section>
<div class="card-group"> <div class="card-group">
<el-card class="card"> <el-card class="card">
@ -27,7 +32,7 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="card-title"> <div class="card-title">
<span>{{ $t('navigation.faq') }}</span> <span>{{ $t("navigation.faq") }}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -53,7 +58,7 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="card-title"> <div class="card-title">
<span>{{ $t('navigation.documents') }}</span> <span>{{ $t("navigation.documents") }}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -79,7 +84,7 @@
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
<div class="card-title"> <div class="card-title">
<span>{{ $t('navigation.contact-info') }}</span> <span>{{ $t("navigation.contact-info") }}</span>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -89,7 +94,10 @@
</div> </div>
</el-row> </el-row>
<el-row> <el-row>
<NuxtLink class="card-link" :to="$localePath('/support/contact-us')"> <NuxtLink
class="card-link"
:to="$localePath('/support/contact-us')"
>
<el-button class="card-button" round> <el-button class="card-button" round>
<span>了解更多 > </span> <span>了解更多 > </span>
</el-button> </el-button>
@ -101,8 +109,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>
<style scoped> <style scoped>
.page-container { .page-container {
@ -129,7 +136,6 @@
padding: 1rem 2rem 2rem; padding: 1rem 2rem 2rem;
} }
section { section {
line-height: 1.6; line-height: 1.6;
width: 60%; width: 60%;

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

@ -31,7 +31,7 @@ export interface StrapiImage extends StrapiMedia {
small: StrapiImageFormat; small: StrapiImageFormat;
medium: StrapiImageFormat; medium: StrapiImageFormat;
thumbnail: StrapiImageFormat; thumbnail: StrapiImageFormat;
} };
} }
export interface StrapiResponse<T> { export interface StrapiResponse<T> {
@ -42,8 +42,12 @@ export interface StrapiResponse<T> {
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";

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

@ -1,4 +1,9 @@
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;
@ -22,12 +27,15 @@ export interface Production extends StrapiEntity {
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,
"related_productions"
>[];
questions: StrapiRelation<Question, "related_productions">[];
show_in_production_list: boolean; 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">[];
} }

2
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">[];
} }

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

@ -1,4 +1,4 @@
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;

2
app/utils/file.ts
View File

@ -8,5 +8,5 @@ export function formatFileSize(sizeInKB: number): string {
} }
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();
} }

18
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;
} }