fix: 按照developer版本修复admin应用管理页面布局

frontend/src/pages/admin/applications.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { computed, onActivated, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -8,7 +8,6 @@ import { toast } from 'vue-sonner'
 import type { App } from './applications/data/schema'
 
 import ConfirmDialog from '@/components/confirm-dialog.vue'
-import SingleFilter from '@/components/data-table/single-filter.vue'
 import { BasicPage } from '@/components/global-layout'
 import DataTable from '@/pages/admin/applications/components/data-table.vue'
 import api from '@/services/api'
@@ -18,9 +17,7 @@ const router = useRouter()
 
 const loading = ref(true)
 const apps = ref<App[]>([])
-const tableRef = ref()
+const searchFilter = ref('')
-const searchQuery = ref('')
-const statusFilter = ref<string>('')
 
 const deleteDialogOpen = ref(false)
 const deleteTarget = ref<App | null>(null)
@@ -30,34 +27,26 @@ const totalUsers = computed(() => apps.value.reduce((sum, app) => sum + (app.use
 const totalVerifyCount = computed(() => apps.value.reduce((sum, app) => sum + (app.verify_count || 0), 0))
 
 const filteredApps = computed(() => {
-  let result = [...apps.value]
+  if (!searchFilter.value)
+    return apps.value
 
-  if (searchQuery.value) {
+  const query = searchFilter.value.toLowerCase()
-    const query = searchQuery.value.toLowerCase()
+  return apps.value.filter(app =>
-    result = result.filter(app =>
     app.name.toLowerCase().includes(query)
     || app.app_key?.toLowerCase().includes(query)
     || app.description?.toLowerCase().includes(query),
   )
-  }
-
-  if (statusFilter.value) {
-    result = result.filter(app => app.status === statusFilter.value)
-  }
-
-  return result
 })
 
 async function fetchApps() {
   loading.value = true
   try {
-    const { data } = await api.get('/dev/applications')
+    const data = await api.get<{ applications: App[] }>('/dev/applications')
-    if (data.code === 200) {
+    const applications = data?.applications || []
-      const applications = Array.isArray(data.data) ? data.data : data.data.applications || []
     apps.value = applications.map((app: any) => ({
       id: app.id,
       name: app.name,
-        description: app.description || '',
+      description: app.description,
       app_key: app.app_key || '',
       billing_type: app.billing_type || 'free',
       login_policy: app.login_policy || 'loose',
@@ -86,7 +75,6 @@ async function fetchApps() {
       disabled_by_package: app.disabled_by_package || false,
     }))
   }
-  }
   catch (error) {
     console.error('获取应用列表失败:', error)
   }
@@ -95,40 +83,8 @@ async function fetchApps() {
   }
 }
 
-async function toggleStatus(app: App) {
+function goToCreate() {
-  try {
+  router.push('/admin/applications/create')
-    const newStatus = app.status === 'active' ? 'inactive' : 'active'
-    const { data } = await api.put(`/dev/applications/${app.id}`, { status: newStatus })
-    if (data.code === 200) {
-      toast.success(t('admin.applications.statusUpdateSuccess'))
-      await fetchApps()
-    }
-    else {
-      toast.error(data.message || t('admin.applications.statusUpdateFailed'))
-    }
-  }
-  catch (error: any) {
-    toast.error(error.message || t('admin.applications.statusUpdateFailed'))
-  }
-}
-
-async function deleteApp() {
-  if (!deleteTarget.value) return
-  try {
-    const { data } = await api.delete(`/dev/applications/${deleteTarget.value.id}`)
-    if (data.code === 200) {
-      toast.success(t('admin.applications.deleteSuccess'))
-      deleteDialogOpen.value = false
-      deleteTarget.value = null
-      await fetchApps()
-    }
-    else {
-      toast.error(data.message || t('admin.applications.deleteFailed'))
-    }
-  }
-  catch (error: any) {
-    toast.error(error.message || t('admin.applications.deleteFailed'))
-  }
 }
 
 function goToSettings(app: App) {
@@ -143,11 +99,43 @@ function goToEmail(app: App) {
   router.push(`/admin/applications/${app.id}/email`)
 }
 
-onMounted(() => {
+async function toggleStatus(app: App) {
+  try {
+    const newStatus = app.status === 'active' ? 'inactive' : 'active'
+    await api.put(`/dev/applications/${app.id}`, { status: newStatus })
+    toast.success(t('admin.applications.statusUpdateSuccess'))
     fetchApps()
-})
+  }
+  catch (error: any) {
+    console.error('切换应用状态失败:', error)
+    toast.error(error.message || t('admin.applications.statusUpdateFailed'))
+  }
+}
 
-onActivated(() => {
+function confirmDeleteApp(app: App) {
+  deleteTarget.value = app
+  deleteDialogOpen.value = true
+}
+
+async function handleDeleteApp() {
+  if (!deleteTarget.value)
+    return
+
+  try {
+    await api.delete(`/dev/applications/${deleteTarget.value.id}`)
+    toast.success(t('admin.applications.deleteSuccess'))
+    fetchApps()
+  }
+  catch (error: any) {
+    console.error('删除应用失败:', error)
+    toast.error(error.message || t('admin.applications.deleteFailed'))
+  }
+  finally {
+    deleteTarget.value = null
+  }
+}
+
+onMounted(() => {
   fetchApps()
 })
 </script>
@@ -159,13 +147,14 @@ onActivated(() => {
     sticky
   >
     <template #actions>
-      <UiButton size="sm" @click="router.push('/admin/applications/create')">
+      <UiButton @click="goToCreate">
         <Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
         {{ t('admin.applications.createApp') }}
       </UiButton>
     </template>
 
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+    <div class="space-y-6">
+      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <UiCard>
           <UiCardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
             <UiCardTitle class="text-sm font-medium">
@@ -223,40 +212,37 @@ onActivated(() => {
         </UiCard>
       </div>
 
-    <div class="flex items-center gap-2 mb-4">
+      <UiCard>
-      <SingleFilter
+        <UiCardContent class="p-6">
-        v-model="statusFilter"
-        :options="[
-          { label: t('admin.applications.allStatus'), value: '' },
-          { label: t('admin.applications.active'), value: 'active' },
-          { label: t('admin.applications.inactive'), value: 'inactive' },
-        ]"
-      />
-    </div>
-
           <DataTable
-      ref="tableRef"
+            :loading
             :data="filteredApps"
-      :loading="loading"
+            :search-filter="searchFilter"
-      :search-filter="searchQuery"
             @refresh="fetchApps"
             @go-to-settings="goToSettings"
             @go-to-security="goToSecurity"
             @go-to-email="goToEmail"
             @toggle-status="toggleStatus"
-      @delete="(app: App) => { deleteTarget = app; deleteDialogOpen = true }"
+            @delete="confirmDeleteApp"
-      @update:search-filter="searchQuery = $event"
+            @update:search-filter="searchFilter = $event"
           />
+        </UiCardContent>
+      </UiCard>
+    </div>
 
     <ConfirmDialog
       v-model:open="deleteDialogOpen"
+      destructive
       :confirm-button-text="t('admin.applications.delete')"
-      @confirm="deleteApp"
+      :cancel-button-text="t('admin.applications.create.cancelBtn')"
+      @confirm="handleDeleteApp"
     >
-      <UiAlertDialogTitle>{{ t('admin.applications.deleteApp') }}</UiAlertDialogTitle>
+      <template #title>
-      <UiAlertDialogDescription>
+        {{ t('admin.applications.deleteApp') }}
-        {{ t('admin.applications.deleteAppConfirm') }}
+      </template>
-      </UiAlertDialogDescription>
+      <template #description>
+        {{ t('admin.applications.deleteAppConfirm', { name: deleteTarget?.name }) }}
+      </template>
     </ConfirmDialog>
   </BasicPage>
 </template>