feat(portal): enhance creator dashboard and order management with new layout and features
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user