gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: support preview office file

This commit is contained in:
fantasticit 2023-01-03 22:01:14 +08:00
parent d0411a03da
commit 4524617e38
9 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/components/icons/IconPDF.tsx
View File

@ -35,3 +35,17 @@ export const IconPDF: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
/>
);
};
export const IconFilePDF: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
return (
<Icon
style={style}
svg={
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M12 16H8V8h4a4 4 0 1 1 0 8zm-2-6v4h2a2 2 0 1 0 0-4h-2zm5-6H5v16h14V8h-4V4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
</svg>
}
/>
);
};

15
packages/client/src/components/icons/IconPPT.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Icon } from '@douyinfe/semi-ui';
export const IconFilePPT: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
return (
<Icon
style={style}
svg={
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992zM5 4v16h14V8h-3v6h-6v2H8V8h7V4H5zm5 6v2h4v-2h-4z" />
</svg>
}
/>
);
};

15
packages/client/src/components/icons/IconSheet.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Icon } from '@douyinfe/semi-ui';
export const IconFileSheet: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
return (
<Icon
style={style}
svg={
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M13.2 12l2.8 4h-2.4L12 13.714 10.4 16H8l2.8-4L8 8h2.4l1.6 2.286L13.6 8H15V4H5v16h14V8h-3l-2.8 4zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
</svg>
}
/>
);
};

14
packages/client/src/components/icons/IconWord.tsx
View File

@ -35,3 +35,17 @@ export const IconWord: React.FC<{ style?: React.CSSProperties }> = ({ style = {}
/>
);
};
export const IconFileWord: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
return (
<Icon
style={style}
svg={
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
<path fill="none" d="M0 0h24v24H0z" />
<path d="M16 8v8h-2l-2-2-2 2H8V8h2v5l2-2 2 2V8h1V4H5v16h14V8h-3zM3 2.992C3 2.444 3.447 2 3.999 2H16l5 5v13.993A1 1 0 0 1 20.007 22H3.993A1 1 0 0 1 3 21.008V2.992z" />
</svg>
}
/>
);
};

2
packages/client/src/components/icons/index.tsx
View File

@ -45,12 +45,14 @@ export * from './IconMindSide';
export * from './IconOrderedList';
export * from './IconOverview';
export * from './IconPDF';
export * from './IconPPT';
export * from './IconQuote';
export * from './IconRight';
export * from './IconSearch';
export * from './IconSearchReplace';
export * from './IconSetting';
export * from './IconShare';
export * from './IconSheet';
export * from './IconSplitCell';
export * from './IconStatus';
export * from './IconStructure';

12
packages/client/src/tiptap/core/wrappers/attachment/file-icon.tsx
View File

@ -1,4 +1,5 @@
import { IconFile, IconImage, IconSong, IconVideo } from '@douyinfe/semi-icons';
import { IconFilePDF, IconFilePPT, IconFileSheet, IconFileWord } from 'components/icons';
import { normalizeFileType } from 'tiptap/prose-utils';
export const getFileTypeIcon = (fileType: string) => {
@ -18,7 +19,16 @@ export const getFileTypeIcon = (fileType: string) => {
return <IconImage />;
case 'pdf':
return <IconFile />;
return <IconFilePDF />;
case 'word':
return <IconFileWord />;
case 'excel':
return <IconFileSheet />;
case 'ppt':
return <IconFilePPT />;
default: {
const value: never = type;

8
packages/client/src/tiptap/core/wrappers/attachment/player/index.module.scss
View File

@ -10,3 +10,11 @@
height: 100%;
}
}
.iframeWrapper {
width: 100%;
margin: auto;
overflow: auto;
border: 0;
outline: none;
}

9
packages/client/src/tiptap/core/wrappers/attachment/player/index.tsx
View File

@ -33,6 +33,15 @@ export const Player: React.FC<IProps> = ({ url, fileType }) => {
if (type === 'pdf') return <PDFPlayer url={url} />;
if (type === 'word' || type === 'excel' || type === 'ppt') {
return (
<iframe
className={styles.iframeWrapper}
src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`}
/>
);
}
return <Text type="tertiary">暂不支持预览该类型文件</Text>;
}, [type, url]);

9
packages/client/src/tiptap/prose-utils/file.ts
View File

@ -31,13 +31,20 @@ export const normalizeFileSize = (size) => {
return (size / 1024 / 1024).toFixed(2) + ' MB';
};
export type FileType = 'image' | 'audio' | 'video' | 'pdf' | 'file';
export type FileType = 'image' | 'audio' | 'video' | 'pdf' | 'word' | 'excel' | 'ppt' | 'file';
export const normalizeFileType = (fileType): FileType => {
if (!fileType) return 'file';
if (fileType === 'application/pdf') return 'pdf';
if (fileType.startsWith('application/') && ['.document', 'word'].some((type) => fileType.includes(type)))
return 'word';
if (fileType.startsWith('application/') && ['presentation'].some((type) => fileType.includes(type))) return 'excel';
if (fileType.startsWith('application/') && ['sheet'].some((type) => fileType.includes(type))) return 'ppt';
if (fileType.startsWith('image')) {
return 'image';
}