@lobehub/lobehub 2.0.0-next.298 → 2.0.0-next.299

package/src/features/ResourceManager/components/Explorer/ToolBar/SortDropdown.tsx

@@ -1,9 +1,8 @@
-import { Dropdown } from '@lobehub/ui';
+import { DropdownMenu, type DropdownMenuCheckboxItem } from '@lobehub/ui';
 import { ArrowDownAZ } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type MenuProps } from '@/components/Menu';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 
 import ActionIconWithChevron from './ActionIconWithChevron';
@@ -22,30 +21,34 @@ const SortDropdown = memo(() => {
     [t],
   );
 
-  const menuItems: MenuProps['items'] = useMemo(
+  const selectedKey = sorter || 'createdAt';
+
+  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
     () =>
-      sortOptions.map((option) => ({
-        key: option.key,
-        label: option.label,
-        onClick: () => setSorter(option.key as 'name' | 'createdAt' | 'size'),
-      })),
-    [setSorter, sortOptions],
+      sortOptions.map(
+        (option): DropdownMenuCheckboxItem => ({
+          checked: option.key === selectedKey,
+          closeOnClick: true,
+          key: option.key,
+          label: option.label,
+          onCheckedChange: (checked: boolean) => {
+            if (checked) {
+              setSorter(option.key as 'name' | 'createdAt' | 'size');
+            }
+          },
+          type: 'checkbox',
+        }),
+      ),
+    [selectedKey, setSorter, sortOptions],
   );
 
   const currentSortLabel =
     sortOptions.find((option) => option.key === sorter)?.label || t('FileManager.sort.dateAdded');
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: menuItems,
-        selectable: true,
-        selectedKeys: [sorter || 'createdAt'],
-      }}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIconWithChevron icon={ArrowDownAZ} title={currentSortLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/ResourceManager/components/Explorer/ToolBar/ViewSwitcher.tsx

@@ -1,5 +1,5 @@
-import { Dropdown, Icon } from '@lobehub/ui';
-import { Grid3x3Icon, ListIcon } from 'lucide-react';
+import { DropdownMenu, Icon } from '@lobehub/ui';
+import { Check, Grid3x3Icon, ListIcon } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -23,33 +23,27 @@ const ViewSwitcher = memo(() => {
   const menuItems: MenuProps['items'] = useMemo(
     () => [
       {
+        extra: viewMode === 'list' ? <Icon icon={Check} /> : undefined,
         icon: <Icon icon={ListIcon} />,
         key: 'list',
         label: t('FileManager.view.list'),
         onClick: () => setViewMode('list'),
       },
       {
+        extra: viewMode === 'masonry' ? <Icon icon={Check} /> : undefined,
         icon: <Icon icon={Grid3x3Icon} />,
         key: 'masonry',
         label: t('FileManager.view.masonry'),
         onClick: () => setViewMode('masonry'),
       },
     ],
-    [setViewMode, t],
+    [setViewMode, t, viewMode],
   );
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: menuItems,
-        selectable: true,
-        selectedKeys: [viewMode],
-      }}
-      placement="bottomRight"
-    >
+    <DropdownMenu items={menuItems} placement="bottomRight">
       <ActionIconWithChevron icon={currentViewIcon} title={currentViewLabel} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/ResourceManager/components/Header/AddButton.tsx

@@ -2,7 +2,7 @@
 
 import { FILE_URL } from '@lobechat/business-const';
 import { Notion } from '@lobehub/icons';
-import { Button, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { Button, DropdownMenu, Icon, type MenuProps } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { FilePenLine, FileUp, FolderIcon, FolderUp, Link, Plus } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
@@ -211,18 +211,11 @@ const AddButton = () => {
 
   return (
     <>
-      <Dropdown menu={{ items }} placement="bottomRight" trigger={['hover']}>
-        <Button
-          icon={Plus}
-          onClick={(e) => {
-            // Prevent default button behavior that might interfere with dropdown
-            e.stopPropagation();
-          }}
-          type="primary"
-        >
+      <DropdownMenu items={items} placement="bottomRight" trigger="both">
+        <Button data-no-highlight icon={Plus} type="primary">
           {t('addLibrary')}
         </Button>
-      </Dropdown>
+      </DropdownMenu>
       <GuideModal
         cancelText={t('header.actions.notionGuide.cancel')}
         cover={<GuideVideo height={269} src={FILE_URL.importFromNotionGuide} width={358} />}

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

@@ -1,74 +1,86 @@
-import { ActionIcon, Dropdown, DropdownProps, Flexbox, Text } from '@lobehub/ui';
+import {
+  ActionIcon,
+  DropdownMenu,
+  type DropdownMenuCheckboxItem,
+  type DropdownMenuProps,
+  Flexbox,
+  Text,
+} from '@lobehub/ui';
 import { Languages } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type MenuProps } from '@/components/Menu';
 import { localeOptions } from '@/locales/resources';
 import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
-import { type LocaleMode } from '@/types/locale';
 
-const LangButton = memo<{ placement?: DropdownProps['placement']; size?: number }>(
+const LangButton = memo<{ placement?: DropdownMenuProps['placement']; size?: number }>(
   ({ placement, size }) => {
     const [language, switchLocale] = useGlobalStore((s) => [
       globalGeneralSelectors.language(s),
       s.switchLocale,
     ]);
 
-    const handleLangChange = (value: LocaleMode) => {
-      switchLocale(value);
-    };
-
     const { t } = useTranslation(['setting', 'common']);
 
-    const items: MenuProps['items'] = useMemo(
-      () => [
-        {
-          key: 'auto',
-          label: (
-            <Flexbox gap={4}>
-              <Text style={{ lineHeight: 1.2 }}>{t('settingCommon.lang.autoMode')}</Text>
-              <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
-                {t(`lang.auto` as any, { ns: 'common' })}
-              </Text>
-            </Flexbox>
-          ),
-          onClick: () => handleLangChange('auto'),
+    const items = useMemo<DropdownMenuCheckboxItem[]>(() => {
+      const autoItem: DropdownMenuCheckboxItem = {
+        checked: language === 'auto',
+        closeOnClick: true,
+        key: 'auto',
+        label: (
+          <Flexbox gap={4}>
+            <Text style={{ lineHeight: 1.2 }}>{t('settingCommon.lang.autoMode')}</Text>
+            <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
+              {t(`lang.auto` as any, { ns: 'common' })}
+            </Text>
+          </Flexbox>
+        ),
+        onCheckedChange: (checked: boolean) => {
+          if (checked) {
+            switchLocale('auto');
+          }
         },
-        ...localeOptions.map((item) => ({
-          key: item.value,
-          label: (
-            <Flexbox gap={4} key={item.value}>
-              <Text style={{ lineHeight: 1.2 }}>{item.label}</Text>
-              <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
-                {t(`lang.${item.value}` as any, { ns: 'common' })}
-              </Text>
-            </Flexbox>
-          ),
-          onClick: () => handleLangChange(item.value),
-        })),
-      ],
-      [t],
-    );
+        type: 'checkbox',
+      };
+
+      const localeItems = localeOptions.map<DropdownMenuCheckboxItem>((item) => ({
+        checked: language === item.value,
+        closeOnClick: true,
+        key: item.value,
+        label: (
+          <Flexbox gap={4} key={item.value}>
+            <Text style={{ lineHeight: 1.2 }}>{item.label}</Text>
+            <Text fontSize={12} style={{ lineHeight: 1.2 }} type={'secondary'}>
+              {t(`lang.${item.value}` as any, { ns: 'common' })}
+            </Text>
+          </Flexbox>
+        ),
+        onCheckedChange: (checked: boolean) => {
+          if (checked) {
+            switchLocale(item.value);
+          }
+        },
+        type: 'checkbox',
+      }));
+
+      return [autoItem, ...localeItems];
+    }, [language, switchLocale, t]);
 
     return (
-      <Dropdown
-        arrow={false}
-        menu={{
-          items,
-          selectable: true,
-          selectedKeys: [language],
+      <DropdownMenu
+        items={items}
+        placement={placement}
+        popupProps={{
           style: {
             maxHeight: 360,
             minWidth: 240,
             overflow: 'auto',
           },
         }}
-        placement={placement}
       >
         <ActionIcon icon={Languages} size={size || { blockSize: 32, size: 16 }} />
-      </Dropdown>
+      </DropdownMenu>
     );
   },
 );

package/src/layout/AuthProvider/MarketAuth/MarketAuthProvider.tsx

@@ -151,7 +151,7 @@ export const MarketAuthProvider = ({ children, isDesktop }: MarketAuthProviderPr
     null,
   );
   const [pendingProfileSuccessCallback, setPendingProfileSuccessCallback] = useState<
-    ((profile: MarketUserProfile) => void) | null
+    ((_profile: MarketUserProfile) => void) | null
   >(null);
 
   // 订阅 user store 的初始化状态，当 isUserStateInit 为 true 时，settings 数据已加载完成

package/src/services/document/index.ts

@@ -2,6 +2,8 @@ import { type DocumentItem } from '@lobechat/database/schemas';
 
 import { lambdaClient } from '@/libs/trpc/client';
 
+import { abortableRequest } from '../utils/abortableRequest';
+
 export interface CreateDocumentParams {
   content?: string;
   editorData: string;
@@ -41,7 +43,15 @@ export class DocumentService {
     return lambdaClient.document.queryDocuments.query(params);
   }
 
-  async getDocumentById(id: string): Promise<DocumentItem | undefined> {
+  async getDocumentById(id: string, uniqueKey?: string): Promise<DocumentItem | undefined> {
+    if (uniqueKey) {
+      // Use fixed key so switching documents cancels the previous request
+      // This prevents race conditions where old document's data overwrites new document's editor
+      return abortableRequest.execute(uniqueKey, async (signal) =>
+        lambdaClient.document.getDocumentById.query({ id }, { signal }),
+      );
+    }
+
     return lambdaClient.document.getDocumentById.query({ id });
   }
 

package/src/store/page/slices/crud/action.ts

@@ -47,10 +47,6 @@ export interface CrudAction {
    * Duplicate an existing page
    */
   duplicatePage: (pageId: string) => Promise<{ [key: string]: any; id: string }>;
-  /**
-   * Fetch full page detail by ID and update documents array
-   */
-  fetchPageDetail: (pageId: string) => Promise<void>;
   navigateToPage: (pageId: string | null) => void;
   /**
    * Remove a page (deletes from documents table)
@@ -240,50 +236,6 @@ export const createCrudSlice: StateCreator<
     return newPage;
   },
 
-  fetchPageDetail: async (pageId) => {
-    try {
-      const document = await documentService.getDocumentById(pageId);
-
-      if (!document) {
-        console.warn(`[fetchPageDetail] Page not found: ${pageId}`);
-        return;
-      }
-
-      const fullPage: LobeDocument = {
-        content: document.content || null,
-        createdAt: document.createdAt ? new Date(document.createdAt) : new Date(),
-        editorData:
-          typeof document.editorData === 'string'
-            ? JSON.parse(document.editorData)
-            : document.editorData || null,
-        fileType: document.fileType,
-        filename: document.title || document.filename || 'Untitled',
-        id: document.id,
-        metadata: document.metadata || {},
-        source: 'document',
-        sourceType: DocumentSourceType.EDITOR,
-        title: document.title || '',
-        totalCharCount: document.content?.length || 0,
-        totalLineCount: 0,
-        updatedAt: document.updatedAt ? new Date(document.updatedAt) : new Date(),
-      };
-
-      // Update document via internal dispatch
-      const { documents } = get();
-      if (documents?.some((doc) => doc.id === pageId)) {
-        get().internal_dispatchDocuments({
-          document: fullPage,
-          id: pageId,
-          type: 'updateDocument',
-        });
-      } else {
-        get().internal_dispatchDocuments({ document: fullPage, type: 'addDocument' });
-      }
-    } catch (error) {
-      console.error('[fetchPageDetail] Failed to fetch page:', error);
-    }
-  },
-
   navigateToPage: (pageId) => {
     if (!pageId) {
       get().navigate?.('/page');

package/src/styles/global.ts

@@ -55,8 +55,8 @@ export default ({ token }: { prefixCls: string; token: Theme }) => css`
     -webkit-app-region: no-drag;
   }
 
-  .${CLASSNAMES.ContextTrigger}[data-popup-open],
-    .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open] {
+  .${CLASSNAMES.ContextTrigger}[data-popup-open]:not([data-no-highlight]),
+  .${CLASSNAMES.DropdownMenuTrigger}[data-popup-open]:not([data-no-highlight]) {
     background: ${token.colorFillTertiary};
   }
 `;

package/src/types/shim-lobe-ui.d.ts

@@ -0,0 +1,7 @@
+declare module '@lobehub/ui' {
+  export interface DropdownMenuProps {
+    'data-no-highlight'?: boolean;
+  }
+}
+
+export {};