diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx index a96aa03f..0086704e 100644 --- a/packages/editor/src/components/Searchbar/SearchBar.tsx +++ b/packages/editor/src/components/Searchbar/SearchBar.tsx @@ -1,63 +1,51 @@ import { memo } from 'react'; -import { Button, Form, Input, Radio, Space, Segmented, Tooltip } from 'antd'; -import { PlusOutlined, RedoOutlined, BarsOutlined, AppstoreOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons'; -import styles from './index.module.less'; import { useLocation } from 'react-router-dom'; +import { Button, Form, Input, Space, Segmented, Tooltip } from 'antd'; +import { PlusOutlined, RedoOutlined, BarsOutlined, AppstoreOutlined, ArrowLeftOutlined } from '@ant-design/icons'; +import styles from './index.module.less'; -const SearchBar = memo((props: any) => { +const SearchBar = (props: any) => { const { pathname } = useLocation(); const { form, from, submit, refresh, onCreate } = props; - const options = [ - { label: '我的', value: 1 }, - { label: '市场', value: 2 }, - ]; return ( - <> -
-
-
- {props.showGroup === false ? null : ( - - - - )} - - - - - - - - - -
-
- - {pathname === '/projects' && ( - props.onViewChange(value)} - options={[ - { value: 'project', icon: }, - { value: 'list', icon: }, - ]} - /> - )} - {pathname === '/project/pages' && ( - - - - )} - - - +
+
+
+ + + + + + + + +
- + + {pathname === '/projects' && ( + props.onViewChange(value)} + options={[ + { value: 'project', icon: , label: '项目' }, + { value: 'page', icon: , label: '页面' }, + ]} + /> + )} + {pathname === '/project/pages' && ( + + + + )} + + + +
); -}); +}; -export default SearchBar; +export default memo(SearchBar); diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx index e31dbd74..1be75962 100644 --- a/packages/editor/src/layout/components/Header/index.tsx +++ b/packages/editor/src/layout/components/Header/index.tsx @@ -271,7 +271,7 @@ const Header = memo(() => { } > - diff --git a/packages/editor/src/pages/admin/config/index.tsx b/packages/editor/src/pages/admin/config/index.tsx index 30b65309..9c20ebd5 100644 --- a/packages/editor/src/pages/admin/config/index.tsx +++ b/packages/editor/src/pages/admin/config/index.tsx @@ -172,25 +172,28 @@ const Config: React.FC = memo(() => {
{type === 'detail' ? ( - + + + + ) : ( - {id !== '0' && ( - - )} + )}
diff --git a/packages/editor/src/pages/home/project/Category.tsx b/packages/editor/src/pages/home/project/Category.tsx deleted file mode 100644 index 0aba74e4..00000000 --- a/packages/editor/src/pages/home/project/Category.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useEffect, useRef, useState } from 'react'; -import { useSearchParams } from 'react-router-dom'; -import { Button, Empty, Form, Layout, Pagination, Spin } from 'antd'; -import { PlusOutlined } from '@ant-design/icons'; -import { useMediaQuery } from 'react-responsive'; -import { getPageList } from '@/api'; -import pageApi from '@/api/page'; -import CreatePage from '@/components/CreatePage'; -import SearchBar from '@/components/Searchbar/SearchBar'; -import PageCard from './components/PageCard'; -import ProjectCard from './components/ProjectCard'; -import styles2 from './page.module.less'; -import CreateProject from '@/components/CreateProject'; -import styles from './../index.module.less'; - -/** - * 页面列表 - */ - -export default function Index() { - const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [list, setList] = useState([]); - const [total, setTotal] = useState(0); - const [current, setCurrent] = useState(1); - const [pageSize, setPageSize] = useState(12); - const [type, setType] = useState('project'); - const [searchParams] = useSearchParams(); - const createProjectRef = useRef<{ open: () => void }>(); - const createPageRef = useRef<{ open: () => void }>(); - - // 判断是否是超大屏 - const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' }); - - useEffect(() => { - isXLarge ? setPageSize(15) : setPageSize(12); - getList(current, isXLarge ? 15 : 12); - }, [current, pageSize]); - - // 列表切换 - const handleViewChange = (value: string) => { - setType(value); - setCurrent(1); - setList([]); - getList(1, pageSize, value); - }; - - // 加载页面列表 - const getList = async (pageNum: number = current, size: number = pageSize, value: string = type) => { - setLoading(true); - try { - const { keyword } = form.getFieldsValue(); - const promise = value === 'project' ? pageApi.getCategoryList : getPageList; - const res = await promise({ - pageNum, - pageSize: size, - keyword, - projectId: Number(searchParams.get('projectId')), - }); - setTotal(res?.total || 0); - setList(res?.list || []); - setLoading(false); - } catch (error) { - setLoading(false); - } - }; - - // 切换页码和每页条数回调 - const handleChange = (_current: number, size: number) => { - setCurrent(_current); - setPageSize(size); - }; - - // 新建页面 - const handleCreate = () => { - if (type === 'project') { - createProjectRef.current?.open(); - } else { - createPageRef.current?.open(); - } - }; - - // 提交搜索 - const handleSearch = () => { - setCurrent(1); - getList(1, pageSize); - }; - - return ( - <> - - - - {/* 加载项目列表 */} - {type === 'project' ? ( -
- {list.map((project: any) => ( - - ))} -
- ) : null} - - {/* 加载页面列表 */} - {(total > 0 || loading) && type === 'list' ? ( - <> -
- - - -
- - ) : ( - !loading && - type === 'list' && ( - - - - ) - )} - - `总共 ${total} 条`} - align="end" - onChange={handleChange} - /> - - {/* 新建项目 */} - getList(1, pageSize)} /> - {/* 新建页面 */} - getList(1, pageSize)} /> - - - ); -} diff --git a/packages/editor/src/pages/home/project/Pages.tsx b/packages/editor/src/pages/home/project/Pages.tsx index ad82cb74..2e35632a 100644 --- a/packages/editor/src/pages/home/project/Pages.tsx +++ b/packages/editor/src/pages/home/project/Pages.tsx @@ -1,107 +1,72 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef } from 'react'; +import { Button, Empty, Form, Layout, Spin } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; -import { Button, Empty, Form, Layout, Pagination, Spin } from 'antd'; +import { useAntdTable } from 'ahooks'; import { getPageList } from '@/api'; -import pageApi from '@/api/page'; import CreatePage from '@/components/CreatePage'; import SearchBar from '@/components/Searchbar/SearchBar'; import PageCard from './components/PageCard'; -import ProjectCard from './components/ProjectCard'; import styles from './../index.module.less'; -import styles2 from './page.module.less'; -import { useParams, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; +import { useMediaQuery } from 'react-responsive'; /** - * 页面列表 + * 项目所属页面列表 */ - export default function Index() { const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [list, setList] = useState([]); - const [total, setTotal] = useState(0); - const [current, setCurrent] = useState(1); - const [pageSize, setPageSize] = useState(12); const createPageRef = useRef<{ open: () => void }>(); const [searchParams] = useSearchParams(); - useEffect(() => { - getList(current, pageSize); - }, [current, pageSize]); + // 判断是否是超大屏 + const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' }); - // 加载页面列表 - const getList = async (pageNum: number = current, size: number = pageSize) => { - setLoading(true); - try { - const { keyword } = form.getFieldsValue(); - const res = await getPageList({ - pageNum, - pageSize: size, - keyword, - projectId: Number(searchParams.get('projectId')), - }); - setTotal(res?.total || 0); - setList(res?.list || []); - setLoading(false); - } catch (error) { - setLoading(false); - } + // 获取列表数据 + const getTableData = ({ current, pageSize }: { current: number; pageSize: number }, { keyword }: { keyword: string }) => { + return getPageList({ + pageNum: current, + pageSize: pageSize, + keyword, + projectId: Number(searchParams.get('projectId')), + }).then((res) => { + return { + total: res.total, + list: res.list, + }; + }); }; - // 切换页码和每页条数回调 - const handleChange = (_current: number, size: number) => { - setCurrent(_current); - setPageSize(size); - }; + const { tableProps, loading, search } = useAntdTable(getTableData, { + form, + defaultPageSize: isXLarge ? 15 : 12, + }); // 新建页面 const handleCreate = () => { createPageRef.current?.open(); }; - // 提交搜索 - const handleSearch = () => { - setCurrent(1); - getList(1, pageSize); - }; - return ( <> - + - {/* 加载页面列表 */} - {total > 0 || loading ? ( - <> -
- - - -
- `总共 ${total} 条`} - align="end" - onChange={handleChange} - /> - - ) : ( - !loading && - total === 0 && ( - - - - ) - )} +
+ + {tableProps.dataSource.length > 0 ? ( + + ) : ( + + + + )} + +
{/* 新建页面 */} - getList(1, pageSize)} /> + ); diff --git a/packages/editor/src/pages/home/project/components/PageCard.tsx b/packages/editor/src/pages/home/project/components/PageCard.tsx index 54e74d66..13c70d49 100644 --- a/packages/editor/src/pages/home/project/components/PageCard.tsx +++ b/packages/editor/src/pages/home/project/components/PageCard.tsx @@ -10,7 +10,7 @@ import { PageItem } from '@/api/types'; import styles from './../../index.module.less'; // 页面列表项 -const PageCard = ({ list, getList }: { list: PageItem[]; getList: () => void }) => { +const PageCard = ({ list, refresh }: { list: PageItem[]; refresh: () => void }) => { const [showPreview, setShowPreview] = useState(false); const [previewUrl, setPreviewUrl] = useState(''); const navigate = useNavigate(); @@ -34,7 +34,7 @@ const PageCard = ({ list, getList }: { list: PageItem[]; getList: () => void }) id: params.id, }); message.success('复制成功'); - getList(); + refresh(); } if (type === 'delete') { Modal.confirm({ @@ -48,7 +48,7 @@ const PageCard = ({ list, getList }: { list: PageItem[]; getList: () => void }) id: params.id, }); message.success('删除成功'); - getList(); + refresh(); }, }); } @@ -58,7 +58,7 @@ const PageCard = ({ list, getList }: { list: PageItem[]; getList: () => void })
diff --git a/packages/editor/src/pages/home/project/components/ProjectCard.tsx b/packages/editor/src/pages/home/project/components/ProjectCard.tsx index fb649088..8afe7521 100644 --- a/packages/editor/src/pages/home/project/components/ProjectCard.tsx +++ b/packages/editor/src/pages/home/project/components/ProjectCard.tsx @@ -4,29 +4,31 @@ import { UserOutlined, GlobalOutlined, MoreOutlined, SettingOutlined, Deployment import type { MenuProps } from 'antd'; import { Project } from '@/api/types'; import styles from './../page.module.less'; +import { useState } from 'react'; const { Paragraph } = Typography; /** * 页面列表 */ -export default function Category({ project }: { project: Project.ProjectItem }) { +export default function Category({ list }: { list: Project.ProjectItem[] }) { + const [item, setItem] = useState({ id: 0 }); const navigate = useNavigate(); // 单击打开项目配置 const handleClick = () => { - navigate(`/project/${project.id}/config`); + navigate(`/project/${item.id}/config`); }; // 双击加载项目下属页面 - const handleDoubleClick = () => { - navigate(`/project/pages?projectId=${project.id}`); + const handleDoubleClick = (id: number) => { + navigate(`/project/pages?projectId=${id}`); }; // 打开对应环境 const handleVisitEnv = (e: React.MouseEvent, env: string) => { e.preventDefault(); e.stopPropagation(); - return window.open(`${import.meta.env.VITE_ADMIN_URL}/project/${project.id}?env=${env}`, '_blank'); + return window.open(`${import.meta.env.VITE_ADMIN_URL}/project/${item.id}?env=${env}`, '_blank'); }; // 卡片下拉项 @@ -58,34 +60,43 @@ export default function Category({ project }: { project: Project.ProjectItem }) // 项目列表 return ( -
-
-

- - {project.name} -

-
-
- {project.remark} -
- -

{project.userName}

-
-
- -

- {project.count} 个页面 -

-
-
- -
双击查看页面
- - - - - - +
+ {list.map((project) => { + return ( +
handleDoubleClick(project.id)}> + {/* 卡片头部 */} +
+

+ + {project.name} +

+
+ {/* 卡片内容 */} +
+ {project.remark} +
+ +

{project.userName}

+
+
+ +

+ {project.count} 个页面 +

+
+
+ {/* 卡片更多 */} + +
双击查看页面
+ + setItem(project)} /> + + + {/* 项目Logo */} + +
+ ); + })}
); } diff --git a/packages/editor/src/pages/home/project/index.tsx b/packages/editor/src/pages/home/project/index.tsx new file mode 100644 index 00000000..40807545 --- /dev/null +++ b/packages/editor/src/pages/home/project/index.tsx @@ -0,0 +1,132 @@ +import { memo, useRef, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { Button, Empty, Form, Layout, Pagination, Spin } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +import { useMediaQuery } from 'react-responsive'; +import { useAntdTable } from 'ahooks'; +import { getPageList } from '@/api'; +import pageApi from '@/api/page'; +import CreatePage from '@/components/CreatePage'; +import SearchBar from '@/components/Searchbar/SearchBar'; +import PageCard from './components/PageCard'; +import ProjectCard from './components/ProjectCard'; +import CreateProject from '@/components/CreateProject'; +import styles from './../index.module.less'; + +/** + * 页面列表 + */ + +function Category() { + const [form] = Form.useForm(); + const [type, setType] = useState('project'); + const [searchParams] = useSearchParams(); + const createProjectRef = useRef<{ open: () => void }>(); + const createPageRef = useRef<{ open: () => void }>(); + // 判断是否是超大屏 + const isXLarge = useMediaQuery({ query: '(min-width: 1920px)' }); + + // 获取列表数据 + const getTableData = ({ current, pageSize }: { current: number; pageSize: number }, { keyword }: { keyword: string }) => { + const promise = type === 'project' ? pageApi.getCategoryList : getPageList; + return promise({ + pageNum: current, + pageSize: pageSize, + keyword, + projectId: Number(searchParams.get('projectId')), + }).then((res) => { + return { + total: res.total, + list: res.list, + }; + }); + }; + + const { tableProps, loading, search } = useAntdTable(getTableData, { + form, + defaultPageSize: isXLarge ? 15 : 12, + }); + + // 列表切换 + const handleViewChange = (value: string) => { + setType(value); + search.submit(); + }; + + // 新建项目或页面 + const handleCreate = () => { + if (type === 'project') { + createProjectRef.current?.open(); + } else { + createPageRef.current?.open(); + } + }; + + return ( + + {/* 搜索工具条 */} + + + {/* 加载项目列表 */} + {type === 'project' ? ( +
+ + {tableProps.dataSource.length > 0 ? ( + + ) : ( + + + + )} + +
+ ) : null} + + {/* 加载子页面列表 */} + {type === 'page' ? ( +
+ + {tableProps.dataSource.length > 0 ? ( + + ) : ( + + + + )} + +
+ ) : null} + + {/* 分页器 */} + {tableProps.dataSource.length > 0 ? ( + tableProps.onChange({ current, pageSize })} + showSizeChanger + showTotal={(total) => `总共 ${total} 条`} + align="end" + /> + ) : null} + + {/* 新建项目 */} + + + {/* 新建页面 */} + + + ); +} + +export default memo(Category); diff --git a/packages/editor/src/router/index.tsx b/packages/editor/src/router/index.tsx index c71b23c2..e89547d7 100644 --- a/packages/editor/src/router/index.tsx +++ b/packages/editor/src/router/index.tsx @@ -25,7 +25,7 @@ export const router = [ children: [ { path: '/projects', - element: lazyLoad(React.lazy(() => import('@/pages/home/project/Category'))), + element: lazyLoad(React.lazy(() => import('@/pages/home/project/index'))), }, { path: '/project/pages', diff --git a/packages/materials/Scene/GridForm/GridForm.tsx b/packages/materials/Scene/GridForm/GridForm.tsx index 666b48c0..c0e19143 100644 --- a/packages/materials/Scene/GridForm/GridForm.tsx +++ b/packages/materials/Scene/GridForm/GridForm.tsx @@ -160,13 +160,7 @@ const GridForm = ({ id, type, config, elements, onSearch, onChange, onReset }: C onValuesChange={handleValuesChange} > - {elements.length ? ( - - ) : ( -
-
拖拽表单组件到这里
-
- )} + {elements.length ? : null}