@usethink/cf-admin-fe 0.1.0 → 0.2.6

package/recipes/useAdminRequest.cookie.ts

@@ -0,0 +1,36 @@
+/**
+ * RECIPE — cookie 会话 adminRequest（cf-auth / Better Auth 风格）。
+ *
+ * 工具包一等路径（与 Bearer 对称）：
+ * - createAdminFlagSession — 本地守卫标志（不是 HTTP cookie）
+ * - createAdminRequest({ credentials: 'include', onSuccess 修复, onUnauthorized 清除 })
+ *
+ * PRODUCT 仍负责：健康探测、登录/登出、OAuth、ADMIN_* 允许列表、领域路径。
+ */
+import {
+  createAdminFlagSession,
+  createAdminRequest,
+} from '@usethink/cf-admin-fe/composables'
+import { createAdminUnauthorizedHandler } from '@usethink/cf-admin-fe/utils'
+
+// PRODUCT: 本地管理员守卫标志的存储 key
+export const adminFlagSession = createAdminFlagSession({
+  storageKey: 'cf_auth_admin_ok',
+})
+
+const handleUnauthorized = createAdminUnauthorizedHandler({
+  clearSession: () => adminFlagSession.clearSession(),
+  loginPath: '/admin/login',
+  defaultRedirectPath: '/admin',
+})
+
+export const adminRequest = createAdminRequest({
+  credentials: 'include',
+  resultMode: 'ok-envelope',
+  errorField: 'message',
+  onUnauthorized: handleUnauthorized,
+  // 任何管理员调用成功后修复缺失的标志（会话 cookie 已有效）
+  onSuccess: () => {
+    if (!adminFlagSession.readFlag()) adminFlagSession.markLoggedIn()
+  },
+})

package/recipes/useAdminRequest.ts

@@ -0,0 +1,37 @@
+/**
+ * RECIPE — 可注入的管理员 fetch（抽奖风格 ok-envelope）。
+ *
+ * Shop 风格：使用 `resultMode: 'http-ok'`、`errorField: 'error'`，并在领域
+ * API 方法中逐次调用传入 `token`（参见 cf-shop `api/admin.ts`）。
+ *
+ * 复制到 `src/composables/useAdminRequest.ts`。
+ */
+import {
+  createAdminRequest,
+  type AdminRequestFn,
+} from '@usethink/cf-admin-fe/composables'
+import { createAdminUnauthorizedHandler } from '@usethink/cf-admin-fe/utils'
+import { readAdminToken, useAdminAuth } from './useAdminAuth'
+
+// 接入产品会话清理 — shop 通常只删除 admin_token；
+// 抽奖产品可能调用完整业务会话清空。
+function clearProductSession() {
+  try {
+    useAdminAuth().clearToken()
+  } catch {
+    /* 忽略 */
+  }
+}
+
+const handleUnauthorized = createAdminUnauthorizedHandler({
+  clearSession: clearProductSession,
+  loginPath: '/admin/login',
+  defaultRedirectPath: '/admin',
+})
+
+export const adminRequest: AdminRequestFn = createAdminRequest({
+  getToken: () => readAdminToken(),
+  resultMode: 'ok-envelope',
+  errorField: 'message',
+  onUnauthorized: handleUnauthorized,
+})

package/src/components/AdminLoginShell.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * 仅提供管理端登录页的展示性外壳。
+ * 认证流程（token / 密码 / OTP / OAuth）由业务产品自行实现。
+ */
+defineProps<{
+  /** #title 插槽为空时的回退标题 */
+  title?: string
+  /** #subtitle 插槽为空时的回退副标题 */
+  subtitle?: string
+}>()
+</script>
+
+<template>
+  <div class="admin-login">
+    <div class="login-card">
+      <div v-if="$slots.title || $slots.subtitle || title || subtitle" class="login-header">
+        <slot name="title">
+          <h1 v-if="title" class="login-title">{{ title }}</h1>
+        </slot>
+        <slot name="subtitle">
+          <p v-if="subtitle" class="login-subtitle">{{ subtitle }}</p>
+        </slot>
+      </div>
+      <slot />
+      <div v-if="$slots.footer" class="login-footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/AdminMetadataDetail.vue

@@ -0,0 +1,121 @@
+<template>
+  <AdminModal v-model="innerVisible" :title="$t('adminLogs.metadataTitle')" max-width="640px">
+    <div v-if="log" class="detail-box">
+      <div class="detail-section">
+        <div class="detail-title">{{ $t('adminLogs.basicInfo') }}</div>
+        <div class="detail-row">
+          <span class="detail-label">{{ $t('adminLogs.labelAction') }}</span>
+          <span class="detail-value">{{ log.action }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">{{ $t('adminLogs.labelTargetType') }}</span>
+          <span class="detail-value">{{ log.targetType }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">{{ $t('adminLogs.labelTargetId') }}</span>
+          <span class="detail-value">{{ log.targetId }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">{{ $t('adminLogs.labelTime') }}</span>
+          <span class="detail-value">{{ formatDate(log.createdAt) }}</span>
+        </div>
+        <div class="detail-row">
+          <span class="detail-label">{{ $t('adminLogs.labelIpFingerprint') }}</span>
+          <span class="detail-value">{{ log.ipHash || '-' }}</span>
+        </div>
+      </div>
+      <div v-if="log.metadata && Object.keys(log.metadata).length > 0" class="detail-section">
+        <div class="detail-title">{{ $t('adminLogs.labelMetadata') }}</div>
+        <pre class="detail-json">{{ formatMetadata(log.metadata) }}</pre>
+      </div>
+    </div>
+  </AdminModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import AdminModal from './AdminModal.vue'
+import { formatDate } from '../utils/datetime'
+import { formatMetadata } from '../utils/format-metadata'
+
+export interface AdminLogEntry {
+  action: string
+  targetType: string
+  targetId: string
+  createdAt: string
+  ipHash?: string | null
+  metadata?: Record<string, unknown> | null
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: boolean
+  log: AdminLogEntry | null
+}>(), {
+  modelValue: false,
+  log: null,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const innerVisible = ref(false)
+
+watch(() => props.modelValue, (val) => {
+  innerVisible.value = val
+}, { immediate: true })
+
+watch(innerVisible, (val, wasVisible) => {
+  if (!val && wasVisible && props.modelValue) {
+    emit('update:modelValue', false)
+  }
+})
+</script>
+
+<style scoped>
+.detail-box {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.detail-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.detail-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--tg-hint, #9aa4b2);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.detail-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.55;
+}
+.detail-label {
+  flex-shrink: 0;
+  width: 100px;
+  color: var(--tg-hint, #9aa4b2);
+}
+.detail-value {
+  color: var(--tg-text, #f0f2f5);
+  word-break: break-all;
+}
+.detail-json {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: var(--r-sm, 6px);
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 12px;
+  line-height: 1.55;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--tg-text, #f0f2f5);
+}
+</style>

package/src/components/AdminShell.vue

@@ -0,0 +1,396 @@
+<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, getCurrentInstance } from 'vue'
+import { useAdminSidebar } from '../composables/useAdminSidebar'
+
+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()
+
+function tFallback(key: string, fallback: string): string {
+  const proxy = getCurrentInstance()?.proxy as { $t?: (k: string) => string } | undefined
+  try {
+    if (typeof proxy?.$t === 'function') {
+      const out = proxy.$t(key)
+      if (typeof out === 'string' && out !== key) return out
+    }
+  } catch {
+    /* 无 i18n */
+  }
+  return fallback
+}
+
+const resolvedLogoutLabel = computed(
+  () => props.logoutLabel || tFallback('adminLayout.logout', '退出'),
+)
+const resolvedToggleLabel = computed(
+  () => props.toggleSidebarLabel || tFallback('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>