geo/apps/ops-web/src/layouts/AppShell.vue

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible breakpoint="lg" :trigger="null">
      <div class="ops-brand">
        <span v-if="!collapsed">省心推 · 运营</span>
        <span v-else>SXT</span>
      </div>
      <a-menu
        theme="light"
        mode="inline"
        :selected-keys="selectedKeys"
        :open-keys="openKeys"
        :items="menuItems"
        @update:open-keys="onOpenKeysChange"
        @click="onMenuClick"
      />
    </a-layout-sider>

    <a-layout>
      <a-layout-header class="ops-header">
        <a-button type="text" class="header-trigger" @click="collapsed = !collapsed">
          {{ collapsed ? "›" : "‹" }}
        </a-button>
        <span style="flex: 1" />
        <a-dropdown placement="bottomRight">
          <div class="user-dropdown-btn" style="cursor: pointer;">
            <div class="user-avatar">
              {{ auth.operator?.display_name?.charAt(0) ?? "U" }}
            </div>
            <span>{{ auth.operator?.display_name ?? "未登录" }}</span>
          </div>
          <template #overlay>
            <a-menu @click="onUserMenuClick">
              <a-menu-item key="profile">个人资料</a-menu-item>
              <a-menu-item key="logout">退出登录</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>

      <a-layout-content class="ops-shell-content">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {
  AuditOutlined,
  CrownOutlined,
  GlobalOutlined,
  SafetyCertificateOutlined,
  SettingOutlined,
  TeamOutlined,
} from "@ant-design/icons-vue";
import type { ItemType } from "ant-design-vue";
import { computed, h, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useAuthStore } from "@/stores/auth";

interface MenuLeaf {
  key: string;
  label: string;
  path: string;
}

const router = useRouter();
const route = useRoute();
const auth = useAuthStore();

const collapsed = ref(false);

const menuLeaves: MenuLeaf[] = [
  { key: "/admin-users", label: "用户管理", path: "/admin-users" },
  { key: "/kol-subscriptions", label: "订阅包审批", path: "/kol-subscriptions" },
  { key: "/site-domain-mappings", label: "站点映射", path: "/site-domain-mappings" },
  { key: "/accounts", label: "操作员管理", path: "/accounts" },
  { key: "/audits", label: "审计日志", path: "/audits" },
];

const menuItems = computed<ItemType[]>(() => [
  {
    key: "/admin-users",
    label: "用户管理",
    icon: () => h(TeamOutlined),
  },
  {
    key: "/kol-subscriptions",
    label: "订阅包审批",
    icon: () => h(CrownOutlined),
  },
  {
    key: "/site-domain-mappings",
    label: "站点映射",
    icon: () => h(GlobalOutlined),
  },
  {
    key: "system",
    label: "系统设置",
    icon: () => h(SettingOutlined),
    children: [
      {
        key: "/accounts",
        label: "操作员管理",
        icon: () => h(SafetyCertificateOutlined),
      },
      {
        key: "/audits",
        label: "审计日志",
        icon: () => h(AuditOutlined),
      },
    ],
  },
]);

const openKeys = ref<string[]>(["system"]);

function onOpenKeysChange(keys: string[]) {
  openKeys.value = keys;
}

const selectedKeys = computed(() => [route.path]);

function onMenuClick(info: { key: string | number }) {
  const item = menuLeaves.find((m) => m.key === info.key);
  if (item) void router.push(item.path);
}

function onUserMenuClick(info: { key: string | number }) {
  if (info.key === "logout") {
    auth.logout();
    void router.replace({ name: "login" });
  } else if (info.key === "profile") {
    void router.push({ name: "profile" });
  }
}

onMounted(() => {
  if (auth.isAuthenticated) {
    void auth.refreshSelf();
  }
});
</script>

<style scoped>
:deep(.ant-layout-sider) {
  background: #fff !important;
  border-right: 1px solid #f0f0f0;
}

.ops-brand {
  height: 40px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  margin: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.05em;
}

.ops-header {
  background: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 64px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 1;
  position: relative;
}

.header-trigger {
  font-size: 18px;
  color: #8c8c8c;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.header-trigger:hover {
  background-color: #f5f5f5;
  color: #141414;
}

.user-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #141414;
  font-weight: 500;
  border-radius: 6px;
  padding: 4px 8px;
  transition: all 0.2s;
}

.user-dropdown-btn:hover {
  background-color: #f5f5f5;
}

.user-avatar {
  background-color: #4f46e5;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
</style>