From 6e86d4a9193234c4e15cb51b95553d0c41331f16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=B3=E7=95=94=E4=B8=80=E8=A7=92?= Date: Fri, 11 Oct 2024 00:18:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BC=80=E5=8F=91=E4=BA=91=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/editor/src/api/cdn.ts | 6 + packages/editor/src/api/types/index.ts | 2 - .../src/layout/components/Header/index.tsx | 8 +- packages/editor/src/pages/cloud/ImgCloud.tsx | 151 ++++++++++++++++++ .../editor/src/pages/cloud/index.module.less | 66 ++++++++ packages/editor/src/pages/home/Template.tsx | 1 - packages/editor/src/router/index.tsx | 4 + 7 files changed, 234 insertions(+), 4 deletions(-) create mode 100644 packages/editor/src/api/cdn.ts create mode 100644 packages/editor/src/pages/cloud/ImgCloud.tsx create mode 100644 packages/editor/src/pages/cloud/index.module.less diff --git a/packages/editor/src/api/cdn.ts b/packages/editor/src/api/cdn.ts new file mode 100644 index 0000000..3018bb0 --- /dev/null +++ b/packages/editor/src/api/cdn.ts @@ -0,0 +1,6 @@ +import request from '@/utils/request'; + +// 获取图片云列表 +export const getImgList = async (params: T) => { + return request.get('/cloud/list', params, { showLoading: false }); +}; diff --git a/packages/editor/src/api/types/index.ts b/packages/editor/src/api/types/index.ts index a7aeaa5..e03bbda 100644 --- a/packages/editor/src/api/types/index.ts +++ b/packages/editor/src/api/types/index.ts @@ -2,8 +2,6 @@ * API参数类型定义 */ -import { message } from 'antd'; - export interface PageParams { keyword?: string; pageNum: number; diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx index d7c2d51..cf0713d 100644 --- a/packages/editor/src/layout/components/Header/index.tsx +++ b/packages/editor/src/layout/components/Header/index.tsx @@ -8,6 +8,7 @@ import { AppstoreOutlined, LoadingOutlined, PieChartOutlined, + CloudOutlined, } from '@ant-design/icons'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { toBlob } from 'html-to-image'; @@ -78,9 +79,14 @@ const Header = memo(() => { key: 'templates', icon: , }, + { + label: '图片云', + key: 'cloud', + icon: , + }, ]; useEffect(() => { - if (['/projects', '/pages', '/libs', '/templates'].includes(location.pathname)) { + if (['/projects', '/pages', '/libs', '/templates', '/cloud'].includes(location.pathname)) { setNav(true); setNavKey([location.pathname.slice(1)]); } else { diff --git a/packages/editor/src/pages/cloud/ImgCloud.tsx b/packages/editor/src/pages/cloud/ImgCloud.tsx new file mode 100644 index 0000000..f4623cf --- /dev/null +++ b/packages/editor/src/pages/cloud/ImgCloud.tsx @@ -0,0 +1,151 @@ +import { Button, Image, Alert, Pagination, Upload, Space, Popover, Tooltip, Spin } from 'antd'; +import { useEffect, useMemo, useState } from 'react'; +import { CheckOutlined, CopyOutlined, InfoCircleOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons'; +import type { UploadProps } from 'antd'; +import copy from 'copy-to-clipboard'; +import { message } from '@/utils/AntdGlobal'; +import storage from '@/utils/storage'; +import { getImgList } from '@/api/cdn'; +import styles from './index.module.less'; + +export default function ImgCloud() { + const [loading, setLoading] = useState(true); + const [total, setTotal] = useState(100); + const [current, setCurrent] = useState(1); + const [pageSize, setPageSize] = useState(12); + const [state, setState] = useState(false); + const [list, setList] = useState< + Array<{ id: number; type: string; origin_name: string; file_name: string; size: number; user_name: string; created_at: string; url: string }> + >([]); + + useEffect(() => { + getList(); + }, []); + + // 加载页面列表 + const getList = async (pageNum: number = current, size: number = pageSize) => { + setLoading(true); + try { + const res = await getImgList({ + pageNum, + pageSize: size, + }); + setTotal(res?.total || 0); + setList(res?.list || []); + setLoading(false); + } catch (error) { + setLoading(false); + } + }; + + // 切换页码和每页条数回调 + const handleChange = (_current: number, size: number) => { + setCurrent(_current); + setPageSize(size); + }; + + const props: UploadProps = useMemo(() => { + const token = storage.get('token'); + return { + name: 'file', + action: 'http://localhost:5000/api/cloud/upload/files', + headers: { + Authorization: `Bearer ${token}`, + }, + showUploadList: false, + onChange(info) { + const { status, response } = info.file; + setLoading(true); + if (status !== 'uploading') { + console.log('上传中...'); + } + if (status === 'done') { + setLoading(false); + if (response.code == 0) { + getList(); + } else { + message.error(response.message); + } + } else if (status === 'error') { + message.error(`上传失败，请稍后重试`); + } + }, + }; + }, []); + + return ( +
+
+ + + + + + + +
+ +
+ {list.map((item, index) => { + return ( +
+
+
+ + +

+ 大小： + {(item.size / 1024).toFixed(2)} KB +

+

+ 创建时间： + {item.created_at} +

+

+ 创建人： + {item.user_name} +

+
+ } + title={item.origin_name} + trigger="click" + > + + + + {state ? ( + + ) : ( + { + copy(item.url); + setState(true); + setTimeout(() => { + setState(false); + }, 3000); + message.success('复制成功'); + }} + /> + )} + + +
+ +
+
{(item.size / 1024).toFixed(2)} KB
+
+ ); + })} +
+ +
+ +
+ + ); +} diff --git a/packages/editor/src/pages/cloud/index.module.less b/packages/editor/src/pages/cloud/index.module.less new file mode 100644 index 0000000..0cbe518 --- /dev/null +++ b/packages/editor/src/pages/cloud/index.module.less @@ -0,0 +1,66 @@ +.imgCloud { + padding: 30px; + overflow-y: auto; + height: calc(100vh - 64px); +} +.content { + margin-bottom: 30px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; +} +.imgList { + display: flex; + flex-wrap: wrap; + gap: 30px; + .imgCard { + position: relative; + text-align: center; + .desc { + font-size: 12px; + color: #999; + } + .imgRound { + width: 142px; + height: 142px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; + overflow: hidden; + border: 1px solid #eee; + padding: 20px; + margin-bottom: 5px; + cursor: pointer; + &:hover { + .icons { + visibility: visible; + } + } + .icons { + position: absolute; + top: 0; + right: 5px; + visibility: hidden; + } + } + } +} + +.imgPagination { + position: absolute; + top: 0; + right: 24px; + margin-top: 20%; + :global { + .ant-pagination { + flex-direction: column; + } + button { + svg { + transform: rotate(90deg); + } + } + } +} diff --git a/packages/editor/src/pages/home/Template.tsx b/packages/editor/src/pages/home/Template.tsx index 80e44f3..cd56dd8 100644 --- a/packages/editor/src/pages/home/Template.tsx +++ b/packages/editor/src/pages/home/Template.tsx @@ -90,7 +90,6 @@ export default function Index() { // 页面列表项 const SectionItem = ({ item }: { item: PageItem }) => { - const isAuth = item.id ? true : false; return (
handleAction('edit', item)}> diff --git a/packages/editor/src/router/index.tsx b/packages/editor/src/router/index.tsx index 2b3fac1..1580aa2 100644 --- a/packages/editor/src/router/index.tsx +++ b/packages/editor/src/router/index.tsx @@ -119,6 +119,10 @@ export const router = [ }, ], }, + { + path: '/cloud', + element: lazyLoad(React.lazy(() => import('@/pages/cloud/ImgCloud'))), + }, { path: '*', element: ,