[Snow Team] frontend-pc: auto-commit work

frontend/src/views/public/HomeView.vue

@@ -1,23 +1,110 @@
+<script setup lang="ts">
+import {
+  ArrowRight,
+  CircleCheck,
+  Coin,
+  Iphone,
+  Lock,
+  Pointer,
+  Trophy,
+} from "@element-plus/icons-vue";
+
+const quickStats = [
+  { label: "在线账号", value: "128+", desc: "覆盖热门区服" },
+  { label: "最快交接", value: "3分钟", desc: "号主在线响应" },
+  { label: "押金托管", value: "平台担保", desc: "归还后释放" },
+];
+
+const categories = [
+  "烽火地带",
+  "全面战场",
+  "高哈夫币",
+  "高段位",
+  "低押金",
+  "可包夜",
+];
+</script>
+
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Delta Force Rental</p>
-      <h1>哈夫币租号平台</h1>
-      <p>先把账号发布、交接、订单、押金和仲裁链路打牢，再接真实支付和更复杂的风控。</p>
+  <section class="pc-home page">
+    <div class="anti-fraud-strip">
+      <el-icon><Lock /></el-icon>
+      <span
+        >防骗提示：哈夫币租号仅通过平台下单与托管押金，切勿私下转账、共享验证码或点击陌生链接。</span
+      >
     </div>
-    <div class="metric-grid">
-      <div class="metric-card">
-        <span>一期路线</span>
-        <strong>自研业务核心</strong>
+
+    <section class="pc-hero">
+      <div class="pc-hero-content">
+        <p class="eyebrow">Delta Force Account Rental</p>
+        <h1>三角洲行动账号租赁大厅</h1>
+        <p class="pc-hero-desc">
+          按区服、段位、哈夫币、价格快速筛选，平台担保交接，找号更省心。
+        </p>
+        <div class="pc-hero-actions">
+          <RouterLink class="primary-cta" to="/listings">
+            立即找号
+            <el-icon><ArrowRight /></el-icon>
+          </RouterLink>
+          <RouterLink class="secondary-cta" to="/seller/listings/create"
+            >我要发布账号</RouterLink
+          >
+        </div>
+        <div class="hero-tags">
+          <span v-for="item in categories" :key="item">{{ item }}</span>
+        </div>
       </div>
-      <div class="metric-card">
-        <span>交接模式</span>
-        <strong>号主手动交接</strong>
-      </div>
-      <div class="metric-card">
-        <span>资金模型</span>
-        <strong>先做账务</strong>
+
+      <aside class="pc-action-card">
+        <h2>快捷入口</h2>
+        <RouterLink class="action-row" to="/orders">
+          <el-icon><Pointer /></el-icon>
+          <div>
+            <strong>我租到的</strong>
+            <span>查看交接、租赁中与归还订单</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row" to="/seller/listings">
+          <el-icon><Trophy /></el-icon>
+          <div>
+            <strong>我租出的</strong>
+            <span>管理已发布账号与租客交接</span>
+          </div>
+        </RouterLink>
+        <RouterLink class="action-row highlight" to="/seller/listings/create">
+          <el-icon><Coin /></el-icon>
+          <div>
+            <strong>账号发布</strong>
+            <span>实名认证后即可上架出租</span>
+          </div>
+        </RouterLink>
+      </aside>
+    </section>
+
+    <div class="pc-stat-grid">
+      <div v-for="item in quickStats" :key="item.label" class="pc-stat-card">
+        <span>{{ item.label }}</span>
+        <strong>{{ item.value }}</strong>
+        <p>{{ item.desc }}</p>
       </div>
     </div>
+
+    <section class="pc-feature-row">
+      <div class="feature-card">
+        <el-icon><CircleCheck /></el-icon>
+        <strong>平台审核上架</strong>
+        <span>账号信息、截图与价格经过审核后展示</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Lock /></el-icon>
+        <strong>押金账务留痕</strong>
+        <span>订单、押金、仲裁记录全链路可追踪</span>
+      </div>
+      <div class="feature-card">
+        <el-icon><Iphone /></el-icon>
+        <strong>交接流程清晰</strong>
+        <span>号主提交说明，租客确认收号与归还</span>
+      </div>
+    </section>
   </section>
 </template>

frontend/src/views/public/ListingDetailView.vue

@@ -1,87 +1,132 @@
 <script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import { onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from "element-plus";
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-import { fetchListing, type Listing } from '@/api/listings'
-import { createOrder } from '@/api/orders'
+import { fetchListing, type Listing } from "@/api/listings";
+import { createOrder } from "@/api/orders";
 
-const route = useRoute()
-const router = useRouter()
-const loading = ref(false)
-const ordering = ref(false)
-const rentHours = ref(1)
-const listing = ref<Listing | null>(null)
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const ordering = ref(false);
+const rentHours = ref(1);
+const listing = ref<Listing | null>(null);
 
 onMounted(async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    listing.value = await fetchListing(String(route.params.id))
+    listing.value = await fetchListing(String(route.params.id));
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-})
+});
 
 async function handleCreateOrder() {
-  if (!listing.value) return
-  ordering.value = true
+  if (!listing.value) return;
+  ordering.value = true;
   try {
-    const order = await createOrder(listing.value.id, rentHours.value)
-    ElMessage.success('订单已创建，账号已锁定')
-    await router.push(`/orders/${order.id}`)
+    const order = await createOrder(listing.value.id, rentHours.value);
+    ElMessage.success("订单已创建，账号已锁定");
+    await router.push(`/orders/${order.id}`);
   } catch (error) {
-    ElMessage.error(readError(error, '下单失败'))
+    ElMessage.error(readError(error, "下单失败"));
   } finally {
-    ordering.value = false
+    ordering.value = false;
   }
 }
 
 function readError(error: unknown, fallback: string) {
-  if (typeof error === 'object' && error && 'response' in error) {
-    const response = (error as { response?: { data?: { message?: string } } }).response
-    return response?.data?.message || fallback
+  if (typeof error === "object" && error && "response" in error) {
+    const response = (error as { response?: { data?: { message?: string } } })
+      .response;
+    return response?.data?.message || fallback;
   }
-  return fallback
+  return fallback;
 }
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
-    <div v-if="listing" class="page-header">
-      <p class="eyebrow">{{ listing.server_region }} / {{ listing.login_platform }}</p>
-      <h1>{{ listing.title }}</h1>
-      <p>{{ listing.description || '号主暂未填写详细说明。' }}</p>
+  <section class="pc-detail page" v-loading="loading">
+    <div class="anti-fraud-strip compact">
+      <span
+        >防骗提示：下单后请按平台交接流程确认收号与归还，不要私下交易。</span
+      >
     </div>
 
-    <div v-if="listing" class="detail-grid">
-      <div class="metric-card">
-        <span>哈夫币</span>
-        <strong>{{ listing.haf_coin_amount }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>时租</span>
-        <strong>¥{{ listing.price_hourly }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>押金</span>
-        <strong>¥{{ listing.deposit_amount }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>租期</span>
-        <strong>{{ listing.min_rent_hours }}-{{ listing.max_rent_hours }} 小时</strong>
-      </div>
-    </div>
+    <div v-if="listing" class="pc-detail-layout">
+      <section class="pc-detail-main">
+        <div class="detail-cover">
+          <img
+            v-if="listing.screenshot_urls?.[0]"
+            :src="listing.screenshot_urls[0]"
+            :alt="listing.title"
+          />
+          <span v-else>HFB ACCOUNT</span>
+        </div>
+        <div class="page-header detail-title">
+          <p class="eyebrow">
+            {{ listing.server_region }} / {{ listing.login_platform }}
+          </p>
+          <h1>{{ listing.title }}</h1>
+          <p>{{ listing.description || "号主暂未填写详细说明。" }}</p>
+        </div>
 
-    <div v-if="listing" class="order-panel">
-      <el-form label-position="top">
-        <el-form-item label="租用时长">
-          <el-input-number v-model="rentHours" :min="listing.min_rent_hours" :max="listing.max_rent_hours" />
-        </el-form-item>
-        <p>
-          预计租金：¥{{ (listing.price_hourly * rentHours).toFixed(2) }}，押金：¥{{ listing.deposit_amount }}
+        <div class="detail-grid">
+          <div class="metric-card">
+            <span>哈夫币</span>
+            <strong>{{ listing.haf_coin_amount }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>时租</span>
+            <strong>¥{{ listing.price_hourly }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>日租</span>
+            <strong>¥{{ listing.price_daily }}</strong>
+          </div>
+          <div class="metric-card">
+            <span>押金</span>
+            <strong>¥{{ listing.deposit_amount }}</strong>
+          </div>
+        </div>
+      </section>
+
+      <aside class="order-panel pc-order-card">
+        <h2>立即租用</h2>
+        <p class="order-safe-text">
+          平台托管订单与押金，租期 {{ listing.min_rent_hours }}-{{
+            listing.max_rent_hours
+          }}
+          小时。
         </p>
-        <el-button type="primary" :loading="ordering" @click="handleCreateOrder">立即下单并锁定账号</el-button>
-      </el-form>
+        <el-form label-position="top">
+          <el-form-item label="租用时长">
+            <el-input-number
+              v-model="rentHours"
+              :min="listing.min_rent_hours"
+              :max="listing.max_rent_hours"
+              class="full-control"
+            />
+          </el-form-item>
+          <div class="order-total-box">
+            <span>预计租金</span>
+            <strong
+              >¥{{ (listing.price_hourly * rentHours).toFixed(2) }}</strong
+            >
+            <em>押金 ¥{{ listing.deposit_amount }}</em>
+          </div>
+          <el-button
+            type="warning"
+            size="large"
+            :loading="ordering"
+            class="full-control"
+            @click="handleCreateOrder"
+          >
+            立即下单并锁定账号
+          </el-button>
+        </el-form>
+      </aside>
     </div>
   </section>
 </template>

frontend/src/views/public/ListingsView.vue

@@ -1,40 +1,214 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, reactive, ref } from "vue";
+import { Refresh, Search } from "@element-plus/icons-vue";
 
-import { fetchListings, type Listing } from '@/api/listings'
+import { fetchListings, type Listing } from "@/api/listings";
 
-const loading = ref(false)
-const listings = ref<Listing[]>([])
+const loading = ref(false);
+const listings = ref<Listing[]>([]);
+const sortBy = ref("recommended");
+const filters = reactive({
+  keyword: "",
+  region: "",
+  platform: "",
+  minCoin: undefined as number | undefined,
+  maxPrice: undefined as number | undefined,
+});
 
-onMounted(loadListings)
+const regionOptions = computed(() =>
+  uniqueOptions(listings.value.map((item) => item.server_region))
+);
+const platformOptions = computed(() =>
+  uniqueOptions(listings.value.map((item) => item.login_platform))
+);
+const filteredListings = computed(() => {
+  const keyword = filters.keyword.trim().toLowerCase();
+  const result = listings.value.filter((item) => {
+    const matchKeyword =
+      !keyword ||
+      [item.title, item.description, item.rank_level, item.server_region]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(keyword));
+    const matchRegion =
+      !filters.region || item.server_region === filters.region;
+    const matchPlatform =
+      !filters.platform || item.login_platform === filters.platform;
+    const matchCoin =
+      !filters.minCoin || item.haf_coin_amount >= filters.minCoin;
+    const matchPrice =
+      !filters.maxPrice || item.price_hourly <= filters.maxPrice;
+    return (
+      matchKeyword && matchRegion && matchPlatform && matchCoin && matchPrice
+    );
+  });
+
+  return [...result].sort((a, b) => {
+    if (sortBy.value === "price-asc") return a.price_hourly - b.price_hourly;
+    if (sortBy.value === "coin-desc")
+      return b.haf_coin_amount - a.haf_coin_amount;
+    if (sortBy.value === "deposit-asc")
+      return a.deposit_amount - b.deposit_amount;
+    return (
+      b.haf_coin_amount - a.haf_coin_amount || a.price_hourly - b.price_hourly
+    );
+  });
+});
+
+onMounted(loadListings);
 
 async function loadListings() {
-  loading.value = true
+  loading.value = true;
   try {
-    listings.value = await fetchListings()
+    listings.value = await fetchListings();
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
+
+function resetFilters() {
+  filters.keyword = "";
+  filters.region = "";
+  filters.platform = "";
+  filters.minCoin = undefined;
+  filters.maxPrice = undefined;
+  sortBy.value = "recommended";
+}
+
+function uniqueOptions(values: string[]) {
+  return [...new Set(values.filter(Boolean))];
+}
 </script>
 
 <template>
-  <section class="page">
-    <div class="page-header">
-      <p class="eyebrow">Listings</p>
-      <h1>租号列表</h1>
-      <p>支持区服、平台、价格、押金、段位和哈夫币数量展示。</p>
+  <section class="pc-listings page">
+    <div class="anti-fraud-strip compact">
+      <span
+        >防骗提示：只在平台内沟通、下单和确认归还，谨防冒充客服与低价私单。</span
+      >
     </div>
 
-    <el-empty v-if="!loading && listings.length === 0" description="暂无已上架租号" />
-    <div v-else v-loading="loading" class="listing-grid">
-      <RouterLink v-for="item in listings" :key="item.id" class="listing-card" :to="`/listings/${item.id}`">
-        <span>{{ item.server_region }} / {{ item.login_platform }}</span>
-        <strong>{{ item.title }}</strong>
-        <p>{{ item.rank_level || '未填写段位' }} · 哈夫币 {{ item.haf_coin_amount }}</p>
-        <div class="listing-price">
-          <b>¥{{ item.price_hourly }}/小时</b>
+    <div class="page-header-row listings-header">
+      <div>
+        <p class="eyebrow">Account Market</p>
+        <h1>租号大厅</h1>
+        <p>参考大锤商行 PC 信息密度，支持高级筛选、排序和卡片式资源浏览。</p>
+      </div>
+      <RouterLink class="pc-post-link large" to="/seller/listings/create"
+        >账号发布</RouterLink
+      >
+    </div>
+
+    <section class="advanced-filter-card">
+      <div class="filter-title">
+        <strong>高级筛选</strong>
+        <span>共 {{ filteredListings.length }} 个可租账号</span>
+      </div>
+      <el-form label-position="top" class="pc-filter-grid">
+        <el-form-item label="关键词">
+          <el-input
+            v-model="filters.keyword"
+            placeholder="标题 / 段位 / 区服"
+            :prefix-icon="Search"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item label="区服">
+          <el-select v-model="filters.region" placeholder="全部区服" clearable>
+            <el-option
+              v-for="item in regionOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="登录平台">
+          <el-select
+            v-model="filters.platform"
+            placeholder="全部平台"
+            clearable
+          >
+            <el-option
+              v-for="item in platformOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="最低哈夫币">
+          <el-input-number
+            v-model="filters.minCoin"
+            :min="0"
+            :step="10000"
+            placeholder="不限"
+            class="full-control"
+          />
+        </el-form-item>
+        <el-form-item label="最高时租">
+          <el-input-number
+            v-model="filters.maxPrice"
+            :min="0"
+            :step="1"
+            placeholder="不限"
+            class="full-control"
+          />
+        </el-form-item>
+      </el-form>
+      <div class="sort-toolbar">
+        <el-radio-group v-model="sortBy">
+          <el-radio-button label="recommended">综合推荐</el-radio-button>
+          <el-radio-button label="price-asc">价格最低</el-radio-button>
+          <el-radio-button label="coin-desc">哈夫币最多</el-radio-button>
+          <el-radio-button label="deposit-asc">押金最低</el-radio-button>
+        </el-radio-group>
+        <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
+      </div>
+    </section>
+
+    <el-empty
+      v-if="!loading && filteredListings.length === 0"
+      description="暂无符合条件的租号"
+    />
+    <div v-else v-loading="loading" class="pc-resource-list">
+      <RouterLink
+        v-for="item in filteredListings"
+        :key="item.id"
+        class="resource-card"
+        :to="`/listings/${item.id}`"
+      >
+        <div class="resource-cover">
+          <img
+            v-if="item.screenshot_urls?.[0]"
+            :src="item.screenshot_urls[0]"
+            :alt="item.title"
+          />
+          <span v-else>HFB</span>
+        </div>
+        <div class="resource-main">
+          <div class="resource-title-line">
+            <strong>{{ item.title }}</strong>
+            <em>{{ item.status === "published" ? "可租" : item.status }}</em>
+          </div>
+          <p>
+            {{
+              item.description || "号主暂未填写说明，可下单后按平台流程交接。"
+            }}
+          </p>
+          <div class="resource-tags">
+            <span>{{ item.server_region }}</span>
+            <span>{{ item.login_platform }}</span>
+            <span>{{ item.rank_level || "未填写段位" }}</span>
+            <span>哈夫币 {{ item.haf_coin_amount }}</span>
+          </div>
+        </div>
+        <div class="resource-price-box">
+          <span>时租</span>
+          <strong>¥{{ item.price_hourly }}</strong>
           <em>押金 ¥{{ item.deposit_amount }}</em>
+          <small
+            >{{ item.min_rent_hours }}-{{ item.max_rent_hours }} 小时</small
+          >
         </div>
       </RouterLink>
     </div>