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

package/template/src/features/showcase/AccessShowcasePage.tsx

@@ -0,0 +1,284 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { useLocaleMessages } from '@/locale'
+import { usePermission } from '@/permissions'
+import { toast } from 'sonner'
+import { useAuthStore } from '@/stores/authStore'
+import { fnHasPermission } from '@/lib/accessControl'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  AppDataTable,
+  type IAppDataTableColumn,
+} from '@/components/AppDataTable'
+import { Can } from '@/components/Can'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objAccessShowcaseMessages } from './accessMessages'
+
+type TPermissionScenario = 'admin' | 'operator' | 'readOnly'
+
+interface IPermissionRow {
+  bIsAllowed: boolean
+  strCode: string
+  strLabel: string
+}
+
+const objScenarioPermissions: Record<TPermissionScenario, readonly string[]> = {
+  admin: ['*'],
+  operator: ['showcase:access', 'demo:read', 'demo:edit', 'demo:export'],
+  readOnly: ['showcase:access', 'demo:read'],
+}
+
+function fnResolveScenario(arrPermissions: readonly string[]) {
+  if (arrPermissions.includes('*')) return 'admin'
+  if (arrPermissions.includes('demo:edit')) return 'operator'
+  return 'readOnly'
+}
+
+/** 直接使用真实认证会话演示路由、组件和操作级权限。 */
+export function AccessShowcasePage() {
+  const { fnTranslate } = useLocaleMessages(objAccessShowcaseMessages)
+  const objUser = useAuthStore((objState) => objState.objUser)
+  const nSessionGeneration = useAuthStore(
+    (objState) => objState.nSessionGeneration
+  )
+  const fnUpdateUser = useAuthStore((objState) => objState.fnUpdateUser)
+  const objInitialUserRef = useRef(objUser)
+  const bCanEdit = usePermission('demo:edit')
+  const bCanExportOrApprove = usePermission(
+    ['demo:export', 'demo:approve'],
+    'any'
+  )
+  const bCanEditAndApprove = usePermission(['demo:edit', 'demo:approve'], 'all')
+  const strScenario = fnResolveScenario(objUser?.arrPermissions ?? [])
+
+  useEffect(
+    () => () => {
+      const objInitialUser = objInitialUserRef.current
+      const objCurrentState = useAuthStore.getState()
+      if (objInitialUser && objCurrentState.bIsAuthenticated) {
+        objCurrentState.fnUpdateUser(objInitialUser)
+      }
+    },
+    []
+  )
+
+  const arrRows = useMemo<IPermissionRow[]>(
+    () =>
+      [
+        ['demo:read', fnTranslate('actionRead')],
+        ['demo:edit', fnTranslate('actionEdit')],
+        ['demo:export', fnTranslate('actionExport')],
+        ['demo:approve', fnTranslate('actionApprove')],
+      ].map(([strCode, strLabel]) => ({
+        bIsAllowed: fnHasPermission(objUser, strCode),
+        strCode,
+        strLabel,
+      })),
+    [fnTranslate, objUser]
+  )
+  const arrColumns = useMemo<IAppDataTableColumn<IPermissionRow>[]>(
+    () => [
+      {
+        fnRender: (objRow) => objRow.strLabel,
+        strHeader: fnTranslate('visibleActionTitle'),
+        strKey: 'label',
+      },
+      {
+        fnRender: (objRow) => <code className='text-xs'>{objRow.strCode}</code>,
+        strHeader: fnTranslate('permissionCode'),
+        strKey: 'code',
+      },
+      {
+        fnRender: (objRow) => (
+          <Badge variant={objRow.bIsAllowed ? 'default' : 'outline'}>
+            {fnTranslate(objRow.bIsAllowed ? 'allowed' : 'denied')}
+          </Badge>
+        ),
+        strHeader: fnTranslate('permissionResult'),
+        strKey: 'result',
+      },
+    ],
+    [fnTranslate]
+  )
+
+  function fnApplyScenario(strScenarioToApply: TPermissionScenario) {
+    if (!objUser) return
+    fnUpdateUser({
+      ...objUser,
+      arrPermissions: [...objScenarioPermissions[strScenarioToApply]],
+      arrRoleCodes: [strScenarioToApply],
+      strRole: strScenarioToApply,
+    })
+  }
+
+  if (!objUser) return null
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('description')}
+        strEyebrow='Scaffold live demo'
+        strTitle={fnTranslate('title')}
+      />
+
+      <div className='grid gap-6 xl:grid-cols-2'>
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h2>{fnTranslate('identityTitle')}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className='grid gap-4 text-sm sm:grid-cols-2'>
+              <div>
+                <dt className='text-muted-foreground'>
+                  {fnTranslate('identityAccount')}
+                </dt>
+                <dd className='font-medium'>{objUser.strDisplayName}</dd>
+                <dd>{objUser.strAccount}</dd>
+              </div>
+              <div>
+                <dt className='text-muted-foreground'>
+                  {fnTranslate('identityOrganization')}
+                </dt>
+                <dd className='font-medium'>{objUser.strOrganizationName}</dd>
+              </div>
+              <div>
+                <dt className='text-muted-foreground'>
+                  {fnTranslate('identityTenant')}
+                </dt>
+                <dd className='font-mono'>{objUser.strTenantId}</dd>
+              </div>
+              <div>
+                <dt className='text-muted-foreground'>
+                  {fnTranslate('identityRole')}
+                </dt>
+                <dd className='font-mono'>{objUser.arrRoleCodes.join(', ')}</dd>
+              </div>
+              <div>
+                <dt className='text-muted-foreground'>
+                  {fnTranslate('sessionGeneration')}
+                </dt>
+                <dd className='font-mono'>{nSessionGeneration}</dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h2>{fnTranslate('scenarioTitle')}</h2>
+            </CardTitle>
+            <p className='text-sm leading-6 text-muted-foreground'>
+              {fnTranslate('scenarioDescription')}
+            </p>
+          </CardHeader>
+          <CardContent className='flex flex-wrap gap-2'>
+            <Button
+              aria-pressed={strScenario === 'readOnly'}
+              variant={strScenario === 'readOnly' ? 'default' : 'outline'}
+              onClick={() => fnApplyScenario('readOnly')}
+            >
+              {fnTranslate('scenarioReadOnly')}
+            </Button>
+            <Button
+              aria-pressed={strScenario === 'operator'}
+              variant={strScenario === 'operator' ? 'default' : 'outline'}
+              onClick={() => fnApplyScenario('operator')}
+            >
+              {fnTranslate('scenarioOperator')}
+            </Button>
+            <Button
+              aria-pressed={strScenario === 'admin'}
+              variant={strScenario === 'admin' ? 'default' : 'outline'}
+              onClick={() => fnApplyScenario('admin')}
+            >
+              {fnTranslate('resetAdmin')}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('permissionTitle')}</h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-5'>
+          <AppDataTable
+            arrColumns={arrColumns}
+            arrRows={arrRows}
+            fnGetRowKey={(objRow) => objRow.strCode}
+            strAriaLabel={fnTranslate('permissionTitle')}
+          />
+
+          <div className='grid gap-4 lg:grid-cols-2'>
+            <div className='space-y-3 rounded-lg border p-4'>
+              <h3 className='font-medium'>
+                {fnTranslate('visibleActionTitle')}
+              </h3>
+              <div className='flex flex-wrap gap-2'>
+                <Can
+                  objFallback={
+                    <Badge variant='outline'>
+                      {fnTranslate('hiddenFallback')}
+                    </Badge>
+                  }
+                  objRequirement='demo:approve'
+                >
+                  <Button
+                    onClick={() => toast.success(fnTranslate('actionApprove'))}
+                  >
+                    {fnTranslate('actionApprove')}
+                  </Button>
+                </Can>
+                <Can objRequirement='demo:edit' strDeniedBehavior='disable'>
+                  {({ bIsDisabled }) => (
+                    <Button
+                      disabled={bIsDisabled}
+                      variant='outline'
+                      onClick={() => toast.success(fnTranslate('actionEdit'))}
+                    >
+                      {fnTranslate('actionEdit')}
+                    </Button>
+                  )}
+                </Can>
+              </div>
+            </div>
+
+            <dl className='space-y-3 rounded-lg border p-4 text-sm'>
+              <div className='flex items-center justify-between gap-3'>
+                <dt>{fnTranslate('anyRule')}</dt>
+                <dd>
+                  <Badge variant={bCanExportOrApprove ? 'default' : 'outline'}>
+                    {fnTranslate(bCanExportOrApprove ? 'allowed' : 'denied')}
+                  </Badge>
+                </dd>
+              </div>
+              <div className='flex items-center justify-between gap-3'>
+                <dt>{fnTranslate('matchAllRule')}</dt>
+                <dd>
+                  <Badge variant={bCanEditAndApprove ? 'default' : 'outline'}>
+                    {fnTranslate(bCanEditAndApprove ? 'allowed' : 'denied')}
+                  </Badge>
+                </dd>
+              </div>
+              <div className='flex items-center justify-between gap-3'>
+                <dt>{fnTranslate('actionEdit')}</dt>
+                <dd>
+                  <Badge variant={bCanEdit ? 'default' : 'outline'}>
+                    {fnTranslate(bCanEdit ? 'allowed' : 'denied')}
+                  </Badge>
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </CardContent>
+      </Card>
+    </PageContainer>
+  )
+}

package/template/src/features/showcase/AdvancedTableDemo.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react'
+import { toast } from 'sonner'
+import { AppTable, type TableConfiguration } from '@/components/AppTable'
+
+interface IAdvancedDemoRow {
+  nId: number
+  nQuota: number
+  strName: string
+  strOwner: string
+  strStatus: string
+}
+
+const arrAdvancedRows: IAdvancedDemoRow[] = Array.from(
+  { length: 24 },
+  (_objUnused, nIndex) => ({
+    nId: nIndex + 1,
+    nQuota: (nIndex + 1) * 100,
+    strName: `应用 ${String(nIndex + 1).padStart(2, '0')}`,
+    strOwner: ['王琳', '陈宇', '李敏'][nIndex % 3],
+    strStatus: ['active', 'pending', 'disabled'][nIndex % 3],
+  })
+)
+
+/** 仅供本地开发演示的高级表格，生产构建和 core 档位不会加载。 */
+export function AdvancedTableDemo() {
+  const objConfig = useMemo<TableConfiguration<IAdvancedDemoRow>>(
+    () => ({
+      table: {
+        data: arrAdvancedRows,
+        height: 360,
+        columns: [
+          { key: 'nId', label: '编号', readOnly: true, width: 90 },
+          { key: 'strName', label: '应用名称', readOnly: false },
+          { key: 'strOwner', label: '负责人', readOnly: false },
+          {
+            key: 'strStatus',
+            label: '状态',
+            options: [
+              { label: '启用', value: 'active' },
+              { label: '待审核', value: 'pending' },
+              { label: '停用', value: 'disabled' },
+            ],
+            readOnly: false,
+            renderer: 'select',
+          },
+          {
+            key: 'nQuota',
+            label: '用户配额',
+            readOnly: false,
+          },
+        ],
+      },
+      search: {
+        conditions: [
+          { key: 'strName', label: '应用名称', type: 'input' },
+          {
+            key: 'strStatus',
+            label: '状态',
+            options: [
+              { label: '启用', value: 'active' },
+              { label: '待审核', value: 'pending' },
+              { label: '停用', value: 'disabled' },
+            ],
+            type: 'select',
+          },
+        ],
+      },
+      query: {
+        handler: async (objParams) => {
+          const objNameCondition = objParams.where.find(
+            (objWhere) => objWhere.field === 'strName'
+          )
+          const objStatusCondition = objParams.where.find(
+            (objWhere) => objWhere.field === 'strStatus'
+          )
+          const arrFiltered = arrAdvancedRows.filter(
+            (objRow) =>
+              (!objNameCondition ||
+                objRow.strName.includes(String(objNameCondition.value))) &&
+              (!objStatusCondition ||
+                objRow.strStatus === objStatusCondition.value)
+          )
+          const nStart = (objParams.page - 1) * objParams.pageSize
+          return {
+            list: arrFiltered.slice(nStart, nStart + objParams.pageSize),
+            total: arrFiltered.length,
+          }
+        },
+      },
+      editing: {
+        rowKey: 'nId',
+        commitChanges: async () => {
+          toast.success('高级表格修改已在演示环境中提交')
+        },
+      },
+      selection: {
+        enabled: true,
+        options: { rowClick: 'toggle' },
+      },
+      toolbar: {
+        buttons: [
+          {
+            key: 'selected',
+            label: '处理所选行',
+            disabled: (arrRows) => arrRows.length === 0,
+            onClick: (arrRows) => {
+              toast.success(`已处理 ${arrRows.length} 行演示数据`)
+            },
+            type: 'primary',
+          },
+        ],
+      },
+      pagination: { pageSize: 5, pageSizes: [5, 10, 20] },
+      preference: false,
+    }),
+    []
+  )
+
+  return <AppTable tableKey='scaffold-advanced-table-demo' config={objConfig} />
+}

package/template/src/features/showcase/FeedbackShowcasePage.tsx

@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { ApiError } from '@/api'
+import { useLocaleMessages } from '@/locale'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  AppConfirmDialog,
+  type IAppConfirmRequest,
+} from '@/components/AppDialog'
+import {
+  PageEmptyState,
+  PageErrorState,
+  PageLoadingState,
+} from '@/components/PageFeedback'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objShowcaseMessages } from './messages'
+
+type TFeedbackState = 'empty' | 'error' | 'loading'
+
+const arrErrorRoutes = [
+  '/errors/401',
+  '/errors/403',
+  '/errors/404',
+  '/errors/500',
+  '/errors/503',
+] as const
+
+/** 演示统一页面状态、确认弹窗、Toast 与标准错误路由。 */
+export function FeedbackShowcasePage() {
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+  const [strState, fnSetState] = useState<TFeedbackState>('loading')
+  const [objConfirmRequest, fnSetConfirmRequest] =
+    useState<IAppConfirmRequest>()
+  const objDemoError = new ApiError({
+    bRetriable: true,
+    nStatus: 503,
+    strCode: 'DEMO_UNAVAILABLE',
+    strKind: 'http',
+    strMessage: fnTranslate('feedbackErrorDescription'),
+    strRequestId: 'demo-request-2026',
+  })
+
+  const objFeedback =
+    strState === 'loading' ? (
+      <PageLoadingState
+        strDescription={fnTranslate('feedbackLoadingDescription')}
+        strTitle={fnTranslate('feedbackLoadingTitle')}
+      />
+    ) : strState === 'empty' ? (
+      <PageEmptyState
+        objAction={
+          <Button type='button' onClick={() => fnSetState('loading')}>
+            {fnTranslate('commonReset')}
+          </Button>
+        }
+        strDescription={fnTranslate('feedbackEmptyDescription')}
+        strTitle={fnTranslate('feedbackEmptyTitle')}
+      />
+    ) : (
+      <PageErrorState
+        fnOnRetry={() => fnSetState('loading')}
+        objError={objDemoError}
+        strDescription={fnTranslate('feedbackErrorDescription')}
+        strTitle={fnTranslate('feedbackErrorTitle')}
+      />
+    )
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('feedbackDescription')}
+        strEyebrow={fnTranslate('pageEyebrow')}
+        strTitle={fnTranslate('feedbackTitle')}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('feedbackStateTitle')}</h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-4'>
+          <div className='flex flex-wrap gap-2'>
+            <Button variant='outline' onClick={() => fnSetState('loading')}>
+              {fnTranslate('feedbackShowLoading')}
+            </Button>
+            <Button variant='outline' onClick={() => fnSetState('empty')}>
+              {fnTranslate('feedbackShowEmpty')}
+            </Button>
+            <Button variant='outline' onClick={() => fnSetState('error')}>
+              {fnTranslate('feedbackShowError')}
+            </Button>
+            <Button
+              onClick={() =>
+                fnSetConfirmRequest({
+                  fnOnConfirm: () =>
+                    toast.success(fnTranslate('feedbackConfirmed')),
+                  objContent: fnTranslate('feedbackDialogContent'),
+                  strConfirmText: fnTranslate('feedbackConfirm'),
+                  strDescription: '',
+                  strTitle: fnTranslate('feedbackDialogTitle'),
+                })
+              }
+            >
+              {fnTranslate('feedbackOpenDialog')}
+            </Button>
+            <Button
+              variant='secondary'
+              onClick={() => toast.success(fnTranslate('feedbackToastContent'))}
+            >
+              {fnTranslate('feedbackShowToast')}
+            </Button>
+          </div>
+          {objFeedback}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('feedbackErrorRoutes')}</h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='flex flex-wrap gap-2'>
+          {arrErrorRoutes.map((strPath) => (
+            <Button key={strPath} asChild variant='outline'>
+              <Link to={strPath}>{strPath.slice(-3)}</Link>
+            </Button>
+          ))}
+        </CardContent>
+      </Card>
+
+      <AppConfirmDialog
+        fnOnRequestChange={fnSetConfirmRequest}
+        objRequest={objConfirmRequest}
+      />
+    </PageContainer>
+  )
+}

package/template/src/features/showcase/FileShowcasePage.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useState } from 'react'
+import type { IFileUploadContext } from '@/files'
+import { useLocaleMessages } from '@/locale'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { FilePreview } from '@/components/FilePreview'
+import { FileUpload } from '@/components/FileUpload'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objShowcaseMessages } from './messages'
+
+const objFileValidation = {
+  arrAcceptedExtensions: ['.jpg', '.jpeg', '.png', '.webp', '.pdf'],
+  arrAcceptedMimeTypes: ['image/*', 'application/pdf'],
+  nMaxBytes: 5 * 1024 * 1024,
+  nMaxFiles: 1,
+} as const
+
+async function fnDemoUpload({
+  arrFiles,
+  fnOnProgress,
+  objSignal,
+}: IFileUploadContext): Promise<File> {
+  const objFile = arrFiles[0]
+  if (!objFile) throw new Error('No file selected.')
+
+  for (const nPercent of [20, 50, 80, 100]) {
+    await new Promise<void>((fnResolve, fnReject) => {
+      const nTimer = window.setTimeout(fnResolve, 120)
+      objSignal.addEventListener(
+        'abort',
+        () => {
+          window.clearTimeout(nTimer)
+          fnReject(new DOMException('Upload canceled.', 'AbortError'))
+        },
+        { once: true }
+      )
+    })
+    fnOnProgress({
+      nLoadedBytes: Math.round((objFile.size * nPercent) / 100),
+      nPercent,
+      nTotalBytes: objFile.size,
+    })
+  }
+  return objFile
+}
+
+/** 演示文件校验、上传状态、取消重试和本地预览。 */
+export function FileShowcasePage() {
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+  const [objUploadedFile, fnSetUploadedFile] = useState<File>()
+  const fnHandleSuccess = useCallback((objFile: File) => {
+    fnSetUploadedFile(objFile)
+  }, [])
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('filesDescription')}
+        strEyebrow={fnTranslate('pageEyebrow')}
+        strTitle={fnTranslate('filesTitle')}
+      />
+
+      <div className='grid gap-6 xl:grid-cols-2'>
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h2>{fnTranslate('filesUploadTitle')}</h2>
+            </CardTitle>
+            <p className='text-sm leading-6 text-muted-foreground'>
+              {fnTranslate('filesUploadDescription')}
+            </p>
+          </CardHeader>
+          <CardContent>
+            <FileUpload
+              fnOnSuccess={fnHandleSuccess}
+              fnUpload={fnDemoUpload}
+              objValidation={objFileValidation}
+              strInputAriaLabel={fnTranslate('filesSelect')}
+              strSelectText={fnTranslate('filesSelect')}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h2>{fnTranslate('filesPreviewTitle')}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {objUploadedFile ? (
+              <FilePreview
+                objBlob={objUploadedFile}
+                strAlt={objUploadedFile.name}
+                strClassName='min-h-72'
+                strFileName={objUploadedFile.name}
+                strMimeType={objUploadedFile.type}
+                strTitle={fnTranslate('filesPreviewTitle')}
+              />
+            ) : (
+              <div className='flex min-h-72 items-center justify-center rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground'>
+                {fnTranslate('filesNoPreview')}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </PageContainer>
+  )
+}