86 lines
5.3 KiB
Vue
86 lines
5.3 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 max-w-screen-xl py-8 flex gap-8">
|
|
<!-- Sidebar -->
|
|
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-24">
|
|
<!-- User Brief -->
|
|
<div class="p-6 border-b border-slate-100 bg-slate-50/50">
|
|
<div class="flex items-center gap-4">
|
|
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
|
|
class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
|
|
<div class="overflow-hidden">
|
|
<div class="font-bold text-slate-900 truncate">Felix Demo</div>
|
|
<div class="text-xs text-slate-500">ID: 9527330</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menus -->
|
|
<nav class="p-4 space-y-1">
|
|
<router-link to="/me" exact-active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-home text-lg"></i>
|
|
<span>概览</span>
|
|
</router-link>
|
|
<router-link to="/me/orders" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-shopping-bag text-lg"></i>
|
|
<span>我的订单</span>
|
|
</router-link>
|
|
<router-link to="/me/wallet" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-wallet text-lg"></i>
|
|
<span>我的钱包</span>
|
|
</router-link>
|
|
<router-link to="/me/library" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-book text-lg"></i>
|
|
<span>已购内容</span>
|
|
</router-link>
|
|
<router-link to="/me/favorites" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-heart text-lg"></i>
|
|
<span>我的收藏</span>
|
|
</router-link>
|
|
<router-link to="/me/likes" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-thumbs-up text-lg"></i>
|
|
<span>我的点赞</span>
|
|
</router-link>
|
|
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-bell text-lg"></i>
|
|
<span>消息中心</span>
|
|
</router-link>
|
|
<div class="my-2 border-t border-slate-100"></div>
|
|
<router-link to="/me/profile" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-user text-lg"></i>
|
|
<span>个人资料</span>
|
|
</router-link>
|
|
<router-link to="/me/security" active-class="bg-primary-50 text-primary-600 font-semibold"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
|
<i class="pi pi-shield text-lg"></i>
|
|
<span>账号安全</span>
|
|
</router-link>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-grow min-w-0">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<AppFooter />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppFooter from '../components/AppFooter.vue';
|
|
import TopNavbar from '../components/TopNavbar.vue';
|
|
</script>
|