pdfwright-web 0.2.1__tar.gz → 0.3.0__tar.gz

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/.gitignore

@@ -31,3 +31,5 @@ pdfwright/examples/output/
 
 # 本地发布凭据（scripts/publish.sh --config 默认读它）
 .publish.env
+
+runtime/

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/PKG-INFO

@@ -1,10 +1,11 @@
 Metadata-Version: 2.5
 Name: pdfwright-web
-Version: 0.2.1
+Version: 0.3.0
 Summary: pdfwright 的无状态 Web 服务：可视化配置编辑器 + HTML/PDF 预览 + 对外渲染 API（不存储任何数据与内容）
 License: Proprietary
 Requires-Python: >=3.12
 Requires-Dist: fastapi>=0.115
+Requires-Dist: jinja2>=3.1
 Requires-Dist: pdfwright>=0.2.1
 Requires-Dist: pydantic>=2.9
 Requires-Dist: python-multipart>=0.0.9

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pdfwright-designer",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/frontend/src/App.vue

@@ -10,12 +10,16 @@ import PropsPanel from '@/designer/PropsPanel.vue'
 import FillView from '@/fill/FillView.vue'
 import * as api from '@/api/client'
 import type { ExampleItem } from '@/api/client'
-import { downloadPdf, exportSchema, importSchema, initialize, redo, setMode, state, undo } from '@/store/designer'
+import { downloadPdf, exportSchema, extractLegacyData, importSchema, importSchemaJson, initialize, redo, removeSelected, restoreDraft, hasDraft, clearDraft, setMode, state, undo } from '@/store/designer'
+import { downloadBlob } from '@/lib/download'
 import type { DocumentSchema } from '@/types/schema'
 
 const fileInput = ref<HTMLInputElement | null>(null)
 const docxInput = ref<HTMLInputElement | null>(null)
 const xlsxInput = ref<HTMLInputElement | null>(null)
+//: 导入 Word 时是否把「文字 + 内联命令标签」（`记录人：{{sign:…}}`）排在同一行。
+//: 默认 **块级**（各自独立成块，可自由拖拽），需要保留 Word 的同行排版时从下拉菜单选。
+const docxInline = ref(false)
 const jsonOpen = ref(false)
 const leftTab = ref('palette')
 const examples = ref<ExampleItem[]>([])
@@ -24,17 +28,60 @@ const errorCount = computed(() => state.issues.filter((issue) => issue.level ===
 const warnCount = computed(() => state.issues.filter((issue) => issue.level === 'warning').length)
 
 onMounted(() => {
-  void initialize()
-  // 前端资源版本守护：服务端重建后旧页面引用的 hash 资源已被删除（表现为「样式全丢」），
-  // 这里主动提示刷新，而不是让用户对着坏页面排查
+  void bootstrap()
   void watchBuild()
   setInterval(() => void watchBuild(), 30000)
-  document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'visible') void watchBuild()
-  })
+  document.addEventListener('visibilitychange', onVisibility)
+  window.addEventListener('keydown', onKeydown)
   void loadExamples()
 })
 
+/** 启动：先尝试恢复上次的草稿（刷新/误关不丢工作），用户可选择放弃。 */
+async function bootstrap(): Promise<void> {
+  await initialize()
+  if (!hasDraft()) return
+  try {
+    await ElMessageBox.confirm('检测到上次未导出的草稿，是否恢复？', '恢复草稿', {
+      confirmButtonText: '恢复',
+      cancelButtonText: '放弃',
+      closeOnClickModal: false,
+      type: 'info',
+    })
+    restoreDraft()
+    ElMessage.success('已恢复上次的草稿')
+  } catch {
+    clearDraft()
+  }
+}
+
+function onVisibility(): void {
+  if (document.visibilityState === 'visible') void watchBuild()
+}
+
+/** 键盘快捷键：设计器该有的那几个（撤销/重做/删除）。
+ *
+ * 不在输入框里抢键（正在打字时不触发），与常见编辑器一致。
+ */
+function onKeydown(event: KeyboardEvent): void {
+  if (state.mode !== 'design') return
+  const target = event.target as HTMLElement | null
+  const typing =
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target?.isContentEditable === true
+  const mod = event.metaKey || event.ctrlKey
+  if (mod && event.key.toLowerCase() === 'z' && !typing) {
+    event.preventDefault()
+    if (event.shiftKey) redo()
+    else undo()
+    return
+  }
+  if ((event.key === 'Delete' || event.key === 'Backspace') && !typing && state.selectedId) {
+    event.preventDefault()
+    removeSelected()
+  }
+}
+
 /** 前端资源版本守护：服务端重建后，旧页面引用的 hash 资源已删除
  *  （表现为「样式/脚本全丢」），这里提示刷新而不是让用户对着坏页面排查。 */
 let knownBuildId = ''
@@ -74,26 +121,51 @@ async function loadExamples(): Promise<void> {
 function loadExample(id: string): void {
   const item = examples.value.find((example) => example.id === id)
   if (!item) return
-  importSchema(item.schema)
-  ElMessage.success(`已加载示例：${item.title}`)
+  // 覆盖当前编辑内容前确认（有历史栈可撤销，但不该拿用户的草稿赌）
+  void ElMessageBox.confirm(`加载示例「${item.title}」会替换当前页面内容，继续？`, '加载示例', {
+    confirmButtonText: '加载',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      importSchema(item.schema, item.data ?? {})
+      ElMessage.success(`已加载示例：${item.title}`)
+    })
+    .catch(() => undefined)
 }
 
 function exportJson(): void {
   const blob = new Blob([JSON.stringify(exportSchema(), null, 2)], { type: 'application/json' })
-  const url = URL.createObjectURL(blob)
-  const anchor = document.createElement('a')
-  anchor.href = url
-  anchor.download = `${(state.schema.meta?.title as string) || 'page'}.json`
-  anchor.click()
-  URL.revokeObjectURL(url)
+  // 用统一的下载工具：blob URL 必须**延迟回收**（立即 revoke 会取消尚未开始的下载）
+  downloadBlob(blob, `${(state.schema.meta?.title as string) || 'page'}.json`)
+}
+
+/** 导入文档（转换接口只返回配置 + 字段）→ 再单独要一份示例数据，保证「导入即可见效果」。
+ *
+ * 导入是**纯解析**：造示例数据是预览辅助能力，由 `/api/mock` 提供；拿不到也不阻断
+ * 导入（只提示），用户仍可在「数据」tab 里手填或再点「按模板生成 Mock」。
+ */
+async function importConverted(document: DocumentSchema): Promise<void> {
+  let data: Record<string, unknown> = {}
+  try {
+    data = (await api.generateMockData(document)).data
+  } catch (error) {
+    ElMessage.warning(`已导入配置；示例数据生成失败：${(error as Error).message}`)
+  }
+  importSchema(document, data)
 }
 
 async function onJsonFile(event: Event): Promise<void> {
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) return
   try {
-    importSchema(JSON.parse(await file.text()) as DocumentSchema)
-    ElMessage.success('页面配置已导入')
+    const parsed = JSON.parse(await file.text()) as Record<string, unknown>
+    // 旧版导出把示例数据嵌在配置顶层：剥到运行态，否则整篇字段全部渲染为空
+    const legacy = extractLegacyData(parsed)
+    importSchemaJson(parsed)
+    ElMessage.success(
+      legacy ? `页面配置已导入（含 ${Object.keys(legacy).length} 个示例数据字段，已载入「数据」）` : '页面配置已导入',
+    )
   } catch (error) {
     ElMessage.error(`导入失败：${(error as Error).message}`)
   }
@@ -113,7 +185,7 @@ async function importHtml(): Promise<void> {
   htmlBusy.value = true
   try {
     const result = await api.convertHtml(htmlSource.value)
-    importSchema(result.document)
+    await importConverted(result.document)
     ElMessage.success(`已转换：${result.fields.length} 个字段`)
     htmlDialog.value = false
   } catch (error) {
@@ -127,14 +199,23 @@ async function onOfficeFile(event: Event, kind: 'docx' | 'xlsx'): Promise<void>
   const file = (event.target as HTMLInputElement).files?.[0]
   if (!file) return
   try {
-    const result = kind === 'docx' ? await api.convertDocx(file) : await api.convertXlsx(file)
-    importSchema(result.document)
+    const result =
+      kind === 'docx'
+        ? await api.convertDocx(file, docxInline.value)
+        : await api.convertXlsx(file)
+    await importConverted(result.document)
     ElMessage.success(`已转换：${result.fields.length} 个字段`)
   } catch (error) {
     ElMessage.error(`转换失败：${(error as Error).message}`)
   }
   ;(event.target as HTMLInputElement).value = ''
 }
+
+/** 「导入 Word」下拉：`inline` 决定同一段落里的文字与图片/签章位是否排在同一行。 */
+function pickDocxFile(inline: boolean): void {
+  docxInline.value = inline
+  docxInput.value?.click()
+}
 </script>
 
 <template>
@@ -171,7 +252,15 @@ async function onOfficeFile(event: Event, kind: 'docx' | 'xlsx'): Promise<void>
       <el-button size="small" @click="jsonOpen = true">配置 JSON</el-button>
       <el-button size="small" @click="exportJson">导出</el-button>
       <el-button size="small" @click="fileInput?.click()">导入 JSON</el-button>
-      <el-button size="small" @click="docxInput?.click()">导入 Word</el-button>
+      <el-dropdown split-button size="small" trigger="click" @click="pickDocxFile(false)" @command="pickDocxFile">
+        导入 Word
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item :command="false">块级（默认）：文字与图片/签章各自成块</el-dropdown-item>
+            <el-dropdown-item :command="true">同排：文字与图片/签章排在同一行</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <el-button size="small" @click="xlsxInput?.click()">导入 Excel</el-button>
       <el-button size="small" @click="htmlDialog = true">导入 HTML</el-button>
       <el-button size="small" type="primary" :loading="state.busy" @click="downloadPdf">生成 PDF</el-button>

pdfwright_web-0.3.0/frontend/src/api/client.spec.ts

@@ -0,0 +1,31 @@
+/** API 客户端：导入 Word 的「同排」开关要走对 URL（默认块级 = 不带参数）。 */
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { convertDocx } from './client'
+
+const OK = { document: { page: {}, body: [] }, fields: [], warnings: [] }
+
+function stubFetch(): ReturnType<typeof vi.fn> {
+  const spy = vi.fn(async () => new Response(JSON.stringify(OK), { status: 200 }))
+  vi.stubGlobal('fetch', spy)
+  return spy
+}
+
+describe('convertDocx', () => {
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('默认（块级）不打 inline_commands', async () => {
+    const spy = stubFetch()
+    await convertDocx(new File(['x'], 'a.docx'))
+    expect(String(spy.mock.calls[0][0])).toBe('/api/convert/docx')
+  })
+
+  it('开启同排 → ?inline_commands=true', async () => {
+    const spy = stubFetch()
+    await convertDocx(new File(['x'], 'a.docx'), true)
+    expect(String(spy.mock.calls[0][0])).toBe('/api/convert/docx?inline_commands=true')
+  })
+})

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/frontend/src/api/client.ts

@@ -4,6 +4,7 @@ import type {
   ComponentsPayload,
   DocumentSchema,
   FormData,
+  MockImageStyles,
   OptionItem,
   OptionsConfig,
 } from '@/types/schema'
@@ -27,24 +28,40 @@ export interface ExampleItem {
   variables: number
   blocks: number
   schema: DocumentSchema
+  /** 示例数据（与 schema 分离：schema 不再内嵌 data） */
+  data?: FormData | null
 }
 
 export interface ConvertResponse {
+  /** 纯解析结果：配置 + 提取到的字段（**不含示例数据**） */
   document: DocumentSchema
   fields: { name: string; label: string; kind: string }[]
+  warnings?: string[]
 }
 
-async function jsonRequest<T>(url: string, init?: RequestInit): Promise<T> {
-  const response = await fetch(url, init)
-  if (!response.ok) {
-    let detail = ''
+/** 请求超时（毫秒）：长文档渲染/大文件转换也不例外 —— 没有超时时 UI 会一直转圈。 */
+const REQUEST_TIMEOUT_MS = 120_000
+
+/** 错误响应体里是否带可直接展示的消息（后端统一返回 {error_code, message, detail}）。 */
+async function errorMessage(response: Response, fallback: string): Promise<string> {
+  try {
+    const body = (await response.json()) as { message?: string }
+    if (body?.message) return body.message
+  } catch {
     try {
-      const body = (await response.json()) as { message?: string }
-      detail = body.message ?? ''
+      const text = await response.text()
+      if (text.trim()) return text.trim().slice(0, 300)
     } catch {
-      detail = await response.text()
+      /* 忽略 */
     }
-    throw new Error(detail || `请求失败（HTTP ${response.status}）`)
+  }
+  return `${fallback}（HTTP ${response.status}）`
+}
+
+async function jsonRequest<T>(url: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(url, { signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS), ...init })
+  if (!response.ok) {
+    throw new Error(await errorMessage(response, '请求失败'))
   }
   return (await response.json()) as T
 }
@@ -100,11 +117,15 @@ export function fetchFonts(): Promise<FontInfo> {
   return jsonRequest<FontInfo>('/api/meta/fonts')
 }
 
-export function validateDocument(document: DocumentSchema): Promise<ValidationResponse> {
+export function validateDocument(
+  document: DocumentSchema,
+  data?: FormData,
+): Promise<ValidationResponse> {
   return jsonRequest<ValidationResponse>('/api/validate', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ document }),
+    // 传了 data 时后端会额外校验「必填项是否已填」（required_missing）
+    body: JSON.stringify({ document, data: data ?? null }),
   })
 }
 
@@ -113,8 +134,12 @@ export async function renderHtml(document: DocumentSchema, data?: FormData): Pro
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ document, data: data ?? null }),
+    signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
   })
-  if (!response.ok) throw new Error(`HTML 预览失败（HTTP ${response.status}）`)
+  if (!response.ok) {
+    // 早前这里只拼「HTTP xxx」，把后端给的具体原因（模板语法错误/非法配置项）丢了
+    throw new Error(await errorMessage(response, 'HTML 预览失败'))
+  }
   return response.text()
 }
 
@@ -123,20 +148,52 @@ export async function renderPdf(document: DocumentSchema, data?: FormData): Prom
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ document, data: data ?? null }),
+    signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS),
   })
   if (!response.ok) {
-    let message = `PDF 生成失败（HTTP ${response.status}）`
-    try {
-      const body = (await response.json()) as { message?: string }
-      if (body.message) message = body.message
-    } catch {
-      /* 忽略解析失败 */
-    }
-    throw new Error(message)
+    throw new Error(await errorMessage(response, 'PDF 生成失败'))
   }
   return response.blob()
 }
 
+/** 模板需要的字段（服务端从模板 AST + 变量声明推断，与 mock 数据同源）。 */
+export interface MockVariable {
+  name: string
+  type: string
+  /** 是否已在 `variables` 里声明 */
+  declared: boolean
+  label?: string
+  /** 数组/对象的字段（递归同结构） */
+  fields?: MockVariable[]
+  /** 标量数组的元素类型 */
+  items?: string
+}
+
+export interface MockResponse {
+  data: FormData
+  /** 无法推断的引用（函数调用/动态下标等）—— 提示用户而不是静默缺字段 */
+  warnings: string[]
+  /** 变量清单：类型 + 嵌套结构（设计器「数据」tab 展示，比前端正则扫描准） */
+  variables: MockVariable[]
+}
+
+/** 按模板语义生成示例数据（库侧 `pdfwright.mock`；设计器不再自己猜）。
+ *
+ * 已有数据会**只补缺失**：手填的值不会被覆盖。
+ */
+export function generateMockData(
+  document: DocumentSchema,
+  data?: FormData,
+  samples = 2,
+  images?: MockImageStyles,
+): Promise<MockResponse> {
+  return jsonRequest<MockResponse>('/api/mock', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ document, data: data ?? null, samples, images: images ?? null }),
+  })
+}
+
 export async function fetchOptions(config: OptionsConfig): Promise<OptionItem[]> {
   if (config.type === 'static') return config.items ?? []
   const payload = await jsonRequest<{ items: OptionItem[] }>('/api/options/fetch', {
@@ -162,8 +219,11 @@ async function uploadConvert(url: string, file: File): Promise<ConvertResponse>
   return jsonRequest<ConvertResponse>(url, { method: 'POST', body: form })
 }
 
-export function convertDocx(file: File): Promise<ConvertResponse> {
-  return uploadConvert('/api/convert/docx', file)
+export function convertDocx(file: File, inlineCommands = false): Promise<ConvertResponse> {
+  // ``inlineCommands``：同一段落里的「文字 + 内联命令标签」排在同一行
+  // （默认 false = 块级，各自独立成块；见 docs/word-import.md）
+  const query = inlineCommands ? '?inline_commands=true' : ''
+  return uploadConvert(`/api/convert/docx${query}`, file)
 }
 
 export function convertXlsx(file: File): Promise<ConvertResponse> {

{pdfwright_web-0.2.1 → pdfwright_web-0.3.0}/frontend/src/components/UnitInput.vue

@@ -17,6 +17,8 @@ const props = withDefaults(
   {
     units: () => UNITS,
     defaultUnit: 'pt',
+    min: undefined,
+    max: undefined,
     step: 1,
     placeholder: '',
     size: 'small',