@lobehub/chat 1.42.6 → 1.43.0

package/src/database/server/models/session.ts

@@ -1,13 +1,20 @@
 import { Column, count, sql } from 'drizzle-orm';
-import { and, asc, desc, eq, inArray, like, not, or } from 'drizzle-orm/expressions';
+import { and, asc, desc, eq, gt, inArray, isNull, like, not, or } from 'drizzle-orm/expressions';
 
 import { appEnv } from '@/config/app';
+import { DEFAULT_INBOX_AVATAR } from '@/const/meta';
 import { INBOX_SESSION_ID } from '@/const/session';
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { LobeChatDatabase } from '@/database/type';
+import {
+  genEndDateWhere,
+  genRangeWhere,
+  genStartDateWhere,
+  genWhere,
+} from '@/database/utils/genWhere';
 import { idGenerator } from '@/database/utils/idGenerator';
 import { parseAgentConfig } from '@/server/globalConfig/parseDefaultAgent';
-import { ChatSessionList, LobeAgentSession } from '@/types/session';
+import { ChatSessionList, LobeAgentSession, SessionRankItem } from '@/types/session';
 import { merge } from '@/utils/merge';
 
 import {
@@ -19,6 +26,7 @@ import {
   agentsToSessions,
   sessionGroups,
   sessions,
+  topics,
 } from '../../schemas';
 
 export class SessionModel {
@@ -84,17 +92,80 @@ export class SessionModel {
     return { ...result, agent: (result?.agentsToSessions?.[0] as any)?.agent } as any;
   };
 
-  count = async (): Promise<number> => {
+  count = async (params?: {
+    endDate?: string;
+    range?: [string, string];
+    startDate?: string;
+  }): Promise<number> => {
     const result = await this.db
       .select({
         count: count(sessions.id),
       })
       .from(sessions)
-      .where(eq(sessions.userId, this.userId));
+      .where(
+        genWhere([
+          eq(sessions.userId, this.userId),
+          params?.range
+            ? genRangeWhere(params.range, sessions.createdAt, (date) => date.toDate())
+            : undefined,
+          params?.endDate
+            ? genEndDateWhere(params.endDate, sessions.createdAt, (date) => date.toDate())
+            : undefined,
+          params?.startDate
+            ? genStartDateWhere(params.startDate, sessions.createdAt, (date) => date.toDate())
+            : undefined,
+        ]),
+      );
 
     return result[0].count;
   };
 
+  _rank = async (limit: number = 10): Promise<SessionRankItem[]> => {
+    return this.db
+      .select({
+        avatar: agents.avatar,
+        backgroundColor: agents.backgroundColor,
+        count: count(topics.id).as('count'),
+        id: sessions.id,
+        title: agents.title,
+      })
+      .from(sessions)
+      .leftJoin(topics, eq(sessions.id, topics.sessionId))
+      .leftJoin(agentsToSessions, eq(sessions.id, agentsToSessions.sessionId))
+      .leftJoin(agents, eq(agentsToSessions.agentId, agents.id))
+      .groupBy(sessions.id, agentsToSessions.agentId, agents.id)
+      .having(({ count }) => gt(count, 0))
+      .orderBy(desc(sql`count`))
+      .limit(limit);
+  };
+
+  // TODO: 未来将 Inbox id 入库后可以直接使用 _rank 方法
+  rank = async (limit: number = 10): Promise<SessionRankItem[]> => {
+    const inboxResult = await this.db
+      .select({
+        count: count(topics.id).as('count'),
+      })
+      .from(topics)
+      .where(isNull(topics.sessionId));
+
+    const inboxCount = inboxResult[0].count;
+
+    if (!inboxCount || inboxCount === 0) return this._rank(limit);
+
+    const result = await this._rank(limit ? limit - 1 : undefined);
+
+    return [
+      {
+        avatar: DEFAULT_INBOX_AVATAR,
+        backgroundColor: null,
+        count: inboxCount,
+        id: INBOX_SESSION_ID,
+        title: 'inbox.title',
+      },
+      ...result,
+    ].sort((a, b) => b.count - a.count);
+  };
+
   hasMoreThanN = async (n: number): Promise<boolean> => {
     const result = await this.db
       .select({ id: sessions.id })

package/src/database/server/models/topic.ts

@@ -1,8 +1,15 @@
 import { Column, count, sql } from 'drizzle-orm';
-import { and, desc, eq, exists, inArray, isNull, like, or } from 'drizzle-orm/expressions';
+import { and, desc, eq, exists, gt, inArray, isNull, like, or } from 'drizzle-orm/expressions';
 
 import { LobeChatDatabase } from '@/database/type';
+import {
+  genEndDateWhere,
+  genRangeWhere,
+  genStartDateWhere,
+  genWhere,
+} from '@/database/utils/genWhere';
 import { idGenerator } from '@/database/utils/idGenerator';
+import { TopicRankItem } from '@/types/topic';
 
 import { NewMessage, TopicItem, messages, topics } from '../../schemas';
 
@@ -92,17 +99,50 @@ export class TopicModel {
     });
   };
 
-  count = async (): Promise<number> => {
+  count = async (params?: {
+    endDate?: string;
+    range?: [string, string];
+    startDate?: string;
+  }): Promise<number> => {
     const result = await this.db
       .select({
         count: count(topics.id),
       })
       .from(topics)
-      .where(eq(topics.userId, this.userId));
+      .where(
+        genWhere([
+          eq(topics.userId, this.userId),
+          params?.range
+            ? genRangeWhere(params.range, topics.createdAt, (date) => date.toDate())
+            : undefined,
+          params?.endDate
+            ? genEndDateWhere(params.endDate, topics.createdAt, (date) => date.toDate())
+            : undefined,
+          params?.startDate
+            ? genStartDateWhere(params.startDate, topics.createdAt, (date) => date.toDate())
+            : undefined,
+        ]),
+      );
 
     return result[0].count;
   };
 
+  rank = async (limit: number = 10): Promise<TopicRankItem[]> => {
+    return this.db
+      .select({
+        count: count(messages.id).as('count'),
+        id: topics.id,
+        sessionId: topics.sessionId,
+        title: topics.title,
+      })
+      .from(topics)
+      .leftJoin(messages, eq(topics.id, messages.topicId))
+      .groupBy(topics.id)
+      .orderBy(desc(sql`count`))
+      .having(({ count }) => gt(count, 0))
+      .limit(limit);
+  };
+
   // **************** Create *************** //
 
   create = async (

package/src/database/server/models/user.ts

@@ -1,4 +1,5 @@
 import { TRPCError } from '@trpc/server';
+import dayjs from 'dayjs';
 import { eq } from 'drizzle-orm/expressions';
 import { DeepPartial } from 'utility-types';
 
@@ -6,6 +7,7 @@ import { LobeChatDatabase } from '@/database/type';
 import { UserGuide, UserPreference } from '@/types/user';
 import { UserKeyVaults, UserSettings } from '@/types/user/settings';
 import { merge } from '@/utils/merge';
+import { today } from '@/utils/time';
 
 import { NewUser, UserItem, UserSettingsItem, userSettings, users } from '../../schemas';
 import { SessionModel } from './session';
@@ -30,6 +32,26 @@ export class UserModel {
     this.db = db;
   }
 
+  getUserRegistrationDuration = async (): Promise<{
+    createdAt: string;
+    duration: number;
+    updatedAt: string;
+  }> => {
+    const user = await this.db.query.users.findFirst({ where: eq(users.id, this.userId) });
+    if (!user)
+      return {
+        createdAt: today().format('YYYY-MM-DD'),
+        duration: 1,
+        updatedAt: today().format('YYYY-MM-DD'),
+      };
+
+    return {
+      createdAt: dayjs(user.createdAt).format('YYYY-MM-DD'),
+      duration: dayjs().diff(dayjs(user.createdAt), 'day') + 1,
+      updatedAt: today().format('YYYY-MM-DD'),
+    };
+  };
+
   getUserState = async (decryptor: DecryptUserKeyVaults) => {
     const result = await this.db
       .select({

package/src/database/utils/genWhere.ts

@@ -0,0 +1,39 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { SQL } from 'drizzle-orm';
+import { and, gte, lte } from 'drizzle-orm/expressions';
+
+export const genWhere = (sqls: (SQL<any> | undefined)[]): SQL<any> | undefined => {
+  const where = sqls.filter(Boolean);
+  if (where.length > 1) return and(...where);
+  return where[0];
+};
+
+export const genStartDateWhere = (
+  date: string | undefined,
+  key: any,
+  format: (date: Dayjs) => any,
+): SQL | undefined => {
+  if (!date || !dayjs(date).isValid()) return;
+  return gte(key, format(dayjs(new Date(date))));
+};
+
+export const genEndDateWhere = (
+  date: string | undefined,
+  key: any,
+  format: (date: Dayjs) => any,
+): SQL | undefined => {
+  if (!date || !dayjs(date).isValid()) return;
+  return lte(key, format(dayjs(new Date(date)).add(1, 'day')));
+};
+
+export const genRangeWhere = (
+  range: [string, string] | undefined,
+  key: any,
+  format: (date: Dayjs) => any,
+): SQL | undefined => {
+  if (!range) return;
+  if (!dayjs(range[0]).isValid() && !dayjs(range[1]).isValid()) return;
+  if (!dayjs(range[0]).isValid()) return genEndDateWhere(range[1], key, format);
+  if (!dayjs(range[1]).isValid()) return genStartDateWhere(range[0], key, format);
+  return and(genStartDateWhere(range[0], key, format), genEndDateWhere(range[1], key, format));
+};

package/src/features/ShareModal/ShareImage/index.tsx

@@ -1,34 +1,17 @@
 import { Form, type FormItemProps } from '@lobehub/ui';
-import { Button, Segmented, SegmentedProps, Switch } from 'antd';
+import { Button, Segmented, Switch } from 'antd';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useIsMobile } from '@/hooks/useIsMobile';
+import { ImageType, imageTypeOptions, useScreenshot } from '@/hooks/useScreenshot';
+import { useSessionStore } from '@/store/session';
+import { sessionMetaSelectors } from '@/store/session/selectors';
 
 import Preview from './Preview';
-import { FieldType, ImageType } from './type';
-import { useScreenshot } from './useScreenshot';
-
-export const imageTypeOptions: SegmentedProps['options'] = [
-  {
-    label: 'JPG',
-    value: ImageType.JPG,
-  },
-  {
-    label: 'PNG',
-    value: ImageType.PNG,
-  },
-  {
-    label: 'SVG',
-    value: ImageType.SVG,
-  },
-  {
-    label: 'WEBP',
-    value: ImageType.WEBP,
-  },
-];
+import { FieldType } from './type';
 
 const DEFAULT_FIELD_VALUE: FieldType = {
   imageType: ImageType.JPG,
@@ -39,9 +22,13 @@ const DEFAULT_FIELD_VALUE: FieldType = {
 };
 
 const ShareImage = memo(() => {
+  const currentAgentTitle = useSessionStore(sessionMetaSelectors.currentAgentTitle);
   const [fieldValue, setFieldValue] = useState<FieldType>(DEFAULT_FIELD_VALUE);
-  const { t } = useTranslation('chat');
-  const { loading, onDownload, title } = useScreenshot(fieldValue.imageType);
+  const { t } = useTranslation(['chat', 'common']);
+  const { loading, onDownload, title } = useScreenshot({
+    imageType: fieldValue.imageType,
+    title: currentAgentTitle,
+  });
 
   const settings: FormItemProps[] = [
     {

package/src/features/ShareModal/ShareImage/type.ts

@@ -1,9 +1,4 @@
-export enum ImageType {
-  JPG = 'jpg',
-  PNG = 'png',
-  SVG = 'svg',
-  WEBP = 'webp',
-}
+import { ImageType } from '@/hooks/useScreenshot';
 
 export type FieldType = {
   imageType: ImageType;

package/src/features/User/DataStatistics.tsx

@@ -3,17 +3,18 @@
 import { Icon, Tooltip } from '@lobehub/ui';
 import { Badge } from 'antd';
 import { createStyles } from 'antd-style';
-import { isNumber } from 'lodash-es';
+import { isNumber, isUndefined } from 'lodash-es';
 import { LoaderCircle } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
-import useSWR from 'swr';
 
+import { useClientDataSWR } from '@/libs/swr';
 import { messageService } from '@/services/message';
 import { sessionService } from '@/services/session';
 import { topicService } from '@/services/topic';
 import { useServerConfigStore } from '@/store/serverConfig';
+import { today } from '@/utils/time';
 
 const useStyles = createStyles(({ css, token }) => ({
   card: css`
@@ -21,6 +22,10 @@ const useStyles = createStyles(({ css, token }) => ({
     padding-inline: 8px;
     background: ${token.colorFillTertiary};
     border-radius: ${token.borderRadius}px;
+
+    &:hover {
+      background: ${token.colorFillSecondary};
+    }
   `,
   count: css`
     font-size: 16px;
@@ -57,21 +62,23 @@ const formatNumber = (num: any) => {
 const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest }) => {
   const mobile = useServerConfigStore((s) => s.isMobile);
   // sessions
-  const { data: sessions, isLoading: sessionsLoading } = useSWR(
-    'count-sessions',
-    sessionService.countSessions,
+  const { data: sessions, isLoading: sessionsLoading } = useClientDataSWR('count-sessions', () =>
+    sessionService.countSessions(),
   );
   // topics
-  const { data: topics, isLoading: topicsLoading } = useSWR(
-    'count-topics',
-    topicService.countTopics,
+  const { data: topics, isLoading: topicsLoading } = useClientDataSWR('count-topics', () =>
+    topicService.countTopics(),
   );
   // messages
-  const { data: messages, isLoading: messagesLoading } = useSWR(
+  const { data: { messages, messagesToday } = {}, isLoading: messagesLoading } = useClientDataSWR(
     'count-messages',
-    messageService.countMessages,
+    async () => ({
+      messages: await messageService.countMessages(),
+      messagesToday: await messageService.countMessages({
+        startDate: today().format('YYYY-MM-DD'),
+      }),
+    }),
   );
-  const { data: messagesToday } = useSWR('today-messages', messageService.countTodayMessages);
 
   const { styles, theme } = useStyles();
   const { t } = useTranslation('common');
@@ -80,17 +87,17 @@ const DataStatistics = memo<Omit<FlexboxProps, 'children'>>(({ style, ...rest })
 
   const items = [
     {
-      count: sessionsLoading ? loading : sessions,
+      count: sessionsLoading || isUndefined(sessions) ? loading : sessions,
       key: 'sessions',
       title: t('dataStatistics.sessions'),
     },
     {
-      count: topicsLoading ? loading : topics,
+      count: topicsLoading || isUndefined(topics) ? loading : topics,
       key: 'topics',
       title: t('dataStatistics.topics'),
     },
     {
-      count: messagesLoading ? loading : messages,
+      count: messagesLoading || isUndefined(messages) ? loading : messages,
       countToady: messagesToday,
       key: 'messages',
       title: t('dataStatistics.messages'),

package/src/features/User/UserPanel/PanelContent.tsx

@@ -1,9 +1,11 @@
+import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import Menu from '@/components/Menu';
+import { isDeprecatedEdition } from '@/const/version';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 
@@ -17,21 +19,14 @@ import { useMenu } from './useMenu';
 const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
   const router = useRouter();
   const isLoginWithAuth = useUserStore(authSelectors.isLoginWithAuth);
-  const [openSignIn, signOut, openUserProfile, enableAuth, enabledNextAuth] = useUserStore((s) => [
+  const [openSignIn, signOut, enableAuth, enabledNextAuth] = useUserStore((s) => [
     s.openLogin,
     s.logout,
-    s.openUserProfile,
     s.enableAuth(),
     s.enabledNextAuth,
   ]);
   const { mainItems, logoutItems } = useMenu();
 
-  const handleOpenProfile = () => {
-    if (!enableAuth) return;
-    openUserProfile();
-    closePopover();
-  };
-
   const handleSignIn = () => {
     openSignIn();
     closePopover();
@@ -47,15 +42,16 @@ const PanelContent = memo<{ closePopover: () => void }>(({ closePopover }) => {
 
   return (
     <Flexbox gap={2} style={{ minWidth: 300 }}>
-      {!enableAuth ? (
-        <>
-          <UserInfo />
-          <DataStatistics />
-        </>
-      ) : isLoginWithAuth ? (
+      {!enableAuth || (enableAuth && isLoginWithAuth) ? (
         <>
-          <UserInfo onClick={handleOpenProfile} />
-          <DataStatistics />
+          <Link href={'/profile'} style={{ color: 'inherit' }}>
+            <UserInfo />
+          </Link>
+          {!isDeprecatedEdition && (
+            <Link href={'/profile/stats'} style={{ color: 'inherit' }}>
+              <DataStatistics />
+            </Link>
+          )}
         </>
       ) : (
         <UserLoginOrSignup onClick={handleSignIn} />

package/src/features/User/UserPanel/useMenu.tsx

@@ -68,19 +68,17 @@ export const useMenu = () => {
   const hasNewVersion = useNewVersion();
   const { t } = useTranslation(['common', 'setting', 'auth']);
   const { showCloudPromotion, hideDocs } = useServerConfigStore(featureFlagsSelectors);
-  const [isLogin, isLoginWithAuth, isLoginWithClerk, openUserProfile] = useUserStore((s) => [
+  const [enableAuth, isLogin, isLoginWithAuth] = useUserStore((s) => [
+    authSelectors.enabledAuth(s),
     authSelectors.isLogin(s),
     authSelectors.isLoginWithAuth(s),
-    authSelectors.isLoginWithClerk(s),
-    s.openUserProfile,
   ]);
 
   const profile: MenuProps['items'] = [
     {
       icon: <Icon icon={CircleUserRound} />,
       key: 'profile',
-      label: t('userPanel.profile'),
-      onClick: () => openUserProfile(),
+      label: <Link href={'/profile'}>{t('userPanel.profile')}</Link>,
     },
   ];
 
@@ -227,7 +225,7 @@ export const useMenu = () => {
     {
       type: 'divider',
     },
-    ...(isLoginWithClerk ? profile : []),
+    ...(!enableAuth || (enableAuth && isLoginWithAuth) ? profile : []),
     ...(isLogin ? settings : []),
     /* ↓ cloud slot ↓ */
 

package/src/features/User/__tests__/PanelContent.test.tsx

@@ -61,6 +61,10 @@ vi.mock('../DataStatistics', () => ({
   default: vi.fn(() => <div>Mocked DataStatistics</div>),
 }));
 
+vi.mock('@/const/version', () => ({
+  isDeprecatedEdition: false,
+}));
+
 // 定义一个变量来存储 enableAuth 的值
 let enableAuth = true;
 

package/src/features/User/__tests__/useMenu.test.tsx

@@ -76,26 +76,6 @@ describe('useMenu', () => {
 
     const { result } = renderHook(() => useMenu(), { wrapper });
 
-    act(() => {
-      const { mainItems, logoutItems } = result.current;
-      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(false);
-      expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);
-      expect(mainItems?.some((item) => item?.key === 'changelog')).toBe(true);
-      expect(logoutItems.some((item) => item?.key === 'logout')).toBe(true);
-    });
-  });
-
-  it('should provide correct menu items when user is logged in with Clerk', () => {
-    act(() => {
-      useUserStore.setState({ isSignedIn: true });
-    });
-    enableAuth = true;
-    enableClerk = true;
-
-    const { result } = renderHook(() => useMenu(), { wrapper });
-
     act(() => {
       const { mainItems, logoutItems } = result.current;
       expect(mainItems?.some((item) => item?.key === 'profile')).toBe(true);
@@ -117,7 +97,7 @@ describe('useMenu', () => {
 
     act(() => {
       const { mainItems, logoutItems } = result.current;
-      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(false);
+      expect(mainItems?.some((item) => item?.key === 'profile')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'setting')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'import')).toBe(true);
       expect(mainItems?.some((item) => item?.key === 'export')).toBe(true);

package/src/hooks/useActiveTabKey.ts

@@ -1,6 +1,7 @@
 import { usePathname } from 'next/navigation';
 
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useQuery } from '@/hooks/useQuery';
+import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 /**
  * Returns the active tab key (chat/market/settings/...)
@@ -10,3 +11,35 @@ export const useActiveTabKey = () => {
 
   return pathname.split('/').find(Boolean)! as SidebarTabKey;
 };
+
+/**
+ * Returns the active setting page key (common/sync/agent/...)
+ */
+export const useActiveSettingsKey = () => {
+  const pathname = usePathname();
+  const { tab } = useQuery();
+
+  const tabs = pathname.split('/').at(-1);
+
+  if (tabs === 'settings') return SettingsTabs.Common;
+
+  if (tabs === 'modal') return tab as SettingsTabs;
+
+  return tabs as SettingsTabs;
+};
+
+/**
+ * Returns the active profile page key (profile/security/stats/...)
+ */
+export const useActiveProfileKey = () => {
+  const pathname = usePathname();
+  const { tab } = useQuery();
+
+  const tabs = pathname.split('/').at(-1);
+
+  if (tabs === 'profile') return ProfileTabs.Profile;
+
+  if (tabs === 'modal') return tab as ProfileTabs;
+
+  return tabs as ProfileTabs;
+};

package/src/{features/ShareModal/ShareImage → hooks}/useScreenshot.ts

@@ -1,16 +1,48 @@
+import { SegmentedProps } from 'antd';
 import dayjs from 'dayjs';
 import { domToJpeg, domToPng, domToSvg, domToWebp } from 'modern-screenshot';
 import { useCallback, useState } from 'react';
 
 import { BRANDING_NAME } from '@/const/branding';
-import { useSessionStore } from '@/store/session';
-import { sessionMetaSelectors } from '@/store/session/selectors';
 
-import { ImageType } from './type';
+export enum ImageType {
+  JPG = 'jpg',
+  PNG = 'png',
+  SVG = 'svg',
+  WEBP = 'webp',
+}
 
-export const useScreenshot = (imageType: ImageType) => {
+export const imageTypeOptions: SegmentedProps['options'] = [
+  {
+    label: 'JPG',
+    value: ImageType.JPG,
+  },
+  {
+    label: 'PNG',
+    value: ImageType.PNG,
+  },
+  {
+    label: 'SVG',
+    value: ImageType.SVG,
+  },
+  {
+    label: 'WEBP',
+    value: ImageType.WEBP,
+  },
+];
+
+export const useScreenshot = ({
+  imageType,
+  title = 'share',
+  id = '#preview',
+  width,
+}: {
+  id?: string;
+  imageType: ImageType;
+  title?: string;
+  width?: number;
+}) => {
   const [loading, setLoading] = useState(false);
-  const title = useSessionStore(sessionMetaSelectors.currentAgentTitle);
 
   const handleDownload = useCallback(async () => {
     setLoading(true);
@@ -35,13 +67,26 @@ export const useScreenshot = (imageType: ImageType) => {
         }
       }
 
-      const dataUrl = await screenshotFn(document.querySelector('#preview') as HTMLDivElement, {
+      const dom: HTMLDivElement = document.querySelector(id) as HTMLDivElement;
+      let copy: HTMLDivElement = dom;
+
+      if (width) {
+        copy = dom.cloneNode(true) as HTMLDivElement;
+        copy.style.width = `${width}px`;
+        document.body.append(copy);
+      }
+
+      const dataUrl = await screenshotFn(width ? copy : dom, {
         features: {
           // 不启用移除控制符，否则会导致 safari emoji 报错
           removeControlCharacter: false,
         },
         scale: 2,
+        width,
       });
+
+      if (width && copy) copy?.remove();
+
       const link = document.createElement('a');
       link.download = `${BRANDING_NAME}_${title}_${dayjs().format('YYYY-MM-DD')}.${imageType}`;
       link.href = dataUrl;