@cecee/document-flip-book 1.0.18 → 1.0.20

package/dist/cjs/AccountingBook/index.less

@@ -0,0 +1,188 @@
+.flipbook-container {
+    position: relative;
+    width: 1100px;
+    height: 660px;
+    margin: 0 auto;
+    overflow: visible;
+    border-radius: 24px;
+}
+
+.flipbook {
+    height: calc(100vh - 182px);
+    overflow: auto;
+    padding: 28px 220px 36px 140px;
+    box-sizing: border-box;
+    background:
+        radial-gradient(circle at top left, rgba(214, 186, 145, 0.18), transparent 28%),
+        linear-gradient(180deg, #f7f1e7 0%, #f3ecdf 100%);
+}
+
+
+.stf__parent canvas {
+    position: static !important;
+}
+
+.flip-book {
+    width: 998px !important;
+    position: absolute !important;
+    left: 150px;
+    top: 140px;
+    z-index: 2;
+    border-radius: 8px;
+    box-shadow:
+        0 20px 32px rgba(122, 84, 48, 0.18),
+        0 4px 12px rgba(122, 84, 48, 0.2);
+    overflow: hidden;
+}
+
+.page {
+    background-color: white;
+    position: relative;
+    overflow: hidden;
+    pointer-events: auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+
+    .page-content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        z-index: 1;
+        background-color: white;
+    }
+
+    .page-back {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 0;
+        backface-visibility: visible;
+        transform: rotateY(180deg);
+        background-color: white;
+    }
+}
+
+// .page-content {
+//     width: 100%;
+//     height: 100%;
+// }
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+.voucher-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+}
+
+.attachment-page {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    padding: 0 20px;
+    text-align: center;
+}
+
+.placeholder-page {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    z-index: 2;
+    text-align: center;
+}
+
+.error-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+}
+
+.empty-page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+}
+
+.fliterBar {
+    position: absolute;
+    left: calc(100% + 40px);
+    top: 25%;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+
+.filter-item {
+    width: 100%;
+    height: 34px;
+    padding: 0 12px 0 18px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 500;
+    color: #595959;
+    background: #FFF9E1;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    position: relative;
+    border-radius: 0 4px 4px 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background: #FFC53D;
+        transition: all 0.3s ease;
+    }
+
+    &:hover {
+        background: #FFF1B8;
+        transform: translateX(4px);
+
+        &::before {
+            width: 4px;
+        }
+    }
+
+    &.active {
+        background: #FFE58F;
+        color: #262626;
+        font-weight: bold;
+        transform: translateX(8px);
+        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.08);
+
+        &::before {
+            width: 6px;
+            background: #FAAD14;
+        }
+    }
+
+    .filter-text {
+        letter-spacing: 1px;
+    }
+}

package/dist/cjs/AccountingBook/types.d.ts

@@ -0,0 +1,84 @@
+/// <reference types="react" />
+export interface Attachment {
+    id: number;
+    path: string;
+}
+export interface StubPageDetail {
+    id: number;
+    dt: string;
+    amount: string;
+    code: number;
+    remark: string;
+    subject: string;
+    trade_direction: string;
+    stub_id?: number;
+}
+export interface StubPageRaw {
+    id: number;
+    title: string;
+    dt: string;
+    amount: string;
+    subject?: string | null;
+    code: string;
+    attachments_count?: number;
+    stub_page_id?: number;
+    document_number?: string;
+    created_at?: string;
+    updated_at?: string;
+    acc17c_id?: number;
+    attachments: Attachment[];
+}
+export interface VoucherItem {
+    id: number;
+    code: number;
+    dt: string;
+    remark: string;
+    amount: string;
+}
+export interface OriginalDocument {
+    id: number;
+    title: string;
+    amount: string;
+    attachments: Attachment[];
+}
+export interface StubPage {
+    id: number;
+    dt: string;
+    code: number;
+    remark: string;
+    amount: string;
+    stub_page_details: StubPageDetail[];
+    stub_page_raws: StubPageRaw[];
+}
+export interface SearchOption {
+    label: string;
+    value: string;
+    groupKey: number;
+    rawId: number;
+    amount: string;
+    keywords: string[];
+    pageKey?: string;
+    title?: string;
+    pageLabel?: string;
+}
+export interface VoucherGroup {
+    groupKey: number;
+    stubPage: StubPage;
+    voucherItems: VoucherItem[];
+    pages: React.ReactNode[];
+}
+export interface PageRecord {
+    pageKey: string;
+    page: React.ReactNode;
+    groupKey: number;
+    pageType: 'voucher' | 'attachment' | 'other';
+    title?: string;
+    titles: string[];
+    amount?: string;
+    voucherCode?: number;
+    rawId?: number;
+    attachmentId?: number;
+    documentNumber?: string;
+    dt?: string;
+    pageLabel: string;
+}

package/dist/cjs/AccountingBook/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/AccountingBook/utils/canvasUtils.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+/**
+ * 预加载单张图片并转 Base64
+ */
+export declare const preloadAndConvertImage: (url: string) => Promise<string | null>;
+/**
+ * 批量预加载图片
+ */
+export declare const batchPreloadImages: (imageUrls: string[]) => Promise<Map<any, any>>;
+/**
+ * 从 React 节点提取附件信息
+ */
+export declare const extractAttachmentInfo: (pageElement: React.ReactElement) => {
+    type: string;
+    src: any;
+    alt: any;
+    attachmentCount: any;
+    amount: any;
+    pageNumber?: undefined;
+} | {
+    type: string;
+    src: any;
+    pageNumber: any;
+    attachmentCount: any;
+    amount: any;
+    alt?: undefined;
+} | null;
+/**
+ * Base64 转图片元素
+ */
+export declare const createImageElementFromBase64: (base64Data: string) => Promise<HTMLImageElement | null>;
+/**
+ * 直接通过 URL 创建图片元素
+ */
+export declare const createImageElementDirect: (imageSrc: string) => Promise<HTMLImageElement | null>;
+/**
+ * PDF 页面转图片 Base64
+ */
+export declare const renderPDFPageToImageBase64: (pdfPath: string, pageNumber?: number) => Promise<string | null>;
+/**
+ * 创建凭证 Canvas（用于导出）
+ */
+export declare const createVoucherCanvas: (voucherProps: any, baseVoucherInfo: any) => Promise<HTMLCanvasElement | null>;
+/**
+ * 创建附件 Canvas
+ */
+export declare const createAttachmentCanvasFixed: (attachmentInfo: any, preloadedImages: Map<string, string>) => Promise<HTMLCanvasElement | null>;
+/**
+ * 创建封面 Canvas
+ */
+export declare const createCoverCanvas: (coverData: any, companyName: string) => Promise<HTMLCanvasElement | null>;