@usethink/cf-admin-fe 0.1.1 → 0.2.8

package/src/components/AdminShell.vue

@@ -0,0 +1,384 @@
+<template>
+  <div class="admin-layout">
+    <div
+      v-if="isMobile && sidebarOpen"
+      class="sidebar-overlay"
+      @click="closeSidebar"
+    />
+
+    <aside class="admin-sidebar" :class="{ 'sidebar-open': sidebarOpen }">
+      <div class="sidebar-brand">
+        <slot name="brand">{{ brand }}</slot>
+      </div>
+
+      <nav class="sidebar-nav" @click="isMobile && closeSidebar()">
+        <slot name="nav" :items="menuItems" :current-name="currentName" :on-nav="onNavClick">
+          <a
+            v-for="item in menuItems"
+            :key="item.to"
+            class="nav-item"
+            :class="{ active: currentName === item.name, ...(item.className ? { [item.className]: true } : {}) }"
+            :href="item.to"
+            :title="item.label"
+            @click.prevent="onNavClick(item.to)"
+          >
+            <span
+              v-if="item.iconHtml"
+              class="nav-icon"
+              v-html="item.iconHtml"
+            />
+            <span v-else class="nav-icon">{{ item.icon || '' }}</span>
+            <span class="nav-label">{{ item.label }}</span>
+          </a>
+        </slot>
+        <slot name="nav-extra" />
+      </nav>
+
+      <!-- 仅当产品显式提供 #sidebar-footer 时渲染（默认用户信息在顶栏右上，省侧栏高度） -->
+      <div v-if="$slots['sidebar-footer']" class="sidebar-footer">
+        <slot name="sidebar-footer" />
+      </div>
+    </aside>
+
+    <div class="admin-main" :class="{ 'sidebar-open': sidebarOpen }">
+      <header class="admin-header">
+        <div class="admin-header-left">
+          <button
+            v-if="isMobile"
+            class="btn-hamburger"
+            type="button"
+            :aria-label="resolvedToggleLabel"
+            @click="toggleSidebar"
+          >
+            <span class="hamburger-line" />
+            <span class="hamburger-line" />
+            <span class="hamburger-line" />
+          </button>
+          <h1 class="admin-header-title">
+            <slot name="title">{{ resolvedTitle }}</slot>
+          </h1>
+        </div>
+        <div class="admin-header-actions">
+          <slot name="header-actions" />
+          <div v-if="showUser" class="header-user" :title="userName">
+            <span class="header-user-avatar" aria-hidden="true">{{ userAvatar }}</span>
+            <span class="header-user-name">{{ userName }}</span>
+          </div>
+          <button
+            v-if="showLogout"
+            class="btn btn-ghost header-logout"
+            type="button"
+            @click="$emit('logout')"
+          >{{ resolvedLogoutLabel }}</button>
+        </div>
+      </header>
+
+      <main class="admin-content">
+        <slot />
+      </main>
+    </div>
+
+    <slot name="banner" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useAdminSidebar } from '../composables/useAdminSidebar'
+import { tKit } from '../utils/i18n'
+
+export type AdminShellMenuItem = {
+  name: string
+  to: string
+  label: string
+  /** 纯文本 / emoji 图标 */
+  icon?: string
+  /** HTML 实体图标（shop 使用 `&#x1F4CA;`）——尽可能优先使用文本图标 */
+  iconHtml?: string
+  className?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    brand?: string
+    menuItems?: AdminShellMenuItem[]
+    /** 当前激活的路由名；缺省时标题回退为 brand */
+    currentName?: string | null
+    pageTitle?: string
+    userName?: string
+    userAvatar?: string
+    /** 顶栏右上展示头像+名称（默认 true；侧栏底默认不再占位） */
+    showUser?: boolean
+    showLogout?: boolean
+    logoutLabel?: string
+    toggleSidebarLabel?: string
+  }>(),
+  {
+    brand: 'Admin',
+    menuItems: () => [],
+    currentName: null,
+    pageTitle: '',
+    userName: 'Admin',
+    userAvatar: 'A',
+    showUser: true,
+    showLogout: true,
+    logoutLabel: '',
+    toggleSidebarLabel: '',
+  },
+)
+
+const emit = defineEmits<{
+  logout: []
+  navigate: [to: string]
+}>()
+
+const { isMobile, sidebarOpen, toggleSidebar, closeSidebar } = useAdminSidebar()
+
+const resolvedLogoutLabel = computed(
+  () => props.logoutLabel || tKit('adminLayout.logout', '退出'),
+)
+const resolvedToggleLabel = computed(
+  () => props.toggleSidebarLabel || tKit('adminLayout.toggleSidebar', '菜单'),
+)
+
+const resolvedTitle = computed(() => {
+  if (props.pageTitle) return props.pageTitle
+  const item = props.menuItems.find((m) => m.name === props.currentName)
+  return item?.label || props.brand
+})
+
+function onNavClick(to: string) {
+  emit('navigate', to)
+}
+</script>
+
+<style scoped>
+.admin-layout {
+  display: flex;
+  height: 100vh;
+  background: var(--tg-bg, #0a0e17);
+  overflow: hidden;
+  color-scheme: dark;
+}
+
+.sidebar-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 90;
+}
+
+.admin-sidebar {
+  width: var(--admin-sidebar-w, 220px);
+  background: #1a1a2e;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset: 0 auto 0 0;
+  z-index: 100;
+  overflow-y: auto;
+  transform: translateX(0);
+  transition: transform 0.2s ease;
+}
+
+.sidebar-brand {
+  padding: 16px 14px;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 8px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px;
+  color: rgba(255, 255, 255, 0.72);
+  text-decoration: none;
+  font-size: 13px;
+  transition: background 0.15s ease, color 0.15s ease;
+  border-left: 3px solid transparent;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: #fff;
+}
+
+.nav-item.active {
+  background: rgba(255, 255, 255, 0.14);
+  color: #fff;
+  font-weight: 600;
+  border-left-color: var(--admin-accent, #f59e0b);
+}
+
+.nav-icon {
+  font-size: 16px;
+  width: 20px;
+  text-align: center;
+}
+
+.sidebar-footer {
+  padding: 12px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.admin-main {
+  flex: 1;
+  margin-left: var(--admin-sidebar-w, 220px);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.admin-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px var(--admin-content-pad, 12px);
+  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
+  backdrop-filter: saturate(180%) blur(12px);
+  background: rgba(var(--tg-bg-rgb, 10, 14, 23), 0.88);
+}
+
+.admin-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.admin-header-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 650;
+  color: var(--tg-text, #f0f2f5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.admin-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.header-user {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 160px;
+  min-width: 0;
+  padding: 2px 4px 2px 2px;
+  border-radius: 999px;
+}
+
+.header-user-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: var(--admin-accent, #f59e0b);
+  color: #111;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.header-user-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--tg-text, #f0f2f5);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-logout {
+  flex-shrink: 0;
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
+  border-radius: 6px;
+  color: var(--tg-hint, #9aa4b2);
+  background: transparent;
+  cursor: pointer;
+}
+
+.header-logout:hover {
+  color: var(--tg-text, #f0f2f5);
+  border-color: rgba(255, 255, 255, 0.22);
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.admin-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--admin-content-pad, 12px);
+}
+
+.btn-hamburger {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.hamburger-line {
+  display: block;
+  height: 2px;
+  width: 100%;
+  background: var(--tg-text, #f0f2f5);
+  border-radius: 1px;
+}
+
+@media (max-width: 1023px) {
+  .admin-sidebar {
+    transform: translateX(-100%);
+  }
+  .admin-sidebar.sidebar-open {
+    transform: translateX(0);
+  }
+  .admin-main {
+    margin-left: 0;
+  }
+  /* 窄屏顶栏优先保退出；名称可藏，头像仍可见 */
+  .header-user-name {
+    display: none;
+  }
+}
+</style>