页面范式与业务核心组件

// 1. 物理面单静默网络打印 (action: "print")
AcmePrinter.init({
    action: "print",
    templateId: "tpl_scm_waybill",
    silent: true,
    data: {
        receiverName: "张三",
        receiverPhone: "13800138000",
        address: "浙江省杭州市西湖区求是路 15 号",
        weightKg: 2.45
    },
    onSuccess: function() {
        Msg.Success("打印通知", "面单已成功推送至物理打印机");
    }
});

// 2. 局部 DOM 容器嵌入 PDF 预览 (action: "preview")
AcmePrinter.init({
    action: "preview",
    templateId: "tpl_finance_receipt",
    container: "#pdfViewerContainer",
    data: { id: "REC_2026_092" }
});

<!-- 1. Razor 视图层 DOM 规划 -->
<div class="form-group col-md-12">
    <label>关联业务操作规范指引 (本地知识匹配支持)</label>
    <input type="text" id="financeKbInput" class="form-control" placeholder="输入关键字模糊匹配业务流程..." />
    <div id="financeKbContainer" class="kb-results-panel mt-2"></div>
</div>

<script>
$(function() {
    // 2. 页面内注册初始化本地匹配知识库
    AcmeKnowledgeBase.init("#financeKbInput", "#financeKbContainer", {
        solutions: window.LOCAL_SOLUTIONS || [
            { keywords: ["差旅", "报销", "机票"], title: "集团差旅管理及飞机舱位审批标准说明", url: "/docs/finance/travel-rule" },
            { keywords: ["请假", "年假", "调休"], title: "员工考勤与年假折算标准规范手册", url: "/docs/hr/attendance-standard" }
        ],
        onSelected: function(solution) {
            console.log("用户点击选中了匹配方案: ", solution);
            // 典型动作：跳转到知识文档页面
            window.open(solution.url);
        }
    });
});
</script>

<!-- 静态 HTML 布局规范 -->
<div class="ep-card ep-product-card ep-card--hover" data-sku="SPU10029">
    <div class="ep-product-card__image-wrapper" style="position: relative; padding-bottom: 100%; overflow: hidden; border-radius: 4px; background: #f8f9fa; margin-bottom: 8px;">
        <a href="/images/product-large.jpg" class="lightGalleryHref">
            <img data-src="/images/product.jpg" 
                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                 alt="Moji Coffee Product"
                 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s;"
                 class="lazyload ep-product-card__img">
        </a>
        <div class="ep-badge ep-badge-danger" style="position: absolute; top: 8px; left: 8px; padding: 2px 6px; border-radius: 4px; color: white; background: var(--danger-color); font-size: 10px;">新品</div>
    </div>
    <div class="ep-product-card__content">
        <h3 class="ep-text-base ep-text-bold ep-mb-1" style="height: 2.4em; overflow: hidden; line-height: 1.2;">Moji 焦糖拿铁咖啡大杯</h3>
        <div class="ep-d-flex ep-justify-between ep-align-center ep-mb-2">
            <span class="ep-text-xs ep-text-muted">SKU: SPU10029</span>
            <span class="ep-text-xs ep-text-muted">库存: 99 件</span>
        </div>
        <div class="ep-d-flex ep-justify-between ep-align-center ep-mt-2">
            <div class="ep-product-price">
                <span class="ep-text-lg ep-text-bold ep-text-danger">¥28.00</span>
                <span class="ep-text-xs ep-text-muted" style="text-decoration: line-through;">¥32.00</span>
            </div>
            <button class="ep-btn ep-btn-sm ep-btn-primary ep-product-card__action">
                <i class="fas fa-cart-plus"></i>
            </button>
        </div>
    </div>
</div>

// 1. 动态生成商品卡片并追加到容器中
var cardElement = ProductCard.create({
    sku: "SPU10029",
    title: "Moji 焦糖拿铁咖啡大杯",
    image: "/images/moji-coffee.jpg",
    badge: "热销",
    badgeType: "danger",
    stock: 99,
    price: 28.00,
    originalPrice: 32.00
}, {
    onAddToCart: function(cardData) {
        console.log("加入购物车商品 SKU:", cardData.sku);
        // 执行购物车逻辑...
    },
    onImageError: function(imgElement) {
        console.warn("图片加载失败，降级为默认占位图");
    }
});

$("#productContainer").append(cardElement);

// 2. 对于已存在的静态 HTML 卡片，也可以直接调用 init 方法初始化事件监听
ProductCard.init(document.getElementById("existingCard"), {
    onAddToCart: function(cardData) {
        // 事件响应...
    }
});

<!-- 1. 移动端 HTML 布局结构 -->
<div id="myMobileScrollContainer" data-mobile-iscroll="true" class="mobile-scroll-wrapper" style="height: 100vh; overflow: hidden; position: relative;">
    <ul class="list-unstyled p-0 m-0" id="myPdaTaskQueue">
        <li class="mobile-task-card p-3 border-bottom" onclick="startPick('T101')">
            <div class="d-flex justify-content-between">
                <strong class="text-dark">PDA 待提货单 1001</strong>
                <span class="text-success">待处理</span>
            </div>
            <div class="small text-muted mt-1">货位号: A-04 | 数量: 15 件</div>
        </li>
        <li class="mobile-task-card p-3 border-bottom" onclick="startPick('T102')">
            <div class="d-flex justify-content-between">
                <strong class="text-dark">PDA 待提货单 1002</strong>
                <span class="text-success">待处理</span>
            </div>
            <div class="small text-muted mt-1">货位号: B-12 | 数量: 8 件</div>
        </li>
    </ul>
</div>

<script>
$(function() {
    // 2. 初始化整个页面范围内的移动端弹性滚动 wrapper (传入 DOM document)
    AcmeMobileScroll.init(document);
    
    // 3. 当页面有异步数据动态追加或清空时，必须调用静态方法 refreshAll 重新计算高度，否则会导致滑动受阻
    // 注意：不能通过 init 的返回值调用 .refresh() (因为它返回 undefined)
    setTimeout(function() {
        AcmeMobileScroll.refreshAll();
    }, 300);
});
</script>