@lobehub/lobehub 2.0.0-next.294 → 2.0.0-next.296

package/src/app/[variants]/(main)/community/(detail)/model/features/Details/Parameter/ParameterItem.tsx

@@ -1,7 +1,6 @@
 import { Flexbox } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { cssVar } from 'antd-style';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -29,9 +28,9 @@ const ParameterItem = memo<ParameterItemProps>(
       <Flexbox align={'flex-start'} gap={16}>
         <p style={{ color: cssVar.colorTextSecondary, margin: 0 }}>
           {desc}{' '}
-          <Link href={docUrl} target={'_blank'}>
+          <a href={docUrl} rel="noreferrer" target="_blank">
             {t('models.parameterList.docs')}
-          </Link>
+          </a>
         </p>
         <Divider dashed style={{ margin: 0 }} />
         <Flexbox align={'center'} gap={16} horizontal style={{ paddingBottom: 8 }} wrap={'wrap'}>

package/src/app/[variants]/(main)/community/(detail)/provider/features/Details/Nav.tsx

@@ -4,7 +4,6 @@ import { BRANDING_PROVIDER, SOCIAL_URL } from '@lobechat/business-const';
 import { Flexbox, Icon, Tabs } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { BookOpenIcon, BrainCircuitIcon, ListIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -78,28 +77,30 @@ const Nav = memo<NavProps>(({ mobile, setActiveTab, activeTab = ProviderNavKey.O
     <Flexbox align={'center'} className={styles.nav} horizontal justify={'space-between'}>
       {nav}
       <Flexbox gap={12} horizontal>
-        <Link className={styles.link} href={SOCIAL_URL.discord} target={'_blank'}>
+        <a className={styles.link} href={SOCIAL_URL.discord} rel="noreferrer" target="_blank">
           {t('mcp.details.nav.needHelp')}
-        </Link>
+        </a>
         {identifier && (
-          <Link
+          <a
             className={styles.link}
             href={urlJoin(
               'https://github.com/lobehub/lobe-chat/tree/main/src/config/modelProviders',
               `${identifier}.ts`,
             )}
-            target={'_blank'}
+            rel="noreferrer"
+            target="_blank"
           >
             {t('mcp.details.nav.viewSourceCode')}
-          </Link>
+          </a>
         )}
-        <Link
+        <a
           className={styles.link}
-          href={'https://github.com/lobehub/lobe-chat/issues/new/choose'}
-          target={'_blank'}
+          href="https://github.com/lobehub/lobe-chat/issues/new/choose"
+          rel="noreferrer"
+          target="_blank"
         >
           {t('mcp.details.nav.reportIssue')}
-        </Link>
+        </a>
       </Flexbox>
     </Flexbox>
   );

package/src/app/[variants]/(main)/community/(detail)/provider/features/Header.tsx

@@ -4,7 +4,6 @@ import { Github, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Flexbox } from '@lobehub/ui';
 import { cssVar, useResponsive } from 'antd-style';
 import { GlobeIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
@@ -32,9 +31,9 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
           <ProviderCombine provider={identifier} size={mobile ? 32 : 48} />
           <Flexbox align={'center'} gap={4} horizontal>
             {Boolean(url || modelsUrl) ? (
-              <Link href={url || (modelsUrl as string)} target={'_blank'}>
+              <a href={url || (modelsUrl as string)} rel="noreferrer" target="_blank">
                 @{name}
-              </Link>
+              </a>
             ) : (
               <span>@{name}</span>
             )}
@@ -42,25 +41,27 @@ const Header = memo<{ mobile?: boolean }>(({ mobile: isMobile }) => {
         </Flexbox>
         <Flexbox align={'center'} horizontal>
           {Boolean(url || modelsUrl) && (
-            <Link
+            <a
               href={(url || modelsUrl) as string}
               onClick={(e) => e.stopPropagation()}
-              target={'_blank'}
+              rel="noreferrer"
+              target="_blank"
             >
               <ActionIcon color={cssVar.colorTextDescription} icon={GlobeIcon} />
-            </Link>
+            </a>
           )}
 
-          <Link
+          <a
             href={urlJoin(
               'https://github.com/lobehub/lobe-chat-agents/tree/main/locales',
               identifier as string,
             )}
             onClick={(e) => e.stopPropagation()}
-            target={'_blank'}
+            rel="noreferrer"
+            target="_blank"
           >
             <ActionIcon fill={cssVar.colorTextDescription} icon={Github} />
-          </Link>
+          </a>
         </Flexbox>
       </Flexbox>
 

package/src/app/[variants]/(main)/community/(list)/(home)/index.tsx

@@ -4,7 +4,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useDiscoverStore } from '@/store/discover';
-import { McpSorts, AssistantSorts } from '@/types/discover';
+import { AssistantSorts, McpSorts } from '@/types/discover';
 
 import Title from '../../components/Title';
 import AssistantList from '../assistant/features/List';

package/src/app/[variants]/(main)/community/(list)/assistant/features/Category/useCategory.tsx

@@ -2,6 +2,7 @@ import {
   BadgeDollarSignIcon,
   BriefcaseIcon,
   Coffee,
+  CompassIcon,
   DramaIcon,
   GamepadIcon,
   GraduationCapIcon,
@@ -14,7 +15,6 @@ import {
   PencilIcon,
   PrinterIcon,
   TerminalSquareIcon,
-  CompassIcon,
 } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

package/src/app/[variants]/(main)/community/(list)/features/SortButton/index.tsx

@@ -1,12 +1,11 @@
-import { Dropdown, type DropdownMenuItemType, Icon , Button } from '@lobehub/ui';
+import { Button, Dropdown, type DropdownMenuItemType, Icon } from '@lobehub/ui';
 import { ArrowDownWideNarrow, ChevronDown } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
-import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
+import { usePathname , useQuery } from '@/libs/router/navigation';
 import {
   AssistantSorts,
   DiscoverTab,

package/src/app/[variants]/(main)/community/_layout/Sidebar/Header/Nav.tsx

@@ -3,7 +3,7 @@
 import { Flexbox } from '@lobehub/ui';
 import { McpIcon, ProviderIcon } from '@lobehub/ui/icons';
 import { Bot, Brain, ShapesIcon } from 'lucide-react';
-import { usePathname } from 'next/navigation';
+import { usePathname } from '@/libs/router/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';

package/src/app/[variants]/(main)/community/features/CreateButton/Inner.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Tag, Typography } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { Github, Settings, Share2 } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/community/features/CreateButton/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Button, Modal , Skeleton } from '@lobehub/ui';
 import { useResponsive } from 'antd-style';
 import { Brush } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/community/features/Search.tsx

@@ -6,10 +6,9 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
-import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { withSuspense } from '@/components/withSuspense';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { usePathname, useQuery } from '@/libs/router/navigation';
 
 const prefixCls = 'ant';
 

package/src/app/[variants]/(main)/community/features/Title.tsx

@@ -3,7 +3,6 @@
 import { Flexbox, type FlexboxProps, Icon } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { ChevronRight } from 'lucide-react';
-import NextLink from 'next/link';
 import { type ReactNode, memo } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 
@@ -51,10 +50,10 @@ const Title = memo<TitleProps>(
     if (moreLink) {
       if (isExternalLink) {
         moreLinkElement = (
-          <NextLink className={styles.more} href={moreLink} target="_blank">
+          <a className={styles.more} href={moreLink} rel="noreferrer" target="_blank">
             <span style={{ marginRight: 4 }}>{more}</span>
             <Icon icon={ChevronRight} />
-          </NextLink>
+          </a>
         );
       } else if (isCommunityRoute) {
         moreLinkElement = (
@@ -64,11 +63,12 @@ const Title = memo<TitleProps>(
           </RouterLink>
         );
       } else {
+        // For non-external, non-community routes (like auth pages), use RouterLink
         moreLinkElement = (
-          <NextLink className={styles.more} href={moreLink}>
+          <RouterLink className={styles.more} to={moreLink}>
             <span style={{ marginRight: 4 }}>{more}</span>
             <Icon icon={ChevronRight} />
-          </NextLink>
+          </RouterLink>
         );
       }
     }

package/src/app/[variants]/(main)/group/_layout/Sidebar/Header/Nav.tsx

@@ -3,7 +3,6 @@
 import { Flexbox } from '@lobehub/ui';
 import { BotPromptIcon } from '@lobehub/ui/icons';
 import { MessageSquarePlusIcon, SearchIcon } from 'lucide-react';
-import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -11,6 +10,7 @@ import urlJoin from 'url-join';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { usePathname } from '@/libs/router/navigation';
 import { useAgentGroupStore } from '@/store/agentGroup';
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/AllTopicsDrawer/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Flexbox, SearchBar } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/hooks/useThreadNavigation.ts

@@ -1,4 +1,4 @@
-import { usePathname } from 'next/navigation';
+import { usePathname } from '@/libs/router/navigation';
 import { useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import urlJoin from 'url-join';

package/src/app/[variants]/(main)/group/features/Conversation/Header/ShareButton/index.tsx

@@ -2,12 +2,12 @@
 
 import { ActionIcon } from '@lobehub/ui';
 import { Share2 } from 'lucide-react';
-import dynamic from 'next/dynamic';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useWorkspaceModal } from '@/hooks/useWorkspaceModal';
+import dynamic from '@/libs/next/dynamic';
 import { useChatStore } from '@/store/chat';
 import { useServerConfigStore } from '@/store/serverConfig';
 import { serverConfigSelectors } from '@/store/serverConfig/selectors';

package/src/app/[variants]/(main)/group/features/TelemetryNotification.tsx

@@ -4,7 +4,6 @@ import { BRANDING_NAME } from '@lobechat/business-const';
 import { Avatar, Button, Flexbox, Icon } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { LucideArrowUpRightFromSquare, TelescopeIcon } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -56,10 +55,10 @@ const TelemetryNotification = memo<{ mobile?: boolean }>(({ mobile }) => {
           <div className={styles.desc}>
             {t('telemetry.desc', { appName: BRANDING_NAME })}
             <span>
-              <Link href={PRIVACY_URL} target={'_blank'}>
+              <a href={PRIVACY_URL} rel="noreferrer" target="_blank">
                 {t('telemetry.learnMore')}
                 <Icon icon={LucideArrowUpRightFromSquare} style={{ marginInlineStart: 4 }} />
-              </Link>
+              </a>
             </span>
           </div>
         </Flexbox>

package/src/app/[variants]/(main)/home/_layout/Body/Agent/AllAgentsDrawer/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Flexbox, SearchBar } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/hooks/useActiveTabKey.ts

@@ -1,21 +1,18 @@
-import { useLocation, useSearchParams } from 'react-router-dom';
-
 import { ProfileTabs, SettingsTabs, type SidebarTabKey } from '@/store/global/initialState';
+import { usePathname, useSearchParams } from '@/libs/router/navigation';
 
 /**
  * Returns the active tab key (chat/discover/settings/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveTabKey = () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-
+  const pathname = usePathname();
   return pathname.split('/').find(Boolean) as SidebarTabKey;
 };
 
 /**
  * Returns the active setting page key (?active=common/sync/agent/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveSettingsKey = () => {
   const [searchParams] = useSearchParams();
@@ -26,12 +23,10 @@ export const useActiveSettingsKey = () => {
 
 /**
  * Returns the active profile page key (profile/security/stats/...)
- * React Router version for (main) directory
+ * Uses React Router via @/libs/router
  */
 export const useActiveProfileKey = () => {
-  const location = useLocation();
-  const pathname = location.pathname;
-
+  const pathname = usePathname();
   const tabs = pathname.split('/').findLast(Boolean);
 
   if (tabs === 'profile') return ProfileTabs.Profile;

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

@@ -4,7 +4,6 @@ import { UTM_SOURCE } from '@lobechat/business-const';
 import { Center, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { Database, FileImage, Network, Sparkles } from 'lucide-react';
-import Link from 'next/link';
 import { Trans, useTranslation } from 'react-i18next';
 
 import FeatureList from '@/components/FeatureList';
@@ -131,11 +130,13 @@ const NotSupportClient = () => {
           <Trans
             components={[
               <span key="0" />,
-              <Link href={DATABASE_SELF_HOSTING_URL} key="1" />,
+              <a href={DATABASE_SELF_HOSTING_URL} key="1" rel="noreferrer" target="_blank" />,
               <span key="2" />,
-              <Link
+              <a
                 href={`${OFFICIAL_URL}?utm_source=${UTM_SOURCE}&utm_medium=client_not_support_image`}
                 key="3"
+                rel="noreferrer"
+                target="_blank"
               />,
             ]}
             i18nKey={'notSupportGuide.desc'}

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/ImageUpload.tsx

@@ -4,7 +4,7 @@ import { Center } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Image as ImageIcon, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/MultiImagesUpload/ImageManageModal.tsx

@@ -3,7 +3,7 @@
 import { Button, Modal } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { Upload, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/image/_layout/ConfigPanel/components/MultiImagesUpload/index.tsx

@@ -4,7 +4,7 @@
 import { Center } from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Image as ImageIcon, X } from 'lucide-react';
-import Image from 'next/image';
+import Image from '@/libs/next/Image';
 import React, { type FC, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/memory/(home)/features/RoleTagCloud/index.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Block } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { MaximizeIcon, MinimizeIcon } from 'lucide-react';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useEffect, useState } from 'react';
 
 import Loading from '@/components/Loading/BrandTextLoading';

package/src/app/[variants]/(main)/memory/_layout/Sidebar/Header/Nav.tsx

@@ -9,7 +9,7 @@ import {
   SearchIcon,
   SignatureIcon,
 } from 'lucide-react';
-import { usePathname } from 'next/navigation';
+import { usePathname } from '@/libs/router/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';

package/src/app/[variants]/(main)/memory/features/SourceLink.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Text } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Link2 } from 'lucide-react';
-import Link from 'next/link';
+import Link from '@/libs/router/Link';
 import { memo } from 'react';
 import { useNavigate } from 'react-router-dom';
 

package/src/app/[variants]/(main)/page/_layout/Body/AllPagesDrawer/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Flexbox, SearchBar } from '@lobehub/ui';
-import dynamic from 'next/dynamic';
+import dynamic from '@/libs/next/dynamic';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

package/src/app/[variants]/(main)/resource/features/DndContextWrapper.tsx

@@ -193,14 +193,16 @@ export const DndContextWrapper = memo<PropsWithChildren>(({ children }) => {
 
     document.addEventListener('dragstart', handleDragStart);
     document.addEventListener('drag', handleDrag);
-    document.addEventListener('drop', handleDrop);
+    // Use capture phase so drops still work even if some UI stops propagation
+    // (e.g., header dropdowns / menus).
+    document.addEventListener('drop', handleDrop, true);
     document.addEventListener('dragover', handleDragOver);
     document.addEventListener('dragend', handleDragEnd);
 
     return () => {
       document.removeEventListener('dragstart', handleDragStart);
       document.removeEventListener('drag', handleDrag);
-      document.removeEventListener('drop', handleDrop);
+      document.removeEventListener('drop', handleDrop, true);
       document.removeEventListener('dragover', handleDragOver);
       document.removeEventListener('dragend', handleDragEnd);
     };

package/src/app/[variants]/(main)/resource/library/_layout/Header/LibraryHead.tsx

@@ -1,8 +1,16 @@
 'use client';
 
-import { Center, type DropdownItem, DropdownMenu, Flexbox, Skeleton, Text } from '@lobehub/ui';
+import {
+  ActionIcon,
+  Block,
+  Center,
+  type DropdownItem,
+  DropdownMenu,
+  Skeleton,
+  Text,
+} from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { ChevronsUpDown } from 'lucide-react';
+import { ChevronsUpDownIcon } from 'lucide-react';
 import { type DragEvent, memo, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,15 +20,6 @@ import RepoIcon from '@/components/LibIcon';
 import { knowledgeBaseSelectors, useKnowledgeBaseStore } from '@/store/library';
 
 const styles = createStaticStyles(({ css, cssVar }) => ({
-  clickableHeader: css`
-    cursor: pointer;
-    border-radius: ${cssVar.borderRadius}px;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: ${cssVar.colorFillTertiary};
-    }
-  `,
   dropZoneActive: css`
     color: ${cssVar.colorBgElevated} !important;
     background-color: ${cssVar.colorText} !important;
@@ -29,14 +28,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       color: ${cssVar.colorBgElevated} !important;
     }
   `,
-  icon: css`
-    color: ${cssVar.colorTextSecondary};
-    transition: all 0.2s;
-
-    &:hover {
-      color: ${cssVar.colorText};
-    }
-  `,
   menuIcon: css`
     color: ${cssVar.colorTextTertiary};
   `,
@@ -101,43 +92,47 @@ const Head = memo<{ id: string }>(({ id }) => {
   }, [libraries, handleLibrarySwitch, id, styles.menuIcon]);
 
   return (
-    <Flexbox
+    <Block
       align={'center'}
-      className={cx(styles.clickableHeader, isDropZoneActive && styles.dropZoneActive)}
+      className={cx(isDropZoneActive && styles.dropZoneActive)}
+      clickable
       data-drop-target-id="root"
       data-is-folder="true"
       data-root-drop="true"
       gap={8}
       horizontal
+      onClick={handleClick}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
-      paddingBlock={6}
-      paddingInline={'12px 14px'}
+      padding={2}
+      style={{ minWidth: 32, overflow: 'hidden' }}
+      variant={'borderless'}
     >
-      <Center style={{ minWidth: 24 }} width={24}>
-        <RepoIcon />
+      <Center style={{ minWidth: 32 }} width={32}>
+        <RepoIcon size={18} />
       </Center>
       {!name ? (
         <Skeleton active paragraph={false} title={{ style: { marginBottom: 0 }, width: 80 }} />
       ) : (
-        <Flexbox align={'center'} flex={1} gap={4} horizontal onClick={handleClick}>
-          <Text ellipsis strong style={{ flex: 1, fontSize: 16 }}>
-            {name}
-          </Text>
-        </Flexbox>
+        <Text ellipsis style={{ flex: 1 }} weight={500}>
+          {name}
+        </Text>
       )}
       {name && (
         <DropdownMenu items={menuItems} placement="bottomRight">
-          <ChevronsUpDown
-            className={styles.icon}
+          <ActionIcon
+            icon={ChevronsUpDownIcon}
             onClick={(e) => e.stopPropagation()}
-            size={16}
-            style={{ cursor: 'pointer', flex: 'none' }}
+            size={{
+              blockSize: 28,
+              size: 16,
+            }}
+            style={{ width: 24 }}
           />
         </DropdownMenu>
       )}
-    </Flexbox>
+    </Block>
   );
 });
 

package/src/app/[variants]/(main)/resource/library/_layout/Header/index.tsx

@@ -12,17 +12,15 @@ const Header = memo(() => {
   const { id } = useParams<{ id: string }>();
   const { t } = useTranslation('common');
   return (
-    <>
-      <SideBarHeaderLayout
-        breadcrumb={[
-          {
-            href: '/resource',
-            title: t('tab.resource'),
-          },
-        ]}
-      />
-      <LibraryHead id={id || ''} />
-    </>
+    <SideBarHeaderLayout
+      breadcrumb={[
+        {
+          href: '/resource',
+          title: t('tab.resource'),
+        },
+      ]}
+      left={<LibraryHead id={id || ''} />}
+    />
   );
 });