@ibiz-template-plugin/ibiz-file-previewer 0.0.0

package/dist/types/controller/file-preview-shell-controller.d.ts

@@ -0,0 +1,77 @@
+import { Ref } from 'vue';
+import { IFilePreviewerOption, IFilePreviewShellController, IFilePreviewerData, IFilePreviewShellState } from '../interface';
+/**
+ * 文件预览器控制器
+ */
+export declare class FilePreviewShellController implements IFilePreviewShellController {
+    private options;
+    /**
+     * 当前 Vue 应用
+     */
+    private currentApp;
+    /**
+     * 文件预览器状态对象
+     */
+    state: Ref<IFilePreviewShellState>;
+    /**
+     * 构造函数
+     * @param options
+     */
+    constructor(options: IFilePreviewerOption);
+    /**
+     * 解析参数
+     */
+    private parseParams;
+    /**
+     * 解析引擎类型
+     */
+    private parseEngineType;
+    /**
+     * 解析预览项
+     * @param data
+     */
+    private parsePreviewItem;
+    /**
+     * 挂载组件实例
+     */
+    private mountComponent;
+    /**
+     * 销毁组件实例
+     */
+    private destroyComponent;
+    /**
+     * 更新视图
+     * @param data
+     */
+    updateView(data: IFilePreviewerData): Promise<void>;
+    /**
+     * 获取内容
+     * @returns
+     */
+    getOptions(): IFilePreviewerOption;
+    /**
+     *  获取状态
+     * @returns
+     */
+    getState(): IFilePreviewShellState;
+    /**
+     * 下载原始文件
+     * @param event
+     */
+    downloadOriginal(event: MouseEvent): Promise<void>;
+    /**
+     * 复制文本内容
+     * @param event
+     */
+    copyTextContent(event: MouseEvent): Promise<void>;
+    /**
+     * 导出为PDF
+     * @param event
+     */
+    exportToPdf(event: MouseEvent): Promise<void>;
+    /**
+     * 导出为MD
+     * @param event
+     */
+    exportToMd(event: MouseEvent): Promise<void>;
+}

package/dist/types/controller/file-preview-text-controller.d.ts

@@ -0,0 +1,11 @@
+import { IFilePreviewItemState } from '../interface';
+import { FilePreviewItemController } from './file-preview-item-controller';
+/**
+ * 文本类预览控制器
+ */
+export declare class FilePreviewTextController<S extends IFilePreviewItemState = IFilePreviewItemState> extends FilePreviewItemController<S> {
+    /**
+     * 获取内容
+     */
+    getContent(): Promise<string | object>;
+}

package/dist/types/controller/index.d.ts

@@ -0,0 +1,4 @@
+export { FilePreviewShellController } from './file-preview-shell-controller';
+export { FilePreviewTextController } from './file-preview-text-controller';
+export { FilePreviewImageController } from './file-preview-image-controller';
+export { FilePreviewImageGroupController } from './file-preview-image-group-controller';

package/dist/types/hook/index.d.ts

@@ -0,0 +1 @@
+export { useTeleportWithDelay } from './use-teleport-with-delay';

package/dist/types/hook/use-teleport-with-delay.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+/**
+ * 延迟渲染 Teleport 内容的 Hook
+ * 解决目标元素未准备好的问题
+ */
+export declare const useTeleportWithDelay: () => {
+    shouldRender: Ref<boolean>;
+};

package/dist/types/icon/index.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from "vue/jsx-runtime";
+export declare const ZoomOutSvg: () => JSX.Element;
+export declare const ZoomInSvg: () => JSX.Element;
+export declare const DownLoadSvg: () => JSX.Element;
+export declare const ClockwiseSvg: () => JSX.Element;
+export declare const CounterClockwiseSvg: () => JSX.Element;
+export declare const ThumbnailSvg: () => JSX.Element;
+export declare const UpPageSvg: () => JSX.Element;
+export declare const DownPageSvg: () => JSX.Element;

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { FilePreviewShellController } from './controller';
+export type { IFilePreviewerData, IFilePreviewerOption } from './interface';
+export { ActionType } from './const/action-type';

package/dist/types/interface/i-file-preview-item-controller.d.ts

@@ -0,0 +1,91 @@
+import { IFilePreviewShellController } from './i-file-preview-shell-controller';
+/**
+ * 文件预览项状态
+ */
+export interface IFilePreviewItemState {
+    /**
+     * 文件内容
+     */
+    content: string | object;
+    /**
+     * 放大倍数
+     */
+    scale: number;
+    /**
+     * 主题
+     */
+    theme: 'light' | 'dark';
+}
+/**
+ * 文件预览图片状态
+ */
+export interface IFilePreviewImageState extends IFilePreviewItemState {
+    /**
+     * 旋转角度
+     */
+    rotate: number;
+}
+/**
+ * 文件预览图片组状态
+ */
+export interface IFilePreviewImageGroupState extends IFilePreviewItemState {
+    /**
+     * 缩略图面板是否显示
+     */
+    showThumbnailPanel: boolean;
+    /**
+     * 当前页码
+     */
+    currentPage: number;
+    /**
+     * 图片组列表
+     */
+    items: {
+        description: string;
+        image_url: string;
+        index: number;
+    }[];
+    /**
+     * 总数
+     */
+    total: number;
+}
+/**
+ * 文件预览初始化参数
+ */
+export interface IInitializeParam {
+    /**
+     * 主题
+     */
+    theme: 'light' | 'dark';
+}
+/**
+ * 文件预览控制器
+ */
+export interface IFilePreviewItemController {
+    /**
+     * 状态
+     */
+    state: Record<string, any>;
+    /**
+     * 初始化
+     * @param param 初始化参数
+     */
+    initialize(param: IInitializeParam): Promise<void>;
+    /**
+     * 获取内容
+     */
+    getContent(): Promise<string | object>;
+    /**
+     * 缩小预览
+     */
+    zoomOutPreview(event: MouseEvent): void;
+    /**
+     * 放大预览
+     */
+    zoomInPreview(event: MouseEvent): void;
+}
+/**
+ * 文件预览构造函数
+ */
+export type IFilePreviewItemConstructor = (filePreviewShell: IFilePreviewShellController) => IFilePreviewItemController;

package/dist/types/interface/i-file-preview-shell-controller.d.ts

@@ -0,0 +1,59 @@
+import { Component } from 'vue';
+import { IFilePreviewerData, IFilePreviewerOption } from './i-file-previewer-option';
+import { IFilePreviewItemController } from './i-file-preview-item-controller';
+import { EngineType } from '../const/file-type';
+/**
+ * 文件预览壳状态
+ */
+export interface IFilePreviewShellState {
+    /**
+     * 文件ID
+     */
+    fileId: string;
+    /**
+     * 文件名称
+     */
+    fileName: string;
+    /**
+     * 文件类型
+     */
+    fileType: string;
+    /**
+     * 文件分类
+     */
+    fileCat: string;
+    /**
+     * 预览组件
+     */
+    preViewComp: Component | undefined;
+    /**
+     * 预览控制器
+     */
+    preViewController: IFilePreviewItemController | undefined;
+    /**
+     * 主题
+     */
+    theme: 'light' | 'dark';
+    /**
+     * 引擎类型
+     */
+    engineType: EngineType;
+}
+/**
+ * 文件预览壳控制器接口
+ */
+export interface IFilePreviewShellController {
+    /**
+     * 更新视图
+     * @param data
+     */
+    updateView(data: IFilePreviewerData): Promise<void>;
+    /**
+     * 获取预览壳配置项
+     */
+    getOptions(): IFilePreviewerOption;
+    /**
+     * 获取预览器状态
+     */
+    getState(): IFilePreviewShellState;
+}

package/dist/types/interface/i-file-previewer-option.d.ts

@@ -0,0 +1,94 @@
+/**
+ * 文件预览组件配置项 - 通过 URL 预览
+ */
+interface IFilePreviewerDataWithURL {
+    /**
+     * 预览文件ID
+     */
+    id?: string;
+    /**
+     * 预览文件名称
+     */
+    name?: string;
+    /**
+     * 预览文件分类
+     */
+    cat?: string;
+    /**
+     * 预览文件URL
+     */
+    url: string;
+}
+/**
+ * 文件预览组件配置项 - 通过 ID 预览，当使用ID时，name是必需的
+ */
+interface IFilePreviewerDataWithID {
+    /**
+     * 预览文件ID
+     */
+    id: string;
+    /**
+     * 预览文件名称
+     */
+    name: string;
+    /**
+     * 预览文件分类
+     */
+    cat: string;
+    /**
+     * 预览文件URL
+     */
+    url?: string;
+}
+/**
+ * 定义通用属性接口
+ */
+export interface IFilePreviewerOption {
+    /**
+     * 主题
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * 挂载点
+     */
+    selector: string;
+    /**
+     * 获取文件内容
+     * @param id 标识
+     * @param type 类型
+     * @param cat 分类
+     */
+    getContent(id: string, type: string, cat: string): Promise<string | object | undefined>;
+    /**
+     * 获取文件路径
+     * @param id
+     * @param cat
+     * @returns
+     */
+    getUrl: (id: string, cat: string) => Promise<string>;
+    /**
+     * 上传文件至oss
+     * @param file
+     */
+    upLoadFileToOss(url: string): Promise<{
+        id: string;
+        name: string;
+        cat: string;
+    } | undefined>;
+    /**
+     * 下载文件
+     * @param id
+     * @param cat
+     */
+    downLoadFile(id: string, name: string, cat: string): Promise<void>;
+    /**
+     * 文件操作成功
+     * @param type
+     */
+    actionSuccessCallBack(type: string): Promise<void>;
+}
+/**
+ * 文件预览组件配置项
+ */
+export type IFilePreviewerData = IFilePreviewerDataWithURL | IFilePreviewerDataWithID;
+export {};

package/dist/types/interface/index.d.ts

@@ -0,0 +1,3 @@
+export type { IFilePreviewerData, IFilePreviewerOption, } from './i-file-previewer-option';
+export type { IFilePreviewShellState, IFilePreviewShellController, } from './i-file-preview-shell-controller';
+export type { IInitializeParam, IFilePreviewItemState, IFilePreviewImageState, IFilePreviewImageGroupState, IFilePreviewItemController, IFilePreviewItemConstructor, } from './i-file-preview-item-controller';

package/dist/types/util/index.d.ts

@@ -0,0 +1 @@
+export { fileNameToFileType, throttle } from './util';

package/dist/types/util/util.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 文件名转为文件类型
+ * @param fileName
+ * @returns
+ */
+export declare const fileNameToFileType: (fileName: string) => string;
+/**
+ * 节流函数
+ * @param func
+ * @param wait
+ * @returns
+ */
+export declare const throttle: <T extends (...args: any[]) => any>(func: T, wait: number) => ((...args: Parameters<T>) => void);

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ibiz-template-plugin/ibiz-file-previewer",
+  "version": "0.0.0",
+  "description": "iBiz文件预览器",
+  "main": "./dist/index.cjs", 
+  "module": "./dist/index.es.js",
+  "browser": "./dist/index.umd.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs",
+      "browser": "./dist/index.umd.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "publish:npm": "npm run build && npm publish --access public --registry=https://registry.npmjs.org/"
+  },
+  "keywords": [],
+  "author": "iBizLab",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/turndown": "^5.0.6",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "sass": "^1.69.5",
+    "terser": "^5.44.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  },
+  "dependencies": {
+    "highlight.js": "11.11.1",
+    "turndown": "7.2.2",
+    "vditor": "3.11.2",
+    "vue": "^3.3.8"
+  }
+}