fix: 修正面包屑导航的显示逻辑

- 竖屏下不显示面包屑导航
fix: 调整面包屑导航的显示逻辑
2025-12-27 17:06:03 +08:00 · 2025-12-27 17:05:41 +08:00 · 2025-12-26 15:01:35 +08:00 · 2025-12-24 14:56:28 +08:00 · 2025-12-19 13:28:54 +08:00 · 2025-12-19 13:26:48 +08:00
23 changed files with 176 additions and 72 deletions
--- a/app/components/pages/search/SearchTabs.vue
+++ b/app/components/pages/search/SearchTabs.vue
@ -47,3 +47,9 @@
    currentPage.value = 1; // 重置页码
  });
 </script>
+
+<style scoped>
+  .el-tabs {
+    width: 100%;
+  }
+</style>
--- a/app/components/shared/JinshenFooter.vue
+++ b/app/components/shared/JinshenFooter.vue
@ -48,7 +48,7 @@
        <ul class="footer-links">
          <li>
            <a
-              href="http://cal.3w.jinshen.cn"
+              href="http://cal.jinshen.cn"
              target="_blank"
              rel="noopener noreferer"
            >
--- a/app/components/shared/JinshenHeader.vue
+++ b/app/components/shared/JinshenHeader.vue
@ -53,7 +53,7 @@
        class="hide-on-mobile"
        type="info"
        :underline="false"
-        href="http://cal.3w.jinshen.cn"
+        href="http://cal.jinshen.cn"
        target="_blank"
      >
        <el-icon class="mdi mdi-calculator action-icon" />
@ -131,9 +131,7 @@
              mode="vertical"
              @select="mobileMenuVisible = false"
            >
-              <el-menu-item
-                @click="openExternalLink('http://cal.3w.jinshen.cn')"
-              >
+              <el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
                {{ $t('navigation.calculator') }}
              </el-menu-item>
            </el-menu>
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@ -109,5 +109,9 @@
      margin-left: 0;
      gap: 0.5rem;
    }
+
+    .breadcrumb {
+      display: none;
+    }
  }
 </style>
--- a/app/pages/download/[id].vue
+++ b/app/pages/download/[id].vue
@ -4,11 +4,17 @@
      <h1 class="page-title">{{ $t('navigation.downloads') }}</h1>
      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
    </div>
-    <div v-if="!pending" class="page-content">
-      <file-card :file-id="id" :file="file" />
-    </div>
-    <div v-else>
-      <el-skeleton :rows="6" animated />
+    <div class="page-content">
+      <el-skeleton
+        :loading="pending"
+        :rows="6"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #default>
+          <file-card :file-id="id" :file="file" />
+        </template>
+      </el-skeleton>
    </div>
  </div>
 </template>
@ -66,4 +72,10 @@
  .breadcrumb {
    margin-left: auto;
  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
 </style>
--- a/app/pages/locate.vue
+++ b/app/pages/locate.vue
@ -1,5 +1,7 @@
 <template>
-  <div>redirecting...</div>
+  <div class="page-container">
+    <h1>{{ $t('redirecting') }}</h1>
+  </div>
 </template>

 <script setup lang="ts">
@ -10,3 +12,17 @@
    window.location.href = platform;
  });
 </script>
+
+<style scoped>
+  .page-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+</style>
--- a/app/pages/products/[slug].vue
+++ b/app/pages/products/[slug].vue
@ -1,31 +1,21 @@
 <template>
  <div class="page-container">
-    <div v-if="!pending">
-      <div v-if="product">
-        <!-- 面包屑导航 -->
-        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-        <!-- 产品详情内容 -->
-        <product-header :product="product" />
-        <!-- 产品详细描述 -->
-        <product-detail :product="product" />
-      </div>
-      <!-- 未找到产品 -->
-      <div v-else class="not-found">
-        <not-found-result
-          :title="$t('product-not-found')"
-          :sub-title="$t('product-not-found-desc')"
-          :back-text="$t('back-to-products')"
-          :on-back="() => $router.push($localePath('/products'))"
-        />
-      </div>
+    <div v-if="product">
+      <!-- 面包屑导航 -->
+      <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
+      <!-- 产品详情内容 -->
+      <product-header :product="product" />
+      <!-- 产品详细描述 -->
+      <product-detail :product="product" />
    </div>
-    <div v-else class="loading">
-      <el-skeleton style="--el-skeleton-circle-size: 400px">
-        <template #template>
-          <el-skeleton-item variant="circle" />
-        </template>
-      </el-skeleton>
-      <el-skeleton :rows="5" animated />
+    <!-- 未找到产品 -->
+    <div v-else class="not-found">
+      <not-found-result
+        :title="$t('product-not-found')"
+        :sub-title="$t('product-not-found-desc')"
+        :back-text="$t('back-to-products')"
+        :on-back="() => $router.push($localePath('/products'))"
+      />
    </div>
  </div>
 </template>
@ -37,7 +27,7 @@
  // 获取路由参数
  const id = route.params.slug as string;

-  const { data: product, pending, error } = await useProduct(id);
+  const { data: product, error } = await useProduct(id);

  const breadcrumbItems = computed(() => [
    { label: $t('navigation.home'), to: localePath('/') },
--- a/app/pages/products/index.vue
+++ b/app/pages/products/index.vue
@ -207,6 +207,10 @@
    .skeleton-card {
      width: 90%;
    }
+
+    .breadcrumb {
+      display: none;
+    }
  }

  :deep(.el-collapse-item__header) {
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@ -1,18 +1,33 @@
 <template>
  <div class="search-page">
    <search-header v-model="keyword" />
-    <div v-if="loading" class="search-state">
-      <el-skeleton :rows="4" animated />
-    </div>
-    <search-tabs v-else-if="hasResults" :search-items="searchItems" />
-    <div v-else class="search-state">
-      <el-empty
-        :description="
-          route.query.query
-            ? $t('search.no-results', { query: route.query?.query })
-            : $t('search.no-query')
-        "
-      />
+    <div class="search-state">
+      <el-skeleton
+        :loading="loading"
+        animated
+        :throttle="{ leading: 500, trailing: 500 }"
+      >
+        <template #template>
+          <el-skeleton-item
+            v-for="i in 10"
+            :key="i"
+            variant="rect"
+            class="skeleton-item"
+          />
+        </template>
+        <template #default>
+          <search-tabs v-if="hasResults" :search-items="searchItems" />
+          <div v-else>
+            <el-empty
+              :description="
+                route.query.query
+                  ? $t('search.no-results', { query: route.query?.query })
+                  : $t('search.no-query')
+              "
+            />
+          </div>
+        </template>
+      </el-skeleton>
    </div>
  </div>
 </template>
@ -96,7 +111,11 @@
  .search-state {
    display: flex;
    justify-content: center;
-    padding: 3rem 0;
+  }
+
+  .skeleton-item {
+    height: 80px;
+    margin-bottom: 1rem;
  }

  @media (max-width: 640px) {
--- a/app/pages/solutions/[slug].vue
+++ b/app/pages/solutions/[slug].vue
@ -1,23 +1,18 @@
 <template>
  <div class="page-container">
-    <div v-if="!pending">
-      <div v-if="solution">
-        <div class="page-header">
-          <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
-        </div>
-        <solution-detail :solution="solution" />
-      </div>
-      <div v-else class="not-found">
-        <not-found-result
-          :title="$t('solution-not-found')"
-          :sub-title="$t('solution-not-found-desc')"
-          :back-text="$t('back-to-solutions')"
-          :on-back="() => $router.push($localePath('/solutions'))"
-        />
+    <div v-if="solution">
+      <div class="page-header">
+        <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
      </div>
+      <solution-detail :solution="solution" />
    </div>
-    <div v-else class="loading">
-      <el-skeleton :rows="5" animated />
+    <div v-else class="not-found">
+      <not-found-result
+        :title="$t('solution-not-found')"
+        :sub-title="$t('solution-not-found-desc')"
+        :back-text="$t('back-to-solutions')"
+        :on-back="() => $router.push($localePath('/solutions'))"
+      />
    </div>
  </div>
 </template>
@ -29,7 +24,7 @@
  // 获取路由参数
  const id = route.params.slug as string;

-  const { data: solution, pending, error } = await useSolution(id);
+  const { data: solution, error } = await useSolution(id);

  const breadcrumbItems = computed(() => [
    { label: $t('navigation.home'), to: localePath('/') },
--- a/app/pages/solutions/index.vue
+++ b/app/pages/solutions/index.vue
@ -172,5 +172,9 @@
    .skeleton-card {
      width: 90%;
    }
+
+    .breadcrumb {
+      display: none;
+    }
  }
 </style>
--- a/app/pages/support/contact-us.vue
+++ b/app/pages/support/contact-us.vue
@ -87,4 +87,10 @@
  :deep(.markdown-body ul) {
    list-style-type: none;
  }
+
+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
 </style>
--- a/app/pages/support/documents.vue
+++ b/app/pages/support/documents.vue
@ -226,6 +226,12 @@
    margin-top: 2rem;
  }

+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+
  :deep(.el-pagination) {
    .btn-prev,
    .btn-next {
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@ -223,6 +223,12 @@
    margin-top: 2rem;
  }

+  @media (max-width: 768px) {
+    .breadcrumb {
+      display: none;
+    }
+  }
+
  :deep(.el-pagination) {
    .btn-prev,
    .btn-next {
--- a/app/pages/support/index.vue
+++ b/app/pages/support/index.vue
@ -137,5 +137,9 @@
      grid-template-columns: 1fr;
      gap: 20px;
    }
+
+    .breadcrumb {
+      display: none;
+    }
  }
 </style>
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@ -127,5 +127,6 @@
    "specs": "Specifications",
    "faq": "FAQ",
    "documents": "Documents"
-  }
+  },
+  "redirecting": "Redirecting..."
 }
--- a/i18n/locales/es.json
+++ b/i18n/locales/es.json
@ -126,5 +126,6 @@
    "specs": "Especificaciones",
    "faq": "FAQ",
    "documents": "Documentos"
-  }
+  },
+  "redirecting": "Redirigiendo..."
 }
--- a/i18n/locales/ru.json
+++ b/i18n/locales/ru.json
@ -126,5 +126,6 @@
    "specs": "Технические спецификации",
    "faq": "Часто задаваемые вопросы",
    "documents": "Связанные документы"
-  }
+  },
+  "redirecting": "Перенаправление..."
 }
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@ -126,5 +126,6 @@
    "specs": "技术规格",
    "faq": "常见问题",
    "documents": "相关文档"
-  }
+  },
+  "redirecting": "正在跳转..."
 }
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -20,7 +20,17 @@ export default defineNuxtConfig({
      htmlAttrs: {
        lang: 'zh',
      },
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/jinshen-logo.ico' }],
+      link: [
+        { rel: 'icon', type: 'image/x-icon', href: '/jinshen-logo.ico' },
+        {
+          rel: 'apple-touch-icon',
+          href: '/jinshen-logo.png',
+        },
+        {
+          rel: 'manifest',
+          href: '/manifest.json',
+        },
+      ],
    },
  },

--- a/public/logo196x196.png
+++ b/public/logo196x196.png
--- a/public/logo512x512.png
+++ b/public/logo512x512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,20 @@
+{
+  "name": "金申机械制造有限公司",
+  "short_name": "金申机械",
+  "icons": [
+    {
+      "src": "/logo196x196.png",
+      "sizes": "196x196",
+      "type": "image/png"
+    },
+    {
+      "src": "/logo512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#0f172a"
+}
Author	SHA1	Message	Date
R2m1liA	66adf7f545	fix: 修正面包屑导航的显示逻辑 All checks were successful deploy to server / build-and-deploy (push) Successful in 3m7s Details - 竖屏下不显示面包屑导航	2025-12-27 17:06:03 +08:00
R2m1liA	f87b977c87	fix: 调整面包屑导航的显示逻辑 - 在移动端隐藏面包屑导航	2025-12-27 17:05:41 +08:00
R2m1liA	601c4abe53	fix: 修正计算器连接 All checks were successful deploy to server / build-and-deploy (push) Successful in 3m3s Details - 域名改为cal.jinshen.cn	2025-12-26 15:01:35 +08:00
R2m1liA	b71ee98129	feat: 为Apple/PWA进行图标适配 All checks were successful deploy to server / build-and-deploy (push) Successful in 3m23s Details	2025-12-24 14:56:28 +08:00
R2m1liA	7611d4f079	fix: 调整页面渲染机制 All checks were successful deploy to server / build-and-deploy (push) Successful in 3m9s Details - 懒加载：部分页面添加懒加载机制，在用户访问时先加载静态资源在获取动态资源 - 骨架屏机制：各个页面的骨架屏渲染有el-skeleton自身模板控制 - 布局调整：部分页面布局调整 - i18n文本：新增国际化文本redirecting	2025-12-19 13:28:54 +08:00
R2m1liA	76fb3ddcb7	fix: 重定向页布局调整 All checks were successful deploy to server / build-and-deploy (push) Successful in 2m54s Details	2025-12-19 13:26:48 +08:00
R2m1liA	aa26731731	fix: 补全骨架屏渲染机制 - 补全各个页面的骨架屏渲染机制修改	2025-12-19 13:26:26 +08:00