[Snow Team] final-check: auto-commit work

2026-05-22 19:28:09 +08:00
parent 4e5eee9d01
commit a7011668ff
1 changed files with 107 additions and 80 deletions
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
-import { RouterLink } from 'vue-router'
+import { computed, onMounted, ref } from "vue";
+import { RouterLink } from "vue-router";

-import { fetchListings, type Listing } from '@/api/listings'
+import { fetchListings, type Listing } from "@/api/listings";

-const loading = ref(false)
-const loadFailed = ref(false)
-const listings = ref<Listing[]>([])
-const filterOpen = ref(false)
-const activeSort = ref('默认')
+const loading = ref(false);
+const loadFailed = ref(false);
+const listings = ref<Listing[]>([]);
+const filterOpen = ref(false);
+const activeSort = ref("默认");

 const channels = [
-  { label: '全部', icon: '🔥' },
-  { label: '高哈夫币', icon: '💰' },
-  { label: '低押金', icon: '🛡️' },
-  { label: '扫码号', icon: '📱' },
-  { label: '包夜', icon: '🌙' },
-]
-const sortOptions = ['默认', '价格', '比例', '哈夫币', '筛选']
-const quickFilters = ['三角洲行动', '安卓/扫码', '高段位', '可包夜']
+  { label: "全部", icon: "🔥" },
+  { label: "高哈夫币", icon: "💰" },
+  { label: "低押金", icon: "🛡️" },
+  { label: "扫码号", icon: "📱" },
+  { label: "包夜", icon: "🌙" },
+];
+const sortOptions = ["默认", "价格", "比例", "哈夫币", "筛选"];
+const quickFilters = ["三角洲行动", "安卓/扫码", "高段位", "可包夜"];

 const fallbackListings: Listing[] = [
  {
    id: 9001,
    account_id: 0,
    owner_id: 0,
-    title: '烽火地带 · 80W 哈夫币安全号',
-    description: '支持扫码上号，号主在线交接，适合快速体验高资产账号。',
-    game_name: '三角洲行动',
-    server_region: '微信区',
-    login_platform: '安卓扫码',
-    rank_level: '机密行动 王牌',
+    title: "烽火地带 · 80W 哈夫币安全号",
+    description: "支持扫码上号，号主在线交接，适合快速体验高资产账号。",
+    game_name: "三角洲行动",
+    server_region: "微信区",
+    login_platform: "安卓扫码",
+    rank_level: "机密行动 王牌",
    haf_coin_amount: 800000,
    screenshot_urls: [],
    price_hourly: 6.8,
@@ -39,22 +39,22 @@ const fallbackListings: Listing[] = [
    deposit_amount: 200,
    min_rent_hours: 2,
    max_rent_hours: 168,
-    status: 'published',
-    review_status: 'approved',
-    review_reason: '',
-    created_at: '',
-    updated_at: '',
+    status: "published",
+    review_status: "approved",
+    review_reason: "",
+    created_at: "",
+    updated_at: "",
  },
  {
    id: 9002,
    account_id: 0,
    owner_id: 0,
-    title: '航天基地 · 高配皮肤成品号',
-    description: '热门枪皮齐全，低押金，新手友好。',
-    game_name: '三角洲行动',
-    server_region: 'QQ区',
-    login_platform: 'iOS扫码',
-    rank_level: '钻石',
+    title: "航天基地 · 高配皮肤成品号",
+    description: "热门枪皮齐全，低押金，新手友好。",
+    game_name: "三角洲行动",
+    server_region: "QQ区",
+    login_platform: "iOS扫码",
+    rank_level: "钻石",
    haf_coin_amount: 520000,
    screenshot_urls: [],
    price_hourly: 4.5,
@@ -63,22 +63,22 @@ const fallbackListings: Listing[] = [
    deposit_amount: 120,
    min_rent_hours: 1,
    max_rent_hours: 72,
-    status: 'published',
-    review_status: 'approved',
-    review_reason: '',
-    created_at: '',
-    updated_at: '',
+    status: "published",
+    review_status: "approved",
+    review_reason: "",
+    created_at: "",
+    updated_at: "",
  },
  {
    id: 9003,
    account_id: 0,
    owner_id: 0,
-    title: '零号大坝 · 搬砖专用稳定号',
-    description: '可长租，支持包周，交接说明完整。',
-    game_name: '三角洲行动',
-    server_region: '微信区',
-    login_platform: '安卓/模拟器',
-    rank_level: '铂金',
+    title: "零号大坝 · 搬砖专用稳定号",
+    description: "可长租，支持包周，交接说明完整。",
+    game_name: "三角洲行动",
+    server_region: "微信区",
+    login_platform: "安卓/模拟器",
+    rank_level: "铂金",
    haf_coin_amount: 360000,
    screenshot_urls: [],
    price_hourly: 3.9,
@@ -87,54 +87,61 @@ const fallbackListings: Listing[] = [
    deposit_amount: 80,
    min_rent_hours: 3,
    max_rent_hours: 168,
-    status: 'published',
-    review_status: 'approved',
-    review_reason: '',
-    created_at: '',
-    updated_at: '',
+    status: "published",
+    review_status: "approved",
+    review_reason: "",
+    created_at: "",
+    updated_at: "",
  },
-]
+];

-const displayListings = computed(() => (listings.value.length > 0 ? listings.value : fallbackListings))
+const displayListings = computed(() =>
+  listings.value.length > 0 ? listings.value : fallbackListings
+);

 const platformStats = computed(() => {
-  const items = displayListings.value
-  const totalCoin = items.reduce((sum, item) => sum + Number(item.haf_coin_amount || 0), 0)
-  const lowDeposit = items.filter((item) => Number(item.deposit_amount || 0) <= 120).length
+  const items = displayListings.value;
+  const totalCoin = items.reduce(
+    (sum, item) => sum + Number(item.haf_coin_amount || 0),
+    0
+  );
+  const lowDeposit = items.filter(
+    (item) => Number(item.deposit_amount || 0) <= 120
+  ).length;

  return [
-    { value: `${items.length}+`, label: '在线租号' },
-    { value: formatCoin(totalCoin), label: '哈夫币总量' },
-    { value: `${lowDeposit}个`, label: '低押账号' },
-  ]
-})
+    { value: `${items.length}+`, label: "在线租号" },
+    { value: formatCoin(totalCoin), label: "哈夫币总量" },
+    { value: `${lowDeposit}个`, label: "低押账号" },
+  ];
+});

-onMounted(loadListings)
+onMounted(loadListings);

 async function loadListings() {
-  loading.value = true
-  loadFailed.value = false
+  loading.value = true;
+  loadFailed.value = false;
  try {
-    listings.value = await fetchListings()
+    listings.value = await fetchListings();
  } catch {
-    loadFailed.value = true
+    loadFailed.value = true;
  } finally {
-    loading.value = false
+    loading.value = false;
  }
 }

 function formatCoin(amount: number) {
  if (amount >= 10000) {
-    return `${Math.round(amount / 10000)}W`
+    return `${Math.round(amount / 10000)}W`;
  }
-  return `${amount}`
+  return `${amount}`;
 }

 function formatRatio(item: Listing) {
  if (!item.price_hourly) {
-    return '--'
+    return "--";
  }
-  return `${Math.round(item.haf_coin_amount / item.price_hourly / 10000)}W/元`
+  return `${Math.round(item.haf_coin_amount / item.price_hourly / 10000)}W/元`;
 }
 </script>

@@ -193,21 +200,32 @@ function formatRatio(item: Listing) {
          :key="item"
          :class="{ active: activeSort === item }"
          type="button"
-          @click="item === '筛选' ? (filterOpen = !filterOpen) : (activeSort = item)"
+          @click="
+            item === '筛选' ? (filterOpen = !filterOpen) : (activeSort = item)
+          "
        >
          {{ item }}<span v-if="item === '筛选'">▾</span>
        </button>
      </div>

      <div v-if="filterOpen" class="filter-panel">
-        <button v-for="item in quickFilters" :key="item" type="button">{{ item }}</button>
+        <button v-for="item in quickFilters" :key="item" type="button">
+          {{ item }}
+        </button>
      </div>

-      <p v-if="loadFailed" class="mobile-tip">接口暂不可用，当前展示移动端示例数据。</p>
+      <p v-if="loadFailed" class="mobile-tip">
+        接口暂不可用，当前展示移动端示例数据。
+      </p>
      <p v-else-if="loading" class="mobile-tip">正在加载优质账号...</p>

      <div class="mobile-list">
-        <RouterLink v-for="item in displayListings" :key="item.id" class="mobile-card" :to="`/listings/${item.id}`">
+        <RouterLink
+          v-for="item in displayListings"
+          :key="item.id"
+          class="mobile-card"
+          :to="`/m/listings/${item.id}`"
+        >
          <div class="card-cover">
            <span>{{ formatCoin(item.haf_coin_amount) }}</span>
            <small>哈夫币</small>
@@ -217,7 +235,10 @@ function formatRatio(item: Listing) {
              <h2>{{ item.title }}</h2>
              <em>可租</em>
            </div>
-            <p>{{ item.server_region }} · {{ item.login_platform }} · {{ item.rank_level || '未填写段位' }}</p>
+            <p>
+              {{ item.server_region }} · {{ item.login_platform }} ·
+              {{ item.rank_level || "未填写段位" }}
+            </p>
            <div class="card-tags">
              <span>担保</span>
              <span>秒接单</span>
@@ -230,7 +251,11 @@ function formatRatio(item: Listing) {
            </div>
            <div class="card-footer">
              <strong>¥{{ item.price_hourly }}<small>/小时</small></strong>
-              <span>日租 ¥{{ item.price_daily || '--' }} · 周租 ¥{{ item.price_weekly || '--' }}</span>
+              <span
+                >日租 ¥{{ item.price_daily || "--" }} · 周租 ¥{{
+                  item.price_weekly || "--"
+                }}</span
+              >
            </div>
          </div>
        </RouterLink>
@@ -238,11 +263,13 @@ function formatRatio(item: Listing) {
    </section>

    <nav class="mobile-tabbar" aria-label="底部导航">
-      <RouterLink to="/" class="tab-item active">首页</RouterLink>
-      <RouterLink to="/listings" class="tab-item">租号</RouterLink>
-      <RouterLink to="/seller/listings/create" class="publish-tab">发布</RouterLink>
-      <RouterLink to="/orders" class="tab-item">订单</RouterLink>
-      <RouterLink to="/login" class="tab-item">我的</RouterLink>
+      <RouterLink to="/m" class="tab-item active">首页</RouterLink>
+      <RouterLink to="/m/listings" class="tab-item">租号</RouterLink>
+      <RouterLink to="/m/seller/listings/create" class="publish-tab"
+        >发布</RouterLink
+      >
+      <RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
+      <RouterLink to="/m/login" class="tab-item">我的</RouterLink>
    </nav>
  </main>
 </template>