💄 style: 增加 hoverable 卡片样式

arvinxx · arvinxx · commit 946794e1bf3c · 2023-09-06T13:45:33.000+08:00
diff --git a/src/GridItem.tsx b/src/GridItem.tsx
@@ -1,5 +1,4 @@
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -11,14 +10,7 @@ const useStyles = createStyles(({ css, token, cx }) => {
     font-size: 16px;
   `;
   return {
-    container: css`
-      background: ${token.colorBgContainer};
-      border: 1px solid ${rgba(token.colorBorderSecondary, 0.5)};
-      border-radius: 8px;
-      :hover {
-        background: ${token.colorFillSecondary};
-      }
-    `,
+    container: css``,
     desc: css`
       color: ${token.colorTextTertiary};
     `,
@@ -46,13 +38,7 @@ const GridItem = memo<SearchItem>(({ content, date, link, favicon, title, source
 
   return (
     <a className={styles.link} href={link!} rel="noreferrer" target={'_blank'}>
-      <Flexbox
-        className={styles.container}
-        distribution={'space-between'}
-        flex={1}
-        gap={12}
-        padding={12}
-      >
+      <Flexbox distribution={'space-between'} flex={1} gap={12} padding={12}>
         <Flexbox>
           <Flexbox>
             <Flexbox className={styles.title}>{title}</Flexbox>
diff --git a/src/HoverCard/Item.tsx b/src/HoverCard/Item.tsx
@@ -0,0 +1,77 @@
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => {
+  const borderRadius = 12;
+  return {
+    container: css`
+      background: ${rgba(token.colorBorderSecondary, 0.5)};
+      border-radius: ${borderRadius}px;
+      cursor: pointer;
+      display: flex;
+      width: 100%;
+
+      flex-direction: column;
+      position: relative;
+
+      &::before,
+      &::after {
+        border-radius: inherit;
+        content: '';
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        transition: opacity 500ms;
+        width: 100%;
+      }
+
+      &::before {
+        user-select: none;
+        pointer-events: none;
+        background: radial-gradient(
+          800px circle at var(--mouse-x) var(--mouse-y),
+          ${rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02)},
+          transparent 40%
+        );
+        z-index: 3;
+      }
+
+      &::after {
+        background: radial-gradient(
+          600px circle at var(--mouse-x) var(--mouse-y),
+          ${rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2)},
+          transparent 40%
+        );
+        z-index: 1;
+      }
+
+      :hover::before {
+        opacity: 1;
+      }
+    `,
+    content: css`
+      background: ${token.colorBgContainer};
+      height: 100%;
+      flex-grow: 1;
+      border-radius: ${borderRadius - 1}px;
+      margin: 1px;
+      z-index: 2;
+    `,
+  };
+});
+
+const HoverCard = memo<{ children: ReactNode; className: string }>(({ children, className }) => {
+  const { styles, cx } = useStyles();
+
+  return (
+    <div className={cx(className, styles.container)}>
+      <Flexbox className={styles.content}>{children}</Flexbox>
+    </div>
+  );
+});
+
+export default HoverCard;
diff --git a/src/HoverCard/index.tsx b/src/HoverCard/index.tsx
@@ -0,0 +1,72 @@
+import { createStyles } from 'antd-style';
+import { ReactNode, memo, useEffect, useRef } from 'react';
+
+import Item from './Item';
+
+const childrenClassName = 'hover-card';
+
+const useStyles = createStyles(({ css, responsive }) => ({
+  container: css`
+    overflow: scroll;
+    max-height: 370px;
+
+    &:hover > .${childrenClassName}::after {
+      opacity: 1;
+    }
+  `,
+
+  grid: css`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+
+    ${responsive.mobile} {
+      display: flex;
+      flex-direction: column;
+    }
+  `,
+}));
+
+interface HoverCardProps<T = any> {
+  items: T[];
+  renderItem: (item: T) => ReactNode;
+}
+
+const HoverCard = memo<HoverCardProps>(({ items, renderItem }) => {
+  const { styles, cx } = useStyles();
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const fn = (e: MouseEvent) => {
+      // @ts-ignore
+      for (const card of document.querySelectorAll(`.${childrenClassName}`)) {
+        const rect = card.getBoundingClientRect(),
+          x = e.clientX - rect.left,
+          y = e.clientY - rect.top;
+
+        card.style.setProperty('--mouse-x', `${x}px`);
+        card.style.setProperty('--mouse-y', `${y}px`);
+      }
+    };
+    ref.current.addEventListener('mousemove', fn);
+
+    return () => {
+      ref.current?.removeEventListener('mousemove', fn);
+    };
+  }, []);
+  return (
+    <div className={cx(styles.container, styles.grid)} ref={ref}>
+      {items.map((item, index) => {
+        const children = renderItem(item);
+        return (
+          <Item className={childrenClassName} key={index}>
+            {children}
+          </Item>
+        );
+      })}
+    </div>
+  );
+});
+
+export default HoverCard;
diff --git a/src/ListItem.tsx b/src/ListItem.tsx
diff --git a/src/Render.tsx b/src/Render.tsx
@@ -1,42 +1,14 @@
 import { PluginRenderProps } from '@lobehub/chat-plugin-sdk';
-import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import GridItem from './GridItem';
+import HoverCard from './HoverCard';
 import { Result } from './type';
 
-const useStyles = createStyles(({ css, responsive }) => {
-  return {
-    container: css`
-      overflow: scroll;
-      max-height: 370px;
-    `,
-    grid: css`
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      gap: 12px;
-
-      ${responsive.mobile} {
-        display: flex;
-        flex-direction: column;
-      }
-    `,
-  };
-});
+const render = (item: any) => <GridItem {...item} />;
 
 const Render = memo<PluginRenderProps<Result>>(({ content }) => {
-  const { styles, cx } = useStyles();
-
-  return (
-    <Flexbox gap={8}>
-      <div className={cx(styles.container, styles.grid)}>
-        {content.map((item) => (
-          <GridItem {...item} key={item.link} />
-        ))}
-      </div>
-    </Flexbox>
-  );
+  return <HoverCard items={content} renderItem={render} />;
 });
 
 export default Render;
