create-bubbles 0.1.25 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/positions/components/PositionFormDialog.tsx

@@ -0,0 +1,86 @@
+import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { CreatePositionRequest, PositionRecord } from 'shared/types'
+
+export interface PositionFormDialogRef {
+  show: (record?: PositionRecord) => void
+  hide: () => void
+}
+
+/** 复用新增和编辑岗位表单；岗位是作用域平面列表，不包含组织字段。 */
+export default function PositionFormDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<PositionFormDialogRef>
+  onSave: (values: CreatePositionRequest, record?: PositionRecord) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<PositionRecord>()
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 载入岗位快照并打开表单；省略记录时进入新增模式。 */
+    show: (item) => {
+      setRecord(item)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<CreatePositionRequest>
+      title={record ? tr('编辑岗位') : tr('创建岗位')}
+      open={open}
+      width={560}
+      initialValues={record}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存岗位') } }}
+      onFinish={
+        /** 规范化岗位文本后提交，成功时关闭弹窗。 */ async (values) => {
+          const ok = await onSave(
+            {
+              name: values.name.trim(),
+              code: values.code.trim().toLowerCase(),
+              description: values.description?.trim(),
+            },
+            record,
+          )
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <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('岗位编码')}
+        extra={tr('2–32 位字母、数字、下划线或短横线。')}
+        rules={[
+          { required: true, pattern: /^[A-Za-z0-9_-]{2,32}$/, message: tr('请输入有效编码') },
+        ]}
+        fieldProps={{ maxLength: 32 }}
+      />
+      <ProFormTextArea
+        name="description"
+        label={tr('岗位说明')}
+        fieldProps={{ maxLength: 500, showCount: true, rows: 3 }}
+      />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/positions/components/PositionMembersDialog.tsx

@@ -0,0 +1,102 @@
+import { ModalForm, ProForm } from '@ant-design/pro-components'
+import { Alert } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { OrganizationMemberCandidate, OrganizationScope, PositionRecord } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import OrganizationMemberSelector from '@/components/Selector/OrganizationMemberSelector'
+import type {
+  OrganizationMemberBrowserFilters,
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+} from '@/components/Selector/OrganizationMemberSelector'
+import { canAddPositionAssignment } from '@/utils/organization-assignment'
+
+export interface PositionMembersDialogRef {
+  show: (
+    record: PositionRecord,
+    selected: OrganizationMemberCandidate[],
+    filters: OrganizationMemberBrowserFilters,
+  ) => void
+  hide: () => void
+}
+
+/** 按岗位完整替换任职成员，选值始终是平台稳定 userId。 */
+export default function PositionMembersDialog({
+  ref,
+  scope,
+  request,
+  resolve,
+  onSave,
+}: {
+  ref: Ref<PositionMembersDialogRef>
+  scope: OrganizationScope
+  request: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolve: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  onSave: (record: PositionRecord, userIds: string[]) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [record, setRecord] = useState<PositionRecord>()
+  const [selected, setSelected] = useState<OrganizationMemberCandidate[]>([])
+  const [browserFilters, setBrowserFilters] = useState<OrganizationMemberBrowserFilters>({})
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 带入岗位当前完整成员集合并打开分配弹窗。 */
+    show: (item, candidates, filters) => {
+      setRecord(item)
+      setSelected(candidates)
+      setBrowserFilters(filters)
+      setOpen(true)
+    },
+    hide,
+  }))
+  return (
+    <ModalForm<{ userIds: string[] }>
+      title={tr('分配岗位成员 · {name}', { name: record?.name ?? '' })}
+      open={open}
+      width={720}
+      initialValues={{ userIds: selected.map((candidate) => candidate.userId) }}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('保存任职成员') } }}
+      onFinish={
+        /** 提交该岗位完整 userId 集合，空数组表示清空岗位成员。 */ async (values) => {
+          if (!record) return false
+          const ok = await onSave(record, values.userIds ?? [])
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('岗位与组织归属相互独立')}
+        description={tr('保存只会替换此岗位的任职成员，不会修改成员所在组织或角色。')}
+        style={{ marginBottom: 20 }}
+      />
+      <ProForm.Item name="userIds" label={tr('任职成员')}>
+        <OrganizationMemberSelector
+          candidateContextKey={`${accessScopeKey(scope)}:assignPositionMembers`}
+          scope={{ type: scope.type }}
+          multiple
+          selectedCandidates={selected}
+          filters={browserFilters}
+          request={request}
+          resolve={resolve}
+          getCandidateDisabled={(candidate) =>
+            !record ||
+            !canAddPositionAssignment({
+              candidate,
+              scope,
+              positionActive: record.status === 'active',
+            })
+          }
+          placeholder={tr('选择一个或多个成员')}
+        />
+      </ProForm.Item>
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,198 @@
+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 { EntityStatus, OrganizationScope, PositionRecord } from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { useLatestDialogRequest } from '@/hooks/useLatestDialogRequest'
+import { useAccess, useManagementAction } from '@/pages/access/use-access'
+import { positionsApi } from './api'
+import PositionFormDialog, { type PositionFormDialogRef } from './components/PositionFormDialog'
+import PositionMembersDialog, {
+  type PositionMembersDialogRef,
+} from './components/PositionMembersDialog'
+import { loadAllPositions, loadPositionMembers } from './loaders'
+
+/** 管理企业或项目的独立岗位列表及岗位任职成员。 */
+export default function PositionsPage() {
+  const access = useAccess()
+  const scope = access.scope as OrganizationScope
+  const api = positionsApi(scope)
+  const execute = useManagementAction()
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+  const actionRef = useRef<ActionType>(null)
+  const formRef = useRef<PositionFormDialogRef>(null)
+  const membersRef = useRef<PositionMembersDialogRef>(null)
+  const membersRequest = useLatestDialogRequest(accessScopeKey(scope))
+  const prefix = `${scope.type}.positions`
+  const allowed = (operation: string) => access.permissionKeys.includes(`${prefix}.${operation}`)
+  /** 重新加载岗位表格。 */
+  const refresh = () => void actionRef.current?.reload()
+
+  /** 查询当前岗位的完整成员集合后打开分配弹窗。 */
+  async function openMembers(record: PositionRecord) {
+    await membersRequest.run({
+      targetId: record.id,
+      load: () => Promise.all([loadPositionMembers(api, record.id), loadAllPositions(api)]),
+      onSuccess: ([selected, positions]) => {
+        membersRef.current?.show(record, selected, {
+          positions: positions.map((position) => ({ value: position.id, label: position.name })),
+        })
+      },
+      onError: (error) => {
+        if ((error as Error).name !== 'AbortError')
+          void message.error(error instanceof Error ? error.message : tr('无法加载岗位成员'))
+      },
+    })
+  }
+
+  const columns: ProColumns<PositionRecord>[] = [
+    {
+      title: tr('搜索'),
+      dataIndex: 'query',
+      hideInTable: true,
+      fieldProps: { placeholder: tr('搜索岗位名称或编码') },
+    },
+    { title: tr('岗位名称'), dataIndex: 'name', search: false, width: 180 },
+    { title: tr('编码'), dataIndex: 'code', search: false, width: 150 },
+    {
+      title: tr('状态'),
+      dataIndex: 'status',
+      width: 100,
+      valueEnum: {
+        active: { text: tr('启用'), status: 'Success' },
+        disabled: { text: tr('停用'), status: 'Default' },
+      },
+    },
+    { title: tr('任职人数'), dataIndex: 'memberCount', search: false, width: 110 },
+    { title: tr('说明'), dataIndex: 'description', search: false, ellipsis: true },
+    {
+      title: tr('更新时间'),
+      dataIndex: 'updatedAt',
+      valueType: 'dateTime',
+      search: false,
+      width: 180,
+    },
+    {
+      title: tr('操作'),
+      valueType: 'option',
+      width: 260,
+      render: (_, record) => (
+        <Space size={4} wrap>
+          {allowed('assign') && (
+            <Button
+              type="link"
+              size="small"
+              loading={membersRequest.loadingId === record.id}
+              onClick={() => void openMembers(record)}
+            >
+              {tr('分配成员')}
+            </Button>
+          )}
+          {allowed('update') && (
+            <Button type="link" size="small" onClick={() => formRef.current?.show(record)}>
+              {tr('编辑')}
+            </Button>
+          )}
+          {allowed('update') && (
+            <Popconfirm
+              title={record.status === 'active' ? tr('停用岗位？') : tr('恢复岗位？')}
+              description={tr('状态变化不会删除既有任职关系。')}
+              onConfirm={() =>
+                execute(
+                  () =>
+                    api.updateStatus(record.id, {
+                      status: record.status === 'active' ? 'disabled' : 'active',
+                      expectedVersion: record.version,
+                    }),
+                  refresh,
+                )
+              }
+            >
+              <Button type="link" size="small" danger={record.status === 'active'}>
+                {record.status === 'active' ? tr('停用') : tr('恢复')}
+              </Button>
+            </Popconfirm>
+          )}
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <>
+      <FullHeightProTable<PositionRecord>
+        rowKey="id"
+        actionRef={actionRef}
+        columns={columns}
+        headerTitle={
+          <Space>
+            <span>{tr('岗位管理')}</span>
+            <Tag color="purple">{scope.type === 'company' ? tr('企业级') : tr('项目级')}</Tag>
+          </Space>
+        }
+        pagination={{ defaultPageSize: 20, showSizeChanger: true, pageSizeOptions: [20, 50, 100] }}
+        request={
+          /** 查询岗位分页并转换为 ProTable 结果。 */ async (params) => {
+            const result = await api.list({
+              page: params.current,
+              pageSize: params.pageSize,
+              query: params.query as string | undefined,
+              status: params.status as EntityStatus | 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="create"
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => formRef.current?.show()}
+                >
+                  {tr('创建岗位')}
+                </Button>,
+              ]
+            : []
+        }
+      />
+      <PositionFormDialog
+        ref={formRef}
+        onSave={(values, record) =>
+          execute(
+            () =>
+              record
+                ? api.update(record.id, { ...values, expectedVersion: record.version })
+                : api.create(values),
+            refresh,
+          )
+        }
+      />
+      <PositionMembersDialog
+        ref={membersRef}
+        scope={scope}
+        request={async (input) => {
+          const { signal, ...params } = input
+          const result = await api.memberCandidates(
+            { ...params, purpose: 'assignPositionMembers' },
+            signal,
+          )
+          return { items: result.items, total: result.total }
+        }}
+        resolve={(userIds) =>
+          api.resolveMemberCandidates({ userIds, purpose: 'assignPositionMembers' })
+        }
+        onSave={(record, userIds) =>
+          execute(() => api.replacePositionMembers(record.id, { userIds }), refresh)
+        }
+      />
+    </>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/positions/loaders.ts

@@ -0,0 +1,35 @@
+import type { OrganizationMemberCandidate, PositionRecord } from 'shared/types'
+import type { positionsApi } from './api'
+
+/** 分页读取当前作用域全部岗位，包含停用岗位以便保留既有任职。 */
+export async function loadAllPositions(
+  api: ReturnType<typeof positionsApi>,
+): Promise<PositionRecord[]> {
+  const first = await api.list({ page: 1, pageSize: 100 })
+  const rest = await Promise.all(
+    Array.from({ length: Math.ceil(first.total / 100) - 1 }, (_, index) =>
+      api.list({ page: index + 2, pageSize: 100 }),
+    ),
+  )
+  return [...first.items, ...rest.flatMap((page) => page.items)]
+}
+
+/** 分页读取指定岗位的完整成员候选，供任职成员编辑器回填。 */
+export async function loadPositionMembers(
+  api: ReturnType<typeof positionsApi>,
+  positionId: string,
+): Promise<OrganizationMemberCandidate[]> {
+  const query = {
+    purpose: 'assignPositionMembers' as const,
+    positionIds: [positionId],
+    includeDisabled: true,
+    pageSize: 100,
+  }
+  const first = await api.memberCandidates({ ...query, page: 1 })
+  const rest = await Promise.all(
+    Array.from({ length: Math.ceil(first.total / 100) - 1 }, (_, index) =>
+      api.memberCandidates({ ...query, page: index + 2 }),
+    ),
+  )
+  return [...first.items, ...rest.flatMap((page) => page.items)]
+}

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

@@ -0,0 +1,14 @@
+import type { RegisterRequest, RegisterResult } from 'shared/types'
+import request from '@/utils/request'
+
+const publicRequest = request({
+  /** 注册请求不附带现有会话令牌。 */
+  commonHeaders: () => ({}),
+  /** 注册失败交由表单提示，避免触发全局登录跳转。 */
+  unAuthorizedResponseFunc: () => {},
+  isShowErrorMessage: false,
+})
+
+/** 通过公开请求创建账号，避免附带既有会话凭据。 */
+export const register = (input: RegisterRequest) =>
+  publicRequest.Post<RegisterResult>('/auth/register', input, { cacheFor: 0, shareRequest: false })

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

@@ -0,0 +1,157 @@
+import { ArrowRightOutlined } from '@ant-design/icons'
+import { LoginForm, ProFormText } from '@ant-design/pro-components'
+import { useRequest } from 'alova/client'
+import { Alert } from 'antd'
+import type { RegisterRequest } from 'shared/types'
+import { ACCOUNT_PATTERN, normalizeAccount } from 'shared/utils'
+import { useI18n } from '@bubblesjs/i18n-react'
+import Brand from '@/components/Brand/Brand'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
+import { buildAuthPath, safeNextPath } from '@/utils/safe-next'
+import { register } from './api'
+import '../login/login.css'
+
+/** 展示注册表单，校验账号及确认密码后引导登录。 */
+export default function RegisterPage() {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const { send, loading } = useRequest(register, { immediate: false })
+  const [error, setError] = useState<string | null>(null)
+  const { tr } = useI18n()
+  const next = safeNextPath(searchParams.get('next'))
+
+  /** 规范化注册资料并提交账号创建，成功后返回登录入口。 */
+  async function handleRegister(values: RegisterRequest) {
+    if (loading) return false
+    setError(null)
+    try {
+      await send({
+        password: values.password,
+        account: normalizeAccount(values.account),
+        name: values.name.trim(),
+      })
+      void navigate(buildAuthPath('/login', { next, registered: true }), { replace: true })
+      return true
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : tr('注册失败，请稍后重试'))
+      return false
+    }
+  }
+
+  return (
+    <main className="login-page login-page-register">
+      <title>{tr('注册 - 万物')}</title>
+      <section className="login-brand-panel" aria-label={tr('万物')}>
+        <Brand variant="auth" />
+        <div className="login-story">
+          <div className="login-orbit" aria-hidden="true">
+            <span className="login-pearl" />
+            <span className="login-orbit-ring" />
+            <span className="login-orbit-satellite" />
+          </div>
+          <p className="login-eyebrow">WANWU</p>
+          <h1>{tr('万物')}</h1>
+          <p className="login-story-caption">{tr('企业与项目工作空间')}</p>
+        </div>
+        <div className="login-brand-footer">
+          <span>{tr('一个账号，访问你加入的企业和项目。')}</span>
+        </div>
+      </section>
+      <section className="login-form-panel" aria-labelledby="register-title">
+        <div className="login-locale-switch">
+          <LocaleSwitch />
+        </div>
+        <div className="login-form-content">
+          <p className="login-form-eyebrow">{tr('加入万物')}</p>
+          <h2 id="register-title">{tr('创建账号')}</h2>
+          <p className="login-description">
+            {tr('注册后登录，即可接受邀请或进入已加入的工作空间。')}
+          </p>
+          <LoginForm<RegisterRequest>
+            autoFocusFirstInput={false}
+            requiredMark={false}
+            contentStyle={{ width: '100%', minWidth: 0 }}
+            containerStyle={{ padding: 0, minWidth: 0 }}
+            onFinish={handleRegister}
+            submitter={{
+              searchConfig: { submitText: tr('注册账号') },
+              submitButtonProps: {
+                loading,
+                size: 'large',
+                icon: <ArrowRightOutlined />,
+                iconPlacement: 'end',
+              },
+            }}
+          >
+            {error && (
+              <Alert className="login-error" type="error" showIcon title={error} role="alert" />
+            )}
+            <ProFormText
+              name="name"
+              label={tr('姓名')}
+              fieldProps={{ maxLength: 100, autoComplete: 'name', size: 'large' }}
+              rules={[
+                {
+                  required: true,
+                  whitespace: true,
+                  min: 2,
+                  max: 100,
+                  message: tr('请输入 2–100 字姓名'),
+                },
+              ]}
+            />
+            <ProFormText
+              name="account"
+              label={tr('账号')}
+              extra={tr('4–32 位字母、数字或下划线。')}
+              fieldProps={{
+                maxLength: 32,
+                autoComplete: 'username',
+                autoCapitalize: 'none',
+                spellCheck: false,
+                size: 'large',
+              }}
+              rules={[
+                { required: true, message: tr('请输入账号') },
+                {
+                  pattern: ACCOUNT_PATTERN,
+                  transform: (value: string) => value?.trim(),
+                  message: tr('请输入 4–32 位字母、数字或下划线'),
+                },
+              ]}
+            />
+            <ProFormText.Password
+              name="password"
+              label={tr('密码')}
+              fieldProps={{ maxLength: 16, autoComplete: 'new-password', size: 'large' }}
+              rules={[
+                { required: true, message: tr('请输入密码') },
+                { min: 8, max: 16, message: tr('密码长度为 8–16 位') },
+              ]}
+            />
+            <ProFormText.Password
+              name="confirmPassword"
+              label={tr('确认密码')}
+              dependencies={['password']}
+              fieldProps={{ maxLength: 16, autoComplete: 'new-password', size: 'large' }}
+              rules={[
+                { required: true, message: tr('请再次输入密码') },
+                ({ getFieldValue }) => ({
+                  validator: (_, value) =>
+                    value === getFieldValue('password')
+                      ? Promise.resolve()
+                      : Promise.reject(new Error(tr('两次输入的密码不一致'))),
+                }),
+              ]}
+            />
+          </LoginForm>
+          <p className="login-account-hint">
+            {tr('已有账号？')}
+            <Link to={buildAuthPath('/login', { next })}>{tr('返回登录')}</Link>
+          </p>
+        </div>
+        <footer className="login-footer">{tr('万物 · 工作空间')}</footer>
+      </section>
+    </main>
+  )
+}

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

@@ -0,0 +1,32 @@
+import type { AccessContext, AccessScope, WorkspacesResult } from 'shared/types'
+import { accessScopeBasePath } from 'shared/utils'
+import { freshRequest, runWorkspaceRequest, workspaceRequest } from '@/utils/request/workspace'
+
+interface WorkspaceApiRequestOptions {
+  workspaceKey: string
+  signal?: AbortSignal
+}
+
+/** 获取当前会话可进入的工作空间，导航取消时同步中止请求。 */
+export const getWorkspaces = ({ workspaceKey, signal }: WorkspaceApiRequestOptions) =>
+  runWorkspaceRequest({
+    method: workspaceRequest.Get<WorkspacesResult>('/workspaces', freshRequest),
+    workspaceKey,
+    signal,
+    accessRequest: true,
+  })
+
+/** 获取指定工作空间的权限上下文，供路由进入校验使用。 */
+export const getAccessContext = (
+  scope: AccessScope,
+  { workspaceKey, signal }: WorkspaceApiRequestOptions,
+) =>
+  runWorkspaceRequest({
+    method: workspaceRequest.Get<AccessContext>(
+      `${accessScopeBasePath(scope)}/access`,
+      freshRequest,
+    ),
+    workspaceKey,
+    signal,
+    accessRequest: true,
+  })