89 lines
4.5 KiB
Vue
89 lines
4.5 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col bg-slate-50">
|
|
<TopNavbar />
|
|
<main class="flex-grow pt-16">
|
|
<div class="mx-auto flex gap-8 h-full" :class="isFullWidth ? 'max-w-none px-0 py-0' : 'max-w-screen-xl'">
|
|
<!-- Creator Sidebar (Dark Theme) -->
|
|
<aside class="w-[280px] flex-shrink-0 hidden lg:block" v-if="!isFullWidth">
|
|
<div
|
|
class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col">
|
|
<!-- Header -->
|
|
<div class="p-6 border-b border-slate-800">
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg">
|
|
<i class="pi pi-palette"></i>
|
|
</div>
|
|
<div>
|
|
<div class="font-bold text-white leading-tight">创作者中心</div>
|
|
<div class="text-xs text-slate-500 mt-1">Creator Studio</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menus -->
|
|
<nav class="p-4 space-y-1 flex-1">
|
|
<router-link to="/creator"
|
|
exact-active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
|
|
<i class="pi pi-th-large text-lg group-hover:scale-110 transition-transform"></i>
|
|
<span class="font-medium">管理概览</span>
|
|
</router-link>
|
|
|
|
<div class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4">内容与交易</div>
|
|
|
|
<router-link to="/creator/contents"
|
|
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
|
|
<i class="pi pi-file-edit text-lg group-hover:scale-110 transition-transform"></i>
|
|
<span class="font-medium">内容管理</span>
|
|
</router-link>
|
|
<router-link to="/creator/orders"
|
|
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
|
|
<i class="pi pi-shopping-cart text-lg group-hover:scale-110 transition-transform"></i>
|
|
<span class="font-medium">订单管理</span>
|
|
</router-link>
|
|
|
|
<div class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4">配置</div>
|
|
|
|
<router-link to="/creator/settings"
|
|
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group">
|
|
<i class="pi pi-cog text-lg group-hover:scale-110 transition-transform"></i>
|
|
<span class="font-medium">频道设置</span>
|
|
</router-link>
|
|
</nav>
|
|
|
|
<!-- Footer Link -->
|
|
<div class="p-4 border-t border-slate-800">
|
|
<router-link to="/t/1"
|
|
class="flex items-center gap-2 px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">
|
|
<i class="pi pi-external-link"></i> 预览我的主页
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-grow min-w-0">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import AppFooter from '../components/AppFooter.vue';
|
|
import TopNavbar from '../components/TopNavbar.vue';
|
|
|
|
const route = useRoute();
|
|
const isFullWidth = computed(() => {
|
|
return ['creator-content-new', 'creator-content-edit'].includes(route.name);
|
|
});
|
|
</script>
|