feat: 数据源Url的复制

package.json

@@ -74,6 +74,7 @@
     "rc-menu": "^9.0.13",
     "rc-util": "^5.14.0",
     "react": "^17.0.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.0",
     "react-flow-renderer": "^9.6.11",
     "react-sortable-hoc": "^2.0.0",

src/pages/Schema/Budget/Components/LeftMenu.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import type { DirectoryTreeProps } from 'antd/lib/tree'
 import { Tree } from 'antd'
+import '@/pages/Permission/Role/components/RoleLeftMenu/index.less'
 
 const { DirectoryTree } = Tree
 type LeftMenuProps = {
@@ -29,12 +30,15 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ onSelect, options }) => {
   }
   return (
     <div
-      className="w-54 rounded-20px flex flex-col bg-white "
+      className="min-w-54 rounded-20px flex flex-col bg-white "
       style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
       <div className="p-4 border-b-1 rounded-tl-20px rounded-tr-20px border-solid border-black border-opacity-10 bg-hex-f7f9fa">
         <div className="text-base">表单列表</div>
       </div>
-      <div className="flex-1">
+      <div
+        id="role-list"
+        className="p-4 bg-white rounded-b-20px"
+        style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
         <DirectoryTree
           treeData={renderTreeNode(
             options.map(item => ({ title: item.name, key: item.action, ...item }))

src/pages/Schema/Option/index.less

@@ -10,3 +10,13 @@
 .row-dragging .drag-visible {
   visibility: visible;
 }
+
+.copyWrap {
+  :global(.ant-pro-core-label-tip-title) {
+    max-width: 400px;
+    overflow: hidden;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+}

src/pages/Schema/Option/index.tsx

@@ -1,4 +1,4 @@
-import { Button, message } from 'antd'
+import { Button, message, Tooltip } from 'antd'
 import LeftMenu from './Components/LeftMenu'
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc'
 import { arrayMoveImmutable } from 'array-move'
@@ -8,9 +8,12 @@ import { useEffect, useRef, useState } from 'react'
 import { useRequest } from 'umi'
 import type { ProFormInstance } from '@ant-design/pro-form'
 import { addDataSourceItem, queryDataSource, updateDataSourceItem } from '@/services/api/schema'
-import { MenuOutlined, PlusOutlined } from '@ant-design/icons'
+import { CopyOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { isEmpty, isNullOrUnDef } from '@/utils/is'
 import classNames from 'classnames'
 import './index.less'
+import styles from './index.less'
 import { ModalForm, ProFormRadio, ProFormText } from '@ant-design/pro-form'
 import ProTable from '@ant-design/pro-table'
 import { ModalType } from '@/utils/enum'
@@ -47,7 +50,8 @@ const Option = () => {
     modalType: OptionModalType.ADD,
     menuDataItems: [],
     current: null,
-    menuDataTitle: null
+    menuDataTitle: null,
+    menuTitleUrl: null
   })
 
   const { run: tryFetchList } = useRequest(queryDataSource, {
@@ -168,12 +172,15 @@ const Option = () => {
   )
 
   useEffect(() => {
+    const menuTitleCopyUrl =
+      `/api/form/v1/ds/items?ID=` + state.menuData.find(i => i.ID === state.activeID)?.ID
+    if (isNullOrUnDef(menuTitleCopyUrl) || isEmpty(menuTitleCopyUrl)) return null
     if (state.activeID) {
       setState({
         ...state,
         menuDataTitle:
-          state.menuData.find(i => i.ID === state.activeID)?.name +
-          `：/api/form/v1/ds/items?ID=${state.menuData.find(i => i.ID === state.activeID)?.ID}`
+          state.menuData.find(i => i.ID === state.activeID)?.name + `：` + menuTitleCopyUrl,
+        menuTitleUrl: menuTitleCopyUrl
       })
     }
   }, [state.activeID])
@@ -197,7 +204,11 @@ const Option = () => {
           options={state.menuData}
           initFn={() => tryFetchList()}
         />
-        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px shadow-hex-3e2c5a relative">
+        <div
+          className={classNames(
+            'w-6/7 ml-8 bg-white p-4 rounded-20px shadow-hex-3e2c5a relative',
+            styles.copyWrap
+          )}>
           <ProTable<API.DataSourceItem>
             columns={columns}
             search={false}
@@ -206,8 +217,17 @@ const Option = () => {
             }}
             dataSource={state.menuDataItems || []}
             rowKey="index"
-            headerTitle={state.activeID ? state.menuDataTitle : null}
             toolbar={{
+              title: state.activeID ? state.menuDataTitle : null,
+              subTitle: state.activeID ? (
+                <CopyToClipboard
+                  onCopy={() => message.success('复制成功')}
+                  text={state.menuTitleUrl}>
+                  <Tooltip placement="right" title="复制" className="ml-5px">
+                    <CopyOutlined />
+                  </Tooltip>
+                </CopyToClipboard>
+              ) : null,
               actions: [
                 <Button
                   key="btn-key"