app/components/pages/about/LearnMoreCard.vue

@@ -0,0 +1,93 @@
+<template>
+  <component
+    :is="wrapperTag"
+    v-bind="wrapperProps"
+    class="learn-more-wrapper"
+    @click="handleAsyncClick"
+  >
+    <el-card class="learn-more-card">
+      <el-icon class="icon" size="80">
+        <component :is="icon" />
+      </el-icon>
+      <br />
+      {{ title }}
+    </el-card>
+  </component>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: Object,
+      default: null,
+    },
+    to: {
+      type: String,
+      default: null,
+    },
+    href: {
+      type: [String, Function],
+      default: null,
+    },
+  });
+
+  // 包裹器标签
+  const wrapperTag = computed(() => {
+    if (props.to) return resolveComponent('NuxtLink');
+    if (props.href) return 'a';
+    return 'div';
+  });
+
+  // 包裹器属性
+  const wrapperProps = computed(() => {
+    // Nuxt 内部跳转
+    if (props.to) {
+      return { to: props.to };
+    }
+
+    // 外部跳转（字符串）
+    if (typeof props.href === 'string') {
+      return {
+        href: props.href,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+      };
+    }
+
+    // 其他情况：href 是异步函数 → 不在这里处理
+    return { href: '#' };
+  });
+
+  async function handleAsyncClick(event: Event) {
+    if (typeof props.href === 'function') {
+      event.preventDefault();
+      const url = await props.href();
+      window.open(url, '_blank', 'noopener,noreferrer');
+    }
+  }
+</script>
+
+<style scoped>
+  .learn-more-card {
+    width: 20%;
+    min-width: 200px;
+    padding: 20px;
+    margin: 0 auto;
+    cursor: pointer;
+    text-align: center;
+    font-size: 1.5em;
+  }
+
+  .learn-more-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  }
+
+  .icon {
+    padding: 10px;
+  }
+</style>

app/pages/about/index.vue

@@ -17,15 +17,16 @@
 
       <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>
       <div class="button-group">
-        <NuxtLink :to="$localePath('/support/contact-us')">
+        <learn-more-card
-          <el-card class="card-button">
+          :title="$t('navigation.contact-info')"
-            <el-icon class="icon" size="80">
+          :icon="ElIconService"
-              <ElIconService />
+          :to="$localePath('/support/contact-us')"
-            </el-icon>
+        />
-            <br />
+        <learn-more-card
-            {{ $t('navigation.contact-info') }}
+          :title="$t('navigation.address')"
-          </el-card>
+          :icon="ElIconMapLocation"
-        </NuxtLink>
+          :href="getAutoMappedService"
+        />
       </div>
     </div>
     <div v-else class="loading">
@@ -85,25 +86,7 @@
     justify-content: left;
     margin-top: 2rem;
     margin-left: 2rem;
-  }
+    gap: 2rem;
-
-  .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);
-  }
-
-  .icon {
-    padding: 10px;
   }
 
   .loading {

app/utils/autoMap.ts

@@ -0,0 +1,43 @@
+async function testSpeed(url: string, timeout = 1500) {
+  const start = performance.now();
+
+  try {
+    await Promise.race([
+      fetch(url, { method: 'HEAD', mode: 'no-cors' }),
+      new Promise((_, reject) => setTimeout(() => reject('timeout'), timeout)),
+    ]);
+
+    return performance.now() - start;
+  } catch {
+    return Infinity; // unreachable or timed out
+  }
+}
+
+async function selectBestMap() {
+  const testTargets = {
+    amap: 'https://www.amap.com/favicon.ico',
+    google: 'https://maps.google.com/favicon.ico',
+  };
+
+  const results: Record<string, number> = {};
+
+  for (const key in testTargets) {
+    results[key] = await testSpeed(testTargets[key]);
+  }
+
+  logger.debug(results);
+
+  // 根据延迟排序，选择最稳最快的平台
+  return Object.entries(results).sort((a, b) => a[1] - b[1])[0][0];
+}
+
+export async function getAutoMappedService(): Promise<string> {
+  const target = {
+    amap: 'https://surl.amap.com/2dYNorIJ1dgoN',
+    google: 'https://maps.app.goo.gl/9LqvMwEq7VaRkqnM6',
+  };
+
+  const fastestMap = await selectBestMap();
+
+  return target[fastestMap];
+}

i18n/locales/en.json

@@ -37,7 +37,8 @@
     "downloads": "Downloads",
     "faq": "FAQ",
     "documents": "Documents",
-    "calculator": "Calculator"
+    "calculator": "Calculator",
+    "address": "Company Address"
   },
   "contact-info": "Contact Us",
   "telephone": "Telephone",

i18n/locales/zh.json

@@ -37,7 +37,8 @@
     "downloads": "文件下载",
     "faq": "常见问题",
     "documents": "文档资料",
-    "calculator": "纸管计算工具"
+    "calculator": "纸管计算工具",
+    "address": "公司地址"
   },
   "contact-info": "联系我们",
   "telephone": "电话",