chore: test modal

src/components/SearchModal/index.module.css

@@ -0,0 +1,6 @@
+.badge {
+  width: max-content;
+  color: rgb(103, 114, 138) !important;
+  background-color: transparent !important;
+  border: 1px solid rgba(17, 27, 43, 0.05) !important;
+}

src/components/SearchModal/index.tsx

@@ -1,13 +1,15 @@
-import { Modal } from "@contentful/f36-components";
+import { Modal, Badge, Flex, Box, Button } from "@contentful/f36-components";
+import { ArrowLeftIcon } from "@contentful/f36-icons";
+
 import { useState } from "react";
 import styles from "./index.module.css";
 
 interface SearchModalProps {
-  isOpen: boolean;
+  isShown: boolean;
   onClose: () => void;
 }
 
-export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
+export default function SearchModal({ isShown, onClose }: SearchModalProps) {
   const [searchQuery, setSearchQuery] = useState("");
 
   const handleClose = () => {
@@ -17,13 +19,30 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
 
   return (
     <Modal
-      isShown={isOpen}
+      isShown={isShown}
       onClose={handleClose}
       className={styles.modal}
+      position="top"
     >
-      <div className={styles.search_wrap}>
-        {searchQuery}
-      </div>
+      {() => (
+        <>
+          <Modal.Content>
+            <Flex flexDirection="column">
+              <Box>
+                <Flex flexDirection="column">
+                  <Badge className={styles.badge}>搜索</Badge>
+                  <Flex flexDirection="row">
+                    <Button aria-label="转到上一页" size='small'>
+                      <ArrowLeftIcon />
+                    </Button>
+                  </Flex>
+                </Flex>
+              </Box>
+              <Box></Box>
+            </Flex>
+          </Modal.Content>
+        </>
+      )}
     </Modal>
   );
 }

src/layouts/Header/index.tsx

@@ -13,14 +13,13 @@ import { navigateToJeecgByKey } from "@/utils/jeecgNavigation";
 
 import type { JeecgMenu } from "@/types/menu";
 
-
 export default function Header() {
   const { menus, loading } = useAuth();
   const { activeFirstMenu, setActiveFirstMenu, setActiveSecondMenu } =
     useMenu();
   const navigate = useNavigate();
   const location = useLocation();
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isShown, setShown] = useState(false);
 
   const blackList = ["dashboard-analysis", "isystem"];
 
@@ -165,7 +164,7 @@ export default function Header() {
       <Navbar.Item
         label="快速搜索"
         icon={<MagnifyingGlassIcon />}
-        onClick={() => setIsSearchOpen(true)}
+        onClick={() => setShown(true)}
       />
       <Navbar.Item label="帮助菜单" icon={<QuestionIcon />}>
         <Navbar.MenuItem
@@ -193,7 +192,10 @@ export default function Header() {
       </Navbar.Item>
       <Navbar.Item label="设置菜单" icon={<GearSixIcon />}>
         <Navbar.MenuSectionTitle>通用</Navbar.MenuSectionTitle>
-        <Navbar.MenuItem title="菜单设置" onClick={() => navigateToJeecgByKey('menu')}/>
+        <Navbar.MenuItem
+          title="菜单设置"
+          onClick={() => navigateToJeecgByKey("menu")}
+        />
         <Navbar.MenuItem title="用户管理" />
         <Navbar.MenuItem title="角色管理" />
         <Navbar.MenuSectionTitle>空间</Navbar.MenuSectionTitle>
@@ -241,10 +243,7 @@ export default function Header() {
       />
 
       {/* 搜索对话框 */}
-      <SearchModal
-        isOpen={isSearchOpen}
-        onClose={() => setIsSearchOpen(false)}
-      />
+      <SearchModal isShown={isShown} onClose={() => setShown(false)} />
     </>
   );
 }