From daf09174dfff7acddd7849fed8cd5a4921f52571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=B6=E6=80=9D=E6=B7=87?= Date: Fri, 2 Jun 2023 17:12:46 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=96=B0=E5=A2=9E=E5=89=AA?= =?UTF-8?q?=E8=B4=B4=E6=9D=BF=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1、新增剪贴板组件以及剪贴板Hooks 2、整理Hooks目录 --- package.json | 2 ++ pnpm-lock.yaml | 28 ++++++++++++++++- src/components/Clipboard/index.tsx | 28 +++++++++++++++++ src/hooks/index.ts | 3 ++ src/hooks/useClipboard.ts | 17 ++++++++++ src/hooks/{common/index.ts => useStorage.ts} | 0 src/layouts/Header/index.tsx | 2 +- src/pages/charts/barLine/index.tsx | 2 +- src/pages/charts/basic/index.tsx | 2 +- src/pages/charts/line/index.tsx | 2 +- src/pages/charts/pie/index.tsx | 3 +- src/pages/components/clipboard/index.tsx | 33 ++++++++++++++++++++ src/router/modules/components.tsx | 10 +++++- src/store/modules/user.ts | 2 +- 14 files changed, 125 insertions(+), 9 deletions(-) create mode 100644 src/components/Clipboard/index.tsx create mode 100644 src/hooks/index.ts create mode 100644 src/hooks/useClipboard.ts rename src/hooks/{common/index.ts => useStorage.ts} (100%) create mode 100644 src/pages/components/clipboard/index.tsx diff --git a/package.json b/package.json index af269ef..0f33e0c 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "mobx-react": "^7.6.0", "qs": "^6.11.0", "react": "^18.2.0", + "react-copy-to-clipboard": "^5.1.0", "react-custom-scrollbars-2": "^4.5.0", "react-dom": "^18.2.0", "react-draggable": "^4.4.5", @@ -46,6 +47,7 @@ "@types/node": "^18.14.6", "@types/qs": "^6.9.7", "@types/react": "^18.0.27", + "@types/react-copy-to-clipboard": "^5.0.4", "@types/react-dom": "^18.0.10", "@unocss/preset-rem-to-px": "^0.52.3", "@vitejs/plugin-react": "^3.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f22e29a..1968ec2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,8 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false dependencies: '@ant-design/icons': @@ -70,6 +74,9 @@ dependencies: react: specifier: ^18.2.0 version: 18.2.0 + react-copy-to-clipboard: + specifier: ^5.1.0 + version: 5.1.0(react@18.2.0) react-custom-scrollbars-2: specifier: ^4.5.0 version: 4.5.0(react-dom@18.2.0)(react@18.2.0) @@ -108,6 +115,9 @@ devDependencies: '@types/react': specifier: ^18.0.27 version: 18.0.28 + '@types/react-copy-to-clipboard': + specifier: ^5.0.4 + version: 5.0.4 '@types/react-dom': specifier: ^18.0.10 version: 18.0.11 @@ -2210,6 +2220,12 @@ packages: resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==} dev: true + /@types/react-copy-to-clipboard@5.0.4: + resolution: {integrity: sha512-otTJsJpofYAeaIeOwV5xBUGpo6exXG2HX7X4nseToCB2VgPEBxGBHCm/FecZ676doNR7HCSTVtmohxfG2b3/yQ==} + dependencies: + '@types/react': 18.0.28 + dev: true + /@types/react-dom@18.0.11: resolution: {integrity: sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==} dependencies: @@ -6152,6 +6168,16 @@ packages: flat: 5.0.2 dev: true + /react-copy-to-clipboard@5.1.0(react@18.2.0): + resolution: {integrity: sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==} + peerDependencies: + react: ^15.3.0 || 16 || 17 || 18 + dependencies: + copy-to-clipboard: 3.3.3 + prop-types: 15.8.1 + react: 18.2.0 + dev: false + /react-custom-scrollbars-2@4.5.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-/z0nWAeXfMDr4+OXReTpYd1Atq9kkn4oI3qxq3iMXGQx1EEfwETSqB8HTAvg1X7dEqcCachbny1DRNGlqX5bDQ==} peerDependencies: diff --git a/src/components/Clipboard/index.tsx b/src/components/Clipboard/index.tsx new file mode 100644 index 0000000..9e455fd --- /dev/null +++ b/src/components/Clipboard/index.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { Tooltip, message } from 'antd' +import { CopyToClipboard } from 'react-copy-to-clipboard' +import { CopyOutlined } from '@ant-design/icons' + +interface IProps { + text: string + children?: React.ReactNode +} + +/** + * 复制到剪切板 + */ +export default (props: IProps) => { + const { text, children } = props + return ( + + { + message.success('复制成功！') + }} + > + { children || } + + + ) +} diff --git a/src/hooks/index.ts b/src/hooks/index.ts new file mode 100644 index 0000000..5bcc968 --- /dev/null +++ b/src/hooks/index.ts @@ -0,0 +1,3 @@ +export * from './useEcharts' +export * from './useStorage' +export * from './useClipboard' diff --git a/src/hooks/useClipboard.ts b/src/hooks/useClipboard.ts new file mode 100644 index 0000000..92b8931 --- /dev/null +++ b/src/hooks/useClipboard.ts @@ -0,0 +1,17 @@ +import * as copyAlias from 'copy-to-clipboard' +import { message } from 'antd' + +export function useClipboard() { + const copy = (text: string): Promise => new Promise((resolve, reject) => { + try { + copyAlias(text) + message.success('复制成功') + resolve() + } catch (error) { + message.error('您的浏览器不支持剪贴板API') + reject(new Error('Your browser does not support Clipboard API')) + } + }) + + return { copy } +} diff --git a/src/hooks/common/index.ts b/src/hooks/useStorage.ts similarity index 100% rename from src/hooks/common/index.ts rename to src/hooks/useStorage.ts diff --git a/src/layouts/Header/index.tsx b/src/layouts/Header/index.tsx index 8c5f983..5264dd1 100644 --- a/src/layouts/Header/index.tsx +++ b/src/layouts/Header/index.tsx @@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router-dom' import FullScreen from '@/components/FullScreen' import headImg from '@/assets/default-head-02.png' // import BreadCrumb from '@/components/BreadCrumb' -import { useStorage } from '@/hooks/common' +import { useStorage } from '@/hooks' import { useStore } from '@/store' import TagsView from '../TagsView' import { Gitee } from '@/config' diff --git a/src/pages/charts/barLine/index.tsx b/src/pages/charts/barLine/index.tsx index f41dbc0..e96f619 100644 --- a/src/pages/charts/barLine/index.tsx +++ b/src/pages/charts/barLine/index.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { useEcharts } from '@/hooks/useEcharts' +import { useEcharts } from '@/hooks' import { EChartsOption } from 'echarts' const xData = ['1月份', '2月份', '3月份', '4月份', '5月份', '6月份', '7月份', '8月份', '9月份', '10月份', '11月份', '12月份'] diff --git a/src/pages/charts/basic/index.tsx b/src/pages/charts/basic/index.tsx index 700aba9..151dd1e 100644 --- a/src/pages/charts/basic/index.tsx +++ b/src/pages/charts/basic/index.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { useEcharts } from '@/hooks/useEcharts' +import { useEcharts } from '@/hooks' import type { EChartsOption } from 'echarts' const option: EChartsOption = { diff --git a/src/pages/charts/line/index.tsx b/src/pages/charts/line/index.tsx index 2bc18fb..eb9bc19 100644 --- a/src/pages/charts/line/index.tsx +++ b/src/pages/charts/line/index.tsx @@ -1,5 +1,5 @@ import { FC } from 'react' -import { useEcharts } from '@/hooks/useEcharts' +import { useEcharts } from '@/hooks' const option = { title: { diff --git a/src/pages/charts/pie/index.tsx b/src/pages/charts/pie/index.tsx index 7fee7e8..9ca2a36 100644 --- a/src/pages/charts/pie/index.tsx +++ b/src/pages/charts/pie/index.tsx @@ -1,6 +1,5 @@ import { FC } from 'react' -import ReactEcharts from 'echarts-for-react' -import { useEcharts } from '@/hooks/useEcharts' +import { useEcharts } from '@/hooks' // eslint-disable-next-line max-len const img = 'data:image/png;base64,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' diff --git a/src/pages/components/clipboard/index.tsx b/src/pages/components/clipboard/index.tsx new file mode 100644 index 0000000..99d6fc6 --- /dev/null +++ b/src/pages/components/clipboard/index.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import { Card, Col, Row } from 'antd' +import { CopyOutlined } from '@ant-design/icons' +import View from '@/components/View' +import Clipboard from '@/components/Clipboard' +import { useClipboard } from '@/hooks' + +const ClipboardPage: FC = () => { + const date = Date.now().toString() + const { copy } = useClipboard() + return ( + + + + + 组件： + {date} + + + +
+ Hooks： + {date} + copy(`Hooks：${date}`)} /> +
+ + + + + ) +} + +export default ClipboardPage diff --git a/src/router/modules/components.tsx b/src/router/modules/components.tsx index 031b8d5..432a2e9 100644 --- a/src/router/modules/components.tsx +++ b/src/router/modules/components.tsx @@ -1,5 +1,5 @@ import { lazy } from 'react' -import { BlockOutlined, FileWordOutlined } from '@ant-design/icons' +import { BlockOutlined, FileWordOutlined, CopyOutlined } from '@ant-design/icons' import lazyLoad from '@/utils/lazyLoad' export default [{ @@ -18,5 +18,13 @@ export default [{ key: '/components/tinymce', element: lazyLoad(lazy(() => import(/* webpackChunkName: "tinymce" */ '@/pages/components/tinymce'))), }, + { + label: '剪切板', + title: '剪切板', + icon: , + path: '/components/clipboard', + key: '/components/clipboard', + element: lazyLoad(lazy(() => import(/* webpackChunkName: "tinymce" */ '@/pages/components/clipboard'))), + }, ], }] diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index dbfadba..f67a70d 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -2,7 +2,7 @@ import { action, makeObservable, observable } from 'mobx' import { fetchLogin, fetchUserInfo } from '@/api/user' import { setToken } from '@/utils/auth' import { StoreKey } from '@/config' -import { useStorage } from '@/hooks/common' +import { useStorage } from '@/hooks/useStorage' class User { constructor() { -- Gitee