create-lumal-admin 0.0.4-beta → 0.0.5-beta

package/templates/base/src/router/index.ts

@@ -0,0 +1,86 @@
+import type { LumalLayoutTabItem } from '@lumal/core/layout'
+import type { LumalMenuInputRecord, SidebarMenuItem } from '@lumal/core/router'
+import type { RouteRecordRaw, RouterHistory } from 'vue-router'
+import { setupPermissionGuard } from '@lumal/core/permission'
+import { createMenuRouteRuntime } from '@lumal/core/router'
+import { shallowRef } from 'vue'
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { appConfig } from '../app.config'
+import { application, permissionStore } from '../services/session'
+import { viewComponents } from './views'
+
+/***********************路由初始化*********************/
+export const routeError = shallowRef('')
+export function createAdminRouter(history?: RouterHistory) {
+  const targetRouter = createRouter({
+    history: history ?? (appConfig.routerMode === 'history' ? createWebHistory(import.meta.env.BASE_URL) : createWebHashHistory(import.meta.env.BASE_URL)),
+    routes: [
+      { path: '/login', name: 'Login', component: () => import('../views/auth/LoginView.vue'), meta: { layout: 'public', requireLogin: false, title: '登录' } },
+      { path: '/', redirect: '/dashboard' },
+      { path: '/403', component: () => import('../views/error/ForbiddenView.vue'), meta: { title: '无权限' } },
+      { path: '/404', component: () => import('../views/error/NotFoundView.vue'), meta: { title: '页面不存在' } },
+      { path: '/:pathMatch(.*)*', name: 'CatchAll', component: () => import('../views/error/NotFoundView.vue') },
+    ],
+  })
+  const runtime = createMenuRouteRuntime({
+    router: {
+      addRoute: route => targetRouter.addRoute(route as RouteRecordRaw),
+      getRoutes: () => targetRouter.getRoutes(),
+      hasRoute: name => targetRouter.hasRoute(name),
+      removeRoute: name => targetRouter.removeRoute(name),
+    },
+    componentResolver: name => viewComponents[name],
+    hasPermission: values => permissionStore.hasPermission(values, 'every'),
+    hasRole: values => permissionStore.hasRole(values, 'some'),
+    loadRemoteMenus: async () => {
+      await application.initialize()
+      return application.menus.value as unknown as LumalMenuInputRecord[]
+    },
+  })
+  application.onReset((expired) => {
+    runtime.resetRemote()
+    if (expired && targetRouter.currentRoute.value.path !== '/login')
+      void targetRouter.replace({ path: '/login', query: { redirect: targetRouter.currentRoute.value.fullPath } })
+  })
+
+  targetRouter.beforeEach(async (to) => {
+    if (!application.isAuthenticated())
+      return to.path === '/login' ? true : { path: '/login', query: { redirect: to.fullPath } }
+    const rematch = !runtime.remoteLoaded
+    try {
+      await runtime.loadRemote()
+      routeError.value = ''
+    }
+    catch (reason) {
+      routeError.value = reason instanceof Error ? reason.message : '菜单加载失败'
+      application.reset()
+      return { path: '/login', query: { redirect: to.fullPath } }
+    }
+    if (to.path === '/login' || to.path === '/')
+      return runtime.firstAccessiblePath || '/403'
+    if (rematch)
+      return to.fullPath
+    return to.name === 'CatchAll' ? '/404' : true
+  })
+  setupPermissionGuard(targetRouter, permissionStore, {
+    isAuthenticated: application.isAuthenticated,
+    mode: 'every',
+    roleMode: 'some',
+    requireLoginByDefault: true,
+    noAccessRedirect: '/403',
+  })
+  return { router: targetRouter, runtime }
+}
+
+const { router, runtime } = createAdminRouter()
+export { router }
+export function createAdminSidebarMenus(): SidebarMenuItem[] {
+  // ready 使非响应式菜单运行时在退出和初始化完成后重新计算。
+  return application.ready.value ? runtime.sidebarMenus : []
+}
+export function createAdminTabs(): LumalLayoutTabItem[] {
+  return runtime.routes.filter(route => route.meta.affixTab === true
+    && permissionStore.hasPermission(route.meta.permissions, 'every')
+    && permissionStore.hasRole(route.meta.roles, 'some'))
+    .map(route => ({ path: route.path, title: route.meta.title, closable: false }))
+}

package/templates/base/src/router/views.ts

@@ -0,0 +1,16 @@
+import type { LumalMenuRecord } from '@lumal/core/router'
+
+export interface FeatureModule {
+  menus: LumalMenuRecord[]
+  views: Record<string, () => Promise<unknown>>
+}
+
+const modules = import.meta.glob<FeatureModule>('../modules/*.ts', { eager: true })
+export const localMenus: LumalMenuRecord[] = [
+  { path: '/dashboard', name: 'Dashboard', component: 'dashboard/index', meta: { title: '工作台', icon: 'app:dashboard', affixTab: true, keepAlive: true } },
+  ...Object.values(modules).flatMap(module => module.menus),
+]
+export const viewComponents: Record<string, () => Promise<unknown>> = {
+  'dashboard/index': () => import('../views/dashboard/DashboardView.vue'),
+  ...Object.assign({}, ...Object.values(modules).map(module => module.views)),
+}

package/templates/base/src/services/access.ts

@@ -0,0 +1,2 @@
+// 单一权限 Store，由实际会话响应填充，不能持久化演示权限。
+export { permissionStore } from './session'

package/templates/base/src/services/contracts.ts

@@ -0,0 +1,29 @@
+import type { AuthSessionData } from '@lumal/core/auth'
+import type { LumalMenuRecord } from '@lumal/core/router'
+
+export interface LoginInput { username: string, password: string }
+export interface CurrentUser { id: string, name: string, username: string }
+export interface AccessSnapshot { permissions: string[], roles: string[] }
+export type DataRow = Record<string, unknown>
+export interface ListInput { page: number, pageSize: number, query: DataRow }
+export interface PageResult { items: DataRow[], total: number }
+
+// 应用协议由 Local/HTTP 共同实现，后端包装和字段转换不进入 Core。
+export interface ApplicationService {
+  login: (input: LoginInput, signal: AbortSignal) => Promise<AuthSessionData>
+  getUser: (signal: AbortSignal) => Promise<CurrentUser>
+  getAccess: (signal: AbortSignal) => Promise<AccessSnapshot>
+  getMenus: (signal: AbortSignal) => Promise<LumalMenuRecord[]>
+  logout: (accessToken: string) => Promise<void>
+  clearCache: () => void
+  list: (resource: string, input: ListInput) => Promise<PageResult>
+  save: (resource: string, model: DataRow, id?: string) => Promise<unknown>
+  remove: (resource: string, id: string) => Promise<void>
+}
+
+export interface ServiceContext {
+  getSession: () => AuthSessionData | null
+  getSignal: () => AbortSignal
+  setSession: (value: AuthSessionData) => void
+  expire: () => Promise<void>
+}

package/templates/base/src/services/preferences.ts

@@ -0,0 +1,41 @@
+import type { LumalPreferencesDefaults } from '@lumal/core/theme'
+import { createPreferencesStore } from '@lumal/core/theme'
+import { appConfig } from '../app.config'
+
+export const adminPreferenceDefaults = {
+  app: { dynamicTitle: true, layout: 'sidebar-nav' },
+  breadcrumb: { enable: true, hideOnlyOne: false, showHome: true, showIcon: true },
+  header: { globalSearch: true },
+  shortcutKeys: { globalSearch: true },
+  sidebar: { width: 220 },
+  tabbar: {
+    cache: appConfig.preset !== 'minimal',
+    draggable: true,
+    enable: appConfig.preset !== 'minimal',
+    maxCount: 0,
+    middleClickToClose: true,
+    persist: true,
+    showIcon: true,
+    showMaximize: true,
+    showMore: true,
+    showRefresh: true,
+    styleType: 'chrome',
+    visitHistory: true,
+    wheelable: true,
+  },
+  theme: { fontSize: 14 },
+  transition: { enable: true, name: 'fade-side' },
+} satisfies LumalPreferencesDefaults
+
+const preferencesStore = createPreferencesStore({
+  defaults: adminPreferenceDefaults,
+  storage: localStorage,
+  storageKey: 'lumal-admin:preferences',
+})
+
+export const adminPreferences = preferencesStore.state
+export const adminResolvedThemeMode = preferencesStore.resolvedThemeMode
+
+export function patchAdminPreferences(preferences: Parameters<typeof preferencesStore.patch>[0]): void {
+  preferencesStore.patch(preferences)
+}

package/templates/base/src/services/session-runtime.ts

@@ -0,0 +1,137 @@
+import type { LumalMenuRecord } from '@lumal/core/router'
+import type { ApplicationService, CurrentUser, LoginInput, ServiceContext } from './contracts'
+import { createAuthSession } from '@lumal/core/auth'
+import { createPermissionStore } from '@lumal/core/permission'
+import { readonly, shallowRef } from 'vue'
+
+export function createApplicationSession(
+  createService: (context: ServiceContext) => ApplicationService,
+  storage: Storage,
+  tabStorage?: Storage,
+) {
+  const permissionStore = createPermissionStore()
+  const user = shallowRef<CurrentUser | null>(null)
+  const menus = shallowRef<LumalMenuRecord[]>([])
+  const ready = shallowRef(false)
+  const error = shallowRef('')
+  const resetHandlers = new Set<(expired: boolean) => void>()
+  const tabStorageKey = 'lumal-admin:tabs'
+  let generation = 0
+  let controller = new AbortController()
+  let initializing: Promise<void> | undefined
+  const session = createAuthSession({ storage, tokenKey: 'lumal-admin:session' })
+  let service: ApplicationService
+
+  function reset(expired = false): void {
+    generation += 1
+    controller.abort()
+    controller = new AbortController()
+    initializing = undefined
+    ready.value = false
+    user.value = null
+    menus.value = []
+    permissionStore.clear()
+    session.clearToken()
+    service.clearCache()
+    tabStorage?.removeItem(tabStorageKey)
+    resetHandlers.forEach(handler => handler(expired))
+  }
+
+  service = createService({
+    getSession: session.getSession,
+    getSignal: () => controller.signal,
+    setSession: session.setSession,
+    expire: async () => reset(true),
+  })
+
+  /***********************会话初始化与隔离*********************/
+  function initialize(): Promise<void> {
+    if (ready.value || !session.isAuthenticated())
+      return Promise.resolve()
+    if (initializing)
+      return initializing
+    const version = generation
+    const signal = controller.signal
+    const pending = (async () => {
+      try {
+        const [nextUser, access, nextMenus] = await Promise.all([
+          service.getUser(signal),
+          service.getAccess(signal),
+          service.getMenus(signal),
+        ])
+        signal.throwIfAborted()
+        if (version !== generation)
+          throw new Error('会话已切换')
+        user.value = nextUser
+        permissionStore.setPermissions(access.permissions)
+        permissionStore.setRoles(access.roles)
+        menus.value = nextMenus
+        ready.value = true
+        error.value = ''
+      }
+      catch (reason) {
+        if (version === generation) {
+          reset()
+          error.value = reason instanceof Error ? reason.message : '会话初始化失败'
+        }
+        throw reason
+      }
+    })()
+    initializing = pending
+    void pending.finally(() => {
+      if (initializing === pending)
+        initializing = undefined
+    }).catch(() => {}) // 原始 Promise 仍向调用方传播异常，只消费 finally 分支。
+    return pending
+  }
+
+  async function login(input: LoginInput): Promise<void> {
+    reset()
+    const version = generation
+    const signal = controller.signal
+    error.value = ''
+    try {
+      const result = await service.login(input, signal)
+      signal.throwIfAborted()
+      if (version !== generation)
+        throw new Error('会话已切换')
+      session.setSession(result)
+      await initialize()
+    }
+    catch (reason) {
+      if (version === generation) {
+        reset()
+        error.value = reason instanceof Error ? reason.message : '登录失败'
+      }
+      throw reason
+    }
+  }
+
+  async function logout(): Promise<void> {
+    const token = session.getToken()
+    reset()
+    // 即使远端撤销失败，本地状态也已清理；错误交由界面反馈。
+    if (token)
+      await service.logout(token)
+  }
+
+  return {
+    currentUser: readonly(user),
+    error: readonly(error),
+    menus: readonly(menus),
+    ready: readonly(ready),
+    permissionStore,
+    session,
+    service,
+    tabStorageKey,
+    initialize,
+    isAuthenticated: session.isAuthenticated,
+    login,
+    logout,
+    reset,
+    onReset(handler: (expired: boolean) => void) {
+      resetHandlers.add(handler)
+      return () => resetHandlers.delete(handler)
+    },
+  }
+}

package/templates/base/src/services/session.ts

@@ -0,0 +1,14 @@
+import { createBackend } from './data-source'
+import { createApplicationSession } from './session-runtime'
+
+export const application = createApplicationSession(createBackend, localStorage, sessionStorage)
+export const {
+  currentUser,
+  initialize,
+  isAuthenticated,
+  login,
+  logout,
+  permissionStore,
+  service,
+  tabStorageKey: adminTabSnapshotStorageKey,
+} = application

package/templates/base/src/styles.scss

@@ -0,0 +1,178 @@
+:root {
+  color: var(--el-text-color-primary);
+  background: var(--el-bg-color-page);
+  font-family:
+    Inter,
+    "Segoe UI",
+    "Microsoft YaHei",
+    Arial,
+    sans-serif;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  overflow-x: hidden;
+}
+
+.lumal-admin-home {
+  display: grid;
+  gap: var(--lumal-page-gutter, 20px);
+  box-sizing: border-box;
+  padding: var(--lumal-page-gutter, 20px);
+}
+
+.lumal-admin-home__metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.lumal-admin-home__metric {
+  display: grid;
+  min-width: 0;
+  gap: 8px;
+  padding: 18px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--lumal-radius-base, 8px);
+  background: var(--el-bg-color);
+}
+
+.lumal-admin-home__metric strong {
+  color: var(--el-color-primary);
+  font-size: 28px;
+}
+
+.lumal-admin-home__metric small {
+  color: var(--el-text-color-secondary);
+}
+
+.lumal-admin-page {
+  box-sizing: border-box;
+  padding: var(--lumal-page-gutter, 20px);
+}
+
+.lumal-admin-page__list {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding-left: 18px;
+}
+
+.lumal-admin-page__item {
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.lumal-admin-header-actions {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 4px;
+}
+
+.lumal-admin-header-actions .el-button {
+  min-width: 44px;
+  min-height: 44px;
+  margin: 0;
+}
+
+.lumal-admin-header-actions__user {
+  max-width: 120px;
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lumal-admin-login {
+  display: grid;
+  min-height: 100dvh;
+  place-items: center;
+  padding: 24px;
+  background: var(--el-bg-color-page);
+}
+
+.lumal-admin-login__panel {
+  box-sizing: border-box;
+  width: min(400px, 100%);
+  padding: 32px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--lumal-radius-large, 12px);
+  background: var(--el-bg-color);
+  box-shadow: var(--lumal-shadow-dialog);
+}
+
+.lumal-admin-login__brand {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: var(--lumal-radius-base, 8px);
+  color: var(--el-color-white);
+  background: var(--el-color-primary);
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.lumal-admin-login h1 {
+  margin: 20px 0 6px;
+}
+
+.lumal-admin-login p,
+.lumal-admin-login small {
+  color: var(--el-text-color-secondary);
+}
+
+.lumal-admin-login .el-form {
+  margin: 24px 0 16px;
+}
+
+.lumal-admin-login .el-button {
+  width: 100%;
+  min-height: 44px;
+}
+
+.lumal-admin-login__error {
+  color: var(--el-color-danger) !important;
+  font-size: 13px;
+}
+
+@media (max-width: 900px) {
+  .lumal-admin-home__metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .lumal-admin-home,
+  .lumal-admin-page {
+    padding: 12px;
+  }
+
+  .lumal-admin-home__metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .lumal-admin-header-actions__user {
+    display: none;
+  }
+
+  .lumal-admin-login {
+    padding: 16px;
+  }
+
+  .lumal-admin-login__panel {
+    padding: 24px 20px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+  }
+}

package/templates/base/src/views/auth/LoginView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus'
+import { ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'
+import { reactive, shallowRef, useTemplateRef } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { routeError } from '../../router'
+import { demoAccount } from '../../services/data-source'
+import { application, login } from '../../services/session'
+
+/***********************登录状态*********************/
+const route = useRoute()
+const router = useRouter()
+const formRef = useTemplateRef<FormInstance>('formRef')
+const loading = shallowRef(false)
+const errorMessage = shallowRef('')
+const form = reactive({ username: demoAccount?.username ?? '', password: demoAccount?.password ?? '' })
+
+/***********************登录提交*********************/
+function resolveRedirect(): string {
+  const redirect = Array.isArray(route.query.redirect) ? route.query.redirect[0] : route.query.redirect
+  return redirect && redirect.startsWith('/') && !redirect.startsWith('//') && !redirect.startsWith('/login') ? redirect : '/dashboard'
+}
+
+async function handleSubmit(): Promise<void> {
+  if (loading.value) {
+    return
+  }
+
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const valid = await formRef.value?.validate()
+    if (valid === false) {
+      return
+    }
+
+    await login(form)
+    await router.replace(resolveRedirect())
+  }
+  catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '登录失败'
+  }
+  finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <main class="lumal-admin-login">
+    <section class="lumal-admin-login__panel">
+      <div class="lumal-admin-login__brand" aria-hidden="true">
+        L
+      </div>
+      <h1>Lumal Admin</h1>
+      <p>轻量后台基座</p>
+
+      <ElForm ref="formRef" :model="form" label-position="top" @submit.prevent="handleSubmit">
+        <ElFormItem label="用户名" prop="username" :rules="[{ required: true, message: '请输入用户名' }]">
+          <ElInput v-model="form.username" autocomplete="username" />
+        </ElFormItem>
+        <ElFormItem label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">
+          <ElInput v-model="form.password" type="password" show-password autocomplete="current-password" />
+        </ElFormItem>
+        <p v-if="errorMessage" class="lumal-admin-login__error" role="alert">
+          {{ errorMessage }}
+        </p>
+        <ElButton native-type="submit" type="primary" :loading="loading">
+          登录
+        </ElButton>
+      </ElForm>
+
+      <p v-if="routeError || application.error.value" role="alert">
+        {{ routeError || application.error.value }}
+      </p>
+      <small v-if="demoAccount">本地演示账号：{{ demoAccount.username }} / {{ demoAccount.password }}</small>
+    </section>
+  </main>
+</template>

package/templates/base/src/views/dashboard/DashboardView.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
+import { currentUser, permissionStore } from '../../services/session'
+
+/***********************会话摘要*********************/
+const startedAt = new Date().toLocaleDateString()
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <h1>工作台</h1>
+    <ElDescriptions :column="1" border>
+      <ElDescriptionsItem label="当前用户">
+        {{ currentUser?.name }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="角色">
+        {{ permissionStore.roles.join('、') }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="权限数">
+        {{ permissionStore.permissions.length }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="日期">
+        {{ startedAt }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </main>
+</template>

package/templates/base/src/views/error/ForbiddenView.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { LumalPage } from '@lumal/core/components'
+import { ElButton } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+/***********************路由操作*********************/
+const router = useRouter()
+
+function handleBackDashboardClick(): void {
+  void router.push('/dashboard')
+}
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <LumalPage
+      title="无权限"
+      description="当前账号没有访问该页面所需的权限。"
+    >
+      <ElButton type="primary" @click="handleBackDashboardClick">
+        返回工作台
+      </ElButton>
+    </LumalPage>
+  </main>
+</template>

package/templates/base/src/views/error/NotFoundView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { LumalPage } from '@lumal/core/components'
+import { ElButton } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+/***********************异常页导航*********************/
+const router = useRouter()
+</script>
+
+<template>
+  <main class="lumal-admin-page">
+    <LumalPage title="页面不存在" description="请检查地址，或返回工作台继续操作。">
+      <ElButton type="primary" @click="router.push('/dashboard')">
+        返回工作台
+      </ElButton>
+    </LumalPage>
+  </main>
+</template>