+ {item.cover_url ? (
+ 
+ ) : (
+
+
+
+
+ )
+}
+
+export function MobileHomePage() {
+ const [keyword, setKeyword] = useState('')
+ const [searchValue, setSearchValue] = useState('')
+ const { data, isPending, isError, refetch } = useListings({
+ page: 1,
+ page_size: 20,
+ keyword,
+ })
+
+ const applyFilter = (value: string) => {
+ setKeyword(value)
+ setSearchValue(value)
+ }
+
+ return (
+
+ {item.listing_no}
+
+ {item.in_transaction ? '租赁中' : '可租'}
+
+
+ {item.title}
+
+ {item.server_region || '区服待定'}
+ {item.rank_level || '段位待定'}
+ 哈夫币 {item.haf_coin_amount.toLocaleString()}
+
+
+
+
+ {money(item.price_cent)}
+ 押金 {money(item.deposit_amount_cent)}
+
+
+ 查看
+
+
+ 租得明白，
+
+ setKeyword(value.trim())}
+ placeholder="搜索区服、段位、装备或商品号"
+ searchIcon={
+
+
+ 实名审核
+ 交接留痕
+ 争议可申诉
+
+
+
+ refetch().then(() => undefined)}>
+ {isPending ? (
+
+
+
+
+ RULES, IN PLAIN WORDS
+
+
+ )
+}
diff --git a/frontend/src/features/mobile/MobileListingDetailPage.tsx b/frontend/src/features/mobile/MobileListingDetailPage.tsx
new file mode 100644
index 0000000..e061b30
--- /dev/null
+++ b/frontend/src/features/mobile/MobileListingDetailPage.tsx
@@ -0,0 +1,155 @@
+import { Button, ErrorBlock, Skeleton, Tag, Toast } from 'antd-mobile'
+import { LeftOutline, PhoneFill } from 'antd-mobile-icons'
+import { useNavigate, useParams } from 'react-router-dom'
+
+import { BrandLogo } from '@/components/BrandLogo'
+import { useListingDetail } from '@/features/listings/api'
+
+function money(cents: number) {
+ return `¥${(cents / 100).toFixed(2)}`
+}
+
+function assetValue(value: unknown) {
+ if (value && typeof value === 'object') {
+ const record = value as RecordJIEYOU TRADING HOUSE
+
+ 租得明白，
+
+ 还得安心。
+
+ 实名审核 · 流程留痕 · 账单逐项列明
+
+ {quickFilters.map(item => (
+
+ ))}
+
+
+
+
+ {isError ? (
+
+ CURATED ACCOUNTS
+
+ 共 {data?.total ?? 0} 件
+ 本周柜选
+
+
+ ) : null}
+
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ) : data?.items.length ? (
+
+
+ ))}
+
+ {data.items.map(item => (
+
+ ) : (
+
+
+ )}
+ 先把规则说明白
+押金、租金、额外消耗和退款规则都会在订单里逐项列出。结账备注不参与系统结算。
+
+
+ )
+ }
+
+ if (isError || !data) {
+ return (
+
+
+ )
+ }
+
+ const onlineTime =
+ data.asset_summary && typeof data.asset_summary === 'object'
+ ? (data.asset_summary.online_time as unknown)
+ : undefined
+ const assetEntries = Object.entries(data.asset_summary || {}).filter(
+ ([key]) => key !== 'online_time'
+ )
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 先看清规则，再决定要不要租
+
+
+
+ )
+}
diff --git a/frontend/src/features/mobile/MobilePlaceholderPage.tsx b/frontend/src/features/mobile/MobilePlaceholderPage.tsx
new file mode 100644
index 0000000..b2da71c
--- /dev/null
+++ b/frontend/src/features/mobile/MobilePlaceholderPage.tsx
@@ -0,0 +1,26 @@
+import { Button } from 'antd-mobile'
+import { useNavigate } from 'react-router-dom'
+
+import { BrandLogo } from '@/components/BrandLogo'
+
+export function MobilePlaceholderPage({
+ title,
+ description,
+}: {
+ title: string
+ description: string
+}) {
+ const navigate = useNavigate()
+
+ return (
+
+ {data.cover_url ? (
+ 
+ ) : (
+
+
+ {data.listing_no}
+ {data.title}
+
+
+ {data.in_transaction ? '租赁中' : '可租'}
+
+ {data.server_region || '区服待定'}
+ {data.login_platform || '登录方式待定'}
+ {data.rank_level || '段位待定'}
+
+
+ 租金
+ {money(data.price_cent)}
+
+
+ 押金
+ {money(data.deposit_amount_cent)}
+
+
+ 哈夫币
+ {data.haf_coin_amount.toLocaleString()}
+
+ 账号说明
+{data.description || '号主暂未填写补充说明。'}
+资产摘要
+-
+ {assetEntries.length ? (
+ assetEntries.map(([key, value]) => (
+
- {key} +
- {assetValue(value)} +
- 资产 +
- 未填写 +
- 在线时间 +
- {assetValue(onlineTime)} +
+
+ ))
+ ) : (
+
+
+ )}
+
+
+ 押金、租金、额外消耗和退款规则会在下单页逐项列出；交接、归还、结账全程留痕。
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/features/mobile/MobileProfilePage.tsx b/frontend/src/features/mobile/MobileProfilePage.tsx
new file mode 100644
index 0000000..2f10278
--- /dev/null
+++ b/frontend/src/features/mobile/MobileProfilePage.tsx
@@ -0,0 +1,50 @@
+import { Button, List } from 'antd-mobile'
+import { useNavigate } from 'react-router-dom'
+
+import { BrandLogo } from '@/components/BrandLogo'
+import { useSessionStore } from '@/stores/session'
+
+export function MobileProfilePage() {
+ const navigate = useNavigate()
+ const user = useSessionStore(state => state.user)
+ const logout = useSessionStore(state => state.logout)
+
+ return (
+ {title}
+{description}
+ +
+
+
+
+
+ )
+}
diff --git a/frontend/src/layouts/MobileLayout.tsx b/frontend/src/layouts/MobileLayout.tsx
new file mode 100644
index 0000000..4253756
--- /dev/null
+++ b/frontend/src/layouts/MobileLayout.tsx
@@ -0,0 +1,66 @@
+import 'antd-mobile/es/global'
+
+import { TabBar } from 'antd-mobile'
+import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline } from 'antd-mobile-icons'
+import { Link, Outlet, useLocation, useNavigate } from 'react-router-dom'
+
+import { BrandLogo } from '@/components/BrandLogo'
+import { useSessionStore } from '@/stores/session'
+
+const tabs = [
+ { key: '/m', title: '首页', icon:
+
+ {user ? user.nickname || '我的商行' : '还没登录'}
+{user ? user.phone : '登录后查看订单、钱包与实名状态'}
+-
+
+ {user ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 1f0704f..bc92eca 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1317,3 +1317,644 @@ a {
}
}
+/* Mobile storefront */
+.mobile-shell {
+ --adm-color-primary: #1e4d42;
+ --adm-color-success: #2f7d5c;
+ --adm-color-warning: #c17a2b;
+ --adm-color-danger: #a64332;
+ --adm-font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ position: relative;
+ width: 100%;
+ max-width: 560px;
+ min-height: 100vh;
+ margin: 0 auto;
+ padding-bottom: calc(72px + env(safe-area-inset-bottom));
+ background: var(--paper);
+ color: var(--ink);
+}
+
+.mobile-header {
+ position: sticky;
+ top: 0;
+ z-index: 20;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 58px;
+ padding: 0 16px;
+ border-bottom: 1px solid var(--line);
+ background: rgba(255, 253, 248, 0.95);
+ backdrop-filter: blur(12px);
+}
+
+.mobile-header__brand {
+ display: inline-flex;
+ align-items: center;
+}
+
+.mobile-header__right {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.mobile-header__login,
+.mobile-header__user {
+ padding: 7px 12px;
+ border: 1px solid var(--line);
+ border-radius: 4px;
+ color: var(--brand-ink);
+ font-size: 12px;
+}
+
+.mobile-header__login {
+ border-color: var(--brand-ink);
+ background: var(--brand-ink);
+ color: var(--paper-warm);
+}
+
+.mobile-content {
+ min-height: calc(100vh - 130px);
+}
+
+.mobile-tabbar {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 30;
+ width: 100%;
+ max-width: 560px;
+ margin: 0 auto;
+ border-top: 1px solid var(--line);
+ background: var(--paper-warm);
+}
+
+.mobile-tabbar[hidden] {
+ display: none;
+}
+
+.mobile-tabbar .adm-tab-bar-item {
+ color: var(--ink-muted);
+}
+
+.mobile-tabbar .adm-tab-bar-item-active {
+ color: var(--brand-ink);
+}
+
+.mobile-tabbar .adm-tab-bar-item-title {
+ font-size: 11px;
+}
+
+.mobile-home {
+ padding-bottom: 12px;
+}
+
+.mobile-hero {
+ position: relative;
+ overflow: hidden;
+ padding: 28px 18px 24px;
+ background: var(--brand-ink);
+ color: var(--paper-warm);
+}
+
+.mobile-hero::after {
+ position: absolute;
+ right: -70px;
+ bottom: -100px;
+ width: 220px;
+ height: 220px;
+ border: 1px solid rgba(236, 208, 177, 0.22);
+ border-radius: 50%;
+ content: '';
+}
+
+.mobile-hero__eyebrow {
+ position: relative;
+ z-index: 1;
+ color: var(--brand-seal-line);
+ font-size: 9px;
+ letter-spacing: 0.16em;
+}
+
+.mobile-hero h1 {
+ position: relative;
+ z-index: 1;
+ margin: 12px 0 10px;
+ font-family: 'Noto Serif SC', 'Songti SC', serif;
+ font-size: 32px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ line-height: 1.24;
+}
+
+.mobile-hero p {
+ position: relative;
+ z-index: 1;
+ margin: 0 0 18px;
+ color: #d8e2dd;
+ font-size: 12px;
+ letter-spacing: 0.02em;
+}
+
+.mobile-search {
+ position: relative;
+ z-index: 1;
+ --background: #fffdf8;
+ --border-radius: 6px;
+ --height: 42px;
+ --padding-left: 12px;
+ color: var(--ink);
+}
+
+.mobile-chips {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ gap: 8px;
+ margin-top: 14px;
+ overflow-x: auto;
+ scrollbar-width: none;
+}
+
+.mobile-chips::-webkit-scrollbar {
+ display: none;
+}
+
+.mobile-chips button {
+ flex: 0 0 auto;
+ padding: 7px 13px;
+ border: 1px solid rgba(236, 208, 177, 0.38);
+ border-radius: 3px;
+ background: transparent;
+ color: #d8e2dd;
+ font-size: 12px;
+}
+
+.mobile-chips button.is-active {
+ border-color: var(--brand-seal-line);
+ background: var(--brand-seal-line);
+ color: var(--brand-ink);
+}
+
+.mobile-trust {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ border-bottom: 1px solid var(--line);
+ background: var(--paper-warm);
+}
+
+.mobile-trust span {
+ padding: 12px 4px;
+ border-right: 1px solid var(--line);
+ color: var(--ink-secondary);
+ font-size: 11px;
+ text-align: center;
+}
+
+.mobile-trust span:last-child {
+ border-right: 0;
+}
+
+.mobile-list-section {
+ padding: 24px 16px 8px;
+}
+
+.mobile-section-head {
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ margin-bottom: 14px;
+}
+
+.mobile-eyebrow {
+ display: block;
+ color: var(--brand-seal);
+ font-size: 9px !important;
+ letter-spacing: 0.16em;
+}
+
+.mobile-section-head h2,
+.mobile-rules h2,
+.mobile-placeholder h1,
+.mobile-profile h1 {
+ margin: 5px 0 0;
+ color: var(--brand-ink);
+ font-family: 'Noto Serif SC', 'Songti SC', serif;
+ font-size: 24px;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+}
+
+.mobile-count {
+ color: var(--ink-muted);
+ font-size: 11px;
+}
+
+.mobile-listing-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.mobile-listing-card {
+ display: flex;
+ gap: 12px;
+ padding: 12px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--paper-warm);
+}
+
+.mobile-listing-card__cover {
+ display: flex;
+ flex: 0 0 108px;
+ align-items: center;
+ justify-content: center;
+ width: 108px;
+ height: 108px;
+ overflow: hidden;
+ border-radius: 5px;
+ background: #eef1ea;
+}
+
+.mobile-listing-card__cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.mobile-listing-card__body {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.mobile-listing-card__top,
+.mobile-listing-card__bottom {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.mobile-listing-card__no {
+ color: var(--ink-muted);
+ font-family: 'Inter', monospace;
+ font-size: 9px;
+}
+
+.mobile-listing-card__body h3 {
+ display: -webkit-box;
+ margin: 7px 0 6px;
+ overflow: hidden;
+ color: var(--ink);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.45;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+
+.mobile-listing-card__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.mobile-listing-card__tags span {
+ padding: 2px 5px;
+ border-radius: 2px;
+ background: #eef2ec;
+ color: var(--brand-ink);
+ font-size: 9px;
+}
+
+.mobile-listing-card__bottom {
+ margin-top: auto;
+ padding-top: 9px;
+}
+
+.mobile-listing-card__bottom strong {
+ color: var(--brand-seal);
+ font-family: 'Inter', 'DIN Alternate', sans-serif;
+ font-size: 19px;
+}
+
+.mobile-listing-card__bottom small {
+ display: block;
+ margin-top: 2px;
+ color: var(--ink-muted);
+ font-size: 9px;
+}
+
+.mobile-listing-card__more {
+ color: var(--ink-muted);
+ font-size: 10px;
+}
+
+.mobile-skeleton-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.mobile-skeleton-card {
+ display: flex;
+ gap: 12px;
+ padding: 12px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--paper-warm);
+}
+
+.mobile-skeleton-cover {
+ flex: 0 0 108px;
+ width: 108px;
+ height: 108px;
+ border-radius: 5px;
+}
+
+.mobile-skeleton-card .adm-skeleton-paragraph {
+ flex: 1;
+}
+
+.mobile-empty,
+.mobile-error {
+ padding: 36px 0;
+ text-align: center;
+}
+
+.mobile-error .adm-button {
+ margin-top: 10px;
+}
+
+.mobile-rules {
+ margin: 22px 16px 12px;
+ padding: 22px 18px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--paper-warm);
+}
+
+.mobile-rules p {
+ margin: 10px 0 0;
+ color: var(--ink-secondary);
+ font-size: 12px;
+ line-height: 1.8;
+}
+
+.mobile-detail {
+ padding: 14px 16px 108px;
+}
+
+.mobile-detail--loading,
+.mobile-detail--error {
+ padding-top: 24px;
+}
+
+.mobile-detail--error {
+ text-align: center;
+}
+
+.mobile-detail--error .adm-button {
+ margin-top: 12px;
+}
+
+.mobile-detail__back {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 12px;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: var(--ink-secondary);
+ font-size: 12px;
+}
+
+.mobile-detail__cover,
+.mobile-detail__cover-skeleton {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ aspect-ratio: 4 / 3;
+ overflow: hidden;
+ border-radius: 8px;
+ background: #eef1ea;
+}
+
+.mobile-detail__cover img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.mobile-detail__head {
+ padding: 18px 0 14px;
+}
+
+.mobile-detail__no {
+ color: var(--ink-muted);
+ font-family: 'Inter', monospace;
+ font-size: 10px;
+}
+
+.mobile-detail__head h1 {
+ margin: 6px 0 10px;
+ color: var(--ink);
+ font-family: 'Noto Serif SC', 'Songti SC', serif;
+ font-size: 23px;
+ font-weight: 600;
+ line-height: 1.4;
+}
+
+.mobile-detail__tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.mobile-detail__price-card {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: 1px;
+ overflow: hidden;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--line);
+}
+
+.mobile-detail__price-card > div {
+ padding: 14px 10px;
+ background: var(--paper-warm);
+}
+
+.mobile-detail__price-card span,
+.mobile-detail__price-card strong {
+ display: block;
+}
+
+.mobile-detail__price-card span {
+ margin-bottom: 5px;
+ color: var(--ink-muted);
+ font-size: 10px;
+}
+
+.mobile-detail__price-card strong {
+ color: var(--brand-ink);
+ font-family: 'Inter', 'DIN Alternate', sans-serif;
+ font-size: 18px;
+}
+
+.mobile-detail__section {
+ padding: 20px 0 0;
+}
+
+.mobile-detail__section h2 {
+ margin: 0 0 10px;
+ color: var(--brand-ink);
+ font-family: 'Noto Serif SC', 'Songti SC', serif;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.mobile-detail__section p {
+ margin: 0;
+ color: var(--ink-secondary);
+ font-size: 13px;
+ line-height: 1.85;
+}
+
+.mobile-detail__assets {
+ margin: 0;
+ border-top: 1px solid var(--line);
+}
+
+.mobile-detail__assets > div {
+ display: flex;
+ justify-content: space-between;
+ gap: 16px;
+ padding: 10px 0;
+ border-bottom: 1px solid var(--line);
+ font-size: 12px;
+}
+
+.mobile-detail__assets dt {
+ color: var(--ink-muted);
+}
+
+.mobile-detail__assets dd {
+ margin: 0;
+ color: var(--ink);
+ text-align: right;
+}
+
+.mobile-detail__notice {
+ margin-top: 22px;
+ padding: 16px;
+ border-left: 2px solid var(--brand-seal);
+ background: #f1ece2;
+}
+
+.mobile-detail__notice strong {
+ color: var(--brand-ink);
+ font-size: 13px;
+}
+
+.mobile-detail__notice p {
+ margin: 7px 0 0;
+ color: var(--ink-secondary);
+ font-size: 11px;
+ line-height: 1.7;
+}
+
+.mobile-detail__actions {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 30;
+ display: flex;
+ gap: 10px;
+ width: 100%;
+ max-width: 560px;
+ margin: 0 auto;
+ padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+ border-top: 1px solid var(--line);
+ background: var(--paper-warm);
+}
+
+.mobile-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 70vh;
+ padding: 44px 28px;
+ text-align: center;
+}
+
+.mobile-placeholder .mobile-eyebrow {
+ margin-top: 24px;
+}
+
+.mobile-placeholder p {
+ max-width: 320px;
+ margin: 14px 0 22px;
+ color: var(--ink-secondary);
+ font-size: 13px;
+ line-height: 1.8;
+}
+
+.mobile-profile {
+ padding: 22px 16px;
+}
+
+.mobile-profile__head {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ padding: 20px;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--brand-ink);
+}
+
+.mobile-profile__head h1 {
+ margin: 0 0 4px;
+ color: #f0f4f2;
+ font-size: 22px;
+}
+
+.mobile-profile__head p {
+ margin: 0;
+ color: #b9cbc3;
+ font-size: 11px;
+}
+
+.mobile-profile__list {
+ margin-top: 14px;
+ overflow: hidden;
+ border: 1px solid var(--line);
+ border-radius: 8px;
+ background: var(--paper-warm);
+ --border-inner: 1px solid var(--line);
+}
+
+.mobile-profile__actions {
+ margin-top: 18px;
+}
+
+@media (min-width: 640px) {
+ .mobile-shell {
+ border-right: 1px solid var(--line);
+ border-left: 1px solid var(--line);
+ box-shadow: 0 0 60px rgba(29, 36, 33, 0.08);
+ }
+}
+
+
+ {user ? (
+
+ {user.nickname || '我的'}
+
+ ) : (
+
+ 登录
+
+ )}
+
+
+ navigate(key)}
+ safeArea
+ >
+ {tabs.map(tab => (
+
+
+