feat: P2阶段完成 - listings和auth模块迁移
## P2.1: 商品浏览模块（listings）✅ ### 完整迁移（23个文件） - API: listings.ts, listingOptions.ts, homeConfig.ts - Views: 5个页面（HomeView, ListingsView, ListingDetailView + 移动端2个） - Composables: 3个（useHomeFilters, useFilterOptions, useListingQuery） - Components: 9个（ListingCard, 各种过滤器组件） - Tests: 2个测试文件 **功能：** - 首页浏览、商品列表、详情查看 - 高级筛选（服务器、等级、哈夫币、皮肤等） - 排序和分区功能 - 横幅、公告、统计展示 **技术改进：** - 更新所有导入路径到 @/shared/ - 建立清晰的模块导出 --- ## P2.2: 用户认证模块（auth）✅ ### 完整迁移（12个文件） - API: auth.ts, realname.ts, notifications.ts - Views: 8个页面（登录、注册、个人资料、实名认证、通知 + 移动端） - 模块导出 **功能：** - 用户注册、登录、Token管理 - 实名认证、风险检查 - 个人资料编辑、头像上传 - 消息/通知中心 **技术改进：** - 统一 API 导入路径 - 类型安全增强 --- ## 里程碑 🎉 **P2 阶段完成！** **累计完成：** 6个模块 - ✅ P0: shared（基础设施）- 22个文件 - ✅ P1: wallet, chats, orders - 24个文件 - ✅ P2: listings, auth - 35个文件 **总计：** 81个文件已迁移 **剩余：** P3阶段（seller, disputes, admin）+ 清理工作 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yml2213
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
f415832c19
commit
405abfa4f7
@@ -0,0 +1,344 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink } from 'vue-router'
|
||||
import type { Listing } from '@/api/listings'
|
||||
import {
|
||||
formatHafCoinM,
|
||||
getCoinWan,
|
||||
getListingDisplayPrice,
|
||||
getListingTitle,
|
||||
getLoginMethod,
|
||||
getServerRegion,
|
||||
hasAcceleratedSaleRatio,
|
||||
hasGiftResources,
|
||||
readAssetNumber,
|
||||
readAssetString,
|
||||
getResourceQuantity,
|
||||
getOnlineTimeText,
|
||||
getSkinNames,
|
||||
getRatioValue,
|
||||
getDailyLoss,
|
||||
} from '@/utils/listingDisplay'
|
||||
|
||||
interface Props {
|
||||
listing: Listing
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink class="listing-card-v2" :to="`/listings/${listing.id}`">
|
||||
<div class="card-cover">
|
||||
<img
|
||||
v-if="listing.cover_url"
|
||||
:data-src="listing.cover_url"
|
||||
:alt="getListingTitle(listing)"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
class="lazy-image"
|
||||
/>
|
||||
<div v-else class="empty-cover">HFB</div>
|
||||
<div class="cover-badges">
|
||||
<span v-if="hasAcceleratedSaleRatio(listing)" class="badge sale">特惠</span>
|
||||
<span v-if="hasGiftResources(listing)" class="badge gift">有赠送</span>
|
||||
</div>
|
||||
<div class="ratio-tag">比例 1:{{ getRatioValue(listing).toFixed(1) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="card-details">
|
||||
<div class="card-title-row">
|
||||
<h3>{{ getListingTitle(listing) }}</h3>
|
||||
<span class="daily-loss">日耗 {{ getDailyLoss(listing) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>哈夫币</label>
|
||||
<strong>{{ formatHafCoinM(getCoinWan(listing)) }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>保险格数</label>
|
||||
<span>{{ readAssetString(listing, 'season_insurance') || '--' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>体力/负重</label>
|
||||
<span>{{ readAssetString(listing, 'stamina_level') }}/{{ readAssetString(listing, 'load_level') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>AWM子弹</label>
|
||||
<span :class="{ highlight: getResourceQuantity(listing, 'awmAmmo') > 0 }">
|
||||
{{ getResourceQuantity(listing, 'awmAmmo') }}发
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>六级头甲</label>
|
||||
<span>
|
||||
{{ getResourceQuantity(listing, 'helmet6') }}头 / {{ getResourceQuantity(listing, 'armor6') }}甲
|
||||
</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>其他重器</label>
|
||||
<span>巴雷特 {{ getResourceQuantity(listing, 'barrett') }} / 喷子 {{ getResourceQuantity(listing, 'shotgun') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>绝密KD</label>
|
||||
<strong>{{ readAssetNumber(listing, 'secret_kd') || '--' }}</strong>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>游戏段位</label>
|
||||
<span>{{ listing.rank_level || '未公开' }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>所属区服</label>
|
||||
<span>{{ getServerRegion(listing) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-col">
|
||||
<div class="stat-row">
|
||||
<label>上号方式</label>
|
||||
<span>{{ getLoginMethod(listing) }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<label>方便上号</label>
|
||||
<span class="time-text">{{ getOnlineTimeText(listing) || '全天候' }}</span>
|
||||
</div>
|
||||
<div class="stat-row skins-row">
|
||||
<label>持有皮肤</label>
|
||||
<span class="skins-text" :title="getSkinNames(listing).join(', ')">
|
||||
{{ getSkinNames(listing).slice(0, 2).join(', ') || '暂无皮肤' }}
|
||||
<em v-if="getSkinNames(listing).length > 2">...</em>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-price">
|
||||
<div class="price-item total">
|
||||
<small>总租金</small>
|
||||
<strong>¥{{ getListingDisplayPrice(listing) }}</strong>
|
||||
</div>
|
||||
<div class="price-item deposit">
|
||||
<small>押金</small>
|
||||
<span>¥{{ listing.deposit_amount }}</span>
|
||||
</div>
|
||||
<div class="price-action">
|
||||
<button class="rent-btn">立即租用</button>
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.listing-card-v2 {
|
||||
display: grid;
|
||||
grid-template-columns: 180px minmax(0, 1fr) 160px;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
border: 1px solid #eef1f5;
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(23, 35, 61, 0.03);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.listing-card-v2:hover {
|
||||
border-color: #ff6a00;
|
||||
box-shadow: 0 8px 24px rgba(255, 106, 0, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.empty-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.cover-badges {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.badge.sale {
|
||||
background: #ef4444;
|
||||
}
|
||||
.badge.gift {
|
||||
background: #10b981;
|
||||
}
|
||||
|
||||
.ratio-tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 4px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fbbf24;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title-row h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.daily-loss {
|
||||
padding: 4px 10px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stats-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-row label {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row span,
|
||||
.stat-row strong {
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-row strong {
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.stat-row .highlight {
|
||||
color: #10b981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.price-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.price-item small {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price-item.total strong {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
color: #ff6a00;
|
||||
}
|
||||
|
||||
.price-item.deposit span {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.rent-btn {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ff6a00 0%, #ff8533 100%);
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.rent-btn:hover {
|
||||
background: linear-gradient(135deg, #ff7a1a 0%, #ff9544 100%);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user