@mxmweb/fviewer 1.0.5

package/Preview.d.ts

@@ -0,0 +1,3 @@
+import { Annotation } from './core/types';
+export declare const pdfAnnotations: Annotation[];
+export default function Preview(): import("react/jsx-runtime").JSX.Element;

package/README.md

@@ -0,0 +1 @@
+# 工具库架构初始化

package/StreamPreview.d.ts

@@ -0,0 +1,3 @@
+import { Annotation } from './core/types';
+export declare const streamAnnotations: Annotation[];
+export default function StreamPreview(): import("react/jsx-runtime").JSX.Element;

package/adopters/GientechStreamReader.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { AppTheme, Annotation, ToolsConfig } from '../core/types';
+export interface GientechStreamReaderProps {
+    convertedFilePath: string;
+    fileName?: string;
+    fileType: string;
+    initialPage?: number;
+    totalPages?: number;
+    annotations?: Annotation[];
+    userName?: string;
+    userId?: string;
+    pageSize?: number;
+    streamApiUrl?: string;
+    authorization?: string;
+    eventsEmit?: (name: string, data?: any, innerFn?: any) => void;
+    styles?: {
+        theme?: AppTheme;
+        mode?: 'light' | 'dark';
+    };
+    tools?: ToolsConfig;
+    customComponents?: {
+        LoadingComponent?: React.ComponentType<{
+            status: string;
+            theme: AppTheme;
+        }>;
+        ErrorComponent?: React.ComponentType<{
+            error: string;
+            theme: AppTheme;
+        }>;
+    };
+    className?: string;
+    headerClass?: string;
+    contentClass?: string;
+}
+/**
+ * GientechStreamReader组件
+ * 基于stream接口的文件读取器，支持分页获取PDF数据并渲染
+ * 遵循adopter_develop规范，使用HOC模式封装core组件
+ *
+ * @param props - 组件属性
+ * @returns GientechStreamReader组件
+ */
+declare const GientechStreamReader: React.FC<GientechStreamReaderProps>;
+export default GientechStreamReader;

package/adopters/StaticFileReader.d.ts

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { AppTheme, Annotation, ToolsConfig } from '../core/types';
+export interface StaticFileReaderProps {
+    fileUrl: string;
+    fileType?: string;
+    fileName?: string;
+    token?: string;
+    initialPage?: number;
+    annotations?: Annotation[];
+    data?: any;
+    eventsEmit?: (name: string, data?: any, innerFn?: any) => void;
+    styles?: {
+        theme?: AppTheme;
+        mode?: 'light' | 'dark';
+    };
+    tools?: ToolsConfig;
+    customComponents?: {
+        LoadingComponent?: React.ComponentType<{
+            status: string;
+            theme: AppTheme;
+        }>;
+        ErrorComponent?: React.ComponentType<{
+            error: string;
+            theme: AppTheme;
+        }>;
+    };
+    className?: string;
+    headerClass?: string;
+    contentClass?: string;
+}
+/**
+ * StaticFileReader组件
+ * 静态文件读取器，支持从URL加载文件并解析显示
+ *
+ * @param props - 组件属性
+ * @returns StaticFileReader组件
+ */
+declare const StaticFileReader: React.FC<StaticFileReaderProps>;
+export default StaticFileReader;

package/adopters/components/Header/Toolbar.d.ts

@@ -0,0 +1 @@
+export {};

package/adopters/components/Header/index.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { AppTheme, ToolsConfig } from '../../../core/types';
+export interface HeaderProps {
+    fileName?: string;
+    currentPage?: number;
+    totalPage?: number;
+    tools?: ToolsConfig;
+    styles?: {
+        theme?: AppTheme;
+    };
+    onPrevPage?: () => void;
+    onNextPage?: () => void;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onAnnotationToggle?: () => void;
+    onDownload?: () => void;
+    onRotateLeft?: () => void;
+    onRotateRight?: () => void;
+    onClose?: () => void;
+    scale?: number;
+    isAnnotating?: boolean;
+    className?: string;
+}
+/**
+ * Header组件
+ * 负责文件查看器的头部工具栏
+ *
+ * @param props - 组件属性
+ * @returns Header组件
+ */
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/assets/style.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.pdf-container{position:relative;overflow:auto}.pdf-canvas{display:block;margin:0 auto}.annotation-layer{position:absolute;top:0;left:0;pointer-events:none}.annotation-item{position:absolute;pointer-events:auto;cursor:pointer;border-radius:2px;transition:all .2s ease}.annotation-item:hover{opacity:.8}.tool-button{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border:none;border-radius:4px;background:transparent;color:inherit;cursor:pointer;transition:all .2s ease}.tool-button:hover{background:#0000000d}.tool-button.active{background:#007bff1a;color:#007bff}.loading-container{display:flex;align-items:center;justify-content:center;height:100%;color:#666}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#dc3545;text-align:center;padding:20px}

package/core/Annotation/index.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { Annotation as AnnotationType } from '../types';
+export interface AnnotationProps {
+    pageNumber: number;
+    scale: number;
+    isAnnotating: boolean;
+    annotations: AnnotationType[];
+    onAnnotationAdd?: (annotation: AnnotationType) => void;
+    onAnnotationDelete?: (annotationId: string) => void;
+    readOnly?: boolean;
+}
+export declare const Annotation: React.FC<AnnotationProps>;
+export default Annotation;

package/core/Fviewer.d.ts

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+import { AppTheme, Annotation, ToolsConfig } from './types';
+export interface CustomizeComponents {
+    LoadingComponent?: React.ComponentType<{
+        status: string;
+        theme: AppTheme;
+    }>;
+    ErrorComponent?: React.ComponentType<{
+        error: string;
+        theme: AppTheme;
+    }>;
+}
+export interface FviewerData {
+    content: any;
+    fileName?: string;
+    fileType?: string;
+    totalPages?: number;
+    pdfStartPage?: number;
+}
+export interface FviewerProps {
+    data: FviewerData;
+    annotationData?: Annotation[];
+    totalPage?: number;
+    currentPage?: number;
+    scale?: number;
+    rotation?: number;
+    eventsEmit?: (name: string, data?: any, innerFn?: any) => void;
+    styles?: {
+        theme?: AppTheme;
+        mode?: 'light' | 'dark';
+    };
+    tools?: ToolsConfig;
+    customComponents?: CustomizeComponents;
+    className?: string;
+    contentClass?: string;
+}
+/**
+ * Fviewer核心组件
+ * 负责文件类型检测、内容渲染和状态管理
+ *
+ * @param props - 组件属性
+ * @returns Fviewer组件
+ */
+declare const Fviewer: React.FC<FviewerProps>;
+export default Fviewer;

package/core/ImageRender/index.d.ts

@@ -0,0 +1 @@
+export {};

package/core/PdfRender/index.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { AppTheme, Annotation as AnnotationType } from '../types';
+export interface PdfRenderProps {
+    pdfDocument: any | null;
+    currentPage: number;
+    pdfStartPage?: number;
+    scale: number;
+    annotations: AnnotationType[];
+    isAnnotating: boolean;
+    onPageChange?: (pageNumber: number) => void;
+    onAnnotationChange?: (annotation: AnnotationType) => void;
+    onAnnotationDelete?: (annotationId: string) => void;
+    styles?: {
+        theme?: AppTheme;
+    };
+}
+/**
+ * PDF渲染组件
+ * 负责PDF文件的具体渲染和标注功能
+ *
+ * @param props - 组件属性
+ * @returns PDF渲染组件
+ */
+declare const PdfRender: React.FC<PdfRenderProps>;
+export default PdfRender;

package/core/TxtRender/index.d.ts

@@ -0,0 +1 @@
+export {};

package/core/index.d.ts

@@ -0,0 +1,6 @@
+import { default as Fviewer, FviewerProps } from './Fviewer';
+import { default as PdfRender, PdfRenderProps } from './PdfRender';
+import { AppTheme, Annotation, ToolsConfig } from './types';
+export { Fviewer, PdfRender };
+export type { FviewerProps, PdfRenderProps, AppTheme, Annotation, ToolsConfig };
+export default Fviewer;

package/core/types.d.ts

@@ -0,0 +1,46 @@
+export interface AppTheme {
+    colors: {
+        primary: string;
+        secondary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        background: string;
+        text: string;
+        border: string;
+        disabled: string;
+        disabledBackground: string;
+        disabledText: string;
+        [key: string]: any;
+    };
+    space: {
+        sidebar: string;
+        size: string;
+        radius: string;
+        padding: string;
+        margin: string;
+        shadow: string;
+        lineHeight: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+export interface Annotation {
+    id: string;
+    pageNumber: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    content?: string;
+    color?: string;
+}
+export interface ToolsConfig {
+    annotation?: boolean;
+    download?: boolean;
+    zoom?: boolean;
+    close?: boolean;
+    navigation?: boolean;
+    rotate?: boolean;
+}

package/core/utils/fileParser.d.ts

@@ -0,0 +1,64 @@
+export type FileType = 'pdf' | 'image' | 'text' | 'markdown' | 'html' | 'unknown';
+export interface ParseResult {
+    type: FileType;
+    content: any;
+    fileName?: string;
+    fileType?: string;
+    totalPages?: number;
+    error?: string;
+}
+export interface ParseOptions {
+    fileName?: string;
+    fileType?: string;
+    token?: string;
+}
+/**
+ * 检测文件类型
+ * @param fileName - 文件名
+ * @param fileType - 文件类型
+ * @param content - 文件内容
+ * @returns 文件类型
+ */
+export declare const detectFileType: (fileName?: string, fileType?: string, content?: any) => FileType;
+/**
+ * 解析PDF文件（支持静态文件和stream chunk）
+ * @param data - PDF数据（ArrayBuffer或URL）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parsePdfFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;
+/**
+ * 解析图片文件
+ * @param data - 图片数据（URL或ArrayBuffer）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parseImageFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;
+/**
+ * 解析文本文件
+ * @param data - 文本数据（URL或ArrayBuffer）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parseTextFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;
+/**
+ * 解析Markdown文件
+ * @param data - Markdown数据（URL或ArrayBuffer）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parseMarkdownFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;
+/**
+ * 解析HTML文件
+ * @param data - HTML数据（URL或ArrayBuffer）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parseHtmlFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;
+/**
+ * 统一文件解析函数
+ * @param data - 文件数据（URL或ArrayBuffer）
+ * @param options - 解析选项
+ * @returns 解析结果
+ */
+export declare const parseFile: (data: ArrayBuffer | string, options?: ParseOptions) => Promise<ParseResult>;

package/demo.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FViewer HTML 测试页面</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #333;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #2c3e50;
+            text-align: center;
+            border-bottom: 3px solid #3498db;
+            padding-bottom: 10px;
+        }
+        h2 {
+            color: #34495e;
+            margin-top: 30px;
+        }
+        .highlight {
+            background-color: #f39c12;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 3px;
+        }
+        .code-block {
+            background-color: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 5px;
+            padding: 15px;
+            font-family: 'Courier New', monospace;
+            overflow-x: auto;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+        }
+        th, td {
+            border: 1px solid #ddd;
+            padding: 12px;
+            text-align: left;
+        }
+        th {
+            background-color: #3498db;
+            color: white;
+        }
+        tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+        .button {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            margin: 5px;
+            transition: background-color 0.3s;
+        }
+        .button:hover {
+            background-color: #2980b9;
+        }
+        .alert {
+            padding: 15px;
+            margin: 20px 0;
+            border-radius: 5px;
+        }
+        .alert-success {
+            background-color: #d4edda;
+            border: 1px solid #c3e6cb;
+            color: #155724;
+        }
+        .alert-warning {
+            background-color: #fff3cd;
+            border: 1px solid #ffeaa7;
+            color: #856404;
+        }
+        .alert-error {
+            background-color: #f8d7da;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🚀 FViewer HTML 渲染测试页面</h1>
+
+        <div class="alert alert-success">
+            <strong>✅ 成功！</strong> 这是一个用于测试 FViewer HTML 渲染功能的复杂页面。
+        </div>
+
+        <h2>📋 功能特性</h2>
+        <p>这个 HTML 页面包含了多种元素来测试 <span class="highlight">FViewer</span> 的 HTML 渲染能力：</p>
+
+        <ul>
+            <li><strong>标题和段落</strong> - 测试基本文本渲染</li>
+            <li><strong>表格</strong> - 测试表格布局和样式</li>
+            <li><strong>代码块</strong> - 测试代码高亮显示</li>
+            <li><strong>按钮和链接</strong> - 测试交互元素</li>
+            <li><strong>警告框</strong> - 测试不同类型的提示信息</li>
+            <li><strong>CSS 样式</strong> - 测试样式渲染效果</li>
+        </ul>
+
+        <h2>📊 数据表格示例</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>功能模块</th>
+                    <th>状态</th>
+                    <th>描述</th>
+                    <th>优先级</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>PDF 渲染</td>
+                    <td>✅ 已完成</td>
+                    <td>支持 PDF 文件查看和标注</td>
+                    <td>高</td>
+                </tr>
+                <tr>
+                    <td>Markdown 渲染</td>
+                    <td>✅ 已完成</td>
+                    <td>支持 Markdown 语法和代码高亮</td>
+                    <td>高</td>
+                </tr>
+                <tr>
+                    <td>HTML 渲染</td>
+                    <td>🔄 测试中</td>
+                    <td>支持 HTML 标签和样式渲染</td>
+                    <td>中</td>
+                </tr>
+                <tr>
+                    <td>文本渲染</td>
+                    <td>✅ 已完成</td>
+                    <td>支持纯文本文件显示</td>
+                    <td>中</td>
+                </tr>
+                <tr>
+                    <td>图片渲染</td>
+                    <td>⏳ 计划中</td>
+                    <td>支持常见图片格式显示</td>
+                    <td>低</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <h2>💻 代码示例</h2>
+        <p>以下是一些代码示例来测试代码块的渲染：</p>
+
+        <div class="code-block">
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;示例页面&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;h1&gt;Hello World!&lt;/h1&gt;
+    &lt;p&gt;这是一个简单的 HTML 示例。&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+        </div>
+
+        <div class="code-block">
+// JavaScript 示例
+function greet(name) {
+    return `Hello, ${name}!`;
+}
+
+const message = greet('FViewer');
+console.log(message); // 输出: Hello, FViewer!
+        </div>
+
+        <h2>🔗 交互元素</h2>
+        <p>测试按钮和链接的渲染效果：</p>
+
+        <a href="#" class="button">主要按钮</a>
+        <a href="#" class="button" style="background-color: #27ae60;">成功按钮</a>
+        <a href="#" class="button" style="background-color: #e74c3c;">危险按钮</a>
+        <a href="#" class="button" style="background-color: #f39c12;">警告按钮</a>
+
+        <h2>⚠️ 警告信息</h2>
+        <div class="alert alert-warning">
+            <strong>⚠️ 注意！</strong> 这是一个警告信息，用于测试不同类型的提示框渲染。
+        </div>
+
+        <div class="alert alert-error">
+            <strong>❌ 错误！</strong> 这是一个错误信息，用于测试错误提示框的渲染效果。
+        </div>
+
+        <h2>🎨 样式测试</h2>
+        <p>测试各种文本样式：</p>
+        <ul>
+            <li><em>斜体文本</em> - 测试斜体效果</li>
+            <li><strong>粗体文本</strong> - 测试粗体效果</li>
+            <li><u>下划线文本</u> - 测试下划线效果</li>
+            <li><s>删除线文本</s> - 测试删除线效果</li>
+            <li><span style="color: #e74c3c;">红色文本</span> - 测试颜色样式</li>
+            <li><span style="font-size: 18px;">大号文本</span> - 测试字体大小</li>
+        </ul>
+
+        <h2>📝 总结</h2>
+        <p>这个 HTML 测试页面包含了丰富的元素和样式，可以有效测试 FViewer 的 HTML 渲染能力。如果这个页面能够正确显示，说明 FViewer 的 HTML 渲染功能工作正常。</p>
+
+        <div class="alert alert-success">
+            <strong>🎉 恭喜！</strong> 如果你能看到这个页面完整显示，说明 FViewer 的 HTML 渲染功能已经成功实现！
+        </div>
+    </div>
+</body>
+</html>