chore: update auth and portal
This commit is contained in:
@@ -1,9 +1,18 @@
|
||||
<script setup>
|
||||
import TopNavbar from "../components/TopNavbar.vue";
|
||||
import AppFooter from "../components/AppFooter.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col bg-slate-50 relative overflow-hidden">
|
||||
<!-- Background Decor Blobs -->
|
||||
<div class="fixed top-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-100/40 rounded-full blur-[120px] -z-0"></div>
|
||||
<div class="fixed bottom-[-10%] left-[-10%] w-[30%] h-[40%] bg-purple-50/50 rounded-full blur-[100px] -z-0"></div>
|
||||
|
||||
<div
|
||||
class="fixed top-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-100/40 rounded-full blur-[120px] -z-0"
|
||||
></div>
|
||||
<div
|
||||
class="fixed bottom-[-10%] left-[-10%] w-[30%] h-[40%] bg-purple-50/50 rounded-full blur-[100px] -z-0"
|
||||
></div>
|
||||
|
||||
<TopNavbar class="relative z-10" />
|
||||
<main class="flex-grow pt-16 relative z-10">
|
||||
<router-view />
|
||||
@@ -11,8 +20,3 @@
|
||||
<AppFooter class="relative z-10" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNavbar from '../components/TopNavbar.vue';
|
||||
import AppFooter from '../components/AppFooter.vue';
|
||||
</script>
|
||||
|
||||
@@ -1,97 +1,137 @@
|
||||
<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="user.avatar || `https://api.dicebear.com/7.x/avataaars/svg?seed=${user.id || 'default'}`"
|
||||
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">{{ user.nickname || '用户' }}</div>
|
||||
<div class="text-xs text-slate-500">ID: {{ user.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menus -->
|
||||
<nav class="p-4 space-y-1">
|
||||
<router-link :to="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/me/coupons')" 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-ticket text-lg"></i>
|
||||
<span>我的优惠券</span>
|
||||
</router-link>
|
||||
<router-link :to="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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 { ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import AppFooter from '../components/AppFooter.vue';
|
||||
import TopNavbar from '../components/TopNavbar.vue';
|
||||
import { tenantPath } from '../utils/tenant';
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import AppFooter from "../components/AppFooter.vue";
|
||||
import TopNavbar from "../components/TopNavbar.vue";
|
||||
import { tenantPath } from "../utils/tenant";
|
||||
|
||||
const user = ref(JSON.parse(localStorage.getItem('user') || '{}'));
|
||||
const user = ref(JSON.parse(localStorage.getItem("user") || "{}"));
|
||||
const route = useRoute();
|
||||
const tenantRoute = (path) => tenantPath(path, route);
|
||||
</script>
|
||||
|
||||
<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="
|
||||
user.avatar ||
|
||||
`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.id || 'default'}`
|
||||
"
|
||||
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">
|
||||
{{ user.nickname || "用户" }}
|
||||
</div>
|
||||
<div class="text-xs text-slate-500">ID: {{ user.id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menus -->
|
||||
<nav class="p-4 space-y-1">
|
||||
<router-link
|
||||
:to="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/me/coupons')"
|
||||
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-ticket text-lg"></i>
|
||||
<span>我的优惠券</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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="tenantRoute('/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>
|
||||
|
||||
Reference in New Issue
Block a user