feat: border

src/components/ShineBorder/index.tsx

@@ -8,6 +8,7 @@ interface ShineBorderProps {
   borderWidth?: number
   duration?: number
   className?: string
+  innerClassName?: string
   children: React.ReactNode
 }
 
@@ -26,9 +27,10 @@ export default function ShineBorder({
   borderWidth = 1,
   duration = 14,
   className,
+  innerClassName,
   children,
 }: ShineBorderProps) {
-  const color = ['#B4F4FF', '#CBC2FF', '#29B6FD']
+  const color = ['#B4F4FF', '#CBC2FF', '#BFE9FE']
   const [isIn, setIsIn] = useState(false)
   return (
     <div
@@ -40,7 +42,7 @@ export default function ShineBorder({
         } as React.CSSProperties
       }
       className={cn(
-        'relative grid min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-black dark:text-white',
+        'relative',
         className,
       )}
     >
@@ -59,7 +61,9 @@ export default function ShineBorder({
         className={`before:bg-shine-size before:absolute before:inset-0 before:aspect-square before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-[shine-pulse_var(--shine-pulse-duration)_infinite_linear]`}
       >
       </div>
-      {children}
+      <div className={`relative z-1 w-full h-full ${innerClassName}`}>
+        {children}
+      </div>
     </div>
   )
 }

src/pages/Collect/Collect.tsx

@@ -16,6 +16,7 @@ import { MarkdownDetail } from '@/components/MarkdownDetail'
 import AIcon from '@/assets/svg/aicon.svg?react'
 import QIcon from '@/assets/svg/qicon.svg?react'
 import EmptyIcon from '@/assets/svg/empty.svg?react'
+import ShineBorder from '@/components/ShineBorder'
 
 export const Collect: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -104,7 +105,12 @@ export const Collect: React.FC = () => {
                   >
                     {
                       collectList.map((item: any, index: number) => (
-                        <div className="text-[#27353C] w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" key={`${item.collectionId}_${index}`}>
+
+                        <ShineBorder
+                          borderRadius={20}
+                          className="text-[#27353C] w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]"
+                          key={`${item.collectionId}_${index}`}
+                        >
                           <div className="flex mb-[20px]">
                             <div className="mr-[20px]"><QIcon /></div>
                             <div className="font-bold text-[16px]">{item.question}</div>
@@ -133,7 +139,7 @@ export const Collect: React.FC = () => {
                               </div>
                             </div>
                           </div>
-                        </div>
+                        </ShineBorder>
                       ))
                     }
                   </motion.div>

src/pages/Tools/Tools.tsx

@@ -63,10 +63,11 @@ export const Tools: React.FC = () => {
                     <div className="max-w-[1000px] flex mx-auto mt-[64px] text-18px text-[#5AA9D0] font-light">全部工具</div>
                     <div className="max-w-[1000px] mx-auto gap-[20px] flex flex-col flex-wrap  mt-[22px] sm:flex-row">
                       {tools.map((item, index) => (
-                        <motion.div key={index} onClick={handleClickToolItem} {...getAnimationProps(index + 1)}>
+                        <motion.div className="flex-1" key={index} onClick={handleClickToolItem} {...getAnimationProps(index + 1)}>
                           <ShineBorder
                             borderRadius={20}
-                            className="rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px] flex items-center cursor-pointer"
+                            className="rounded-[20px] bg-[#fff] flex-1 h-[100px] p-[24px] cursor-pointer"
+                            innerClassName="flex items-center"
                           >
                             <img className="w-[52px]" src={item.icon} alt="" />
                             <div className="ml-[20px]">