0264408
114 lines
4.5 KiB
Vue
114 lines
4.5 KiB
Vue
<template>
|
||
<div class="space-y-6">
|
||
<!-- 头部欢迎语 -->
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-2xl font-bold text-slate-800">仪表盘 / Dashboard</h1>
|
||
<p class="text-slate-500 mt-1">欢迎回来，Admin</p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<n-button type="primary" size="medium" class="px-6 rounded-lg shadow-sm">
|
||
<template #icon>
|
||
<n-icon><Plus /></n-icon>
|
||
</template>
|
||
发布新版本
|
||
</n-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||
<!-- 应用总数 -->
|
||
<n-card :bordered="false" class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
||
<template #header>
|
||
<span class="text-sm font-medium text-slate-500">应用总数</span>
|
||
</template>
|
||
<template #header-extra>
|
||
<div class="p-2 bg-indigo-50 rounded-lg text-indigo-600">
|
||
<n-icon size="20"><Smartphone /></n-icon>
|
||
</div>
|
||
</template>
|
||
<div class="mt-2">
|
||
<span class="text-3xl font-bold text-slate-800">12</span>
|
||
<span class="ml-2 text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+2 本周</span>
|
||
</div>
|
||
</n-card>
|
||
|
||
<!-- 活跃版本 -->
|
||
<n-card :bordered="false" class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
||
<template #header>
|
||
<span class="text-sm font-medium text-slate-500">活跃版本</span>
|
||
</template>
|
||
<template #header-extra>
|
||
<div class="p-2 bg-emerald-50 rounded-lg text-emerald-600">
|
||
<n-icon size="20"><Rocket /></n-icon>
|
||
</div>
|
||
</template>
|
||
<div class="mt-2">
|
||
<span class="text-3xl font-bold text-slate-800">48</span>
|
||
</div>
|
||
</n-card>
|
||
|
||
<!-- 下载次数 -->
|
||
<n-card :bordered="false" class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
||
<template #header>
|
||
<span class="text-sm font-medium text-slate-500">总下载量</span>
|
||
</template>
|
||
<template #header-extra>
|
||
<div class="p-2 bg-blue-50 rounded-lg text-blue-600">
|
||
<n-icon size="20"><Download /></n-icon>
|
||
</div>
|
||
</template>
|
||
<div class="mt-2">
|
||
<span class="text-3xl font-bold text-slate-800">1.2k</span>
|
||
<span class="ml-2 text-xs font-medium text-rose-600 bg-rose-50 px-2 py-0.5 rounded-full">-5% 同比</span>
|
||
</div>
|
||
</n-card>
|
||
|
||
<!-- 存储用量 -->
|
||
<n-card :bordered="false" class="rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300">
|
||
<template #header>
|
||
<span class="text-sm font-medium text-slate-500">存储用量</span>
|
||
</template>
|
||
<template #header-extra>
|
||
<div class="p-2 bg-amber-50 rounded-lg text-amber-600">
|
||
<n-icon size="20"><HardDrive /></n-icon>
|
||
</div>
|
||
</template>
|
||
<div class="mt-2">
|
||
<span class="text-3xl font-bold text-slate-800">4.2GB</span>
|
||
<span class="ml-2 text-xs font-medium text-slate-400">/ 10GB</span>
|
||
</div>
|
||
</n-card>
|
||
</div>
|
||
|
||
<!-- 最近更新表格 -->
|
||
<n-card title="最近发布动态" :bordered="false" class="rounded-xl shadow-sm mt-6">
|
||
<n-data-table
|
||
:columns="columns"
|
||
:data="data"
|
||
:bordered="false"
|
||
class="mt-4"
|
||
/>
|
||
</n-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { NCard, NButton, NDataTable, NIcon } from 'naive-ui'
|
||
import { Smartphone, Rocket, Download, HardDrive, Plus } from 'lucide-vue-next'
|
||
|
||
const data = ref([
|
||
{ app: 'Nebula App', version: 'v1.0.2', time: '2026-03-09 14:00', status: '已发布' },
|
||
{ app: 'Nebula Admin', version: 'v2.1.0', time: '2026-03-08 10:00', status: '审核中' }
|
||
])
|
||
|
||
const columns = ref([
|
||
{ title: '应用名称', key: 'app' },
|
||
{ title: '版本', key: 'version' },
|
||
{ title: '发布时间', key: 'time' },
|
||
{ title: '状态', key: 'status' }
|
||
])
|
||
</script>
|