@lobehub/chat 1.96.2 → 1.96.4

package/src/app/[variants]/(main)/files/(content)/NotSupportClient.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Icon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Icon, Text } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
 import { Database, FileImage, FileText, FileUpIcon, LibraryBig, SearchCheck } from 'lucide-react';
 import Link from 'next/link';
@@ -128,8 +127,10 @@ const NotSupportClient = () => {
       </Flexbox>
 
       <Flexbox justify={'center'} style={{ textAlign: 'center' }}>
-        <Typography.Title>{t('notSupportGuide.title')}</Typography.Title>
-        <Typography.Text type={'secondary'}>
+        <Text as={'h1'} style={{ fontSize: 32 }}>
+          {t('notSupportGuide.title')}
+        </Text>
+        <Text type={'secondary'}>
           <Trans i18nKey={'notSupportGuide.desc'} ns={'file'}>
             当前部署实例为客户端数据库模式，无法使用文件管理功能。请切换到
             <Link href={DATABASE_SELF_HOSTING_URL}>服务端数据库部署模式</Link>
@@ -140,7 +141,7 @@ const NotSupportClient = () => {
               {LOBE_CHAT_CLOUD}
             </Link>
           </Trans>
-        </Typography.Text>
+        </Text>
       </Flexbox>
 
       <Flexbox style={{ marginTop: 40 }}>

package/src/app/[variants]/(main)/files/[id]/Header.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { ActionIcon, Button } from '@lobehub/ui';
-import { Divider, Typography } from 'antd';
+import { ActionIcon, Button, Text } from '@lobehub/ui';
+import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
 import { ArrowLeftIcon, DownloadIcon } from 'lucide-react';
 import { useRouter } from 'next/navigation';
@@ -42,12 +42,12 @@ const Header = memo<HeaderProps>(({ filename, url }) => {
           {t('back')}
         </Button>
         <Divider type={'vertical'} />
-        <Typography.Title
-          level={1}
+        <Text
+          as={'h1'}
           style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 0, paddingInlineStart: 8 }}
         >
           {filename}
-        </Typography.Title>
+        </Text>
       </Flexbox>
       <Flexbox>
         <ActionIcon

package/src/app/[variants]/(main)/repos/[id]/evals/dataset/DatasetDetail/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { ProColumns, ProTable } from '@ant-design/pro-components';
-import { ActionIcon, Button } from '@lobehub/ui';
-import { Typography, Upload } from 'antd';
+import { ActionIcon, Button, Text } from '@lobehub/ui';
+import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import { Edit2Icon, Trash2Icon } from 'lucide-react';
 import { parseAsInteger, useQueryState } from 'nuqs';
@@ -64,7 +64,7 @@ const DatasetDetail = () => {
               {referenceFiles?.map((file) => (
                 <Flexbox gap={4} horizontal key={file.id}>
                   <FileIcon fileName={file.name} fileType={file.fileType} size={20} />
-                  <Typography.Text ellipsis={{ tooltip: true }}>{file.name}</Typography.Text>
+                  <Text ellipsis={{ tooltip: true }}>{file.name}</Text>
                 </Flexbox>
               ))}
             </Flexbox>

package/src/app/[variants]/(main)/repos/[id]/evals/evaluation/EvaluationList/index.tsx

@@ -2,9 +2,10 @@
 
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
 import { ActionIcon, Button, ButtonProps, Icon } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { App } from 'antd';
 import { createStyles } from 'antd-style';
 import { DownloadIcon, PlayIcon, RotateCcwIcon, Trash2Icon } from 'lucide-react';
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -57,13 +58,13 @@ const EvaluationList = ({ knowledgeBaseId }: { knowledgeBaseId: string }) => {
       dataIndex: ['dataset', 'id'],
       render: (dom, entity) => {
         return (
-          <Typography.Link
+          <Link
             href={`/repos/${knowledgeBaseId}/evals/dataset?id=${entity.dataset.id}`}
             style={{ color: 'initial' }}
             target={'_blank'}
           >
             {entity.dataset.name}
-          </Typography.Link>
+          </Link>
         );
       },
       title: t('evaluation.table.columns.datasetId.title'),

package/src/app/[variants]/(main)/repos/[id]/features/Menu/Head/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
@@ -16,7 +16,9 @@ const Head = memo<{ name?: string }>(({ name }) => {
           <RepoIcon />
         </Center>
 
-        <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>{name}</Typography.Text>
+        <Text ellipsis strong style={{ fontSize: 16 }}>
+          {name}
+        </Text>
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -1,6 +1,6 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { App, Typography } from 'antd';
+import { ActionIcon, Icon, Text } from '@lobehub/ui';
+import { App } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { LucideArrowRight, LucideSettings, LucideTrash2 } from 'lucide-react';
 import { memo } from 'react';
@@ -45,10 +45,10 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
         <ModelIcon model={id} size={32} />
         <Flexbox direction={'vertical'} style={{ flex: 1, overflow: 'hidden' }}>
           <Flexbox align={'center'} gap={8} horizontal>
-            <Typography.Text ellipsis>{modelCard?.displayName || id}</Typography.Text>
+            <Text ellipsis>{modelCard?.displayName || id}</Text>
             <ModelInfoTags id={id} {...modelCard} isCustom />
           </Flexbox>
-          <Typography.Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
+          <Text ellipsis style={{ fontSize: 12, marginTop: '4px' }} type={'secondary'}>
             {id}
             {!!modelCard?.deploymentName && (
               <>
@@ -56,7 +56,7 @@ const CustomModelOption = memo<CustomModelOptionProps>(({ id, provider }) => {
                 {modelCard?.deploymentName}
               </>
             )}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       </Flexbox>
 

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/ModelFetcher.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Icon, Text, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import isEqual from 'fast-deep-equal';
@@ -61,7 +60,7 @@ const ModelFetcher = memo<ModelFetcherProps>(({ provider }) => {
   const { mutate, isValidating } = useFetchProviderModelList(provider, enabledAutoFetch);
 
   return (
-    <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+    <Text style={{ fontSize: 12 }} type={'secondary'}>
       <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
         <div style={{ display: 'flex', lineHeight: '24px' }}>
           {t('llm.modelList.total', { count: totalModels })}
@@ -100,7 +99,7 @@ const ModelFetcher = memo<ModelFetcherProps>(({ provider }) => {
           </Flexbox>
         </Tooltip>
       </Flexbox>
-    </Typography.Text>
+    </Text>
   );
 });
 export default ModelFetcher;

package/src/app/[variants]/(main)/settings/llm/components/ProviderModelList/Option.tsx

@@ -1,6 +1,5 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Tooltip } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text, Tooltip } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { Recycle } from 'lucide-react';
@@ -47,9 +46,9 @@ const OptionRender = memo<OptionRenderProps>(({ displayName, id, provider, isAzu
             {displayName}
             <ModelInfoTags directionReverse placement={'top'} {...model!} />
           </Flexbox>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {id}
-          </Typography.Text>
+          </Text>
         </Flexbox>
       </Flexbox>
       {removed && (

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/Card.tsx

@@ -1,6 +1,6 @@
 import { ProviderCombine, ProviderIcon } from '@lobehub/icons';
-import { Avatar } from '@lobehub/ui';
-import { Divider, Skeleton, Typography } from 'antd';
+import { Avatar, Text } from '@lobehub/ui';
+import { Divider, Skeleton } from 'antd';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,8 +11,6 @@ import { AiProviderListItem } from '@/types/aiProvider';
 import EnableSwitch from './EnableSwitch';
 import { useStyles } from './style';
 
-const { Paragraph } = Typography;
-
 interface ProviderCardProps extends AiProviderListItem {
   loading?: boolean;
 }
@@ -57,23 +55,18 @@ const ProviderCard = memo<ProviderCardProps>(
                         type={'avatar'}
                       />
                     )}
-                    <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
-                      {name || id}
-                    </Typography.Text>
+                    <Text style={{ fontSize: 16, fontWeight: 'bold' }}>{name || id}</Text>
                   </Flexbox>
                 )}
               </Flexbox>
-              <Paragraph
+              <Text
                 className={styles.desc}
                 ellipsis={{
                   rows: 2,
-                  tooltip: {
-                    arrow: false,
-                  },
                 }}
               >
                 {source === 'custom' ? description : t(`${id}.description`)}
-              </Paragraph>
+              </Text>
             </Flexbox>
           </Link>
           <Divider style={{ margin: '4px 0' }} />

package/src/app/[variants]/(main)/settings/provider/(list)/ProviderGrid/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Grid, Tag } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Grid, Tag, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -25,9 +24,9 @@ const List = memo(() => {
     return (
       <Flexbox gap={24} paddingBlock={'0 16px'}>
         <Flexbox align={'center'} gap={4} horizontal>
-          <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 16 }}>
             {t('list.title.enabled')}
-          </Typography.Text>
+          </Text>
         </Flexbox>
         <Grid gap={16} rows={3}>
           {loadingArr.map((item) => (
@@ -41,9 +40,9 @@ const List = memo(() => {
     <>
       <Flexbox gap={24}>
         <Flexbox align={'center'} gap={8} horizontal>
-          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 18 }}>
             {t('list.title.enabled')}
-          </Typography.Text>
+          </Text>
           <Tag>{enabledList.length}</Tag>
         </Flexbox>
         <Grid gap={16} rows={3}>
@@ -54,9 +53,9 @@ const List = memo(() => {
       </Flexbox>
       <Flexbox gap={24}>
         <Flexbox align={'center'} gap={8} horizontal>
-          <Typography.Text style={{ fontSize: 18, fontWeight: 'bold' }}>
+          <Text strong style={{ fontSize: 18 }}>
             {t('list.title.disabled')}
-          </Typography.Text>
+          </Text>
           <Tag>{disabledList.length}</Tag>
         </Flexbox>
         <Grid gap={16} rows={3}>

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/List.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon, ScrollShadow } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, ScrollShadow, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -39,9 +38,9 @@ const ProviderList = () => {
         justify={'space-between'}
         style={{ fontSize: 12, marginTop: 8 }}
       >
-        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+        <Text style={{ fontSize: 12 }} type={'secondary'}>
           {t('menu.list.enabled')}
-        </Typography.Text>
+        </Text>
         <ActionIcon
           icon={ArrowDownUpIcon}
           onClick={() => {
@@ -63,9 +62,9 @@ const ProviderList = () => {
       {enabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}
-      <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+      <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
         {t('menu.list.disabled')}
-      </Typography.Text>
+      </Text>
       {disabledModelProviderList.map((item) => (
         <ProviderItem {...item} key={item.id} />
       ))}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/DisabledModels.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { Button, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -22,9 +21,9 @@ const DisabledModels = memo(() => {
   return (
     disabledModels.length > 0 && (
       <Flexbox>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.disabled')}
-        </Typography.Text>
+        </Text>
         {displayModels.map((item) => (
           <ModelItem {...item} key={item.id} />
         ))}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/EnabledModelList/index.tsx

@@ -1,5 +1,4 @@
-import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon, ToggleLeft } from 'lucide-react';
 import { useState } from 'react';
@@ -24,9 +23,9 @@ const EnabledModelList = () => {
   return (
     <>
       <Flexbox horizontal justify={'space-between'}>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.enabled')}
-        </Typography.Text>
+        </Text>
         {!isEmpty && (
           <Flexbox horizontal>
             <ActionIcon
@@ -66,9 +65,9 @@ const EnabledModelList = () => {
       </Flexbox>
       {isEmpty ? (
         <Center padding={12}>
-          <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          <Text style={{ fontSize: 12 }} type={'secondary'}>
             {t('providerModels.list.enabledEmpty')}
-          </Typography.Text>
+          </Text>
         </Center>
       ) : (
         <Flexbox gap={2}>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelItem.tsx

@@ -1,6 +1,6 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Tag, copyToClipboard } from '@lobehub/ui';
-import { App, Switch, Typography } from 'antd';
+import { ActionIcon, Tag, Text, copyToClipboard } from '@lobehub/ui';
+import { App, Switch } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import { LucidePencil, TrashIcon } from 'lucide-react';
 import { memo, use, useState } from 'react';
@@ -297,11 +297,9 @@ const ModelItem = memo<ModelItemProps>(
             </Flexbox>
             <Flexbox align={'baseline'} gap={8} horizontal>
               {content.length > 0 && (
-                <Typography.Text
-                  style={{ color: theme.colorTextSecondary, fontSize: 12, marginBottom: 0 }}
-                >
+                <Text style={{ color: theme.colorTextSecondary, fontSize: 12, marginBottom: 0 }}>
                   {content.join(' · ')}
-                </Typography.Text>
+                </Text>
               )}
             </Flexbox>
           </Flexbox>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelTitle/index.tsx

@@ -1,5 +1,5 @@
-import { ActionIcon, Button, Dropdown } from '@lobehub/ui';
-import { App, Skeleton, Space, Typography } from 'antd';
+import { ActionIcon, Button, Dropdown, Text } from '@lobehub/ui';
+import { App, Skeleton, Space } from 'antd';
 import { useTheme } from 'antd-style';
 import { CircleX, EllipsisVertical, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -65,14 +65,14 @@ const ModelTitle = memo<ModelFetcherProps>(
       >
         <Flexbox align={'center'} gap={0} horizontal justify={'space-between'}>
           <Flexbox align={'center'} gap={8} horizontal>
-            <Typography.Text style={{ fontSize: 16, fontWeight: 'bold' }}>
+            <Text strong style={{ fontSize: 16 }}>
               {t('providerModels.list.title')}
-            </Typography.Text>
+            </Text>
 
             {isLoading ? (
               <Skeleton.Button active style={{ height: 22 }} />
             ) : (
-              <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+              <Text style={{ fontSize: 12 }} type={'secondary'}>
                 <div style={{ display: 'flex', lineHeight: '24px' }}>
                   {t('providerModels.list.total', { count: totalModels })}
                   {hasRemoteModels && (
@@ -89,7 +89,7 @@ const ModelTitle = memo<ModelFetcherProps>(
                     />
                   )}
                 </div>
-              </Typography.Text>
+              </Text>
             )}
           </Flexbox>
           {isLoading ? (

package/src/app/[variants]/(main)/settings/provider/features/ModelList/SearchResult.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { ActionIcon, Text } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ToggleRightIcon } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -26,9 +25,9 @@ const SearchResult = memo(() => {
   return (
     <>
       <Flexbox horizontal justify={'space-between'}>
-        <Typography.Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
+        <Text style={{ fontSize: 12, marginTop: 8 }} type={'secondary'}>
           {t('providerModels.list.searchResult', { count: filteredModels.length })}
-        </Typography.Text>
+        </Text>
         {!isEmpty && (
           <Flexbox horizontal>
             <ActionIcon

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/DeviceName.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { EditableText } from '@lobehub/ui';
-import { Typography } from 'antd';
+import { EditableText, Text } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -39,7 +38,7 @@ const DeviceName = memo(() => {
           }}
           style={{ cursor: 'pointer' }}
         >
-          <Typography.Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Typography.Text>
+          <Text type={'secondary'}>{t('sync.device.deviceName.hint')}</Text>
         </Flexbox>
       )}
       <EditableText

package/src/app/[variants]/(main)/settings/sync/features/DeviceInfo/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 import { memo } from 'react';
@@ -65,9 +65,9 @@ const DeviceCard = memo<DeviceCardProps>(({ browser, os }) => {
       <Flexbox className={styles.container} padding={4}>
         <Flexbox horizontal paddingBlock={8} paddingInline={12}>
           <div>
-            <Typography style={{ fontSize: 18, fontWeight: 'bold' }}>
+            <Text strong style={{ fontSize: 18 }}>
               {t('sync.device.title')}
-            </Typography>
+            </Text>
           </div>
         </Flexbox>
         <Flexbox

package/src/app/[variants]/(main)/settings/sync/features/WebRTC/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { SiWebrtc } from '@icons-pack/react-simple-icons';
-import { Form, type FormGroupItemType, Input, InputPassword, Tooltip } from '@lobehub/ui';
-import { Form as AntForm, Switch, Typography } from 'antd';
+import { Form, type FormGroupItemType, Input, InputPassword, Text, Tooltip } from '@lobehub/ui';
+import { Form as AntForm, Switch } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -80,9 +80,9 @@ const WebRTC = memo(() => {
           <SiWebrtc style={{ flex: 'none' }} />
           {t('sync.webrtc.title')}
         </Flexbox>
-        <Typography.Text style={{ fontWeight: 'normal' }} type={'secondary'}>
+        <Text style={{ fontWeight: 'normal' }} type={'secondary'}>
           {t('sync.webrtc.desc')}
-        </Typography.Text>
+        </Text>
       </Flexbox>
     ),
   };

package/src/app/[variants]/oauth/consent/[uid]/ClientError.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Typography } from 'antd';
+import { Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { Center } from 'react-layout-kit';
@@ -12,8 +12,6 @@ interface ClientProps {
   };
 }
 
-const { Title, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   container: css`
     width: 100%;
@@ -32,10 +30,10 @@ const ConsentClientError = memo<ClientProps>(({ error }) => {
   return (
     <Center className={styles.container}>
       <div className={styles.error}>
-        <Title level={2} style={{ color: 'inherit' }}>
+        <Text as={'h2'} style={{ color: 'inherit' }}>
           {error.title}
-        </Title>
-        <Paragraph style={{ color: 'inherit' }}>{error.message}</Paragraph>
+        </Text>
+        <Text style={{ color: 'inherit' }}>{error.message}</Text>
       </div>
     </Center>
   );

package/src/app/[variants]/oauth/consent/[uid]/Consent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Button } from '@lobehub/ui';
-import { Card, Divider, Typography } from 'antd';
+import { Button, Text } from '@lobehub/ui';
+import { Card, Divider } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,8 +22,6 @@ interface ClientProps {
   uid: string;
 }
 
-const { Title, Text, Paragraph } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   authButton: css`
     width: 100%;
@@ -106,6 +104,7 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
   title: css`
     margin-block-end: ${token.marginLG}px;
+    font-size: 24px;
     color: ${token.colorTextBase};
     text-align: center;
   `,
@@ -132,17 +131,17 @@ const ConsentClient = memo<ClientProps>(
             isFirstParty={clientMetadata.isFirstParty}
             logoUrl={clientMetadata.logo}
           />
-          <Title className={styles.title} level={3}>
+          <Text as={'h3'} className={styles.title}>
             {t('consent.title', { clientName: clientDisplayName })}
-          </Title>
+          </Text>
         </Flexbox>
         <Card className={styles.card}>
           <Flexbox gap={8}>
             <Flexbox gap={12}>
-              <Paragraph>{t('consent.description', { clientName: clientDisplayName })}</Paragraph>
+              <Text>{t('consent.description', { clientName: clientDisplayName })}</Text>
 
               <div className={styles.scopes}>
-                <Paragraph type={'secondary'}>{t('consent.permissionsTitle')}</Paragraph>
+                <Text type={'secondary'}>{t('consent.permissionsTitle')}</Text>
                 {scopes.map((scope) => (
                   <div className={styles.scope} key={scope}>
                     <Text>{getScopeDescription(scope, t)}</Text>

package/src/app/[variants]/oauth/consent/[uid]/Login.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Avatar, Button } from '@lobehub/ui';
-import { Card, Skeleton, Typography } from 'antd';
+import { Avatar, Button, Text } from '@lobehub/ui';
+import { Card, Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -21,8 +21,6 @@ interface LoginConfirmProps {
   uid: string;
 }
 
-const { Title } = Typography;
-
 const useStyles = createStyles(({ css, token }) => ({
   authButton: css`
     width: 100%;
@@ -75,9 +73,9 @@ const LoginConfirmClient = memo<LoginConfirmProps>(({ uid, clientMetadata }) =>
           logoUrl={clientMetadata.logo}
         />
       </Flexbox>
-      <Title className={styles.title} level={3}>
+      <Text as={'h3'} className={styles.title}>
         {titleText}
-      </Title>
+      </Text>
 
       <Card className={styles.card}>
         <Flexbox gap={64}>