优化admin-gui

frontend/src/views/admin/AdminListingsView.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { Search } from '@element-plus/icons-vue'
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, reactive } from 'vue'
 
 import { fetchAdminListings, type AdminListingQuery, type Listing } from '@/api/listings'
+import { useAdminTable } from '@/composables/useAdminTable'
+import { useMoney } from '@/composables/useMoney'
 import { listingReviewStatusLabel, listingStatusLabel } from '@/utils/statusLabels'
 import { formatDateTime } from '@/utils/time'
 
-const loading = ref(false)
-const listings = ref<Listing[]>([])
+const money = useMoney()
+
 const filters = reactive<AdminListingQuery>({
   owner_id: '',
   status: '',
@@ -15,21 +17,14 @@ const filters = reactive<AdminListingQuery>({
   limit: 200,
 })
 
+const { loading, data: listings, load: loadListings } = useAdminTable<Listing>({
+  fetchFn: () => fetchAdminListings(filters),
+})
+
 const publishedCount = computed(() => listings.value.filter((item) => item.status === 'published').length)
 const rentedCount = computed(() => listings.value.filter((item) => item.status === 'rented').length)
 const pendingCount = computed(() => listings.value.filter((item) => item.review_status === 'pending').length)
 
-onMounted(loadListings)
-
-async function loadListings() {
-  loading.value = true
-  try {
-    listings.value = await fetchAdminListings(filters)
-  } finally {
-    loading.value = false
-  }
-}
-
 function resetFilters() {
   filters.owner_id = ''
   filters.status = ''
@@ -38,10 +33,6 @@ function resetFilters() {
   void loadListings()
 }
 
-function money(value: number) {
-  return `¥${Math.round(Number(value || 0))}`
-}
-
 function listingPrice(row: Listing) {
   return money(row.price)
 }