From 67629ed518304e71fa9c7be9b99b2e7ebe61a850 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Tue, 18 Nov 2025 14:11:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20about=E9=A1=B5=E9=9D=A2=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=85=AC=E5=8F=B8=E5=9C=B0=E5=9D=80=E8=B7=B3=E8=BD=AC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 外部链接跳转：点击公司地址时，跳转带外部地图服务商链接
- 智能跳转： 根据用户的连接情况，自动选择google地图或者高德地图
---
 app/components/pages/about/LearnMoreCard.vue | 93 ++++++++++++++++++++
 app/pages/about/index.vue                    | 39 +++-----
 app/utils/autoMap.ts                         | 43 +++++++++
 i18n/locales/en.json                         |  3 +-
 i18n/locales/zh.json                         |  3 +-
 5 files changed, 151 insertions(+), 30 deletions(-)
 create mode 100644 app/components/pages/about/LearnMoreCard.vue
 create mode 100644 app/utils/autoMap.ts

diff --git a/app/components/pages/about/LearnMoreCard.vue b/app/components/pages/about/LearnMoreCard.vue
new file mode 100644
index 0000000..49eb285
--- /dev/null
+++ b/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>
diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index ff613a8..37ce79a 100644
--- a/app/pages/about/index.vue
+++ b/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')">
-          <el-card class="card-button">
-            <el-icon class="icon" size="80">
-              <ElIconService />
-            </el-icon>
-            <br />
-            {{ $t('navigation.contact-info') }}
-          </el-card>
-        </NuxtLink>
+        <learn-more-card
+          :title="$t('navigation.contact-info')"
+          :icon="ElIconService"
+          :to="$localePath('/support/contact-us')"
+        />
+        <learn-more-card
+          :title="$t('navigation.address')"
+          :icon="ElIconMapLocation"
+          :href="getAutoMappedService"
+        />
       </div>
     </div>
     <div v-else class="loading">
@@ -85,25 +86,7 @@
     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:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-  }
-
-  .icon {
-    padding: 10px;
+    gap: 2rem;
   }
 
   .loading {
diff --git a/app/utils/autoMap.ts b/app/utils/autoMap.ts
new file mode 100644
index 0000000..c55efde
--- /dev/null
+++ b/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];
+}
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index aaa5fc1..f9fde1c 100644
--- a/i18n/locales/en.json
+++ b/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",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index 7d3d16f..ad4373c 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -37,7 +37,8 @@
     "downloads": "文件下载",
     "faq": "常见问题",
     "documents": "文档资料",
-    "calculator": "纸管计算工具"
+    "calculator": "纸管计算工具",
+    "address": "公司地址"
   },
   "contact-info": "联系我们",
   "telephone": "电话",