下面给出一套在现代浏览器环境中，Vue 3（组合式 API）的“商品编辑表单组件 A”与“Rust→WASM 校验引擎组件 B”协作的完整设计方案，覆盖数据契约、加载与包装、共享状态/事件/API 调用的通信策略、节流增量校验、提交二次校验与错误锚点、规则版本同步与缓存清理，以及与 IndexedDB、时区与货币、后端预检、日志的整合。
一、核心交互流（从用户到保存）
- 用户在 A 中编辑 name / price / SKU。
- A 将受控输入的最新 payload（含 schemaId='product.v1'）以节流 300ms 的频率调用 B.validate，获取字段级错误码/消息/修复建议。
- A 把校验结果写入 Pinia 共享状态，并发出 form:change 或 field:blur 事件；若有错误或存在校验中状态，则禁用“保存”。
- 用户点击保存：
- A 执行一次强制的二次全量校验（跳过节流、取消并发中的校验），若有错误，滚动到首个错误锚点并聚焦。
- 若无错误，调用后端预检接口做服务器一致性校验；通过则提交保存（此处虽未要求保存 API，通常会跟随预检通过后发起），失败则纳入相同的错误展示与锚点聚焦。
- 规则版本更新：A 通过 GET /rules/version 获取最新版本；若变化，清理 WASM 侧规则缓存与前端缓存，重新校验当前表单。
二、数据契约与模型
- validate 输入
- schemaId: 'product.v1'
- payload 示例：
{
name: string,
price: { currency: 'USD', amount: 12345, minorUnit: 2 } // 以最小货币单位存储
sku: string,
tz: 'UTC', // 或系统统一时区
locale: 'zh-CN',
versionHint?: string // 当前本地已知的规则版本，可用于引擎快速比对
}
- validate 输出（建议）
{
ok: boolean,
version: string, // 规则版本
fields: {
'name'?: { code: 'REQUIRED'|'LENGTH'|..., message: string, severity: 'error'|'warn', fix?: { type: 'trim'|'suggest', value?: any } },
'price'?: { code: 'INVALID_PRICE'|'MIN'|'MAX'|..., message: string, severity, fix?: { type: 'round'|'currency', value?: any } },
'sku'?: { code: 'FORMAT'|'DUPLICATE'|..., message: string, severity, fix?: { type: 'upper'|'regexSuggest', value?: any } }
},
global?: [ { code, message, severity } ],
ts: number
}
三、WASM 加载与包装（B 的 JS 适配层）
- 采用 streaming compile：WebAssembly.instantiateStreaming(fetch('/wasm/validator.wasm'), imports)。
- 保证服务器返回正确 MIME：application/wasm；走 HTTPS/HTTP2。
- 包装 validate 将 JSON 序列化为 UTF-8，写入 WASM 线性内存；调用导出函数；读回结果 JSON。建议在 Rust 端提供 validate(ptr,len) 和 last_error()。
- 处理并发与竞态：为每次调用分配一个“请求序号/令牌”，只接受最新一次的结果；旧结果丢弃。
- 错误恢复：捕获 panic 或解析错误，返回可观测的错误并上报 Sentry。
示例 TypeScript 适配（简化）：
const WasmValidator = (() => {
let mod, mem, enc = new TextEncoder(), dec = new TextDecoder();
let seq = 0;
async function init(url) {
try {
const { instance } = await WebAssembly.instantiateStreaming(fetch(url), {});
mod = instance.exports;
mem = mod.memory;
return true;
} catch (e) {
const resp = await fetch(url);
const buf = await resp.arrayBuffer();
const { instance } = await WebAssembly.instantiate(buf, {});
mod = instance.exports;
mem = mod.memory;
return true;
}
}
function write(str) {
const bytes = enc.encode(str);
const ptr = mod.alloc(bytes.length);
new Uint8Array(mem.buffer, ptr, bytes.length).set(bytes);
return { ptr, len: bytes.length };
}
function read(ptr, len) {
const out = new Uint8Array(mem.buffer, ptr, len);
return dec.decode(out);
}
async function validate(schemaId, payload) {
const token = ++seq;
const input = JSON.stringify({ schemaId, payload });
const { ptr, len } = write(input);
try {
const resPtr = mod.validate(ptr, len); // 假设返回 {ptr:u32,len:u32} 通过共享位置读取，或通过 get_result_len()
const resLen = mod.get_result_len();
const out = read(resPtr, resLen);
mod.dealloc(ptr, len);
mod.dealloc(resPtr, resLen);
if (token !== seq) throw new Error('stale'); // 丢弃过期结果
return JSON.parse(out);
} catch (e) {
// Sentry.captureException(e)
throw e;
}
}
return { init, validate };
})();
四、Pinia 共享状态设计（共享状态通信）
- store: productForm
state:
values: { name: '', price: { currency:'USD', amount: 0, minorUnit: 2 }, sku: '' }
errors: { [field]: { code, message, severity, fix? } }
globals: []
dirty: Set // 被编辑字段
touched: Set // 触发过 blur 的字段
pending: boolean
rulesVersion: string | null
lastValidatedAt: number
draftId: string // IndexedDB 的 key
getters:
hasError: (state) => Object.keys(state.errors).length > 0 || state.globals.length > 0
canSave: (s) => !s.pending && !s.hasError && s.dirty.size > 0
actions:
setField(field, value)
validateThrottled() // 节流 300ms
validateNow(scope?: 'all'|'field', field?: string)
applyFix(field)
syncRulesVersion()
clearCachesOnRulesUpdate(newVersion)
submit()
五、组件 A 的交互与事件（事件驱动通信）
- 输入为受控：v-model 绑定 Pinia values。
- onInput:
- 更新 Pinia.values 与 dirty 集合。
- 通过节流 300ms 触发 validateThrottled（全量校验或仅供 UI 增量渲染，见第六节）。
- 触发 form:change 事件（Event Bus 或 DOM CustomEvent），payload 包含变更字段和值、pending 标记。
- onBlur(field):
- 标记 touched。
- 触发 validateNow('field', field)（立刻校验该字段，覆盖节流）。
- 触发 field:blur 事件。
- 按钮禁用：
- :disabled="!store.canSave"
- 错误展示：
- 对应字段展示 store.errors[field] 的 message，提供“应用修复”按钮（调用 applyFix）。
- 锚点跳转：
- 提交失败后找到第一个错误字段，scrollIntoView({block:'center'}) 并 focus。
六、增量校验与节流策略
- 节流 300ms：在 onInput 中合并多次变更，避免频繁 WASM 调用；触发 validateThrottled。
- 增量范围：
- 若 B 的 validate 只支持全量，A 仍可传全量 payload，但只更新 UI 中变更字段的错误提示以减少干扰；同时持久化全量 errors 以备提交。
- 若 B 能支持 delta（可选扩展 validateDelta），则传入 dirty 字段列表让引擎优化执行。
- 并发控制：
- validateNow 会取消/忽略节流中的飞行请求（通过 seq token 或 AbortController）。
- 只接纳最新一次返回结果。
- 状态更新：
- pending = true 在发起校验时置位，拿到最新结果后清除。
- 写入 errors 时保留未变更字段在 blur 前的提示策略：对未 touched 字段仅在显著错误（severity=error）时提示，轻微警告在 blur 后显示，以降低噪音。
七、提交流程与错误锚点
- submit():
- pending=true；await validateNow('all') 强制全量校验，忽略节流。
- 若有错误：emit('submit:error', { errors }); 锚点跳转并 focus。
- 若通过：调用后端预检 POST /products/preflight（含 payload 与 rulesVersion），将后端错误映射到相同的 errors 结构；若通过，再继续保存流程。
- 错误锚点：
- 遍历 errors 字段顺序：['name','price','sku'] 找到第一个 error，querySelector(
[data-field="${f}"]) 滚动并 focus。
- 无障碍与可达性：
- 对每个输入设置 aria-invalid 与 aria-describedby，错误区域 role="alert"。
八、规则版本同步与缓存清理
- 周期性或在页面可见时拉取 GET /rules/version（可用 ETag 或 If-None-Match），比较本地 store.rulesVersion。
- 若变化：
- 清空 WASM 内部规则缓存（Rust 端提供 reset_rules() 或在 validate 内检查 version 并热更新规则集）。
- 清理前端 errors 缓存与与规则版本绑定的任何 memoization。
- 更新 store.rulesVersion，emit('rules:version-changed', { from, to })。
- 对当前表单 payload 执行一次 validateNow('all')，以新规则重算错误。
- 缓存策略建议：
- /rules/version：Cache-Control: max-age=30，配合 ETag，减少开销。
- 规则包（若独立 JSON）：cache with immutable + versioned URL；IndexedDB/Cache Storage 双写，版本变更即失效。
九、通信策略对比与建议
- 共享状态（Pinia）
- 用途：在 A、其他子组件（如“价格格式化器”、“SKU 建议列表”）之间共享 values、errors、pending、rulesVersion。
- 优点：状态可追踪、易于持久化到 IndexedDB、利于调试（Pinia devtools）。
- 建议：严格区分 UI 状态（pending、touched）与领域状态（values、errors）。
- API 调用
- WASM 的 validate 属于本地“API”；后端预检属于远程 API。
- 建议：为两类调用分别封装 service 层，统一返回 Result<T, E>，便于错误收敛与重试策略。
- 事件驱动
- 用途：对外广播 form:change、field:blur、validation:done、rules:version-changed、submit:success/error 等，解耦周边组件（如埋点、提示条、自动保存器）。
- 建议：使用轻量 Event Bus（mitt）或 DOM CustomEvent；事件名命名空间化，payload 结构化；避免事件引起的环形更新，事件处理应只读 Pinia 或调用显式 action。
十、IndexedDB、时区与货币、一致性校验、日志
- IndexedDB 草稿
- 使用 idb-keyval 或 Dexie；在 form:change 后 500ms 去抖写入，存储：{ values, rulesVersion, updatedAt }。
- 恢复草稿时，若 rulesVersion 变更，加载 values 后立即 validateNow('all')。
- 时区与货币
- 全局设置：timezone='UTC'，currency 从组织设置读取；价格用最小货币单位存储（amount: integer, minorUnit）；显示用 Intl.NumberFormat。
- 输入联动：用户输入“12.3”，转换为 amount=1230（minorUnit=2）；传给 B 时带 currency 与 minorUnit，确保一致性。
- 后端预检
- 包含去重、SKU 唯一性、跨实体约束（WASM 不掌握全局数据时）。
- 将后端返回的错误映射为相同字段 errors，沿用同一展示与锚点逻辑。
- 日志与观测
- 控制台：开发环境详细日志；生产最小化。
- Sentry：WASM 错误、解析失败、版本同步失败、预检失败；附带 schemaId、rulesVersion、hash(payload)；脱敏 name/sku。
- Source map：为 TS 与 Rust（via wasm-sourcemap）配置，方便追踪。
十一、边界与健壮性
- WASM 初始化失败：回退到“只做前端基础必填校验 + 后端预检”，UI 给出“规则引擎不可用，保存前将做服务器校验”的轻提示。
- 并发输入场景：输入节流 + 最新结果生效；blur 优先级高于 change 校验。
- 国际化：B 返回 code；A 根据 code 与 i18n 资源在前端做 message 映射，便于多语言切换。
- 性能：表单中仅对可见字段渲染错误；大 payload 可仅传关键字段给引擎（若允许），或让引擎内部剪裁。
十二、关键伪代码（Vue 3 + Pinia）
const useProductForm = defineStore('productForm', {
state: () => ({
values: { name: '', price: { currency: 'USD', amount: 0, minorUnit: 2 }, sku: '' },
errors: {},
globals: [],
dirty: new Set(),
touched: new Set(),
pending: false,
rulesVersion: null,
draftId: 'draft:product'
}),
getters: {
hasError: (s) => Object.keys(s.errors).length > 0 || s.globals.length > 0,
canSave() { return !this.pending && !this.hasError && this.dirty.size > 0; }
},
actions: {
setField(field, value) {
this.values[field] = value;
this.dirty.add(field);
bus.emit('form:change', { field, value, pending: this.pending });
this.validateThrottled();
saveDraftDebounced(this.draftId, { values: this.values, rulesVersion: this.rulesVersion });
},
async validateNow(scope='all', field) {
this.pending = true;
try {
const payload = { ...this.values, tz: 'UTC', locale: 'zh-CN' };
const res = await WasmValidator.validate('product.v1', payload);
this.rulesVersion = res.version ?? this.rulesVersion;
// 仅更新 scope 所需的错误以降低噪音
const nextErrors = res.fields || {};
if (scope === 'field' && field) {
this.errors[field] = nextErrors[field] || undefined;
} else {
this.errors = nextErrors;
this.globals = res.global || [];
}
bus.emit('validation:done', { scope, errors: this.errors });
} catch (e) {
// Sentry.captureException(e)
} finally {
this.pending = false;
}
},
validateThrottled: throttle(function() { return this.validateNow('all'); }, 300, { leading: false }),
async syncRulesVersion() {
try {
const r = await fetch('/rules/version', { headers: { 'Accept': 'application/json' } });
if (r.status === 304) return;
const { version } = await r.json();
if (version && version !== this.rulesVersion) {
this.clearCachesOnRulesUpdate(version);
}
} catch (e) { /* Sentry */ }
},
clearCachesOnRulesUpdate(newVersion) {
this.rulesVersion = newVersion;
this.errors = {};
this.globals = [];
if (WasmValidator.reset_rules) WasmValidator.reset_rules(); // Rust 端导出
bus.emit('rules:version-changed', { to: newVersion });
this.validateNow('all');
},
async submit() {
await this.validateNow('all');
if (this.hasError) {
focusFirstError();
bus.emit('submit:error', { errors: this.errors });
return;
}
const resp = await fetch('/products/preflight', { method: 'POST', body: JSON.stringify({ payload: this.values, rulesVersion: this.rulesVersion }) });
const data = await resp.json();
if (!data.ok) {
this.errors = data.fields || {};
this.globals = data.global || [];
focusFirstError();
bus.emit('submit:error', { errors: this.errors });
return;
}
bus.emit('submit:success', { id: data.id });
}
}
});
十三、Rust/WASM 侧建议
- 导出接口：
- alloc/dealloc
- validate(ptr,len) -> result_ptr; get_result_len()
- last_error() 或在 JSON 里返回 { ok:false, fields:..., error:'...' }
- reset_rules() 用于热更新或清理缓存
- 性能：
- 内部缓存 schemaId→规则集；带 version 校验，版本变化时丢弃。
- 可选：支持增量 validateDelta(changedFields)。
十四、实用设计建议总结
- 将 WASM 视为本地“纯函数服务”，通过稳定的 JSON 契约交互，并包装成幂等、可并发、可取消的 Promise。
- 使用 Pinia 作为单一事实源，事件总线只做广播，不直接改状态。
- 采用“节流 300ms + blur 立即校验”的 UX 组合；提交前强制校验与错误锚点，确保可靠性。
- 规则版本与草稿强绑定；版本变更即清空缓存并重算，避免过期规则导致的虚假通过/误报。
- 一致性校验双通道：前端 WASM 快速反馈 + 后端预检最终一致，错误消息统一映射以获得一致的 UI。
- 规范化货币与时区：内部用最小货币单位，显示用 Intl；所有校验在统一 tz/locale 前提下进行。
- 观测可视化：关键节点打点与 Sentry；对 WASM 错误进行降级处理，保障可保存路径。
按以上方案，A 与 B 的交互在“共享状态 + API 调用 + 事件驱动”三种通信策略上各司其职、互补增效，既保证了实时性与用户体验，又兼顾可维护性与可观测性。
