yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加足迹和收藏

Browse Source
This commit is contained in:
yml2213
2026-06-12 22:34:52 +08:00
parent c726659866
commit 9b41b9dc84
9 changed files with 610 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/listings/composables/useListingCollections.ts
+122
View File
@@ -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
+1
View File
@@ -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
+372
View File
@@ -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
+47
View File
@@ -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
+39 -2
View File
@@ -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;