增加足迹和收藏

frontend/src/features/listings/views/MobileListingDetailView.vue

@@ -5,6 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { showToast, showDialog } from 'vant'
 
 import { fetchListing, type Listing } from '@/features/listings/api/listings'
+import { useListingCollections } from '@/features/listings/composables/useListingCollections'
 import {
   createOrder,
   fetchOrderAgreements,
@@ -49,6 +50,7 @@ const virtualAgreementChecked = ref(false)
 const renterAgreementChecked = ref(false)
 const virtualAgreementRef = ref<HTMLElement | null>(null)
 const renterAgreementRef = ref<HTMLElement | null>(null)
+const { recordListingView, isFavorite, toggleFavorite } = useListingCollections()
 
 const canCreateOrderAfterAgreement = computed(
   () =>
@@ -62,6 +64,7 @@ onMounted(async () => {
   loading.value = true
   try {
     listing.value = await fetchListing(String(route.params.id))
+    recordListingView(listing.value)
   } catch {
     showToast({ message: '加载失败', icon: 'warning-o' })
   } finally {
@@ -69,6 +72,8 @@ onMounted(async () => {
   }
 })
 
+const listingFavorited = computed(() => (listing.value ? isFavorite(listing.value.id) : false))
+
 const orderTotal = computed(() => {
   if (!listing.value) return '0.0'
   return formatMoney(getListingDisplayPrice(listing.value))
@@ -274,6 +279,12 @@ async function copyListingCode() {
     showToast({ message: '复制失败', icon: 'cross' })
   }
 }
+
+function handleToggleFavorite() {
+  if (!listing.value) return
+  const added = toggleFavorite(listing.value)
+  showToast({ message: added ? '已收藏账号' : '已取消收藏', icon: added ? 'star' : 'success' })
+}
 </script>
 
 <template>
@@ -284,7 +295,9 @@ async function copyListingCode() {
         <van-icon name="arrow-left" :size="20" />
       </button>
       <h1>账号详情</h1>
-      <span class="header-spacer"></span>
+      <button v-if="listing" class="favorite-header-btn" type="button" @click="handleToggleFavorite">
+        <van-icon :name="listingFavorited ? 'star' : 'star-o'" :size="20" />
+      </button>
     </header>
 
     <van-loading v-if="loading" class="center-loading" size="24px" vertical>
@@ -329,6 +342,10 @@ async function copyListingCode() {
         <button class="mobile-code-chip" type="button" @click="copyListingCode">
           编号 {{ formatListingCode(listing) }}
         </button>
+        <button class="mobile-favorite-chip" type="button" @click="handleToggleFavorite">
+          <van-icon :name="listingFavorited ? 'star' : 'star-o'" :size="15" />
+          {{ listingFavorited ? '已收藏' : '收藏账号' }}
+        </button>
         <h2 class="detail-title">{{ getListingTitle(listing) }}</h2>
         <p class="detail-desc">{{ getListingSubtitle(listing) }}</p>
       </div>
@@ -545,7 +562,8 @@ async function copyListingCode() {
   text-align: center;
 }
 
-.back-btn {
+.back-btn,
+.favorite-header-btn {
   display: grid;
   width: 36px;
   height: 36px;
@@ -556,6 +574,10 @@ async function copyListingCode() {
   cursor: pointer;
 }
 
+.favorite-header-btn {
+  color: #ff6a00;
+}
+
 .header-spacer {
   width: 36px;
 }
@@ -642,6 +664,21 @@ async function copyListingCode() {
   font-weight: 800;
 }
 
+.mobile-favorite-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 6px;
+  margin-bottom: 8px;
+  padding: 4px 9px;
+  border: 1px solid #fed7aa;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .detail-title {
   margin: 0 0 6px;
   font-size: 20px;