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

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

@@ -0,0 +1,436 @@
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+} from 'react'
+import { useLocaleMessages } from '@/locale'
+import { Plus, Power, RotateCcw } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  AppDataTable,
+  type IAppDataTableColumn,
+} from '@/components/AppDataTable'
+import { AppDialog } from '@/components/AppDialog'
+import { AppPageForm, type IFormProp } from '@/components/AppPageForm'
+import { PageContainer } from '@/components/layout/PageContainer'
+import { ShowcasePageHeader } from './ShowcasePageHeader'
+import { objShowcaseMessages } from './messages'
+
+type TDemoStatus = 'active' | 'disabled' | 'pending'
+
+interface IDemoRecordDraft {
+  strName: string
+  strOwner: string
+  strStatus: TDemoStatus
+}
+
+interface IDemoRecord extends IDemoRecordDraft {
+  nId: number
+}
+
+type TAdvancedTableDemoModule = {
+  AdvancedTableDemo: ComponentType
+}
+
+const objAdvancedTableDemoModules = import.meta.env.DEV
+  ? import.meta.glob<TAdvancedTableDemoModule>('./AdvancedTableDemo.tsx')
+  : {}
+const fnLoadAdvancedTableDemo =
+  objAdvancedTableDemoModules['./AdvancedTableDemo.tsx']
+const AdvancedTableDemo = fnLoadAdvancedTableDemo
+  ? lazy(() =>
+      fnLoadAdvancedTableDemo().then((objModule) => ({
+        default: objModule.AdvancedTableDemo,
+      }))
+    )
+  : null
+
+const arrInitialRecords: IDemoRecord[] = [
+  { nId: 1, strName: '门户管理', strOwner: '王琳', strStatus: 'active' },
+  { nId: 2, strName: '运营工作台', strOwner: '陈宇', strStatus: 'pending' },
+  { nId: 3, strName: '数据中心', strOwner: '李敏', strStatus: 'active' },
+  { nId: 4, strName: '内容审核', strOwner: '周宁', strStatus: 'disabled' },
+  { nId: 5, strName: '客户服务', strOwner: '赵晨', strStatus: 'active' },
+  { nId: 6, strName: '流程中心', strOwner: '孙悦', strStatus: 'pending' },
+  { nId: 7, strName: '配置中心', strOwner: '吴桐', strStatus: 'active' },
+]
+
+function fnCreateEmptyDraft(): IDemoRecordDraft {
+  return { strName: '', strOwner: '', strStatus: 'active' }
+}
+
+/** 演示轻量 CRUD 组合与可选高级表格的实际交互。 */
+export function TableShowcasePage() {
+  const { fnTranslate } = useLocaleMessages(objShowcaseMessages)
+  const [arrRecords, fnSetRecords] = useState(arrInitialRecords)
+  const [bIsDialogOpen, fnSetDialogOpen] = useState(false)
+  const [nEditingId, fnSetEditingId] = useState<number>()
+  const [nPage, fnSetPage] = useState(1)
+  const [objDraft, fnSetDraft] = useState<IDemoRecordDraft>(fnCreateEmptyDraft)
+  const [objSelectedIds, fnSetSelectedIds] = useState<ReadonlySet<number>>(
+    new Set()
+  )
+  const [strSearch, fnSetSearch] = useState('')
+  const [strStatusFilter, fnSetStatusFilter] = useState<TDemoStatus | 'all'>(
+    'all'
+  )
+  const objNextIdRef = useRef(8)
+  const nPageSize = 5
+  const objStatusLabels = useMemo<Record<TDemoStatus, string>>(
+    () => ({
+      active: fnTranslate('statusActive'),
+      disabled: fnTranslate('statusDisabled'),
+      pending: fnTranslate('statusPending'),
+    }),
+    [fnTranslate]
+  )
+  const arrFilteredRecords = useMemo(() => {
+    const strKeyword = strSearch.trim().toLocaleLowerCase()
+    return arrRecords.filter(
+      (objRecord) =>
+        (strStatusFilter === 'all' ||
+          objRecord.strStatus === strStatusFilter) &&
+        (!strKeyword ||
+          objRecord.strName.toLocaleLowerCase().includes(strKeyword) ||
+          objRecord.strOwner.toLocaleLowerCase().includes(strKeyword))
+    )
+  }, [arrRecords, strSearch, strStatusFilter])
+  const nTotalPages = Math.max(
+    1,
+    Math.ceil(arrFilteredRecords.length / nPageSize)
+  )
+  const arrPageRecords = arrFilteredRecords.slice(
+    (nPage - 1) * nPageSize,
+    nPage * nPageSize
+  )
+
+  const fnSaveRecord = useCallback(
+    (objModel: IDemoRecordDraft) => {
+      if (nEditingId === undefined) {
+        fnSetRecords((arrCurrent) => [
+          ...arrCurrent,
+          { ...objModel, nId: objNextIdRef.current++ },
+        ])
+      } else {
+        fnSetRecords((arrCurrent) =>
+          arrCurrent.map((objRecord) =>
+            objRecord.nId === nEditingId
+              ? { ...objRecord, ...objModel }
+              : objRecord
+          )
+        )
+      }
+      fnSetDialogOpen(false)
+      fnSetEditingId(undefined)
+      fnSetDraft(fnCreateEmptyDraft())
+    },
+    [nEditingId]
+  )
+  const objFormConfig = useMemo<IFormProp<IDemoRecordDraft>>(
+    () => ({
+      confirmButtonText: fnTranslate('commonSubmit'),
+      feedback: { success: false },
+      formItems: [
+        {
+          label: fnTranslate('commonName'),
+          prop: 'strName',
+          required: true,
+        },
+        {
+          label: fnTranslate('commonOwner'),
+          prop: 'strOwner',
+          required: true,
+        },
+        {
+          label: fnTranslate('commonStatus'),
+          options: Object.entries(objStatusLabels).map(
+            ([strValue, strLabel]) => ({ label: strLabel, value: strValue })
+          ),
+          prop: 'strStatus',
+          type: 'select',
+        },
+      ],
+      onAdd: fnSaveRecord,
+      onEdit: fnSaveRecord,
+    }),
+    [fnSaveRecord, fnTranslate, objStatusLabels]
+  )
+
+  function fnToggleSelection(nId: number, bSelected: boolean) {
+    fnSetSelectedIds((objCurrent) => {
+      const objNext = new Set(objCurrent)
+      if (bSelected) objNext.add(nId)
+      else objNext.delete(nId)
+      return objNext
+    })
+  }
+
+  function fnOpenCreate() {
+    fnSetEditingId(undefined)
+    fnSetDraft(fnCreateEmptyDraft())
+    fnSetDialogOpen(true)
+  }
+
+  function fnOpenEdit(objRecord: IDemoRecord) {
+    fnSetEditingId(objRecord.nId)
+    fnSetDraft({
+      strName: objRecord.strName,
+      strOwner: objRecord.strOwner,
+      strStatus: objRecord.strStatus,
+    })
+    fnSetDialogOpen(true)
+  }
+
+  function fnDeleteRecord(nId: number) {
+    fnSetRecords((arrCurrent) =>
+      arrCurrent.filter((objRecord) => objRecord.nId !== nId)
+    )
+    fnToggleSelection(nId, false)
+  }
+
+  function fnActivateSelected() {
+    fnSetRecords((arrCurrent) =>
+      arrCurrent.map((objRecord) =>
+        objSelectedIds.has(objRecord.nId)
+          ? { ...objRecord, strStatus: 'active' }
+          : objRecord
+      )
+    )
+    fnSetSelectedIds(new Set())
+  }
+
+  const arrColumns: IAppDataTableColumn<IDemoRecord>[] = [
+    {
+      strKey: 'selection',
+      strHeader: fnTranslate('tableSelected').replace(
+        '{count}',
+        String(objSelectedIds.size)
+      ),
+      strCellClassName: 'w-28',
+      fnRender: (objRecord) => (
+        <Checkbox
+          aria-label={`${fnTranslate('commonName')} ${objRecord.strName}`}
+          checked={objSelectedIds.has(objRecord.nId)}
+          onCheckedChange={(objChecked) =>
+            fnToggleSelection(objRecord.nId, objChecked === true)
+          }
+        />
+      ),
+    },
+    {
+      strKey: 'name',
+      strHeader: fnTranslate('commonName'),
+      fnRender: (objRecord) => (
+        <span className='font-medium'>{objRecord.strName}</span>
+      ),
+    },
+    {
+      strKey: 'owner',
+      strHeader: fnTranslate('commonOwner'),
+      fnRender: (objRecord) => objRecord.strOwner,
+    },
+    {
+      strKey: 'status',
+      strHeader: fnTranslate('commonStatus'),
+      fnRender: (objRecord) => (
+        <Badge
+          variant={
+            objRecord.strStatus === 'active'
+              ? 'default'
+              : objRecord.strStatus === 'pending'
+                ? 'secondary'
+                : 'outline'
+          }
+        >
+          {objStatusLabels[objRecord.strStatus]}
+        </Badge>
+      ),
+    },
+    {
+      strKey: 'actions',
+      strHeader: fnTranslate('commonActions'),
+      fnRender: (objRecord) => (
+        <div className='flex gap-2'>
+          <Button
+            size='xs'
+            variant='outline'
+            onClick={() => fnOpenEdit(objRecord)}
+          >
+            {fnTranslate('commonEdit')}
+          </Button>
+          <Button
+            size='xs'
+            variant='ghost'
+            onClick={() => fnDeleteRecord(objRecord.nId)}
+          >
+            {fnTranslate('commonDelete')}
+          </Button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <PageContainer className='space-y-6 py-6 sm:py-8'>
+      <ShowcasePageHeader
+        strDescription={fnTranslate('tableDescription')}
+        strEyebrow={fnTranslate('pageEyebrow')}
+        strTitle={fnTranslate('tableTitle')}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('tableCoreTitle')}</h2>
+          </CardTitle>
+          <p className='text-sm text-muted-foreground'>
+            {fnTranslate('tableCoreDescription')}
+          </p>
+        </CardHeader>
+        <CardContent className='space-y-4'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <Input
+              aria-label={fnTranslate('tableSearchPlaceholder')}
+              className='w-72'
+              placeholder={fnTranslate('tableSearchPlaceholder')}
+              value={strSearch}
+              onChange={(objEvent) => {
+                fnSetSearch(objEvent.target.value)
+                fnSetPage(1)
+              }}
+            />
+            <Select
+              value={strStatusFilter}
+              onValueChange={(strValue) => {
+                fnSetStatusFilter(strValue as TDemoStatus | 'all')
+                fnSetPage(1)
+              }}
+            >
+              <SelectTrigger aria-label={fnTranslate('commonStatus')}>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value='all'>{fnTranslate('commonAll')}</SelectItem>
+                {Object.entries(objStatusLabels).map(([strValue, strLabel]) => (
+                  <SelectItem key={strValue} value={strValue}>
+                    {strLabel}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button type='button' onClick={fnOpenCreate}>
+              <Plus />
+              {fnTranslate('commonAdd')}
+            </Button>
+            <Button
+              disabled={objSelectedIds.size === 0}
+              type='button'
+              variant='outline'
+              onClick={fnActivateSelected}
+            >
+              <Power />
+              {fnTranslate('tableBulkActivate')}
+            </Button>
+            <Button
+              type='button'
+              variant='ghost'
+              onClick={() => {
+                fnSetRecords(arrInitialRecords)
+                fnSetSelectedIds(new Set())
+                fnSetPage(1)
+              }}
+            >
+              <RotateCcw />
+              {fnTranslate('commonReset')}
+            </Button>
+          </div>
+
+          <AppDataTable
+            arrColumns={arrColumns}
+            arrRows={arrPageRecords}
+            fnGetRowKey={(objRecord) => objRecord.nId}
+            strAriaLabel={fnTranslate('tableCoreTitle')}
+          />
+          <div className='flex items-center justify-end gap-3 text-sm'>
+            <Button
+              disabled={nPage === 1}
+              size='sm'
+              variant='outline'
+              onClick={() => fnSetPage((nCurrent) => nCurrent - 1)}
+            >
+              {fnTranslate('commonPrevious')}
+            </Button>
+            <span>
+              {fnTranslate('tablePage')
+                .replace('{current}', String(nPage))
+                .replace('{total}', String(nTotalPages))}
+            </span>
+            <Button
+              disabled={nPage >= nTotalPages}
+              size='sm'
+              variant='outline'
+              onClick={() => fnSetPage((nCurrent) => nCurrent + 1)}
+            >
+              {fnTranslate('commonNext')}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <h2>{fnTranslate('advancedTableTitle')}</h2>
+          </CardTitle>
+          <p className='text-sm text-muted-foreground'>
+            {fnTranslate('advancedTableDescription')}
+          </p>
+        </CardHeader>
+        <CardContent>
+          {AdvancedTableDemo ? (
+            <Suspense fallback={<p role='status'>Loading AppTable…</p>}>
+              <AdvancedTableDemo />
+            </Suspense>
+          ) : (
+            <p className='rounded-lg border border-dashed p-6 text-sm text-muted-foreground'>
+              {fnTranslate('advancedTableUnavailable')}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      <AppDialog
+        bOpen={bIsDialogOpen}
+        fnOnOpenChange={fnSetDialogOpen}
+        strTitle={
+          nEditingId === undefined
+            ? fnTranslate('commonAdd')
+            : fnTranslate('commonEdit')
+        }
+      >
+        <AppPageForm
+          bProtectUnsavedChanges={false}
+          config={objFormConfig}
+          formType={nEditingId === undefined ? 'add' : 'edit'}
+          model={objDraft}
+          onModelChange={fnSetDraft}
+        />
+      </AppDialog>
+    </PageContainer>
+  )
+}

package/template/src/features/showcase/accessMessages.ts

@@ -0,0 +1,67 @@
+import { fnDefineLocaleMessages } from '@/locale'
+
+/** 身份、会话与权限演示页自有文案。 */
+export const objAccessShowcaseMessages = fnDefineLocaleMessages({
+  'en-US': {
+    actionApprove: 'Approve record',
+    actionEdit: 'Edit record',
+    actionExport: 'Export data',
+    actionRead: 'Read data',
+    allowed: 'Allowed',
+    anyRule: 'Any: export or approve',
+    denied: 'Denied',
+    description:
+      'Switch the real demo session authorization snapshot and observe usePermission, Can, navigation, and action states update from one source.',
+    hiddenFallback: 'The protected action is hidden by Can.',
+    identityAccount: 'Account',
+    identityOrganization: 'Organization',
+    identityRole: 'Role codes',
+    identityTenant: 'Tenant',
+    identityTitle: 'Current authenticated identity',
+    matchAllRule: 'All: edit and approve',
+    permissionCode: 'Permission code',
+    permissionResult: 'Current result',
+    permissionTitle: 'Permission evaluation matrix',
+    resetAdmin: 'Reset administrator',
+    scenarioAdmin: 'Administrator',
+    scenarioDescription:
+      'These controls update the same session permissions consumed by routes, menu search, usePermission, and Can. Leaving this page restores the original identity.',
+    scenarioOperator: 'Operator',
+    scenarioReadOnly: 'Read-only user',
+    scenarioTitle: 'Switch authorization snapshot',
+    sessionGeneration: 'Session generation',
+    title: 'Identity and access control',
+    visibleActionTitle: 'Actual protected actions',
+  },
+  'zh-CN': {
+    actionApprove: '审批记录',
+    actionEdit: '编辑记录',
+    actionExport: '导出数据',
+    actionRead: '读取数据',
+    allowed: '允许',
+    anyRule: '任一满足：导出或审批',
+    denied: '拒绝',
+    description:
+      '切换真实演示会话的授权快照，观察 usePermission、Can、导航和操作状态如何从同一权限源同步更新。',
+    hiddenFallback: '受保护操作已被 Can 隐藏。',
+    identityAccount: '登录账号',
+    identityOrganization: '所属组织',
+    identityRole: '角色编码',
+    identityTenant: '租户',
+    identityTitle: '当前认证身份',
+    matchAllRule: '全部满足：编辑和审批',
+    permissionCode: '权限码',
+    permissionResult: '当前结果',
+    permissionTitle: '权限判断矩阵',
+    resetAdmin: '恢复管理员',
+    scenarioAdmin: '管理员',
+    scenarioDescription:
+      '这里修改的就是路由、菜单搜索、usePermission 和 Can 共同消费的会话权限；离开页面后会恢复原始身份。',
+    scenarioOperator: '运营人员',
+    scenarioReadOnly: '只读用户',
+    scenarioTitle: '切换授权快照',
+    sessionGeneration: '会话版本',
+    title: '身份、会话与权限',
+    visibleActionTitle: '实际受保护操作',
+  },
+})

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

@@ -0,0 +1,6 @@
+export { AccessShowcasePage } from './AccessShowcasePage'
+export { FeedbackShowcasePage } from './FeedbackShowcasePage'
+export { FileShowcasePage } from './FileShowcasePage'
+export { FormShowcasePage } from './FormShowcasePage'
+export { MetadataShowcasePage } from './MetadataShowcasePage'
+export { TableShowcasePage } from './TableShowcasePage'