增加足迹和收藏

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;