quyun-v2/frontend/portal/src/layout/LayoutUser.vue

<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";

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-base text-content">
    <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-surface rounded-2xl shadow-sm border border-line overflow-hidden sticky top-24"
          >
            <!-- User Brief -->
            <div class="p-6 border-b border-line bg-surface-highlight">
              <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-surface shadow-sm"
                />
                <div class="overflow-hidden">
                  <div class="font-bold text-content truncate">
                    {{ user.nickname || "用户" }}
                  </div>
                  <div class="text-xs text-muted">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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content transition-colors"
              >
                <i class="pi pi-bell text-lg"></i>
                <span>消息中心</span>
              </router-link>
              <div class="my-2 border-t border-line"></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-muted hover:bg-surface-highlight hover:text-content 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-muted hover:bg-surface-highlight hover:text-content 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>