create-bubbles 0.1.26 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/src/components/LocaleSwitch/LocaleSwitch.tsx

@@ -0,0 +1,52 @@
+import { TranslationOutlined } from '@ant-design/icons'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { Button, Dropdown } from 'antd'
+import { DEFAULT_LOCALE, isAppLocale, type AppLocale } from '@/i18n/config'
+
+const localeItems = [
+  { key: 'zh_CN', label: '简体中文' },
+  { key: 'en_US', label: 'English' },
+] satisfies Array<{ key: AppLocale; label: string }>
+
+export interface LocaleSwitchProps {
+  showLabel?: boolean
+}
+
+/** 切换并持久化应用语言，可选择是否显示当前语言名称。 */
+export default function LocaleSwitch({ showLabel = true }: LocaleSwitchProps) {
+  const { loadLocale, locale, tr } = useI18n()
+  const [loading, setLoading] = useState(false)
+  const activeLocale = isAppLocale(locale) ? locale : DEFAULT_LOCALE
+  const activeLabel = localeItems.find((item) => item.key === activeLocale)?.label
+
+  /** 加载所选语言资源，并在完成前阻止重复切换。 */
+  async function handleLocaleChange(nextLocale: AppLocale) {
+    if (loading || nextLocale === activeLocale) return
+    setLoading(true)
+    try {
+      await loadLocale(nextLocale)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dropdown
+      trigger={['click']}
+      menu={{
+        items: localeItems,
+        selectedKeys: [activeLocale],
+        onClick: ({ key }) => void handleLocaleChange(key as AppLocale),
+      }}
+    >
+      <Button
+        type="text"
+        icon={<TranslationOutlined />}
+        loading={loading}
+        aria-label={tr('切换语言')}
+      >
+        {showLabel ? activeLabel : null}
+      </Button>
+    </Dropdown>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/PasswordActions/ChangePasswordDialog.tsx

@@ -0,0 +1,90 @@
+import { ModalForm } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { useRequest } from 'alova/client'
+import { Alert, Form } from 'antd'
+import type { ChangePasswordRequest } from 'shared/types'
+import { changePassword } from '@/api/auth'
+import PasswordFields from './PasswordFields'
+import { changePasswordAndClearSession } from './change-password-session'
+
+export interface ChangePasswordDialogRef {
+  show: () => void
+  hide: () => void
+}
+
+/** 验证当前密码后更新全局账号密码，成功时清理旧会话并转向登录。 */
+export default function ChangePasswordDialog({ ref }: { ref: Ref<ChangePasswordDialogRef> }) {
+  const [form] = Form.useForm<ChangePasswordRequest>()
+  const [open, setOpen] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const pending = useRef(false)
+  const { send, loading } = useRequest(changePassword, { immediate: false })
+  const navigate = useNavigate()
+  const { tr } = useI18n()
+
+  /** 每次打开均清空全部密码和上一次错误。 */
+  const show = () => {
+    form.resetFields()
+    setError(null)
+    setOpen(true)
+  }
+  /** 关闭表单时清除密码，提交期间不允许关闭并遗留在途操作。 */
+  const hide = () => {
+    if (pending.current) return
+    form.resetFields()
+    setError(null)
+    setOpen(false)
+  }
+  useImperativeHandle(ref, () => ({ show, hide }))
+
+  /** 仅在服务器确认密码及全终端会话撤销成功后删除本地凭据。 */
+  async function submit(values: ChangePasswordRequest) {
+    if (pending.current) return false
+    pending.current = true
+    setError(null)
+    try {
+      await changePasswordAndClearSession(values, send)
+      form.resetFields()
+      setOpen(false)
+      void navigate('/login', { replace: true, state: { passwordChanged: true } })
+      return true
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : tr('修改密码失败，请重试'))
+      return false
+    } finally {
+      pending.current = false
+    }
+  }
+
+  return (
+    <ModalForm<ChangePasswordRequest>
+      title={tr('修改密码')}
+      open={open}
+      form={form}
+      width={460}
+      modalProps={{ destroyOnHidden: true, maskClosable: false, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      onValuesChange={() => {
+        if (error) setError(null)
+      }}
+      submitter={{
+        searchConfig: { submitText: tr('确认修改') },
+        submitButtonProps: { loading },
+      }}
+      onFinish={submit}
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('修改成功后，所有终端都需要使用新密码重新登录。')}
+        style={{ marginBottom: 20 }}
+      />
+      {error && (
+        <Alert type="error" showIcon title={error} role="alert" style={{ marginBottom: 20 }} />
+      )}
+      <PasswordFields mode="change" />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/PasswordActions/PasswordFields.module.css

@@ -0,0 +1,12 @@
+.fields input:autofill,
+.fields input:autofill:hover,
+.fields input:autofill:focus,
+.fields input:autofill:active,
+.fields input:-webkit-autofill,
+.fields input:-webkit-autofill:hover,
+.fields input:-webkit-autofill:focus,
+.fields input:-webkit-autofill:active {
+  transition: background-color 900000000s ease-in-out 0s;
+  -webkit-text-fill-color: var(--wanwu-ink, #242424);
+  caret-color: var(--wanwu-ink, #242424);
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/PasswordActions/PasswordFields.tsx

@@ -0,0 +1,54 @@
+import { ProFormText } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import styles from './PasswordFields.module.css'
+
+/** 为本人改密与管理员重置提供相同的密码约束和不回填输入框。 */
+export default function PasswordFields({ mode }: { mode: 'change' | 'reset' }) {
+  const { tr } = useI18n()
+
+  return (
+    <div className={styles.fields}>
+      {mode === 'change' && (
+        <ProFormText.Password
+          name="oldPassword"
+          label={tr('旧密码')}
+          fieldProps={{ autoComplete: 'off', maxLength: 128 }}
+          rules={[{ required: true, message: tr('请输入旧密码') }]}
+        />
+      )}
+      <ProFormText.Password
+        name="newPassword"
+        label={tr('新密码')}
+        dependencies={mode === 'change' ? ['oldPassword'] : []}
+        fieldProps={{ autoComplete: 'new-password', maxLength: 16 }}
+        rules={[
+          { required: true, message: tr('请输入新密码') },
+          { min: 8, max: 16, message: tr('密码长度为 8–16 位') },
+          ({ getFieldValue }) => ({
+            /** 本人改密时不能再次使用输入的旧密码，服务端还会独立校验。 */
+            validator: (_, value) =>
+              mode === 'change' && value && value === getFieldValue('oldPassword')
+                ? Promise.reject(new Error(tr('新密码不能与旧密码相同')))
+                : Promise.resolve(),
+          }),
+        ]}
+      />
+      <ProFormText.Password
+        name="confirmPassword"
+        label={tr('确认密码')}
+        dependencies={['newPassword']}
+        fieldProps={{ autoComplete: 'new-password', maxLength: 16 }}
+        rules={[
+          { required: true, message: tr('请再次输入新密码') },
+          ({ getFieldValue }) => ({
+            /** 确认值必须与新密码逐字一致，不对密码做隐式裁剪。 */
+            validator: (_, value) =>
+              value === getFieldValue('newPassword')
+                ? Promise.resolve()
+                : Promise.reject(new Error(tr('两次输入的密码不一致'))),
+          }),
+        ]}
+      />
+    </div>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/PasswordActions/ResetAccountPasswordDialog.tsx

@@ -0,0 +1,100 @@
+import { ModalForm } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { Alert, App, Form } from 'antd'
+import type { AccountRecord, ResetAccountPasswordRequest } from 'shared/types'
+import PasswordFields from './PasswordFields'
+
+export interface ResetAccountPasswordDialogRef {
+  show: (record: AccountRecord) => void
+  hide: () => void
+}
+
+/** 只接收目标公开资料和提交方法，不保留或回显目标的新密码。 */
+export default function ResetAccountPasswordDialog({
+  ref,
+  onSave,
+}: {
+  ref: Ref<ResetAccountPasswordDialogRef>
+  onSave: (record: AccountRecord, values: ResetAccountPasswordRequest) => Promise<void>
+}) {
+  const [form] = Form.useForm<ResetAccountPasswordRequest>()
+  const [record, setRecord] = useState<AccountRecord>()
+  const [open, setOpen] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const pending = useRef(false)
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+
+  /** 打开目标账号表单前丢弃上一次输入和错误。 */
+  const show = (target: AccountRecord) => {
+    form.resetFields()
+    setError(null)
+    setRecord(target)
+    setOpen(true)
+  }
+  /** 关闭时清空密码和目标，提交期间保持目标绑定。 */
+  const hide = () => {
+    if (pending.current) return
+    form.resetFields()
+    setError(null)
+    setOpen(false)
+    setRecord(undefined)
+  }
+  useImperativeHandle(ref, () => ({ show, hide }))
+
+  /** 服务端确认重置及目标会话撤销成功后才显示线下告知提示。 */
+  async function submit(values: ResetAccountPasswordRequest) {
+    if (pending.current || !record) return false
+    pending.current = true
+    setSubmitting(true)
+    setError(null)
+    try {
+      await onSave(record, values)
+      form.resetFields()
+      setOpen(false)
+      setRecord(undefined)
+      void message.success(tr('密码已重置，请通过现有线下渠道告知用户。'))
+      return true
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : tr('重置密码失败，请重试'))
+      return false
+    } finally {
+      pending.current = false
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <ModalForm<ResetAccountPasswordRequest>
+      title={tr('重置密码 · {name}', { name: record?.name ?? '' })}
+      open={open}
+      form={form}
+      width={460}
+      modalProps={{ destroyOnHidden: true, maskClosable: false, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      onValuesChange={() => {
+        if (error) setError(null)
+      }}
+      submitter={{
+        searchConfig: { submitText: tr('确认重置') },
+        submitButtonProps: { loading: submitting },
+      }}
+      onFinish={submit}
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('目标账号：{account}', { account: record?.account ?? '' })}
+        description={tr('重置成功后，目标账号的所有终端会话失效。请通过现有线下渠道告知用户。')}
+        style={{ marginBottom: 20 }}
+      />
+      {error && (
+        <Alert type="error" showIcon title={error} role="alert" style={{ marginBottom: 20 }} />
+      )}
+      <PasswordFields mode="reset" />
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/PasswordActions/change-password-session.ts

@@ -0,0 +1,13 @@
+import type { ChangePasswordRequest, ChangePasswordResult } from 'shared/types'
+import { clearWorkspaceRequests } from '@/utils/request/workspace'
+import { cookie } from '@/utils/storage/cookie'
+
+/** 只有服务端完成密码更新与全终端撤销后，才让本端旧请求和令牌失效。 */
+export async function changePasswordAndClearSession(
+  values: ChangePasswordRequest,
+  send: (input: ChangePasswordRequest) => Promise<ChangePasswordResult>,
+) {
+  await send(values)
+  clearWorkspaceRequests()
+  cookie.remove('token')
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/RouteTransition/RouteTransition.css

@@ -0,0 +1,60 @@
+@layer components {
+  .route-transition-page {
+    height: 100%;
+    min-height: 0;
+  }
+}
+
+/* 只让当前路由页面区域过渡，禁用浏览器默认的根节点动画。 */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+}
+
+::view-transition-group(route-page) {
+  overflow: clip;
+  animation-duration: 320ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 两张页面快照同步横向滑动，避免默认混合模式造成重影。 */
+::view-transition-old(route-page),
+::view-transition-new(route-page) {
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(route-page) {
+  animation: route-page-out 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+::view-transition-new(route-page) {
+  animation: route-page-in 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes route-page-out {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes route-page-in {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(route-page),
+  ::view-transition-old(route-page),
+  ::view-transition-new(route-page) {
+    animation: none !important;
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/RouteTransition/RouteTransition.tsx

@@ -0,0 +1,44 @@
+import './RouteTransition.css'
+
+/** 为已提交的新路由播放页面区域滑动，并忽略同一路由的加载完成及异步更新。 */
+export default function RouteTransition({ children }: PropsWithChildren) {
+  const { key: locationKey } = useLocation()
+  const previousLocationKey = useRef(locationKey)
+
+  // onUpdate 先于 passive effect 执行；无动画的同步导航也需要更新基准。
+  useEffect(() => {
+    previousLocationKey.current = locationKey
+  }, [locationKey])
+
+  /** 同一导航只保留首次滑动，取消页内更新产生的页面快照动画。 */
+  function handleUpdate() {
+    if (previousLocationKey.current !== locationKey) {
+      previousLocationKey.current = locationKey
+      return
+    }
+
+    for (const animation of document.documentElement.getAnimations({ subtree: true })) {
+      const effect = animation.effect
+      if (
+        effect instanceof KeyframeEffect &&
+        /^::view-transition-(group|image-pair|old|new)\(route-page\)$/.test(
+          effect.pseudoElement ?? '',
+        )
+      ) {
+        animation.cancel()
+      }
+    }
+  }
+
+  return (
+    <ReactViewTransition
+      name="route-page"
+      default="none"
+      share="route-page"
+      update="route-page"
+      onUpdate={handleUpdate}
+    >
+      <div className="route-transition-page">{children ?? <Outlet />}</div>
+    </ReactViewTransition>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Selector/BasicTableSelector/BasicTableSelector.tsx

@@ -0,0 +1,218 @@
+import { ProTable, type ParamsType } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { Alert, Button, Flex, Modal, Tag, Typography } from 'antd'
+import { BasicTableSelectorSelection } from './BasicTableSelectorSelection'
+import type { BasicTableSelectorProps } from './BasicTableSelectorTypes'
+
+/** 在独立弹窗中展示分页表格，支持跨页选择和缺失记录补查。 */
+export default function BasicTableSelector<
+  T extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+>({
+  ref,
+  title,
+  rowKey,
+  request,
+  multiple = false,
+  onChange,
+  requestByKeys,
+  labelRender,
+  sidePanel,
+  onTableChange,
+  getCheckboxProps,
+  modalProps,
+  onLoad,
+  onRequestError,
+  pagination,
+  scroll,
+  ...tableProps
+}: BasicTableSelectorProps<T, Params, ValueType>) {
+  const { tr } = useI18n()
+  const [session, setSession] = useState<{
+    id: number
+    selection: BasicTableSelectorSelection<T>
+  }>()
+  const [confirming, setConfirming] = useState(false)
+  const [error, setError] = useState<string>()
+  const sessionId = useRef(0)
+  const pendingId = useRef<number | null>(null)
+
+  /** 结束当前选择会话，清除提交状态及错误，使旧异步结果失效。 */
+  const hide = () => {
+    sessionId.current += 1
+    pendingId.current = null
+    setSession(undefined)
+    setConfirming(false)
+    setError(undefined)
+  }
+
+  useEffect(
+    () => () => {
+      // 关闭、重开或卸载后，旧会话的异步补查不能提交到新会话。
+      sessionId.current += 1
+    },
+    [],
+  )
+
+  useImperativeHandle(ref, () => ({
+    /** 根据初始选中项开启新会话，并清除上一会话的提交和错误状态。 */
+    show: (options = {}) => {
+      const selection = new BasicTableSelectorSelection<T>({ ...options, rowKey, multiple })
+      const id = ++sessionId.current
+      pendingId.current = null
+      setConfirming(false)
+      setError(undefined)
+      setSession({ id, selection })
+    },
+    hide,
+  }))
+
+  /** 仅更新当前且未提交的选择会话，并清除之前的错误提示。 */
+  const changeSelection = (selection: BasicTableSelectorSelection<T>) => {
+    if (!session || pendingId.current !== null || session.id !== sessionId.current) return
+    setSession({ ...session, selection })
+    setError(undefined)
+  }
+
+  /** 补齐选中记录后提交结果，并阻止旧会话和重复确认影响当前弹窗。 */
+  const confirm = async () => {
+    if (!session || pendingId.current !== null) return
+    const { id, selection } = session
+    pendingId.current = id
+    setConfirming(true)
+    setError(undefined)
+    try {
+      const resolved = await selection.resolve(requestByKeys)
+      if (sessionId.current !== id) return
+      await onChange([...resolved.value], resolved.rows)
+      if (sessionId.current === id) hide()
+    } catch (cause) {
+      if (sessionId.current === id) {
+        setError(tr(cause instanceof Error ? cause.message : '确认选择失败，请重试'))
+      }
+    } finally {
+      if (sessionId.current === id) {
+        pendingId.current = null
+        setConfirming(false)
+      }
+    }
+  }
+
+  return (
+    <Modal
+      width={960}
+      okText={tr('确定')}
+      cancelText={tr('取消')}
+      {...modalProps}
+      title={title}
+      open={!!session}
+      destroyOnHidden
+      onCancel={hide}
+      onOk={() => void confirm()}
+      confirmLoading={confirming}
+      cancelButtonProps={{ disabled: confirming }}
+      closable={!confirming}
+      keyboard={!confirming}
+      maskClosable={!confirming}
+    >
+      {session && (
+        <Flex align="stretch" gap={16} wrap="wrap">
+          {sidePanel}
+          <div style={{ flex: '1 1 640px', minWidth: 0 }}>
+            <Flex align="center" justify="space-between">
+              <Typography.Text>
+                {tr('已选择 {count} 项', { count: session.selection.value.length })}
+              </Typography.Text>
+              <Button
+                type="link"
+                disabled={confirming || !session.selection.value.length}
+                onClick={() => changeSelection(session.selection.select({ value: [] }))}
+              >
+                {tr('清空选择')}
+              </Button>
+            </Flex>
+            <Flex wrap gap={4} style={{ maxHeight: 96, overflowY: 'auto', marginBottom: 12 }}>
+              {session.selection.value.map(
+                /** 为选中键生成标签，已加载记录使用业务标签，其余显示原始键。 */ (key) => {
+                  const row = session.selection.get(key)
+                  return (
+                    <Tag
+                      key={`${typeof key}:${key}`}
+                      closable={!confirming}
+                      onClose={
+                        /** 阻止标签默认关闭行为，并从当前会话选中键中移除该项。 */ (event) => {
+                          event.preventDefault()
+                          changeSelection(
+                            session.selection.select({
+                              value: session.selection.value.filter((value) => value !== key),
+                            }),
+                          )
+                        }
+                      }
+                    >
+                      {row && labelRender ? labelRender(row) : String(key)}
+                    </Tag>
+                  )
+                },
+              )}
+            </Flex>
+            {error && <Alert type="error" showIcon title={error} style={{ marginBottom: 12 }} />}
+            <ProTable<T, Params, ValueType>
+              key={session.id}
+              search={{ labelWidth: 'auto' }}
+              cardProps={false}
+              options={{ reload: true, density: false, setting: false }}
+              {...tableProps}
+              rowKey={(row) => session.selection.keyOf(row)}
+              request={request}
+              onChange={onTableChange}
+              editable={undefined}
+              dataSource={undefined}
+              defaultData={undefined}
+              pagination={
+                pagination === false
+                  ? false
+                  : { defaultPageSize: 10, showSizeChanger: true, ...pagination }
+              }
+              scroll={{ x: 'max-content', y: 360, ...scroll }}
+              tableAlertRender={false}
+              tableAlertOptionRender={false}
+              onLoad={
+                /** 仅将当前会话加载的记录补入已选快照，并转发加载完成通知。 */ (rows) => {
+                  if (session.id !== sessionId.current) return
+                  setError(undefined)
+                  setSession((current) =>
+                    current?.id === session.id
+                      ? { ...current, selection: current.selection.remember(rows) }
+                      : current,
+                  )
+                  onLoad?.(rows)
+                }
+              }
+              onRequestError={
+                /** 仅向当前选择会话展示加载错误，并转发请求失败通知。 */ (cause) => {
+                  if (session.id !== sessionId.current) return
+                  setError(cause.message || tr('加载选择数据失败，请刷新重试'))
+                  onRequestError?.(cause)
+                }
+              }
+              rowSelection={{
+                type: session.selection.multiple ? 'checkbox' : 'radio',
+                preserveSelectedRowKeys: true,
+                selectedRowKeys: session.selection.value,
+                /** 合并行禁选规则，并在确认过程中禁用选择控件。 */
+                getCheckboxProps: (row) => {
+                  const checkboxProps = getCheckboxProps?.(row)
+                  return { ...checkboxProps, disabled: confirming || checkboxProps?.disabled }
+                },
+                onChange: (keys, rows) =>
+                  changeSelection(session.selection.select({ value: keys, rows })),
+              }}
+            />
+          </div>
+        </Flex>
+      )}
+    </Modal>
+  )
+}