增加足迹和收藏

frontend/src/features/auth/views/MobileProfileView.vue

@@ -327,7 +327,7 @@ function resolveAvatarURL(url: string | undefined | null) {
             全部订单 <van-icon name="arrow" :size="10" />
           </span>
         </div>
-        <div class="grid-menu col-4">
+        <div class="grid-menu col-5">
           <div class="grid-item" @click="goOrders('pending_payment')">
             <div class="icon-wrap warning"><van-icon name="bill-o" :size="22" /></div>
             <span>待支付</span>
@@ -344,6 +344,10 @@ function resolveAvatarURL(url: string | undefined | null) {
             <div class="icon-wrap success"><van-icon name="smile-o" :size="22" /></div>
             <span>已完成</span>
           </div>
+          <div class="grid-item" @click="router.push('/m/listings/collections')">
+            <div class="icon-wrap orange"><van-icon name="star-o" :size="22" /></div>
+            <span>我的足迹</span>
+          </div>
         </div>
       </div>
 
@@ -791,6 +795,10 @@ function resolveAvatarURL(url: string | undefined | null) {
   flex: 0 0 25%;
 }
 
+.grid-menu.col-5 .grid-item {
+  flex: 0 0 20%;
+}
+
 .grid-menu.col-3 .grid-item {
   flex: 0 0 33.33%;
 }

frontend/src/features/listings/composables/useListingCollections.ts

@@ -0,0 +1,122 @@
+import { computed, ref } from 'vue'
+
+import type { Listing } from '@/features/listings/api/listings'
+
+const historyKey = 'hfb.listing.view.history'
+const favoriteKey = 'hfb.listing.favorites'
+const maxHistoryItems = 80
+
+export interface ListingCollectionItem {
+  listing: Listing
+  viewed_at?: string
+  favorited_at?: string
+}
+
+const historyItems = ref<ListingCollectionItem[]>(readItems(historyKey))
+const favoriteItems = ref<ListingCollectionItem[]>(readItems(favoriteKey))
+
+export function useListingCollections() {
+  const history = computed(() => historyItems.value)
+  const favorites = computed(() => favoriteItems.value)
+  const favoriteIDs = computed(() => new Set(favoriteItems.value.map(item => item.listing.id)))
+
+  function recordListingView(listing: Listing) {
+    const nextItem: ListingCollectionItem = {
+      listing: snapshotListing(listing),
+      viewed_at: new Date().toISOString(),
+    }
+    historyItems.value = [
+      nextItem,
+      ...historyItems.value.filter(item => item.listing.id !== listing.id),
+    ].slice(0, maxHistoryItems)
+    writeItems(historyKey, historyItems.value)
+  }
+
+  function isFavorite(listingID: number) {
+    return favoriteIDs.value.has(listingID)
+  }
+
+  function toggleFavorite(listing: Listing) {
+    if (isFavorite(listing.id)) {
+      favoriteItems.value = favoriteItems.value.filter(item => item.listing.id !== listing.id)
+      writeItems(favoriteKey, favoriteItems.value)
+      return false
+    }
+    favoriteItems.value = [
+      {
+        listing: snapshotListing(listing),
+        favorited_at: new Date().toISOString(),
+      },
+      ...favoriteItems.value.filter(item => item.listing.id !== listing.id),
+    ]
+    writeItems(favoriteKey, favoriteItems.value)
+    return true
+  }
+
+  function removeHistory(listingID: number) {
+    historyItems.value = historyItems.value.filter(item => item.listing.id !== listingID)
+    writeItems(historyKey, historyItems.value)
+  }
+
+  function removeFavorite(listingID: number) {
+    favoriteItems.value = favoriteItems.value.filter(item => item.listing.id !== listingID)
+    writeItems(favoriteKey, favoriteItems.value)
+  }
+
+  function clearHistory() {
+    historyItems.value = []
+    writeItems(historyKey, historyItems.value)
+  }
+
+  return {
+    history,
+    favorites,
+    favoriteIDs,
+    recordListingView,
+    isFavorite,
+    toggleFavorite,
+    removeHistory,
+    removeFavorite,
+    clearHistory,
+  }
+}
+
+function readItems(key: string): ListingCollectionItem[] {
+  if (typeof localStorage === 'undefined') return []
+  try {
+    const raw = localStorage.getItem(key)
+    if (!raw) return []
+    const parsed = JSON.parse(raw) as unknown
+    if (!Array.isArray(parsed)) return []
+    return parsed
+      .map(normalizeItem)
+      .filter((item): item is ListingCollectionItem => Boolean(item))
+  } catch {
+    localStorage.removeItem(key)
+    return []
+  }
+}
+
+function normalizeItem(value: unknown): ListingCollectionItem | null {
+  if (!isRecord(value) || !isRecord(value.listing)) return null
+  const id = Number(value.listing.id)
+  if (!Number.isFinite(id) || id <= 0) return null
+  return {
+    listing: value.listing as unknown as Listing,
+    viewed_at: typeof value.viewed_at === 'string' ? value.viewed_at : undefined,
+    favorited_at: typeof value.favorited_at === 'string' ? value.favorited_at : undefined,
+  }
+}
+
+function writeItems(key: string, items: ListingCollectionItem[]) {
+  if (typeof localStorage === 'undefined') return
+  localStorage.setItem(key, JSON.stringify(items))
+}
+
+function snapshotListing(listing: Listing): Listing {
+  return JSON.parse(JSON.stringify(listing)) as Listing
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}

frontend/src/features/listings/index.ts

@@ -5,3 +5,4 @@ export * from './api/homeConfig'
 export * from './composables/useHomeFilters'
 export * from './composables/useFilterOptions'
 export * from './composables/useListingQuery'
+export * from './composables/useListingCollections'

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

@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { RouterLink, useRoute } from 'vue-router'
+import { Delete, Star, StarFilled } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+import ListingCard from '@/features/listings/components/ListingCard.vue'
+import {
+  useListingCollections,
+  type ListingCollectionItem,
+} from '@/features/listings/composables/useListingCollections'
+import { formatCent, formatMoney } from '@/shared/utils/money'
+import {
+  formatHafCoinM,
+  formatListingCode,
+  getCoinWan,
+  getListingDisplayPrice,
+  getListingTitle,
+} from '@/shared/utils/listingDisplay'
+
+const route = useRoute()
+const {
+  history,
+  favorites,
+  isFavorite,
+  toggleFavorite,
+  removeHistory,
+  removeFavorite,
+  clearHistory,
+} = useListingCollections()
+const activeTab = ref(route.query.tab === 'favorites' ? 'favorites' : 'history')
+const isMobilePage = computed(() => route.path.startsWith('/m/'))
+const activeItems = computed(() => (activeTab.value === 'favorites' ? favorites.value : history.value))
+const emptyText = computed(() => (activeTab.value === 'favorites' ? '暂无收藏账号' : '暂无浏览记录'))
+
+async function handleClearHistory() {
+  try {
+    await ElMessageBox.confirm('确认清空全部浏览记录吗？', '清空确认', {
+      confirmButtonText: '清空',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    clearHistory()
+    ElMessage.success('浏览记录已清空')
+  } catch {
+    // 用户取消时保持原状。
+  }
+}
+
+function handleToggleFavorite(item: ListingCollectionItem) {
+  const added = toggleFavorite(item.listing)
+  ElMessage.success(added ? '已收藏' : '已取消收藏')
+}
+
+function handleRemove(item: ListingCollectionItem) {
+  if (activeTab.value === 'favorites') {
+    removeFavorite(item.listing.id)
+    ElMessage.success('已取消收藏')
+    return
+  }
+  removeHistory(item.listing.id)
+  ElMessage.success('已移除记录')
+}
+
+function detailPath(item: ListingCollectionItem) {
+  return isMobilePage.value ? `/m/listings/${item.listing.id}` : `/listings/${item.listing.id}`
+}
+
+function timeText(item: ListingCollectionItem) {
+  const value = activeTab.value === 'favorites' ? item.favorited_at : item.viewed_at
+  if (!value) return ''
+  return new Date(value).toLocaleString('zh-CN')
+}
+</script>
+
+<template>
+  <main :class="['collections-page', { mobile: isMobilePage }]">
+    <header class="collections-header">
+      <div>
+        <p class="eyebrow">Account Memory</p>
+        <h1>我的足迹</h1>
+        <p>找回看过和收藏过的账号。</p>
+      </div>
+      <button v-if="activeTab === 'history' && history.length" type="button" @click="handleClearHistory">
+        清空记录
+      </button>
+    </header>
+
+    <nav class="collection-tabs">
+      <button :class="{ active: activeTab === 'history' }" type="button" @click="activeTab = 'history'">
+        浏览记录 <span>{{ history.length }}</span>
+      </button>
+      <button
+        :class="{ active: activeTab === 'favorites' }"
+        type="button"
+        @click="activeTab = 'favorites'"
+      >
+        收藏账号 <span>{{ favorites.length }}</span>
+      </button>
+    </nav>
+
+    <el-empty v-if="!activeItems.length && !isMobilePage" :description="emptyText" />
+    <div v-else-if="!activeItems.length" class="mobile-empty">{{ emptyText }}</div>
+
+    <section v-else-if="!isMobilePage" class="pc-list">
+      <article v-for="item in activeItems" :key="item.listing.id" class="pc-item">
+        <div class="item-meta">
+          <span>{{ timeText(item) }}</span>
+          <div>
+            <el-button
+              :icon="isFavorite(item.listing.id) ? StarFilled : Star"
+              size="small"
+              @click="handleToggleFavorite(item)"
+            >
+              {{ isFavorite(item.listing.id) ? '已收藏' : '收藏' }}
+            </el-button>
+            <el-button :icon="Delete" size="small" @click="handleRemove(item)">移除</el-button>
+          </div>
+        </div>
+        <ListingCard :listing="item.listing" />
+      </article>
+    </section>
+
+    <section v-else class="mobile-list">
+      <article v-for="item in activeItems" :key="item.listing.id" class="mobile-card">
+        <RouterLink :to="detailPath(item)" class="mobile-card-main">
+          <img
+            v-if="item.listing.cover_url || item.listing.screenshot_urls?.[0]"
+            :src="item.listing.cover_url || item.listing.screenshot_urls?.[0]"
+            :alt="getListingTitle(item.listing)"
+          />
+          <div v-else class="mobile-cover-empty">HFB</div>
+          <div class="mobile-info">
+            <strong>{{ getListingTitle(item.listing) }}</strong>
+            <small>编号 {{ formatListingCode(item.listing) }}</small>
+            <div class="mobile-stats">
+              <span>{{ formatHafCoinM(getCoinWan(item.listing)) }}</span>
+              <span>押金 ¥{{ formatCent(item.listing.deposit_amount_cent) }}</span>
+            </div>
+            <em>¥{{ formatMoney(getListingDisplayPrice(item.listing)) }}</em>
+          </div>
+        </RouterLink>
+        <div class="mobile-card-actions">
+          <span>{{ timeText(item) }}</span>
+          <div>
+            <button type="button" @click="handleToggleFavorite(item)">
+              {{ isFavorite(item.listing.id) ? '已收藏' : '收藏' }}
+            </button>
+            <button type="button" @click="handleRemove(item)">移除</button>
+          </div>
+        </div>
+      </article>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.collections-page {
+  display: grid;
+  gap: 18px;
+  padding: 24px;
+}
+
+.collections-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 70%);
+}
+
+.eyebrow {
+  margin: 0 0 6px;
+  color: #ff6a00;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.collections-header h1 {
+  margin: 0 0 8px;
+  color: #101828;
+}
+
+.collections-header p {
+  margin: 0;
+  color: #667085;
+}
+
+.collections-header button,
+.collection-tabs button,
+.mobile-card-actions button {
+  border: 0;
+  cursor: pointer;
+}
+
+.collections-header button {
+  padding: 9px 14px;
+  border-radius: 999px;
+  background: #fff3e8;
+  color: #ff6a00;
+}
+
+.collection-tabs {
+  display: inline-flex;
+  width: fit-content;
+  padding: 4px;
+  border-radius: 999px;
+  background: #f2f4f7;
+}
+
+.collection-tabs button {
+  padding: 9px 18px;
+  border-radius: 999px;
+  background: transparent;
+  color: #667085;
+}
+
+.collection-tabs button.active {
+  background: #ff6a00;
+  color: #fff;
+}
+
+.collection-tabs span {
+  margin-left: 4px;
+}
+
+.pc-list {
+  display: grid;
+  gap: 14px;
+}
+
+.pc-item {
+  display: grid;
+  gap: 8px;
+}
+
+.item-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #98a2b3;
+  font-size: 13px;
+}
+
+.collections-page.mobile {
+  min-height: 100vh;
+  padding: 14px;
+  background: #f7f8fa;
+}
+
+.mobile .collections-header {
+  padding: 16px;
+}
+
+.mobile .collections-header h1 {
+  font-size: 22px;
+}
+
+.mobile .collections-header button {
+  display: none;
+}
+
+.mobile .collection-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.mobile .collection-tabs button {
+  border-radius: 8px;
+}
+
+.mobile-empty {
+  padding: 44px 0;
+  text-align: center;
+  color: #98a2b3;
+}
+
+.mobile-list {
+  display: grid;
+  gap: 10px;
+}
+
+.mobile-card {
+  overflow: hidden;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.mobile-card-main {
+  display: grid;
+  grid-template-columns: 104px 1fr;
+  gap: 10px;
+  padding: 10px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.mobile-card-main img,
+.mobile-cover-empty {
+  width: 104px;
+  height: 104px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.mobile-cover-empty {
+  display: grid;
+  place-items: center;
+  background: #f2f4f7;
+  color: #cbd5e1;
+  font-weight: 900;
+}
+
+.mobile-info {
+  display: grid;
+  align-content: start;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mobile-info strong,
+.mobile-info small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-info small,
+.mobile-stats {
+  color: #667085;
+  font-size: 12px;
+}
+
+.mobile-stats {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mobile-info em {
+  color: #ff6a00;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.mobile-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 10px 10px;
+  border-top: 1px solid #f2f4f7;
+  color: #98a2b3;
+  font-size: 12px;
+}
+
+.mobile-card-actions div {
+  display: flex;
+  gap: 8px;
+}
+
+.mobile-card-actions button {
+  padding: 5px 9px;
+  border-radius: 999px;
+  background: #fff7ed;
+  color: #ff6a00;
+}
+</style>

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

@@ -3,8 +3,10 @@ import { readError } from '@/shared/utils/error'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { Star, StarFilled } from '@element-plus/icons-vue'
 
 import { fetchListing, type Listing } from '@/features/listings/api/listings'
+import { useListingCollections } from '@/features/listings/composables/useListingCollections'
 import {
   createOrder,
   fetchOrderAgreements,
@@ -50,6 +52,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(
   () =>
@@ -64,11 +67,14 @@ onMounted(async () => {
   loading.value = true
   try {
     listing.value = await fetchListing(String(route.params.id))
+    recordListingView(listing.value)
   } finally {
     loading.value = false
   }
 })
 
+const listingFavorited = computed(() => (listing.value ? isFavorite(listing.value.id) : false))
+
 const orderTotal = computed(() => {
   if (!listing.value) return '0.0'
   return formatMoney(getListingDisplayPrice(listing.value))
@@ -326,6 +332,12 @@ watch(agreementVisible, visible => {
 function listingPrice(item: Listing) {
   return formatMoney(getListingDisplayPrice(item))
 }
+
+function handleToggleFavorite() {
+  if (!listing.value) return
+  const added = toggleFavorite(listing.value)
+  ElMessage.success(added ? '已收藏账号' : '已取消收藏')
+}
 </script>
 
 <template>
@@ -354,6 +366,12 @@ function listingPrice(item: Listing) {
             <button class="detail-code-chip" type="button" @click="copyListingCode">
               编号 {{ formatListingCode(listing) }}
             </button>
+            <button class="detail-favorite-chip" type="button" @click="handleToggleFavorite">
+              <el-icon>
+                <component :is="listingFavorited ? StarFilled : Star" />
+              </el-icon>
+              {{ listingFavorited ? '已收藏' : '收藏账号' }}
+            </button>
             <h1>{{ getListingTitle(listing) }}</h1>
             <p>{{ getListingSubtitle(listing) }}</p>
           </div>
@@ -495,6 +513,9 @@ function listingPrice(item: Listing) {
           >
             {{ listing.in_transaction ? '交易中' : '立即下单' }}
           </el-button>
+          <el-button class="full-control favorite-order-btn" size="large" @click="handleToggleFavorite">
+            {{ listingFavorited ? '取消收藏' : '收藏账号' }}
+          </el-button>
         </el-form>
       </aside>
     </div>
@@ -637,6 +658,22 @@ function listingPrice(item: Listing) {
   cursor: pointer;
 }
 
+.detail-favorite-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  margin-top: 8px;
+  padding: 7px 12px;
+  border: 1px solid rgba(255, 106, 0, 0.42);
+  border-radius: 999px;
+  background: rgba(255, 106, 0, 0.18);
+  color: #fff7ed;
+  font-size: 12px;
+  font-weight: 900;
+  cursor: pointer;
+}
+
 .detail-hero-overlay h1 {
   margin: 0;
   color: #ffffff;
@@ -956,6 +993,16 @@ function listingPrice(item: Listing) {
   text-align: right;
 }
 
+.full-control {
+  width: 100%;
+}
+
+.favorite-order-btn {
+  margin-top: 10px;
+  border-color: #ff6a00;
+  color: #ff6a00;
+}
+
 .agreement-dialog-body {
   display: grid;
   gap: 14px;

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;