vome-core 0.1.76 → 0.1.78

package/dist/admin/api/client.js

@@ -1,10 +1,9 @@
 import { toast } from "vue-sonner";
-import { config } from "#vome-host/config";
-import { configureClient, fetchPackagedEpsJson } from "../../client/configure";
+import { configureClient, fetchPackagedEpsJson, getClientBaseUrl } from "../../client/configure";
 export function apiUrl(path) {
   if (/^https?:\/\//.test(path))
     return path;
-  const base = config.baseUrl.replace(/\/$/, "");
+  const base = getClientBaseUrl().replace(/\/$/, "");
   const p = path.startsWith("/") ? path : `/${path}`;
   return `${base}${p}`;
 }

package/dist/admin/components/layout/vm-app-header.vue

@@ -0,0 +1,341 @@
+<template>
+  <div class="vm-header">
+    <header class="vm-header__bar">
+      <div class="vm-header__tools">
+        <button
+          v-if="browser.isMini"
+          type="button"
+          class="vm-header__icon-btn"
+          title="菜单"
+          @click="app.setMobileOpen(true)"
+        >
+          <i class="ri-menu-line" />
+        </button>
+        <button
+          v-else
+          type="button"
+          class="vm-header__icon-btn"
+          title="折叠侧栏"
+          @click="app.toggleSidebarFold()"
+        >
+          <i :class="app.sidebarFold ? 'ri-menu-unfold-line' : 'ri-menu-fold-line'" />
+        </button>
+        <button
+          type="button"
+          class="vm-header__icon-btn"
+          title="上一页"
+          @click="goBack"
+        >
+          <i class="ri-arrow-go-back-line" />
+        </button>
+        <button
+          type="button"
+          class="vm-header__icon-btn"
+          title="刷新页面"
+          @click="reloadPage"
+        >
+          <i class="ri-refresh-line" />
+        </button>
+        <button
+          type="button"
+          class="vm-header__icon-btn"
+          title="首页"
+          @click="goHome"
+        >
+          <i class="ri-home-4-line" />
+        </button>
+
+        <!-- 移动端不显示多页签，避免挤占工具栏 -->
+        <vm-tags-view v-if="!browser.isMini" />
+      </div>
+
+      <div class="vm-header__right">
+        <button
+          type="button"
+          class="vm-header__icon-btn"
+          :title="theme.themeId === 'dark' ? locale.t('header.themeLight', '浅色') : locale.t('header.themeDark', '深色')"
+          @click="toggleTheme"
+        >
+          <i :class="theme.themeId === 'dark' ? 'ri-sun-line' : 'ri-moon-line'" />
+        </button>
+
+        <DropdownMenu :modal="false">
+          <DropdownMenuTrigger as-child>
+            <button
+              type="button"
+              class="vm-header__icon-btn vm-header__locale-btn"
+              :title="locale.currentLang?.name || locale.locale"
+              :disabled="localeSwitching"
+            >
+              <span class="vm-header__flag" aria-hidden="true">
+                {{ locale.currentLang?.flag || '🏳️' }}
+              </span>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="vm-header__locale-menu">
+            <DropdownMenuItem
+              v-for="lang in locale.langs"
+              :key="lang.code"
+              class="vm-header__locale-item"
+              :class="{ 'is-active': locale.locale === lang.code }"
+              :disabled="localeSwitching"
+              @click="switchLocale(lang.code)"
+            >
+              <span class="vm-header__flag" aria-hidden="true">
+                {{ lang.flag || '🏳️' }}
+              </span>
+              <span class="vm-header__locale-label">{{ lang.name }}</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <button type="button" class="vm-header__user">
+              <span class="vm-header__avatar">
+                {{ (user.username || 'A').slice(0, 1).toUpperCase() }}
+              </span>
+              <span class="vm-header__name">{{ user.username }}</span>
+              <i class="ri-arrow-down-s-line" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" class="w-44">
+            <DropdownMenuLabel class="text-xs font-normal text-muted-foreground">
+              {{ user.username }}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              class="text-xs"
+              :disabled="loggingOut"
+              @click="logout"
+            >
+              <i class="ri-logout-box-r-line" />
+              {{
+                loggingOut
+                  ? '退出中…'
+                  : locale.t('header.logout', '退出登录')
+              }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { api } from '../../api/client'
+import { getAdminShellHooks } from '../../lib/shell'
+import { useThemeStore } from '../../stores/theme'
+import { useLocaleStore } from '../../stores/locale'
+
+defineOptions({ name: 'vm-app-header' })
+
+const app = useAppStore()
+const theme = useThemeStore()
+const locale = useLocaleStore()
+const user = useUserStore()
+const tags = useTagsStore()
+const router = useRouter()
+const { browser } = useBrowser()
+
+const loggingOut = ref(false)
+const localeSwitching = ref(false)
+
+async function switchLocale(code: string) {
+  if (localeSwitching.value) return
+  localeSwitching.value = true
+  try {
+    await locale.setLocale(code)
+  } finally {
+    localeSwitching.value = false
+  }
+}
+
+async function logout() {
+  if (loggingOut.value) return
+  loggingOut.value = true
+  try {
+    await api.logout()
+  } finally {
+    const hooks = getAdminShellHooks()
+    await hooks.onLogoutCleanup?.()
+    user.logout()
+    tags.clear()
+    hooks.resetMenuRoutes?.()
+    // 硬跳转：卸掉 Layout 与动态路由残留，避免 URL 已是 /login 仍停在壳层
+    location.href = '/login'
+  }
+}
+
+function toggleTheme() {
+  theme.setTheme(theme.themeId === 'dark' ? 'light' : 'dark')
+}
+
+function goBack() {
+  if (window.history.length > 1) router.back()
+  else void router.push('/')
+}
+
+function reloadPage() {
+  void app.reloadView()
+}
+
+function goHome() {
+  void router.push('/')
+}
+</script>
+
+<style lang="scss" scoped>
+.vm-header {
+  flex-shrink: 0;
+  /* 顶栏只要上边距，贴紧下方内容区（不要下边距） */
+  margin: 12px 0 0;
+  background: color-mix(in srgb, var(--background) 88%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.vm-header__bar {
+  display: flex;
+  /* 与按钮/Tab 同高，避免顶栏底部多出一截被当成「上边距」 */
+  height: 32px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  /* 左右与内容区 --vm-gutter 对齐 */
+  padding: 0 12px;
+}
+
+.vm-header__tools {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 4px;
+}
+
+.vm-header__right {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.vm-header__icon-btn {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 10px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
+    color: var(--foreground);
+  }
+
+  &:active {
+    background: color-mix(in srgb, var(--muted) 45%, var(--foreground) 18%);
+  }
+}
+
+.vm-header__locale-btn {
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+.vm-header__locale-menu {
+  min-width: 0 !important;
+  width: max-content;
+  max-width: 160px;
+}
+
+.vm-header__flag {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.vm-header__locale-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+
+  &.is-active {
+    background: color-mix(in srgb, var(--brand) 14%, transparent);
+    color: var(--brand);
+  }
+
+  &.is-active:focus,
+  &.is-active:hover {
+    background: color-mix(in srgb, var(--brand) 20%, transparent);
+    color: var(--brand);
+  }
+}
+
+.vm-header__locale-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vm-header__user {
+  display: inline-flex;
+  height: 32px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px 0 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--muted);
+  }
+
+  > i {
+    font-size: 14px;
+    opacity: 0.45;
+  }
+}
+
+.vm-header__avatar {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--brand-soft);
+  color: var(--brand);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.vm-header__name {
+  display: none;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+
+  @media (min-width: 640px) {
+    display: inline;
+  }
+}
+</style>

package/dist/admin/components/layout/vm-app-sidebar.vue

@@ -0,0 +1,187 @@
+<template>
+  <aside v-if="!browser.isMini" class="vm-sidebar" :class="{ 'is-collapsed': collapsed }">
+    <div class="vm-sidebar__brand">
+      <img :src="logoSrc" alt="" class="vm-sidebar__logo" />
+      <span v-if="!collapsed" class="vm-sidebar__title">{{ appName }}</span>
+    </div>
+    <vm-sidebar-nav :menus="user.navMenus" :collapsed="collapsed" />
+  </aside>
+
+  <!-- 移动端抽屉：Sheet 传送到 body，样式用下方非 scoped 全局类 -->
+  <Sheet :open="app.mobileOpen" @update:open="app.setMobileOpen">
+    <SheetContent side="left" class="vm-sidebar-sheet">
+      <SheetHeader class="vm-sidebar-sheet__head">
+        <img :src="logoSrc" alt="" class="vm-sidebar-sheet__logo" />
+        <SheetTitle class="vm-sidebar-sheet__title">{{ appName }}</SheetTitle>
+      </SheetHeader>
+      <div class="vm-sidebar-sheet__nav">
+        <vm-sidebar-nav :menus="user.navMenus" mobile />
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
+
+<script setup lang="ts">
+import { getAdminShellBranding } from '../../lib/shell'
+
+defineOptions({ name: 'vm-app-sidebar' })
+
+const app = useAppStore()
+const user = useUserStore()
+const route = useRoute()
+const { browser } = useBrowser()
+
+const collapsed = computed(() => !browser.isMini && app.sidebarFold)
+const shell = getAdminShellBranding()
+/** 彩底侧栏始终用浅色 logo */
+const logoSrc = shell.logoLight
+const appName = computed(() => shell.appName)
+
+// 回到桌面断点时关掉抽屉；勿在 isMini 下监听 screen 变化强关（开抽屉去滚动条会触发断点抖动）
+watch(
+  () => browser.isMini,
+  (mini) => {
+    if (!mini) app.setMobileOpen(false)
+  },
+)
+
+watch(
+  () => route.path,
+  () => {
+    if (browser.isMini) app.setMobileOpen(false)
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.vm-sidebar {
+  position: relative;
+  z-index: 20;
+  display: flex;
+  width: 268px;
+  height: 100%;
+  flex-shrink: 0;
+  flex-direction: column;
+  overflow: visible;
+  background: var(--sidebar);
+  color: var(--sidebar-foreground);
+  transition: width 0.2s ease;
+
+  &.is-collapsed {
+    width: 80px;
+    overflow: visible;
+
+    .vm-sidebar__logo {
+      height: 28px;
+    }
+  }
+}
+
+.vm-sidebar__brand {
+  display: flex;
+  height: 84px;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 12px;
+  padding: 0 14px;
+
+  .is-collapsed & {
+    justify-content: center;
+    padding: 0;
+  }
+}
+
+.vm-sidebar__logo {
+  height: 24px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.vm-sidebar__title {
+  display: flex;
+  height: 60px;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* 与 60px logo 视觉同高（大写字面接近 logo） */
+  font-size: 28px !important;
+  font-weight: 1000 !important;
+  line-height: 1 !important;
+  letter-spacing: -0.04em;
+  color: #fff !important;
+}
+</style>
+
+<!-- Sheet 经 Portal 挂到 body，scoped 无法稳定命中，必须用全局类 -->
+<style lang="scss">
+.vm-sidebar-sheet {
+  width: min(280px, 85vw) !important;
+  max-width: 85vw !important;
+  height: 100% !important;
+  padding: 0 !important;
+  gap: 0 !important;
+  border: none !important;
+  background: var(--sidebar) !important;
+  color: #fff !important;
+  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18) !important;
+
+  /* 关闭按钮：蓝底上用白 */
+  > button {
+    color: rgba(255, 255, 255, 0.92) !important;
+    opacity: 1;
+
+    &:hover {
+      opacity: 0.85;
+      background: rgba(255, 255, 255, 0.12);
+    }
+  }
+}
+
+.vm-sidebar-sheet__head {
+  display: flex !important;
+  height: 64px;
+  flex-shrink: 0;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 10px;
+  padding: 0 44px 0 16px;
+  margin: 0 !important;
+  text-align: left !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.vm-sidebar-sheet__logo {
+  height: 28px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.vm-sidebar-sheet__title {
+  display: flex !important;
+  height: auto !important;
+  align-items: center;
+  overflow: hidden;
+  font-size: 22px !important;
+  font-weight: 1000 !important;
+  line-height: 1 !important;
+  letter-spacing: -0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #fff !important;
+}
+
+.vm-sidebar-sheet__nav {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  /* 深色侧栏滚动条用 token 覆盖全局色 */
+  --scrollbar-thumb: rgba(255, 255, 255, 0.35);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.55);
+
+  .vm-nav {
+    height: 100%;
+  }
+}
+</style>