新增添加到桌面引导

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>

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;

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"

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',