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

package/template/src/features/errors/ForbiddenError.tsx

@@ -0,0 +1,34 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { useLocaleMessages } from '@/locale'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+export function ForbiddenError() {
+  const fnNavigate = useNavigate()
+  const { history: objHistory } = useRouter()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] leading-tight font-bold'>403</h1>
+        <span className='font-medium'>{fnTranslate('forbiddenTitle')}</span>
+        <p className='text-center text-muted-foreground'>
+          {fnTranslate('forbiddenDescriptionFirst')}
+          <br />
+          {fnTranslate('forbiddenDescriptionSecond')}
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => objHistory.go(-1)}>
+            {fnTranslate('back')}
+          </Button>
+          <Button
+            onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+          >
+            {fnTranslate('home')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/GeneralError.tsx

@@ -0,0 +1,46 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { useLocaleMessages } from '@/locale'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+type TGeneralErrorProps = React.HTMLAttributes<HTMLDivElement> & {
+  bMinimal?: boolean
+}
+
+export function GeneralError({
+  className: strClassName,
+  bMinimal = false,
+}: TGeneralErrorProps) {
+  const fnNavigate = useNavigate()
+  const { history: objHistory } = useRouter()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+  return (
+    <div className={cn('h-svh w-full', strClassName)}>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        {!bMinimal && (
+          <h1 className='text-[7rem] leading-tight font-bold'>500</h1>
+        )}
+        <span className='font-medium'>{fnTranslate('generalTitle')}</span>
+        <p className='text-center text-muted-foreground'>
+          {fnTranslate('generalDescriptionFirst')}
+          <br />
+          {fnTranslate('generalDescriptionSecond')}
+        </p>
+        {!bMinimal && (
+          <div className='mt-6 flex gap-4'>
+            <Button variant='outline' onClick={() => objHistory.go(-1)}>
+              {fnTranslate('back')}
+            </Button>
+            <Button
+              onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+            >
+              {fnTranslate('home')}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/MaintenanceError.tsx

@@ -0,0 +1,31 @@
+import { useNavigate } from '@tanstack/react-router'
+import { useLocaleMessages } from '@/locale'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+export function MaintenanceError() {
+  const fnNavigate = useNavigate()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] leading-tight font-bold'>503</h1>
+        <span className='font-medium'>{fnTranslate('maintenanceTitle')}</span>
+        <p className='text-center text-muted-foreground'>
+          {fnTranslate('maintenanceDescriptionFirst')}
+          <br />
+          {fnTranslate('maintenanceDescriptionSecond')}
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button
+            onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+          >
+            {fnTranslate('home')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/NotFoundError.tsx

@@ -0,0 +1,34 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { useLocaleMessages } from '@/locale'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+export function NotFoundError() {
+  const fnNavigate = useNavigate()
+  const { history: objHistory } = useRouter()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] leading-tight font-bold'>404</h1>
+        <span className='font-medium'>{fnTranslate('notFoundTitle')}</span>
+        <p className='text-center text-muted-foreground'>
+          {fnTranslate('notFoundDescriptionFirst')}
+          <br />
+          {fnTranslate('notFoundDescriptionSecond')}
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => objHistory.go(-1)}>
+            {fnTranslate('back')}
+          </Button>
+          <Button
+            onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+          >
+            {fnTranslate('home')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/RouteError.tsx

@@ -0,0 +1,72 @@
+import { useEffect } from 'react'
+import {
+  useNavigate,
+  useRouter,
+  useRouterState,
+  type ErrorComponentProps,
+} from '@tanstack/react-router'
+import { objAppConfig } from '@/config/appConfig'
+import { useLocaleMessages } from '@/locale'
+import { fnCaptureError } from '@/observability'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+export function RouteError({
+  error: objError,
+  reset: fnReset,
+}: ErrorComponentProps) {
+  const fnNavigate = useNavigate()
+  const objRouter = useRouter()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+  const strRouteId = useRouterState({
+    select: (objState) => objState.matches.at(-1)?.routeId ?? 'unknown',
+  })
+
+  useEffect(() => {
+    fnCaptureError(objError, {
+      strName: 'route.render_failed',
+      strSource: 'route',
+      objAttributes: { strRouteId },
+    })
+  }, [objError, strRouteId])
+
+  function fnRetry() {
+    fnReset()
+    void objRouter.invalidate()
+  }
+
+  return (
+    <div className='h-svh w-full'>
+      <div className='m-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-3 px-6 text-center'>
+        <h1 className='text-4xl font-bold'>{fnTranslate('routeTitle')}</h1>
+        <span className='font-medium'>{fnTranslate('routeSubtitle')}</span>
+        <p className='text-muted-foreground'>
+          {fnTranslate('routeDescriptionFirst')}
+          <br />
+          {fnTranslate('routeDescriptionSecond')}
+        </p>
+        <p className='font-mono text-xs text-muted-foreground'>
+          {fnTranslate('version')} v{objAppConfig.release.strVersion} ·{' '}
+          {objAppConfig.release.strEnvironment} ·{' '}
+          {objAppConfig.release.strCommit.slice(0, 12)}
+        </p>
+        {import.meta.env.DEV && (
+          <pre className='mt-3 max-h-40 w-full overflow-auto rounded-md border bg-muted p-3 text-left text-xs whitespace-pre-wrap text-destructive'>
+            {objError instanceof Error ? objError.message : String(objError)}
+          </pre>
+        )}
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={fnRetry}>
+            {fnTranslate('routeRetry')}
+          </Button>
+          <Button
+            onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+          >
+            {fnTranslate('home')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/UnauthorizedError.tsx

@@ -0,0 +1,34 @@
+import { useNavigate, useRouter } from '@tanstack/react-router'
+import { useLocaleMessages } from '@/locale'
+import { strDefaultAuthenticatedPath } from '@/lib/navigationRedirect'
+import { Button } from '@/components/ui/button'
+import { objErrorPageMessages } from './messages'
+
+export function UnauthorizedError() {
+  const fnNavigate = useNavigate()
+  const { history: objHistory } = useRouter()
+  const { fnTranslate } = useLocaleMessages(objErrorPageMessages)
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] leading-tight font-bold'>401</h1>
+        <span className='font-medium'>{fnTranslate('unauthorizedTitle')}</span>
+        <p className='text-center text-muted-foreground'>
+          {fnTranslate('unauthorizedDescriptionFirst')}
+          <br />
+          {fnTranslate('unauthorizedDescriptionSecond')}
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => objHistory.go(-1)}>
+            {fnTranslate('back')}
+          </Button>
+          <Button
+            onClick={() => fnNavigate({ to: strDefaultAuthenticatedPath })}
+          >
+            {fnTranslate('home')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/template/src/features/errors/index.ts

@@ -0,0 +1,6 @@
+export { ForbiddenError } from './ForbiddenError'
+export { GeneralError } from './GeneralError'
+export { MaintenanceError } from './MaintenanceError'
+export { NotFoundError } from './NotFoundError'
+export { RouteError } from './RouteError'
+export { UnauthorizedError } from './UnauthorizedError'

package/template/src/features/errors/messages.ts

@@ -0,0 +1,56 @@
+import { fnDefineLocaleMessages } from '@/locale'
+
+/** 错误页 Feature 自有的完整中英文语言包。 */
+export const objErrorPageMessages = fnDefineLocaleMessages({
+  'en-US': {
+    back: 'Go back',
+    forbiddenDescriptionFirst: 'You do not have permission to view this page.',
+    forbiddenDescriptionSecond: 'Contact an administrator to request access.',
+    forbiddenTitle: 'Forbidden',
+    generalDescriptionFirst: 'The service is temporarily unavailable.',
+    generalDescriptionSecond: 'Try again later.',
+    generalTitle: 'Something went wrong on the server',
+    home: 'Go home',
+    maintenanceDescriptionFirst: 'The system is temporarily unavailable.',
+    maintenanceDescriptionSecond: 'Try again later.',
+    maintenanceTitle: 'System maintenance',
+    notFoundDescriptionFirst: 'The page you requested does not exist',
+    notFoundDescriptionSecond: 'or may have been moved.',
+    notFoundTitle: 'Page not found',
+    routeDescriptionFirst:
+      'This is a browser rendering failure, not an HTTP 500 response.',
+    routeDescriptionSecond: 'Retry this page or return home.',
+    routeRetry: 'Retry this page',
+    routeSubtitle: 'The current page did not finish rendering',
+    routeTitle: 'Page rendering failed',
+    version: 'Version',
+    unauthorizedDescriptionFirst: 'Sign in with a valid account and password',
+    unauthorizedDescriptionSecond: 'before opening this page.',
+    unauthorizedTitle: 'Sign-in required',
+  },
+  'zh-CN': {
+    back: '返回上一页',
+    forbiddenDescriptionFirst: '你没有访问此页面的权限，',
+    forbiddenDescriptionSecond: '请联系管理员开通权限。',
+    forbiddenTitle: '无权访问',
+    generalDescriptionFirst: '服务暂时不可用，',
+    generalDescriptionSecond: '请稍后重试。',
+    generalTitle: '服务器出错了',
+    home: '返回首页',
+    maintenanceDescriptionFirst: '系统暂时不可用，',
+    maintenanceDescriptionSecond: '请稍后再试。',
+    maintenanceTitle: '系统维护中',
+    notFoundDescriptionFirst: '你访问的页面不存在，',
+    notFoundDescriptionSecond: '或者已经被移动。',
+    notFoundTitle: '页面不存在',
+    routeDescriptionFirst: '这是浏览器端页面错误，不代表服务器返回了 500。',
+    routeDescriptionSecond: '你可以重试当前页面，或者返回首页。',
+    routeRetry: '重试当前页面',
+    routeSubtitle: '当前页面没有正常完成渲染',
+    routeTitle: '页面运行异常',
+    version: '版本',
+    unauthorizedDescriptionFirst: '请先使用有效的账号和密码登录，',
+    unauthorizedDescriptionSecond: '再访问此页面。',
+    unauthorizedTitle: '未登录',
+  },
+})

package/template/src/features/home/index.tsx

@@ -0,0 +1,107 @@
+import { Link } from '@tanstack/react-router'
+import { objAppConfig } from '@/config/appConfig'
+import { useLocaleMessages } from '@/locale'
+import {
+  FileUp,
+  ListChecks,
+  MessageSquareMore,
+  ShieldCheck,
+  SlidersHorizontal,
+  TableProperties,
+} from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { objHomeMessages } from './messages'
+
+const arrShowcaseEntries = [
+  {
+    strTitleKey: 'showcaseAccessTitle',
+    strDescriptionKey: 'showcaseAccessDescription',
+    strTo: '/showcase/access',
+    Icon: ShieldCheck,
+  },
+  {
+    strTitleKey: 'showcaseTableTitle',
+    strDescriptionKey: 'showcaseTableDescription',
+    strTo: '/showcase/table',
+    Icon: TableProperties,
+  },
+  {
+    strTitleKey: 'showcaseFormTitle',
+    strDescriptionKey: 'showcaseFormDescription',
+    strTo: '/showcase/form',
+    Icon: ListChecks,
+  },
+  {
+    strTitleKey: 'showcaseMetadataTitle',
+    strDescriptionKey: 'showcaseMetadataDescription',
+    strTo: '/showcase/metadata',
+    Icon: SlidersHorizontal,
+  },
+  {
+    strTitleKey: 'showcaseFilesTitle',
+    strDescriptionKey: 'showcaseFilesDescription',
+    strTo: '/showcase/files',
+    Icon: FileUp,
+  },
+  {
+    strTitleKey: 'showcaseFeedbackTitle',
+    strDescriptionKey: 'showcaseFeedbackDescription',
+    strTo: '/showcase/feedback',
+    Icon: MessageSquareMore,
+  },
+] as const
+
+export function Home() {
+  const { fnTranslate } = useLocaleMessages(objHomeMessages)
+  const strMode = fnTranslate(
+    objAppConfig.runtime.strMode === 'demo' ? 'demoMode' : 'connectedMode'
+  )
+
+  return (
+    <PageContainer className='py-6 sm:py-8'>
+      <section className='space-y-2'>
+        <p className='text-sm font-medium text-primary'>Enterprise Scaffold</p>
+        <h1 className='text-2xl font-semibold tracking-tight sm:text-3xl'>
+          {objAppConfig.brand.strName}
+        </h1>
+        <p className='max-w-2xl text-sm leading-6 text-muted-foreground sm:text-base'>
+          {fnTranslate('introductionPrefix')} {strMode}{' '}
+          {fnTranslate('introductionSuffix')}
+        </p>
+      </section>
+
+      {objAppConfig.runtime.strMode === 'demo' ? (
+        <section
+          aria-label={fnTranslate('showcaseSection')}
+          className='grid gap-4 sm:grid-cols-2 xl:grid-cols-3'
+        >
+          {arrShowcaseEntries.map(
+            ({ strTitleKey, strDescriptionKey, strTo, Icon }) => (
+              <Link
+                key={strTitleKey}
+                className='group rounded-xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'
+                to={strTo}
+              >
+                <Card className='h-full transition-colors group-hover:border-primary/50 group-hover:bg-accent/30'>
+                  <CardHeader className='gap-3'>
+                    <span className='flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary'>
+                      <Icon aria-hidden='true' className='size-4' />
+                    </span>
+                    <CardTitle>{fnTranslate(strTitleKey)}</CardTitle>
+                  </CardHeader>
+                  <CardContent className='space-y-3 text-sm leading-6 text-muted-foreground'>
+                    <p>{fnTranslate(strDescriptionKey)}</p>
+                    <p className='font-medium text-primary'>
+                      {fnTranslate('showcaseOpen')}
+                    </p>
+                  </CardContent>
+                </Card>
+              </Link>
+            )
+          )}
+        </section>
+      ) : null}
+    </PageContainer>
+  )
+}

package/template/src/features/home/messages.ts

@@ -0,0 +1,59 @@
+import { fnDefineLocaleMessages } from '@/locale'
+
+/** 脚手架首页自有的完整中英文语言包。 */
+export const objHomeMessages = fnDefineLocaleMessages({
+  'en-US': {
+    connectedMode: 'connected',
+    demoMode: 'demo',
+    introductionPrefix: 'Currently running in',
+    introductionSuffix:
+      'mode. This project contains enterprise administration capabilities without industry business pages.',
+    showcaseAccessDescription:
+      'Switch the real demo authorization snapshot and inspect route, component, and action permissions.',
+    showcaseAccessTitle: 'Identity and access',
+    showcaseFeedbackDescription:
+      'Switch loading, empty and error states; operate dialogs, toasts and error routes.',
+    showcaseFeedbackTitle: 'Dialogs and feedback',
+    showcaseFilesDescription:
+      'Select a local image or PDF and exercise upload progress, validation and preview.',
+    showcaseFilesTitle: 'Upload and preview',
+    showcaseFormDescription:
+      'Fill fields, trigger validation and linkage, then inspect the submitted model.',
+    showcaseFormTitle: 'PageForm scenarios',
+    showcaseMetadataDescription:
+      'Load enums and parameters through backend-style sources and use typed lookups.',
+    showcaseMetadataTitle: 'Enums and parameters',
+    showcaseOpen: 'Open live demo →',
+    showcaseSection: 'Live scaffold demos',
+    showcaseTableDescription:
+      'Search, paginate, select, add, edit and delete rows in real table compositions.',
+    showcaseTableTitle: 'Table scenarios',
+  },
+  'zh-CN': {
+    connectedMode: '接入',
+    demoMode: '演示',
+    introductionPrefix: '当前运行于',
+    introductionSuffix:
+      '模式。这里仅提供企业管理通用能力，不预置任何行业业务。',
+    showcaseAccessDescription:
+      '切换真实演示授权快照，查看路由、组件和操作级权限如何同步变化。',
+    showcaseAccessTitle: '身份、会话与权限',
+    showcaseFeedbackDescription:
+      '切换加载、空态和错误态，实际操作弹窗、Toast 与错误路由。',
+    showcaseFeedbackTitle: '弹窗与反馈',
+    showcaseFilesDescription:
+      '选择本地图片或 PDF，体验上传进度、校验和文件预览。',
+    showcaseFilesTitle: '上传与预览',
+    showcaseFormDescription:
+      '填写不同字段、触发校验和联动，并查看最终提交模型。',
+    showcaseFormTitle: 'PageForm 场景',
+    showcaseMetadataDescription:
+      '通过后端式数据源加载枚举和参数，并使用类型安全的查询能力。',
+    showcaseMetadataTitle: '枚举与参数',
+    showcaseOpen: '进入实际演示 →',
+    showcaseSection: '脚手架实操演示',
+    showcaseTableDescription:
+      '在真实表格组合中体验搜索、分页、选择、新增、编辑和删除。',
+    showcaseTableTitle: '表格业务场景',
+  },
+})