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

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

@@ -0,0 +1,156 @@
+import { useMemo, useState } from 'react'
+import { useLocaleMessages } from '@/locale'
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AppPageForm, type IFormProp } from '@/components/AppPageForm'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objShowcaseMessages } from './messages'
+
+type TApplicationStatus = 'active' | 'pending' | 'disabled'
+
+interface IApplicationFormModel {
+  nQuota: number
+  strDepartment: string
+  strEmail: string
+  strName: string
+  strNotes: string
+  strStatus: TApplicationStatus
+}
+
+const objInitialFormModel: IApplicationFormModel = {
+  nQuota: 100,
+  strDepartment: 'technology',
+  strEmail: '',
+  strName: '',
+  strNotes: '',
+  strStatus: 'active',
+}
+
+/** 展示 PageForm 字段、联动、校验、脏状态和提交结果。 */
+export function FormShowcasePage() {
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+  const [objModel, fnSetModel] = useState(objInitialFormModel)
+  const [objSubmittedModel, fnSetSubmittedModel] =
+    useState<IApplicationFormModel>()
+  const [bIsDirty, fnSetDirty] = useState(false)
+  const objConfig = useMemo<IFormProp<IApplicationFormModel>>(
+    () => ({
+      confirmButtonText: fnTranslate('formSubmit'),
+      formItems: [
+        {
+          label: fnTranslate('formName'),
+          lengthGreaterThan: 2,
+          maxLength: 30,
+          prop: 'strName',
+          required: true,
+        },
+        {
+          label: fnTranslate('formDepartment'),
+          options: [
+            {
+              label: fnTranslate('formDepartmentTechnology'),
+              value: 'technology',
+            },
+            {
+              label: fnTranslate('formDepartmentOperations'),
+              value: 'operations',
+            },
+            { label: fnTranslate('formDepartmentFinance'), value: 'finance' },
+          ],
+          prop: 'strDepartment',
+          type: 'select',
+        },
+        {
+          isEmail: true,
+          label: fnTranslate('formEmail'),
+          prop: 'strEmail',
+          required: true,
+        },
+        {
+          inputType: 'number',
+          isPositiveInt: true,
+          label: fnTranslate('formQuota'),
+          prop: 'nQuota',
+          required: true,
+        },
+        {
+          label: fnTranslate('formStatus'),
+          options: [
+            { label: fnTranslate('statusActive'), value: 'active' },
+            { label: fnTranslate('statusPending'), value: 'pending' },
+            { label: fnTranslate('statusDisabled'), value: 'disabled' },
+          ],
+          prop: 'strStatus',
+          type: 'radio',
+        },
+        {
+          block: true,
+          label: fnTranslate('formNotes'),
+          maxLength: 200,
+          prop: 'strNotes',
+          rows: 4,
+          type: 'input',
+          inputType: 'textarea',
+          vIf: {
+            listen: ({ model: objCurrentModel }) =>
+              objCurrentModel.strStatus === 'pending',
+          },
+        },
+      ],
+      onAdd: async (objNextModel) => {
+        await Promise.resolve()
+        fnSetSubmittedModel(objNextModel)
+        return objNextModel
+      },
+    }),
+    [fnTranslate]
+  )
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('formDescription')}
+        strEyebrow={fnTranslate('pageEyebrow')}
+        strTitle={fnTranslate('formTitle')}
+      />
+
+      <div className='grid gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]'>
+        <Card>
+          <CardHeader className='flex-row items-center justify-between'>
+            <CardTitle>
+              <h2>{fnTranslate('formEditorTitle')}</h2>
+            </CardTitle>
+            <Badge variant={bIsDirty ? 'default' : 'secondary'}>
+              {fnTranslate(bIsDirty ? 'formDirty' : 'formPristine')}
+            </Badge>
+          </CardHeader>
+          <CardContent>
+            <AppPageForm
+              bProtectUnsavedChanges={false}
+              config={objConfig}
+              model={objModel}
+              onDirtyChange={fnSetDirty}
+              onModelChange={fnSetModel}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <h2>{fnTranslate('formSubmitted')}</h2>
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <pre className='overflow-auto rounded-lg bg-muted p-4 text-xs leading-6'>
+              {objSubmittedModel
+                ? JSON.stringify(objSubmittedModel, null, 2)
+                : fnTranslate('formNotSubmitted')}
+            </pre>
+          </CardContent>
+        </Card>
+      </div>
+    </PageContainer>
+  )
+}

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

@@ -0,0 +1,241 @@
+import { useLocale, useLocaleMessages } from '@/locale'
+import { RefreshCw } from 'lucide-react'
+import { fnCreateEnumCatalogSource, useEnum, useEnumCatalog } from '@/api/enums'
+import { MetadataProvider } from '@/api/metadata'
+import {
+  fnCreateGlobalParameterSource,
+  useBooleanGlobalParameter,
+  useGlobalParameterCatalog,
+  useNumberGlobalParameter,
+  useStringGlobalParameter,
+} from '@/api/parameters'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { EnumBadge } from '@/components/EnumBadge'
+import { EnumText } from '@/components/EnumText'
+import { PageErrorState, PageLoadingState } from '@/components/PageFeedback'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objShowcaseMessages } from './messages'
+
+const objDemoEnumSource = fnCreateEnumCatalogSource(async ({ strLocale }) => ({
+  enums: {
+    'application.level': [
+      {
+        label: strLocale === 'zh-CN' ? '标准版' : 'Standard',
+        sortOrder: 10,
+        value: 'standard',
+      },
+      {
+        label: strLocale === 'zh-CN' ? '企业版' : 'Enterprise',
+        sortOrder: 20,
+        value: 'enterprise',
+      },
+    ],
+    'application.status': [
+      {
+        color: 'success',
+        label: strLocale === 'zh-CN' ? '启用' : 'Active',
+        sortOrder: 10,
+        value: 'active',
+      },
+      {
+        color: 'warning',
+        label: strLocale === 'zh-CN' ? '待审核' : 'Pending',
+        sortOrder: 20,
+        value: 'pending',
+      },
+      {
+        color: 'neutral',
+        label: strLocale === 'zh-CN' ? '停用' : 'Disabled',
+        sortOrder: 30,
+        value: 'disabled',
+      },
+    ],
+  },
+  locale: strLocale,
+  version: 'demo-enum-v1',
+}))
+
+const objDemoParameterSource = fnCreateGlobalParameterSource(
+  async ({ strLocale }) => ({
+    locale: strLocale,
+    parameters: {
+      'export.enabled': {
+        description: 'Whether users can export list data.',
+        type: 'boolean',
+        value: true,
+      },
+      'export.maxRows': {
+        description: 'Maximum rows allowed in a single export.',
+        type: 'number',
+        value: 5000,
+      },
+      'support.email': {
+        description: 'Enterprise support contact.',
+        type: 'string',
+        value: 'support@example.com',
+      },
+    },
+    version: 'demo-parameter-v1',
+  })
+)
+
+function MetadataShowcaseContent() {
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+  const objEnumCatalog = useEnumCatalog()
+  const objStatusEnum = useEnum('application.status')
+  const objParameterCatalog = useGlobalParameterCatalog()
+  const objExportEnabled = useBooleanGlobalParameter('export.enabled')
+  const objMaxExportRows = useNumberGlobalParameter('export.maxRows')
+  const objSupportEmail = useStringGlobalParameter('support.email')
+  const bIsLoading = objEnumCatalog.bIsLoading || objParameterCatalog.bIsLoading
+  const objError = objEnumCatalog.objError ?? objParameterCatalog.objError
+
+  if (bIsLoading) {
+    return <PageLoadingState strClassName='mt-6' />
+  }
+  if (objError) {
+    return (
+      <PageErrorState
+        fnOnRetry={() => {
+          void Promise.all([
+            objEnumCatalog.fnRefetch(),
+            objParameterCatalog.fnRefetch(),
+          ])
+        }}
+        objError={objError}
+        strClassName='mt-6'
+      />
+    )
+  }
+
+  const arrStatusValues = objEnumCatalog.fnGetValues('application.status')
+  const strActiveLabel = objStatusEnum.fnGetLabel('active')
+
+  return (
+    <div className='grid gap-6 xl:grid-cols-2'>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('metadataEnumTitle')}</h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-5 text-sm'>
+          <dl className='grid gap-3 sm:grid-cols-2'>
+            <div>
+              <dt className='text-muted-foreground'>
+                {fnTranslate('metadataVersion')}
+              </dt>
+              <dd className='font-medium'>{objEnumCatalog.strVersion}</dd>
+            </div>
+            <div>
+              <dt className='text-muted-foreground'>
+                {fnTranslate('metadataEnumKeys')}
+              </dt>
+              <dd className='font-medium'>
+                {objEnumCatalog.arrKeys.join(', ')}
+              </dd>
+            </div>
+            <div>
+              <dt className='text-muted-foreground'>
+                {fnTranslate('metadataValues')}
+              </dt>
+              <dd className='font-mono'>{arrStatusValues.join(', ')}</dd>
+            </div>
+            <div>
+              <dt className='text-muted-foreground'>
+                {fnTranslate('metadataLookup')}
+              </dt>
+              <dd className='font-mono'>
+                {strActiveLabel} →{' '}
+                {String(objStatusEnum.fnGetValue(strActiveLabel))}
+              </dd>
+            </div>
+          </dl>
+          <div className='flex flex-wrap items-center gap-3 rounded-lg border p-4'>
+            {arrStatusValues.map((objValue) => (
+              <EnumBadge
+                key={String(objValue)}
+                objValue={objValue}
+                strEnumKey='application.status'
+              />
+            ))}
+            <EnumText objValue='enterprise' strEnumKey='application.level' />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('metadataParameterTitle')}</h2>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className='space-y-3 text-sm'>
+          {objParameterCatalog.arrParameters.map((objParameter) => (
+            <div
+              key={objParameter.strKey}
+              className='flex items-center justify-between gap-4 rounded-lg border p-3'
+            >
+              <div>
+                <p className='font-mono font-medium'>{objParameter.strKey}</p>
+                <p className='text-muted-foreground'>
+                  {objParameter.description}
+                </p>
+              </div>
+              <Badge variant='outline'>
+                {JSON.stringify(objParameter.value)}
+              </Badge>
+            </div>
+          ))}
+          <p className='rounded-lg bg-muted p-3 font-mono text-xs'>
+            typed: {String(objExportEnabled.value)} / {objMaxExportRows.value} /{' '}
+            {objSupportEmail.value}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Button
+        className='w-fit xl:col-span-2'
+        disabled={objEnumCatalog.bIsFetching || objParameterCatalog.bIsFetching}
+        variant='outline'
+        onClick={() => {
+          void Promise.all([
+            objEnumCatalog.fnRefetch(),
+            objParameterCatalog.fnRefetch(),
+          ])
+        }}
+      >
+        <RefreshCw
+          className={objEnumCatalog.bIsFetching ? 'animate-spin' : undefined}
+        />
+        {fnTranslate('metadataRefresh')}
+      </Button>
+    </div>
+  )
+}
+
+/** 使用与真实后端相同的数据源契约演示枚举和全局参数系统。 */
+export function MetadataShowcasePage() {
+  const { strLocale } = useLocale()
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('metadataDescription')}
+        strEyebrow={fnTranslate('pageEyebrow')}
+        strTitle={fnTranslate('metadataTitle')}
+      />
+      <MetadataProvider
+        objEnumCatalogSource={objDemoEnumSource}
+        objGlobalParameterSource={objDemoParameterSource}
+        strLocale={strLocale}
+      >
+        <MetadataShowcaseContent />
+      </MetadataProvider>
+    </PageContainer>
+  )
+}

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

@@ -0,0 +1,24 @@
+interface IShowcasePageHeaderProps {
+  strDescription: string
+  strEyebrow: string
+  strTitle: string
+}
+
+/** 演示页面统一标题区，只负责页面语义和说明层级。 */
+export function ShowcasePageHeader({
+  strDescription,
+  strEyebrow,
+  strTitle,
+}: IShowcasePageHeaderProps) {
+  return (
+    <header className='space-y-2'>
+      <p className='text-sm font-medium text-primary'>{strEyebrow}</p>
+      <h1 className='text-2xl font-semibold tracking-tight sm:text-3xl'>
+        {strTitle}
+      </h1>
+      <p className='max-w-3xl text-sm leading-6 text-muted-foreground sm:text-base'>
+        {strDescription}
+      </p>
+    </header>
+  )
+}