XuqmGroup-Web/ops-platform/src/views/apps/AppDetailView.vue

<template>
  <div v-if="detail">
    <el-page-header @back="$router.back()" :content="detail.app.name" style="margin-bottom: 20px" />

    <el-card style="margin-bottom: 16px">
      <template #header>
        <div class="header-row">
          <span>应用信息</span>
          <el-tag :type="detail.enabledServiceCount > 0 ? 'success' : 'info'">
            已开通 {{ detail.enabledServiceCount }} 项服务
          </el-tag>
        </div>
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="应用名称">{{ detail.app.name }}</el-descriptions-item>
        <el-descriptions-item label="包名">{{ detail.app.packageName }}</el-descriptions-item>
        <el-descriptions-item label="AppKey">{{ detail.app.appKey }}</el-descriptions-item>
        <el-descriptions-item label="AppSecret">{{ mask(detail.app.appSecret) }}</el-descriptions-item>
        <el-descriptions-item label="租户ID">{{ detail.app.tenantId }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ fmt(detail.app.createdAt) }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card style="margin-bottom: 16px">
      <template #header>所属租户</template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="租户昵称">{{ detail.tenant?.nickname || '-' }}</el-descriptions-item>
        <el-descriptions-item label="租户用户名">{{ detail.tenant?.username || '-' }}</el-descriptions-item>
        <el-descriptions-item label="租户邮箱">{{ detail.tenant?.email || '-' }}</el-descriptions-item>
        <el-descriptions-item label="租户状态">{{ detail.tenant?.status === 'ACTIVE' ? '正常' : '禁用' }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card>
      <template #header>功能服务</template>
      <el-table :data="detail.services" border stripe>
        <el-table-column prop="serviceType" label="服务类型" width="140" />
        <el-table-column label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="row.enabled ? 'success' : 'info'">
              {{ row.enabled ? '已开通' : '未开通' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="180">
          <template #default="{ row }">{{ fmt(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column prop="config" label="配置" min-width="240" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { opsApi, type AppDetail } from '@/api/ops'

const route = useRoute()
const detail = ref<AppDetail | null>(null)

async function loadDetail() {
  const appKey = route.params.appKey as string
  const res = await opsApi.getApp(appKey)
  detail.value = res.data.data
}

function fmt(value: string) {
  return value ? new Date(value).toLocaleString('zh-CN') : '-'
}

function mask(value: string) {
  if (!value) return '-'
  return `${value.slice(0, 4)}********${value.slice(-4)}`
}

onMounted(loadDetail)
</script>

<style scoped>
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
</style>