create-bubbles 0.1.26 → 0.1.28

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

@@ -0,0 +1,74 @@
+import type {
+  CleanupPreview,
+  CleanupRequest,
+  CleanupResult,
+  CreateMenuRequest,
+  FunctionCatalogResult,
+  MenuTreeResult,
+  ScopeType,
+  UpdateMenuRequest,
+} from 'shared/types'
+import {
+  freshRequest,
+  runWorkspaceRequest,
+  workspaceRequest as http,
+} from '@/utils/request/workspace'
+
+const workspaceKey = 'platform'
+
+export const menuApi = {
+  /** 读取指定作用域的菜单树及版本。 */
+  tree: (scopeType: ScopeType) =>
+    runWorkspaceRequest({
+      method: http.Get<MenuTreeResult>('/platform/menus', {
+        ...freshRequest,
+        params: { scopeType },
+      }),
+      workspaceKey,
+    }),
+  /** 读取指定作用域已发布功能目录；图标由 Web 本地 SVG 注册表提供。 */
+  catalog: (scopeType: ScopeType) =>
+    runWorkspaceRequest({
+      method: http.Get<FunctionCatalogResult>('/platform/function-catalog', {
+        ...freshRequest,
+        params: { scopeType },
+      }),
+      workspaceKey,
+    }),
+  /** 在指定作用域创建菜单节点，并返回最新菜单树。 */
+  create: (scopeType: ScopeType, data: CreateMenuRequest) =>
+    runWorkspaceRequest({
+      method: http.Post<MenuTreeResult>('/platform/menus', data, {
+        ...freshRequest,
+        params: { scopeType },
+      }),
+      workspaceKey,
+    }),
+  /** 按预期版本更新菜单节点，返回最新菜单树。 */
+  update: (id: string, data: UpdateMenuRequest) =>
+    runWorkspaceRequest({
+      method: http.Patch<MenuTreeResult>(`/platform/menus/${id}`, data, freshRequest),
+      workspaceKey,
+    }),
+  /** 按预期版本删除菜单节点，返回最新菜单树。 */
+  remove: (id: string, expectedVersion: number) =>
+    runWorkspaceRequest({
+      method: http.Delete<MenuTreeResult>(`/platform/menus/${id}`, undefined, {
+        ...freshRequest,
+        params: { expectedVersion },
+      }),
+      workspaceKey,
+    }),
+  /** 读取废弃权限清理范围、阻断原因和执行凭据。 */
+  cleanupPreview: () =>
+    runWorkspaceRequest({
+      method: http.Get<CleanupPreview>('/platform/permissions/cleanup-preview', freshRequest),
+      workspaceKey,
+    }),
+  /** 携带预览凭据执行废弃权限清理，返回处理结果。 */
+  cleanup: (data: CleanupRequest) =>
+    runWorkspaceRequest({
+      method: http.Post<CleanupResult>('/platform/permissions/cleanup', data, freshRequest),
+      workspaceKey,
+    }),
+}

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

@@ -0,0 +1,325 @@
+import { ClearOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { Alert, App, Button, Popconfirm, Space, Tabs, Tag, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  CreateMenuRequest,
+  FunctionCatalogResult,
+  MenuNode,
+  MenuTreeResult,
+  ScopeType,
+} from 'shared/types'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { SvgAssetIcon } from '@/components/Icon/SvgAsset'
+import CleanupDialog, { type CleanupDialogRef } from '../components/CleanupDialog'
+import MenuFormDialog, { type MenuFormDialogRef } from '../components/MenuFormDialog'
+import { useAccess, useManagementAction } from '../use-access'
+import { menuApi } from './api'
+
+type MenuRow = Omit<MenuNode, 'children'> & {
+  children?: MenuRow[]
+  parentName: string
+}
+
+/** 将管理表格行还原为编辑弹窗所需的菜单节点，移除仅用于展示的父级路径。 */
+function toMenuNode(row: MenuRow): MenuNode {
+  const { parentName: _parentName, children, ...node } = row
+  return { ...node, children: children?.map(toMenuNode) ?? [] }
+}
+
+/** 管理各作用域的菜单树、功能绑定和废弃权限清理。 */
+export default function MenusPage() {
+  const access = useAccess()
+  const { message } = App.useApp()
+  const execute = useManagementAction()
+  const [scopeType, setScopeType] = useState<ScopeType>('platform')
+  const [tree, setTree] = useState<MenuTreeResult>()
+  const [catalog, setCatalog] = useState<FunctionCatalogResult>()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string>()
+  const [refresh, setRefresh] = useState(0)
+  const [filter, setFilter] = useState<{ query?: string; status?: string; type?: string }>({})
+  const [previewing, setPreviewing] = useState(false)
+  const formRef = useRef<MenuFormDialogRef>(null)
+  const cleanupRef = useRef<CleanupDialogRef>(null)
+  const { tr } = useI18n()
+  const allowed = (action: string) => access.permissionKeys.includes(`platform.menus.${action}`)
+
+  useEffect(
+    /** 按作用域加载菜单树和功能目录，忽略已失效加载周期的结果。 */ () => {
+      let current = true
+      setLoading(true)
+      setTree(undefined)
+      setCatalog(undefined)
+      setError(undefined)
+      void Promise.all([menuApi.tree(scopeType), menuApi.catalog(scopeType)])
+        .then(
+          /** 仅提交当前加载周期的菜单树与功能目录，避免旧作用域覆盖新状态。 */ ([
+            data,
+            functions,
+          ]) => {
+            if (current) {
+              setTree(data)
+              setCatalog(functions)
+            }
+          },
+        )
+        .catch((cause: unknown) => {
+          if (current && (cause as Error).name !== 'AbortError')
+            setError(cause instanceof Error ? cause.message : tr('无法加载菜单'))
+        })
+        .finally(() => {
+          if (current) setLoading(false)
+        })
+      return () => {
+        current = false
+      }
+    },
+    [scopeType, refresh],
+  )
+
+  /** 判断菜单节点是否满足当前列表筛选条件。 */
+  const matchesFilter = (item: MenuNode) =>
+    (!filter.query ||
+      `${item.name} ${item.routeKey ?? ''} ${item.permissionKey ?? ''}`
+        .toLowerCase()
+        .includes(filter.query.toLowerCase())) &&
+    (!filter.status || item.status === filter.status) &&
+    (!filter.type || item.type === filter.type)
+
+  /** 构造保留层级的菜单表格数据；叶子节点不写入空 children，避免显示展开加号。 */
+  const buildRows = (items: MenuNode[], parentName: string): MenuRow[] =>
+    items.flatMap((item) => {
+      const childRows = buildRows(
+        item.children,
+        `${parentName === tr('根目录') ? '' : `${parentName} / `}${item.name}`,
+      )
+      const itemMatches = matchesFilter(item)
+      if (!itemMatches && !childRows.length) return []
+      const { children: _children, ...node } = item
+      return [
+        {
+          ...node,
+          parentName,
+          ...(childRows.length ? { children: childRows } : {}),
+        },
+      ]
+    })
+  const filteredRows = buildRows(tree?.items ?? [], tr('根目录'))
+
+  /** 加载废弃权限清理预览，并展示请求失败信息。 */
+  async function previewCleanup() {
+    setPreviewing(true)
+    try {
+      cleanupRef.current?.show(await menuApi.cleanupPreview())
+    } catch (cause) {
+      if ((cause as Error).name !== 'AbortError')
+        void message.error(cause instanceof Error ? cause.message : tr('无法加载预览'))
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  const columns: ProColumns<MenuRow>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('名称或功能标识') },
+    },
+    {
+      title: tr('名称'),
+      dataIndex: 'name',
+      search: false,
+      width: 220,
+      ellipsis: true,
+      render: (_, record) => (
+        <Space size={8} wrap={false} style={{ width: '100%', minWidth: 0 }}>
+          <SvgAssetIcon name={record.icon} />
+          <Typography.Text
+            ellipsis={{ tooltip: record.name }}
+            style={{ minWidth: 0, flex: '1 1 auto' }}
+          >
+            {record.name}
+          </Typography.Text>
+          {record.protected && <Tag color="blue">{tr('保护')}</Tag>}
+        </Space>
+      ),
+    },
+    {
+      title: tr('类型'),
+      dataIndex: 'type',
+      width: 100,
+      valueEnum: {
+        directory: tr('目录'),
+        page: tr('页面'),
+        operation: tr('按钮 / 操作'),
+      },
+    },
+    { title: tr('父级'), dataIndex: 'parentName', search: false, ellipsis: true, width: 200 },
+    {
+      title: tr('绑定功能'),
+      search: false,
+      width: 240,
+      render: (_, record) =>
+        tr(catalog?.items.find((item) => item.key === record.permissionKey)?.title ?? '—'),
+    },
+    {
+      title: tr('导航'),
+      dataIndex: 'hidden',
+      search: false,
+      width: 80,
+      render: (_, record) =>
+        record.type === 'operation' ? '—' : record.hidden ? tr('隐藏') : tr('显示'),
+    },
+    {
+      title: tr('状态'),
+      dataIndex: 'status',
+      width: 90,
+      valueEnum: {
+        active: { text: tr('启用'), status: 'Success' },
+        disabled: { text: tr('停用'), status: 'Default' },
+      },
+    },
+    { title: tr('排序'), dataIndex: 'sort', search: false, width: 70 },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: 140,
+      render: (_, record) => (
+        <Space size={4}>
+          {allowed('update') && (
+            <Button
+              type="link"
+              size="small"
+              onClick={() => {
+                if (tree && catalog)
+                  formRef.current?.show({ record: toMenuNode(record), tree, catalog })
+              }}
+            >
+              {tr('编辑')}
+            </Button>
+          )}
+          {allowed('delete') && !record.protected && (
+            <Popconfirm
+              title={tr('删除菜单节点？')}
+              description={tr('仍有子节点或角色授权引用时不能删除。')}
+              onConfirm={() =>
+                execute(
+                  () => menuApi.remove(record.id, tree!.version),
+                  () => setRefresh((value) => value + 1),
+                )
+              }
+            >
+              <Button type="link" size="small" danger>
+                {tr('删除')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div className="menu-management">
+      <Tabs
+        activeKey={scopeType}
+        onChange={
+          /** 切换菜单作用域前清除旧树和筛选条件，等待新作用域数据。 */ (key) => {
+            setTree(undefined)
+            setFilter({})
+            setScopeType(key as ScopeType)
+          }
+        }
+        items={[
+          { key: 'platform', label: tr('平台菜单') },
+          { key: 'company', label: tr('企业菜单') },
+          { key: 'project', label: tr('项目菜单') },
+        ]}
+      />
+      {error && (
+        <Alert
+          style={{ margin: '0 16px' }}
+          type="error"
+          showIcon
+          title={error}
+          action={<Button onClick={() => setRefresh((value) => value + 1)}>{tr('重试')}</Button>}
+        />
+      )}
+      <div className="menu-table">
+        <FullHeightProTable<MenuRow>
+          key={scopeType}
+          rowKey="id"
+          columns={columns}
+          dataSource={filteredRows}
+          loading={loading}
+          headerTitle={tr('菜单与操作')}
+          options={{ reload: false }}
+          pagination={{
+            defaultPageSize: 20,
+            showSizeChanger: true,
+            pageSizeOptions: [20, 50, 100],
+          }}
+          onSubmit={(values) => setFilter(values)}
+          onReset={() => setFilter({})}
+          toolBarRender={() =>
+            [
+              <Button
+                key="refresh"
+                icon={<ReloadOutlined />}
+                onClick={() => setRefresh((value) => value + 1)}
+              >
+                {tr('刷新')}
+              </Button>,
+              allowed('cleanup') && access.administrator === 'platform' && (
+                <Button
+                  key="cleanup"
+                  icon={<ClearOutlined />}
+                  loading={previewing}
+                  onClick={() => void previewCleanup()}
+                >
+                  {tr('清理废弃权限')}
+                </Button>
+              ),
+              allowed('create') && (
+                <Button
+                  key="create"
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  disabled={!tree || !catalog}
+                  onClick={() => {
+                    if (tree && catalog) formRef.current?.show({ tree, catalog })
+                  }}
+                >
+                  {tr('新增节点')}
+                </Button>
+              ),
+            ].filter(Boolean)
+          }
+        />
+      </div>
+      <MenuFormDialog
+        ref={formRef}
+        onSave={(state, data) =>
+          execute(
+            () =>
+              state.record
+                ? menuApi.update(state.record.id, data)
+                : menuApi.create(state.tree.scopeType, data as CreateMenuRequest),
+            () => setRefresh((value) => value + 1),
+          )
+        }
+      />
+      <CleanupDialog
+        ref={cleanupRef}
+        onSave={(data) =>
+          execute(
+            () => menuApi.cleanup(data),
+            () => setRefresh((value) => value + 1),
+          )
+        }
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,160 @@
+import { ProForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components'
+import { Alert, Button, Card, Descriptions, Space, Spin, Tag } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CompanyDetail, ProjectDetail, UpdateProfileRequest } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import { managementApi } from './api'
+import { useAccess, useManagementAction } from './use-access'
+
+/** 查看并按权限更新当前企业或项目资料。 */
+export default function ProfilePage() {
+  const access = useAccess()
+  const scopeKey = accessScopeKey(access.scope)
+  const [record, setRecord] = useState<CompanyDetail | ProjectDetail>()
+  const [error, setError] = useState<string>()
+  const [loading, setLoading] = useState(true)
+  const [refresh, setRefresh] = useState(0)
+  const execute = useManagementAction()
+  const api = managementApi(access.scope)
+  const canEdit = access.permissionKeys.includes(`${access.scope.type}.profile.update`)
+  const { locale, tr } = useI18n()
+
+  useEffect(
+    /** 加载当前工作空间资料，避免过期请求覆盖最新页面状态。 */ () => {
+      let active = true
+      setLoading(true)
+      setError(undefined)
+      void api
+        .profile()
+        .then((value) => {
+          if (active) setRecord(value)
+        })
+        .catch((cause: unknown) => {
+          if (active && (cause as Error).name !== 'AbortError')
+            setError(cause instanceof Error ? cause.message : tr('无法加载资料'))
+        })
+        .finally(() => {
+          if (active) setLoading(false)
+        })
+      return () => {
+        active = false
+      }
+    },
+    [scopeKey, refresh],
+  )
+
+  return (
+    <div className="workspace-page">
+      <div className="workspace-page-title">
+        <h1>{access.scope.type === 'company' ? tr('企业资料') : tr('项目资料')}</h1>
+        <p>{tr('维护当前工作空间的名称、编码与说明。')}</p>
+      </div>
+      {error ? (
+        <Alert
+          type="error"
+          showIcon
+          title={error}
+          action={<Button onClick={() => setRefresh((value) => value + 1)}>{tr('重试')}</Button>}
+        />
+      ) : loading ? (
+        <Spin />
+      ) : (
+        record && (
+          <Card style={{ maxWidth: 800 }}>
+            <Descriptions
+              column={2}
+              style={{ marginBottom: 24 }}
+              items={[
+                {
+                  key: 'status',
+                  label: tr('当前状态'),
+                  children: (
+                    <Tag color={record.status === 'active' ? 'success' : 'default'}>
+                      {record.status === 'active' ? tr('启用') : tr('停用')}
+                    </Tag>
+                  ),
+                },
+                {
+                  key: 'created',
+                  label: tr('创建时间'),
+                  children: new Date(record.createdAt).toLocaleString(
+                    locale === 'en_US' ? 'en-US' : 'zh-CN',
+                  ),
+                },
+                {
+                  key: 'administrators',
+                  label: tr('管理员'),
+                  span: 2,
+                  children: (
+                    <Space wrap>
+                      {record.administrators.map((admin) => (
+                        <Tag key={admin.id} color={admin.effective ? 'cyan' : 'default'}>
+                          {admin.name} ({admin.account}){admin.effective ? '' : tr(' · 当前无效')}
+                        </Tag>
+                      ))}
+                    </Space>
+                  ),
+                },
+              ]}
+            />
+            <ProForm<UpdateProfileRequest>
+              key={`${record.id}:${record.version}`}
+              initialValues={record}
+              disabled={!canEdit}
+              submitter={
+                canEdit
+                  ? { searchConfig: { submitText: tr('保存资料') }, resetButtonProps: false }
+                  : false
+              }
+              onFinish={(values) =>
+                execute(
+                  /** 携带当前资料版本提交规范化修改，并合并服务端返回的最新资料。 */ async () => {
+                    const latest = await api.updateProfile({
+                      name: values.name?.trim(),
+                      code: values.code?.trim().toLowerCase(),
+                      description: values.description?.trim(),
+                      expectedVersion: record.version,
+                    })
+                    setRecord({ ...record, ...latest })
+                  },
+                )
+              }
+            >
+              <ProFormText
+                name="name"
+                label={tr('名称')}
+                rules={[
+                  {
+                    required: true,
+                    whitespace: true,
+                    min: 2,
+                    max: 100,
+                    message: tr('请输入 2–100 字名称'),
+                  },
+                ]}
+                fieldProps={{ maxLength: 100 }}
+              />
+              <ProFormText
+                name="code"
+                label={tr('编码')}
+                rules={[
+                  {
+                    required: true,
+                    pattern: /^[A-Za-z0-9_-]{2,32}$/,
+                    message: tr('请输入 2–32 位字母、数字、下划线或短横线'),
+                  },
+                ]}
+                fieldProps={{ maxLength: 32 }}
+              />
+              <ProFormTextArea
+                name="description"
+                label={tr('说明')}
+                fieldProps={{ rows: 4, maxLength: 500, showCount: true }}
+              />
+            </ProForm>
+          </Card>
+        )
+      )}
+    </div>
+  )
+}