create-simpleadmin-ui 2.0.0

package/template/src/stores/tagsView.ts

@@ -0,0 +1,161 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+/** 已打开的页签项 */
+export interface TagView {
+  /** 路由 path（不含 query） */
+  path: string
+  /** 完整路径（含 query） */
+  fullPath: string
+  /** 展示标题 */
+  title: string
+  /** 路由 name（与组件 name / keep-alive include 对齐） */
+  name?: string | symbol | null
+  /** 固定页签（如首页），不可关闭 */
+  affix?: boolean
+}
+
+const HOME_PATH = '/index'
+
+/**
+ * 多页签：记录已打开页面，支持关闭（首页固定不可关）。
+ */
+export const useTagsViewStore = defineStore('tagsView', () => {
+  const visited = ref<TagView[]>([
+    { path: HOME_PATH, fullPath: HOME_PATH, title: '首页', name: 'Home', affix: true },
+  ])
+
+  /**
+   * keep-alive 缓存的组件名列表（独立 ref，仅在集合变化时更新，避免无意义的新数组触发重挂载）。
+   */
+  const cachedNames = ref<string[]>(['Home'])
+
+  /**
+   * 按当前 visited 同步缓存名（内容不变则不写 ref）。
+   */
+  function syncCachedNames() {
+    const next = visited.value
+      .map((t) => (typeof t.name === 'string' ? t.name : ''))
+      .filter(Boolean)
+    const prev = cachedNames.value
+    if (prev.length === next.length && prev.every((n, i) => n === next[i])) {
+      return
+    }
+    cachedNames.value = next
+  }
+
+  /**
+   * 根据当前路由登记页签（已存在且内容相同则跳过，避免触发 keep-alive 重挂载）。
+   * @param route 当前路由
+   */
+  function addView(route: RouteLocationNormalizedLoaded) {
+    if (route.meta?.public) return
+    if (route.name === 'NotFound' || route.path.startsWith('/login')) return
+
+    const path = route.path
+    const title = (route.meta?.title as string) || (typeof route.name === 'string' ? route.name : path)
+    const affix = Boolean(route.meta?.affix) || path === HOME_PATH
+    const name = route.name
+    const existing = visited.value.find((t) => t.path === path)
+    if (existing) {
+      if (
+        existing.fullPath === route.fullPath &&
+        existing.title === title &&
+        existing.name === name &&
+        existing.affix === affix
+      ) {
+        return
+      }
+      existing.fullPath = route.fullPath
+      existing.title = title
+      existing.name = name
+      existing.affix = affix
+      syncCachedNames()
+      return
+    }
+
+    visited.value.push({
+      path,
+      fullPath: route.fullPath,
+      title,
+      name,
+      affix,
+    })
+    syncCachedNames()
+  }
+
+  /**
+   * 关闭指定 path 的页签。
+   * @param path 路由 path
+   * @returns 关闭后应跳转的 fullPath；若无需跳转返回 null
+   */
+  function closeView(path: string): string | null {
+    const idx = visited.value.findIndex((t) => t.path === path)
+    if (idx < 0) return null
+    const tag = visited.value[idx]
+    if (tag.affix) return null
+
+    visited.value.splice(idx, 1)
+    if (visited.value.length === 0) {
+      visited.value.push({
+        path: HOME_PATH,
+        fullPath: HOME_PATH,
+        title: '首页',
+        name: 'Home',
+        affix: true,
+      })
+      syncCachedNames()
+      return HOME_PATH
+    }
+    syncCachedNames()
+    const next = visited.value[idx] || visited.value[idx - 1]
+    return next?.fullPath ?? HOME_PATH
+  }
+
+  /**
+   * 关闭除固定页与当前页外的全部页签。
+   * @param currentPath 保留的当前 path
+   */
+  function closeOthers(currentPath: string) {
+    visited.value = visited.value.filter((t) => t.affix || t.path === currentPath)
+    syncCachedNames()
+  }
+
+  /**
+   * 关闭全部非固定页签。
+   * @returns 应跳转的 fullPath
+   */
+  function closeAll(): string {
+    visited.value = visited.value.filter((t) => t.affix)
+    if (!visited.value.length) {
+      visited.value.push({
+        path: HOME_PATH,
+        fullPath: HOME_PATH,
+        title: '首页',
+        name: 'Home',
+        affix: true,
+      })
+    }
+    syncCachedNames()
+    return visited.value[0]?.fullPath || HOME_PATH
+  }
+
+  /** 登出等场景重置为仅首页 */
+  function reset() {
+    visited.value = [
+      { path: HOME_PATH, fullPath: HOME_PATH, title: '首页', name: 'Home', affix: true },
+    ]
+    cachedNames.value = ['Home']
+  }
+
+  return {
+    visited,
+    cachedNames,
+    addView,
+    closeView,
+    closeOthers,
+    closeAll,
+    reset,
+  }
+})

package/template/src/stores/theme.ts

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+/** 可选主题标识 */
+export type ThemeId = 'teal' | 'ocean' | 'forest' | 'amber' | 'slate' | 'dark'
+
+/** 主题选项（用于右上角切换） */
+export interface ThemeOption {
+  id: ThemeId
+  label: string
+  /** 色板预览色 */
+  swatch: string
+}
+
+const STORAGE_KEY = 'sa_theme'
+
+/** 内置主题列表 */
+export const THEME_OPTIONS: ThemeOption[] = [
+  { id: 'teal', label: '青绿', swatch: '#0f766e' },
+  { id: 'ocean', label: '海蓝', swatch: '#0369a1' },
+  { id: 'forest', label: '森绿', swatch: '#15803d' },
+  { id: 'amber', label: '琥珀', swatch: '#b45309' },
+  { id: 'slate', label: '岩灰', swatch: '#475569' },
+  { id: 'dark', label: '暗色', swatch: '#0f172a' },
+]
+
+/**
+ * 将主题应用到 document（CSS 变量由 html[data-theme] 驱动）。
+ * @param id 主题标识
+ */
+export function applyTheme(id: ThemeId) {
+  document.documentElement.setAttribute('data-theme', id)
+}
+
+/**
+ * 从本地存储读取主题，非法值回退青绿。
+ */
+function readStoredTheme(): ThemeId {
+  const raw = localStorage.getItem(STORAGE_KEY) as ThemeId | null
+  if (raw && THEME_OPTIONS.some((t) => t.id === raw)) return raw
+  return 'teal'
+}
+
+/**
+ * 界面主题状态。
+ */
+export const useThemeStore = defineStore('theme', () => {
+  const themeId = ref<ThemeId>(readStoredTheme())
+
+  const current = computed(() => THEME_OPTIONS.find((t) => t.id === themeId.value) || THEME_OPTIONS[0])
+
+  /**
+   * 切换并持久化主题。
+   * @param id 目标主题
+   */
+  function setTheme(id: ThemeId) {
+    themeId.value = id
+    localStorage.setItem(STORAGE_KEY, id)
+    applyTheme(id)
+  }
+
+  /** 应用当前主题（应用启动时调用）。 */
+  function init() {
+    applyTheme(themeId.value)
+  }
+
+  return { themeId, current, setTheme, init }
+})

package/template/src/stores/user.ts

@@ -0,0 +1,191 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { get, post } from '@/utils/request'
+
+export interface AuthUserInfo {
+  userId: number
+  userName: string
+  nickName: string
+  avatar?: string
+  permissions: string[]
+  roles: string[]
+  /** 上次成功登录时间（不含本次） */
+  lastLoginTime?: string | null
+  /** 上次登录 IP */
+  lastLoginIp?: string | null
+}
+
+export interface SidebarRouter {
+  name: string
+  path: string
+  component?: string | null
+  meta: { title: string; icon?: string; hidden?: boolean }
+  children?: SidebarRouter[]
+}
+
+export interface CaptchaResult {
+  captchaId: string
+  imageBase64: string
+  expireSeconds: number
+  devCode?: string | null
+}
+
+export interface SendSmsCodeResult {
+  expireSeconds: number
+  intervalSeconds: number
+  devCode?: string | null
+}
+
+export interface LoginOptions {
+  /** 是否启用手机号短信登录 */
+  enableSmsLogin: boolean
+}
+
+export interface TokenPairResult {
+  accessToken: string
+  expiresIn: number
+  refreshToken: string
+  refreshExpiresIn: number
+  user: AuthUserInfo
+}
+
+export interface PasswordLoginPayload {
+  loginType: 'password'
+  userName: string
+  password: string
+  captchaId: string
+  captchaCode: string
+}
+
+export interface SmsLoginPayload {
+  loginType: 'sms'
+  phone: string
+  smsCode: string
+}
+
+export type LoginPayload = PasswordLoginPayload | SmsLoginPayload
+
+const TOKEN_KEY = 'sa_token'
+const REFRESH_KEY = 'sa_refresh_token'
+
+export const useUserStore = defineStore('user', () => {
+  const token = ref<string>(localStorage.getItem(TOKEN_KEY) || '')
+  const refreshToken = ref<string>(localStorage.getItem(REFRESH_KEY) || '')
+  const userInfo = ref<AuthUserInfo | null>(null)
+  const routersLoaded = ref(false)
+  /** 侧栏菜单树（来自 /auth/routers） */
+  const menus = ref<SidebarRouter[]>([])
+
+  function setToken(value: string) {
+    token.value = value
+    if (value) localStorage.setItem(TOKEN_KEY, value)
+    else localStorage.removeItem(TOKEN_KEY)
+  }
+
+  function setRefreshToken(value: string) {
+    refreshToken.value = value
+    if (value) localStorage.setItem(REFRESH_KEY, value)
+    else localStorage.removeItem(REFRESH_KEY)
+  }
+
+  function applyTokenPair(data: TokenPairResult) {
+    setToken(data.accessToken)
+    setRefreshToken(data.refreshToken || '')
+    if (data.user) userInfo.value = data.user
+  }
+
+  function setMenus(list: SidebarRouter[]) {
+    menus.value = list || []
+  }
+
+  function logoutLocal() {
+    token.value = ''
+    refreshToken.value = ''
+    userInfo.value = null
+    routersLoaded.value = false
+    menus.value = []
+    localStorage.removeItem(TOKEN_KEY)
+    localStorage.removeItem(REFRESH_KEY)
+  }
+
+  async function fetchCaptcha() {
+    return get<CaptchaResult>('/auth/captcha')
+  }
+
+  async function fetchLoginOptions() {
+    return get<LoginOptions>('/auth/login-options')
+  }
+
+  async function sendSmsCode(phone: string) {
+    return post<SendSmsCodeResult>('/auth/sms-code', { phone })
+  }
+
+  async function login(payload: LoginPayload) {
+    const data = await post<TokenPairResult>('/auth/login', payload)
+    if (!data?.accessToken) {
+      throw new Error('登录响应缺少 accessToken')
+    }
+    applyTokenPair(data)
+    return data
+  }
+
+  /**
+   * 用 refreshToken 换新令牌对（供请求拦截器单飞调用）。
+   */
+  async function refreshSession() {
+    const current = refreshToken.value
+    if (!current) {
+      throw new Error('无刷新令牌')
+    }
+    const data = await post<TokenPairResult>(
+      '/auth/refresh',
+      { refreshToken: current },
+      { silent: true, skipAuthRefresh: true },
+    )
+    if (!data?.accessToken || !data.refreshToken) {
+      throw new Error('刷新响应缺少令牌')
+    }
+    applyTokenPair(data)
+    return data
+  }
+
+  async function fetchInfo() {
+    userInfo.value = await get<AuthUserInfo>('/auth/info')
+    return userInfo.value
+  }
+
+  async function logout() {
+    try {
+      await post('/auth/logout')
+    } finally {
+      logoutLocal()
+    }
+  }
+
+  function hasPermission(code?: string) {
+    if (!code) return true
+    const perms = userInfo.value?.permissions || []
+    if (userInfo.value?.roles?.includes('super_admin')) return true
+    return perms.includes(code) || perms.includes('*')
+  }
+
+  return {
+    token,
+    refreshToken,
+    userInfo,
+    routersLoaded,
+    menus,
+    setToken,
+    setRefreshToken,
+    setMenus,
+    logoutLocal,
+    fetchCaptcha,
+    fetchLoginOptions,
+    sendSmsCode,
+    login,
+    refreshSession,
+    fetchInfo,
+    logout,
+    hasPermission,
+  }
+})