create-bubbles 0.1.26 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/roles.tsx

@@ -0,0 +1,173 @@
+import { PlusOutlined } from '@ant-design/icons'
+import type { ActionType, ProColumns } from '@ant-design/pro-components'
+import { App, Button, Popconfirm, Space, Tag } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { RoleRecord } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { useLatestDialogRequest } from '@/hooks/useLatestDialogRequest'
+import { managementApi } from './api'
+import RoleFormDialog, { type RoleFormDialogRef } from './components/RoleFormDialog'
+import RolePermissionsDialog, {
+  type RolePermissionsDialogRef,
+} from './components/RolePermissionsDialog'
+import { useAccess, useManagementAction } from './use-access'
+
+/** 管理当前作用域的角色，并按授权范围开放角色和权限编辑。 */
+export default function RolesPage() {
+  const access = useAccess()
+  const api = managementApi(access.scope)
+  const execute = useManagementAction()
+  const { message } = App.useApp()
+  const actionRef = useRef<ActionType>(null)
+  const formRef = useRef<RoleFormDialogRef>(null)
+  const permissionsRef = useRef<RolePermissionsDialogRef>(null)
+  const permissionsRequest = useLatestDialogRequest(accessScopeKey(access.scope))
+  const { tr } = useI18n()
+  const allowed = (operation: string) =>
+    access.permissionKeys.includes(`${access.scope.type}.roles.${operation}`)
+  /** 重新查询当前表格，使管理操作立即反映到列表。 */
+  const refresh = () => {
+    void actionRef.current?.reload()
+  }
+
+  /** 同时读取角色详情和权限目录，按编辑权限打开配置弹窗。 */
+  async function openPermissions(record: RoleRecord) {
+    await permissionsRequest.run({
+      targetId: record.id,
+      load: () => Promise.all([api.role(record.id), api.permissions()]),
+      onSuccess: ([latest, tree]) => {
+        permissionsRef.current?.show(
+          latest,
+          tree,
+          Boolean(latest.builtin) || !allowed('permissions'),
+        )
+      },
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载权限'))
+      },
+    })
+  }
+
+  const columns: ProColumns<RoleRecord>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索角色名称') },
+    },
+    { title: tr('角色名称'), dataIndex: 'name', search: false, width: 180 },
+    {
+      title: tr('类型'),
+      search: false,
+      width: 120,
+      render: (_, record) => (
+        <Tag color={record.builtin ? 'blue' : 'default'}>
+          {record.builtin ? tr('内置角色') : tr('自定义角色')}
+        </Tag>
+      ),
+    },
+    { title: tr('说明'), dataIndex: 'description', search: false, ellipsis: true },
+    { title: tr('已分配人数'), dataIndex: 'memberCount', search: false, width: 120 },
+    {
+      title: tr('权限数量'),
+      search: false,
+      width: 100,
+      render: (_, record) => record.permissionKeys.length,
+    },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: 270,
+      render: (_, record) => (
+        <Space size={4} wrap>
+          <Button
+            type="link"
+            size="small"
+            loading={permissionsRequest.loadingId === record.id}
+            onClick={() => void openPermissions(record)}
+          >
+            {record.builtin || !allowed('permissions') ? tr('查看权限') : tr('配置权限')}
+          </Button>
+          {!record.builtin && allowed('update') && (
+            <Button type="link" size="small" onClick={() => formRef.current?.show(record)}>
+              {tr('编辑')}
+            </Button>
+          )}
+          {!record.builtin && allowed('delete') && (
+            <Popconfirm
+              title={tr('删除角色？')}
+              description={tr('只能删除未分配给任何成员的自定义角色。')}
+              onConfirm={() => execute(() => api.deleteRole(record.id, record.version), refresh)}
+            >
+              <Button type="link" size="small" danger disabled={record.memberCount > 0}>
+                {tr('删除')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+  return (
+    <>
+      <FullHeightProTable<RoleRecord>
+        rowKey="id"
+        actionRef={actionRef}
+        columns={columns}
+        headerTitle={tr('角色管理')}
+        pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+        request={
+          /** 查询当前作用域角色，并转换为表格分页结果。 */ async (params) => {
+            const result = await api.roles({
+              page: params.current,
+              pageSize: params.pageSize,
+              query: params.query as string | undefined,
+            })
+            return { data: result.items, total: result.total, success: true }
+          }
+        }
+        onRequestError={(error) => {
+          if (error.name !== 'AbortError') void message.error(error.message)
+        }}
+        toolBarRender={() =>
+          allowed('create')
+            ? [
+                <Button
+                  key="add"
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => formRef.current?.show()}
+                >
+                  {tr('创建角色')}
+                </Button>,
+              ]
+            : []
+        }
+      />
+      <RoleFormDialog
+        ref={formRef}
+        onSave={(values, record) =>
+          execute(
+            () =>
+              record
+                ? api.updateRole(record.id, { ...values, expectedVersion: record.version })
+                : api.createRole(values),
+            refresh,
+          )
+        }
+      />
+      <RolePermissionsDialog
+        ref={permissionsRef}
+        onSave={(record, permissionKeys) =>
+          execute(
+            () =>
+              api.rolePermissions(record.id, { permissionKeys, expectedVersion: record.version }),
+            refresh,
+          )
+        }
+      />
+    </>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/use-access.ts

@@ -0,0 +1,35 @@
+import { App } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { AccessContext } from 'shared/types'
+import { refreshAccess } from '@/utils/request/workspace'
+
+/** 从父布局读取当前空间权限，保证页面与布局使用同一份数据。 */
+export function useAccess() {
+  return useOutletContext<AccessContext>()
+}
+
+/** 统一执行管理操作，处理取消、版本冲突提示及保存后的权限刷新。 */
+export function useManagementAction() {
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  return /** 执行管理请求并反馈结果，成功后刷新权限，冲突时提示重新加载。 */ async (
+    action: () => Promise<unknown>,
+    onSuccess?: () => void,
+  ) => {
+    try {
+      await action()
+      void message.success(tr('已保存'))
+      onSuccess?.()
+      refreshAccess()
+      return true
+    } catch (error) {
+      if ((error as Error).name === 'AbortError') return false
+      const suffix =
+        (error as { status?: number }).status === 409 ? tr(' 请刷新数据后检查最新内容再保存。') : ''
+      void message.error(
+        `${error instanceof Error ? error.message : tr('操作失败，请重试')}${suffix}`,
+      )
+      return false
+    }
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/error/404.tsx

@@ -0,0 +1,20 @@
+import { Button, Result } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+
+/** 提示路由地址不存在，并提供返回工作空间的入口。 */
+export default function NotFound() {
+  const { tr } = useI18n()
+
+  return (
+    <Result
+      status="404"
+      title={tr('页面不存在')}
+      subTitle={tr('请检查地址，或返回工作空间重新选择。')}
+      extra={
+        <Link to="/workspaces">
+          <Button type="primary">{tr('返回工作空间')}</Button>
+        </Link>
+      }
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/error/error.tsx

@@ -0,0 +1,42 @@
+import { Button, Result, Space } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+
+/** 根据路由错误状态展示访问失败原因、重试及返回入口。 */
+export default function RouteError() {
+  const error = useRouteError()
+  const { tr } = useI18n()
+  const revalidator = useRevalidator()
+  const status = isRouteErrorResponse(error) ? error.status : (error as { status?: number })?.status
+  const title =
+    status === 403
+      ? tr('暂无访问权限')
+      : status === 404
+        ? tr('页面或资源不存在')
+        : tr('暂时无法加载')
+  return (
+    <Result
+      status={status === 403 ? '403' : status === 404 ? '404' : 'error'}
+      title={title}
+      subTitle={
+        status === 404
+          ? tr('请检查地址，或返回工作空间重新选择。')
+          : error instanceof Error
+            ? error.message
+            : tr('请重试；如果问题持续，请联系管理员。')
+      }
+      extra={
+        <Space>
+          <Link to="/workspaces">
+            <Button type="primary">{tr('返回工作空间')}</Button>
+          </Link>
+          <Button
+            loading={revalidator.state === 'loading'}
+            onClick={() => void revalidator.revalidate()}
+          >
+            {tr('重新加载')}
+          </Button>
+        </Space>
+      }
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/examples/i18n/index.tsx

@@ -1,49 +1,31 @@
-import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
-import I18nProvider, { useI18n } from '@bubblesjs/i18n-react'
+import { useI18n } from '@bubblesjs/i18n-react'
 import { PageContainer, ProCard } from '@ant-design/pro-components'
 import { Button } from 'antd'
+import { DEFAULT_LOCALE, isAppLocale } from '@/i18n/config'
 import styles from './index.module.css'
 
-const leftStore = await i18n.init({
-  locale: 'zh_CN',
-  loaderMessage: async (locale?: string) => (await import(`@/locales/${locale}.json`))?.default,
-  storageKey: 'i18n-home-left',
-  storage: createJsonStorage(localStorage),
-})
-
-const rightStore = await i18n.init({
-  locale: 'en_US',
-  loaderMessage: async (locale?: string) => (await import(`@/locales/${locale}.json`))?.default,
-  storageKey: 'i18n-home-right',
-  storage: createJsonStorage(localStorage),
-})
-
-const I18nTestNode = ({ title, switchLocale }: { title: string; switchLocale: string }) => {
+/** 展示应用级翻译结果，并验证语言切换会同步影响整个前端。 */
+const I18nExample = () => {
   const { tr, loadLocale, locale } = useI18n()
+  const activeLocale = isAppLocale(locale) ? locale : DEFAULT_LOCALE
+  const nextLocale = activeLocale === 'zh_CN' ? 'en_US' : 'zh_CN'
 
   return (
-    <section className={styles.panel}>
-      <h2>{title}</h2>
-      <div>{tr('保存')}</div>
-      <div>{tr('你好1')}</div>
-      <div>目前语言: {locale}</div>
-      <Button onClick={() => void loadLocale(switchLocale)}>切换到 {switchLocale}</Button>
-    </section>
-  )
-}
-
-const I18nExample = () => {
-  return (
-    <PageContainer title="国际化示例" content="两个独立语言作用域，分别切换并保存语言偏好。">
-      <ProCard title="语言作用域" variant="outlined">
+    <PageContainer
+      title={tr('国际化示例')}
+      content={tr('语言偏好会持久化，并同步 Ant Design、日期和整个前端界面。')}
+    >
+      <ProCard title={tr('应用级语言')} variant="outlined">
         <div className={styles.demo}>
-          <I18nProvider store={leftStore}>
-            <I18nTestNode title="节点 A" switchLocale="en_US" />
-          </I18nProvider>
-
-          <I18nProvider store={rightStore}>
-            <I18nTestNode title="节点 B" switchLocale="zh_CN" />
-          </I18nProvider>
+          <section className={styles.panel}>
+            <h2>{tr('翻译结果')}</h2>
+            <div>{tr('保存')}</div>
+            <div>{tr('你好，{name}', { name: 'Bubbles' })}</div>
+            <div>{tr('当前语言：{locale}', { locale: activeLocale })}</div>
+            <Button onClick={() => void loadLocale(nextLocale)}>
+              {tr('切换到 {locale}', { locale: nextLocale })}
+            </Button>
+          </section>
         </div>
       </ProCard>
     </PageContainer>

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/examples/pro-table/components/ProjectFormDialog.tsx

@@ -7,11 +7,11 @@ import {
   ProFormText,
   ProFormTextArea,
 } from '@ant-design/pro-components'
-import { useImperativeHandle, useState, type Ref } from 'react'
+import { useI18n } from '@bubblesjs/i18n-react'
 import {
+  getPriorityOptions,
+  getStatusOptions,
   owners,
-  priorityOptions,
-  statusOptions,
   type ProjectFormValues,
   type ProjectRecord,
 } from '../config'
@@ -26,7 +26,9 @@ interface ProjectFormDialogProps {
   onSave: (values: ProjectFormValues, project?: ProjectRecord) => void
 }
 
+/** 复用项目新增与编辑表单，校验后将规范化字段交给页面保存。 */
 export default function ProjectFormDialog({ ref, onSave }: ProjectFormDialogProps) {
+  const { tr } = useI18n()
   const [open, setOpen] = useState(false)
   const [project, setProject] = useState<ProjectRecord>()
 
@@ -35,6 +37,7 @@ export default function ProjectFormDialog({ ref, onSave }: ProjectFormDialogProp
   }
 
   useImperativeHandle(ref, () => ({
+    /** 载入待编辑记录并打开表单；未传记录时进入新增模式。 */
     show(record) {
       setProject(record)
       setOpen(true)
@@ -45,86 +48,88 @@ export default function ProjectFormDialog({ ref, onSave }: ProjectFormDialogProp
   return (
     <ModalForm<ProjectFormValues>
       name="project-editor"
-      title={project ? '编辑项目' : '新增项目'}
+      title={project ? tr('编辑项目') : tr('新增项目')}
       open={open}
       width={600}
       grid
       rowProps={{ gutter: 16 }}
       initialValues={project ?? { status: 'planning', priority: 'medium', progress: 0 }}
       modalProps={{ destroyOnHidden: true, onCancel: hide }}
-      submitter={{ searchConfig: { submitText: '保存项目', resetText: '取消' } }}
+      submitter={{ searchConfig: { submitText: tr('保存项目'), resetText: tr('取消') } }}
       onOpenChange={(visible) => {
         if (!visible) hide()
       }}
-      onFinish={async (values) => {
-        onSave(
-          {
-            ...values,
-            name: values.name.trim(),
-            description: values.description?.trim() ?? '',
-            progress:
-              values.status === 'completed'
-                ? 100
-                : values.status === 'planning'
-                  ? 0
-                  : values.progress,
-          },
-          project,
-        )
-        hide()
-        return true
-      }}
+      onFinish={
+        /** 规范化项目名称、说明和进度后提交保存，并关闭编辑弹窗。 */ async (values) => {
+          onSave(
+            {
+              ...values,
+              name: values.name.trim(),
+              description: values.description?.trim() ?? '',
+              progress:
+                values.status === 'completed'
+                  ? 100
+                  : values.status === 'planning'
+                    ? 0
+                    : values.progress,
+            },
+            project,
+          )
+          hide()
+          return true
+        }
+      }
     >
       <ProFormText
         name="name"
-        label="项目名称"
-        placeholder="例如：客户服务工作台"
-        rules={[{ required: true, whitespace: true, message: '请输入项目名称' }]}
+        label={tr('项目名称')}
+        placeholder={tr('例如：客户服务工作台')}
+        rules={[{ required: true, whitespace: true, message: tr('请输入项目名称') }]}
         fieldProps={{ maxLength: 40, showCount: true }}
       />
       <ProFormGroup>
         <ProFormSelect
           name="owner"
-          label="负责人"
+          label={tr('负责人')}
           options={owners}
           colProps={{ xs: 24, sm: 12 }}
-          rules={[{ required: true, message: '请选择负责人' }]}
+          rules={[{ required: true, message: tr('请选择负责人') }]}
         />
         <ProFormDatePicker
           name="dueDate"
-          label="截止日期"
+          label={tr('截止日期')}
           colProps={{ xs: 24, sm: 12 }}
-          rules={[{ required: true, message: '请选择截止日期' }]}
+          rules={[{ required: true, message: tr('请选择截止日期') }]}
           fieldProps={{ style: { width: '100%' } }}
         />
         <ProFormSelect
           name="status"
-          label="项目状态"
-          valueEnum={statusOptions}
+          label={tr('项目状态')}
+          valueEnum={getStatusOptions()}
           colProps={{ xs: 24, sm: 12 }}
-          rules={[{ required: true, message: '请选择项目状态' }]}
+          rules={[{ required: true, message: tr('请选择项目状态') }]}
         />
         <ProFormSelect
           name="priority"
-          label="优先级"
-          valueEnum={priorityOptions}
+          label={tr('优先级')}
+          valueEnum={getPriorityOptions()}
           colProps={{ xs: 24, sm: 12 }}
-          rules={[{ required: true, message: '请选择优先级' }]}
+          rules={[{ required: true, message: tr('请选择优先级') }]}
         />
       </ProFormGroup>
       <ProFormDigit
         name="progress"
-        label="完成进度（%）"
+        label={tr('完成进度（%）')}
         min={0}
         max={100}
         fieldProps={{ precision: 0 }}
-        rules={[{ required: true, message: '请输入完成进度' }]}
-        extra="待启动项目保存为 0%，已完成项目保存为 100%。"
+        rules={[{ required: true, message: tr('请输入完成进度') }]}
+        extra={tr('待启动项目保存为 0%，已完成项目保存为 100%。')}
       />
       <ProFormTextArea
         name="description"
-        label="项目说明"
-        placeholder="补充项目目标或备注（选填）"
+        label={tr('项目说明')}
+        placeholder={tr('补充项目目标或备注（选填）')}
         fieldProps={{ maxLength: 200, showCount: true, rows: 3 }}
       />
     </ModalForm>

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/examples/pro-table/config/columns.tsx

@@ -1,7 +1,8 @@
 import { FolderOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { Avatar, Button, Popconfirm, Progress, Space, Tag, Tooltip } from 'antd'
-import { owners, priorityOptions, statusOptions, type ProjectRecord } from '.'
+import { tr } from '@/i18n'
+import { getPriorityOptions, getStatusOptions, owners, type ProjectRecord } from '.'
 import styles from '../index.module.css'
 
 interface ProjectColumnOptions {
@@ -9,16 +10,20 @@ interface ProjectColumnOptions {
   onDelete: (project: ProjectRecord) => void
 }
 
+/** 生成项目列表的业务列、状态展示及编辑删除操作入口。 */
 export function createProjectColumns({
   onEdit,
   onDelete,
 }: ProjectColumnOptions): ProColumns<ProjectRecord>[] {
+  const priorityOptions = getPriorityOptions()
+  const statusOptions = getStatusOptions()
+
   return [
     {
-      title: '项目名称',
+      title: tr('项目名称'),
       dataIndex: 'name',
       width: 260,
-      fieldProps: { placeholder: '搜索项目名称或编号', allowClear: true },
+      fieldProps: { placeholder: tr('搜索项目名称或编号'), allowClear: true },
       render: (_, project) => (
         <div className={styles.project}>
           <span className={styles.projectIcon}>
@@ -36,14 +41,14 @@ export function createProjectColumns({
       ),
     },
     {
-      title: '项目状态',
+      title: tr('项目状态'),
       dataIndex: 'status',
       width: 115,
       valueType: 'select',
       valueEnum: statusOptions,
     },
     {
-      title: '负责人',
+      title: tr('负责人'),
       dataIndex: 'owner',
       width: 125,
       valueType: 'select',
@@ -58,7 +63,7 @@ export function createProjectColumns({
       ),
     },
     {
-      title: '优先级',
+      title: tr('优先级'),
       dataIndex: 'priority',
       width: 90,
       valueType: 'select',
@@ -70,7 +75,7 @@ export function createProjectColumns({
       ),
     },
     {
-      title: '完成进度',
+      title: tr('完成进度'),
       dataIndex: 'progress',
       width: 155,
       search: false,
@@ -86,33 +91,33 @@ export function createProjectColumns({
       ),
     },
     {
-      title: '截止日期',
+      title: tr('截止日期'),
       dataIndex: 'dueDate',
       width: 130,
       valueType: 'date',
       search: false,
       sorter: (first, second) => first.dueDate.localeCompare(second.dueDate),
     },
-    { title: '截止日期', dataIndex: 'dueDate', valueType: 'dateRange', hideInTable: true },
+    { title: tr('截止日期'), dataIndex: 'dueDate', valueType: 'dateRange', hideInTable: true },
     {
-      title: '操作',
+      title: tr('操作'),
       valueType: 'option',
       width: 120,
       fixed: 'right',
       render: (_, project) => [
         <Button key="edit" type="link" size="small" onClick={() => onEdit(project)}>
-          编辑
+          {tr('编辑')}
         </Button>,
         <Popconfirm
           key="delete"
-          title="删除项目"
-          description={`确定删除「${project.name}」吗？`}
+          title={tr('删除项目')}
+          description={tr('确定删除「{name}」吗？', { name: project.name })}
           onConfirm={() => onDelete(project)}
-          okText="删除"
+          okText={tr('删除')}
           okButtonProps={{ danger: true }}
         >
           <Button type="link" danger size="small">
-            删除
+            {tr('删除')}
           </Button>
         </Popconfirm>,
       ],