Merge pull request #38 from web-dahuyou/dev

大数据量列表优化，导入导出loading
web-dahuyou · Sep 12, 2024 · 862954a · 862954a
2 parents f88a8d6 + 359e43e
commit 862954a
Show file tree

Hide file tree

Showing 11 changed files with 142 additions and 87 deletions.
diff --git a/entrypoints/common/components/Root.tsx b/entrypoints/common/components/Root.tsx
@@ -70,6 +70,12 @@ export default function Root({ children }: { children: React.ReactNode }) {
             colorPrimary: primaryColor || PRIMARY_COLOR,
             colorBgContainer: themeTypeConfig.bgColor || '#fff',
           },
+          components: {
+            Tree: {
+              motion: false,
+              algorithm: true,
+            },
+          },
         }}
       >
         <GlobalContext.Provider

diff --git a/entrypoints/common/locale/modules/home/enUS.ts b/entrypoints/common/locale/modules/home/enUS.ts
@@ -53,14 +53,17 @@ export default {
   'home.tab.name': 'Name',
   'home.tab.url': 'URL',
 
-  'home.help.content.1': '1. The left side list displays the tags, and the secondary menus represent the tab groups. The list supports searching for both tags and tab groups. The right-side panel displays all the tab groups and the tabs within each tab group.',
-  'home.help.content.2': '2、The Staging Area is a special category, fixed at the top of the list. When sending tabs, they will be saved to the Staging Area.',
-  'home.help.content.3': '3. When a tab group is locked, the group and its tabs cannot be removed or moved out. However, tabs from other tab groups can be moved into the locked group. To remove a tab group, you need to first unlock it.',
-  'home.help.content.4': '4. When a tab group is starred, it will be placed at the top of the current category. Moving other tab groups to a position before the starred tab group will automatically star them as well. If a starred tab group is moved to a position after a non-starred tab group, the star status will be automatically released.',
-  'home.help.content.5': '5. When restoring a tab group, each of the tabs within the tab group will be opened in browser. If the "Automatically remove tabs from list when restoring" setting is enabled, the tabs will be removed from the list after they are opened.',
-  'home.help.content.6': '6. The "Restore" action means opening the tabs in the browser, while the "Recover" action means recover the tags / tab groups / tabs from the "Recycle Bin" to the "List" home.',
-  'home.help.content.7': '7. The "Ascending" and "Descending" only work for unstarred tab groups in the current category.',
-  'home.help.content.8': '8. Tags / tab groups / tabs support drag-and-drop sorting. When a category/tab group is selected, it can be sorted using shortcut keys. The shortcut key mapping is shown in the table below:',
+  'home.help.content': `
+    <li>The left-side list displays the tags, and the secondary menus represent the tab groups. The list supports searching for both tags and tab groups. The right-side panel displays all the tab groups and the tabs within each tab group.</li>
+    <li>The tabs in the right-side panel support drag-and-drop sorting and cross-group movement. You can also drag the tabs from the right-side panel to the groups in the left-side list. Additionally, you can click the “Move To” button to move tab group and tabs.</li>
+    <li>When a tab group is locked, the group and its tabs cannot be removed or moved out. However, tabs from other tab groups can be moved into the locked group. To remove a tab group, you need to first unlock it.</li>
+    <li>When a tab group is starred, it will be placed at the top of the current category. Moving other tab groups to a position before the starred tab group will automatically star them as well. If a starred tab group is moved to a position after a non-starred tab group, the star status will be automatically released.</li>
+    <li>The Staging Area is a special category, fixed at the top of the list. When sending tabs, they will be saved to the Staging Area.</li>
+    <li>When opening a tab group, each of the tabs within the tab group will be opened in browser. If the "Automatically remove tabs from list when opening tabs or tab group" setting is enabled, the tabs will be removed from the list after they are opened.</li>
+    <li>The "Recover" action means recover the tags / tab groups / tabs from the "Recycle Bin" to the "List" home.</li>
+    <li>The "Ascending" and "Descending" only work for unstarred tab groups in the current category.</li>
+    <li>Tags / tab groups / tabs support drag-and-drop sorting. When a category/tab group is selected, it can be sorted using shortcut keys. The shortcut key mapping is shown in the table below:</li>
+  `,
 
   'home.moveTo.missingTip': 'Please select a {type}',
   'home.moveTo.mergeLabel': 'Merge Duplicate Items ?',

diff --git a/entrypoints/common/locale/modules/home/zhCN.ts b/entrypoints/common/locale/modules/home/zhCN.ts
@@ -45,14 +45,17 @@ export default {
   'home.tab.name': '名称',
   'home.tab.url': '网址',
 
-  'home.help.content.1': '1、左侧列表一级菜单表示分类，二级菜单表示标签组，左侧列表支持分类和标签组的搜索；右侧面板展示的是当前选中分类中的所有标签组以及标签组中的标签页。',
-  'home.help.content.2': '2、中转站是一个特殊分类，固定在第一位，发送标签页时会自动保存到中转站，您可根据需要处理中转站中的标签组和标签页（移动、删除等操作）。',
-  'home.help.content.3': '3、标签组锁定后可以移动，该标签组以及组内的标签页，将禁止删除和移出，但可以将其他标签组的标签页移入该标签组；如果想要删除或移出，可先解锁该标签组。',
-  'home.help.content.4': '4、标签组星标后将在当前分类中置顶，移动其他标签组到星标状态的标签组之前，将自动被星标；移动星标状态的标签组到非星标的标签组之后，将自动解除星标状态。',
-  'home.help.content.5': '5、点击恢复标签组时，会在浏览器中依次打开该标签组中的标签页，如果设置了“恢复标签页时自动从列表中删除”，则该标签组中的标签页会被删除。',
-  'home.help.content.6': '6、“恢复”操作表示在浏览器中打开标签组中的标签页，而“还原”操作表示将回收站中的标签组还原到首页列表中。',
-  'home.help.content.7': '7、“升序”和“降序”功能只对当前分类中的非星标的标签组进行排序。',
-  'home.help.content.8': '8、分类/标签组/标签页支持拖拽排序，当分类/标签组处在选中状态时，可通过快捷键进行排序，快捷键映射见下表：',
+  'home.help.content': `
+    <li>左侧列表一级菜单表示分类，二级菜单表示标签组，左侧列表支持分类和标签组的搜索；右侧面板展示的是当前选中分类中的所有标签组以及标签组中的标签页。</li>
+    <li>右侧面板中的标签页支持拖拽排序以及跨组移动，您还可以将右侧面板中的标签页拖拽到左侧列表的标签组中，以实现跨分类移动；另外可点击“移动到”按钮进行标签组和标签页的移动操作。</li>
+    <li>标签组锁定后可以移动，该标签组以及组内的标签页，将禁止删除和移出，但可以将其他标签组的标签页移入该标签组；如果想要删除或移出，可先解锁该标签组。</li>
+    <li>标签组星标后将在当前分类中置顶，移动其他标签组到星标状态的标签组之前，将自动被星标；移动星标状态的标签组到非星标的标签组之后，将自动解除星标状态。</li>
+    <li>中转站是一个特殊分类，固定在第一位，发送标签页时会自动保存到中转站，您可根据需要处理中转站中的标签组和标签页（移动、删除等操作）。</li>
+    <li>点击打开标签组时，会在浏览器中依次打开该标签组中的标签页，如果设置了“打开标签页时自动从列表中删除”，则该标签组中的标签页会被删除。</li>
+    <li>“还原”操作表示将回收站中的标签组还原到首页列表中。</li>
+    <li>“升序”和“降序”功能只对当前分类中的非星标的标签组进行排序。</li>
+    <li>分类/标签组/标签页支持拖拽排序，当分类/标签组处在选中状态时，可通过快捷键进行排序，快捷键映射见下表：</li>
+  `,
 
   'home.moveTo.missingTip': '请选择{type}',
   'home.moveTo.mergeLabel': '是否合并重复项',

diff --git a/entrypoints/common/locale/modules/settings/enUS.ts b/entrypoints/common/locale/modules/settings/enUS.ts
@@ -17,7 +17,7 @@ export default {
   'settings.closeTabsAfterSendTabs': 'When sending tabs - whether to automatically close the tabs ?',
   'settings.closeTabsAfterSendTabs.yes': 'Automatically close',
   'settings.closeTabsAfterSendTabs.no': 'Do not',
-  'settings.deleteAfterRestore': 'When opening tabs or tab groups - whether to remove the tabs ?',
+  'settings.deleteAfterRestore': 'When opening tabs or tab group - whether to remove the tabs ?',
   'settings.deleteAfterRestore.yes': 'Remove (pinned tabs remain)',
   'settings.deleteAfterRestore.no': 'All remain (recommended)',
   'settings.deleteUnlockedEmptyGroup': 'When clearing tabs - whether to remove the empty group ?',

diff --git a/entrypoints/common/style/Common.styled.tsx b/entrypoints/common/style/Common.styled.tsx
@@ -74,23 +74,23 @@ export const GlobalStyle = createGlobalStyle`
     color: ${(props) => props.theme.colorText || 'rgba(0, 0, 0, 0.88)'};
 	}
 
-  ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+  ::-webkit-scrollbar, .ant-tree-list-scrollbar {
+    width: 8px !important;
+    height: 8px !important;
   }
 
   ::-webkit-scrollbar-track {
-    border-radius: 5px;
-    background: var(--bg-color, #fff);
+    border-radius: 4px;
+    background: var(--bg-color, #fff) !important;
   }
 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: ${(props) => props.theme.type === 'light' ? '#d9d9d9' : '#555'};
+  ::-webkit-scrollbar-thumb, .ant-tree-list-scrollbar-thumb {
+    border-radius: 4px;
+    background: ${(props) => `${props.theme.type === 'light' ? '#d9d9d9' : '#555'} !important`};
     box-shadow:inset 0 0 4px rgba(0, 0, 0, .3);
   }
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: ${(props) => props.theme.type === 'light' ? '#bfbfbf' : '#888'};
+  ::-webkit-scrollbar-thumb:hover, .ant-tree-list-scrollbar-thumb:hover {
+    background: ${(props) => `${props.theme.type === 'light' ? '#bfbfbf' : '#888'} !important`};
   }
 `;
diff --git a/entrypoints/options/home/Home.styled.tsx b/entrypoints/options/home/Home.styled.tsx
@@ -8,7 +8,6 @@ export const StyledSidebarWrapper = styled.div<{
   $sidebarWidth?: number;
 }>`
   position: relative;
-  height: calc(100vh - 180px);
 
   .sidebar-inner-box {
     width: ${(props) => props.$sidebarWidth || 280}px;
@@ -79,8 +78,8 @@ export const StyledSidebarWrapper = styled.div<{
     .sidebar-tree-wrapper {
       flex: 1;
       height: 0;
-      padding: 10px 0;
-      overflow: auto;
+      // padding: 10px 0;
+      // overflow: auto;
       .no-data {
         padding: 16px 0;
         button {
@@ -112,6 +111,7 @@ export const StyledListWrapper = styled.div<{
 export const StyledTreeNodeItem = styled.div`
   display: flex;
   align-items: center;
+  padding-right: 8px;
   cursor: pointer;
   .tree-node-title {
     width: 0;
@@ -144,6 +144,15 @@ export const StyledFooterWrapper = styled.div<{ $paddingLeft?: number }>`
   transition: padding 0.2s ease-in-out;
 `;
 
+export const StyledHelpInfoBox = styled.div`
+  ul {
+    list-style-type: disc;
+    li {
+      margin-bottom: 8px;
+    }
+  }
+`;
+
 export default {
   name: 'option-home-styled',
 };
diff --git a/entrypoints/options/home/RenderTreeNode.tsx b/entrypoints/options/home/RenderTreeNode.tsx
@@ -20,6 +20,7 @@ export default function RenderTreeNode({
   selected,
   container,
   refreshKey,
+  virtual = false,
   onAction,
   onTabItemDrop, // 这个 onTabItemDrop 只是为了方便右侧面板的标签页拖拽到左侧树的标签组，左侧树中的 分类和标签组的拖拽由 antd 的 Tree 组件自带实现
   onMoveTo
@@ -81,22 +82,32 @@ export default function RenderTreeNode({
     setModalVisible(false);
   };
 
+  /* 直接采用antd Tree的scrollTo方法 */
   useEffect(() => {
     setTimeout(() => {
       if (selected && container && nodeRef.current) {
-          const containerRect = container.getBoundingClientRect();
-          const nodeRect = nodeRef.current.getBoundingClientRect();
+        container?.scrollTo({ key: node.key, offset: 80 })
+      }
+    }, 100);
+  }, [container, refreshKey, selected]);
 
-          const scrollTop = container.scrollTop;
+  /* 非虚拟滚动模式可以采用这个方法 */
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     if (selected && container && nodeRef.current) {
+  //         const containerRect = container.getBoundingClientRect();
+  //         const nodeRect = nodeRef.current.getBoundingClientRect();
 
-          if (nodeRect.top < containerRect.top) {
-            container.scrollTo(0, scrollTop - 80);
-          } else if (nodeRect.bottom > containerRect.bottom) {
-            container.scrollTo(0, scrollTop + 80);
-          }
-        }
-      }, 300);
-  }, [container, refreshKey, selected]);
+  //         const scrollTop = container.scrollTop;
+
+  //         if (nodeRect.top < containerRect.top) {
+  //           container.scrollTo(0, scrollTop - 80);
+  //         } else if (nodeRect.bottom > containerRect.bottom) {
+  //           container.scrollTo(0, scrollTop + 80);
+  //         }
+  //       }
+  //     }, 300);
+  // }, [container, refreshKey, selected]);
 
   return (
     // 这个 DropComponent 只是为了方便右侧面板的标签页拖拽到左侧树的标签组，左侧树中的 分类和标签组的拖拽由 antd 的 Tree 组件自带实现

diff --git a/entrypoints/options/home/index.tsx b/entrypoints/options/home/index.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useState, useMemo, useCallback, useRef } from 'react';
 import {
   theme,
   Flex,
@@ -28,6 +28,7 @@ import {
   StyledListWrapper,
   StyledSidebarWrapper,
   StyledFooterWrapper,
+  StyledHelpInfoBox,
 } from './Home.styled';
 import ToggleSidebarBtn from '../components/ToggleSidebarBtn';
 import SortingBtns from './SortingBtns';
@@ -50,6 +51,7 @@ export default function Home() {
   const { token } = theme.useToken();
   const { $fmt } = useIntlUtls();
   const listRef = useRef<HTMLDivElement>(null);
+  const treeRef = useRef(null);
   const {
     loading,
     countInfo,
@@ -86,6 +88,7 @@ export default function Home() {
 
   const { hotkeyList } = useHotkeys({ onAction: handleHotkeyAction });
 
+  const [treeBoxHeight, setTreeBoxHeight] = useState<number>(400);
   const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
   const [confirmModalVisible, setConfirmModalVisible] = useState<boolean>(false);
   const [helpDrawerVisible, setHelpDrawerVisible] = useState<boolean>(false);
@@ -159,6 +162,11 @@ export default function Home() {
     }, 30);
   };
 
+  // 是否开启虚拟滚动（数据量大时开启虚拟滚动）
+  const virtual = useMemo(() => {
+    return (countInfo?.groupCount || 0) > 100 || (countInfo?.tabCount || 0) > 1200;
+  }, [countInfo]);
+
   // 搜索过滤后的 treeData
   const searchTreeData = useMemo(() => {
     if (!searchValue) return treeData;
@@ -242,16 +250,18 @@ export default function Home() {
     [selectedTagKey]
   );
 
+  useEffect(() => {
+    const listHeight = listRef.current?.offsetHeight || 400;
+    setTreeBoxHeight(listHeight);
+  }, []);
+
   return (
     <>
       <StyledListWrapper
         className={classNames('home-wrapper', sidebarCollapsed && 'collapsed')}
         $collapsed={sidebarCollapsed}
       >
-        <StyledSidebarWrapper
-          className="sidebar"
-          $collapsed={sidebarCollapsed}
-        >
+        <StyledSidebarWrapper className="sidebar" $collapsed={sidebarCollapsed}>
           <div
             className={classNames('sidebar-inner-box', sidebarCollapsed && 'collapsed')}
           >
@@ -295,7 +305,11 @@ export default function Home() {
                 <Button type="primary" size="small" onClick={handleTagCreate}>
                   {$fmt('home.addTag')}
                 </Button>
-                <Button type="primary" size="small" onClick={() => setConfirmModalVisible(true)}>
+                <Button
+                  type="primary"
+                  size="small"
+                  onClick={() => setConfirmModalVisible(true)}
+                >
                   {$fmt('home.clearAll')}
                 </Button>
                 {/* <Dropdown menu={{ items: moreItems }} placement="bottomLeft">
@@ -316,7 +330,9 @@ export default function Home() {
                 <Spin spinning={loading} size="large">
                   {searchTreeData?.length > 0 ? (
                     <Tree
-                      // draggable
+                      ref={treeRef}
+                      virtual={virtual}
+                      height={treeBoxHeight}
                       draggable={{ icon: false, nodeDraggable: isNodeDraggable }}
                       allowDrop={checkAllowDrop}
                       blockNode
@@ -330,7 +346,7 @@ export default function Home() {
                         <RenderTreeNode
                           node={node}
                           selected={selectedKeys.includes(node.key)}
-                          container={listRef.current}
+                          container={treeRef.current}
                           refreshKey={refreshKey}
                           onAction={onTreeNodeAction}
                           onTabItemDrop={handleTabItemDrop}
@@ -419,21 +435,14 @@ export default function Home() {
         onClose={() => setHelpDrawerVisible(false)}
         width={500}
       >
-        <Flex vertical gap="8px">
-          <p>{$fmt('home.help.content.1')}</p>
-          <p>{$fmt('home.help.content.2')}</p>
-          <p>{$fmt('home.help.content.3')}</p>
-          <p>{$fmt('home.help.content.4')}</p>
-          <p>{$fmt('home.help.content.5')}</p>
-          <p>{$fmt('home.help.content.6')}</p>
-          <p>{$fmt('home.help.content.7')}</p>
-          <p>{$fmt('home.help.content.8')}</p>
+        <StyledHelpInfoBox>
+          <ul dangerouslySetInnerHTML={{ __html: $fmt('home.help.content') }}></ul>
 
-          <p style={{ marginTop: '8px' }}>
+          <p style={{ marginBottom: '8px' }}>
             <strong>{$fmt('common.hotkeys')}</strong>
           </p>
           <HotkeyList list={hotkeyList}></HotkeyList>
-        </Flex>
+        </StyledHelpInfoBox>
       </Drawer>
     </>
   );

diff --git a/entrypoints/options/home/types.ts b/entrypoints/options/home/types.ts
@@ -28,11 +28,14 @@ export type RenderTreeNodeActionProps = {
 export type RenderTreeNodeProps = {
   node: TreeDataNodeUnion;
   selected?: boolean;
-  container?: HTMLElement | null;
+  container?:
+    | (HTMLElement & { scrollTo?: (props: { key: React.Key; offset?: number }) => void })
+    | null;
   refreshKey?: string;
+  virtual?: boolean;
   onAction?: (props: RenderTreeNodeActionProps) => void;
   onTabItemDrop?: DndTabItemOnDropCallback;
-  onMoveTo?: ({moveData, targetData}: MoveToCallbackProps) => void;
+  onMoveTo?: ({ moveData, targetData }: MoveToCallbackProps) => void;
 };
 
 // 需要移动的数据