重新构建路由和配置样式文件

2025-03-26 10:04:27 +08:00
parent a42a9990bf
commit 97ccf5a077
141 changed files with 88034 additions and 179 deletions
@@ -0,0 +1,66 @@
+import { Link, useMatches } from '@remix-run/react';
+
+interface BreadcrumbItem {
+  title: string;
+  to?: string;
+}
+
+interface BreadcrumbProps {
+  items?: BreadcrumbItem[];
+  className?: string;
+}
+
+interface Handle {
+  breadcrumb: string | ((data: any) => string);
+}
+
+interface Match {
+  handle?: Handle;
+  pathname: string;
+  data: any;
+}
+
+export function Breadcrumb({ items = [], className = '' }: BreadcrumbProps) {
+  const matches = useMatches() as Match[];
+  const breadcrumbs = items.length > 0 ? items : matches
+    .filter(match => match.handle?.breadcrumb)
+    .map(match => ({
+      title: typeof match.handle?.breadcrumb === 'function' 
+        ? match.handle.breadcrumb(match.data)
+        : match.handle?.breadcrumb,
+      to: match.pathname
+    }));
+
+  if (breadcrumbs.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className={`mb-4 ${className}`} aria-label="面包屑导航">
+      <ol className="flex items-center space-x-2 text-sm text-gray-500">
+        <li>
+          <Link to="/" className="hover:text-primary-600 flex items-center">
+            <i className="ri-home-line mr-1" />
+            首页
+          </Link>
+        </li>
+        
+        {breadcrumbs.map((item, index) => (
+          <li key={index} className="flex items-center">
+            <i className="ri-arrow-right-s-line mx-1 text-gray-400" />
+            {index === breadcrumbs.length - 1 ? (
+              <span className="text-gray-900 font-medium">{item.title}</span>
+            ) : (
+              <Link 
+                to={item.to || '#'} 
+                className="hover:text-primary-600"
+              >
+                {item.title}
+              </Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}