Merge branch 'dev/layout' into deployment/rust

src/app/Actions.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Actions: React.FC = () => {
+  return <div>Actions</div>;
+};
+
+export default Actions;

src/app/AuthLayout.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Outlet } from "react-router-dom";
-import { Link } from "react-router-dom";
-import LanguageSwitcher from "@/components/Common/LanguageSwitcher";
-import { useTranslation } from "react-i18next";
+// import { Link } from "react-router-dom";
+// import LanguageSwitcher from "@/components/Common/LanguageSwitcher";
+// import { useTranslation } from "react-i18next";
 
 const AuthLayout: React.FC = () => {
-  const { t } = useTranslation("Auth");
+  // const { t } = useTranslation("Auth");
   return (
     // bg-gradient-to-br
     <div className="relative min-h-screen flex items-center justify-center  from-black via-primary-dark to-background p-4">

src/app/Group.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Group: React.FC = () => {
+  return <div>Group</div>;
+};
+
+export default Group;

src/app/Layout.tsx

@@ -1,20 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import Sidebar from "@/components/Common/Sidebar";
-import Header from "@/components/Common/Header";
-import Footer from "@/components/Common/Footer";
 import { Outlet } from "react-router-dom";
 import useAuth from "../store/useUsers.tsx";
+import Header from "@/components/layout/Header.tsx";
 
 const Layout: React.FC = () => {
-  const [isCollapsed, setIsCollapsed] = useState(false);
   const navigate = useNavigate();
   const { user, init } = useAuth();
 
-  const toggleSidebar = () => {
-    setIsCollapsed(!isCollapsed);
-  };
-
   useEffect(() => {
     const checkAuthStatus = async () => {
       await init();
@@ -26,16 +19,14 @@ const Layout: React.FC = () => {
   }, [init, user, navigate]);
 
   return (
-    <div className="flex w-screen h-screen bg-background dark:bg-background-darkmode">
-      <Sidebar isCollapsed={isCollapsed} onToggle={toggleSidebar} />
-      <div className="flex flex-col flex-1 h-full">
+    <>
+      <div className="flex flex-col h-screen">
         <Header />
-        <main className="flex-1 p-5 bg-white dark:bg-gray-800">
+        <div className="w-full flex flex-grow items-center justify-center">
           <Outlet />
-        </main>
-        <Footer />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/app/Repositories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const Repositories: React.FC = () => {
+  return (
+    <div className="w-full flex h-full p-3 pt-0">
+      <div className="w-1/4 min-w-40 bg-gray-200 p-4 h-full">
+        <h2 className="text-lg font-bold">Left Sidebar</h2>
+      </div>
+
+      <div className="flex flex-col w-full h-full">
+        <div className="h-8 text-lg text-center  border rounded-sm ml-3">
+          action
+        </div>
+        <div className="w-full h-1/4 flex space-x-4 my-2 pl-3">
+          <div className="flex-1 bg-white border rounded-sm p-4">
+            <h2 className="text-lg font-bold">Card 1</h2>
+          </div>
+          <div className="flex-1 bg-white border rounded-sm p-4">
+            <h2 className="text-lg font-bold">Card 2</h2>
+          </div>
+          <div className="flex-1 bg-white border rounded-sm p-4">
+            <h2 className="text-lg font-bold">Card 3</h2>
+          </div>
+        </div>
+
+        <div className="w-full h-3/4 flex pl-3">
+          <div className="flex-grow bg-gray-100 p-3">
+            <h2 className="text-lg font-bold">Left Box</h2>
+          </div>
+          <div className="w-1/4 min-w-40 bg-white p-4 border-l hidden sm:hidden md:block lg:block">
+            <h2 className="text-lg font-bold">Right Box</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Repositories;

src/components/layout/Header.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from "react";
+import { FaPlus, FaChevronDown } from "react-icons/fa";
+import { BsSearch } from "react-icons/bs";
+import { Link } from "react-router-dom";
+import { LuMenu } from "react-icons/lu";
+import LeftMenu from "./LeftMenu"; // 引入 LeftMenu 组件
+import RightMenu from "./RightMenu"; // 引入 RightMenu 组件
+
+const Header: React.FC = () => {
+  const [isMenuOpen, setLeftMenuOpen] = useState(false);
+  const [isRightMenuOpen, setIsRightMenuOpen] = useState(false); // 用来控制右侧菜单的显示
+
+  return (
+    <>
+      <header className="w-full p-3 flex justify-between items-center h-12 md:h-12 lg:h-14">
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => {
+              setLeftMenuOpen(true);
+            }}
+            className="bg-white border border-gray-300 p-1 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none"
+          >
+            <LuMenu className="text-xl" />
+          </button>
+          <div className="flex items-center">
+            <Link
+              to="/Repositories"
+              className="bg-white border border-gray-300 rounded-l-sm px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none"
+            >
+              Repositories
+            </Link>
+            <Link
+              to="/Actions"
+              className="bg-white border-t border-b border-gray-300 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none"
+            >
+              Actions
+            </Link>
+            <Link
+              to="/Group"
+              className="bg-white border border-gray-300 rounded-r-sm px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none"
+            >
+              Group
+            </Link>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center border border-gray-300 rounded-sm p-1 md:px-3 md:py-1 bg-white shadow-sm">
+            <input
+              type="text"
+              placeholder="Search..."
+              className="flex-grow text-sm text-gray-700 placeholder-gray-500 focus:outline-none  hidden sm:hidden md:block lg:block"
+            />
+            <button className="p-0.5 md:p-1 text-gray-500 hover:text-gray-700">
+              <BsSearch className="text-md" />
+            </button>
+          </div>
+          <div className="flex items-center hidden sm:hidden md:block lg:block">
+            <button className="bg-white border border-gray-300 rounded-l-sm p-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none">
+              <FaPlus className="text-gray-700" />
+            </button>
+            <button className="bg-white border border-l-0 border-gray-300 rounded-r-sm p-2 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none">
+              <FaChevronDown className="text-gray-700" />
+            </button>
+          </div>
+          <div
+            className="w-8 h-8 bg-gray-500 rounded-full flex items-center justify-center cursor-pointer"
+            onClick={() => setIsRightMenuOpen(true)}
+          >
+            <img
+              src="https://via.placeholder.com/40"
+              alt="User Avatar"
+              className="w-full h-full rounded-full object-cover"
+            />
+          </div>
+        </div>
+      </header>
+
+      <LeftMenu
+        isOpen={isMenuOpen}
+        closeSidebar={() => setLeftMenuOpen(false)}
+      />
+
+      <RightMenu
+        isOpen={isRightMenuOpen}
+        closeSidebar={() => setIsRightMenuOpen(false)}
+      />
+    </>
+  );
+};
+
+export default Header;

src/components/layout/LeftMenu.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Sidebar } from "primereact/sidebar";
+
+interface LeftMenuProps {
+  isOpen: boolean;
+  closeSidebar: () => void;
+}
+
+const LeftMenu: React.FC<LeftMenuProps> = ({ isOpen, closeSidebar }) => {
+  return (
+    <Sidebar
+      visible={isOpen}
+      onHide={closeSidebar}
+      position="left"
+      className="custom-sidebar"
+      showCloseIcon={true}
+    >
+      <div className="p-4">
+        <ul className="mt-4 space-y-4">
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              首页
+            </a>
+          </li>
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              通知
+            </a>
+          </li>
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              设置
+            </a>
+          </li>
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              帮助
+            </a>
+          </li>
+        </ul>
+      </div>
+    </Sidebar>
+  );
+};
+
+export default LeftMenu;

src/components/layout/RightMenu.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Sidebar } from "primereact/sidebar"; // 引入 PrimeReact 的 Sidebar 组件
+
+interface RightMenuProps {
+  isOpen: boolean;
+  closeSidebar: () => void;
+}
+
+const RightMenu: React.FC<RightMenuProps> = ({ isOpen, closeSidebar }) => {
+  return (
+    <Sidebar
+      visible={isOpen}
+      onHide={closeSidebar}
+      position="right"
+      className="custom-sidebar"
+      showCloseIcon={true}
+    >
+      <div className="p-4">
+        <ul className="mt-4 space-y-4">
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              我的账户
+            </a>
+          </li>
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              设置
+            </a>
+          </li>
+          <li>
+            <a href="#" className="text-md hover:text-blue-600">
+              退出
+            </a>
+          </li>
+        </ul>
+      </div>
+    </Sidebar>
+  );
+};
+
+export default RightMenu;