create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/styles/theme.css

@@ -0,0 +1,213 @@
+/* Tailwindadmin light palette with a neutral-black application dark theme. */
+:root {
+  --radius: 0.625rem;
+  --background: #fff;
+  --foreground: #1c2536;
+  --card: #fff;
+  --card-foreground: #1c2536;
+  --popover: #fff;
+  --popover-foreground: #1c2536;
+  --primary: var(--brand-light-primary, #4068d5);
+  --primary-foreground: var(--brand-light-primary-foreground, #fff);
+  --secondary: var(--brand-light-secondary, #49beff);
+  --secondary-foreground: var(--brand-light-secondary-foreground, #102a43);
+  --muted: #f5f5f5;
+  --muted-foreground: #5a6a85;
+  --accent: color-mix(in oklab, var(--primary) 12%, transparent);
+  --accent-foreground: var(--primary);
+  --destructive: #dc2626;
+  --border: #dfe5ef;
+  --input: #e5e7eb;
+  --ring: color-mix(in oklab, var(--primary) 30%, transparent);
+  --chart-1: var(--primary);
+  --chart-2: var(--secondary);
+  --chart-3: #13deb9;
+  --chart-4: #f6b51e;
+  --chart-5: #ef4444;
+  --info: #8754ec;
+  --success: #13deb9;
+  --warning: #f6b51e;
+  --error: #ef4444;
+
+  /* Portal layers stay above Handsontable overlays (up to 180). */
+  --z-index-table-cell-layer: 2100;
+  --z-index-table-cell-menu: 2110;
+  --z-index-table-cell-tooltip: 2120;
+  --z-index-modal-overlay: 3000;
+  --z-index-modal: 3010;
+  --z-index-popover: 3100;
+  --z-index-tooltip: 3200;
+
+  --sidebar: #fff;
+  --sidebar-foreground: #2a3547;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: #a1a1a1;
+}
+
+.dark {
+  --background: #000;
+  --foreground: #fafafa;
+  --card: #09090b;
+  --card-foreground: #fafafa;
+  --popover: #18181b;
+  --popover-foreground: #fafafa;
+  --primary: var(--brand-dark-primary, #8aadff);
+  --primary-foreground: var(--brand-dark-primary-foreground, #0f172a);
+  --secondary: var(--brand-dark-secondary, #49beff);
+  --secondary-foreground: var(--brand-dark-secondary-foreground, #102a43);
+  --muted: #18181b;
+  --muted-foreground: #a1a1aa;
+  --accent: color-mix(in oklab, var(--primary) 20%, transparent);
+  --accent-foreground: var(--primary);
+  --destructive: #dc2626;
+  --border: #27272a;
+  --input: #27272a;
+  --ring: color-mix(in oklab, var(--primary) 40%, transparent);
+  --chart-1: var(--primary);
+  --chart-2: var(--secondary);
+  --chart-3: #13deb9;
+  --chart-4: #f6b51e;
+  --chart-5: #ef4444;
+  --info: #8754ec;
+  --success: #13deb9;
+  --warning: #f6b51e;
+  --error: #ef4444;
+
+  --sidebar: #000;
+  --sidebar-foreground: #a1a1aa;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: #a1a1a1;
+}
+
+/*
+ * The internal advanced table scopes its theme variables to this class. Keep the table
+ * aligned with the application palette instead of falling back to its navy
+ * package defaults.
+ */
+:root .hgw-table-theme {
+  --primary: var(--brand-light-primary, #4068d5);
+  --primary-foreground: var(--brand-light-primary-foreground, #fff);
+  --secondary: var(--brand-light-secondary, #49beff);
+  --secondary-foreground: var(--brand-light-secondary-foreground, #102a43);
+}
+
+:root.dark .hgw-table-theme,
+:root .hgw-table-theme.dark {
+  --primary: var(--brand-dark-primary, #8aadff);
+  --primary-foreground: var(--brand-dark-primary-foreground, #0f172a);
+  --secondary: var(--brand-dark-secondary, #49beff);
+  --secondary-foreground: var(--brand-dark-secondary-foreground, #102a43);
+}
+
+.dark .hgw-table-theme,
+.hgw-table-theme.dark {
+  --background: #000;
+  --foreground: #fafafa;
+  --card: #09090b;
+  --card-foreground: #fafafa;
+  --popover: #18181b;
+  --popover-foreground: #fafafa;
+  --muted: #18181b;
+  --muted-foreground: #a1a1aa;
+  --border: #27272a;
+  --input: #27272a;
+  --sidebar: #000;
+  --sidebar-foreground: #a1a1aa;
+}
+
+/*
+ * The table package compiles shadcn dark variants against the operating
+ * system color scheme. Bind form controls to the application's explicit
+ * theme so a light application never renders dark, disabled-looking fields.
+ */
+.hgw-table-theme
+  :where(
+    [data-slot='input'],
+    [data-slot='select-trigger'],
+    [data-slot='button'][data-variant='outline']
+  ) {
+  background-color: var(--background);
+}
+
+.hgw-table-theme [data-slot='select-trigger']:hover {
+  background-color: var(--background);
+}
+
+.hgw-table-theme [data-slot='button'][data-variant='outline']:hover {
+  background-color: var(--accent);
+}
+
+.dark
+  .hgw-table-theme
+  :where(
+    [data-slot='input'],
+    [data-slot='select-trigger'],
+    [data-slot='button'][data-variant='outline']
+  ),
+.hgw-table-theme.dark
+  :where(
+    [data-slot='input'],
+    [data-slot='select-trigger'],
+    [data-slot='button'][data-variant='outline']
+  ) {
+  background-color: color-mix(in oklab, var(--input) 30%, transparent);
+}
+
+.dark .hgw-table-theme [data-slot='select-trigger']:hover,
+.dark .hgw-table-theme [data-slot='button'][data-variant='outline']:hover,
+.hgw-table-theme.dark [data-slot='select-trigger']:hover,
+.hgw-table-theme.dark [data-slot='button'][data-variant='outline']:hover {
+  background-color: color-mix(in oklab, var(--input) 50%, transparent);
+}
+
+@theme inline {
+  --font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-info: var(--info);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}

package/template/src/tenantWorkspace/TenantWorkspaceProvider.tsx

@@ -0,0 +1,102 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react'
+import { useAuthStore } from '@/stores/authStore'
+import {
+  fnClearTenantWorkspaceError,
+  fnReconcileTenantWorkspace,
+  useTenantWorkspaceCurrent,
+  useTenantWorkspaceStore,
+} from './store'
+import {
+  fnCancelTenantWorkspaceSwitch,
+  fnSwitchTenantWorkspace,
+} from './switch'
+import type {
+  ITenantWorkspaceContextValue,
+  ITenantWorkspaceProviderProps,
+  ITenantWorkspaceSnapshot,
+  ITenantWorkspaceSwitchOptions,
+  ITenantWorkspaceTarget,
+} from './types'
+
+const fnTenantWorkspaceOptionsContext =
+  createContext<ITenantWorkspaceSwitchOptions | null>(null)
+
+/** 配置后端切换 Adapter，并清理不属于当前认证身份的持久化选择。 */
+export function TenantWorkspaceProvider({
+  children: objChildren,
+  fnAfterCommit,
+  fnBeforeCommit,
+  objAdapter,
+}: ITenantWorkspaceProviderProps) {
+  const bIsAuthenticated = useAuthStore((objState) => objState.bIsAuthenticated)
+  const objUser = useAuthStore((objState) => objState.objUser)
+  const objOptions = useMemo(
+    () => ({ fnAfterCommit, fnBeforeCommit, objAdapter }),
+    [fnAfterCommit, fnBeforeCommit, objAdapter]
+  )
+
+  useEffect(() => {
+    fnReconcileTenantWorkspace(bIsAuthenticated ? objUser : null)
+  }, [bIsAuthenticated, objUser])
+
+  return (
+    <fnTenantWorkspaceOptionsContext.Provider value={objOptions}>
+      {objChildren}
+    </fnTenantWorkspaceOptionsContext.Provider>
+  )
+}
+
+/** 只读订阅当前上下文；Query 等基础设施无需获得切换权限。 */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTenantWorkspaceContext(): ITenantWorkspaceSnapshot {
+  const objCurrent = useTenantWorkspaceCurrent()
+  const nWorkspaceGeneration = useTenantWorkspaceStore(
+    (objState) => objState.nWorkspaceGeneration
+  )
+  const objTransition = useTenantWorkspaceStore(
+    (objState) => objState.objTransition
+  )
+  return useMemo(
+    () => ({ nWorkspaceGeneration, objCurrent, objTransition }),
+    [nWorkspaceGeneration, objCurrent, objTransition]
+  )
+}
+
+/** 读取当前上下文，并获得切换、重试、取消和错误清理命令。 */
+// eslint-disable-next-line react-refresh/only-export-components
+export function useTenantWorkspace(): ITenantWorkspaceContextValue {
+  const objOptions = useContext(fnTenantWorkspaceOptionsContext)
+  const objSnapshot = useTenantWorkspaceContext()
+  if (!objOptions) {
+    throw new Error('useTenantWorkspace 必须在 TenantWorkspaceProvider 内使用')
+  }
+
+  const fnSwitch = useCallback(
+    (objTarget: ITenantWorkspaceTarget) =>
+      fnSwitchTenantWorkspace(objTarget, objOptions),
+    [objOptions]
+  )
+  const fnRetry = useCallback(() => {
+    if (objSnapshot.objTransition.strStatus !== 'error') {
+      return Promise.resolve(objSnapshot.objCurrent)
+    }
+    return fnSwitch(objSnapshot.objTransition.objTarget)
+  }, [fnSwitch, objSnapshot.objCurrent, objSnapshot.objTransition])
+
+  return useMemo(
+    () => ({
+      ...objSnapshot,
+      fnCancel: fnCancelTenantWorkspaceSwitch,
+      fnClearError: fnClearTenantWorkspaceError,
+      fnRetry,
+      fnSwitch,
+    }),
+    [fnRetry, fnSwitch, objSnapshot]
+  )
+}

package/template/src/tenantWorkspace/index.ts

@@ -0,0 +1,33 @@
+export {
+  TenantWorkspaceProvider,
+  useTenantWorkspace,
+  useTenantWorkspaceContext,
+} from './TenantWorkspaceProvider'
+export {
+  fnCancelTenantWorkspaceSwitch,
+  fnSwitchTenantWorkspace,
+} from './switch'
+export {
+  fnClearTenantWorkspaceError,
+  fnGetTenantWorkspaceCurrent,
+  fnGetTenantWorkspaceSnapshot,
+  fnResetTenantWorkspace,
+} from './store'
+export {
+  TenantWorkspaceError,
+  type ITenantWorkspaceAdapter,
+  type ITenantWorkspaceContextValue,
+  type ITenantWorkspaceCurrent,
+  type ITenantWorkspaceErrorTransition,
+  type ITenantWorkspaceIdleTransition,
+  type ITenantWorkspaceLifecycle,
+  type ITenantWorkspaceProviderProps,
+  type ITenantWorkspaceSnapshot,
+  type ITenantWorkspaceSwitchOptions,
+  type ITenantWorkspaceSwitchRequest,
+  type ITenantWorkspaceSwitchResult,
+  type ITenantWorkspaceSwitchingTransition,
+  type ITenantWorkspaceTarget,
+  type TTenantWorkspaceErrorCode,
+  type TTenantWorkspaceTransition,
+} from './types'

package/template/src/tenantWorkspace/store.ts

@@ -0,0 +1,184 @@
+import { useMemo } from 'react'
+import { objAppConfig } from '@/config/appConfig'
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+import { useAuthStore } from '@/stores/authStore'
+import type { IAuthUser } from '@/stores/types'
+import type {
+  ITenantWorkspaceCurrent,
+  ITenantWorkspaceTarget,
+  TTenantWorkspaceTransition,
+} from './types'
+
+interface IStoredWorkspaceSelection {
+  /** 拥有该工作空间选择的认证用户 ID。 */
+  readonly strUserId: string
+  /** 拥有该工作空间选择的认证租户 ID。 */
+  readonly strTenantId: string
+  /** 最近一次经后端确认的工作空间 ID。 */
+  readonly strWorkspaceId: string
+}
+
+interface ITenantWorkspaceState {
+  /** 当前用户最近一次经后端确认的工作空间选择。 */
+  objWorkspaceSelection: IStoredWorkspaceSelection | null
+  /** 工作空间成功提交或清除后递增的本地版本。 */
+  nWorkspaceGeneration: number
+  /** 当前切换事务状态；不进入持久化存储。 */
+  objTransition: TTenantWorkspaceTransition
+}
+
+const objIdleTransition = Object.freeze({
+  strStatus: 'idle' as const,
+})
+
+export const useTenantWorkspaceStore = create<ITenantWorkspaceState>()(
+  persist<
+    ITenantWorkspaceState,
+    [],
+    [],
+    Pick<ITenantWorkspaceState, 'objWorkspaceSelection'>
+  >(
+    (): ITenantWorkspaceState => ({
+      objWorkspaceSelection: null,
+      nWorkspaceGeneration: 0,
+      objTransition: objIdleTransition,
+    }),
+    {
+      name: objAppConfig.storage.strTenantWorkspaceKey,
+      storage: createJSONStorage(() => localStorage),
+      partialize: ({ objWorkspaceSelection }) => ({ objWorkspaceSelection }),
+    }
+  )
+)
+
+function fnResolveWorkspaceId(
+  objUser: IAuthUser | null,
+  objSelection: IStoredWorkspaceSelection | null
+) {
+  if (
+    !objUser ||
+    !objSelection ||
+    typeof objSelection.strUserId !== 'string' ||
+    typeof objSelection.strTenantId !== 'string' ||
+    typeof objSelection.strWorkspaceId !== 'string' ||
+    objSelection.strUserId !== objUser.strId ||
+    objSelection.strTenantId !== objUser.strTenantId
+  ) {
+    return undefined
+  }
+
+  const strWorkspaceId = objSelection.strWorkspaceId.trim()
+  return strWorkspaceId || undefined
+}
+
+function fnCreateTenantWorkspaceCurrent(
+  bIsAuthenticated: boolean,
+  objUser: IAuthUser | null,
+  objSelection: IStoredWorkspaceSelection | null
+): ITenantWorkspaceCurrent {
+  if (!bIsAuthenticated || !objUser) {
+    return Object.freeze({ bIsAuthenticated: false })
+  }
+
+  const strWorkspaceId = fnResolveWorkspaceId(objUser, objSelection)
+  return Object.freeze({
+    bIsAuthenticated: true,
+    strUserId: objUser.strId,
+    ...(objUser.strTenantId ? { strTenantId: objUser.strTenantId } : {}),
+    ...(strWorkspaceId ? { strWorkspaceId } : {}),
+  })
+}
+
+/** 在 React 外读取当前认证身份实际生效的上下文。 */
+export function fnGetTenantWorkspaceCurrent(): ITenantWorkspaceCurrent {
+  const { bIsAuthenticated, objUser } = useAuthStore.getState()
+  const { objWorkspaceSelection } = useTenantWorkspaceStore.getState()
+  return fnCreateTenantWorkspaceCurrent(
+    bIsAuthenticated,
+    objUser,
+    objWorkspaceSelection
+  )
+}
+
+/** 在 React 中订阅与非 React 入口完全相同的当前上下文。 */
+export function useTenantWorkspaceCurrent(): ITenantWorkspaceCurrent {
+  const bIsAuthenticated = useAuthStore((objState) => objState.bIsAuthenticated)
+  const objUser = useAuthStore((objState) => objState.objUser)
+  const objWorkspaceSelection = useTenantWorkspaceStore(
+    (objState) => objState.objWorkspaceSelection
+  )
+  return useMemo(
+    () =>
+      fnCreateTenantWorkspaceCurrent(
+        bIsAuthenticated,
+        objUser,
+        objWorkspaceSelection
+      ),
+    [bIsAuthenticated, objUser, objWorkspaceSelection]
+  )
+}
+
+/** 返回当前上下文与切换状态，供路由 Loader 等非 React 消费者使用。 */
+export function fnGetTenantWorkspaceSnapshot() {
+  const { nWorkspaceGeneration, objTransition } =
+    useTenantWorkspaceStore.getState()
+  return Object.freeze({
+    nWorkspaceGeneration,
+    objCurrent: fnGetTenantWorkspaceCurrent(),
+    objTransition,
+  })
+}
+
+export function fnSetTenantWorkspaceTransition(
+  objTransition: TTenantWorkspaceTransition
+) {
+  useTenantWorkspaceStore.setState({ objTransition })
+}
+
+export function fnCommitTenantWorkspace(
+  objUser: IAuthUser,
+  objTarget: ITenantWorkspaceTarget
+) {
+  useTenantWorkspaceStore.setState((objState) => ({
+    nWorkspaceGeneration: objState.nWorkspaceGeneration + 1,
+    objTransition: objIdleTransition,
+    objWorkspaceSelection: objTarget.strWorkspaceId
+      ? {
+          strTenantId: objTarget.strTenantId,
+          strUserId: objUser.strId,
+          strWorkspaceId: objTarget.strWorkspaceId,
+        }
+      : null,
+  }))
+}
+
+/** 清除工作空间选择和错误；认证租户仍由认证 Store 自己管理。 */
+export function fnResetTenantWorkspace() {
+  useTenantWorkspaceStore.setState((objState) => ({
+    nWorkspaceGeneration: objState.nWorkspaceGeneration + 1,
+    objTransition: objIdleTransition,
+    objWorkspaceSelection: null,
+  }))
+}
+
+/** 清理不再属于当前认证身份的持久化工作空间选择。 */
+export function fnReconcileTenantWorkspace(objUser: IAuthUser | null) {
+  const { objWorkspaceSelection } = useTenantWorkspaceStore.getState()
+  if (!objWorkspaceSelection) return
+  if (
+    objUser &&
+    objWorkspaceSelection.strUserId === objUser.strId &&
+    objWorkspaceSelection.strTenantId === objUser.strTenantId
+  ) {
+    return
+  }
+  fnResetTenantWorkspace()
+}
+
+export function fnClearTenantWorkspaceError() {
+  const { objTransition } = useTenantWorkspaceStore.getState()
+  if (objTransition.strStatus === 'error') {
+    fnSetTenantWorkspaceTransition(objIdleTransition)
+  }
+}