feat(portal): enhance creator dashboard and order management with new layout and features

This commit is contained in:
2025-12-26 19:10:40 +08:00
parent b40c529cd8
commit 35b46386c7
6 changed files with 561 additions and 158 deletions

View File

@@ -1,7 +1,71 @@
<template>
<div class="p-8">
<h1 class="text-2xl font-bold mb-4">Creator Dashboard</h1>
<p class="text-slate-500">Welcome to the Creator Center.</p>
<p class="text-slate-400 mt-2">(Implementation pending based on PAGE_TENANT_MANAGEMENT.md)</p>
</div>
<div>
<div class="flex items-center justify-between mb-8">
<h1 class="text-2xl font-bold text-slate-900">管理概览</h1>
<div class="flex gap-4">
<router-link to="/creator/contents/new"
class="px-6 py-2.5 bg-primary-600 text-white rounded-lg font-bold hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200 cursor-pointer active:scale-95 flex items-center gap-2">
<i class="pi pi-plus"></i> 发布新内容
</router-link>
</div>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div v-for="metric in metrics" :key="metric.label"
class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow">
<div class="text-sm text-slate-500 mb-2">{{ metric.label }}</div>
<div class="flex items-baseline gap-2">
<span class="text-3xl font-bold text-slate-900">{{ metric.value }}</span>
<span class="text-xs font-bold" :class="metric.trend > 0 ? 'text-green-600' : 'text-red-600'">
<i class="pi" :class="metric.trend > 0 ? 'pi-arrow-up' : 'pi-arrow-down'"
style="font-size: 0.7rem"></i>
{{ Math.abs(metric.trend) }}%
</span>
</div>
<div class="text-xs text-slate-400 mt-2">{{ metric.subtext }}</div>
</div>
</div>
<!-- Pending Orders (Quick Access) -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
<h3 class="font-bold text-slate-900 mb-4">待处理事项</h3>
<div class="flex gap-4">
<div
class="flex-1 p-4 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-orange-100 transition-colors"
@click="$router.push('/creator/orders')">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-orange-200 text-orange-700 flex items-center justify-center"><i
class="pi pi-refresh"></i></div>
<div>
<div class="font-bold text-slate-900">退款申请</div>
<div class="text-xs text-orange-600">需要处理</div>
</div>
</div>
<div class="text-2xl font-bold text-orange-700">2</div>
</div>
<div
class="flex-1 p-4 bg-blue-50 border border-blue-100 rounded-xl flex items-center justify-between cursor-pointer hover:bg-blue-100 transition-colors">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-blue-200 text-blue-700 flex items-center justify-center"><i
class="pi pi-comments"></i></div>
<div>
<div class="font-bold text-slate-900">新私信</div>
<div class="text-xs text-blue-600">粉丝互动</div>
</div>
</div>
<div class="text-2xl font-bold text-blue-700">5</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const metrics = ref([
{ label: '总关注用户', value: '12,548', trend: 1.2, subtext: '昨日 +125' },
{ label: '累计总收益', value: '¥ 8,920.50', trend: 5.4, subtext: '近30天 +2,300' },
]);
</script>