feat: 开发云服务

JackySoft · Oct 10, 2024 · 6e86d4a · 6e86d4a
1 parent b6b3ce5
commit 6e86d4a
Show file tree

Hide file tree

Showing 7 changed files with 234 additions and 4 deletions.
diff --git a/packages/editor/src/api/cdn.ts b/packages/editor/src/api/cdn.ts
@@ -0,0 +1,6 @@
+import request from '@/utils/request';
+
+// 获取图片云列表
+export const getImgList = async <T>(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
@@ -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
@@ -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: <PieChartOutlined style={{ fontSize: 16 }} />,
     },
+    {
+      label: '图片云',
+      key: 'cloud',
+      icon: <CloudOutlined style={{ fontSize: 16 }} />,
+    },
   ];
   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
@@ -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<number>(100);
+  const [current, setCurrent] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(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 (
+    <div className={styles.imgCloud}>
+      <div className={styles.content}>
+        <Alert type="info" showIcon message="Marsview提供在线CDN服务，方便对远程图片和文件的管理；普通用户最多可上传5个文件，每个文件最大支持5M；" />
+        <Space>
+          <Upload {...props}>
+            <Button type="primary" icon={<UploadOutlined />}>
+              上传
+            </Button>
+          </Upload>
+          <Button shape="circle" icon={<RedoOutlined />} onClick={() => getList()}></Button>
+        </Space>
+      </div>
+      <Spin spinning={loading} size="large">
+        <div className={styles.imgList}>
+          {list.map((item, index) => {
+            return (
+              <div className={styles.imgCard} key={index}>
+                <div className={styles.imgRound}>
+                  <div className={styles.icons}>
+                    <Space>
+                      <Popover
+                        placement="right"
+                        content={
+                          <div>
+                            <p>
+                              <span style={{ display: 'inline-block', width: 80 }}>大小：</span>
+                              <span>{(item.size / 1024).toFixed(2)} KB</span>
+                            </p>
+                            <p>
+                              <span style={{ display: 'inline-block', width: 80 }}>创建时间：</span>
+                              <span>{item.created_at}</span>
+                            </p>
+                            <p>
+                              <span style={{ display: 'inline-block', width: 80 }}>创建人：</span>
+                              <span>{item.user_name}</span>
+                            </p>
+                          </div>
+                        }
+                        title={item.origin_name}
+                        trigger="click"
+                      >
+                        <InfoCircleOutlined />
+                      </Popover>
+                      <Tooltip title="复制">
+                        {state ? (
+                          <CheckOutlined />
+                        ) : (
+                          <CopyOutlined
+                            onClick={() => {
+                              copy(item.url);
+                              setState(true);
+                              setTimeout(() => {
+                                setState(false);
+                              }, 3000);
+                              message.success('复制成功');
+                            }}
+                          />
+                        )}
+                      </Tooltip>
+                    </Space>
+                  </div>
+                  <Image src={item.type.startsWith('image') ? item.url : 'https://marsview.cdn.bcebos.com/js.png'} width={100} />
+                </div>
+                <div className={styles.desc}>{(item.size / 1024).toFixed(2)} KB</div>
+              </div>
+            );
+          })}
+        </div>
+      </Spin>
+      <div className={styles.imgPagination}>
+        <Pagination total={total} current={current} pageSize={pageSize} align="center" showSizeChanger={false} onChange={handleChange} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/editor/src/pages/cloud/index.module.less 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
@@ -90,7 +90,6 @@ export default function Index() {
 
   // 页面列表项
   const SectionItem = ({ item }: { item: PageItem }) => {
-    const isAuth = item.id ? true : false;
     return (
       <section className={styles.card}>
         <div className={styles.itemContent} onClick={() => handleAction('edit', item)}>

diff --git 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: <Navigate to="/404" />,