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

2025-03-26 10:04:27 +08:00
parent a42a9990bf
commit 97ccf5a077
141 changed files with 88034 additions and 179 deletions
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Form } from '@remix-run/react';
+
+interface HeaderProps {
+  username: string;
+}
+
+export function Header({ username }: HeaderProps) {
+  return (
+    <header className="bg-white shadow-sm py-3 px-6 flex justify-between items-center">
+      <div className="flex items-center">
+        <div className="relative">
+          <input 
+            type="text" 
+            placeholder="搜索..." 
+            className="form-input pl-9 pr-3 py-1.5 w-64"
+          />
+          <i className="ri-search-line absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+        </div>
+      </div>
+      
+      <div className="flex items-center space-x-4">
+        <div className="relative">
+          <button className="flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100">
+            <i className="ri-notification-3-line text-xl text-gray-600"></i>
+            <span className="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-xs flex items-center justify-center rounded-full">3</span>
+          </button>
+        </div>
+        
+        <div className="relative group">
+          <button className="flex items-center space-x-2 focus:outline-none">
+            <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-medium">
+              {username.charAt(0)}
+            </div>
+            <span className="text-sm font-medium">{username}</span>
+            <i className="ri-arrow-down-s-line text-gray-400"></i>
+          </button>
+          
+          <div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white hidden group-hover:block z-10">
+            <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+              <i className="ri-user-line mr-2"></i> 个人资料
+            </a>
+            <a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+              <i className="ri-settings-3-line mr-2"></i> 账号设置
+            </a>
+            <Form action="/auth/logout" method="post">
+              <button 
+                type="submit" 
+                className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+              >
+                <i className="ri-logout-box-line mr-2"></i> 退出登录
+              </button>
+            </Form>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}