@guodun/antdv 1.2.5 → 1.3.1

package/dist/es/components/pro-contract-template-designer/src/ProContractTemplateRenderer.vue.mjs

@@ -1,31 +1,21 @@
-import e from "../../../node_modules/@ant-design/icons-vue/es/icons/SendOutlined.mjs";
-import { buildInitialRenderValues as t, buildTemplateRenderPages as n, isEmptyRenderValue as r, normalizeRenderValues as i, resolveTemplateRenderSubmitErrors as ee, validateTemplateRenderStructure as te, validateTemplateRenderValues as ne } from "./utils/template-renderer.mjs";
-import re from "./ContractTemplateRendererField.mjs";
-import ie from "./ContractTemplateRendererPage.mjs";
-import ae from "./ContractTemplateRendererToolbar.mjs";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as oe, createVNode as d, defineComponent as f, mergeProps as se, nextTick as p, normalizeClass as ce, openBlock as m, ref as h, renderList as g, renderSlot as le, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
-import { Alert as ue, Button as de, Empty as x, Progress as fe } from "ant-design-vue";
-import { useElementSize as pe } from "@vueuse/core";
+import e from "../../../node_modules/@ant-design/icons-vue/es/icons/LeftOutlined.mjs";
+import t from "../../../node_modules/@ant-design/icons-vue/es/icons/RightOutlined.mjs";
+import { isContractTemplateFieldType as n } from "./types.mjs";
+import { buildInitialRenderValues as r, buildTemplateRenderPages as ee, isEmptyRenderValue as i, normalizeRenderValues as a, resolveTemplateRenderSubmitErrors as te, validateTemplateRenderStructure as ne, validateTemplateRenderValues as re } from "./utils/template-renderer.mjs";
+import ie from "./ContractTemplateRendererField.mjs";
+import ae from "./ContractTemplateRendererHeader.mjs";
+import oe from "./ContractTemplateRendererPage.mjs";
+import { Fragment as se, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as ce, createVNode as d, defineComponent as f, mergeProps as le, nextTick as ue, normalizeClass as p, onBeforeUnmount as de, openBlock as m, ref as h, renderList as g, renderSlot as fe, toDisplayString as _, unref as v, watch as y, withCtx as b } from "vue";
+import { Button as pe, Empty as x, Progress as me, Tooltip as he } from "ant-design-vue";
+import { useElementSize as ge } from "@vueuse/core";
 //#region src/components/pro-contract-template-designer/src/ProContractTemplateRenderer.vue?vue&type=script&setup=true&lang.ts
-var me = {
-	key: 1,
-	class: "gd-contract-template-renderer__validation"
-}, he = {
+var _e = { class: "gd-contract-template-renderer__validation-bar" }, ve = ["aria-expanded"], ye = {
 	key: 0,
 	class: "gd-contract-template-renderer__validation-list"
-}, ge = ["onClick"], _e = {
-	key: 3,
-	class: "gd-contract-template-renderer__workspace"
-}, ve = ["data-highlighted-variable-key"], ye = { class: "gd-contract-template-renderer__pages" }, be = {
-	key: 0,
-	class: "gd-contract-template-renderer__panel"
-}, xe = { class: "gd-contract-template-renderer__panel-head" }, Se = {
-	key: 1,
-	class: "gd-contract-template-renderer__field-list"
-}, Ce = {
-	key: 4,
-	class: "gd-contract-template-renderer__footer"
-}, we = .5, Te = 1.5, S = .1, C = /* @__PURE__ */ f({
+}, be = ["onClick"], xe = {
+	key: 2,
+	class: "gd-contract-template-renderer__empty"
+}, Se = ["data-highlighted-variable-key"], Ce = { class: "gd-contract-template-renderer__pages" }, we = ["aria-label", "aria-expanded"], Te = { class: "gd-contract-template-renderer__panel-clip" }, Ee = { class: "gd-contract-template-renderer__panel" }, De = { class: "gd-contract-template-renderer__panel-head" }, Oe = { class: "gd-contract-template-renderer__panel-head-row" }, ke = { class: "gd-contract-template-renderer__panel-head-actions" }, Ae = ["data-field-key"], je = .5, Me = 1.5, S = .1, Ne = 3e3, Pe = /* @__PURE__ */ f({
 	name: "ProContractTemplateRenderer",
 	__name: "ProContractTemplateRenderer",
 	props: {
@@ -40,6 +30,7 @@ var me = {
 			type: Boolean,
 			default: !1
 		},
+		title: { default: "合同填写" },
 		showSubmitButton: {
 			type: Boolean,
 			default: !0
@@ -48,6 +39,14 @@ var me = {
 			type: Boolean,
 			default: !0
 		},
+		showValidateButton: {
+			type: Boolean,
+			default: !0
+		},
+		showResetButton: {
+			type: Boolean,
+			default: !0
+		},
 		showToolbar: {
 			type: Boolean,
 			default: !0
@@ -56,6 +55,10 @@ var me = {
 			type: Boolean,
 			default: !0
 		},
+		collapsiblePanel: {
+			type: Boolean,
+			default: !0
+		},
 		zoom: { default: 1 }
 	},
 	emits: [
@@ -65,223 +68,312 @@ var me = {
 		"submit",
 		"update:zoom"
 	],
-	setup(f, { expose: C, emit: Ee }) {
-		let w = f, T = Ee, De = h(), E = h(), D = h(i(w.template, w.values)), O = h({ ...D.value }), k = h(!1), A = h([]), j = h(""), M = h(""), N = h(""), P = h(Q(w.zoom)), { width: Oe } = pe(E), ke = o(() => w.readonly || w.disabled), F = o(() => te(w.template)), I = o(() => k.value ? A.value : F.value), L = o(() => (Array.isArray(w.template?.variables) ? w.template.variables : []).filter((e) => !!e?.key && [
-			"text",
-			"date",
-			"number",
-			"image",
-			"checkbox"
-		].includes(e.type ?? "text"))), Ae = o(() => {
+	setup(f, { expose: Pe, emit: Fe }) {
+		let C = f, w = Fe, Ie = h(), T = h(), Le = h(), E = h(a(C.template, C.values)), D = h({ ...E.value }), O = h(!1), k = h([]), A = h(!1), j = h(!1), Re = h(""), M = h(""), N = h(""), P = h(ht(C.zoom)), F = h(!1), I = h(!1), { width: ze } = ge(T), Be = o(() => C.readonly || C.disabled), L = o(() => ne(C.template)), R = o(() => O.value ? k.value : L.value), z = o(() => (Array.isArray(C.template?.variables) ? C.template.variables : []).filter((e) => !!e?.key && n(e.type ?? "text"))), B = o(() => F.value ? z.value.filter((e) => i(E.value[e.key])) : z.value), Ve = o(() => z.value.filter((e) => i(E.value[e.key])).length), He = o(() => {
 			let e = /* @__PURE__ */ new Map();
-			return I.value.forEach((t) => {
+			return R.value.forEach((t) => {
 				t.variableKey && e.set(t.variableKey, [...e.get(t.variableKey) ?? [], t]);
 			}), e;
-		}), R = o(() => {
-			let e = w.interactionMode === "panel";
-			return n(w.template, e ? D.value : O.value, {
-				readonly: w.readonly,
-				disabled: w.disabled,
+		}), V = o(() => {
+			let e = C.interactionMode === "panel";
+			return ee(C.template, e ? E.value : D.value, {
+				readonly: C.readonly,
+				disabled: C.disabled,
 				mode: e ? "display" : "control",
 				activeKey: e ? M.value : ""
 			});
-		}), z = o(() => R.value.length > 0), B = o(() => L.value.filter((e) => !r(D.value[e.key])).length), V = o(() => L.value.filter((e) => e.required && r(D.value[e.key])).length), je = o(() => L.value.length ? Math.round(B.value / L.value.length * 100) : 0), Me = o(() => k.value && A.value.length === 0), H = o(() => k.value ? Me.value ? "校验通过，模板与填写值均符合规则" : `发现 ${A.value.length} 个模板或填写问题` : F.value.length ? `模板存在 ${F.value.length} 个问题，已安全降级展示` : "");
-		y(() => w.template, (e) => {
-			U(i(e, w.values), !1), K();
+		}), H = o(() => V.value.length > 0), U = o(() => z.value.filter((e) => !i(E.value[e.key])).length), W = o(() => z.value.filter((e) => e.required && i(E.value[e.key])).length), Ue = o(() => z.value.length ? Math.round(U.value / z.value.length * 100) : 0), We = o(() => O.value && k.value.length === 0), Ge = o(() => O.value ? We.value ? "校验通过，模板与填写值均符合规则" : `发现 ${k.value.length} 个模板或填写问题` : L.value.length ? `模板存在 ${L.value.length} 个问题，已安全降级展示` : ""), Ke = o(() => O.value ? R.value.length > 0 || j.value : L.value.length > 0);
+		y(() => C.template, (e) => {
+			G(a(e, C.values), !1), $e();
 			let t = Array.isArray(e?.pages) ? e.pages.map((e) => e?.id) : [];
-			t.includes(N.value) || (N.value = t.find(Boolean) ?? ""), M.value && !L.value.some((e) => e.key === M.value) && Be();
-		}, { deep: !0 }), y(() => w.values, (e) => {
-			let t = i(w.template, e);
-			qe(t, D.value) || (U(t, !1), K());
-		}, { deep: !0 }), y(() => w.interactionMode, (e) => {
-			e === "inline" && (O.value = { ...D.value });
-		}), y(() => w.zoom, (e) => P.value = Q(e)), y(R, (e) => {
+			t.includes(N.value) || (N.value = t.find(Boolean) ?? ""), M.value && !z.value.some((e) => e.key === M.value) && it();
+		}, { deep: !0 }), y(() => C.values, (e) => {
+			let t = a(C.template, e);
+			gt(t, E.value) || (G(t, !1), $e());
+		}, { deep: !0 }), y(() => C.interactionMode, (e) => {
+			e === "inline" && (D.value = { ...E.value });
+		}), y(() => C.collapsiblePanel, (e) => {
+			e || (I.value = !1);
+		}), y(() => C.zoom, (e) => P.value = ht(e)), y(V, (e) => {
 			!N.value && e.length && (N.value = e[0].id);
 		}, { immediate: !0 });
-		function U(e, t = !0, n = {}) {
-			D.value = { ...e }, n.refreshInlineHtml !== !1 && (O.value = { ...e }), t && (T("update:values", { ...D.value }), T("change", { ...D.value }));
+		function G(e, t = !0, n = {}) {
+			E.value = { ...e }, n.refreshInlineHtml !== !1 && (D.value = { ...e }), t && (w("update:values", { ...E.value }), w("change", { ...E.value }));
 		}
-		function W(e, t) {
-			!e || ke.value || (U({
-				...D.value,
+		function K(e, t) {
+			!e || Be.value || (G({
+				...E.value,
 				[e]: t
-			}, !0, { refreshInlineHtml: w.interactionMode !== "inline" }), k.value && Le());
+			}, !0, { refreshInlineHtml: C.interactionMode !== "inline" }), O.value && J());
 		}
-		function Ne(e) {
-			if (w.interactionMode !== "inline") return;
+		function qe(e) {
+			if (C.interactionMode !== "inline") return;
 			let t = e.target;
 			if (!(t instanceof HTMLInputElement) && !(t instanceof HTMLTextAreaElement)) return;
 			let n = t.dataset.key || "";
-			n && (t instanceof HTMLInputElement && t.type === "checkbox" ? W(n, t.checked) : t instanceof HTMLInputElement && t.type === "number" ? W(n, t.value === "" ? void 0 : t.valueAsNumber) : W(n, t.value));
+			n && (t instanceof HTMLInputElement && t.type === "checkbox" ? K(n, t.checked) : t instanceof HTMLInputElement && t.type === "number" ? K(n, t.value === "" ? void 0 : t.valueAsNumber) : K(n, t.value));
 		}
-		function Pe(e) {
+		function Je(e) {
 			let t = e.target;
 			if (!(t instanceof Element)) return;
 			let n = t.closest("[data-render-page-id]");
 			n?.dataset.renderPageId && (N.value = n.dataset.renderPageId);
 			let r = t.closest("[data-contract-render-wrapper], [data-contract-render-control]")?.dataset.key || "";
-			r && J(r);
+			r && rt(r);
 		}
-		function Fe(e) {
+		function Ye(e) {
 			if (e.key !== "Enter" && e.key !== " ") return;
 			let t = e.target;
-			!(t instanceof HTMLElement) || !t.dataset.key || (e.preventDefault(), J(t.dataset.key));
+			!(t instanceof HTMLElement) || !t.dataset.key || (e.preventDefault(), rt(t.dataset.key));
+		}
+		function q() {
+			return { ...E.value };
+		}
+		function Xe(e) {
+			G(a(C.template, e));
 		}
-		function G() {
-			return { ...D.value };
+		function J() {
+			let e = re(C.template, E.value);
+			return et(e), w("validate", e), e;
 		}
-		function Ie(e) {
-			U(i(w.template, e));
+		function Ze() {
+			let e = te(C.template, E.value, C.validateOnSubmit);
+			if ((C.validateOnSubmit || e.length) && (et(e), w("validate", e)), e.length) return ot(e[0]), !1;
+			let t = q();
+			return w("submit", t), t;
 		}
-		function Le() {
-			let e = ne(w.template, D.value);
-			return A.value = e, k.value = !0, T("validate", e), e;
+		function Qe() {
+			return G(r(C.template)), $e(), q();
 		}
-		function Re() {
-			let e = ee(w.template, D.value, w.validateOnSubmit);
-			if ((w.validateOnSubmit || e.length) && (A.value = e, k.value = !0, T("validate", e)), e.length) return He(e[0]), !1;
-			let t = G();
-			return T("submit", t), t;
+		function $e() {
+			O.value = !1, k.value = [], A.value = !1, j.value = !1, X();
 		}
-		function ze() {
-			return U(t(w.template)), K(), G();
+		function et(e) {
+			if (k.value = e, O.value = !0, A.value = !1, e.length) {
+				j.value = !1, X();
+				return;
+			}
+			tt();
 		}
-		function K() {
-			k.value = !1, A.value = [];
+		let Y;
+		function X() {
+			Y &&= (clearTimeout(Y), void 0);
 		}
-		function q(e) {
-			J(e, !0);
+		function tt() {
+			X(), j.value = !0, Y = setTimeout(() => {
+				j.value = !1, Y = void 0;
+			}, Ne);
 		}
-		function J(e, t = !1) {
-			e && (M.value = e, j.value = e, p(() => {
-				Ve(e);
-				let n = E.value?.querySelector(`[data-key="${$(e)}"]`), r = n?.closest("[data-render-page-id]");
+		function Z(e) {
+			rt(e, !0);
+		}
+		function nt(e) {
+			C.interactionMode === "panel" && (I.value &&= !1, F.value && z.value.some((t) => t.key === e) && !B.value.some((t) => t.key === e) && (F.value = !1));
+		}
+		function rt(e, t = !1) {
+			e && (nt(e), M.value = e, Re.value = e, ue(() => {
+				at(e);
+				let n = T.value?.querySelector(`[data-key="${$(e)}"]`), r = n?.closest("[data-render-page-id]");
 				r?.dataset.renderPageId && (N.value = r.dataset.renderPageId), t && n?.scrollIntoView({
 					behavior: "smooth",
 					block: "center",
 					inline: "center"
+				}), C.interactionMode === "panel" && Le.value?.querySelector(`[data-field-key="${$(e)}"]`)?.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest"
 				});
 			}));
 		}
-		function Be() {
-			M.value = "", j.value = "", Ve("");
+		function it() {
+			M.value = "", Re.value = "", at("");
 		}
-		function Ve(e) {
-			E.value?.querySelectorAll("[data-contract-render-wrapper], [data-contract-render-control]").forEach((t) => t.classList.toggle("is-active", !!e && t.dataset.key === e));
+		function at(e) {
+			T.value?.querySelectorAll("[data-contract-render-wrapper], [data-contract-render-control]").forEach((t) => t.classList.toggle("is-active", !!e && t.dataset.key === e));
 		}
-		function He(e) {
-			e.variableKey ? q(e.variableKey) : e.pageId && Z(e.pageId);
+		function ot(e) {
+			e.variableKey ? Z(e.variableKey) : e.pageId && mt(e.pageId);
 		}
-		function Y(e) {
-			return Ae.value.get(e) ?? [];
+		function st(e) {
+			return He.value.get(e) ?? [];
 		}
-		function Ue(e) {
+		function ct(e) {
 			return {
 				variable: e,
-				value: D.value[e.key],
-				errors: Y(e.key),
+				value: E.value[e.key],
+				errors: st(e.key),
 				active: M.value === e.key,
-				readonly: w.readonly,
-				disabled: w.disabled,
-				updateValue: (t) => W(e.key, t),
-				focusVariable: () => q(e.key)
+				readonly: C.readonly,
+				disabled: C.disabled,
+				updateValue: (t) => K(e.key, t),
+				focusVariable: () => Z(e.key)
 			};
 		}
-		function X(e) {
-			let t = Q(e);
-			return P.value = t, T("update:zoom", t), t;
+		function lt() {
+			let e = z.value;
+			if (!e.length) return;
+			let t = e.findIndex((e) => e.key === M.value), n = t < 0 ? 0 : t + 1;
+			for (let t = 0; t < e.length; t += 1) {
+				let r = e[(n + t) % e.length];
+				if (i(E.value[r.key])) {
+					Z(r.key);
+					return;
+				}
+			}
+		}
+		function ut() {
+			!C.collapsiblePanel || C.interactionMode !== "panel" || (I.value = !I.value);
 		}
-		function We() {
-			return X(1);
+		function Q(e) {
+			let t = ht(e);
+			return P.value = t, w("update:zoom", t), t;
 		}
-		function Ge() {
+		function dt() {
+			return Q(1);
+		}
+		function ft() {
 			return P.value;
 		}
-		function Ke() {
-			let e = Math.max(...R.value.map((e) => e.width), 1);
-			return X(Math.max(0, Oe.value - 48) / e);
+		function pt() {
+			let e = Math.max(...V.value.map((e) => e.width), 1);
+			return Q(Math.max(0, ze.value - 48) / e);
 		}
-		function Z(e) {
-			e && (N.value = e, p(() => {
-				E.value?.querySelector(`[data-render-page-id="${$(e)}"]`)?.scrollIntoView({
+		function mt(e) {
+			e && (N.value = e, ue(() => {
+				T.value?.querySelector(`[data-render-page-id="${$(e)}"]`)?.scrollIntoView({
 					behavior: "smooth",
 					block: "start",
 					inline: "center"
 				});
 			}));
 		}
-		function Q(e) {
+		function ht(e) {
 			let t = Number(e);
-			return Number.isFinite(t) ? Math.min(Te, Math.max(we, Math.round(t * 100) / 100)) : 1;
+			return Number.isFinite(t) ? Math.min(Me, Math.max(je, Math.round(t * 100) / 100)) : 1;
 		}
 		function $(e) {
 			return e.replaceAll("\\", "\\\\").replaceAll("\"", "\\\"");
 		}
-		function qe(e, t) {
+		function gt(e, t) {
 			let n = new Set([...Object.keys(e), ...Object.keys(t)]);
 			return Array.from(n).every((n) => e[n] === t[n]);
 		}
-		return C({
-			getValues: G,
-			setValues: Ie,
-			validate: Le,
-			submit: Re,
-			resetValues: ze,
-			scrollToVariable: q,
-			setZoom: X,
-			resetZoom: We,
-			getZoom: Ge,
-			fitWidth: Ke,
-			scrollToPage: Z
-		}), (t, n) => (m(), l("section", {
+		function _t(e) {
+			!(e.ctrlKey || e.metaKey) || !H.value || (e.preventDefault(), Q(e.deltaY > 0 ? P.value - S : P.value + S));
+		}
+		let vt;
+		function yt() {
+			vt?.removeEventListener("wheel", _t), vt = void 0;
+		}
+		function bt(e) {
+			yt(), e && (e.addEventListener("wheel", _t, { passive: !1 }), vt = e);
+		}
+		return y(T, (e) => {
+			bt(e);
+		}, { immediate: !0 }), de(() => {
+			yt(), X();
+		}), Pe({
+			getValues: q,
+			setValues: Xe,
+			validate: J,
+			submit: Ze,
+			resetValues: Qe,
+			scrollToVariable: Z,
+			setZoom: Q,
+			resetZoom: dt,
+			getZoom: ft,
+			fitWidth: pt,
+			scrollToPage: mt
+		}), (n, r) => (m(), l("section", {
 			ref_key: "rendererElement",
-			ref: De,
-			class: ce(["gd-contract-template-renderer", {
+			ref: Ie,
+			class: p(["gd-contract-template-renderer", {
 				"is-disabled": f.disabled,
 				"is-readonly": f.readonly,
 				"is-panel": f.interactionMode === "panel",
 				"is-inline": f.interactionMode === "inline"
 			}]),
-			onClick: Pe,
-			onKeydown: Fe,
-			onInput: Ne,
-			onChange: Ne
+			onClick: Je,
+			onKeydown: Ye,
+			onInput: qe,
+			onChange: qe
 		}, [
-			f.showToolbar && z.value ? (m(), s(ae, {
+			H.value ? (m(), s(ae, {
 				key: 0,
+				title: f.title,
+				"filled-count": U.value,
+				"total-count": z.value.length,
+				"required-missing-count": W.value,
 				zoom: P.value,
-				pages: R.value,
+				pages: V.value,
 				"active-page-id": N.value,
-				onZoomIn: n[0] ||= (e) => X(P.value + S),
-				onZoomOut: n[1] ||= (e) => X(P.value - S),
-				onResetZoom: We,
-				onFitWidth: Ke,
-				onSelectPage: Z
-			}, null, 8, [
+				"min-zoom": je,
+				"max-zoom": Me,
+				"show-toolbar": f.showToolbar,
+				"show-validate-button": f.showValidateButton,
+				"show-reset-button": f.showResetButton,
+				"show-submit-button": f.showSubmitButton,
+				"show-panel-toggle": f.interactionMode === "panel" && f.collapsiblePanel,
+				"panel-collapsed": I.value,
+				readonly: f.readonly,
+				disabled: f.disabled,
+				onZoomIn: r[0] ||= (e) => Q(P.value + S),
+				onZoomOut: r[1] ||= (e) => Q(P.value - S),
+				onResetZoom: dt,
+				onFitWidth: pt,
+				onSelectPage: mt,
+				onValidate: J,
+				onReset: Qe,
+				onSubmit: Ze,
+				onTogglePanel: ut
+			}, {
+				extra: b(() => [fe(n.$slots, "headerExtra")]),
+				_: 3
+			}, 8, [
+				"title",
+				"filled-count",
+				"total-count",
+				"required-missing-count",
 				"zoom",
 				"pages",
-				"active-page-id"
+				"active-page-id",
+				"show-toolbar",
+				"show-validate-button",
+				"show-reset-button",
+				"show-submit-button",
+				"show-panel-toggle",
+				"panel-collapsed",
+				"readonly",
+				"disabled"
 			])) : c("", !0),
-			H.value ? (m(), l("div", me, [d(v(ue), {
-				type: Me.value ? "success" : "error",
-				message: H.value,
-				"show-icon": ""
-			}, null, 8, ["type", "message"]), I.value.length ? (m(), l("div", he, [(m(!0), l(a, null, g(I.value, (e) => (m(), l("button", {
+			Ke.value ? (m(), l("div", {
+				key: 1,
+				class: p(["gd-contract-template-renderer__validation", We.value ? "is-success" : "is-error"]),
+				role: "status"
+			}, [u("div", _e, [u("span", null, _(Ge.value), 1), R.value.length ? (m(), l("button", {
+				key: 0,
+				type: "button",
+				class: "gd-contract-template-renderer__validation-toggle",
+				"aria-expanded": A.value,
+				onClick: r[2] ||= (e) => A.value = !A.value
+			}, _(A.value ? "收起" : `展开 ${R.value.length} 个问题`), 9, ve)) : c("", !0)]), A.value && R.value.length ? (m(), l("div", ye, [(m(!0), l(se, null, g(R.value, (e) => (m(), l("button", {
 				key: `${e.code}-${e.id}-${e.message}`,
 				type: "button",
 				class: "gd-contract-template-renderer__validation-item",
-				onClick: (t) => He(e)
-			}, _(e.message), 9, ge))), 128))])) : c("", !0)])) : c("", !0),
-			z.value ? (m(), l("div", _e, [u("div", {
+				onClick: (t) => ot(e)
+			}, _(e.message), 9, be))), 128))])) : c("", !0)], 2)) : c("", !0),
+			H.value ? (m(), l("div", {
+				key: 3,
+				class: p(["gd-contract-template-renderer__workspace", { "is-inline": f.interactionMode === "inline" }])
+			}, [u("div", {
 				ref_key: "pagesViewportElement",
-				ref: E,
+				ref: T,
 				class: "gd-contract-template-renderer__pages-viewport",
-				"data-highlighted-variable-key": j.value
-			}, [u("div", ye, [(m(!0), l(a, null, g(R.value, (e, t) => (m(), s(ie, {
+				"data-highlighted-variable-key": Re.value
+			}, [u("div", Ce, [(m(!0), l(se, null, g(V.value, (e, t) => (m(), s(oe, {
 				key: e.id,
 				page: e,
 				index: t,
-				total: R.value.length,
+				total: V.value.length,
 				zoom: P.value,
 				"show-meta": f.showPageMeta
 			}, null, 8, [
@@ -290,55 +382,85 @@ var me = {
 				"total",
 				"zoom",
 				"show-meta"
-			]))), 128))])], 8, ve), f.interactionMode === "panel" ? (m(), l("aside", be, [
-				u("div", xe, [u("div", null, [n[2] ||= u("strong", null, "填写项", -1), u("span", null, _(B.value) + " / " + _(L.value.length) + " 已填写", 1)]), u("span", null, _(V.value ? `${V.value} 项必填未完成` : "必填项已完成"), 1)]),
-				d(v(fe), {
-					percent: je.value,
+			]))), 128))])], 8, Se), f.interactionMode === "panel" ? (m(), l("div", {
+				key: 0,
+				class: p(["gd-contract-template-renderer__panel-wrap", { "is-collapsed": I.value && f.collapsiblePanel }])
+			}, [f.collapsiblePanel ? (m(), s(v(he), {
+				key: 0,
+				title: I.value ? "展开填写面板" : "收起填写面板"
+			}, {
+				default: b(() => [u("button", {
+					type: "button",
+					class: "gd-contract-template-renderer__panel-handle",
+					"aria-label": I.value ? "展开填写面板" : "收起填写面板",
+					"aria-expanded": !I.value,
+					onClick: r[3] ||= (e) => I.value = !I.value
+				}, [I.value ? (m(), s(v(e), {
+					key: 0,
+					"aria-hidden": "true"
+				})) : (m(), s(v(t), {
+					key: 1,
+					"aria-hidden": "true"
+				}))], 8, we)]),
+				_: 1
+			}, 8, ["title"])) : c("", !0), u("div", Te, [u("aside", Ee, [u("div", De, [
+				u("div", Oe, [u("div", null, [r[5] ||= u("strong", null, "填写项", -1), u("span", null, _(U.value) + " / " + _(z.value.length) + " 已填写", 1)]), u("span", null, _(W.value ? `${W.value} 项必填未完成` : "必填项已完成"), 1)]),
+				u("div", ke, [d(v(pe), {
+					size: "small",
+					type: F.value ? "primary" : "default",
+					onClick: r[4] ||= (e) => F.value = !F.value
+				}, {
+					default: b(() => [...r[6] ||= [ce(" 仅看未填 ", -1)]]),
+					_: 1
+				}, 8, ["type"]), d(v(pe), {
+					size: "small",
+					disabled: !Ve.value,
+					onClick: lt
+				}, {
+					default: b(() => [...r[7] ||= [ce(" 下一个未填项 ", -1)]]),
+					_: 1
+				}, 8, ["disabled"])]),
+				d(v(me), {
+					percent: Ue.value,
 					size: "small",
 					"show-info": !1
-				}, null, 8, ["percent"]),
-				L.value.length ? (m(), l("div", Se, [(m(!0), l(a, null, g(L.value, (e) => le(t.$slots, "field", se({
-					key: e.id || e.key,
-					ref_for: !0
-				}, Ue(e)), () => [d(re, {
-					variable: e,
-					value: D.value[e.key],
-					errors: Y(e.key),
-					active: M.value === e.key,
-					readonly: f.readonly,
-					disabled: f.disabled,
-					onUpdateValue: (t) => W(e.key, t),
-					onFocusVariable: (t) => q(e.key)
-				}, null, 8, [
-					"variable",
-					"value",
-					"errors",
-					"active",
-					"readonly",
-					"disabled",
-					"onUpdateValue",
-					"onFocusVariable"
-				])])), 128))])) : (m(), s(v(x), {
-					key: 0,
-					description: "暂无填写项",
-					image: v(x).PRESENTED_IMAGE_SIMPLE
-				}, null, 8, ["image"]))
-			])) : c("", !0)])) : (m(), s(v(x), {
-				key: 2,
+				}, null, 8, ["percent"])
+			]), B.value.length ? (m(), l("div", {
+				key: 1,
+				ref_key: "fieldListElement",
+				ref: Le,
+				class: "gd-contract-template-renderer__field-list"
+			}, [(m(!0), l(se, null, g(B.value, (e) => (m(), l("div", {
+				key: e.id || e.key,
+				"data-field-key": e.key
+			}, [fe(n.$slots, "field", le({ ref_for: !0 }, ct(e)), () => [d(ie, {
+				variable: e,
+				value: E.value[e.key],
+				errors: st(e.key),
+				active: M.value === e.key,
+				readonly: f.readonly,
+				disabled: f.disabled,
+				onUpdateValue: (t) => K(e.key, t),
+				onFocusVariable: (t) => Z(e.key)
+			}, null, 8, [
+				"variable",
+				"value",
+				"errors",
+				"active",
+				"readonly",
+				"disabled",
+				"onUpdateValue",
+				"onFocusVariable"
+			])])], 8, Ae))), 128))], 512)) : (m(), s(v(x), {
+				key: 0,
+				description: z.value.length ? "暂无未填项" : "暂无填写项",
+				image: v(x).PRESENTED_IMAGE_SIMPLE
+			}, null, 8, ["description", "image"]))])])], 2)) : c("", !0)], 2)) : (m(), l("div", xe, [d(v(x), {
 				description: "暂无可渲染的合同页面",
 				image: v(x).PRESENTED_IMAGE_SIMPLE
-			}, null, 8, ["image"])),
-			z.value && f.showSubmitButton && !f.readonly ? (m(), l("div", Ce, [d(v(de), {
-				type: "primary",
-				disabled: f.disabled,
-				onClick: Re
-			}, {
-				icon: b(() => [d(v(e))]),
-				default: b(() => [n[3] ||= oe(" 提交填写数据 ", -1)]),
-				_: 1
-			}, 8, ["disabled"])])) : c("", !0)
+			}, null, 8, ["image"])]))
 		], 34));
 	}
 });
 //#endregion
-export { C as default };
+export { Pe as default };