create-simpleadmin-ui 2.0.0

package/template/src/layouts/MainLayout.vue

@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { THEME_OPTIONS, useThemeStore, type ThemeId } from '@/stores/theme'
+import { useTagsViewStore } from '@/stores/tagsView'
+import { resetDynamicRoutes } from '@/router'
+import ChangePasswordDialog from '@/components/ChangePasswordDialog.vue'
+import ProfileEditDialog from '@/components/ProfileEditDialog.vue'
+import SidebarMenuItem from '@/components/SidebarMenuItem.vue'
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import TagsView from '@/components/TagsView.vue'
+import {
+  Fold,
+  Expand,
+  SwitchButton,
+  Bell,
+  Brush,
+  Lock,
+  ArrowDown,
+  User,
+} from '@element-plus/icons-vue'
+
+const collapsed = ref(false)
+const pwdVisible = ref(false)
+const profileVisible = ref(false)
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+const themeStore = useThemeStore()
+const tagsStore = useTagsViewStore()
+
+const active = computed(() => route.path)
+const sidebarMenus = computed(() => (userStore.menus || []).filter((m) => !m.meta?.hidden))
+
+function onThemeSelect(id: ThemeId) {
+  themeStore.setTheme(id)
+}
+
+async function onLogout() {
+  await userStore.logout()
+  tagsStore.reset()
+  resetDynamicRoutes()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="layout" :class="{ 'is-collapsed': collapsed }">
+    <aside class="aside">
+      <div class="brand">
+        <span class="brand__mark">S</span>
+        <div v-show="!collapsed" class="brand__text">
+          <strong>SimpleAdmin</strong>
+          <small>Control Center</small>
+        </div>
+      </div>
+
+      <el-scrollbar class="aside__scroll">
+        <el-menu
+          :default-active="active"
+          :collapse="collapsed"
+          :collapse-transition="false"
+          router
+          class="aside__menu"
+        >
+          <SidebarMenuItem v-for="item in sidebarMenus" :key="item.path + item.name" :item="item" />
+        </el-menu>
+      </el-scrollbar>
+    </aside>
+
+    <section class="main">
+      <header class="header">
+        <button class="icon-btn" type="button" @click="collapsed = !collapsed">
+          <el-icon :size="18">
+            <Fold v-if="!collapsed" />
+            <Expand v-else />
+          </el-icon>
+        </button>
+        <div class="header__crumb">
+          <span class="header__eyebrow">Workspace</span>
+          <AppBreadcrumb />
+        </div>
+        <div class="spacer" />
+
+        <el-dropdown trigger="click" @command="onThemeSelect">
+          <button class="icon-btn" type="button" title="切换主题">
+            <el-icon :size="18"><Brush /></el-icon>
+          </button>
+          <template #dropdown>
+            <el-dropdown-menu class="theme-menu">
+              <el-dropdown-item
+                v-for="t in THEME_OPTIONS"
+                :key="t.id"
+                :command="t.id"
+                :class="{ 'is-active-theme': themeStore.themeId === t.id }"
+              >
+                <span class="theme-swatch" :style="{ background: t.swatch }" />
+                <span>{{ t.label }}</span>
+                <span v-if="themeStore.themeId === t.id" class="theme-check">当前</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+
+        <button class="icon-btn" type="button" title="消息" @click="router.push('/system/message')">
+          <el-icon :size="18"><Bell /></el-icon>
+        </button>
+
+        <el-dropdown trigger="click">
+          <div class="user-chip user-chip--btn">
+            <span class="user-chip__avatar">
+              {{ (userStore.userInfo?.nickName || userStore.userInfo?.userName || 'A').slice(0, 1) }}
+            </span>
+            <div class="user-chip__meta">
+              <strong>{{ userStore.userInfo?.nickName || userStore.userInfo?.userName }}</strong>
+              <small>{{ userStore.userInfo?.roles?.[0] || 'user' }}</small>
+            </div>
+            <el-icon class="user-chip__caret"><ArrowDown /></el-icon>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :icon="User" @click="profileVisible = true">修改个人信息</el-dropdown-item>
+              <el-dropdown-item :icon="Lock" @click="pwdVisible = true">修改密码</el-dropdown-item>
+              <el-dropdown-item divided :icon="SwitchButton" @click="onLogout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </header>
+
+      <TagsView />
+
+      <main class="content">
+        <div class="content__wash" />
+        <div class="content__inner">
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="tagsStore.cachedNames">
+              <component :is="Component" />
+            </keep-alive>
+          </router-view>
+        </div>
+      </main>
+    </section>
+
+    <ChangePasswordDialog v-model="pwdVisible" />
+    <ProfileEditDialog v-model="profileVisible" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.layout {
+  display: flex;
+  min-height: 100vh;
+  background: var(--sa-surface);
+}
+
+.aside {
+  width: var(--sa-aside-w);
+  flex-shrink: 0;
+  background:
+    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--sa-accent) 18%, transparent), transparent 42%),
+    linear-gradient(180deg, #0f172a 0%, var(--sa-sidebar) 100%);
+  color: var(--sa-sidebar-text);
+  transition: width 0.28s ease;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid rgba(148, 163, 184, 0.08);
+}
+
+.layout.is-collapsed .aside {
+  width: var(--sa-aside-collapsed);
+}
+
+.brand {
+  height: var(--sa-header-h);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 18px;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.brand__mark {
+  width: 34px;
+  height: 34px;
+  border-radius: 11px;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  color: #042f2e;
+  background: linear-gradient(135deg, var(--sa-accent-bright), var(--sa-accent));
+  flex-shrink: 0;
+}
+
+.brand__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+  strong {
+    color: #f8fafc;
+    font-size: 15px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+  }
+  small {
+    color: #64748b;
+    font-size: 11px;
+    margin-top: 2px;
+  }
+}
+
+.aside__scroll {
+  flex: 1;
+  padding: 12px 10px 20px;
+}
+
+.aside__menu {
+  border-right: none !important;
+  background: transparent !important;
+  --el-menu-bg-color: transparent;
+  --el-menu-hover-bg-color: rgba(148, 163, 184, 0.1);
+  --el-menu-text-color: #94a3b8;
+  --el-menu-active-color: #f8fafc;
+  --el-menu-item-height: 44px;
+}
+
+:deep(.aside__menu .el-menu-item),
+:deep(.aside__menu .el-sub-menu__title) {
+  border-radius: 10px;
+  margin: 2px 0;
+}
+
+:deep(.aside__menu .el-menu-item.is-active) {
+  background: linear-gradient(90deg, color-mix(in srgb, var(--sa-accent) 28%, transparent), color-mix(in srgb, var(--sa-accent) 6%, transparent));
+  color: #f8fafc;
+  font-weight: 600;
+}
+
+.main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  height: var(--sa-header-h);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 20px;
+  background: var(--sa-header-bg);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--sa-border);
+  position: sticky;
+  top: 0;
+  z-index: 20;
+}
+
+.header__crumb {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.15;
+  min-width: 0;
+  max-width: min(560px, 48vw);
+}
+
+.header__eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--sa-ink-muted);
+  margin-bottom: 2px;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--sa-border);
+  border-radius: 10px;
+  background: var(--sa-panel);
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: var(--sa-ink-secondary);
+  transition: border-color 0.2s, color 0.2s, transform 0.2s;
+  flex-shrink: 0;
+  &:hover {
+    border-color: var(--sa-accent);
+    color: var(--sa-accent);
+    transform: translateY(-1px);
+  }
+}
+
+.spacer {
+  flex: 1;
+}
+
+.user-chip {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 10px 4px 4px;
+  border: 1px solid var(--sa-border);
+  border-radius: 999px;
+  background: var(--sa-panel);
+}
+
+.user-chip--btn {
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s;
+  &:hover {
+    border-color: var(--sa-accent);
+  }
+}
+
+.user-chip__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 13px;
+  color: #fff;
+  background: linear-gradient(135deg, var(--sa-accent-bright), var(--sa-accent));
+}
+
+.user-chip__meta {
+  display: none;
+  flex-direction: column;
+  line-height: 1.1;
+  padding-right: 2px;
+  strong {
+    font-size: 13px;
+    color: var(--sa-ink);
+  }
+  small {
+    font-size: 11px;
+    color: var(--sa-ink-muted);
+    margin-top: 2px;
+  }
+  @media (min-width: 900px) {
+    display: flex;
+  }
+}
+
+.user-chip__caret {
+  color: var(--sa-ink-muted);
+  font-size: 12px;
+}
+
+.content {
+  position: relative;
+  flex: 1;
+  overflow: auto;
+}
+
+.content__wash {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sa-accent) 14%, transparent), transparent 28%),
+    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sa-accent-hover) 10%, transparent), transparent 30%),
+    linear-gradient(180deg, var(--sa-wash-top) 0%, var(--sa-surface) 48%);
+}
+
+.content__inner {
+  position: relative;
+  padding: 20px 22px 28px;
+  min-height: calc(100vh - var(--sa-header-h) - 40px);
+}
+
+.sa-page-enter-active,
+.sa-page-leave-active {
+  transition: opacity 0.22s ease;
+}
+.sa-page-enter-from,
+.sa-page-leave-to {
+  opacity: 0;
+}
+</style>
+
+<style lang="scss">
+.theme-menu .el-dropdown-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 148px;
+}
+.theme-menu .el-dropdown-menu__item.is-active-theme {
+  color: var(--sa-accent);
+  font-weight: 600;
+}
+.theme-swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  flex-shrink: 0;
+}
+.theme-check {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--sa-ink-muted);
+  font-weight: 500;
+}
+</style>

package/template/src/main.ts

@@ -0,0 +1,27 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+import '@/styles/global.css'
+import App from './App.vue'
+import router from './router'
+import { permission } from '@/directives/permission'
+import { useThemeStore } from '@/stores/theme'
+import { useTagsViewStore } from '@/stores/tagsView'
+
+const app = createApp(App)
+const pinia = createPinia()
+app.use(pinia)
+useThemeStore(pinia).init()
+app.use(router)
+app.use(ElementPlus, { locale: zhCn })
+app.directive('permission', permission)
+
+router.afterEach((to) => {
+  if (to.path === '/login') {
+    useTagsViewStore().reset()
+  }
+})
+
+app.mount('#app')

package/template/src/router/index.ts

@@ -0,0 +1,198 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { get } from '@/utils/request'
+
+const Layout = () => import('@/layouts/MainLayout.vue')
+
+/** 静态路由（不含 catch-all，避免抢先匹配动态路由） */
+export const constantRoutes: RouteRecordRaw[] = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/login/LoginView.vue'),
+    meta: { title: '登录', public: true },
+  },
+  {
+    path: '/',
+    name: 'Root',
+    component: Layout,
+    redirect: '/index',
+    children: [
+      {
+        path: 'index',
+        name: 'Home',
+        component: () => import('@/views/home/HomeView.vue'),
+        meta: { title: '首页', icon: 'HomeFilled', affix: true },
+      },
+    ],
+  },
+]
+
+const viewModules = import.meta.glob('../views/**/*.vue')
+
+/** 后端 Component 到本地视图的兼容映射 */
+const componentAlias: Record<string, string> = {
+  'system/index/index': 'home/HomeView',
+}
+
+function resolveView(component?: string | null, routeName?: string) {
+  if (!component) return undefined
+  const mapped = componentAlias[component] || component
+  const candidates = [
+    `../views/${mapped}.vue`,
+    `../views/${mapped}/index.vue`,
+    `../views/${component}.vue`,
+    `../views/${component}/index.vue`,
+  ]
+  for (const key of candidates) {
+    const loader = viewModules[key]
+    if (!loader) continue
+    if (!routeName) return loader
+    // 为 keep-alive 写入与路由 name 一致的组件名
+    return () =>
+      (loader as () => Promise<{ default: { name?: string } }> )().then((mod) => {
+        if (mod?.default && routeName) {
+          mod.default.name = routeName
+        }
+        return mod
+      })
+  }
+  return undefined
+}
+
+export interface RouterVo {
+  name: string
+  path: string
+  component?: string | null
+  meta: { title: string; icon?: string; hidden?: boolean }
+  children?: RouterVo[]
+}
+
+/**
+ * 将后端路由转为挂在 Root(Layout) 下的子路由。
+ */
+function flattenToLayoutChildren(nodes: RouterVo[], parentAbs = ''): RouteRecordRaw[] {
+  const result: RouteRecordRaw[] = []
+  for (const node of nodes) {
+    const segment = (node.path || '').replace(/^\//, '')
+    const abs = [parentAbs, segment].filter(Boolean).join('/')
+    const children = node.children?.length
+      ? flattenToLayoutChildren(node.children, abs)
+      : []
+
+    // 目录：只展开子节点
+    if (!node.component && children.length) {
+      result.push(...children)
+      continue
+    }
+
+    // 跳过与静态首页冲突的节点
+    if (abs === 'index' || abs === '') {
+      continue
+    }
+
+    const routeName = node.name || abs.replace(/\//g, '-')
+    const comp = resolveView(node.component, routeName)
+    result.push({
+      path: abs,
+      name: routeName,
+      component: comp || (() => import('@/views/error/NotFound.vue')),
+      meta: { ...(node.meta || {}), title: node.meta?.title || node.name },
+    })
+  }
+  return result
+}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: constantRoutes,
+})
+
+let dynamicAdded = false
+
+export async function setupDynamicRoutes() {
+  if (dynamicAdded) return
+  const routers = await get<RouterVo[]>('/auth/routers')
+  useUserStore().setMenus(routers || [])
+  const children = flattenToLayoutChildren(routers || [])
+  children.forEach((r) => router.addRoute('Root', r))
+
+  // catch-all 最后注册
+  if (!router.hasRoute('NotFound')) {
+    router.addRoute({
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('@/views/error/NotFound.vue'),
+      meta: { title: '未找到' },
+    })
+  }
+
+  dynamicAdded = true
+  useUserStore().routersLoaded = true
+}
+
+export function resetDynamicRoutes() {
+  dynamicAdded = false
+  useUserStore().routersLoaded = false
+  useUserStore().setMenus([])
+  // 移除动态子路由与 NotFound，保留 Login / Root / Home
+  router.getRoutes().forEach((r) => {
+    if (r.name && r.name !== 'Login' && r.name !== 'Root' && r.name !== 'Home') {
+      router.removeRoute(r.name)
+    }
+  })
+}
+
+router.beforeEach(async (to, _from, next) => {
+  const store = useUserStore()
+
+  if (to.path === '/login') {
+    if (store.token) {
+      next('/index')
+      return
+    }
+    next()
+    return
+  }
+
+  if (!store.token) {
+    next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
+    return
+  }
+
+  if (!store.userInfo) {
+    try {
+      await store.fetchInfo()
+    } catch {
+      store.logoutLocal()
+      resetDynamicRoutes()
+      next('/login')
+      return
+    }
+  }
+
+  if (!dynamicAdded) {
+    try {
+      await setupDynamicRoutes()
+      next({ path: to.fullPath, replace: true })
+      return
+    } catch (err) {
+      console.error('加载动态路由失败', err)
+      // 仍放行静态首页，避免卡在登录页
+      dynamicAdded = true
+      if (!router.hasRoute('NotFound')) {
+        router.addRoute({
+          path: '/:pathMatch(.*)*',
+          name: 'NotFound',
+          component: () => import('@/views/error/NotFound.vue'),
+        })
+      }
+      next({ path: to.path === '/' ? '/index' : to.fullPath, replace: true })
+      return
+    }
+  }
+
+  next()
+})
+
+export default router