feat(preview): 增加弹窗底部额外按钮支持

- 三个预览组件（Excel、Pdf、Word）添加了extraButtons属性
- extraButtons支持传入自定义React节点，扩展弹窗底部操作按钮
- 类型定义中将style属性改为CSSProperties以增强类型安全
- 弹窗中渲染extraButtons内容，增强功能拓展性

src/components/Excel/index.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { CSSProperties, FC, ReactNode } from "react";
 
 export interface ExcelProps {
   /** 是否显示弹窗 */
@@ -13,8 +13,10 @@ export interface ExcelProps {
   inline?: boolean;
   /** 弹窗标题 */
   title?: string;
-  /** 内容样式 */
+  /** 内联模式下的样式 */
-  style?: Record<string, any>;
+  style?: CSSProperties;
+  /** 弹窗底部额外的按钮 */
+  extraButtons?: ReactNode;
 }
 
 declare const Excel: FC<ExcelProps>;

src/components/Excel/index.js

@@ -19,6 +19,7 @@ function Excel(props) {
     inline = false,
     title = "Excel预览",
     style = {},
+    extraButtons,
   } = props;
 
   const containerRef = useRef(null);
@@ -121,6 +122,7 @@ function Excel(props) {
             关闭
           </Button>,
           <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
+          ...(extraButtons || []),
         ]}
       >
         {renderExcelContent()}

src/components/Pdf/index.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, FC } from "react";
+import type { CSSProperties, FC, ReactNode } from "react";
 
 export interface PdfProps {
   /** pdf 文件地址 */
@@ -15,6 +15,8 @@ export interface PdfProps {
   inline?: boolean;
   /** 内联模式下的样式 */
   style?: CSSProperties;
+  /** 弹窗底部额外的按钮 */
+  extraButtons?: ReactNode;
 }
 
 declare const Pdf: FC<PdfProps>;

src/components/Pdf/index.js

@@ -20,6 +20,7 @@ function Pdf(props) {
     inline = false,
     title = "PDF预览",
     style = {},
+    extraButtons,
   } = props;
 
   const fileUrl = getFileUrl();
@@ -117,6 +118,7 @@ function Pdf(props) {
             {isFullscreen ? "退出全屏" : "全屏"}
           </Button>,
           <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
+          ...(extraButtons || []),
         ]}
       >
         {renderPdfContent()}

src/components/Word/index.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { CSSProperties, FC, ReactNode } from "react";
 
 export interface WordProps {
   /** 是否显示弹窗 */
@@ -13,8 +13,10 @@ export interface WordProps {
   inline?: boolean;
   /** 弹窗标题 */
   title?: string;
-  /** 内容样式 */
+  /** 内联模式下的样式 */
-  style?: Record<string, any>;
+  style?: CSSProperties;
+  /** 弹窗底部额外的按钮 */
+  extraButtons?: ReactNode;
 }
 
 declare const Word: FC<WordProps>;

src/components/Word/index.js

@@ -16,6 +16,7 @@ function Word(props) {
     inline = false,
     title = "Word预览",
     style = {},
+    extraButtons,
   } = props;
 
   const contentRef = useRef(null);
@@ -114,6 +115,7 @@ function Word(props) {
             关闭
           </Button>,
           <Button key="download" type="primary" onClick={onDownloadFile}>下载</Button>,
+          ...(extraButtons || []),
         ]}
       >
         {renderWordContent()}