@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/ExportDropdown.css

@@ -0,0 +1,85 @@
+/**
+ * DocxEditor 的工具栏/弹窗层级很高，antd Dropdown 默认 z-index（1050）会被盖住，
+ * 表现成「点击导出没反应」。这里对齐 WordEditor 里样式下拉的处理（z-index 10000）。
+ */
+.vendorsys-export-dropdown {
+  z-index: 10000 !important;
+}
+
+/**
+ * 「导出」下拉按钮的配色。
+ *
+ * 不依赖 antd 主题自动取色（实测不可靠：type=text 按钮容易拿到与容器底色
+ * 同向的颜色），改为显式声明「按钮所在的底色」：
+ *
+ * - 默认（编辑器头部）：深色模式下是深底（`bg-gray-50` 走 CSS 变量，
+ *   深色主题下是近黑色 13 17 23），用浅色字。
+ * - `.vendorsys-export-trigger-on-light`：底色恒为浅色/白色，用深色字。
+ *   目前用于 Word 只读预览（浮在白色文档页上）。
+ * - `.vendorsys-export-trigger-on-dark`：底色恒为深色，用浅色字。
+ *   目前用于 PPT 只读预览（`.ui-file-preview-ppt` 的 background 是 #000）。
+ *
+ * 后两条不跟随主题（预览底色不随主题变化），因此同时声明 dark/light 两种
+ * 作用域并放在默认规则之后，靠「同优先级 + 靠后」覆盖默认规则。
+ */
+[data-theme='dark'] .vendorsys-export-trigger.ant-btn {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger.ant-btn:not(:disabled):hover {
+  color: #69b1ff !important;
+  background-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger.ant-btn:not(:disabled):active {
+  color: #91caff !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger.ant-btn[disabled],
+[data-theme='dark'] .vendorsys-export-trigger.ant-btn.ant-btn-disabled {
+  color: rgba(255, 255, 255, 0.3) !important;
+}
+
+/* --- 浅色底（Word 只读预览，浮在白色文档页上）--- */
+[data-theme='dark'] .vendorsys-export-trigger-on-light.ant-btn,
+[data-theme='light'] .vendorsys-export-trigger-on-light.ant-btn {
+  color: rgba(59, 59, 59, 0.68) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-light.ant-btn:not(:disabled):hover,
+[data-theme='light'] .vendorsys-export-trigger-on-light.ant-btn:not(:disabled):hover {
+  color: #1677ff !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-light.ant-btn:not(:disabled):active,
+[data-theme='light'] .vendorsys-export-trigger-on-light.ant-btn:not(:disabled):active {
+  color: #0958d9 !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-light.ant-btn[disabled],
+[data-theme='light'] .vendorsys-export-trigger-on-light.ant-btn[disabled] {
+  color: rgba(0, 0, 0, 0.25) !important;
+}
+
+/* --- 深色底（PPT 只读预览，容器 background 是 #000）--- */
+[data-theme='dark'] .vendorsys-export-trigger-on-dark.ant-btn,
+[data-theme='light'] .vendorsys-export-trigger-on-dark.ant-btn {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-dark.ant-btn:not(:disabled):hover,
+[data-theme='light'] .vendorsys-export-trigger-on-dark.ant-btn:not(:disabled):hover {
+  color: #69b1ff !important;
+  background-color: rgba(255, 255, 255, 0.12) !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-dark.ant-btn:not(:disabled):active,
+[data-theme='light'] .vendorsys-export-trigger-on-dark.ant-btn:not(:disabled):active {
+  color: #91caff !important;
+}
+
+[data-theme='dark'] .vendorsys-export-trigger-on-dark.ant-btn[disabled],
+[data-theme='light'] .vendorsys-export-trigger-on-dark.ant-btn[disabled] {
+  color: rgba(255, 255, 255, 0.3) !important;
+}

package/src/ui/UIFilePreview/ExportDropdown.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import { Button, Dropdown, type ButtonProps, type MenuProps } from 'antd';
+import { DownOutlined, DownloadOutlined, FilePdfFilled } from '@ant-design/icons';
+import './ExportDropdown.css';
+
+export interface ExportDropdownProps {
+  /** 导出 PDF（不传则菜单里不出现该项） */
+  onExportPdf?: () => void;
+  /** 下载原始文件（不传则菜单里不出现该项） */
+  onDownload?: () => void | Promise<void>;
+  exportingPdf?: boolean;
+  downloading?: boolean;
+  disabled?: boolean;
+  /** 触发按钮文案，默认「导出」 */
+  label?: string;
+  /** 透传给触发按钮，用于各出入口保留原有 type / size / className / style */
+  buttonProps?: ButtonProps;
+  /** 透传给 Dropdown，默认 'vendorsys-export-dropdown' */
+  overlayClassName?: string;
+  /** 额外的自定义菜单项，插入在「导出PDF」与「下载」之间 */
+  extraItems?: MenuProps['items'];
+}
+
+/**
+ * 统一的「导出」下拉按钮：「导出PDF」+ 自定义项 + 「下载」。
+ * 两项都没有时整体不渲染，避免出现空下拉。
+ */
+export const ExportDropdown: React.FC<ExportDropdownProps> = ({
+  onExportPdf,
+  onDownload,
+  exportingPdf = false,
+  downloading = false,
+  disabled,
+  label = '导出',
+  buttonProps,
+  overlayClassName = 'vendorsys-export-dropdown',
+  extraItems,
+}) => {
+  const items = useMemo<MenuProps['items']>(() => {
+    const result: NonNullable<MenuProps['items']> = [];
+
+    if (onExportPdf) {
+      result.push({
+        key: 'pdf',
+        icon: <FilePdfFilled />,
+        label: '导出PDF',
+        disabled: exportingPdf,
+        onClick: () => {
+          onExportPdf();
+        },
+      });
+    }
+
+    if (extraItems && extraItems.length > 0) {
+      result.push(...extraItems);
+    }
+
+    if (onDownload) {
+      result.push({
+        key: 'download',
+        icon: <DownloadOutlined />,
+        label: '下载',
+        disabled: downloading,
+        onClick: () => {
+          void onDownload();
+        },
+      });
+    }
+
+    return result;
+  }, [onExportPdf, onDownload, exportingPdf, downloading, extraItems]);
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <Dropdown
+      menu={{ items }}
+      trigger={['click']}
+      overlayClassName={overlayClassName}
+      placement="bottomRight"
+      // DocxEditor 内部的工具栏层级很高，antd 默认把 popup 挂在 trigger 的父节点上且
+      // z-index 只有 1050，会被编辑器工具栏/弹窗盖住，表现成「点了没反应」。
+      // 这里统一挂到 body，配合 CSS 里的高 z-index 保证可见。
+      getPopupContainer={(triggerNode) => triggerNode?.ownerDocument?.body ?? document.body}
+    >
+      <Button
+        {...buttonProps}
+        className={['vendorsys-export-trigger', buttonProps?.className].filter(Boolean).join(' ')}
+        type={buttonProps?.type ?? 'text'}
+        loading={exportingPdf || downloading || buttonProps?.loading}
+        disabled={disabled || buttonProps?.disabled}
+        // DocxEditor / ProseMirror 在 document 上挂了全局 mousedown 监听并做编辑器 blur 检测，
+        // 点击头部按钮会让编辑器失焦 → 重渲染，下拉 popup 刚打开就被关掉（表现为「点了没反应」）。
+        // 沿用 WordEditor 里自定义样式下拉的做法：在 mousedown 阶段阻止默认行为，避免 focus 被抢。
+        onMouseDown={(e) => {
+          buttonProps?.onMouseDown?.(e);
+          e.preventDefault();
+        }}
+        icon={<DownloadOutlined />}
+      >
+        {label}
+      </Button>
+    </Dropdown>
+  );
+};
+
+export default ExportDropdown;