create-bubbles 0.1.25 → 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.module.css

@@ -0,0 +1,23 @@
+@layer components {
+  .demo {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+
+  .panel {
+    display: flex;
+    flex: 1 1 256px;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border: 1px solid var(--ant-color-border-secondary);
+    border-radius: var(--ant-border-radius);
+  }
+
+  .panel h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,35 @@
+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 I18nExample = () => {
+  const { tr, loadLocale, locale } = useI18n()
+  const activeLocale = isAppLocale(locale) ? locale : DEFAULT_LOCALE
+  const nextLocale = activeLocale === 'zh_CN' ? 'en_US' : 'zh_CN'
+
+  return (
+    <PageContainer
+      title={tr('国际化示例')}
+      content={tr('语言偏好会持久化，并同步 Ant Design、日期和整个前端界面。')}
+    >
+      <ProCard title={tr('应用级语言')} variant="outlined">
+        <div className={styles.demo}>
+          <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>
+  )
+}
+
+export default I18nExample

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

@@ -0,0 +1,137 @@
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormDigit,
+  ProFormGroup,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+} from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import {
+  getPriorityOptions,
+  getStatusOptions,
+  owners,
+  type ProjectFormValues,
+  type ProjectRecord,
+} from '../config'
+
+export interface ProjectFormDialogRef {
+  show: (project?: ProjectRecord) => void
+  hide: () => void
+}
+
+interface ProjectFormDialogProps {
+  ref: Ref<ProjectFormDialogRef>
+  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>()
+
+  function hide() {
+    setOpen(false)
+  }
+
+  useImperativeHandle(ref, () => ({
+    /** 载入待编辑记录并打开表单；未传记录时进入新增模式。 */
+    show(record) {
+      setProject(record)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  return (
+    <ModalForm<ProjectFormValues>
+      name="project-editor"
+      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: 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
+        }
+      }
+    >
+      <ProFormText
+        name="name"
+        label={tr('项目名称')}
+        placeholder={tr('例如：客户服务工作台')}
+        rules={[{ required: true, whitespace: true, message: tr('请输入项目名称') }]}
+        fieldProps={{ maxLength: 40, showCount: true }}
+      />
+      <ProFormGroup>
+        <ProFormSelect
+          name="owner"
+          label={tr('负责人')}
+          options={owners}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: tr('请选择负责人') }]}
+        />
+        <ProFormDatePicker
+          name="dueDate"
+          label={tr('截止日期')}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: tr('请选择截止日期') }]}
+          fieldProps={{ style: { width: '100%' } }}
+        />
+        <ProFormSelect
+          name="status"
+          label={tr('项目状态')}
+          valueEnum={getStatusOptions()}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: tr('请选择项目状态') }]}
+        />
+        <ProFormSelect
+          name="priority"
+          label={tr('优先级')}
+          valueEnum={getPriorityOptions()}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: tr('请选择优先级') }]}
+        />
+      </ProFormGroup>
+      <ProFormDigit
+        name="progress"
+        label={tr('完成进度（%）')}
+        min={0}
+        max={100}
+        fieldProps={{ precision: 0 }}
+        rules={[{ required: true, message: tr('请输入完成进度') }]}
+        extra={tr('待启动项目保存为 0%，已完成项目保存为 100%。')}
+      />
+      <ProFormTextArea
+        name="description"
+        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

@@ -0,0 +1,126 @@
+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 { tr } from '@/i18n'
+import { getPriorityOptions, getStatusOptions, owners, type ProjectRecord } from '.'
+import styles from '../index.module.css'
+
+interface ProjectColumnOptions {
+  onEdit: (project: ProjectRecord) => void
+  onDelete: (project: ProjectRecord) => void
+}
+
+/** 生成项目列表的业务列、状态展示及编辑删除操作入口。 */
+export function createProjectColumns({
+  onEdit,
+  onDelete,
+}: ProjectColumnOptions): ProColumns<ProjectRecord>[] {
+  const priorityOptions = getPriorityOptions()
+  const statusOptions = getStatusOptions()
+
+  return [
+    {
+      title: tr('项目名称'),
+      dataIndex: 'name',
+      width: 260,
+      fieldProps: { placeholder: tr('搜索项目名称或编号'), allowClear: true },
+      render: (_, project) => (
+        <div className={styles.project}>
+          <span className={styles.projectIcon}>
+            <FolderOutlined />
+          </span>
+          <div className={styles.projectInfo}>
+            <Tooltip title={project.description || project.name}>
+              <Button type="link" className={styles.projectName} onClick={() => onEdit(project)}>
+                {project.name}
+              </Button>
+            </Tooltip>
+            <span className={styles.projectId}>{project.id}</span>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: tr('项目状态'),
+      dataIndex: 'status',
+      width: 115,
+      valueType: 'select',
+      valueEnum: statusOptions,
+    },
+    {
+      title: tr('负责人'),
+      dataIndex: 'owner',
+      width: 125,
+      valueType: 'select',
+      fieldProps: { options: owners.map((owner) => ({ label: owner, value: owner })) },
+      render: (_, project) => (
+        <Space size={8}>
+          <Avatar size={26} className={styles.avatar}>
+            {project.owner.slice(0, 1)}
+          </Avatar>
+          {project.owner}
+        </Space>
+      ),
+    },
+    {
+      title: tr('优先级'),
+      dataIndex: 'priority',
+      width: 90,
+      valueType: 'select',
+      valueEnum: priorityOptions,
+      render: (_, project) => (
+        <Tag color={priorityOptions[project.priority].color}>
+          {priorityOptions[project.priority].text}
+        </Tag>
+      ),
+    },
+    {
+      title: tr('完成进度'),
+      dataIndex: 'progress',
+      width: 155,
+      search: false,
+      sorter: (first, second) => first.progress - second.progress,
+      render: (_, project) => (
+        <Progress
+          percent={project.progress}
+          size="small"
+          status={project.status === 'completed' ? 'success' : 'normal'}
+          strokeColor={project.status === 'paused' ? '#d6a348' : undefined}
+          className={styles.progress}
+        />
+      ),
+    },
+    {
+      title: tr('截止日期'),
+      dataIndex: 'dueDate',
+      width: 130,
+      valueType: 'date',
+      search: false,
+      sorter: (first, second) => first.dueDate.localeCompare(second.dueDate),
+    },
+    { title: tr('截止日期'), dataIndex: 'dueDate', valueType: 'dateRange', hideInTable: true },
+    {
+      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={tr('删除项目')}
+          description={tr('确定删除「{name}」吗？', { name: project.name })}
+          onConfirm={() => onDelete(project)}
+          okText={tr('删除')}
+          okButtonProps={{ danger: true }}
+        >
+          <Button type="link" danger size="small">
+            {tr('删除')}
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ]
+}

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

@@ -0,0 +1,87 @@
+import { tr } from '@/i18n'
+
+export type ProjectStatus = 'planning' | 'active' | 'paused' | 'completed'
+export type ProjectPriority = 'high' | 'medium' | 'low'
+
+// 仅用于页面演示；接入真实接口时再在 shared 中定义接口契约。
+export interface ProjectRecord {
+  id: string
+  name: string
+  owner: string
+  status: ProjectStatus
+  priority: ProjectPriority
+  progress: number
+  dueDate: string
+  description: string
+}
+
+export type ProjectFormValues = Omit<ProjectRecord, 'id'>
+
+export interface ProjectSearchValues {
+  name?: string
+  owner?: string
+  status?: ProjectStatus
+  priority?: ProjectPriority
+  dueDate?: [string, string]
+}
+
+/** 按当前应用语言生成项目状态选项。 */
+export function getStatusOptions() {
+  return {
+    planning: { text: tr('待启动'), status: 'Default' },
+    active: { text: tr('进行中'), status: 'Processing' },
+    paused: { text: tr('已暂停'), status: 'Warning' },
+    completed: { text: tr('已完成'), status: 'Success' },
+  }
+}
+
+/** 按当前应用语言生成项目优先级选项。 */
+export function getPriorityOptions() {
+  return {
+    high: { text: tr('高'), color: 'volcano' },
+    medium: { text: tr('中'), color: 'gold' },
+    low: { text: tr('低'), color: 'default' },
+  }
+}
+
+export const owners = ['林知夏', '陈一舟', '周予安', '许清和', '沈亦宁']
+
+const projectNames = [
+  '客户服务工作台',
+  '官网体验升级',
+  '移动端设计系统',
+  '数据分析平台',
+  '团队知识库',
+  '会员积分中心',
+  '订单管理优化',
+  '消息通知服务',
+  '供应链协同平台',
+  '用户反馈中心',
+  '内容发布系统',
+  '企业权限管理',
+  '运营活动配置',
+  '数据报表导出',
+  '开放接口文档',
+  '支付流程优化',
+  '文件资源管理',
+  '服务监控看板',
+]
+
+const statuses: ProjectStatus[] = ['active', 'active', 'planning', 'active', 'completed', 'paused']
+const priorities: ProjectPriority[] = ['high', 'medium', 'low']
+
+export const initialProjects: ProjectRecord[] = projectNames.map(
+  /** 按固定名称、负责人和状态序列生成可重复的项目演示数据。 */ (name, index) => {
+    const status = statuses[index % statuses.length]!
+    return {
+      id: `PRJ-${String(index + 1).padStart(3, '0')}`,
+      name,
+      owner: owners[index % owners.length]!,
+      status,
+      priority: priorities[index % priorities.length]!,
+      progress: status === 'completed' ? 100 : status === 'planning' ? 0 : 24 + ((index * 13) % 65),
+      dueDate: `2026-${index < 12 ? '09' : '10'}-${String(10 + (index % 12)).padStart(2, '0')}`,
+      description: `围绕${name}完善团队协作与交付体验。`,
+    }
+  },
+)