create-bubbles 0.1.25 → 0.1.27

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

@@ -0,0 +1,54 @@
+@layer components {
+  .proTable {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  /* 窄屏展开全部搜索项时，仍为表体保留可见空间。 */
+  .proTable > :global(.ant-pro-table-search) {
+    max-height: 50%;
+    overflow: auto;
+  }
+
+  /* ProTable 会将根 className 同时附加到 tableExtraRender 容器。 */
+  .proTable:global(.ant-pro-table-extra) {
+    height: auto;
+    flex-shrink: 0;
+  }
+
+  .tableCard {
+    min-height: 0;
+    flex: 1;
+  }
+
+  /* 将搜索区、工具栏和分页之外的剩余高度逐层传给表体。 */
+  .tableCard > :global(.ant-pro-card-body),
+  .table,
+  .table > :global(.ant-spin),
+  .table :global(.ant-spin-container),
+  .table :global(.ant-table),
+  .table :global(.ant-table-container) {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .proTable > :global(.ant-pro-table-search),
+  .proTable :global(.ant-pro-table-list-toolbar),
+  .proTable :global(.ant-pro-table-alert),
+  .table :global(.ant-table-header),
+  .table :global(.ant-table-pagination) {
+    flex-shrink: 0;
+  }
+
+  .table :global(.ant-table-body) {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto !important;
+    /* 滚动到底部了如果再滚动看页面要不要滚动 */
+    overscroll-behavior: contain;
+  }
+}

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

@@ -0,0 +1,41 @@
+import { ProTable, type ParamsType, type ProTableProps } from '@ant-design/pro-components'
+import classNames from 'classnames'
+import styles from './FullHeightProTable.module.css'
+
+export type FullHeightProTableProps<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+> = ProTableProps<DataType, Params, ValueType>
+
+/**
+ * 父容器需有明确高度，例如 h-full；位于 flex 布局时还需 min-h-0。
+ * 默认使用 ProTable 原生 scroll.y 固定表头，表体占据剩余高度并独立滚动。
+ */
+export default function FullHeightProTable<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+>({
+  className,
+  cardProps,
+  tableClassName,
+  scroll,
+  ...props
+}: FullHeightProTableProps<DataType, Params, ValueType>) {
+  return (
+    <div className="w-full h-full p-[16px]">
+      <ProTable<DataType, Params, ValueType>
+        {...props}
+        className={classNames(styles.proTable, className)}
+        cardProps={
+          cardProps === false
+            ? false
+            : { ...cardProps, className: classNames(styles.tableCard, cardProps?.className) }
+        }
+        tableClassName={classNames(styles.table, tableClassName)}
+        scroll={{ x: 'max-content', y: 'auto', ...scroll }}
+      />
+    </div>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/SvgAsset/IconSelector.tsx

@@ -0,0 +1,38 @@
+import { Select, Space } from 'antd'
+import type { SelectProps } from 'antd'
+import SvgAssetIcon from './SvgAssetIcon'
+import { svgAssets } from './SvgAssetRegistry'
+
+export type IconSelectorProps = Omit<
+  SelectProps<string>,
+  'labelRender' | 'optionRender' | 'options'
+>
+
+const options = svgAssets.map((asset) => ({ value: asset.key, label: asset.key }))
+
+/** 提供本地 SVG 图标的搜索、预览、选择、清空和编辑回显。 */
+export default function IconSelector({
+  placeholder = '搜索并选择图标',
+  ...props
+}: IconSelectorProps) {
+  /** 渲染带预览图标的候选项或当前已选值。 */
+  const renderValue = (value: unknown, label?: ReactNode) => (
+    <Space size={8}>
+      <SvgAssetIcon name={String(value)} size="1.1em" />
+      <span>{label ?? String(value)}</span>
+    </Space>
+  )
+
+  return (
+    <Select<string>
+      {...props}
+      allowClear
+      showSearch
+      optionFilterProp="label"
+      options={options}
+      placeholder={placeholder}
+      optionRender={(option) => renderValue(option.value, option.label)}
+      labelRender={({ value, label }) => renderValue(value, label)}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/SvgAsset/SvgAssetIcon.tsx

@@ -0,0 +1,14 @@
+import type { SvgIconProps } from '../svg-icon/SvgIcon'
+import SvgIcon from '../svg-icon/SvgIcon'
+import { resolveSvgAsset } from './SvgAssetRegistry'
+
+export interface SvgAssetIconProps extends Omit<SvgIconProps, 'icon'> {
+  /** 菜单图标 key，缺失或不存在时使用缺省图标。 */
+  name?: string
+}
+
+/** 将本地 SVG 资源按稳定 key 渲染为可继承外部大小和颜色的图标。 */
+export default function SvgAssetIcon({ name, ...props }: SvgAssetIconProps) {
+  const asset = resolveSvgAsset(name)
+  return <SvgIcon icon={asset.component} {...props} data-icon-key={asset.key} />
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/SvgAsset/SvgAssetRegistry.ts

@@ -0,0 +1,32 @@
+type SvgAssetComponent = ComponentType<SVGProps<SVGSVGElement>>
+
+const assetModules = import.meta.glob<SvgAssetComponent>('/src/assets/svg/**/*.svg', {
+  eager: true,
+  import: 'default',
+  query: '?react',
+})
+
+const assetRoot = '/src/assets/svg/'
+
+/** 将 Vite glob 返回的绝对资源路径转换为稳定的菜单图标 key。 */
+function assetKey(path: string): string {
+  return path.slice(assetRoot.length, -'.svg'.length)
+}
+
+export interface SvgAssetDefinition {
+  key: string
+  component: SvgAssetComponent
+}
+
+export const svgAssets: readonly SvgAssetDefinition[] = Object.entries(assetModules)
+  .map(([path, component]) => ({ key: assetKey(path), component }))
+  .sort((left, right) => left.key.localeCompare(right.key))
+
+const assetsByKey = new Map(svgAssets.map((asset) => [asset.key, asset]))
+
+export const DEFAULT_MENU_ICON_KEY = 'menu-item'
+
+/** 按菜单图标 key 解析资源；未知值回退到统一缺省图标。 */
+export function resolveSvgAsset(key?: string): SvgAssetDefinition {
+  return assetsByKey.get(key ?? '') ?? assetsByKey.get(DEFAULT_MENU_ICON_KEY)!
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/SvgAsset/index.ts

@@ -0,0 +1,10 @@
+export { default as IconSelector } from './IconSelector'
+export type { IconSelectorProps } from './IconSelector'
+export { default as SvgAssetIcon } from './SvgAssetIcon'
+export type { SvgAssetIconProps } from './SvgAssetIcon'
+export {
+  DEFAULT_MENU_ICON_KEY,
+  resolveSvgAsset,
+  svgAssets,
+  type SvgAssetDefinition,
+} from './SvgAssetRegistry'

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/svg-icon/README.md

@@ -0,0 +1,37 @@
+# SvgIcon
+
+使用 `vite-plugin-svgr` 将本地 SVG 导入为 React 组件，再由 `SvgIcon` 统一控制大小与颜色。
+
+```tsx
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import SvgIcon from '@/components/Icon/svg-icon/SvgIcon'
+;<SvgIcon icon={DraftIcon} size={24} color="#1677ff" />
+```
+
+| 参数                 | 说明                                                              |
+| -------------------- | ----------------------------------------------------------------- |
+| `icon`               | 通过 `?react` 导入的 SVG 组件，必填                               |
+| `size`               | 字号，数字按 px 处理，也支持 `1.5rem` 等 CSS 长度；不传时继承父级 |
+| `color`              | 图标颜色；不传时继承父级                                          |
+| `className`、`style` | 原生 SVG 样式；`style` 中的同名设置优先                           |
+
+SVG 的宽高统一为 `1em`，因此 `font-size` 决定图标大小。`ref`、事件和其他 SVG 属性继续透传。默认作为装饰图标隐藏于辅助技术；需要独立表达含义时传 `role="img"` 和 `aria-label`。
+
+```tsx
+<span style={{ fontSize: 20, color: '#1677ff' }}>
+  <SvgIcon icon={DraftIcon} />
+  草稿
+</span>
+
+<SvgIcon icon={DraftIcon} size={24} role="img" aria-label="草稿" />
+```
+
+源文件规范：
+
+- 保留 `viewBox`，保证缩放正确。
+- 单色填充图标使用 `fill="currentColor"`；线条图标使用 `stroke="currentColor"`。
+- 保留 `fill="none"`、`stroke="none"`，避免填实空心图形。
+- 内部元素若写死颜色，也需要在源文件中改成 `currentColor` 才能跟随文字颜色。
+- SVGR 与组件保留多色和渐变，不会强制覆盖所有颜色。
+
+现有 `draft.svg` 已遵循上述规范。直接导入 `draft.svg` 仍然得到资源 URL，只有 `draft.svg?react` 会转换为 React 组件。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/svg-icon/SvgIcon.tsx

@@ -0,0 +1,25 @@
+export type SvgIconProps = Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+  size?: number | string
+}
+
+/** SVG 源文件使用 currentColor；不传 size、color 时继承父级文字样式。 */
+export default function SvgIcon({ icon: Icon, size, color, style, ...props }: SvgIconProps) {
+  return (
+    <Icon
+      aria-hidden={props['aria-label'] || props['aria-labelledby'] ? undefined : true}
+      focusable="false"
+      {...props}
+      width="1em"
+      height="1em"
+      style={{
+        display: 'inline-block',
+        verticalAlign: '-0.125em',
+        flexShrink: 0,
+        fontSize: size,
+        color,
+        ...style,
+      }}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Loading/PageLoading.module.css

@@ -0,0 +1,7 @@
+@layer components {
+  .pageLoading {
+    display: grid;
+    min-height: 50vh;
+    place-items: center;
+  }
+}

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

@@ -1,8 +1,13 @@
 import { Spin } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import styles from './PageLoading.module.css'
 
+/** 为路由懒加载提供居中且可被辅助技术识别的加载状态。 */
 const Loading = () => {
+  const { tr } = useI18n()
+
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
+    <div className={styles.pageLoading} role="status" aria-label={tr('页面加载中')}>
       <Spin size="large" />
     </div>
   )

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;
+  }
+}