pc-10584/app/components/developer/AppsCenter.vue

<template>
  <div class="space-y-6">
    <a-card title="应用列表" class="shadow-sm">
      <div class="flex flex-wrap items-center gap-3">
        <a-input
          v-model:value="keywords"
          placeholder="关键词 keywords"
          class="w-72"
          @press-enter="doSearch"
        />

        <a-button type="primary" :loading="pending" @click="doSearch">查询</a-button>
      </div>

      <a-alert
        v-if="error"
        class="mt-4"
        show-icon
        type="error"
        :message="String(error)"
      />

      <a-table
        class="mt-4"
        :data-source="list"
        :loading="pending"
        :pagination="false"
        row-key="websiteId"
        size="middle"
      >
        <a-table-column title="ID" data-index="tenantId" width="90" />
        <a-table-column title="应用名称" data-index="websiteName" />
        <a-table-column title="标识" data-index="websiteCode" width="200" />
        <a-table-column title="域名" data-index="domain" width="220" />

        <a-table-column title="类型" width="120">
          <template #default="{ record }">
            <a-tag :color="record.plugin ? 'geekblue' : 'green'">
              {{ record.plugin ? '插件' : '应用' }}
            </a-tag>
          </template>
        </a-table-column>

        <a-table-column title="状态" width="140">
          <template #default="{ record }">
            <a-tag :color="statusColor(record.status)">
              {{ statusText(record.status, record.statusText) }}
            </a-tag>
          </template>
        </a-table-column>

        <a-table-column title="到期时间" data-index="expirationTime" width="180" />
        <a-table-column title="创建时间" data-index="createTime" width="180" />

        <a-table-column title="后台" width="220">
          <template #default="{ record }">
            <a
              v-if="record.adminUrl"
              class="text-blue-600 hover:underline"
              :href="record.adminUrl"
              target="_blank"
              rel="noreferrer"
            >
              {{ record.adminUrl }}
            </a>
            <span v-else class="text-gray-400">-</span>
          </template>
        </a-table-column>
      </a-table>

      <div class="mt-4 flex items-center justify-end">
        <a-pagination
          :current="page"
          :page-size="limit"
          :total="total"
          show-size-changer
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @show-size-change="onPageSizeChange"
        />
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { pageCmsWebsiteAll } from '@/api/cms/cmsWebsite/index'
import type { CmsWebsite } from '@/api/cms/cmsWebsite/model'
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '应用中心',
  description: '使用 pageCmsWebsite 分页读取应用并展示。'
})

const page = ref(1)
const limit = ref(10)
const keywords = ref('')

const { data, pending, error, refresh } = useAsyncData(
  'developer-cms-website-page',
  () =>
    pageCmsWebsiteAll({
      page: page.value,
      limit: limit.value,
      keywords: keywords.value || undefined
    }),
  { server: false }
)

const list = computed<CmsWebsite[]>(() => data.value?.list ?? [])
const total = computed(() => data.value?.count ?? 0)

function doSearch() {
  page.value = 1
  refresh()
}

function onPageChange(nextPage: number) {
  page.value = nextPage
  refresh()
}

function onPageSizeChange(_current: number, nextSize: number) {
  limit.value = nextSize
  page.value = 1
  refresh()
}

function statusText(status?: number, fallback?: string) {
  if (fallback) return fallback
  const map: Record<number, string> = {
    0: '未开通',
    1: '运行中',
    2: '维护中',
    3: '已关闭',
    4: '欠费停机',
    5: '违规关停'
  }
  if (typeof status === 'number' && status in map) return map[status]
  return '-'
}

function statusColor(status?: number) {
  const map: Record<number, string> = {
    0: 'default',
    1: 'green',
    2: 'orange',
    3: 'red',
    4: 'volcano',
    5: 'red'
  }
  if (typeof status === 'number' && status in map) return map[status]
  return 'default'
}
</script>