Initial commit: Receipt Studio desktop application

src/renderer/components/ReceiptPreview.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { computed,onBeforeUnmount,onMounted,ref,watch } from 'vue'
+const props=defineProps<{ html:string; layout?:'single'|'print' }>()
+const container=ref<HTMLDivElement>(),scale=ref(.6)
+let observer:ResizeObserver|undefined
+const paperWidth=computed(()=>(props.layout==='print'?210:190)*96/25.4)
+const paperHeight=computed(()=>(props.layout==='print'?297:140)*96/25.4)
+function resize(){if(container.value)scale.value=Math.min((container.value.clientWidth-36)/paperWidth.value,1)}
+onMounted(()=>{observer=new ResizeObserver(resize);if(container.value)observer.observe(container.value);resize()})
+watch(()=>props.layout,resize)
+onBeforeUnmount(()=>observer?.disconnect())
+</script>
+<template>
+ <div ref="container" class="preview-canvas">
+  <div v-if="html" class="paper-wrap" :style="{width:paperWidth*scale+'px',height:paperHeight*scale+'px'}">
+   <iframe title="收据打印预览" sandbox="" scrolling="no" :srcdoc="html" :style="{width:paperWidth+'px',height:paperHeight+'px',transform:'scale('+scale+')'}"></iframe>
+  </div>
+  <div v-else class="preview-placeholder">选择一条有效数据，查看收据预览</div>
+ </div>
+</template>