Chore: 更新框架到 React Router 7

修复迁移到 Tailwind 4 之后的样式差异
修复 404 页面的异常并调整样式
优化分页器组件的无障碍化，Span 标签替换成 Button

app/components/biz/gallery/image-box/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useImperativeHandle, forwardRef, Ref } from 'react';
+import React, { useState, useRef, useImperativeHandle, forwardRef, type Ref } from "react";
 import { createPortal } from 'react-dom';
 import { clsn } from '~/utils';
 

app/components/common/article/article.module.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .article {
   line-height: 1.7;
 
@@ -36,7 +38,8 @@
       height: 4px;
       display: block;
       border-radius: 4px;
-      background-color: rgb(244 114 182 / var(--tw-text-opacity));
+
+      @apply bg-pink-400;
     }
   }
 
@@ -50,7 +53,7 @@
   }
 
   a {
-    color:rgb(244 114 182 / var(--tw-bg-opacity));
+    @apply text-pink-400;
   }
 
   img {
@@ -77,7 +80,7 @@
     font-size: smaller;
     padding: .15rem .5rem;
     border-radius: .75rem;
-    background-color: rgb(165 243 252);
+    @apply bg-cyan-200;
   }
 
   ul {
@@ -86,7 +89,7 @@
     margin-left: 1.25rem;
 
     ::marker {
-      color: rgb(244 114 182 / var(--tw-bg-opacity));
+      @apply text-pink-400;
     }
   }
 }

app/components/common/article/index.tsx

@@ -1,5 +1,5 @@
 import { clsn } from "~/utils";
-import styles from "./article.module.less";
+import styles from "./article.module.css";
 
 interface ArticleProps {
   className?: string;

app/components/layout/header.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 
 const navItems = [
   { name: "首页", to: "/" },

app/components/layout/spinner.tsx

@@ -1,4 +1,4 @@
-import { useNavigation } from "@remix-run/react";
+import { useNavigation } from "react-router";
 
 export default function SpinnerBar() {
   const navigation = useNavigation();

app/components/ui/icons.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 type IconProps = SVGProps<SVGSVGElement>;
 

app/components/ui/pagination.tsx

@@ -55,16 +55,16 @@ function Pagination({ current = 3, total, size, onClick }: PaginationProps) {
         }
 
         return (
-          <span
+          <button
             key={index}
             className={clsn(
-              "inline-block w-10 h-10 leading-[2] md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
+              "inline-block w-10 h-10 leading-loose md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
               current === item ? "bg-cyan-200 border-b-cyan-300 text-white font-bold" : "bg-white border-b-cyan-200"
             )}
             onClick={() => onClick(item)}
           >
             {item}
-          </span>
+          </button>
         );
       })}
     </div>