重构首页账号专区组件,拆分排序控件

将 HomeZonesAndSort 拆分为独立的 HomeZones 专区组件,
排序控件内联至列表头部,专区改为响应式网格 tab 布局。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/features/listings/views/HomeView.vue

@@ -30,7 +30,7 @@ import HomeAnnouncement from '../components/HomeAnnouncement.vue'
 import HomeBanner from '../components/HomeBanner.vue'
 import HomeStats from '../components/HomeStats.vue'
 import HomeFilters from '../components/HomeFilters.vue'
-import HomeZonesAndSort from '../components/HomeZonesAndSort.vue'
+import HomeZones from '../components/HomeZones.vue'
 import ListingCard from '../components/ListingCard.vue'
 
 const announcements = ref<string[]>(defaultHomeAnnouncements)
@@ -270,14 +270,21 @@ loadHome()
           <p class="eyebrow">Account Zone</p>
           <h2>账号专区</h2>
         </div>
+        <div class="list-actions">
+          <el-radio-group v-model="sortBy" size="small">
+            <el-radio-button label="recommended">综合推荐</el-radio-button>
+            <el-radio-button label="coinDesc">哈夫币</el-radio-button>
+            <el-radio-button label="awmDesc">AWM数量</el-radio-button>
+            <el-radio-button label="priceAsc">价格最低</el-radio-button>
+            <el-radio-button label="priceDesc">价格最高</el-radio-button>
+          </el-radio-group>
+        </div>
       </div>
 
-      <HomeZonesAndSort
+      <HomeZones
         :zones="zoneOptions"
         :active-zone="activeZone"
-        :sort-by="sortBy"
         @update:active-zone="activeZone = $event"
-        @update:sort-by="sortBy = $event"
       />
 
       <div v-if="!loading && listings.length === 0" class="home-empty-state">