Merge pull request #32 from web-dahuyou/dev

功能和样式优化
web-dahuyou · Sep 7, 2024 · 8b0c1f1 · 8b0c1f1
2 parents d5a1f2b + b887c87
commit 8b0c1f1
Show file tree

Hide file tree

Showing 15 changed files with 257 additions and 140 deletions.
diff --git a/entrypoints/common/locale/modules/importExport/enUS.ts b/entrypoints/common/locale/modules/importExport/enUS.ts
@@ -22,6 +22,7 @@ export default {
   'importExport.importFailed': 'Import Failed! Please check whether the format is correct ?',
 
   'importExport.exportContent': 'Content to Export:',
+  'importExport.getContent': 'Get Content',
   'importExport.copy': 'Copy to Clipboard',
   'importExport.exportToFile': 'Export to Local File',
   'importExport.CopySuccess': 'Copy Success',

diff --git a/entrypoints/common/locale/modules/importExport/zhCN.ts b/entrypoints/common/locale/modules/importExport/zhCN.ts
@@ -27,6 +27,7 @@ export default {
   'importExport.importFailed': '导入失败，请检查格式是否正确',
 
   'importExport.exportContent': '导出内容：',
+  'importExport.getContent': '生成内容',
   'importExport.copy': '复制到剪贴板',
   'importExport.exportToFile': '导出到本地',
   'importExport.CopySuccess': '复制成功',

diff --git a/entrypoints/common/storage/tabListUtils.ts b/entrypoints/common/storage/tabListUtils.ts
@@ -112,7 +112,7 @@ export function mergeGroupsAndTabs({
       resultList = [];
     for (let item of list) {
       if (exceptValue != undefined && item[key] === exceptValue) {
-        exceptList.push(item);
+        exceptList.push({ ...item, groupName: `group_${getRandomId()}` });
       } else {
         resultList.push(item);
       }
@@ -1106,10 +1106,25 @@ export default class TabListUtils {
       await this.setTagList(newTagList);
     } else {
       // append mode
-      // await this.setTagList([...tags, ...tagList]);
-      const insertIndex = tagList?.[0]?.static ? 1 : 0;
-      tagList.splice(insertIndex, 0, ...tags);
-      await this.setTagList(tagList);
+      let stagingAreaTag = this.createStagingAreaTag();
+      const stagingAreaIndex = tagList?.findIndex((tag) => tag?.static);
+      if (~stagingAreaIndex) {
+        stagingAreaTag = tagList.splice(stagingAreaIndex, 1)?.[0] || stagingAreaTag;
+      }
+
+      const stagingAreaInsertIndex = tags?.findIndex((tag) => tag?.static);
+
+      if (~stagingAreaInsertIndex) {
+        stagingAreaTag.groupList = mergeGroupsAndTabs({
+          targetList: stagingAreaTag.groupList,
+          insertList: tags?.[stagingAreaInsertIndex].groupList,
+          exceptValue: UNNAMED_GROUP,
+        })
+        tags.splice(stagingAreaInsertIndex, 1);
+      }
+
+      const newTagList = [stagingAreaTag, ...tags, ...tagList];
+      await this.setTagList(newTagList);
     }
   }
   // 导出

diff --git a/entrypoints/common/style/Common.styled.tsx b/entrypoints/common/style/Common.styled.tsx
@@ -10,62 +10,60 @@ export const StyledEllipsis = css`
   white-space: nowrap;
 `;
 // 多行超长省略
-export const StyledEllipsisLines = css<{$lines?: number}>`
+export const StyledEllipsisLines = css<{ $lines?: number }>`
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: ${props => props.$lines || 2};
+  -webkit-line-clamp: ${(props) => props.$lines || 2};
 `;
 
-
 // action icon btn
 export const StyledActionIconBtn = styled.i<{
-  theme: StyledThemeProps,
-  $size?: number | string,
-  $color?: string,
-  $hoverColor?: string,
-  $hoverScale?: number
+  theme: StyledThemeProps;
+  $size?: number | string;
+  $color?: string;
+  $hoverColor?: string;
+  $hoverScale?: number;
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${props => `${+(props.$size || 16) + 2}px`};
-  height: ${props => `${+(props.$size || 16) + 2}px`};
-  font-size: ${props => `${props.$size || 14}px`};
-  color: ${props => props.$color || props.theme.colorTextSecondary || '#666'};
+  width: ${(props) => `${+(props.$size || 16) + 2}px`};
+  height: ${(props) => `${+(props.$size || 16) + 2}px`};
+  font-size: ${(props) => `${props.$size || 14}px`};
+  color: ${(props) => props.$color || props.theme.colorTextSecondary || '#666'};
   transition: all 0.2s;
   cursor: pointer;
   &:hover {
-    transform: scale(${props => props.$hoverScale || 1.2});
-    color: ${props => props.$hoverColor || props.theme.colorTextSecondary || '#666'};
+    transform: scale(${(props) => props.$hoverScale || 1.2});
+    color: ${(props) => props.$hoverColor || props.theme.colorTextSecondary || '#666'};
   }
 `;
 
 // toogle theme color block item
 export const StyledColorItem = styled.div`
-position: relative;
-width: 24px;
-height: 24px;
-border-radius: 4px;
-cursor: pointer;
-&.active {
-  &:after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: -6px;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background: red;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  &.active {
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: -6px;
+      width: 4px;
+      height: 4px;
+      border-radius: 2px;
+      background: red;
+    }
   }
-}
 `;
 
-
 export const GlobalStyle = createGlobalStyle`
   :root {
     --bg-color: ${(props) => props.theme.colorBgContainer || '#fff'};
@@ -75,4 +73,24 @@ export const GlobalStyle = createGlobalStyle`
     --text-color: ${(props) => props.theme.colorText || 'rgba(0, 0, 0, 0.88)'};
     color: ${(props) => props.theme.colorText || 'rgba(0, 0, 0, 0.88)'};
 	}
-`
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    border-radius: 5px;
+    background: var(--bg-color, #fff);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: ${(props) => props.theme.type === 'light' ? '#d9d9d9' : '#555'};
+    box-shadow:inset 0 0 4px rgba(0, 0, 0, .3);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${(props) => props.theme.type === 'light' ? '#bfbfbf' : '#888'};
+  }
+`;
diff --git a/entrypoints/common/utils/importExport.ts b/entrypoints/common/utils/importExport.ts
@@ -1,6 +1,9 @@
 import type { TagItem, TabItem } from '~/entrypoints/types';
 import { tabListUtils } from '~/entrypoints/common/storage';
-import type { ExtContentImporterProps, ExtContentExporterProps } from '~/entrypoints/types';
+import type {
+  ExtContentImporterProps,
+  ExtContentExporterProps,
+} from '~/entrypoints/types';
 import { getRandomId, newCreateTime } from '~/entrypoints/common/utils';
 
 // 解析 NiceTab、OneTab等 插件的导入内容
@@ -12,7 +15,11 @@ export const extContentImporter: ExtContentImporterProps = {
       if (!line.trim()) {
         if (tabList?.length > 0) {
           const newGroupItem = tabListUtils.getInitialTabGroup();
-          groupList.push({ ...newGroupItem, tabList: [...tabList] });
+          groupList.push({
+            ...newGroupItem,
+            groupName: `oneTab-${getRandomId()}`,
+            tabList: [...tabList],
+          });
           tabList = [];
         }
         continue;
@@ -24,7 +31,11 @@ export const extContentImporter: ExtContentImporterProps = {
 
     if (tabList?.length > 0) {
       const newGroupItem = tabListUtils.getInitialTabGroup();
-      groupList.push({ ...newGroupItem, tabList: [...tabList] });
+      groupList.push({
+        ...newGroupItem,
+        groupName: `oneTab-${getRandomId()}`,
+        tabList: [...tabList],
+      });
       tabList = [];
     }
 
@@ -37,34 +48,34 @@ export const extContentImporter: ExtContentImporterProps = {
     try {
       const tagList = JSON.parse(content || '[]') as TagItem[];
       const createTime = newCreateTime();
-      tagList.forEach(tag => {
-        tag.tagId = getRandomId();
+      tagList.forEach((tag) => {
+        tag.tagId = tag.static ? '0' : getRandomId();
         tag.createTime = createTime;
-        tag?.groupList?.forEach(group => {
+        tag?.groupList?.forEach((group) => {
           group.groupId = getRandomId();
           group.createTime = createTime;
-          group?.tabList?.forEach(tab => {
+          group?.tabList?.forEach((tab) => {
             const { favIconUrl } = tab;
             tab.tabId = getRandomId();
-            tab.favIconUrl = favIconUrl?.startsWith('data:image/') ? '' : favIconUrl
-          })
+            tab.favIconUrl = favIconUrl?.startsWith('data:image/') ? '' : favIconUrl;
+          });
         });
-      })
+      });
       return tagList;
     } catch {
       return [];
     }
-  }
-}
+  },
+};
 
 // 将内容导出为 NiceTab、OneTab 等格式
 export const extContentExporter: ExtContentExporterProps = {
   oneTab(tagList): string {
     let resultList: string[] = [];
     try {
-      tagList.forEach(tag => {
-        tag?.groupList?.forEach(group => {
-          group?.tabList?.forEach(tab => {
+      tagList.forEach((tag) => {
+        tag?.groupList?.forEach((group) => {
+          group?.tabList?.forEach((tab) => {
             resultList.push(`${tab.url} | ${tab.title}\n`);
           });
           resultList.push('\n');
@@ -81,13 +92,10 @@ export const extContentExporter: ExtContentExporterProps = {
     } catch {
       return '';
     }
-  }
-}
-
+  },
+};
 
 export default {
   extContentImporter,
-  extContentExporter
+  extContentExporter,
 };
-
-
diff --git a/entrypoints/options/home/Home.styled.tsx b/entrypoints/options/home/Home.styled.tsx
@@ -69,7 +69,7 @@ export const StyledSidebarWrapper = styled.div<{
       flex-shrink: 0;
       display: flex;
       align-items: center;
-      justify-content: flex-end;
+      justify-content: flex-start;
       margin-bottom: 10px;
       gap: 8px;
       button {

diff --git a/entrypoints/options/home/MoveToModal.tsx b/entrypoints/options/home/MoveToModal.tsx
@@ -10,6 +10,9 @@ import type { MoveDataProps, MoveTargetProps, CascaderOption } from './types';
 import { getCascaderData } from './utils';
 
 const StyledCascaderWrapper = styled.div`
+  .ant-cascader-panel {
+    overflow-x: visible;
+  }
   .ant-cascader-menu {
     min-height: 180px;
     max-height: 360px;

diff --git a/entrypoints/options/home/hooks/treeData.ts b/entrypoints/options/home/hooks/treeData.ts
@@ -360,7 +360,8 @@ export function useTreeData() {
     setLoading(false);
     // console.log('init-treeData', treeData);
     setCountInfo(tabListUtils.countInfo);
-    setExpandedKeys(treeData.map((tag) => tag.key));
+    // 考虑到数据量大，默认不展开列表了
+    // setExpandedKeys(treeData.map((tag) => tag.key));
 
     const tag =
       treeData?.find(

diff --git a/entrypoints/options/home/index.tsx b/entrypoints/options/home/index.tsx
@@ -90,15 +90,15 @@ export default function Home() {
   const [confirmModalVisible, setConfirmModalVisible] = useState<boolean>(false);
   const [helpDrawerVisible, setHelpDrawerVisible] = useState<boolean>(false);
   const [searchValue, setSearchValue] = useState<string>('');
-  const moreItems: MenuProps['items'] = [
-    {
-      key: 'clear',
-      label: (
-        <span onClick={() => setConfirmModalVisible(true)}>{$fmt('home.clearAll')}</span>
-      ),
-      icon: <ClearOutlined />,
-    },
-  ];
+  // const moreItems: MenuProps['items'] = [
+  //   {
+  //     key: 'clear',
+  //     label: (
+  //       <span onClick={() => setConfirmModalVisible(true)}>{$fmt('home.clearAll')}</span>
+  //     ),
+  //     icon: <ClearOutlined />,
+  //   },
+  // ];
   // 确认清空全部
   const handleClearConfirm = () => {
     handleMoreItemClick('clear');
@@ -284,20 +284,25 @@ export default function Home() {
               </ul>
               {/* 顶部操作按钮组 */}
               <div className="sidebar-action-btns-wrapper">
-                <Button type="primary" size="small" onClick={() => toggleExpand(true)}>
-                  {$fmt('home.expandAll')}
-                </Button>
+                {/* 隐藏展开全部按钮，自己主动打开吧
+                  <Button type="primary" size="small" onClick={() => toggleExpand(true)}>
+                    {$fmt('home.expandAll')}
+                  </Button>
+                */}
                 <Button type="primary" size="small" onClick={() => toggleExpand(false)}>
                   {$fmt('home.collapseAll')}
                 </Button>
                 <Button type="primary" size="small" onClick={handleTagCreate}>
                   {$fmt('home.addTag')}
                 </Button>
-                <Dropdown menu={{ items: moreItems }} placement="bottomLeft">
+                <Button type="primary" size="small" onClick={() => setConfirmModalVisible(true)}>
+                  {$fmt('home.clearAll')}
+                </Button>
+                {/* <Dropdown menu={{ items: moreItems }} placement="bottomLeft">
                   <StyledActionIconBtn className="btn-more" $size="20" title="更多">
                     <MoreOutlined />
                   </StyledActionIconBtn>
-                </Dropdown>
+                </Dropdown> */}
               </div>
               {/* 列表搜索框 */}
               <Input.Search