Merge pull request #26 from web-dahuyou/dev

标签页标题hover时展示标题和链接

entrypoints/common/components/DndComponent.tsx

@@ -13,6 +13,7 @@ import {
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { ENUM_COLORS } from '~/entrypoints/common/constants';
+import { eventEmitter } from '~/entrypoints/common/hooks/global';
 
 const StyledDndWrapper = styled.div`
   position: relative;
@@ -80,10 +81,12 @@ export default function DndComponent<IncomeData extends DragData>({
         onDragStart() {
           // console.log('--------------draggable--onDragStart');
           setIsDragging(true);
+          eventEmitter.emit('is-dragging', true);
         },
         onDrop() {
           // console.log('--------------draggable--onDrop');
           setIsDragging(false);
+          eventEmitter.emit('is-dragging', false);
         },
       }),
       dropTargetForElements({

entrypoints/common/hooks/global.ts

@@ -1,16 +1,19 @@
 import { createContext, useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import mitt from 'mitt';
 import { antdMap, customMap } from '~/entrypoints/common/locale';
 import type {
+  EventsEmitterProps,
   GlobalContextProps,
-  ThemeProps,
   LanguageTypes,
   IntlForamtMessageParams,
 } from '~/entrypoints/types';
 import { settingsUtils, themeUtils } from '~/entrypoints/common/storage';
 import { capitalize } from '~/entrypoints/common/utils';
 import { ENUM_COLORS, defaultLanguage } from '../constants';
 
+export const eventEmitter = mitt<EventsEmitterProps>();
+
 // global context
 export const GlobalContext = createContext<GlobalContextProps>({
   colorPrimary: ENUM_COLORS.primary,
@@ -106,4 +109,5 @@ export default {
   useAntdLocale,
   useCustomLocale,
   useIntlUtls,
+  eventEmitter
 };

entrypoints/options/home/TabListItem.styled.tsx

@@ -41,6 +41,28 @@ export const StyledTabTitle = styled.span<{ $color?: string; $colorHover?: strin
   }
 `;
 
+export const StyledTabItemTooltip = styled.div`
+  .tooltip-item {
+    display: flex;
+    // align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #666;
+
+    .label {
+      flex-shrink: 0;
+      flex-grow: 0;
+      color: #333;
+      font-weight: bold;
+    }
+    .name, .link {
+      flex: 1;
+      width: 0;
+      ${StyledEllipsis}
+    }
+  }
+`;
+
 export default {
   name: 'option-tab-item-styled',
 }

entrypoints/options/home/TabListItem.tsx

@@ -1,16 +1,17 @@
 import { useCallback, useState } from 'react';
-import { theme, Checkbox } from 'antd';
+import { theme, Checkbox, Typography, Tooltip } from 'antd';
 import { CloseOutlined, EditOutlined } from '@ant-design/icons';
 import { GroupItem, TabItem } from '~/entrypoints/types';
 import { openNewTab } from '~/entrypoints/common/tabs';
 import { settingsUtils } from '~/entrypoints/common/storage';
 import { StyledActionIconBtn } from '~/entrypoints/common/style/Common.styled';
 import { ENUM_COLORS, ENUM_SETTINGS_PROPS } from '~/entrypoints/common/constants';
-import { useIntlUtls } from '~/entrypoints/common/hooks/global';
+import { eventEmitter, useIntlUtls } from '~/entrypoints/common/hooks/global';
 import {
   StyledTabItemWrapper,
   StyledTabTitle,
   StyledTabItemFavicon,
+  StyledTabItemTooltip,
 } from './TabListItem.styled';
 import TabItemEditModal from './TabItemEditModal';
 
@@ -23,10 +24,36 @@ type TabItemProps = {
 
 const { DELETE_AFTER_RESTORE } = ENUM_SETTINGS_PROPS;
 
+// 标签页tooltip内容
+function TabItemTooltipMarkup({ tab }: { tab: TabItem }) {
+  const { $fmt } = useIntlUtls();
+  return (
+    <StyledTabItemTooltip>
+      <div className="tooltip-item tooltip-title">
+        <span className="label">{$fmt('common.name')}:</span>
+        <span className="name" title={tab.title}>
+          {tab.title}
+        </span>
+      </div>
+      <div className="tooltip-item tooltip-url">
+        <span className="label">{$fmt('common.url')}:</span>
+        {/* <span className="link" title={tab.url}>
+          {tab.url}
+        </span> */}
+        <Typography.Link className="link" href={tab.url} target="_blank" title={tab.url}>
+          {tab.url}
+        </Typography.Link>
+      </div>
+    </StyledTabItemTooltip>
+  );
+}
+
 export default function TabListItem({ tab, group, onRemove, onChange }: TabItemProps) {
   const { token } = theme.useToken();
   const { $fmt } = useIntlUtls();
   const [modalVisible, setModalVisible] = useState(false);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
 
   // 确认编辑
   const handleModalConfirm = useCallback(
@@ -47,6 +74,13 @@ export default function TabListItem({ tab, group, onRemove, onChange }: TabItemP
     }
   };
 
+  useEffect(() => {
+    eventEmitter.on('is-dragging', (value) => {
+      setIsDragging(value);
+      if (value) setTooltipVisible(false);
+    });
+  }, []);
+
   return (
     <>
       <StyledTabItemWrapper className="tab-list-item">
@@ -86,9 +120,21 @@ export default function TabListItem({ tab, group, onRemove, onChange }: TabItemP
           $color={token.colorLink}
           $colorHover={token.colorLinkHover}
         >
-          <span className="tab-item-title-text" title={tab.title} onClick={onTabOpen}>
-            {tab.title}
-          </span>
+          <Tooltip
+            open={!isDragging && tooltipVisible}
+            placement="topLeft"
+            overlayStyle={{ maxWidth: '360px', width: '360px' }}
+            title={<TabItemTooltipMarkup tab={tab} />}
+            color="#fff"
+            destroyTooltipOnHide
+            mouseEnterDelay={0.4}
+            mouseLeaveDelay={0.3}
+            onOpenChange={setTooltipVisible}
+          >
+            <span className="tab-item-title-text" onClick={onTabOpen}>
+              {tab.title}
+            </span>
+          </Tooltip>
         </StyledTabTitle>
       </StyledTabItemWrapper>
 

entrypoints/types/global.ts

@@ -3,6 +3,11 @@ import { MessageDescriptor } from 'react-intl';
 // 扩展版本信息
 export type VersionInfo = { updateAvailable: boolean; version?: string };
 
+// 订阅事件类型
+export type EventsEmitterProps = {
+  'is-dragging': boolean;
+}
+
 // 全局 Context
 export interface GlobalContextProps {
   colorPrimary: string;

package.json

@@ -25,6 +25,7 @@
     "emoji-regex": "^10.3.0",
     "file-saver": "^2.0.5",
     "hotkeys-js": "^3.13.7",
+    "mitt": "^3.0.1",
     "react": "~18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "~18.2.0",