chore: 修改git hook

- 将git hook的调用工具调整为npx

.husky/commit-msg

@@ -56,26 +56,11 @@ print_debug "Shell: $SHELL"
 print_debug "PATH: $PATH"
 print_debug "当前进程ID: $"
 
-# 检查 bunx 是否可用
-print_section "检查工具可用性..."
-print_info "尝试导入用户环境变量..."
-export PATH="$HOME/.bun/bin:$PATH"
-if command -v bunx >/dev/null 2>&1; then
-    BUNX_PATH=$(command -v bunx)
-    print_success "bunx 可用: $BUNX_PATH"
-    print_debug "bunx 版本信息:"
-    print_debug "$(bunx --version 2>&1 || echo 'bunx --version 失败')"
-else
-    print_error "bunx 不可用"
-    print_info "PATH 内容: $PATH"
-    exit 1
-fi
-
 
 # 检查 commitlint 是否可用
 print_section "检查 commitlint..."
-if bunx commitlint --version >/dev/null 2>&1; then
-    COMMITLINT_VERSION=$(bunx commitlint --version)
+if npx commitlint --version >/dev/null 2>&1; then
+    COMMITLINT_VERSION=$(npx commitlint --version)
     print_success "commitlint 可用: $COMMITLINT_VERSION"
 else
     print_error "commitlint 不可用或配置有误"
@@ -132,15 +117,15 @@ fi
 # 运行 commitlint
 echo
 print_section "执行 commitlint 检查..."
-print_command "执行命令: bunx commitlint --edit \"$1\""
+print_command "执行命令: npx commitlint --edit \"$1\""
 
 # 显示详细的执行过程
 if [ "$DEBUG" = "true" ]; then
     print_debug "详细执行过程:"
-    bunx commitlint --edit "$1" --verbose
+    npx commitlint --edit "$1" --verbose
     RESULT=$?
 else
-    bunx commitlint --edit "$1"
+    npx commitlint --edit "$1"
     RESULT=$?
 fi
 
@@ -156,7 +141,7 @@ else
     echo "1. 检查提交消息是否符合约定式提交格式"
     echo "2. 确认 commitlint 配置是否正确"
     echo "3. 运行 'DEBUG=true git commit' 查看详细调试信息"
-    echo "4. 手动测试: bunx commitlint --edit .git/COMMIT_EDITMSG"
+    echo "4. 手动测试: npx commitlint --edit .git/COMMIT_EDITMSG"
     echo
     print_debug "Hook 执行失败，退出代码: $RESULT"
 fi

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

README.md

@@ -5,20 +5,19 @@
 ## 站点内容
 
 - 首页
-    - 首页Banner
-    - 推荐产品
+  - 首页Banner
+  - 推荐产品
 - 产品展示
-    - 产品列表分类展示
-    - 产品详情页
+  - 产品列表分类展示
+  - 产品详情页
 - 解决方案
-    - 以Markdown形式渲染解决方案文章
+  - 以Markdown形式渲染解决方案文章
 - 服务支持
-    - 常见问题列表
-    - 文档资料列表
-    - 联系信息
+  - 常见问题列表
+  - 文档资料列表
+  - 联系信息
 - 关于我们
-    - 公司基本信息
-
+  - 公司基本信息
 
 ## 安装与设置
 
@@ -27,25 +26,25 @@
 
 1. 克隆项目仓库：
 
-``` bash
+```bash
 git clone http://192.168.84.125/remilia/jinshen-website.git
 ```
 
 2. 进入项目目录：
 
-``` bash
+```bash
 cd jinshen-website
 ```
 
 3. 安装依赖
 
-``` bash
+```bash
 pnpm install
 ```
 
 4. 运行开发环境
 
-``` bash
+```bash
 pnpm run dev
 ```
 
@@ -65,15 +64,18 @@ pnpm run dev
 1. 构建生产版本
 
 项目构建
-``` bash
+
+```bash
 pnpm run build
 ```
 
 预览构建版本
+
 ```bash
 pnpm run preview
 ```
 
 2. 部署
 
-部署构建后的项目并推送到文件服务器中，具体步骤视服务器配置而定
+部署构建后的项目并推送到文件服务器中，具体步骤视服务器配置而定
+

app/app.vue

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

app/assets/css/fonts.css

@@ -1,26 +1,36 @@
 @font-face {
-    font-family: "Source Han Sans CN";
-    src: url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff2") format("woff2"),
-         url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff") format("woff");
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Source Han Sans CN";
+  src:
+    url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff2")
+      format("woff2"),
+    url("/fonts/source-han-sans/SourceHanSansCN-Regular-Alphabetic.woff")
+      format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Source Han Sans CN";
-    src: url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff2") format("woff2"),
-         url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff") format("woff");
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
+  font-family: "Source Han Sans CN";
+  src:
+    url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff2")
+      format("woff2"),
+    url("/fonts/source-han-sans/SourceHanSansCN-Bold-Alphabetic.woff")
+      format("woff");
+
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: "Source Han Sans CN";
-    src: url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff2") format("woff2"),
-         url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff") format("woff");
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
+  font-family: "Source Han Sans CN";
+  src:
+    url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff2")
+      format("woff2"),
+    url("/fonts/source-han-sans/SourceHanSansCN-Light-Alphabetic.woff")
+      format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}

app/assets/scss/element/dark.scss

@@ -1,6 +1,6 @@
-@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+@forward "element-plus/theme-chalk/src/dark/var.scss" with (
   $bg-color: (
-    'page': #0a0a0a,
-    'overlay': #1d1e1f,
+    "page": #0a0a0a,
+    "overlay": #1d1e1f,
   )
 );

app/assets/scss/element/index.scss

@@ -1,26 +1,26 @@
 $-colors: (
-  'primary': (
-    'base': #177ee5,
+  "primary": (
+    "base": #177ee5,
   ),
-  'success': (
-    'base': green,
+  "success": (
+    "base": green,
   ),
-  'warning': (
-    'base': #f9a23c,
+  "warning": (
+    "base": #f9a23c,
   ),
-  'danger': (
-    'base': #ff3300,
+  "danger": (
+    "base": #ff3300,
   ),
-  'error': (
-    'base': #f56c6c,
+  "error": (
+    "base": #f56c6c,
   ),
-  'info': (
-    'base': #909399,
+  "info": (
+    "base": #909399,
   ),
 );
 
-@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
   $colors: $-colors
 );
 
-@use './dark.scss';
+@use "./dark.scss";

app/assets/scss/index.scss

@@ -17,5 +17,6 @@ a {
 }
 
 :root {
-  --font-main: "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans CJK", sans-serif;
-}
+  --font-main:
+    "Source Han Sans CN", "Noto Sans CJK SC", "Noto Sans CJK", sans-serif;
+}

app/components/DocumentList.vue

@@ -28,48 +28,48 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  documents: {
-    type: Array as () => Array<StrapiMedia>,
-    default: () => [],
-  },
-});
+  defineProps({
+    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 handleDownload = async (fileName: string, fileUrl: string) => {
+    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%;
-}
+  .document-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
 
-.document-meta {
-  font-size: 0.8rem;
-  color: var(--el-text-color-secondary);
-}
+  .document-meta {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+  }
 
-.download-button {
-  margin-left: auto;
-}
+  .download-button {
+    margin-left: auto;
+  }
 
-.document-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
+  .document-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
 </style>

app/components/JinshenFooter.vue

@@ -4,39 +4,39 @@
       <!-- Logo 和公司信息 -->
       <div class="footer-section">
         <div class="footer-logo">
-          <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image">
-          <h3>{{ $t("company-name") }}</h3>
+          <img src="/jinshen-logo.png" alt="Jinshen Logo" class="logo-image" />
+          <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")
+              $t('navigation.productions')
             }}</NuxtLink>
           </li>
           <li>
             <NuxtLink :to="$localePath('/solutions')">{{
-              $t("navigation.solutions")
+              $t('navigation.solutions')
             }}</NuxtLink>
           </li>
           <li>
             <NuxtLink :to="$localePath('/support')">{{
-              $t("navigation.support")
+              $t('navigation.support')
             }}</NuxtLink>
           </li>
           <li>
             <NuxtLink :to="$localePath('/about')">{{
-              $t("navigation.about-us")
+              $t('navigation.about-us')
             }}</NuxtLink>
           </li>
         </ul>
@@ -44,24 +44,24 @@
 
       <!-- 联系信息 -->
       <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>
@@ -84,21 +84,21 @@
       <div class="footer-container">
         <div class="copyright">
           <p>
-            &copy; {{ currentYear }} {{ $t("company-name") }}.
-            {{ $t("all-rights-reserved") }}
+            &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")
+            $t('privacy-policy')
           }}</NuxtLink>
           <span class="separator">|</span>
           <NuxtLink :to="$localePath('/terms')">{{
-            $t("terms-of-service")
+            $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>
@@ -106,185 +106,185 @@
 </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>
-.jinshen-footer {
-  background: var(--el-bg-color-page);
-  border-top: 1px solid var(--el-border-color);
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem 1rem;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 2rem;
-}
-
-.footer-section h3,
-.footer-section h4 {
-  color: var(--el-text-color-primary);
-  margin-bottom: 1rem;
-  font-weight: 600;
-}
-
-.footer-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.logo-image {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.company-description {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
-  margin: 0;
-}
-
-.footer-links {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.footer-links li {
-  margin-bottom: 0.5rem;
-}
-
-.footer-links a {
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-
-.footer-links a:hover {
-  color: var(--el-color-primary);
-}
-
-.contact-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  color: var(--el-text-color-regular);
-}
-
-.contact-item .el-icon {
-  color: var(--el-color-primary);
-}
-
-.social-links {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: var(--el-fill-color-light);
-  border-radius: 50%;
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  transition: all 0.3s ease;
-}
-
-.social-link:hover {
-  background: var(--el-color-primary);
-  color: white;
-  transform: translateY(-2px);
-}
-
-.footer-bottom {
-  background: var(--el-fill-color-light);
-  border-top: 1px solid var(--el-border-color-lighter);
-  padding: 1rem 0;
-}
-
-.footer-bottom .footer-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 1rem;
-  grid-template-columns: none;
-  gap: 1rem;
-}
-
-.copyright p {
-  margin: 0;
-  color: var(--el-text-color-regular);
-  font-size: 0.875rem;
-}
-
-.footer-links-bottom {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.footer-links-bottom a {
-  color: var(--el-text-color-regular);
-  text-decoration: none;
-  font-size: 0.875rem;
-  transition: color 0.3s ease;
-}
-
-.footer-links-bottom a:hover {
-  color: var(--el-color-primary);
-}
-
-.separator {
-  color: var(--el-text-color-placeholder);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .footer-container {
-    grid-template-columns: 1fr;
-    padding: 1.5rem 1rem;
+  .jinshen-footer {
+    background: var(--el-bg-color-page);
+    border-top: 1px solid var(--el-border-color);
+    margin-top: auto;
   }
 
-  .footer-bottom .footer-container {
-    flex-direction: column;
-    text-align: center;
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+  }
+
+  .footer-section h3,
+  .footer-section h4 {
+    color: var(--el-text-color-primary);
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+
+  .footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .logo-image {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+  }
+
+  .company-description {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .footer-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .footer-links li {
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-links a {
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .footer-links a:hover {
+    color: var(--el-color-primary);
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    color: var(--el-text-color-regular);
+  }
+
+  .contact-item .el-icon {
+    color: var(--el-color-primary);
+  }
+
+  .social-links {
+    display: flex;
     gap: 1rem;
   }
 
-  .footer-links-bottom {
-    flex-wrap: wrap;
+  .social-link {
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: var(--el-fill-color-light);
+    border-radius: 50%;
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    transition: all 0.3s ease;
   }
-}
 
-/* 暗色模式适配 */
-@media (prefers-color-scheme: dark) {
-  .jinshen-footer {
-    background: var(--el-bg-color-page);
+  .social-link:hover {
+    background: var(--el-color-primary);
+    color: white;
+    transform: translateY(-2px);
   }
 
   .footer-bottom {
-    background: var(--el-fill-color-darker);
+    background: var(--el-fill-color-light);
+    border-top: 1px solid var(--el-border-color-lighter);
+    padding: 1rem 0;
+  }
+
+  .footer-bottom .footer-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1rem;
+    grid-template-columns: none;
+    gap: 1rem;
+  }
+
+  .copyright p {
+    margin: 0;
+    color: var(--el-text-color-regular);
+    font-size: 0.875rem;
+  }
+
+  .footer-links-bottom {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .footer-links-bottom a {
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.3s ease;
+  }
+
+  .footer-links-bottom a:hover {
+    color: var(--el-color-primary);
+  }
+
+  .separator {
+    color: var(--el-text-color-placeholder);
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 768px) {
+    .footer-container {
+      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;
+    }
+  }
+
+  /* 暗色模式适配 */
+  @media (prefers-color-scheme: dark) {
+    .jinshen-footer {
+      background: var(--el-bg-color-page);
+    }
+
+    .footer-bottom {
+      background: var(--el-fill-color-darker);
+    }
   }
-}
 </style>

app/components/JinshenHeader.vue

@@ -22,16 +22,16 @@
         router
       >
         <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 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 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 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>
     </div>
@@ -62,119 +62,119 @@
 </template>
 
 <script setup lang="ts">
-import { Search } from "@element-plus/icons-vue";
+  import { Search } from '@element-plus/icons-vue';
 
-const router = useRouter();
-const localePath = useLocalePath();
+  const router = useRouter();
+  const localePath = useLocalePath();
 
-const { setLocale } = useI18n();
+  const { setLocale } = useI18n();
 
-const searchQuery = ref("");
+  const searchQuery = ref('');
 
-const activeName = ref<string | undefined>(undefined);
+  const activeName = ref<string | undefined>(undefined);
 
-const handleSearch = () => {
-  const trimmed = searchQuery.value.trim();
-  if (!trimmed) return;
-  navigateTo({
-    path: localePath("/search"),
-    query: {
-      query: trimmed,
-    },
-  });
-  searchQuery.value = "";
-};
+  const handleSearch = () => {
+    const trimmed = searchQuery.value.trim();
+    if (!trimmed) return;
+    navigateTo({
+      path: localePath('/search'),
+      query: {
+        query: trimmed,
+      },
+    });
+    searchQuery.value = '';
+  };
 
-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 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; // 默认不激活任何菜单项
+    }
+  };
 
-onMounted(() => {
-  refreshMenu();
-  // 监听路由变化以更新激活状态
-  router.afterEach(() => {
+  onMounted(() => {
     refreshMenu();
+    // 监听路由变化以更新激活状态
+    router.afterEach(() => {
+      refreshMenu();
+    });
   });
-});
 </script>
 
 <style scoped>
-.header-container {
-  padding: 0 10px;
-  display: flex;
-  height: 80px;
-  align-items: center;
-  border-bottom: 1px solid #e0e0e0;
-}
+  .header-container {
+    padding: 0 10px;
+    display: flex;
+    height: 80px;
+    align-items: center;
+    border-bottom: 1px solid #e0e0e0;
+  }
 
-.logo-section {
-  display: flex;
-  flex: 1;
-  margin-left: 20px;
-}
+  .logo-section {
+    display: flex;
+    flex: 1;
+    margin-left: 20px;
+  }
 
-.logo-link {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
+  .logo-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+  }
 
-.website-logo {
-  height: 64px;
-  width: auto;
-}
+  .website-logo {
+    height: 64px;
+    width: auto;
+  }
 
-.header-menu-section {
-  flex: 2;
-  display: flex;
-  justify-content: center;
-  height: 100%;
-}
+  .header-menu-section {
+    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%;
-}
+  .header-menu {
+    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;
-}
+  .header-menu .el-menu-item {
+    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);
-}
+  .header-menu .el-menu-item.is-active {
+    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);
-}
+  .header-menu .el-menu-item:hover {
+    border-bottom: 2.5px solid var(--el-color-primary);
+  }
 
-.header-actions {
-  flex: 1;
-  justify-content: flex-end;
-  display: flex;
-  gap: 16px;
-}
+  .header-actions {
+    flex: 1;
+    justify-content: flex-end;
+    display: flex;
+    gap: 16px;
+  }
 
-.search-input {
-  width: 200px;
-}
+  .search-input {
+    width: 200px;
+  }
 
-.translate-link {
-  font-size: 20px;
-}
+  .translate-link {
+    font-size: 20px;
+  }
 </style>

app/components/MarkdownRenderer.vue

@@ -5,68 +5,68 @@
 </template>
 
 <script setup lang="ts">
-interface Props {
-  content: string;
-}
+  interface Props {
+    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(props.content))
+  // 将 Markdown 转换成 HTML
+  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>
-.markdown-body {
-  padding: 10px;
-  line-height: 1.6;
-}
+  .markdown-body {
+    padding: 10px;
+    line-height: 1.6;
+  }
 
-.markdown-body h1 {
-  color: var(--el-color-primary);
-  font-size: 1.5em;
-  margin-bottom: 0.5em;
-  text-align: center;
-}
+  .markdown-body h1 {
+    color: var(--el-color-primary);
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+    text-align: center;
+  }
 
-.markdown-body h2 {
-  color: var(--el-color-primary);
-  font-size: 1.5em;
-  margin-bottom: 0.5em;
-}
+  .markdown-body h2 {
+    color: var(--el-color-primary);
+    font-size: 1.5em;
+    margin-bottom: 0.5em;
+  }
 
-.markdown-body h3 {
-  color: var(--el-color-primary);
-  font-size: 1.2em;
-  margin-bottom: 0.5em;
-}
+  .markdown-body h3 {
+    color: var(--el-color-primary);
+    font-size: 1.2em;
+    margin-bottom: 0.5em;
+  }
 
-.markdown-body p {
-  text-indent: 2em;
-  text-align: justify;
-  margin: 0.5em 0;
-  margin-bottom: 1em;
-}
+  .markdown-body p {
+    text-indent: 2em;
+    text-align: justify;
+    margin: 0.5em 0;
+    margin-bottom: 1em;
+  }
 
-.markdown-body ol {
-  list-style-type: decimal;
-  padding-left: 2em;
-  margin-bottom: 1em;
-}
+  .markdown-body ol {
+    list-style-type: decimal;
+    padding-left: 2em;
+    margin-bottom: 1em;
+  }
 
-.markdown-body ul {
-  list-style-type: disc;
-  padding-left: 2em;
-  margin-bottom: 1em;
-}
+  .markdown-body ul {
+    list-style-type: disc;
+    padding-left: 2em;
+    margin-bottom: 1em;
+  }
 
-.markdown-body hr {
-  border: none;
-  border-top: 1px solid var(--el-border-color);
-  margin: 20px 0;
-}
+  .markdown-body hr {
+    border: none;
+    border-top: 1px solid var(--el-border-color);
+    margin: 20px 0;
+  }
 </style>

app/components/ProductionCard.vue

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

app/components/QuestionList.vue

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

app/components/SolutionCard.vue

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

app/components/SpecTable.vue

@@ -22,24 +22,24 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
-  data: {
-    type: Object as () => ProductionSpecGroup[],
-    required: true,
-  },
-});
+  const props = defineProps({
+    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;
-}
+  .spec-collapse ::v-deep(.el-collapse-item__header) {
+    font-size: 1rem;
+    padding: 1rem;
+  }
 </style>

app/components/SupportTabs.vue

@@ -12,53 +12,53 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-});
+  const props = defineProps({
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  });
 
-const activeTab = ref(props.modelValue || "");
-const options = [
-  { label: "服务支持", value: "" },
-  { label: "常见问题", value: "faq" },
-  { label: "文档资料", value: "documents" },
-  { label: "联系售后", value: "contact-us" },
-];
+  const activeTab = ref(props.modelValue || '');
+  const options = [
+    { label: '服务支持', value: '' },
+    { label: '常见问题', value: 'faq' },
+    { label: '文档资料', value: 'documents' },
+    { label: '联系售后', value: 'contact-us' },
+  ];
 
-const handleSegmentedChange = (value: string) => {
-  const localePath = useLocalePath();
-  navigateTo(localePath(`/support/${value}`));
-};
+  const handleSegmentedChange = (value: string) => {
+    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);
-}
+  .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);
+  }
 
-.segmented :deep(.el-segmented__item-selected) {
-  /* --el-border-radius-base: 16px; */
-  transition: none;
-  background: transparent;
-}
-
-.segmented :deep(.el-segmented__item) {
-  &:hover {
+  .segmented :deep(.el-segmented__item-selected) {
+    /* --el-border-radius-base: 16px; */
+    transition: none;
     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);
+  .segmented :deep(.el-segmented__item) {
+    &: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);
+    }
   }
-}
 </style>

app/composables/useLocalizations.ts

@@ -1,12 +1,12 @@
-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本地化映射
@@ -21,14 +21,14 @@ export const useLocalizations = () => {
   // 获取Strapi本地化代码
   const getStrapiLocale = (nuxtLocale?: string): StrapiLocale => {
     const currentLocale = nuxtLocale || locale.value;
-    return strapiLocales[currentLocale] || "zh-Hans";
+    return strapiLocales[currentLocale] || 'zh-Hans';
   };
 
   // 获取Element Plus本地化
   const getElementPlusLocale = (nuxtLocale?: string) => {
     const currentLocale = nuxtLocale || locale.value;
     const elementPlusLocale =
-      elementPlusLocales[currentLocale] || elementPlusLocales["zh"];
+      elementPlusLocales[currentLocale] || elementPlusLocales['zh'];
     return elementPlusLocale;
   };
 

app/composables/useMeilisearch.ts

@@ -1,5 +1,5 @@
-import { MeiliSearch } from "meilisearch";
-import type { SearchParams, SearchResponse } from "meilisearch";
+import { MeiliSearch } from 'meilisearch';
+import type { SearchParams, SearchResponse } from 'meilisearch';
 
 interface RawSearchSection {
   indexUid: string;
@@ -26,7 +26,7 @@ const parseIndexes = (indexes: string | string[] | undefined): string[] => {
     return indexes.map((item) => item.trim()).filter(Boolean);
   }
   return indexes
-    .split(",")
+    .split(',')
     .map((item) => item.trim())
     .filter(Boolean);
 };
@@ -45,7 +45,7 @@ export const useMeilisearch = () => {
 
     const host = runtimeConfig.public?.meili?.host;
     if (!host) {
-      console.warn("Meilisearch host is not configured.");
+      console.warn('Meilisearch host is not configured.');
       return null;
     }
     const apiKey = runtimeConfig.public?.meili?.searchKey;
@@ -72,7 +72,7 @@ export const useMeilisearch = () => {
 
     const activeIndexes = indexes.value;
     if (!activeIndexes.length) {
-      console.warn("No Meilisearch indexes configured.");
+      console.warn('No Meilisearch indexes configured.');
       return [];
     }
 
@@ -101,14 +101,14 @@ export const useMeilisearch = () => {
     settled
       .filter(
         (result): result is PromiseRejectedResult =>
-          result.status === "rejected"
+          result.status === 'rejected'
       )
       .forEach((result) => {
-        console.error("Meilisearch query failed", result.reason);
+        console.error('Meilisearch query failed', result.reason);
       });
 
     return settled
-      .filter((result) => result.status === "fulfilled")
+      .filter((result) => result.status === 'fulfilled')
       .map((result) => {
         const fulfilled = result as PromiseFulfilledResult<RawSearchSection>;
         return {

app/layouts/default.vue

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

app/pages/[...all].vue

@@ -3,15 +3,15 @@
     <div text4xl>
       <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") }}
+        {{ $t('back') }}
       </button>
     </div>
   </main>
 </template>
 
 <script setup lang="ts">
-const router = useRouter();
+  const router = useRouter();
 </script>

app/pages/about/index.vue

@@ -4,12 +4,12 @@
       <el-breadcrumb class="breadcrumb" separator="/">
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">
-            {{ $t("navigation.home") }}
+            {{ $t('navigation.home') }}
           </NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/about')">
-            {{ $t("navigation.about-us") }}
+            {{ $t('navigation.about-us') }}
           </NuxtLink>
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -25,7 +25,7 @@
             <el-icon class="icon" size="80">
               <ElIconService />
             </el-icon>
-            <br>
+            <br />
             联系信息
           </el-card>
         </NuxtLink>
@@ -38,92 +38,92 @@
 </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,
+  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');
       }
-    );
-    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);
     }
-  } catch (error) {
-    console.error("Failed to fetch company profile:", error);
-  }
-});
+  });
 </script>
 
 <style scoped>
-.page-container {
-  padding: 2rem 1rem;
-  max-width: 1200px;
-  margin: 0 auto;
-}
+  .page-container {
+    padding: 2rem 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.breadcrumb {
-  padding: 1rem 1rem;
-}
+  .breadcrumb {
+    padding: 1rem 1rem;
+  }
 
-.content {
-  padding: 1rem;
-  margin-bottom: 2rem;
-}
+  .content {
+    padding: 1rem;
+    margin-bottom: 2rem;
+  }
 
-:deep(.markdown-body p) {
-  text-indent: 2em;
-}
+  :deep(.markdown-body p) {
+    text-indent: 2em;
+  }
 
-:deep(.markdown-body h2) {
-  text-align: center;
-}
+  :deep(.markdown-body h2) {
+    text-align: center;
+  }
 
-:deep(.el-divider__text) {
-  color: var(--el-color-info);
-  font-size: 1em;
-}
+  :deep(.el-divider__text) {
+    color: var(--el-color-info);
+    font-size: 1em;
+  }
 
-.button-group {
-  display: flex;
-  justify-content: left;
-  margin-top: 2rem;
-  margin-left: 2rem;
-}
+  .button-group {
+    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;
-}
+  .card-button {
+    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);
-}
+  .card-button:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
 
-.icon {
-  padding: 10px;
-}
+  .icon {
+    padding: 10px;
+  }
 
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
 </style>

app/pages/index.vue

@@ -129,185 +129,185 @@
 </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, {
-      populate: {
-        carousel: {
-          populate: "*",
-        },
-        recommend_productions: {
-          populate: {
-            cover: {
-              populate: "*",
+  onMounted(async () => {
+    try {
+      const response = await findOne<StrapiHomepage>('homepage', undefined, {
+        populate: {
+          carousel: {
+            populate: '*',
+          },
+          recommend_productions: {
+            populate: {
+              cover: {
+                populate: '*',
+              },
+            },
+          },
+          recommend_solutions: {
+            populate: {
+              cover: {
+                populate: '*',
+              },
             },
           },
         },
-        recommend_solutions: {
-          populate: {
-            cover: {
-              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);
+        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);
+      }
+    } catch (error) {
+      console.error('Error fetching homepage data:', error);
+    } finally {
+      pending.value = false;
     }
-  } catch (error) {
-    console.error("Error fetching homepage data:", error);
-  } finally {
-    pending.value = false;
-  }
-});
+  });
 
-const handleProductionCardClick = (documentId: string) => {
-  // 使用路由导航到产品详情页
-  if (documentId) {
-    const localePath = useLocalePath();
-    const router = useRouter();
-    router.push(localePath(`/productions/${documentId}`));
-  }
-};
+  const handleProductionCardClick = (documentId: string) => {
+    // 使用路由导航到产品详情页
+    if (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 handleSolutionCardClick = (documentId: string) => {
+    // 使用路由导航到解决方案详情页
+    if (documentId) {
+      const localePath = useLocalePath();
+      const router = useRouter();
+      router.push(localePath(`/solutions/${documentId}`));
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-section {
-  padding: 2rem;
-}
+  section {
+    padding: 2rem;
+  }
 
-section h2 {
-  color: var(--el-text-color-primary);
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
+  section h2 {
+    color: var(--el-text-color-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
 
-section p {
-  color: var(--el-text-color-regular);
-  line-height: 1.6;
-}
+  section p {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+  }
 
-.homepage-carousel .el-carousel__item {
-  width: 100%;
-  height: 33vw;
-  /* 16:9 Aspect Ratio */
-}
+  .homepage-carousel .el-carousel__item {
+    width: 100%;
+    height: 33vw;
+    /* 16:9 Aspect Ratio */
+  }
 
-.el-carousel__item h3 {
-  display: flex;
-  color: #475669;
-  opacity: 0.8;
-  line-height: 300px;
-  margin: 0;
-}
+  .el-carousel__item h3 {
+    display: flex;
+    color: #475669;
+    opacity: 0.8;
+    line-height: 300px;
+    margin: 0;
+  }
 
-.homepage-carousel .carousel-item {
-  width: 100%;
-  height: 100%;
-  background-color: #f5f7fa;
-}
+  .homepage-carousel .carousel-item {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f7fa;
+  }
 
-.carousel-image {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
+  .carousel-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
 
-.carousel-image-caption {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  padding: 5px 10px;
-  border-radius: 5px;
-  font-size: 14px;
-}
+  .carousel-image-caption {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 14px;
+  }
 
-.recommend-carousel :deep(.el-carousel__button) {
-  /* 指示器按钮样式 */
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #475669;
-  transition: all 0.3s ease;
-}
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
 
-.recommend-list {
-  display: flex;
-  padding: 1rem;
-  height: 400px;
-}
+  .recommend-list {
+    display: flex;
+    padding: 1rem;
+    height: 400px;
+  }
 
-.recommend-card-group {
-  display: flex;
-  gap: 1rem;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  height: 100%;
-}
+  .recommend-card-group {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    height: 100%;
+  }
 
-.recommend-card {
-  width: 33%;
-  transition: all 0.3s ease;
-  text-align: center;
-}
+  .recommend-card {
+    width: 33%;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
 
-.recommend-card :deep(.el-card__header) {
-  padding: 0;
-  border: none;
-}
+  .recommend-card :deep(.el-card__header) {
+    padding: 0;
+    border: none;
+  }
 
-.recommend-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
+  .recommend-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
 
-.recommend-card-body {
-  margin: 10px auto;
-  padding: 0px auto;
-}
+  .recommend-card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+  }
 
-.recommend-card-title {
-  font-size: 1rem;
-  font-weight: 600;
-}
+  .recommend-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
 
-.recommend-card-description {
-  font-size: 0.8rem;
-  margin-top: 5px;
-}
+  .recommend-card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
 
-.recommend-card .el-image {
-  width: 100%;
-  border-radius: 4px;
-}
+  .recommend-card .el-image {
+    width: 100%;
+    border-radius: 4px;
+  }
 </style>

app/pages/productions/[...slug].vue

@@ -5,12 +5,12 @@
       <el-breadcrumb class="breadcrumb" separator="/">
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">{{
-            $t("navigation.home")
+            $t('navigation.home')
           }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/productions')">{{
-            $t("navigation.productions")
+            $t('navigation.productions')
           }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opactiy-50">{{
@@ -102,7 +102,7 @@
       >
         <template #extra>
           <el-button type="primary" @click="$router.push('/productions')">
-            {{ $t("back-to-productions") }}
+            {{ $t('back-to-productions') }}
           </el-button>
         </template>
       </el-result>
@@ -111,166 +111,166 @@
 </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);
+  // 获取路由参数（slug 或 id）
+  const documentId = computed(() => route.params.slug as string);
 
-onMounted(async () => {
-  try {
-    const response = await findOne<Production>(
-      "productions",
-      documentId.value,
-      {
-        populate: {
-          production_specs: {
-            populate: "*",
+  onMounted(async () => {
+    try {
+      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;
+        production.value = {
+          ...item,
+        };
+        console.log('Fetched production:', production.value);
       }
-    );
-    if (response.data) {
-      const item = response.data;
-      production.value = {
-        ...item,
-      };
-      console.log("Fetched production:", production.value);
+    } catch (error) {
+      console.error('Failed to fetch production:', error);
+    } finally {
+      pending.value = false;
     }
-  } catch (error) {
-    console.error("Failed to fetch production:", error);
-  } finally {
-    pending.value = false;
-  }
-});
+  });
 
-// SEO
-useHead({
-  title: computed(() => production.value?.title || "Product Detail"),
-  meta: [
-    {
-      name: "description",
-      content: computed(() => production.value?.summary || ""),
-    },
-  ],
-});
+  // SEO
+  useHead({
+    title: computed(() => production.value?.title || 'Product Detail'),
+    meta: [
+      {
+        name: 'description',
+        content: computed(() => production.value?.summary || ''),
+      },
+    ],
+  });
 </script>
 
 <style scoped>
-.page-container {
-  min-height: 80vh;
-  max-width: 1200px;
-  margin: 0 auto;
-}
+  .page-container {
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.breadcrumb {
-  padding: 2rem;
-}
+  .breadcrumb {
+    padding: 2rem;
+  }
 
-.production-header {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 3rem;
-}
-
-.production-image .el-image {
-  position: relative;
-  width: 100%;
-  height: 500px;
-  border-radius: 8px;
-}
-
-.production-image-caption {
-  position: absolute;
-  bottom: 10px;
-  /* left: 10%; */
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 5px;
-  padding: 5px 10px;
-  text-align: center;
-  color: white;
-  font-size: 0.8rem;
-}
-
-.production-carousel :deep(.el-carousel__button) {
-  /* 指示器按钮样式 */
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: #475669;
-  transition: all 0.3s ease;
-}
-
-.production-info h1 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-  font-size: 2rem;
-}
-
-.summary {
-  color: var(--el-color-info);
-  font-size: 1rem;
-  line-height: 1.6;
-  margin-bottom: 2rem;
-}
-
-.production-tabs ::v-deep(.el-tabs__nav) {
-  min-width: 30%;
-  float: right;
-}
-
-.production-tabs ::v-deep(.el-tabs__content) {
-  padding: 10px;
-}
-
-.production-content h2 {
-  color: var(--el-text-color-primary);
-  margin: 0;
-}
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
-
-.not-found {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 400px;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
   .production-header {
-    grid-template-columns: 1fr;
-    gap: 2rem;
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 3rem;
+  }
+
+  .production-image .el-image {
+    position: relative;
+    width: 100%;
+    height: 500px;
+    border-radius: 8px;
+  }
+
+  .production-image-caption {
+    position: absolute;
+    bottom: 10px;
+    /* left: 10%; */
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    padding: 5px 10px;
+    text-align: center;
+    color: white;
+    font-size: 0.8rem;
+  }
+
+  .production-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
   }
 
   .production-info h1 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
     font-size: 2rem;
   }
-}
+
+  .summary {
+    color: var(--el-color-info);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 2rem;
+  }
+
+  .production-tabs ::v-deep(.el-tabs__nav) {
+    min-width: 30%;
+    float: right;
+  }
+
+  .production-tabs ::v-deep(.el-tabs__content) {
+    padding: 10px;
+  }
+
+  .production-content h2 {
+    color: var(--el-text-color-primary);
+    margin: 0;
+  }
+
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
+
+  .not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+
+  /* 响应式设计 */
+  @media (max-width: 768px) {
+    .production-header {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+
+    .production-info h1 {
+      font-size: 2rem;
+    }
+  }
 </style>

app/pages/productions/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="page-container">
     <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-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">{{
-            $t("navigation.home")
+            $t('navigation.home')
           }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/productions')">{{
-            $t("navigation.productions")
+            $t('navigation.productions')
           }}</NuxtLink>
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -42,117 +42,117 @@
 </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 || "";
+  // 按类型分组
+  // 兼容 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);
     }
-    if (!groups[typeKey]) groups[typeKey] = [];
-    groups[typeKey]?.push(prod);
-  }
-  return groups;
-});
+    return groups;
+  });
 
-onMounted(async () => {
-  try {
-    const response = await find<Production>("productions", {
-      populate: {
-        cover: {
-          populate: "*",
+  onMounted(async () => {
+    try {
+      const response = await find<Production>('productions', {
+        populate: {
+          cover: {
+            populate: '*',
+          },
+          production_type: {
+            populate: '*',
+          },
         },
-        production_type: {
-          populate: "*",
+        filters: {
+          show_in_production_list: {
+            $eq: true, // 只获取在产品列表中显示的产品
+          },
         },
-      },
-      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);
-  }
-});
+        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;
-}
+  .page-container {
+    padding: 2rem;
+    margin: 0 auto;
+    max-width: 1200px;
+  }
 
-.page-header {
-  display: flex;
-}
+  .page-header {
+    display: flex;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.productions-container {
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-}
+  .productions-container {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
 
-.production-group {
-  margin-bottom: 32px;
-}
+  .production-group {
+    margin-bottom: 32px;
+  }
 
-.group-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 16px;
-  color: var(--el-color-primary);
-}
+  .group-title {
+    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;
-}
+  .group-list {
+    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;
-}
+  :deep(.el-collapse-item__header) {
+    padding: 30px auto;
+    font-size: 1.5rem;
+  }
 </style>

app/pages/search.vue

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

app/pages/solutions/[...slug].vue

@@ -5,12 +5,12 @@
         <el-breadcrumb class="breadcrumb" separator="/">
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/')">{{
-              $t("navigation.home")
+              $t('navigation.home')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/solutions')">{{
-              $t("navigation.solutions")
+              $t('navigation.solutions')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">{{
@@ -40,91 +40,91 @@
 </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);
+  // 获取路由参数(documentId)
+  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,
-      };
+  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);
     }
-    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;
-}
+  .page-container {
+    padding: 1rem;
+    min-height: 80vh;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.breadcrumb {
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
+  .breadcrumb {
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
 
-.solution-header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
+  .solution-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
 
-.solution-header el-image {
-  width: 200px;
-  height: 200px;
-  border-radius: 4px;
-}
+  .solution-header el-image {
+    width: 200px;
+    height: 200px;
+    border-radius: 4px;
+  }
 
-.page-content h1 {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  text-align: center;
-}
+  .page-content h1 {
+    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);
-}
+  .solution-meta {
+    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;
-}
+  .summary {
+    font-size: 0.8rem;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+  }
 
-.solution-content {
-  margin-top: 1rem;
-}
+  .solution-content {
+    margin-top: 1rem;
+  }
 
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 1rem;
-}
+  .loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+  }
 </style>

app/pages/solutions/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="page-container">
     <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-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/')">{{
-            $t("navigation.home")
+            $t('navigation.home')
           }}</NuxtLink>
         </el-breadcrumb-item>
         <el-breadcrumb-item class="text-md opacity-50">
           <NuxtLink :to="$localePath('/solutions')">{{
-            $t("navigation.solutions")
+            $t('navigation.solutions')
           }}</NuxtLink>
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -52,87 +52,87 @@
 </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 || "";
+  // 按类型分组
+  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);
     }
-    if (!gourps[typeKey]) gourps[typeKey] = [];
-    gourps[typeKey]?.push(sol);
-  }
-  return gourps;
-});
+    return gourps;
+  });
 
-onMounted(async () => {
-  try {
-    const response = await find<Solution>("solutions", {
-      populate: {
-        cover: {
-          populate: "*",
+  onMounted(async () => {
+    try {
+      const response = await find<Solution>('solutions', {
+        populate: {
+          cover: {
+            populate: '*',
+          },
+          solution_type: {
+            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);
-  }
-});
+        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;
-}
+  .page-container {
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.page-header {
-  display: flex;
-}
+  .page-header {
+    display: flex;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-  color: var(--el-color-primary);
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: var(--el-color-primary);
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.solution-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 1rem;
-  margin-bottom: 2rem;
-  gap: 40px;
-}
+  .solution-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 1rem;
+    margin-bottom: 2rem;
+    gap: 40px;
+  }
 </style>

app/pages/support/contact-us.vue

@@ -3,21 +3,21 @@
     <div v-if="content">
       <support-tabs model-value="contact-us" />
       <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-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/')">
-              {{ $t("navigation.home") }}
+              {{ $t('navigation.home') }}
             </NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support')">
-              {{ $t("navigation.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") }}
+              {{ $t('navigation.contact-info') }}
             </NuxtLink>
           </el-breadcrumb-item>
         </el-breadcrumb>
@@ -34,62 +34,62 @@
 </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,
+  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');
       }
-    );
-    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);
     }
-  } catch (error) {
-    console.error("Failed to fetch contact info:", error);
-  }
-});
+  });
 </script>
 
 <style scoped>
-.page-container {
-  max-width: 1200px;
-  margin: 0 auto;
-}
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.page-header {
-  display: flex;
-  padding: 2rem 2rem 0rem;
-}
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.page-content {
-  padding: 2rem;
-  margin-bottom: 2rem;
-}
+  .page-content {
+    padding: 2rem;
+    margin-bottom: 2rem;
+  }
 
-:deep(.markdown-body ul) {
-  list-style-type: none;
-}
+  :deep(.markdown-body ul) {
+    list-style-type: none;
+  }
 </style>

app/pages/support/documents.vue

@@ -6,21 +6,21 @@
     <div v-else>
       <support-tabs model-value="documents" />
       <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-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/')">{{
-              $t("navigation.home")
+              $t('navigation.home')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support')">{{
-              $t("navigation.support")
+              $t('navigation.support')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support/documents')">{{
-              $t("navigation.documents")
+              $t('navigation.documents')
             }}</NuxtLink>
           </el-breadcrumb-item>
         </el-breadcrumb>
@@ -33,57 +33,57 @@
 </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,
-        })) || [];
+  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;
     }
-  } catch (error) {
-    console.error("Error fetching documents:", error);
-  } finally {
-    pending.value = false;
-  }
-});
+  });
 </script>
 
 <style scoped>
-.page-container {
-  max-width: 1200px;
-  margin: 0 auto;
-}
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.page-header {
-  display: flex;
-  padding: 2rem 2rem 0rem;
-}
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.page-content {
-  padding: 1rem 2rem 2rem;
-}
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
 </style>

app/pages/support/faq.vue

@@ -6,21 +6,21 @@
     <div v-else>
       <support-tabs model-value="faq" />
       <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-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/')">{{
-              $t("navigation.home")
+              $t('navigation.home')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support')">{{
-              $t("navigation.support")
+              $t('navigation.support')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support/faq')">{{
-              $t("navigation.faq")
+              $t('navigation.faq')
             }}</NuxtLink>
           </el-breadcrumb-item>
         </el-breadcrumb>
@@ -33,53 +33,53 @@
 </template>
 
 <script setup lang="ts">
-const { find } = useStrapi();
-const { getStrapiLocale } = useLocalizations();
-const strapiLocale = getStrapiLocale();
+  const { find } = useStrapi();
+  const { getStrapiLocale } = useLocalizations();
+  const strapiLocale = getStrapiLocale();
 
-const questions = ref<Question[]>([]);
+  const questions = ref<Question[]>([]);
 
-const pending = ref(true);
+  const pending = ref(true);
 
-onMounted(async () => {
-  try {
-    const faqData = await find<Question>("questions", {
-      locale: strapiLocale,
-    });
-    if (faqData) {
-      questions.value = faqData.data || [];
+  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;
     }
-  } 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;
-}
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.page-header {
-  display: flex;
-  padding: 2rem 2rem 0rem;
-}
+  .page-header {
+    display: flex;
+    padding: 2rem 2rem 0rem;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.page-content {
-  padding: 1rem 2rem 2rem;
-}
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
 </style>

app/pages/support/index.vue

@@ -3,16 +3,16 @@
     <support-tabs />
     <div class="page-content">
       <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-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/')">{{
-              $t("navigation.home")
+              $t('navigation.home')
             }}</NuxtLink>
           </el-breadcrumb-item>
           <el-breadcrumb-item class="text-md opacity-50">
             <NuxtLink :to="$localePath('/support')">{{
-              $t("navigation.support")
+              $t('navigation.support')
             }}</NuxtLink>
           </el-breadcrumb-item>
         </el-breadcrumb>
@@ -32,7 +32,7 @@
             </el-col>
             <el-col :span="18">
               <div class="card-title">
-                <span>{{ $t("navigation.faq") }}</span>
+                <span>{{ $t('navigation.faq') }}</span>
               </div>
             </el-col>
           </el-row>
@@ -58,7 +58,7 @@
             </el-col>
             <el-col :span="18">
               <div class="card-title">
-                <span>{{ $t("navigation.documents") }}</span>
+                <span>{{ $t('navigation.documents') }}</span>
               </div>
             </el-col>
           </el-row>
@@ -84,7 +84,7 @@
             </el-col>
             <el-col :span="18">
               <div class="card-title">
-                <span>{{ $t("navigation.contact-info") }}</span>
+                <span>{{ $t('navigation.contact-info') }}</span>
               </div>
             </el-col>
           </el-row>
@@ -112,97 +112,97 @@
 <script setup lang="ts"></script>
 
 <style scoped>
-.page-container {
-  max-width: 1200px;
-  margin: 0 auto;
-}
+  .page-container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
-.page-header {
-  display: flex;
-}
+  .page-header {
+    display: flex;
+  }
 
-.page-title {
-  font-size: 2rem;
-  font-weight: bold;
-  color: var(--el-color-primary);
-  margin-bottom: 1rem;
-}
+  .page-title {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--el-color-primary);
+    margin-bottom: 1rem;
+  }
 
-.breadcrumb {
-  margin-left: auto;
-}
+  .breadcrumb {
+    margin-left: auto;
+  }
 
-.page-content {
-  padding: 1rem 2rem 2rem;
-}
+  .page-content {
+    padding: 1rem 2rem 2rem;
+  }
 
-section {
-  line-height: 1.6;
-  width: 60%;
-}
+  section {
+    line-height: 1.6;
+    width: 60%;
+  }
 
-.card-group {
-  display: flex;
-  gap: 50px;
-  justify-content: space-around;
-  margin-bottom: 2rem;
-}
+  .card-group {
+    display: flex;
+    gap: 50px;
+    justify-content: space-around;
+    margin-bottom: 2rem;
+  }
 
-.el-card {
-  width: 100%;
-  padding: 20px;
-  box-shadow: none;
-  border-radius: 8px;
-}
+  .el-card {
+    width: 100%;
+    padding: 20px;
+    box-shadow: none;
+    border-radius: 8px;
+  }
 
-.card-icon {
-  color: var(--el-color-primary);
-}
+  .card-icon {
+    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);
-}
+  .card-title {
+    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;
-}
+  .card-link {
+    margin-left: auto;
+  }
 
-.card-button {
-  cursor: pointer;
-  text-align: center;
-  font-size: 1rem;
-  color: var(--el-color-primary);
-  transition: all 0.3s ease;
-}
+  .card-button {
+    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;
-}
+  .button-group {
+    display: flex;
+    justify-content: left;
+    margin-top: 2rem;
+    margin-left: 2rem;
+    gap: 20px;
+  }
 
-.el-row {
-  margin-bottom: 20px;
-}
+  .el-row {
+    margin-bottom: 20px;
+  }
 
-.el-row:last-child {
-  margin-bottom: 0;
-}
+  .el-row:last-child {
+    margin-bottom: 0;
+  }
 
-.el-col {
-  border-radius: 4px;
-}
+  .el-col {
+    border-radius: 4px;
+  }
 
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
-}
+  .grid-content {
+    border-radius: 4px;
+    min-height: 36px;
+  }
 </style>

app/types/strapi/index.ts

@@ -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';

app/types/strapi/production.ts

@@ -3,7 +3,7 @@ import type {
   StrapiImage,
   StrapiMedia,
   StrapiRelation,
-} from "./common";
+} from './common';
 
 export interface ProductionType extends StrapiEntity {
   type: string;
@@ -29,13 +29,13 @@ export interface Production extends StrapiEntity {
   production_specs: ProductionSpecGroup[];
   production_documents: StrapiRelation<
     ProductionDocument,
-    "related_productions"
+    'related_productions'
   >[];
-  questions: StrapiRelation<Question, "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">[];
+  related_productions: StrapiRelation<Production, 'production_documents'>[];
 }

app/types/strapi/question.ts

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

app/types/strapi/solution.ts

@@ -1,4 +1,4 @@
-import type { StrapiEntity, StrapiImage } from "./common";
+import type { StrapiEntity, StrapiImage } from './common';
 
 export interface SolutionType extends StrapiEntity {
   type: string;

app/utils/file.ts

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

app/utils/markdown.ts

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

commitlint.config.mjs

@@ -1,3 +1,3 @@
 export default {
-    extends: ['@commitlint/config-conventional']
-};
+  extends: ['@commitlint/config-conventional'],
+};

eslint.config.mjs

@@ -1,6 +1,18 @@
 // @ts-check
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from './.nuxt/eslint.config.mjs';
 
 export default withNuxt(
   // Your custom configs here
-)
+  {
+    rules: {
+      'vue/html-self-closing': [
+        'warn',
+        {
+          html: {
+            void: 'any',
+          },
+        },
+      ],
+    },
+  }
+);

i18n.config.ts

@@ -2,5 +2,5 @@
 export default defineI18nConfig(() => ({
   legacy: false,
   locale: 'zh',
-  fallbackLocale: 'zh'
-}))
+  fallbackLocale: 'zh',
+}));

i18n/i18n.config.ts

@@ -1,5 +1,6 @@
 export default defineI18nConfig(() => ({
-    legacy: false,
-    locale: 'zh',
-    fallbackLocale: 'zh',
-}))
+  legacy: false,
+  locale: 'zh',
+  fallbackLocale: 'zh',
+}));
+

lint-staged.config.mjs

@@ -0,0 +1,8 @@
+/**
+ * @filename: lint-staged.config.mjs
+ * @type {import('lint-staged').Configuration}
+ */
+export default {
+  '*.{js,jsx,mjs,ts,tsx}': ['prettier --write'],
+  '*.{json,md,css,scss,html}': ['prettier --write'],
+};

nuxt.config.ts

@@ -1,33 +1,33 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: "2025-07-15",
+  compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
 
   app: {
     // head
     head: {
-      title: "金申机械制造有限公司",
+      title: '金申机械制造有限公司',
       meta: [
-        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
         {
-          name: "description",
-          content: "Jinshen Website",
+          name: 'description',
+          content: 'Jinshen Website',
         },
       ],
-      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
     },
   },
 
   runtimeConfig: {
     public: {
       meili: {
-        host: process.env.MEILI_HOST || "http://localhost:7700",
-        searchKey: process.env.MEILI_SEARCH_KEY || "",
+        host: process.env.MEILI_HOST || 'http://localhost:7700',
+        searchKey: process.env.MEILI_SEARCH_KEY || '',
         indexes: process.env.MEILI_SEARCH_INDEXES
-          ? (typeof process.env.MEILI_SEARCH_INDEXES === "string"
-              ? process.env.MEILI_SEARCH_INDEXES.split(",").map(i => i.trim())
-              : process.env.MEILI_SEARCH_INDEXES)
-          : ["production", "solution"],
+          ? typeof process.env.MEILI_SEARCH_INDEXES === 'string'
+            ? process.env.MEILI_SEARCH_INDEXES.split(',').map((i) => i.trim())
+            : process.env.MEILI_SEARCH_INDEXES
+          : ['production', 'solution'],
       },
     },
   },
@@ -38,22 +38,22 @@ export default defineNuxtConfig({
 
   // css
   css: [
-    "@unocss/reset/tailwind.css",
-    "~/assets/scss/index.scss",
-    "~/assets/css/fonts.css",
-    "@mdi/font/css/materialdesignicons.min.css",
+    '@unocss/reset/tailwind.css',
+    '~/assets/scss/index.scss',
+    '~/assets/css/fonts.css',
+    '@mdi/font/css/materialdesignicons.min.css',
   ],
 
   nitro: {
     esbuild: {
       options: {
-        target: "esnext",
+        target: 'esnext',
       },
     },
     prerender: {
       crawlLinks: false,
-      routes: ["/"],
-      ignore: ["/hi"],
+      routes: ['/'],
+      ignore: ['/hi'],
     },
   },
 
@@ -66,60 +66,59 @@ export default defineNuxtConfig({
       },
     },
   },
-  
+
   devServer: {
     port: 3000,
     host: '0.0.0.0',
   },
 
   elementPlus: {
-    icon: "ElIcon",
-    importStyle: "scss",
-    themes: ["dark"],
+    icon: 'ElIcon',
+    importStyle: 'scss',
+    themes: ['dark'],
   },
 
   i18n: {
     detectBrowserLanguage: {
       useCookie: true,
-      cookieKey: "i18n_redirected",
-      redirectOn: "root",
-      alwaysRedirect: true
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root',
+      alwaysRedirect: true,
     },
     locales: [
-      { code: "en", language: "en-US", name: "English", file: "en.json" },
-      { code: "zh", language: "zh-CN", name: "简体中文", file: "zh.json" },
+      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
+      { code: 'zh', language: 'zh-CN', name: '简体中文', file: 'zh.json' },
     ],
-    defaultLocale: "zh",
-    strategy: "prefix_except_default",
-    langDir: "locales",
+    defaultLocale: 'zh',
+    strategy: 'prefix_except_default',
+    langDir: 'locales',
   },
 
   strapi: {
-    url: process.env.STRAPI_URL || "http://localhost:1337",
+    url: process.env.STRAPI_URL || 'http://localhost:1337',
     token: process.env.STRAPI_TOKEN || undefined,
-    prefix: "/api",
-    admin: "/admin",
-    version: "v5",
+    prefix: '/api',
+    admin: '/admin',
+    version: 'v5',
     cookie: {},
-    cookieName: "strapi_jwt",
+    cookieName: 'strapi_jwt',
   },
 
   imports: {
-    dirs: ['types/**']
+    dirs: ['types/**'],
   },
 
-
   modules: [
-    "@nuxt/eslint",
-    "@nuxt/fonts",
-    "@nuxt/icon",
-    "@nuxt/image",
-    "@nuxt/test-utils",
-    "@vueuse/nuxt",
-    "@pinia/nuxt",
-    "@unocss/nuxt",
-    "@element-plus/nuxt",
-    "@nuxtjs/i18n",
-    "@nuxtjs/strapi",
+    '@nuxt/eslint',
+    '@nuxt/fonts',
+    '@nuxt/icon',
+    '@nuxt/image',
+    '@nuxt/test-utils',
+    '@vueuse/nuxt',
+    '@pinia/nuxt',
+    '@unocss/nuxt',
+    '@element-plus/nuxt',
+    '@nuxtjs/i18n',
+    '@nuxtjs/strapi',
   ],
 });

package.json

@@ -25,7 +25,6 @@
     "@vueuse/nuxt": "^13.6.0",
     "dompurify": "^3.2.6",
     "element-plus": "^2.10.7",
-    "eslint": "^9.0.0",
     "markdown-it": "^14.1.0",
     "meilisearch": "^0.53.0",
     "nuxt": "^4.0.3",
@@ -38,6 +37,9 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@element-plus/nuxt": "^1.1.4",
-    "husky": "^9.1.7"
+    "eslint": "^9.35.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.6",
+    "prettier": "^3.6.2"
   }
 }

pnpm-lock.yaml

@@ -50,9 +50,6 @@ importers:
       element-plus:
         specifier: ^2.10.7
         version: 2.11.2(vue@3.5.21(typescript@5.9.2))
-      eslint:
-        specifier: ^9.0.0
-        version: 9.35.0(jiti@2.5.1)
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
@@ -84,9 +81,18 @@ importers:
       '@element-plus/nuxt':
         specifier: ^1.1.4
         version: 1.1.4(@element-plus/icons-vue@2.3.2(vue@3.5.21(typescript@5.9.2)))(element-plus@2.11.2(vue@3.5.21(typescript@5.9.2)))(magicast@0.3.5)
+      eslint:
+        specifier: ^9.35.0
+        version: 9.35.0(jiti@2.5.1)
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      lint-staged:
+        specifier: ^16.1.6
+        version: 16.1.6
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
 
 packages:
 
@@ -2335,6 +2341,10 @@ packages:
   alien-signals@2.0.7:
     resolution: {integrity: sha512-wE7y3jmYeb0+h6mr5BOovuqhFv22O/MV9j5p0ndJsa7z1zJNPGQ4ph5pQk/kTTCWRC3xsA4SmtwmkzQO+7NCNg==}
 
+  ansi-escapes@7.1.0:
+    resolution: {integrity: sha512-YdhtCd19sKRKfAAUsrcC1wzm4JuzJoiX4pOJqIoW2qmKj5WzG/dL8uUJ0361zaXtHqK7gEhOwtAtz7t3Yq3X5g==}
+    engines: {node: '>=18'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -2587,6 +2597,14 @@ packages:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@5.1.0:
+    resolution: {integrity: sha512-7JDGG+4Zp0CsknDCedl0DYdaeOhc46QNpXi3NLQblkZpXXgA6LncLDUUyvrjSvZeF3VRQa+KiMGomazQrC1V8g==}
+    engines: {node: '>=20'}
+
   clipboardy@4.0.0:
     resolution: {integrity: sha512-5mOlNS0mhX0707P2I0aZ2V/cmHUEO/fL7VFLqszkhUsxt7RwnmrInf/eEQKlf5GzvYeHIjT+Ov1HRfNmymlG0w==}
     engines: {node: '>=18'}
@@ -2627,6 +2645,10 @@ packages:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
 
+  commander@14.0.1:
+    resolution: {integrity: sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==}
+    engines: {node: '>=20'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -2957,6 +2979,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  emoji-regex@10.5.0:
+    resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -2982,6 +3007,10 @@ packages:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
 
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
@@ -3193,6 +3222,9 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -3316,6 +3348,10 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -3551,6 +3587,10 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -3735,10 +3775,19 @@ packages:
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
+  lint-staged@16.1.6:
+    resolution: {integrity: sha512-U4kuulU3CKIytlkLlaHcGgKscNfJPNTiDF2avIUGFCv7K95/DCYQ7Ra62ydeRWmgQGg9zJYw2dzdbztwJlqrow==}
+    engines: {node: '>=20.17'}
+    hasBin: true
+
   listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
     hasBin: true
 
+  listr2@9.0.4:
+    resolution: {integrity: sha512-1wd/kpAdKRLwv7/3OKC8zZ5U8e/fajCfWMxacUvB79S5nLrYGPtUI/8chMQhn3LQjsRVErTb9i1ECAwW0ZIHnQ==}
+    engines: {node: '>=20.0.0'}
+
   load-tsconfig@0.2.5:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -3808,6 +3857,10 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -3902,6 +3955,10 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   mimic-response@3.1.0:
     resolution: {integrity: sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==}
     engines: {node: '>=10'}
@@ -3959,6 +4016,10 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  nano-spawn@1.0.3:
+    resolution: {integrity: sha512-jtpsQDetTnvS2Ts1fiRdci5rx0VYws5jGyC+4IYOTnIQ/wwdf6JdomlHBwqC3bJYOvaKu0C2GSZ1A60anrYpaA==}
+    engines: {node: '>=20.17'}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -4105,6 +4166,10 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
@@ -4250,6 +4315,11 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   pinia@3.0.3:
     resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
     peerDependencies:
@@ -4455,6 +4525,11 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@7.0.1:
     resolution: {integrity: sha512-285/jRCYIbMGDciDdrw0KPNC4LKEEwz/bwErcYNxSJOi4CpGUuLpb9gQpg3XJP0XYj9ldSRluXxih4lX2YN8Xw==}
     engines: {node: '>=20'}
@@ -4581,6 +4656,10 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   restructure@3.0.2:
     resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
 
@@ -4730,6 +4809,10 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
@@ -4786,6 +4869,10 @@ packages:
   streamx@2.22.1:
     resolution: {integrity: sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==}
 
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
@@ -4794,6 +4881,14 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string-width@8.1.0:
+    resolution: {integrity: sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==}
+    engines: {node: '>=20'}
+
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -5372,6 +5467,10 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  wrap-ansi@9.0.2:
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
+
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -8057,6 +8156,10 @@ snapshots:
 
   alien-signals@2.0.7: {}
 
+  ansi-escapes@7.1.0:
+    dependencies:
+      environment: 1.1.0
+
   ansi-regex@5.0.1: {}
 
   ansi-regex@6.2.2: {}
@@ -8324,6 +8427,15 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@5.1.0:
+    dependencies:
+      slice-ansi: 7.1.2
+      string-width: 8.1.0
+
   clipboardy@4.0.0:
     dependencies:
       execa: 8.0.1
@@ -8362,6 +8474,8 @@ snapshots:
 
   commander@11.1.0: {}
 
+  commander@14.0.1: {}
+
   commander@2.20.3: {}
 
   commander@7.2.0:
@@ -8675,6 +8789,8 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  emoji-regex@10.5.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
@@ -8695,6 +8811,8 @@ snapshots:
 
   env-paths@2.2.1: {}
 
+  environment@1.1.0: {}
+
   error-ex@1.3.2:
     dependencies:
       is-arrayish: 0.2.1
@@ -8972,6 +9090,8 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
+  eventemitter3@5.0.1: {}
+
   events@3.3.0: {}
 
   execa@8.0.1:
@@ -9099,6 +9219,8 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.4.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -9373,6 +9495,10 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -9522,6 +9648,21 @@ snapshots:
     dependencies:
       uc.micro: 2.1.0
 
+  lint-staged@16.1.6:
+    dependencies:
+      chalk: 5.6.2
+      commander: 14.0.1
+      debug: 4.4.3
+      lilconfig: 3.1.3
+      listr2: 9.0.4
+      micromatch: 4.0.8
+      nano-spawn: 1.0.3
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.8.1
+    transitivePeerDependencies:
+      - supports-color
+
   listhen@1.9.0:
     dependencies:
       '@parcel/watcher': 2.5.1
@@ -9543,6 +9684,15 @@ snapshots:
       untun: 0.1.3
       uqr: 0.1.2
 
+  listr2@9.0.4:
+    dependencies:
+      cli-truncate: 5.1.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.2
+
   load-tsconfig@0.2.5: {}
 
   loader-runner@4.3.0: {}
@@ -9595,6 +9745,14 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  log-update@6.1.0:
+    dependencies:
+      ansi-escapes: 7.1.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.2
+      strip-ansi: 7.1.2
+      wrap-ansi: 9.0.2
+
   lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
@@ -9682,6 +9840,8 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
+  mimic-function@5.0.1: {}
+
   mimic-response@3.1.0:
     optional: true
 
@@ -9731,6 +9891,8 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  nano-spawn@1.0.3: {}
+
   nanoid@3.3.11: {}
 
   nanoid@5.1.5: {}
@@ -10053,6 +10215,10 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   open@10.2.0:
     dependencies:
       default-browser: 5.2.1
@@ -10263,6 +10429,8 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pidtree@0.6.0: {}
+
   pinia@3.0.3(typescript@5.9.2)(vue@3.5.21(typescript@5.9.2)):
     dependencies:
       '@vue/devtools-api': 7.7.7
@@ -10469,6 +10637,8 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier@3.6.2: {}
+
   pretty-bytes@7.0.1: {}
 
   process-nextick-args@2.0.1: {}
@@ -10593,6 +10763,11 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   restructure@3.0.2: {}
 
   reusify@1.1.0: {}
@@ -10823,6 +10998,11 @@ snapshots:
 
   slash@5.1.0: {}
 
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
   smob@1.5.0: {}
 
   source-map-js@1.2.1: {}
@@ -10868,6 +11048,8 @@ snapshots:
     transitivePeerDependencies:
       - react-native-b4a
 
+  string-argv@0.3.2: {}
+
   string-width@4.2.3:
     dependencies:
       emoji-regex: 8.0.0
@@ -10880,6 +11062,17 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.2
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.5.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string-width@8.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -11546,6 +11739,12 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.2
 
+  wrap-ansi@9.0.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
   wrappy@1.0.2:
     optional: true
 

prettier.config.mjs

@@ -0,0 +1,42 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+export default {
+  // 打印宽度
+  printWidth: 80,
+  // 缩进空格数
+  tabWidth: 2,
+  // 使用制表符而不是空格缩进
+  useTabs: false,
+  // 句尾添加分号
+  semi: true,
+  // 使用单引号
+  singleQuote: true,
+  // 尾随逗号
+  trailingComma: 'es5',
+  // 对象大括号内的空格
+  bracketSpacing: true,
+  // 箭头函数参数括号
+  arrowParens: 'always',
+  // 括号行位置
+  bracketSameLine: false,
+  // 换行符使用 lf
+  endOfLine: 'lf',
+  // HTML 空格敏感度
+  htmlWhitespaceSensitivity: 'css',
+  // Vue 文件脚本和样式缩进
+  vueIndentScriptAndStyle: true,
+  overrides: [
+    {
+      // 对 CSS 文件使用双引号
+      files: '*.css',
+      options: { singleQuote: false },
+    },
+    {
+      // 对 SCSS 文件使用双引号
+      files: '*.scss',
+      options: { singleQuote: false },
+    },
+  ],
+};

uno.config.ts

@@ -7,12 +7,18 @@ import {
   // presetWebFonts,
   transformerDirectives,
   transformerVariantGroup,
-} from 'unocss'
+} from 'unocss';
 
 export default defineConfig({
   shortcuts: [
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
+    [
+      'btn',
+      'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
+    ],
+    [
+      'icon-btn',
+      'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600',
+    ],
   ],
   presets: [
     presetUno(),
@@ -30,8 +36,5 @@ export default defineConfig({
     //   },
     // }),
   ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-})
+  transformers: [transformerDirectives(), transformerVariantGroup()],
+});