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

13
app/app.vue
View File

@ -9,7 +9,7 @@
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus';
import { ElConfigProvider } from "element-plus";
const { login } = useStrapiAuth();
@ -17,21 +17,20 @@ const { getElementPlusLocale } = useLocalizations();
const elementPlusLocale = getElementPlusLocale();
onMounted(() => {
// 检查用户是否已登录
const user = useStrapiUser();
if (!user.value) {
// 如果未登录，重定向到登录页面
login({ identifier: 'remilia', password: 'huanshuo51' })
login({ identifier: "remilia", password: "huanshuo51" })
.then(() => {
console.log('Login successful');
console.log("Login successful");
})
.catch((error) => {
console.error('Login failed:', error);
console.error("Login failed:", error);
});
} 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>
<div class="document-list">
<el-card v-for="(doc, index) in documents" :key="index" class="document-card">
<div class="document-info">
<h3>{{ doc.caption || doc.name }}</h3>
<div class="document-content">
<span v-if="doc.size" class="document-meta">大小: {{ formatFileSize(doc.size) }} </span>
<span v-if="doc.ext" class="document-meta">格式: {{ formatFileExtension(doc.ext) }}</span>
<el-button
class="download-button" type="primary"
@click="handleDownload(doc.name, doc.url)">
下载
</el-button>
</div>
</div>
</el-card>
</div>
<div class="document-list">
<el-card
v-for="(doc, index) in documents"
:key="index"
class="document-card"
>
<div class="document-info">
<h3>{{ doc.caption || doc.name }}</h3>
<div class="document-content">
<span v-if="doc.size" class="document-meta"
>大小: {{ formatFileSize(doc.size) }}
</span>
<span v-if="doc.ext" class="document-meta"
>格式: {{ formatFileExtension(doc.ext) }}</span
>
<el-button
class="download-button"
type="primary"
@click="handleDownload(doc.name, doc.url)"
>
下载
</el-button>
</div>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
defineProps({
documents: {
type: Array as () => Array<StrapiMedia>,
default: () => []
}
})
documents: {
type: Array as () => Array<StrapiMedia>,
default: () => [],
},
});
const handleDownload = async (fileName: string, fileUrl: string) => {
const response = await fetch(fileUrl)
const blob = await response.blob()
const url = window.URL.createObjectURL(blob)
const response = await fetch(fileUrl);
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a')
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(url)
}
const link = document.createElement("a");
link.href = url;
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
};
</script>
<style scoped>
.document-list {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
}
.document-meta {
font-size: 0.8rem;
color: var(--el-text-color-secondary);
font-size: 0.8rem;
color: var(--el-text-color-secondary);
}
.download-button {
margin-left: auto;
margin-left: auto;
}
.document-content {
display: flex;
align-items: center;
gap: 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
</style>
</style>

73
app/components/JinshenFooter.vue
View File

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

233
app/components/JinshenHeader.vue
View File

@ -1,162 +1,183 @@
<template>
<div class="header-container">
<div class="logo-section">
<NuxtLink :to="$localePath('/')" class="logo-link">
<el-image class="website-logo" src="/jinshen-logo.png" alt="Jinshen Logo" fit="contain" />
</NuxtLink>
</div>
<div class="header-menu-section">
<!-- 导航菜单 -->
<el-menu :default-active="activeName" class="header-menu" mode="horizontal" :ellipsis="false"
:persistent="false" router>
<el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t('navigation.productions') }}</span>
</el-menu-item>
<el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t('navigation.solutions') }}</span>
</el-menu-item>
<el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t('navigation.support') }}</span>
</el-menu-item>
<el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t('navigation.about-us') }}</span>
</el-menu-item>
</el-menu>
</div>
<!-- 右侧功能区 -->
<div class="header-actions">
<el-input v-model="searchQuery" class="search-input" :placeholder="$t('search-placeholder')"
:prefix-icon="Search" clearable @keyup.enter="handleSearch" />
<el-dropdown @command="setLocale">
<el-link type="info" :underline="false">
<el-icon class="mdi mdi-translate translate-link" />
</el-link>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="zh">简体中文</el-dropdown-item>
<el-dropdown-item command="en">English</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="header-container">
<div class="logo-section">
<NuxtLink :to="$localePath('/')" class="logo-link">
<el-image
class="website-logo"
src="/jinshen-logo.png"
alt="Jinshen Logo"
fit="contain"
/>
</NuxtLink>
</div>
<div class="header-menu-section">
<!-- 导航菜单 -->
<el-menu
:default-active="activeName"
class="header-menu"
mode="horizontal"
:ellipsis="false"
:persistent="false"
router
>
<el-menu-item index="productions" :route="$localePath('/productions')">
<span class="title">{{ $t("navigation.productions") }}</span>
</el-menu-item>
<el-menu-item index="solutions" :route="$localePath('/solutions')">
<span class="title">{{ $t("navigation.solutions") }}</span>
</el-menu-item>
<el-menu-item index="support" :route="$localePath('/support')">
<span class="title">{{ $t("navigation.support") }}</span>
</el-menu-item>
<el-menu-item index="about" :route="$localePath('/about')">
<span class="title">{{ $t("navigation.about-us") }}</span>
</el-menu-item>
</el-menu>
</div>
<!-- 右侧功能区 -->
<div class="header-actions">
<el-input
v-model="searchQuery"
class="search-input"
:placeholder="$t('search-placeholder')"
:prefix-icon="Search"
clearable
@keyup.enter="handleSearch"
/>
<el-dropdown @command="setLocale">
<el-link type="info" :underline="false">
<el-icon class="mdi mdi-translate translate-link" />
</el-link>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="zh">简体中文</el-dropdown-item>
<el-dropdown-item command="en">English</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { Search } from "@element-plus/icons-vue";
import { MeiliSearch } from "meilisearch";
const router = useRouter();
const { setLocale } = useI18n();
const searchQuery = ref('')
const searchQuery = ref("");
const activeName = ref<string | undefined>(undefined)
const activeName = ref<string | undefined>(undefined);
const handleSearch = () => {
if (searchQuery.value.trim()) {
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
console.log('Searching for:', searchQuery.value);
// 示例：导航到搜索结果页面
// router.push({ path: '/search', query: { q: searchQuery.value } });
}
}
const handleSearch = async () => {
if (searchQuery.value.trim()) {
// 这里可以添加搜索逻辑，例如导航到搜索结果页面
console.log("Searching for:", searchQuery.value);
const meiliClient = new MeiliSearch({
host: process.env.MEILI_HOST || "http://192.168.86.5:7700",
});
const index = meiliClient.index("production");
const search = await index.search(searchQuery.value, {
limit: 20,
});
console.log("Search results:", search.hits);
}
};
const refreshMenu = () => {
const path = router.currentRoute.value.path;
if (path.startsWith('/productions')) {
activeName.value = 'productions';
} else if (path.startsWith('/solutions')) {
activeName.value = 'solutions';
} else if (path.startsWith('/support')) {
activeName.value = 'support';
} else if (path.startsWith('/about')) {
activeName.value = 'about';
} else {
activeName.value = undefined; // 默认不激活任何菜单项
}
}
const path = router.currentRoute.value.path;
if (path.startsWith("/productions")) {
activeName.value = "productions";
} else if (path.startsWith("/solutions")) {
activeName.value = "solutions";
} else if (path.startsWith("/support")) {
activeName.value = "support";
} else if (path.startsWith("/about")) {
activeName.value = "about";
} else {
activeName.value = undefined; // 默认不激活任何菜单项
}
};
onMounted(() => {
refreshMenu();
// 监听路由变化以更新激活状态
router.afterEach(() => {
refreshMenu();
// 监听路由变化以更新激活状态
router.afterEach(() => {
refreshMenu();
});
})
});
});
</script>
<style scoped>
.header-container {
padding: 0 10px;
display: flex;
height: 80px;
align-items: center;
border-bottom: 1px solid #e0e0e0;
padding: 0 10px;
display: flex;
height: 80px;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.logo-section {
display: flex;
flex: 1;
margin-left: 20px;
display: flex;
flex: 1;
margin-left: 20px;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
display: flex;
align-items: center;
text-decoration: none;
}
.website-logo {
height: 64px;
width: auto;
height: 64px;
width: auto;
}
.header-menu-section {
flex: 2;
display: flex;
justify-content: center;
height: 100%;
flex: 2;
display: flex;
justify-content: center;
height: 100%;
}
.header-menu {
margin-right: 40px;
border-bottom: none !important;
width: auto;
--el-menu-horizontal-height: 100%;
margin-right: 40px;
border-bottom: none !important;
width: auto;
--el-menu-horizontal-height: 100%;
}
.header-menu .el-menu-item {
font-size: 16px;
background-color: transparent !important;
font-size: 16px;
background-color: transparent !important;
}
.header-menu .el-menu-item.is-active {
border-bottom: 2.5px solid var(--el-color-primary-dark-2);
color: var(--el-color-primary);
border-bottom: 2.5px solid var(--el-color-primary-dark-2);
color: var(--el-color-primary);
}
.header-menu .el-menu-item:hover {
border-bottom: 2.5px solid var(--el-color-primary);
border-bottom: 2.5px solid var(--el-color-primary);
}
.header-actions {
flex: 1;
justify-content: flex-end;
display: flex;
gap: 16px;
flex: 1;
justify-content: flex-end;
display: flex;
gap: 16px;
}
.search-input {
width: 200px;
width: 200px;
}
.translate-link {
font-size: 20px;
font-size: 20px;
}
</style>

13
app/components/MarkdownRenderer.vue
View File

@ -6,19 +6,18 @@
<script setup lang="ts">
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
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls))
const safeHtml = computed(() => renderMarkdown(contentWithAbsoluteUrls));
// const safeHtml = computed(() => renderMarkdown(props.content))
console.log('Rendered HTML:', safeHtml.value)
console.log("Rendered HTML:", safeHtml.value);
</script>
<style>
@ -70,4 +69,4 @@ console.log('Rendered HTML:', safeHtml.value)
border-top: 1px solid var(--el-border-color);
margin: 20px 0;
}
</style>
</style>

99
app/components/ProductionCard.vue
View File

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

67
app/components/QuestionList.vue
View File

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

98
app/components/SolutionCard.vue
View File

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

55
app/components/SpecTable.vue
View File

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

87
app/components/SupportTabs.vue
View File

@ -1,65 +1,64 @@
<template>
<div class="page-tab">
<el-segmented
v-model="activeTab"
class="segmented"
:options="options"
block
size="large"
@change="handleSegmentedChange"
/>
</div>
<div class="page-tab">
<el-segmented
v-model="activeTab"
class="segmented"
:options="options"
block
size="large"
@change="handleSegmentedChange"
/>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
modelValue: {
type: String,
default: '',
},
})
modelValue: {
type: String,
default: "",
},
});
const activeTab = ref(props.modelValue || '')
const activeTab = ref(props.modelValue || "");
const options = [
{ label: '服务支持', value: '' },
{ label: '常见问题', value: 'faq' },
{ label: '文档资料', value: 'documents' },
{ label: '联系售后', value: 'contact-us' },
]
{ label: "服务支持", value: "" },
{ label: "常见问题", value: "faq" },
{ label: "文档资料", value: "documents" },
{ label: "联系售后", value: "contact-us" },
];
const handleSegmentedChange = (value: string) => {
const localePath = useLocalePath()
navigateTo(localePath(`/support/${value}`))
}
const localePath = useLocalePath();
navigateTo(localePath(`/support/${value}`));
};
</script>
<style scoped>
.segmented {
--el-segmented-bg-color: transparent;
--el-segmented-item-active-color: var(--el-color-primary);
--el-segmented-item-color: var(--el-text-color-secondary);
--el-segmented-item-hover-color: var(--el-color-primary);
--el-segmented-item-border-color: transparent;
--el-segmented-item-active-border-color: transparent;
border-bottom: 1px solid var(--el-border-color-light);
--el-segmented-bg-color: transparent;
--el-segmented-item-active-color: var(--el-color-primary);
--el-segmented-item-color: var(--el-text-color-secondary);
--el-segmented-item-hover-color: var(--el-color-primary);
--el-segmented-item-border-color: transparent;
--el-segmented-item-active-border-color: transparent;
border-bottom: 1px solid var(--el-border-color-light);
}
.segmented :deep(.el-segmented__item-selected) {
/* --el-border-radius-base: 16px; */
transition: none;
background: transparent;
/* --el-border-radius-base: 16px; */
transition: none;
background: transparent;
}
.segmented :deep(.el-segmented__item) {
&:hover {
background: transparent;
color: var(--el-color-primary);
}
&:hover {
background: transparent;
color: var(--el-color-primary);
}
&.is-selected {
color: var(--el-color-primary-dark-2);
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 { Language as ElementLanguage } from 'element-plus/es/locale';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import type { StrapiLocale } from "@nuxtjs/strapi";
import type { Language as ElementLanguage } from "element-plus/es/locale";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
// Strapi本地化映射
export const strapiLocales: Record<string, StrapiLocale> = {
'zh': 'zh-CN',
'en': 'en'
}
zh: "zh-CN",
en: "en",
};
// Element Plus本地化映射
export const elementPlusLocales: Record<string, ElementLanguage> = {
'zh': zhCn,
'en': en
}
zh: zhCn,
en: en,
};
export const useLocalizations = () => {
const { locale } = useI18n();
const { locale } = useI18n();
// 获取Strapi本地化代码
const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
const currentLocale = nuxtLocale || locale.value;
return strapiLocales[currentLocale] || 'zh-Hans';
}
// 获取Strapi本地化代码
const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
const currentLocale = nuxtLocale || locale.value;
return strapiLocales[currentLocale] || "zh-Hans";
};
// 获取Element Plus本地化
const getElementPlusLocale = (nuxtLocale?: string) => {
const currentLocale = nuxtLocale || locale.value;
const elementPlusLocale = elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
return elementPlusLocale;
}
// 获取Element Plus本地化
const getElementPlusLocale = (nuxtLocale?: string) => {
const currentLocale = nuxtLocale || locale.value;
const elementPlusLocale =
elementPlusLocales[currentLocale] || elementPlusLocales["zh"];
return elementPlusLocale;
};
return {
locale: readonly(locale),
getStrapiLocale,
getElementPlusLocale,
}
}
return {
locale: readonly(locale),
getStrapiLocale,
getElementPlusLocale,
};
};

44
app/layouts/default.vue
View File

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

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

@ -1,17 +1,17 @@
<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 i-ep-warning inline-block />
<div i-ep-warning inline-block />
</div>
<div>{{ $t('not-found') }}</div>
<div>{{ $t("not-found") }}</div>
<div>
<button text-sm btn m="3 t8" @click="router.back()">
{{ $t('back') }}
</button>
<button text-sm btn m="3 t8" @click="router.back()">
{{ $t("back") }}
</button>
</div>
</main>
</main>
</template>
<script setup lang="ts">
const router = useRouter()
</script>
const router = useRouter();
</script>

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

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

165
app/pages/index.vue
View File

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

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

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

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

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

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

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

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

@ -1,127 +1,138 @@
<template>
<div class="page-container">
<div class="page-header">
<h1 class="page-title">{{ $t('learn-our-solutions') }}</h1>
<el-breadcrumb class="breadcrumb">
<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('/solutions')">{{ $t('navigation.solutions') }}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</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 class="page-container">
<div class="page-header">
<h1 class="page-title">{{ $t("learn-our-solutions") }}</h1>
<el-breadcrumb class="breadcrumb">
<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('/solutions')">{{
$t("navigation.solutions")
}}</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</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>
<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const { find } = useStrapi();
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 gourps: Record<string, Solution[]> = {}
for (const sol of solutions.value) {
let typeKey = ''
if (typeof sol.solution_type === 'string') {
typeKey = sol.solution_type
} else if (sol.solution_type && typeof sol.solution_type === 'object' && 'type' in sol.solution_type) {
typeKey = sol.solution_type.type || ''
}
if (!gourps[typeKey]) gourps[typeKey] = []
gourps[typeKey]?.push(sol)
const gourps: Record<string, Solution[]> = {};
for (const sol of solutions.value) {
let typeKey = "";
if (typeof sol.solution_type === "string") {
typeKey = sol.solution_type;
} else if (
sol.solution_type &&
typeof sol.solution_type === "object" &&
"type" in sol.solution_type
) {
typeKey = sol.solution_type.type || "";
}
return gourps
})
if (!gourps[typeKey]) gourps[typeKey] = [];
gourps[typeKey]?.push(sol);
}
return gourps;
});
onMounted(async () => {
try {
const response = await find<Solution>('solutions', {
populate: {
cover: {
populate: '*',
},
solution_type: {
populate: '*',
},
},
locale: strapiLocale,
})
solutions.value = response.data.map((item: Solution) => ({
...item,
solution_type: item.solution_type,
}))
console.log('Fetched Solutions:', solutions.value)
console.log('Grouped Solutions:', groupedSolutions.value)
} catch (error) {
console.error('Failed to fetch solutions:', error)
}
})
try {
const response = await find<Solution>("solutions", {
populate: {
cover: {
populate: "*",
},
solution_type: {
populate: "*",
},
},
locale: strapiLocale,
});
solutions.value = response.data.map((item: Solution) => ({
...item,
solution_type: item.solution_type,
}));
console.log("Fetched Solutions:", solutions.value);
console.log("Grouped Solutions:", groupedSolutions.value);
} catch (error) {
console.error("Failed to fetch solutions:", error);
}
});
</script>
<style scoped>
.page-container {
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
display: flex;
display: flex;
}
.page-title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--el-color-primary);
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
color: var(--el-color-primary);
}
.breadcrumb {
margin-left: auto;
margin-left: auto;
}
.solution-list {
display: flex;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 2rem;
gap: 40px;
display: flex;
flex-wrap: wrap;
padding: 1rem;
margin-bottom: 2rem;
gap: 40px;
}
</style>
</style>

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

@ -1,91 +1,95 @@
<template>
<div class="page-container">
<div v-if="content">
<support-tabs model-value="contact-us" />
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.contact-info') }}</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/contact-us')">
{{ $t('navigation.contact-info') }}
</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-container">
<div v-if="content">
<support-tabs model-value="contact-us" />
<div class="page-header">
<h1 class="page-title">{{ $t("navigation.contact-info") }}</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/contact-us')">
{{ $t("navigation.contact-info") }}
</NuxtLink>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="page-content">
<markdown-renderer :content="content || ''" />
</div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
<div class="page-content">
<markdown-renderer :content="content || ''" />
</div>
</div>
<div v-else class="loading">
<el-skeleton :rows="5" animated />
</div>
</div>
</template>
<script setup lang="ts">
const { findOne } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const { findOne } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale()
const strapiLocale = getStrapiLocale();
const content = ref<string>('')
const content = ref<string>("");
onMounted(async () => {
try {
const response = await findOne<StrapiContactInfo>('contact-info', undefined, {
populate: '*',
locale: strapiLocale,
})
if (response.data) {
content.value = response.data.content || ''
} else {
console.warn('No contact info data found')
}
} catch (error) {
console.error('Failed to fetch contact info:', error)
try {
const response = await findOne<StrapiContactInfo>(
"contact-info",
undefined,
{
populate: "*",
locale: strapiLocale,
}
);
if (response.data) {
content.value = response.data.content || "";
} else {
console.warn("No contact info data found");
}
})
} catch (error) {
console.error("Failed to fetch contact info:", error);
}
});
</script>
<style scoped>
.page-container {
max-width: 1200px;
margin: 0 auto;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
display: flex;
padding: 2rem 2rem 0rem;
display: flex;
padding: 2rem 2rem 0rem;
}
.page-title {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
}
.breadcrumb {
margin-left: auto;
margin-left: auto;
}
.page-content {
padding: 2rem;
margin-bottom: 2rem;
padding: 2rem;
margin-bottom: 2rem;
}
: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>
<div class="page-container">
<div v-if="pending">
<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 class="page-container">
<div v-if="pending">
<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>
</template>
<script setup lang="ts">
const { find } = useStrapi()
const { getStrapiLocale } = useLocalizations()
const strapiLocale = getStrapiLocale()
const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();
const pending = ref(true)
const pending = ref(true);
const documents = ref<StrapiMedia[]>([])
const documents = ref<StrapiMedia[]>([]);
onMounted(async () => {
try {
const response = await find<ProductionDocument>('production-documents', {
locale: strapiLocale,
populate: 'document',
})
if(response.data) {
documents.value = response.data.map(item => ({
...item.document,
})) || []
}
} catch (error) {
console.error('Error fetching documents:', error)
} finally {
pending.value = false
try {
const response = await find<ProductionDocument>("production-documents", {
locale: strapiLocale,
populate: "document",
});
if (response.data) {
documents.value =
response.data.map((item) => ({
...item.document,
})) || [];
}
})
} catch (error) {
console.error("Error fetching documents:", error);
} finally {
pending.value = false;
}
});
</script>
<style scoped>
.page-container {
max-width: 1200px;
margin: 0 auto;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
display: flex;
padding: 2rem 2rem 0rem;
display: flex;
padding: 2rem 2rem 0rem;
}
.page-title {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
}
.breadcrumb {
margin-left: auto;
margin-left: auto;
}
.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>
<div class="page-container">
<div v-if="pending" class="flex justify-center items-center h-64">
<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 class="page-container">
<div v-if="pending" class="flex justify-center items-center h-64">
<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>
</template>
<script setup lang="ts">
const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations();
@ -37,44 +42,44 @@ const questions = ref<Question[]>([]);
const pending = ref(true);
onMounted(async () => {
try {
const faqData = await find<Question>('questions', {
locale: strapiLocale,
});
if (faqData) {
questions.value = faqData.data || [];
}
} catch (error) {
console.error('Failed to fetch FAQ data:', error);
} finally {
pending.value = false;
try {
const faqData = await find<Question>("questions", {
locale: strapiLocale,
});
if (faqData) {
questions.value = faqData.data || [];
}
})
} catch (error) {
console.error("Failed to fetch FAQ data:", error);
} finally {
pending.value = false;
}
});
</script>
<style scoped>
.page-container {
max-width: 1200px;
margin: 0 auto;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
display: flex;
padding: 2rem 2rem 0rem;
display: flex;
padding: 2rem 2rem 0rem;
}
.page-title {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
}
.breadcrumb {
margin-left: auto;
margin-left: auto;
}
.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>
<div class="page-container">
<support-tabs />
<div class="page-content">
<div class="page-header">
<h1 class="page-title">{{ $t('navigation.support') }}</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>
<div class="page-container">
<support-tabs />
<div class="page-content">
<div class="page-header">
<h1 class="page-title">{{ $t("navigation.support") }}</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>
</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>
<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>
</el-row>
<el-row>
<NuxtLink class="card-link" :to="$localePath('/support/faq')">
<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">
<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>
</el-row>
<el-row>
<NuxtLink class="card-link" :to="$localePath('/support/faq')">
<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">
<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>
</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>
</template>
<script setup lang="ts">
</script>
<script setup lang="ts"></script>
<style scoped>
.page-container {
max-width: 1200px;
margin: 0 auto;
max-width: 1200px;
margin: 0 auto;
}
.page-header {
display: flex;
display: flex;
}
.page-title {
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
font-size: 2rem;
font-weight: bold;
color: var(--el-color-primary);
margin-bottom: 1rem;
}
.breadcrumb {
margin-left: auto;
margin-left: auto;
}
.page-content {
padding: 1rem 2rem 2rem;
padding: 1rem 2rem 2rem;
}
section {
line-height: 1.6;
width: 60%;
line-height: 1.6;
width: 60%;
}
.card-group {
display: flex;
gap: 50px;
justify-content: space-around;
margin-bottom: 2rem;
display: flex;
gap: 50px;
justify-content: space-around;
margin-bottom: 2rem;
}
.el-card {
width: 100%;
padding: 20px;
box-shadow: none;
border-radius: 8px;
width: 100%;
padding: 20px;
box-shadow: none;
border-radius: 8px;
}
.card-icon {
color: var(--el-color-primary);
color: var(--el-color-primary);
}
.card-title {
display: flex;
height: 100%;
align-items: center;
margin-left: 2rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--el-color-primary);
display: flex;
height: 100%;
align-items: center;
margin-left: 2rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--el-color-primary);
}
.card-link {
margin-left: auto;
margin-left: auto;
}
.card-button {
cursor: pointer;
text-align: center;
font-size: 1rem;
color: var(--el-color-primary);
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
font-size: 1rem;
color: var(--el-color-primary);
transition: all 0.3s ease;
}
.button-group {
display: flex;
justify-content: left;
margin-top: 2rem;
margin-left: 2rem;
gap: 20px;
display: flex;
justify-content: left;
margin-top: 2rem;
margin-left: 2rem;
gap: 20px;
}
.el-row {
margin-bottom: 20px;
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
border-radius: 4px;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
border-radius: 4px;
min-height: 36px;
}
</style>
</style>

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

@ -1,49 +1,53 @@
export interface StrapiEntity {
id: number;
documentId: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
locale: string;
id: number;
documentId: string;
createdAt: string;
updatedAt: string;
publishedAt: string;
locale: string;
}
export interface StrapiMedia {
id: number;
url: string;
ext: string;
name: string;
size: number;
alternativeText: string;
caption: string;
id: number;
url: string;
ext: string;
name: string;
size: number;
alternativeText: string;
caption: string;
}
export interface StrapiImageFormat {
url: string;
width: number;
height: number;
size: number;
url: string;
width: number;
height: number;
size: number;
}
export interface StrapiImage extends StrapiMedia {
width: number;
height: number;
formats: {
small: StrapiImageFormat;
medium: StrapiImageFormat;
thumbnail: StrapiImageFormat;
}
width: number;
height: number;
formats: {
small: StrapiImageFormat;
medium: StrapiImageFormat;
thumbnail: StrapiImageFormat;
};
}
export interface StrapiResponse<T> {
data: T;
meta: {
pagination: {
page: number;
pageSize: number;
pageCount: number;
total: number;
}
}
data: T;
meta: {
pagination: {
page: number;
pageSize: number;
pageCount: 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 './production';
export * from './singleTypes';
export * from './solution';
export * from './question';
export * from "./common";
export * from "./production";
export * from "./singleTypes";
export * from "./solution";
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 {
type: string;
type: string;
}
export interface ProductionSpecItem {
label: string;
value: string;
label: string;
value: string;
}
export interface ProductionSpecGroup {
title: string;
items: ProductionSpecItem[];
title: string;
items: ProductionSpecItem[];
}
export interface Production extends StrapiEntity {
title: string;
summary: string;
production_type: ProductionType;
cover: StrapiImage;
production_images: StrapiImage[];
production_details: string;
production_specs: ProductionSpecGroup[];
production_documents: StrapiRelation<ProductionDocument, 'related_productions'>[];
questions: StrapiRelation<Question, 'related_productions'>[];
show_in_production_list: boolean;
title: string;
summary: string;
production_type: ProductionType;
cover: StrapiImage;
production_images: StrapiImage[];
production_details: string;
production_specs: ProductionSpecGroup[];
production_documents: StrapiRelation<
ProductionDocument,
"related_productions"
>[];
questions: StrapiRelation<Question, "related_productions">[];
show_in_production_list: boolean;
}
export interface ProductionDocument extends StrapiEntity {
document: StrapiMedia;
related_productions: StrapiRelation<Production, 'production_documents'>[];
}
document: StrapiMedia;
related_productions: StrapiRelation<Production, "production_documents">[];
}

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

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

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

@ -1,13 +1,13 @@
export interface StrapiCompanyProfile extends StrapiEntity {
content: string;
content: string;
}
export interface StrapiContactInfo extends StrapiEntity {
content: string;
content: string;
}
export interface StrapiHomepage extends StrapiEntity {
carousel: StrapiImage[];
recommend_productions: StrapiRelation<Production>[];
recommend_solutions: StrapiRelation<Solution>[];
}
carousel: StrapiImage[];
recommend_productions: StrapiRelation<Production>[];
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 {
type: string;
type: string;
}
export interface Solution extends StrapiEntity {
title: string;
summary: string;
cover: StrapiImage;
solution_type: SolutionType;
content: string;
}
title: string;
summary: string;
cover: StrapiImage;
solution_type: SolutionType;
content: string;
}

16
app/utils/file.ts
View File

@ -1,12 +1,12 @@
export function formatFileSize(sizeInKB: number): string {
if (sizeInKB < 1024) {
return `${sizeInKB.toFixed(2)} KB`;
} else {
const sizeInMB = sizeInKB / 1024;
return `${sizeInMB.toFixed(2)} MB`;
}
if (sizeInKB < 1024) {
return `${sizeInKB.toFixed(2)} KB`;
} else {
const sizeInMB = sizeInKB / 1024;
return `${sizeInMB.toFixed(2)} MB`;
}
}
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({
html: true,
linkify: true,
typographer: true,
breaks: true,
})
html: true,
linkify: true,
typographer: true,
breaks: true,
});
export function renderMarkdown(content: string): string {
const dirtyHtml = md.render(content);
const dirtyHtml = md.render(content);
if (typeof window !== 'undefined') {
import('dompurify').then((DOMPurify => {
return DOMPurify.default.sanitize(dirtyHtml)
}))
}
if (typeof window !== "undefined") {
import("dompurify").then((DOMPurify) => {
return DOMPurify.default.sanitize(dirtyHtml);
});
}
return dirtyHtml
return dirtyHtml;
}
export function convertMedia(content: string): string {
// 通过正则表达式替换Markdown中的图片链接
// ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
// 通过正则表达式替换Markdown中的图片链接
// ![alt text](image-url) -> ![alt text](strapiMedia(image-url))
if(!content) return '';
if (!content) return "";
const contentWithAbsoluteUrls = content.replace(
/!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
(_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
)
const contentWithAbsoluteUrls = content.replace(
/!\[([^\]]*)\]\((\/uploads\/[^)]+)\)/g,
(_, alt, url) => `![${alt}](${useStrapiMedia(url)})`
);
return contentWithAbsoluteUrls;
}
return contentWithAbsoluteUrls;
}