feat: 重构

packages/editor/src/api/page.ts

@@ -0,0 +1,20 @@
+import request from '@/utils/request';
+import {
+  PageParams,
+  PageReqParams,
+  CreatePageParams,
+  PublishPageParams,
+  PublishListParams,
+  ProjectListParams,
+  ProjectCreateParams,
+  ProjectUpdateParams,
+  UserListParams,
+  UserCreateParams,
+  Menu,
+  Role,
+} from './types';
+export default {
+  getCategoryList(params: PageParams) {
+    return request.get('/page/category', params);
+  },
+};

packages/editor/src/api/types/index.ts

@@ -6,7 +6,6 @@ export interface PageParams {
   keyword?: string;
   pageNum: number;
   pageSize?: number;
-  type?: number;
 }
 
 export interface PageItem {

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

@@ -1,6 +1,6 @@
 import { memo } from 'react';
-import { Button, Form, Input, Radio, Space } from 'antd';
-import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Radio, Space, Segmented } from 'antd';
+import { PlusOutlined, RedoOutlined, BarsOutlined, AppstoreOutlined } from '@ant-design/icons';
 import styles from './index.module.less';
 
 const SearchBar = memo((props: any) => {
@@ -33,12 +33,19 @@ const SearchBar = memo((props: any) => {
             </Form.Item>
           </Form>
         </div>
-        <div className={styles.searchBarBtns}>
+        <Space>
+          <Segmented
+            onChange={(value) => props.onViewChange(value)}
+            options={[
+              { value: 'project', icon: <AppstoreOutlined /> },
+              { value: 'list', icon: <BarsOutlined /> },
+            ]}
+          />
           <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={onCreate}>
             新建{from}
           </Button>
           <Button shape="circle" icon={<RedoOutlined />} onClick={() => refresh()}></Button>
-        </div>
+        </Space>
       </div>
     </>
   );

packages/editor/src/components/Searchbar/index.module.less

@@ -5,8 +5,3 @@
   justify-content: space-between;
   align-items: center;
 }
-
-.searchBarForm {
-  display: flex;
-  align-items: center;
-}

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

@@ -0,0 +1,132 @@
+import { useEffect, useRef, useState } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Empty, Form, Layout, Pagination, Spin } from 'antd';
+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';
+
+/**
+ * 页面列表
+ */
+
+export default function Index() {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(true);
+  const [list, setList] = useState<any>([]);
+  const [total, setTotal] = useState<number>(0);
+  const [current, setCurrent] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(12);
+  const createPageRef = useRef<{ open: () => void }>();
+  const [type, setType] = useState('project');
+
+  useEffect(() => {
+    getList(current, pageSize);
+  }, [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,
+      });
+      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 = () => {
+    createPageRef.current?.open();
+  };
+
+  // 提交搜索
+  const handleSearch = () => {
+    setCurrent(1);
+    getList(1, pageSize);
+  };
+
+  return (
+    <>
+      <Layout.Content className={styles.pageList}>
+        <SearchBar
+          showGroup={false}
+          form={form}
+          from="页面"
+          submit={handleSearch}
+          refresh={getList}
+          onCreate={handleCreate}
+          onViewChange={handleViewChange}
+        />
+
+        {/* 加载项目列表 */}
+        {type === 'project' ? (
+          <div className={styles2.projectGrid}>
+            {list.map((project: any) => (
+              <ProjectCard project={project} key={project.id} />
+            ))}
+          </div>
+        ) : null}
+
+        {/* 加载页面列表 */}
+        {(total > 0 || loading) && type === 'list' ? (
+          <>
+            <div className={styles.pagesContent}>
+              <Spin spinning={loading} size="large" tip="加载中...">
+                <PageCard list={list} getList={getList} />
+              </Spin>
+            </div>
+            <Pagination
+              total={total}
+              current={current}
+              showSizeChanger
+              pageSize={pageSize}
+              pageSizeOptions={['12', '16', '20', '50']}
+              showTotal={(total) => `总共 ${total} 条`}
+              align="end"
+              onChange={handleChange}
+            />
+          </>
+        ) : (
+          !loading &&
+          type === 'list' && (
+            <Empty style={{ marginTop: 100 }}>
+              <Button type="dashed" icon={<PlusOutlined />} onClick={handleCreate}>
+                创建页面
+              </Button>
+            </Empty>
+          )
+        )}
+
+        {/* 新建页面 */}
+        <CreatePage title="创建页面" createRef={createPageRef} update={() => getList(1, pageSize)} />
+      </Layout.Content>
+    </>
+  );
+}

packages/editor/src/pages/home/Page/components/EnvTag.tsx

@@ -0,0 +1,127 @@
+import { Tag, Tooltip } from 'antd';
+import { CheckCircleOutlined, ExclamationCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import { PageItem } from '@/api/types';
+
+// 页面状态标签
+const EnvTag = ({ item }: { item: PageItem }) => {
+  // 新页面
+  if (item.stgState === 1 && item.preState === 1 && item.prdState === 1) {
+    return (
+      <Tag>
+        <Tooltip title="待开发">NEW</Tooltip>
+      </Tag>
+    );
+  }
+  let stgTag = {
+    color: '',
+    icon: <CheckCircleOutlined />,
+    tooltip: '已发布',
+  };
+  let preTag = {
+    color: '',
+    icon: <CheckCircleOutlined />,
+    tooltip: '已发布',
+  };
+  let prdTag = {
+    color: '',
+    icon: <CheckCircleOutlined />,
+    tooltip: '已发布',
+  };
+  if (item.stgState === 4) {
+    stgTag = {
+      color: 'red',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已回滚',
+    };
+  } else if (item.stgState === 3) {
+    stgTag = {
+      color: 'success',
+      icon: <CheckCircleOutlined />,
+      tooltip: '版本已发布',
+    };
+  } else if (item.stgState === 2 && item.stgPublishId) {
+    stgTag = {
+      color: 'warning',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已落后',
+    };
+  } else {
+    stgTag = {
+      color: '',
+      icon: <ClockCircleOutlined />,
+      tooltip: '版本未发布',
+    };
+  }
+  if (item.preState === 4) {
+    preTag = {
+      color: 'red',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已回滚',
+    };
+  } else if (item.preState === 3) {
+    preTag = {
+      color: 'success',
+      icon: <CheckCircleOutlined />,
+      tooltip: '版本已发布',
+    };
+  } else if (item.preState === 2 && item.prePublishId) {
+    preTag = {
+      color: 'warning',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已落后',
+    };
+  } else {
+    preTag = {
+      color: '',
+      icon: <ClockCircleOutlined />,
+      tooltip: '版本未发布',
+    };
+  }
+  if (item.prdState === 4) {
+    prdTag = {
+      color: 'red',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已回滚',
+    };
+  } else if (item.prdState === 3) {
+    prdTag = {
+      color: 'success',
+      icon: <CheckCircleOutlined />,
+      tooltip: '版本已发布',
+    };
+  } else if (item.prdState === 2 && item.prdPublishId) {
+    prdTag = {
+      color: 'warning',
+      icon: <ExclamationCircleOutlined />,
+      tooltip: '版本已落后',
+    };
+  } else {
+    prdTag = {
+      color: '',
+      icon: <ClockCircleOutlined />,
+      tooltip: '版本未发布',
+    };
+  }
+
+  return (
+    <>
+      <Tooltip title={stgTag.tooltip}>
+        <Tag color={stgTag.color} icon={stgTag.icon} bordered={false}>
+          STG
+        </Tag>
+      </Tooltip>
+      <Tooltip title={preTag.tooltip}>
+        <Tag color={preTag.color} icon={preTag.icon} bordered={false}>
+          PRE
+        </Tag>
+      </Tooltip>
+      <Tooltip title={prdTag.tooltip}>
+        <Tag color={prdTag.color} icon={prdTag.icon} bordered={false}>
+          PRD
+        </Tag>
+      </Tooltip>
+    </>
+  );
+};
+
+export default EnvTag;