feat: 初始化list页面布局

Author: coderz-w

src/app/(app)/list/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React from 'react';
+import { m } from 'framer-motion';
+
+import { NormalContainer } from '@/components/layout/container/Normal';
+import { PostItem } from '@/components/modules/list/PostItem';
+
+// 假数据
+const mockData = [
+  { id: 1, title: '文章标题 1', content: '这是文章内容 1' },
+  { id: 2, title: '文章标题 2', content: '这是文章内容 2' },
+  { id: 3, title: '文章标题 3', content: '这是文章内容 3' },
+  { id: 12, title: '文章标题 1', content: '这是文章内容 1' },
+  { id: 22, title: '文章标题 2', content: '这是文章内容 2' },
+  { id: 32, title: '文章标题 3', content: '这是文章内容 3' },
+
+  // 更多假数据
+];
+
+const ArticleList: React.FC = () => {
+  return (
+    <NormalContainer>
+      <ul>
+        {mockData.map((item, index) => (
+          <m.li
+            initial={{ y: 50, opacity: 0.01 }}
+            animate={{
+              y: 0,
+              opacity: 1,
+              transition: {
+                delay: index * 0.1,
+                type: 'spring',
+                damping: 10,
+                stiffness: 100,
+              },
+            }}
+            key={item.id}
+          >
+            <PostItem data={item} />
+          </m.li>
+        ))}
+      </ul>
+    </NormalContainer>
+  );
+};
+
+export default ArticleList;

src/components/icons/fa-hash.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+
+export function FeHash(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10 15h4V9h-4v6Zm0 2v3a1 1 0 0 1-2 0v-3H5a1 1 0 0 1 0-2h3V9H5a1 1 0 1 1 0-2h3V4a1 1 0 1 1 2 0v3h4V4a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2h-3v6h3a1 1 0 0 1 0 2h-3v3a1 1 0 0 1-2 0v-3h-4Z"
+      />
+    </svg>
+  );
+}

src/components/layout/Footer/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = () => {
   return (
     <footer
       data-hide-print
-      className="relative z-[1] h-28 mt-32 pb-6 border-t border-x-uk-separator-opaque-light py-6 text-base-content/80 dark:border-white/10"
+      className="relative z-[1] h-28 mt-44 pb-6 border-t border-x-uk-separator-opaque-light py-6 text-base-content/80 dark:border-white/10"
     >
       <div className="px-4 sm:px-8 h-full">
         <div className="relative mx-auto max-w-7xl lg:px-8 h-full flex flex-row items-center justify-around">

src/components/layout/Header/HeaderCenterContent.tsx

@@ -8,14 +8,10 @@ import Link from 'next/link';
 import { MenuPopover } from './MenuPopover';
 
 import {
-  FaSolidCircleNotch,
   FaSolidComments,
   FaSolidDotCircle,
   FaSolidFeatherAlt,
-  FaSolidHistory,
   FaSolidUserFriends,
-  IcTwotoneSignpost,
-  IonBook,
   MdiFlask,
 } from '@/components/icons/menu-collection';
 import { cn } from '@/lib/helper';
@@ -186,56 +182,23 @@ const headerMenuConfig: IHeaderMenu[] = [
   },
   {
     title: '文稿',
-    path: '/posts',
-    type: 'Post',
-    subMenu: [],
-    icon: React.createElement(IcTwotoneSignpost),
-  },
-  {
-    title: '手记',
     type: 'Note',
-    path: '/notes',
+    path: '/list',
     icon: React.createElement(FaSolidFeatherAlt),
   },
-
-  {
-    title: '时光',
-    icon: React.createElement(FaSolidHistory),
-    path: '/timeline',
-    subMenu: [
-      {
-        title: '手记',
-        icon: React.createElement(FaSolidFeatherAlt),
-        path: '/timeline?type=note',
-      },
-      {
-        title: '文稿',
-        icon: React.createElement(IonBook),
-        path: '/timeline?type=post',
-      },
-    ],
-  },
   {
     title: '友链',
     icon: React.createElement(FaSolidUserFriends),
     path: '/friends',
   },
-
   {
-    title: '更多',
-    icon: React.createElement(FaSolidCircleNotch),
-    path: '#',
-    subMenu: [
-      {
-        title: '项目',
-        icon: React.createElement(MdiFlask),
-        path: '/projects',
-      },
-      {
-        title: '自述',
-        path: '/about',
-        icon: React.createElement(FaSolidComments),
-      },
-    ],
+    title: '项目',
+    icon: React.createElement(MdiFlask),
+    path: '/projects',
+  },
+  {
+    title: '自述',
+    path: '/about',
+    icon: React.createElement(FaSolidComments),
   },
 ];

src/components/modules/list/PostItem.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+import { memo } from 'react';
+
+import { PostItemHoverOverlay } from './PostItemHoverOverlay';
+
+import { MdiClockOutline } from '@/components/icons/clock';
+import { FeHash } from '@/components/icons/fa-hash';
+
+export const PostItem = memo<{ data: any }>(function PostItem({ data }) {
+  const categorySlug = data.category?.slug;
+  const postLink = `/posts/${categorySlug}/${data.slug}`;
+
+  return (
+    <Link href={postLink} className="relative flex flex-col py-8 focus-visible:!shadow-none">
+      <PostItemHoverOverlay />
+      <h2 className="relative text-balance break-words text-2xl font-medium">{data.title}</h2>
+
+      <div className="post-meta-bar mt-2 flex select-none flex-wrap items-center justify-start gap-8 text-base-content/60">
+        <span className=" flex min-w-0 items-center space-x-1 text-sm">
+          <MdiClockOutline />
+          <p>2024 年 6 月 4 日 星期二</p>
+        </span>
+        <span className="flex min-w-0 items-center space-x-1 text-sm">
+          <FeHash className="translate-y-[0.5px]" />
+          <p>技术/react</p>
+        </span>
+      </div>
+    </Link>
+  );
+});

src/components/modules/list/PostItemHoverOverlay.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import clsx from 'clsx';
+import { AnimatePresence, m } from 'framer-motion';
+import { useEffect, useRef, useState } from 'react';
+
+export const PostItemHoverOverlay = () => {
+  const [mouseEnter, setMouseEnter] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const $ref = ref.current;
+    if (!$ref) return;
+
+    const $parent = $ref.parentElement;
+
+    if (!$parent) return;
+
+    $parent.onfocus = () => {
+      setMouseEnter(true);
+    };
+
+    $parent.onblur = () => {
+      setMouseEnter(false);
+    };
+
+    return () => {
+      $parent.onfocus = null;
+      $parent.onblur = null;
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={ref}
+        className="absolute inset-0 z-10"
+        onMouseEnter={() => {
+          setMouseEnter(true);
+        }}
+        onMouseLeave={() => {
+          setMouseEnter(false);
+        }}
+      />
+
+      <AnimatePresence>
+        {mouseEnter && (
+          <m.div
+            layout
+            initial={{
+              opacity: 0.2,
+              scale: 0.95,
+            }}
+            animate={{
+              opacity: 1,
+              scale: 1,
+            }}
+            exit={{
+              opacity: 0,
+              scale: 0.95,
+            }}
+            layoutId="post-item-hover-overlay"
+            className={clsx(
+              'absolute z-[-1] rounded-xl',
+              'bg-accent/10 dark:bg-neutral-800',
+              'inset-y-4 -left-4 -right-6',
+            )}
+          />
+        )}
+      </AnimatePresence>
+    </>
+  );
+};