feat: 优化页面

package.json

@@ -69,6 +69,7 @@
     "react-dom": "latest",
     "react-error-boundary": "^4.0.13",
     "react-quill": "^2.0.0",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.21.2",
     "standard-version": "^9.5.0",
     "styled-components": "^6.1.13",

packages/editor/src/components/Searchbar/SearchBar.tsx

@@ -7,7 +7,7 @@ const SearchBar = memo((props: any) => {
   const { form, from, submit, refresh, onCreate } = props;
   const options = [
     { label: '我的', value: 1 },
-    { label: '他的', value: 2 },
+    { label: '市场', value: 2 },
   ];
 
   return (

packages/editor/src/layout/components/Header/index.module.less

@@ -9,10 +9,6 @@
   padding: 0 20px;
   font-size: 14px;
 }
-.homeHeader {
-  &:extend(.header);
-  box-shadow: 0 4px 6px #0000000d;
-}
 .layoutHeader {
   &:extend(.header);
   border-bottom: 1px solid @border-color;

packages/editor/src/layout/components/Header/index.tsx

@@ -207,15 +207,15 @@ const Header = memo(() => {
 
   return (
     <>
-      <Layout.Header className={isNav ? styles.homeHeader : styles.layoutHeader}>
+      <Layout.Header className={styles.layoutHeader}>
         <div className={styles.logo} onClick={goHome}>
           <img src="https://marsview.cdn.bcebos.com/mars-logo.png" width={42} />
           <span>Marsview</span>
         </div>
         {/* 首页 - 导航菜单 */}
         {isNav && (
           <div className={styles.menu}>
-            <Menu onClick={handleTab} selectedKeys={navKey} mode="horizontal" items={items} style={{ width: items.length * 110 }} />
+            <Menu onClick={handleTab} selectedKeys={navKey} mode="horizontal" items={items} />
           </div>
         )}
 
@@ -276,7 +276,7 @@ const Header = memo(() => {
             </Button>
           )}
           <Tooltip title="使用文档">
-            <QuestionCircleOutlined onClick={() => window.open('http://docs.marsview.cc', '_blank')} />
+            <QuestionCircleOutlined onClick={() => window.open('http://docs.marsview.cc', '_blank')} style={{ fontSize: 20 }} />
           </Tooltip>
           {/* 用户头像 */}
           <div className={styles.avatar}>

packages/editor/src/pages/home/PageList.tsx

@@ -11,8 +11,9 @@ import {
   ClockCircleOutlined,
   PlusOutlined,
 } from '@ant-design/icons';
-import { Button, Col, Empty, Form, Image, Layout, Pagination, Row, Spin, Tag, Tooltip } from 'antd';
+import { Button, Empty, Form, Image, Layout, Pagination, Spin, Tag, Tooltip } from 'antd';
 import dayjs from 'dayjs';
+import { useMediaQuery } from 'react-responsive';
 import { getPageList, copyPageData, delPageData } from '@/api';
 import { PageItem } from '@/api/types';
 import { message, Modal } from '@/utils/AntdGlobal';
@@ -36,6 +37,9 @@ export default function Index() {
   const createPageRef = useRef<{ open: () => void }>();
   const navigate = useNavigate();
 
+  // 判断是否是超大屏
+  const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' });
+
   useEffect(() => {
     getList(current, pageSize);
   }, [current, pageSize]);
@@ -173,7 +177,13 @@ export default function Index() {
           <>
             <div className={styles.pagesContent}>
               <Spin spinning={loading} size="large" tip="加载中...">
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: 20 }}>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(auto-fill, minmax(${isXLarge ? 400 : 300}px, 1fr))`,
+                    gap: isXLarge ? 30 : 20,
+                  }}
+                >
                   {content.map((item: PageItem, index: number) => {
                     return <SectionItem item={item} key={item.id || item.user_name + index} />;
                   })}

packages/editor/src/pages/home/ProjectList.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Card, Col, Layout, Row, Pagination, Spin, Empty, Button, Form, Tooltip, Image } from 'antd';
 import { UserOutlined, DeleteOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
+import { useMediaQuery } from 'react-responsive';
 import { getProjectList, delProject } from '@/api';
 import { Project } from '@/api/types';
 import { Modal, message } from '@/utils/AntdGlobal';
@@ -24,6 +25,10 @@ export default function Index() {
   const [pageSize, setPageSize] = useState<number>(12);
   const createRef = useRef<{ open: () => void }>();
 
+  // 判断是否是超大屏
+  const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' });
+
+
   useEffect(() => {
     getList(current, pageSize);
   }, [current, pageSize]);
@@ -72,7 +77,8 @@ export default function Index() {
           <>
             <div className={styles.projectList}>
               <Spin spinning={loading} size="large" tip="加载中...">
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: 20 }}>
+                <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fill, minmax(${isXLarge ? 400 : 300}px, 1fr))`,
+                    gap: isXLarge ? 30 : 20, }}>
                   {projectList.map((item: Project.ProjectItem, index) => {
                     return <CardItem item={item} isAuth={item.id ? true : false} getList={getList} key={item.id || item.user_name + index} />;
                   })}

packages/editor/src/pages/home/Template.tsx

@@ -9,8 +9,9 @@ import {
   ExclamationCircleOutlined,
   ClockCircleOutlined,
 } from '@ant-design/icons';
-import { Input, Col, Form, Image, Layout, Pagination, Row, Spin, Tag, Tooltip } from 'antd';
+import { Input, Image, Layout, Pagination, Spin, Tag, Tooltip } from 'antd';
 import dayjs from 'dayjs';
+import { useMediaQuery } from 'react-responsive';
 import { getPageTemplateList, copyPageData } from '@/api';
 import { PageItem } from '@/api/types';
 import { message } from '@/utils/AntdGlobal';
@@ -31,6 +32,9 @@ export default function Index() {
   const [keyword, setKeyword] = useState<string>('');
   const navigate = useNavigate();
 
+  // 判断是否是超大屏
+  const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' });
+
   useEffect(() => {
     getList(current, pageSize);
   }, [current, pageSize]);
@@ -135,7 +139,13 @@ export default function Index() {
           <>
             <div className={styles.pagesContent}>
               <Spin spinning={loading} size="large">
-                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))', gap: 20 }}>
+                <div
+                  style={{
+                    display: 'grid',
+                    gridTemplateColumns: `repeat(auto-fill, minmax(${isXLarge ? 400 : 300}px, 1fr))`,
+                    gap: isXLarge ? 30 : 20,
+                  }}
+                >
                   {content.map((item: PageItem) => {
                     return <SectionItem item={item} key={item.id} />;
                   })}