From 85f2d9b3b374ea39aa50dd9693779743484de7a1 Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Mon, 15 Jun 2026 11:09:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B7=BB=E5=8A=A0=E5=88=B0?=
 =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E5=BC=95=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/assets/share-menu-icon.png       | Bin 0 -> 2156 bytes
 .../guide/views/MobileAddHomeGuideView.vue    | 455 ++++++++++++++++++
 .../listings/views/MobileHomeView.css         |  70 +++
 .../listings/views/MobileHomeView.vue         |  10 +
 frontend/src/router/mobileRoutes.ts           |   6 +
 5 files changed, 541 insertions(+)
 create mode 100644 frontend/src/assets/share-menu-icon.png
 create mode 100644 frontend/src/features/guide/views/MobileAddHomeGuideView.vue

diff --git a/frontend/src/assets/share-menu-icon.png b/frontend/src/assets/share-menu-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6de6fb4f87855909d5667933a180293e51cc9dc
GIT binary patch
literal 2156
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

literal 0
HcmV?d00001

diff --git a/frontend/src/features/guide/views/MobileAddHomeGuideView.vue b/frontend/src/features/guide/views/MobileAddHomeGuideView.vue
new file mode 100644
index 0000000..206d6f9
--- /dev/null
+++ b/frontend/src/features/guide/views/MobileAddHomeGuideView.vue
@@ -0,0 +1,455 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import shareMenuIcon from '@/assets/share-menu-icon.png'
+
+const router = useRouter()
+
+const homeUrl = computed(() => {
+  if (typeof window === 'undefined') return 'https://hao858.com/m'
+  return `${window.location.origin}/m`
+})
+
+const displayHost = computed(() => {
+  if (typeof window === 'undefined') return 'hao858.com'
+  return window.location.host || 'hao858.com'
+})
+
+async function copyHomeUrl() {
+  try {
+    await navigator.clipboard.writeText(homeUrl.value)
+    showToast({ message: '首页链接已复制', icon: 'success' })
+  } catch {
+    showToast({ message: '复制失败，请手动复制浏览器地址', icon: 'cross' })
+  }
+}
+</script>
+
+<template>
+  <main class="add-home-guide">
+    <header class="page-header">
+      <button class="back-btn" type="button" @click="router.back()">
+        <van-icon name="arrow-left" :size="20" />
+      </button>
+      <h1>添加到桌面</h1>
+      <button class="home-btn" type="button" @click="router.push('/m')">首页</button>
+    </header>
+
+    <section class="guide-hero">
+      <div class="guide-hero-copy">
+        <span>大锤商行</span>
+        <h2>如何添加到手机</h2>
+        <p>添加后可从桌面直接进入，找号、下单和查看消息更顺手。</p>
+      </div>
+      <div class="hammer-badge" aria-hidden="true">锤</div>
+    </section>
+
+    <section class="guide-step">
+      <div class="step-index">1</div>
+      <div class="step-body">
+        <h3>点击浏览器「分享/共享」</h3>
+        <p>请先用 Safari、Chrome 或系统浏览器打开大锤商行，在底部工具栏或菜单里找到入口。</p>
+        <div class="browser-demo" aria-label="浏览器分享或共享按钮示意">
+          <div class="demo-nav">
+            <span>AA</span>
+            <strong>{{ displayHost }}</strong>
+            <van-icon name="replay" :size="18" />
+          </div>
+          <div class="share-action">
+            <img :src="shareMenuIcon" alt="分享或共享" />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="guide-step">
+      <div class="step-index">2</div>
+      <div class="step-body">
+        <h3>下滑点击「添加到主屏幕」</h3>
+        <p>在分享/共享菜单中找到添加入口，确认名称后保存即可。</p>
+        <div class="menu-demo" aria-label="添加到主屏幕菜单示意">
+          <div class="menu-row">
+            <span>添加到阅读列表</span>
+            <van-icon name="eye-o" :size="20" />
+          </div>
+          <div class="menu-row">
+            <span>添加书签</span>
+            <van-icon name="bookmark-o" :size="20" />
+          </div>
+          <div class="menu-row">
+            <span>添加到个人收藏</span>
+            <van-icon name="star-o" :size="20" />
+          </div>
+          <div class="menu-row is-active">
+            <strong>添加到主屏幕</strong>
+            <span class="plus-box">+</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="guide-note">
+      <van-icon name="info-o" :size="18" />
+      <p>
+        如果当前在微信或 QQ 内置浏览器，请先点右上角「...」选择在系统浏览器打开，再按上方步骤添加。
+      </p>
+    </section>
+
+    <div class="guide-actions">
+      <button class="primary-action" type="button" @click="copyHomeUrl">复制首页链接</button>
+      <button class="secondary-action" type="button" @click="router.push('/m')">返回首页</button>
+    </div>
+
+    <footer class="guide-footer">
+      <span>找回包赔</span>
+      <span>安心服务</span>
+      <span>真实号源</span>
+    </footer>
+  </main>
+</template>
+
+<style scoped>
+.add-home-guide {
+  width: 100%;
+  max-width: 430px;
+  min-height: 100dvh;
+  margin: 0 auto;
+  padding-bottom: calc(24px + env(safe-area-inset-bottom));
+  background: #f6f8fb;
+  color: #17233d;
+}
+
+.page-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: grid;
+  grid-template-columns: 44px 1fr 52px;
+  align-items: center;
+  height: 48px;
+  padding: 0 8px;
+  border-bottom: 1px solid #edf0f5;
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(10px);
+}
+
+.page-header h1 {
+  margin: 0;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 800;
+  text-align: center;
+}
+
+.back-btn,
+.home-btn {
+  display: grid;
+  height: 40px;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: #374151;
+}
+
+.back-btn {
+  width: 40px;
+}
+
+.home-btn {
+  justify-self: end;
+  padding: 0 8px;
+  color: #ff6a00;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.guide-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 88px;
+  gap: 16px;
+  align-items: center;
+  margin: 12px;
+  padding: 18px;
+  border: 1px solid #fed7aa;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 58%, #eef6ff 100%);
+}
+
+.guide-hero-copy {
+  min-width: 0;
+}
+
+.guide-hero-copy span {
+  color: #c2410c;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.guide-hero-copy h2 {
+  margin: 7px 0 0;
+  color: #1f1308;
+  font-size: 28px;
+  font-weight: 900;
+  line-height: 1.18;
+}
+
+.guide-hero-copy p {
+  margin: 10px 0 0;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.hammer-badge {
+  display: grid;
+  width: 82px;
+  height: 82px;
+  place-items: center;
+  border-radius: 22px;
+  background: linear-gradient(135deg, #ff9a3d, #ef4444);
+  color: #fff;
+  font-size: 30px;
+  font-weight: 900;
+  box-shadow: 0 18px 36px rgba(239, 68, 68, 0.2);
+  transform: rotate(-8deg);
+}
+
+.guide-step {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 8px;
+  margin: 12px;
+}
+
+.step-index {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 999px;
+  background: #ff8a1f;
+  color: #fff;
+  font-size: 18px;
+  font-weight: 900;
+  box-shadow: 0 8px 18px rgba(255, 138, 31, 0.18);
+}
+
+.step-body {
+  min-width: 0;
+}
+
+.step-body h3 {
+  margin: 2px 0 6px;
+  color: #111827;
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 1.35;
+}
+
+.step-body p {
+  margin: 0 0 10px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.browser-demo,
+.menu-demo {
+  overflow: hidden;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+}
+
+.browser-demo {
+  display: grid;
+  gap: 14px;
+  justify-items: center;
+  padding: 22px 16px 18px;
+}
+
+.demo-nav {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 38px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+  min-height: 46px;
+  padding: 0 12px;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #111827;
+  box-shadow: inset 0 0 0 1px #eef2f7;
+}
+
+.demo-nav span,
+.demo-nav strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.demo-nav span {
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.demo-nav strong {
+  font-size: 17px;
+  font-weight: 900;
+  text-align: center;
+}
+
+.share-action {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  place-items: center;
+  border-radius: 16px;
+  background: #eff6ff;
+  color: #1683ff;
+  box-shadow: 0 10px 22px rgba(22, 131, 255, 0.14);
+}
+
+.share-action img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.menu-demo {
+  display: grid;
+  padding: 8px 0;
+}
+
+.menu-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: 0 18px;
+  border-bottom: 1px solid #eef2f7;
+  color: #111827;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.menu-row:last-child {
+  border-bottom: 0;
+}
+
+.menu-row.is-active {
+  margin: 7px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: #fff7ed;
+  color: #c2410c;
+  box-shadow: 0 10px 22px rgba(255, 106, 0, 0.12);
+}
+
+.plus-box {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 2px solid #111827;
+  border-radius: 7px;
+  color: #111827;
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.guide-note {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin: 12px;
+  padding: 12px;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.guide-note p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.55;
+}
+
+.guide-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin: 14px 12px 0;
+}
+
+.primary-action,
+.secondary-action {
+  height: 42px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.primary-action {
+  border: 0;
+  background: #ff6a00;
+  color: #fff;
+}
+
+.secondary-action {
+  border: 1px solid #dbe3ee;
+  background: #fff;
+  color: #475569;
+}
+
+.primary-action:active,
+.secondary-action:active,
+.home-btn:active,
+.back-btn:active {
+  transform: translateY(1px);
+}
+
+.guide-footer {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 22px;
+  color: #7c8899;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+@media (max-width: 360px) {
+  .guide-hero {
+    grid-template-columns: minmax(0, 1fr) 70px;
+    padding: 16px;
+  }
+
+  .guide-hero-copy h2 {
+    font-size: 24px;
+  }
+
+  .hammer-badge {
+    width: 68px;
+    height: 68px;
+    border-radius: 18px;
+    font-size: 24px;
+  }
+
+  .guide-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .guide-footer {
+    gap: 10px;
+  }
+}
+</style>
diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css
index ddd5bda..a09ac97 100644
--- a/frontend/src/features/listings/views/MobileHomeView.css
+++ b/frontend/src/features/listings/views/MobileHomeView.css
@@ -82,6 +82,76 @@
   font-weight: 700;
 }
 
+.add-home-strip {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 50px;
+  margin-top: 10px;
+  padding: 8px 10px;
+  border: 1px solid #fed7aa;
+  border-radius: 8px;
+  background: #fff7ed;
+  color: #7c2d12;
+  text-decoration: none;
+}
+
+.add-home-mark {
+  display: grid;
+  flex: 0 0 auto;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #ff7a1a, #ef4444);
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.2);
+}
+
+.add-home-copy {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  gap: 2px;
+}
+
+.add-home-copy strong,
+.add-home-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.add-home-copy strong {
+  color: #7c2d12;
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.add-home-copy small {
+  color: #c2410c;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.add-home-cta {
+  display: grid;
+  flex: 0 0 auto;
+  min-width: 64px;
+  height: 32px;
+  place-items: center;
+  border-radius: 8px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.18);
+}
+
+.add-home-strip:active {
+  transform: translateY(1px);
+}
+
 .fraud-tip {
   display: flex;
   align-items: center;
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index 2805898..7e83ae5 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/frontend/src/features/listings/views/MobileHomeView.vue
@@ -610,6 +610,16 @@ syncMobileHomeQuery()
           {{ supportLoading ? '接入中' : '客服' }}
         </button>
       </div>
+      <RouterLink class="add-home-strip" to="/m/add-home-guide" aria-label="查看添加到手机桌面教程">
+        <span class="add-home-mark">
+          <van-icon name="home-o" :size="18" />
+        </span>
+        <span class="add-home-copy">
+          <strong>添加到手机桌面</strong>
+          <small>下次像 App 一样快速打开</small>
+        </span>
+        <span class="add-home-cta">去添加</span>
+      </RouterLink>
       <van-search
         v-model="searchValue"
         shape="round"
diff --git a/frontend/src/router/mobileRoutes.ts b/frontend/src/router/mobileRoutes.ts
index c33faba..2727ed9 100644
--- a/frontend/src/router/mobileRoutes.ts
+++ b/frontend/src/router/mobileRoutes.ts
@@ -25,6 +25,12 @@ export const mobileRoutes: RouteRecordRaw[] = [
     component: () => import('@/features/listings/views/MobileListingDetailView.vue'),
     meta: { layout: 'blank' },
   },
+  {
+    path: '/m/add-home-guide',
+    name: 'mobile-add-home-guide',
+    component: () => import('@/features/guide/views/MobileAddHomeGuideView.vue'),
+    meta: { layout: 'blank' },
+  },
   {
     path: '/m/login',
     name: 'mobile-login',