create-simpleadmin-ui 2.0.0

package/template/src/styles/global.css

@@ -0,0 +1,314 @@
+:root,
+html[data-theme='teal'] {
+  --sa-font: 'Plus Jakarta Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --sa-font-display: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
+  --sa-accent: #0f766e;
+  --sa-accent-hover: #0d9488;
+  --sa-accent-bright: #5eead4;
+  --sa-accent-soft: rgba(15, 118, 110, 0.12);
+  --sa-ink: #0f172a;
+  --sa-ink-secondary: #475569;
+  --sa-ink-muted: #94a3b8;
+  --sa-surface: #f1f5f9;
+  --sa-panel: #ffffff;
+  --sa-border: #e2e8f0;
+  --sa-header-bg: rgba(255, 255, 255, 0.82);
+  --sa-wash-top: #f8fafc;
+  --sa-toolbar-bg: #f8fafc;
+  --sa-table-header: #f8fafc;
+  --sa-table-hover: #f0fdfa;
+  --sa-sidebar: #0b1220;
+  --sa-sidebar-elevated: #111827;
+  --sa-sidebar-text: #94a3b8;
+  --sa-sidebar-active: #f8fafc;
+  --sa-radius: 14px;
+  --sa-radius-sm: 10px;
+  --sa-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
+  --sa-header-h: 60px;
+  --sa-aside-w: 240px;
+  --sa-aside-collapsed: 72px;
+
+  --el-color-primary: #0f766e;
+  --el-color-primary-light-3: #2dd4bf;
+  --el-color-primary-light-5: #5eead4;
+  --el-color-primary-light-7: #99f6e4;
+  --el-color-primary-light-8: #ccfbf1;
+  --el-color-primary-light-9: #f0fdfa;
+  --el-color-primary-dark-2: #115e59;
+  --el-border-radius-base: 10px;
+  --el-font-family: var(--sa-font);
+}
+
+html[data-theme='ocean'] {
+  --sa-accent: #0369a1;
+  --sa-accent-hover: #0284c7;
+  --sa-accent-bright: #7dd3fc;
+  --sa-accent-soft: rgba(3, 105, 161, 0.12);
+  --sa-table-hover: #f0f9ff;
+  --el-color-primary: #0369a1;
+  --el-color-primary-light-3: #38bdf8;
+  --el-color-primary-light-5: #7dd3fc;
+  --el-color-primary-light-7: #bae6fd;
+  --el-color-primary-light-8: #e0f2fe;
+  --el-color-primary-light-9: #f0f9ff;
+  --el-color-primary-dark-2: #075985;
+}
+
+html[data-theme='forest'] {
+  --sa-accent: #15803d;
+  --sa-accent-hover: #16a34a;
+  --sa-accent-bright: #86efac;
+  --sa-accent-soft: rgba(21, 128, 61, 0.12);
+  --sa-table-hover: #f0fdf4;
+  --el-color-primary: #15803d;
+  --el-color-primary-light-3: #4ade80;
+  --el-color-primary-light-5: #86efac;
+  --el-color-primary-light-7: #bbf7d0;
+  --el-color-primary-light-8: #dcfce7;
+  --el-color-primary-light-9: #f0fdf4;
+  --el-color-primary-dark-2: #166534;
+}
+
+html[data-theme='amber'] {
+  --sa-accent: #b45309;
+  --sa-accent-hover: #d97706;
+  --sa-accent-bright: #fcd34d;
+  --sa-accent-soft: rgba(180, 83, 9, 0.12);
+  --sa-table-hover: #fffbeb;
+  --el-color-primary: #b45309;
+  --el-color-primary-light-3: #f59e0b;
+  --el-color-primary-light-5: #fcd34d;
+  --el-color-primary-light-7: #fde68a;
+  --el-color-primary-light-8: #fef3c7;
+  --el-color-primary-light-9: #fffbeb;
+  --el-color-primary-dark-2: #92400e;
+}
+
+html[data-theme='slate'] {
+  --sa-accent: #475569;
+  --sa-accent-hover: #64748b;
+  --sa-accent-bright: #cbd5e1;
+  --sa-accent-soft: rgba(71, 85, 105, 0.14);
+  --sa-table-hover: #f8fafc;
+  --el-color-primary: #475569;
+  --el-color-primary-light-3: #94a3b8;
+  --el-color-primary-light-5: #cbd5e1;
+  --el-color-primary-light-7: #e2e8f0;
+  --el-color-primary-light-8: #f1f5f9;
+  --el-color-primary-light-9: #f8fafc;
+  --el-color-primary-dark-2: #334155;
+}
+
+html[data-theme='dark'] {
+  --sa-accent: #2dd4bf;
+  --sa-accent-hover: #5eead4;
+  --sa-accent-bright: #99f6e4;
+  --sa-accent-soft: rgba(45, 212, 191, 0.16);
+  --sa-ink: #e2e8f0;
+  --sa-ink-secondary: #94a3b8;
+  --sa-ink-muted: #64748b;
+  --sa-surface: #0b1220;
+  --sa-panel: #111827;
+  --sa-border: #1f2937;
+  --sa-header-bg: rgba(17, 24, 39, 0.88);
+  --sa-wash-top: #0f172a;
+  --sa-toolbar-bg: #0f172a;
+  --sa-table-header: #0f172a;
+  --sa-table-hover: rgba(45, 212, 191, 0.08);
+  --sa-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.28);
+  --el-color-primary: #2dd4bf;
+  --el-color-primary-light-3: #5eead4;
+  --el-color-primary-light-5: #99f6e4;
+  --el-color-primary-light-7: #134e4a;
+  --el-color-primary-light-8: #115e59;
+  --el-color-primary-light-9: #0f3d3a;
+  --el-color-primary-dark-2: #14b8a6;
+  --el-bg-color: #111827;
+  --el-bg-color-overlay: #111827;
+  --el-text-color-primary: #e2e8f0;
+  --el-text-color-regular: #cbd5e1;
+  --el-border-color: #1f2937;
+  --el-fill-color-blank: #111827;
+  --el-mask-color: rgba(0, 0, 0, 0.6);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: var(--sa-font);
+  color: var(--sa-ink);
+  background: var(--sa-surface);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.sa-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  animation: sa-fade-up 0.35s ease both;
+}
+
+.sa-page__head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.sa-page__title {
+  margin: 0;
+  font-family: var(--sa-font-display);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--sa-ink);
+}
+
+.sa-page__desc {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--sa-ink-secondary);
+}
+
+.sa-panel {
+  background: var(--sa-panel);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius);
+  box-shadow: var(--sa-shadow);
+  padding: 18px 20px 16px;
+  overflow: visible;
+}
+
+.sa-panel .el-card {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+
+.sa-panel .el-card__body {
+  padding: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 12px 14px;
+  background: var(--sa-toolbar-bg);
+  border: 1px solid var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+}
+
+.pager {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* 列表时间列：固定格式、禁止换行 */
+.datetime-cell,
+.el-table .is-datetime .cell {
+  white-space: nowrap !important;
+  word-break: keep-all;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--sa-font);
+}
+
+.el-table {
+  --el-table-header-bg-color: var(--sa-table-header);
+  --el-table-row-hover-bg-color: var(--sa-table-hover);
+  --el-table-bg-color: var(--sa-panel);
+  --el-table-tr-bg-color: var(--sa-panel);
+  --el-table-text-color: var(--sa-ink);
+  --el-table-border-color: var(--sa-border);
+  border-radius: var(--sa-radius-sm);
+  overflow: hidden;
+}
+
+.el-table th.el-table__cell {
+  font-weight: 600;
+  color: var(--sa-ink-secondary);
+  font-size: 13px;
+}
+
+.el-dialog {
+  border-radius: 16px !important;
+  overflow: visible;
+  background: var(--sa-panel) !important;
+}
+
+.el-overlay-dialog {
+  overflow: auto !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.el-dialog__footer {
+  padding: 12px 20px 18px;
+  border-top: 1px solid var(--sa-border);
+  background: var(--sa-panel);
+}
+
+.el-dialog__body {
+  padding-top: 12px;
+  padding-bottom: 8px;
+}
+
+.el-dialog__title {
+  color: var(--sa-ink);
+}
+
+.el-button {
+  font-weight: 600;
+}
+
+/* 表格操作列：实体小按钮横向排列 */
+.row-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.row-actions .el-button + .el-button {
+  margin-left: 0;
+}
+
+@keyframes sa-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes sa-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/template/src/utils/datetime.ts

@@ -0,0 +1,34 @@
+/**
+ * 将接口时间格式化为 yyyy-MM-dd HH:mm:ss（单行展示）。
+ * @param value ISO 字符串、Date 或时间戳
+ */
+export function formatDateTime(value?: string | number | Date | null): string {
+  if (value === null || value === undefined || value === '') {
+    return '-'
+  }
+
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return String(value)
+  }
+
+  const pad = (n: number) => String(n).padStart(2, '0')
+  const y = date.getFullYear()
+  const m = pad(date.getMonth() + 1)
+  const d = pad(date.getDate())
+  const hh = pad(date.getHours())
+  const mm = pad(date.getMinutes())
+  const ss = pad(date.getSeconds())
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+}
+
+/** 常见时间字段名，用于批量识别 */
+export const DATE_TIME_PROPS = new Set([
+  'createTime',
+  'updateTime',
+  'loginTime',
+  'operTime',
+  'readTime',
+  'deleteTime',
+  'pwdUpdateTime',
+])

package/template/src/utils/request.ts

@@ -0,0 +1,324 @@
+import axios, {
+  AxiosHeaders,
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+  type InternalAxiosRequestConfig,
+} from 'axios'
+import { ElMessage } from 'element-plus'
+import { useUserStore } from '@/stores/user'
+import router from '@/router'
+import {
+  buildCanonicalString,
+  buildSignQuery,
+  createNonce,
+  hmacSha256Hex,
+  isRequestSignFailureMessage,
+  resolveApiPath,
+  sha256Hex,
+  EMPTY_BODY_SHA256,
+} from '@/utils/requestSign'
+
+/** 统一业务响应 */
+export interface ApiResult<T = unknown> {
+  code: number
+  message: string
+  data: T
+  traceId?: string
+}
+
+/** 扩展请求配置：静默失败时不弹 Toast；可附带幂等键 */
+export interface SaRequestConfig extends AxiosRequestConfig {
+  /** 为 true 时业务/网络失败不弹出全局错误提示 */
+  silent?: boolean
+  /** 幂等键；会写入请求头 Idempotency-Key（所有方法） */
+  idempotencyKey?: string
+  /** 为 true 时 401 不触发 refresh（用于 /auth/refresh 自身） */
+  skipAuthRefresh?: boolean
+}
+
+type SaInternalConfig = InternalAxiosRequestConfig & {
+  silent?: boolean
+  idempotencyKey?: string
+  skipAuthRefresh?: boolean
+  /** 已因 401 重试过，避免死循环 */
+  _retriedAfterRefresh?: boolean
+}
+
+const SIGN_APP_ID = import.meta.env.VITE_SIGN_APP_ID || 'simple-admin-web'
+const SIGN_APP_SECRET =
+  import.meta.env.VITE_SIGN_APP_SECRET || 'SimpleAdmin_Dev_Sign_Secret_Change_Me_32'
+
+/** 并发 401 共用一次刷新 */
+let refreshFlight: Promise<boolean> | null = null
+
+/**
+ * 生成幂等键；同一业务操作重试时请复用同一字符串，勿每次重新生成。
+ * @param prefix 业务前缀
+ */
+export function createIdempotencyKey(prefix = 'sa'): string {
+  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+    return `${prefix}-${crypto.randomUUID()}`
+  }
+  return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`
+}
+
+/**
+ * 由 method + url + body 生成稳定幂等键（仅写请求）。
+ */
+function buildStableIdempotencyKey(method: string, url: string, payload: string): string {
+  return `auto-${simpleHash(`${method}|${url}|${payload}`)}`
+}
+
+/** 简易字符串哈希（非加密，仅用于幂等键）。 */
+function simpleHash(input: string): string {
+  let h = 2166136261
+  for (let i = 0; i < input.length; i++) {
+    h ^= input.charCodeAt(i)
+    h = Math.imul(h, 16777619)
+  }
+  return (h >>> 0).toString(16).padStart(8, '0')
+}
+
+function shouldSkipAuthExempt(url: string): boolean {
+  const u = url.toLowerCase()
+  // 登录须签名；仅短信、图形验证码与登录选项免签（与后端 RequestSign:ExemptPathPrefixes 一致）
+  return (
+    u.includes('/auth/sms-code') ||
+    u.includes('/auth/captcha') ||
+    u.includes('/auth/login-options')
+  )
+}
+
+function isAuthRefreshUrl(url: string): boolean {
+  return url.toLowerCase().includes('/auth/refresh')
+}
+
+function isWriteMethod(method: string): boolean {
+  return method === 'POST' || method === 'PUT' || method === 'PATCH' || method === 'DELETE'
+}
+
+/**
+ * 规范化 JSON body，保证哈希字节与实际上送一致。
+ */
+function normalizeJsonBody(config: InternalAxiosRequestConfig, headers: AxiosHeaders): string {
+  const data = config.data
+  if (data == null || data === '') return ''
+  if (typeof FormData !== 'undefined' && data instanceof FormData) return ''
+  if (typeof Blob !== 'undefined' && data instanceof Blob) return ''
+  if (typeof data === 'string') return data
+
+  const bodyStr = JSON.stringify(data)
+  config.data = bodyStr
+  headers.set('Content-Type', 'application/json')
+  return bodyStr
+}
+
+/**
+ * 一次性写入幂等头 + 签名头，减少 AxiosHeaders 重建。
+ */
+async function applySecurityHeaders(config: InternalAxiosRequestConfig) {
+  const url = String(config.url || '')
+  if (shouldSkipAuthExempt(url)) return
+
+  const headers = AxiosHeaders.from(config.headers ?? {})
+  const method = (config.method || 'get').toUpperCase()
+  const isMultipart =
+    typeof FormData !== 'undefined' && config.data instanceof FormData
+  const bodyText = isMultipart ? '' : normalizeJsonBody(config, headers)
+  const write = isWriteMethod(method)
+
+  // 读请求：随机幂等键即可（后端不做回放）；写请求：稳定键利于去重
+  const explicit = (config as SaInternalConfig).idempotencyKey
+  let idempotencyKey = String(headers.get('Idempotency-Key') || '')
+  if (explicit) {
+    idempotencyKey = String(explicit)
+  } else if (!idempotencyKey) {
+    idempotencyKey = write
+      ? buildStableIdempotencyKey(method, url, bodyText || JSON.stringify(config.params ?? ''))
+      : createIdempotencyKey('get')
+  }
+  headers.set('Idempotency-Key', idempotencyKey)
+
+  const path = resolveApiPath(config.baseURL ?? http.defaults.baseURL, url)
+  const query = buildSignQuery(config.params)
+  // GET 等空 body 跳过 digest
+  const bodySha256 =
+    isMultipart || !bodyText ? EMPTY_BODY_SHA256 : await sha256Hex(bodyText)
+
+  const timestamp = Math.floor(Date.now() / 1000).toString()
+  const nonce = createNonce()
+  const canonical = buildCanonicalString({
+    method,
+    path,
+    query,
+    timestamp,
+    nonce,
+    bodySha256,
+    idempotencyKey,
+  })
+  const sign = await hmacSha256Hex(SIGN_APP_SECRET, canonical)
+
+  headers.set('X-App-Id', SIGN_APP_ID)
+  headers.set('X-Timestamp', timestamp)
+  headers.set('X-Nonce', nonce)
+  headers.set('X-Sign', sign)
+  config.headers = headers
+}
+
+const http: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || '/api/v1',
+  timeout: 30000,
+})
+
+function isSilent(config?: SaInternalConfig | SaRequestConfig) {
+  return Boolean(config && (config as SaInternalConfig).silent)
+}
+
+/**
+ * 单飞刷新 access；成功返回 true。
+ */
+function runRefreshOnce(): Promise<boolean> {
+  if (!refreshFlight) {
+    refreshFlight = useUserStore()
+      .refreshSession()
+      .then(() => true)
+      .catch(() => false)
+      .finally(() => {
+        refreshFlight = null
+      })
+  }
+  return refreshFlight
+}
+
+function redirectToLogin(silent: boolean) {
+  useUserStore().logoutLocal()
+  router.push('/login')
+  if (!silent) {
+    ElMessage.error('登录已失效，请重新登录')
+  }
+}
+
+/**
+ * 业务/HTTP 401 时尝试刷新并重试；失败则跳登录。
+ */
+async function handleUnauthorized(
+  config: SaInternalConfig | undefined,
+  silent: boolean,
+): Promise<AxiosResponse<ApiResult> | null> {
+  if (!config) {
+    redirectToLogin(silent)
+    return null
+  }
+
+  const url = String(config.url || '')
+  if (
+    config.skipAuthRefresh ||
+    config._retriedAfterRefresh ||
+    isAuthRefreshUrl(url) ||
+    !useUserStore().refreshToken
+  ) {
+    redirectToLogin(silent)
+    return null
+  }
+
+  const ok = await runRefreshOnce()
+  if (!ok) {
+    redirectToLogin(silent)
+    return null
+  }
+
+  config._retriedAfterRefresh = true
+  const headers = AxiosHeaders.from(config.headers ?? {})
+  headers.set('Authorization', `Bearer ${useUserStore().token}`)
+  // 清旧签名，由请求拦截器重签
+  headers.delete('X-App-Id')
+  headers.delete('X-Timestamp')
+  headers.delete('X-Nonce')
+  headers.delete('X-Sign')
+  config.headers = headers
+  return http.request(config)
+}
+
+http.interceptors.request.use(async (config) => {
+  const store = useUserStore()
+  const headers = AxiosHeaders.from(config.headers ?? {})
+  if (store.token) {
+    headers.set('Authorization', `Bearer ${store.token}`)
+  }
+  config.headers = headers
+
+  await applySecurityHeaders(config)
+  return config
+})
+
+http.interceptors.response.use(
+  async (response: AxiosResponse<ApiResult>) => {
+    const body = response.data
+    const cfg = response.config as SaInternalConfig
+    const silent = isSilent(cfg)
+    if (body && typeof body.code === 'number' && body.code !== 0) {
+      if (body.code === 401 && !isRequestSignFailureMessage(body.message)) {
+        const retried = await handleUnauthorized(cfg, silent)
+        if (retried) return retried
+        return Promise.reject(body)
+      }
+      if (!silent) {
+        ElMessage.error(body.message || '请求失败')
+      }
+      return Promise.reject(body)
+    }
+    return response
+  },
+  async (error) => {
+    const status = error.response?.status
+    const cfg = error.config as SaInternalConfig | undefined
+    const silent = isSilent(cfg)
+    const msg = error.response?.data?.message as string | undefined
+    if (status === 401 && !isRequestSignFailureMessage(msg)) {
+      const retried = await handleUnauthorized(cfg, silent)
+      if (retried) return retried
+      return Promise.reject(error)
+    }
+    if (!silent) {
+      ElMessage.error(msg || error.message || '网络异常')
+    }
+    return Promise.reject(error)
+  },
+)
+
+export async function get<T>(url: string, params?: object): Promise<T> {
+  const res = await http.get<ApiResult<T>>(url, { params })
+  return res.data.data
+}
+
+/**
+ * 静默 GET：失败不弹全局错误提示（用于首页概览等可选数据）。
+ * @param url 相对路径
+ * @param params 查询参数
+ */
+export async function getSilent<T>(url: string, params?: object): Promise<T | null> {
+  try {
+    const res = await http.get<ApiResult<T>>(url, { params, silent: true } as SaRequestConfig)
+    return res.data.data
+  } catch {
+    return null
+  }
+}
+
+export async function post<T>(url: string, data?: object, config?: SaRequestConfig): Promise<T> {
+  const res = await http.post<ApiResult<T>>(url, data, config)
+  return res.data.data
+}
+
+export async function put<T>(url: string, data?: object, config?: SaRequestConfig): Promise<T> {
+  const res = await http.put<ApiResult<T>>(url, data, config)
+  return res.data.data
+}
+
+export async function del<T>(url: string, data?: object, config?: SaRequestConfig): Promise<T> {
+  const res = await http.delete<ApiResult<T>>(url, { ...config, data })
+  return res.data.data
+}
+
+export default http