diff --git a/packages/component/src/components/share-menu/index.css.ts b/packages/component/src/components/share-menu/index.css.ts
index 5191f774c4..329f09fd9f 100644
--- a/packages/component/src/components/share-menu/index.css.ts
+++ b/packages/component/src/components/share-menu/index.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
export const menuItemStyle = style({
padding: '4px',
@@ -12,6 +12,7 @@ export const descriptionStyle = style({
lineHeight: '20px',
color: 'var(--affine-text-secondary-color)',
textAlign: 'left',
+ padding: '0 2px',
});
export const buttonStyle = style({
@@ -66,7 +67,7 @@ export const columnContainerStyle = style({
justifyContent: 'center',
padding: '0 4px',
width: '100%',
- gap: '12px',
+ gap: '8px',
});
export const rowContainerStyle = style({
@@ -131,3 +132,18 @@ export const shareIconStyle = style({
display: 'flex',
alignItems: 'center',
});
+
+export const shareLinkStyle = style({
+ padding: '4px',
+ fontSize: 'var(--affine-font-xs)',
+ fontWeight: 500,
+ lineHeight: '20px',
+ transform: 'translateX(-4px)',
+ gap: '4px',
+});
+globalStyle(`${shareLinkStyle} > span`, {
+ color: 'var(--affine-link-color)',
+});
+globalStyle(`${shareLinkStyle} > div > svg`, {
+ color: 'var(--affine-link-color)',
+});
diff --git a/packages/component/src/components/share-menu/share-export.tsx b/packages/component/src/components/share-menu/share-export.tsx
index d8aeebd924..4f86cc5869 100644
--- a/packages/component/src/components/share-menu/share-export.tsx
+++ b/packages/component/src/components/share-menu/share-export.tsx
@@ -1,4 +1,7 @@
import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { LinkIcon } from '@blocksuite/icons';
+import { Button } from '@toeverything/components/button';
+import { Divider } from '@toeverything/components/divider';
import {
ExportToHtmlMenuItem,
@@ -7,9 +10,19 @@ import {
ExportToPngMenuItem,
} from '../page-list/operation-menu-items/export';
import * as styles from './index.css';
+import type { ShareMenuProps } from './share-menu';
+import { useSharingUrl } from './use-share-url';
-export const ShareExport = () => {
+export const ShareExport = (props: ShareMenuProps) => {
const t = useAFFiNEI18N();
+ const workspaceId = props.workspace.id;
+ const pageId = props.currentPage.id;
+ const { onClickCopyLink } = useSharingUrl({
+ workspaceId,
+ pageId,
+ urlType: 'workspace',
+ });
+
return (
<>
@@ -25,6 +38,17 @@ export const ShareExport = () => {
{t['com.affine.share-menu.ShareViaExportDescription']()}
+
+
+ }
+ type="plain"
+ >
+ {t['Copy Link']()}
+
+
>
);
diff --git a/packages/component/src/components/share-menu/share-menu.tsx b/packages/component/src/components/share-menu/share-menu.tsx
index 1114345f5d..2e5f178b1c 100644
--- a/packages/component/src/components/share-menu/share-menu.tsx
+++ b/packages/component/src/components/share-menu/share-menu.tsx
@@ -13,7 +13,6 @@ import { Menu } from '@toeverything/components/menu';
import * as styles from './index.css';
import { ShareExport } from './share-export';
import { SharePage } from './share-page';
-
export interface ShareMenuProps<
Workspace extends AffineOfficialWorkspace =
| AffineCloudWorkspace
@@ -43,7 +42,7 @@ export const ShareMenu = (props: ShareMenuProps) => {
-
+
);
return (
diff --git a/packages/component/src/components/share-menu/share-page.tsx b/packages/component/src/components/share-menu/share-page.tsx
index f8d7219fea..0b7a4e18f6 100644
--- a/packages/component/src/components/share-menu/share-page.tsx
+++ b/packages/component/src/components/share-menu/share-page.tsx
@@ -5,13 +5,14 @@ import { ArrowRightSmallIcon, WebIcon } from '@blocksuite/icons';
import { Button } from '@toeverything/components/button';
import { Menu, MenuItem, MenuTrigger } from '@toeverything/components/menu';
import { useState } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
import Input from '../../ui/input';
import { toast } from '../../ui/toast';
import { PublicLinkDisableModal } from './disable-public-link';
import * as styles from './index.css';
import type { ShareMenuProps } from './share-menu';
+import { useSharingUrl } from './use-share-url';
const CloudSvg = () => (