Calculation/app/view/change/ai_import_modal.ejs

<div class="modal fade change-ai-preview" id="change-ai-model" data-tid="<%= tender.id %>" data-change-id="<%= change.cid || change.id %>" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="change-ai-model-title" aria-hidden="true">
    <div class="change-ai-hover-preview" data-ai-hover-preview hidden aria-hidden="true"><img alt=""><span data-ai-hover-status>图片加载中…</span></div>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div><h5 class="modal-title" id="change-ai-model-title">AI 识别导入</h5><small class="text-muted">识别结果仅供参考，确认后才保存。</small></div>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="change-ai-steps" aria-label="导入步骤">
                <button type="button" class="btn btn-sm" data-ai-step="1">1 选择图片</button><span>—</span>
                <button type="button" class="btn btn-sm" data-ai-step="2">2 预览与编辑</button><span>—</span>
                <button type="button" class="btn btn-sm" data-ai-step="3">3 确认保存</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning" data-ai-message role="status" hidden></div>
                <section data-ai-panel="1">
                    <div class="change-ai-upload-heading"><h6>选择识别图片</h6><span class="text-muted small">每次仅识别一张图片</span></div>
                    <div class="mb-3" data-ai-existing-area hidden>
                        <div class="ai-section-label">从已有图片附件中选择一张识别</div>
                        <div class="change-ai-existing-list" data-ai-existing-list hidden></div>
                    </div>
                    <div class="ai-section-label" data-ai-upload-label hidden>或上传新图片</div>
                    <button type="button" class="change-ai-upload" data-ai-drop aria-describedby="change-ai-upload-help">
                        <span class="change-ai-upload-icon"><i class="fa fa-cloud-upload" aria-hidden="true"></i></span>
                        <strong>拖拽图片到这里，或点击选择</strong>
                        <span class="change-ai-upload-formats" id="change-ai-upload-help">JPG / JPEG / PNG / WebP · 单张不超过 50 MB · 暂不支持 PDF、Word</span>
                        <span class="change-ai-drop-tip">松开鼠标，添加图片</span>
                    </button>
                    <input type="file" data-ai-files accept="image/jpeg,image/png,image/webp" hidden>
                    <div class="change-ai-upload-feedback small mt-2" data-ai-upload-feedback role="status" aria-live="polite"></div>
                    <div data-ai-selected-files hidden>
                        <div class="change-ai-files" data-ai-file-list></div>
                        <fieldset class="change-ai-scope mt-3 mb-0">
                            <legend>选择识别范围</legend>
                            <label><input type="radio" name="extract_scope" value="all" checked> 全部（基本信息和清单）</label>
                            <label><input type="radio" name="extract_scope" value="main"> 仅基本信息（内容）</label>
                            <label><input type="radio" name="extract_scope" value="items"> 仅清单明细</label>
                            <div class="small text-muted" data-ai-scope-hint>不确定时选择“全部”。</div>
                        </fieldset>
                        <label class="mt-3 mb-0"><input type="checkbox" data-ai-attach checked> 确认保存时，将原图片同时添加为单据附件</label>
                        <div class="change-ai-attachment-types mt-3" data-ai-attachment-types hidden role="group" aria-label="附件资料类型"></div>
                    </div>
                    <aside class="change-ai-upload-notice" aria-label="识别注意事项">
                        <h6><i class="fa fa-info-circle" aria-hidden="true"></i> 识别注意事项</h6>
                        <ul>
                            <li>每次仅选择一张单据或清单图片；多页清单需分次处理，请保留表头、页码及完整行列。</li>
                            <li>图片应清晰、方向正确、无遮挡。手写内容、模糊印章及跨页表格需重点核对。</li>
                            <li>预览时对照原图核对编号、单位、单价和数量，特别留意增减数量的正负号、小数点及漏行、重复行。</li>
                            <li>先匹配已添加清单，再匹配台账；编号、名称、单位、单价中已识别的字段须全部相符，均未匹配时新增空白清单。多个候选会用实际识别的原设计量辅助筛选，请核对部位后选择。</li>
                        </ul>
                        <div class="change-ai-upload-note">清单预览不计算金额；金额由系统按清单数量汇总后计算。</div>
                        <div class="change-ai-upload-demo">识别期间请勿重复提交；关闭窗口将放弃尚未保存的识别结果。</div>
                    </aside>
                </section>
                <section data-ai-panel="2" hidden>
                    <div class="change-ai-compare">
                        <div class="change-ai-source">
                            <div class="d-flex align-items-center justify-content-between mb-2"><strong>识别原图</strong><span class="text-muted" data-ai-page></span></div>
                            <div class="change-ai-image-toolbar">
                                <select class="form-control form-control-sm" data-ai-image-select aria-label="当前图片"></select>
                                <button type="button" class="btn btn-sm btn-outline-secondary" data-ai-zoom="in">放大</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" data-ai-zoom="out">缩小</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" data-ai-zoom="fit">适应</button>
                            </div>
                            <div class="small text-muted mb-2">滚轮缩放 · 按住拖动</div>
                            <div class="change-ai-image-viewport" data-ai-viewport title="滚轮缩放，按住鼠标左键拖动图片">
                                <div class="change-ai-no-image" data-ai-image-empty>尚未选择图片<br><small>返回第一步选择清单图片，即可左右对照。</small></div>
                                <img data-ai-image alt="当前选择的单据或清单图片" draggable="false" hidden>
                            </div>
                        </div>
                        <div class="change-ai-result">
                            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
                                <div class="btn-group" data-ai-tabs><button type="button" class="btn btn-sm" data-ai-tab="info">基本信息</button><button type="button" class="btn btn-sm" data-ai-tab="bills">清单明细</button></div>
                                <h6 class="mb-0" data-ai-single-title hidden></h6>
                            </div>
                            <div data-ai-info></div>
                            <div data-ai-bills hidden>
                                <div data-ai-rows></div>
                            </div>
                        </div>
                    </div>
                </section>
                <section data-ai-panel="3" hidden>
                    <h6>确认本次导入内容</h6>
                    <p class="small">识别范围：<span data-ai-summary-scope></span></p>
                    <p class="small">基本信息：<span data-ai-summary-info></span></p>
                    <dl class="change-ai-summary"><dt>场景</dt><dd data-ai-summary-scene></dd><dt>单据编号</dt><dd data-ai-summary-code></dd><dt>单据名称</dt><dd data-ai-summary-name></dd><dt>清单处理</dt><dd data-ai-summary-rows></dd><dt>图片附件</dt><dd data-ai-summary-files></dd></dl>
                    <div class="change-ai-confirm-section" data-ai-confirm-section="main">
                        <div class="change-ai-upload-heading"><h6>基本信息修改明细</h6><button type="button" class="btn btn-sm btn-link" data-ai-review="info">返回修改基本信息</button></div>
                        <div data-ai-confirm-info></div>
                    </div>
                    <div class="change-ai-confirm-section" data-ai-confirm-section="items">
                        <div class="change-ai-upload-heading"><h6>清单处理明细</h6><button type="button" class="btn btn-sm btn-link" data-ai-review="bills">返回修改清单</button></div>
                        <div data-ai-confirm-bills></div>
                    </div>
                    <div class="change-ai-confirm-section" data-ai-confirm-section="files" hidden>
                        <div class="change-ai-upload-heading"><h6>新增图片附件</h6><button type="button" class="btn btn-sm btn-link" data-ai-review="files">返回调整图片</button></div>
                        <div data-ai-confirm-files></div>
                    </div>
                    <div class="alert alert-warning mb-0" data-ai-validation role="status"></div>
                </section>
            </div>
            <div class="modal-footer">
                <span class="small text-muted mr-auto" data-ai-status aria-live="polite"></span>
                <button type="button" class="btn btn-sm btn-secondary" data-ai-back>关闭</button>
                <button type="button" class="btn btn-sm btn-primary" data-ai-next><span data-ai-next-text>开始识别</span><span class="spinner-border spinner-border-sm ml-1" data-ai-next-spinner style="display:none;" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
</div>
<script src="/public/js/change_ai_import_modal.js"></script>