@yugu-ui/flow-ui 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { default as FlowConfig } from './config/FlowConfig';
 export { default as FlowConfigField } from './config/FlowConfigField';
 export { default as FlowConfigMore } from './config/FlowConfigMore';
 export { default as FlowLayout } from './timeline/FlowLayout';
+export { default as FlowNodesPanel } from './timeline/FlowNodesPanel';
+export type { FlowTimelineData, FlowStatusTag } from './timeline/timeline-mapping';
 export { default as FlowNode } from './timeline/FlowNode';
 export { default as FlowAvatar } from './timeline/FlowAvatar';
 export { default as ApprovalModal } from './timeline/ApprovalModal';

package/dist/index.js

@@ -5959,8 +5959,254 @@ var ApprovalModal_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/*
 	}
 }), [["__scopeId", "data-v-fb3bd9c6"]]);
 //#endregion
+//#region src/base-ui/base-card-item.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "header" };
+var _hoisted_2$3 = { class: "header-left" };
+var _hoisted_3$2 = { class: "title" };
+var _hoisted_4$2 = {
+	key: 0,
+	class: "subtitle"
+};
+var _hoisted_5$1 = { class: "header-right" };
+//#endregion
+//#region src/base-ui/base-card-item.vue
+var base_card_item_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	name: "BaseCardItem",
+	inheritAttrs: false,
+	__name: "base-card-item",
+	props: {
+		title: { default: "" },
+		subtitle: { default: "" },
+		contentPadding: { default: 16 }
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const contentStyle = computed(() => ({ padding: typeof props.contentPadding === "number" ? `${props.contentPadding}px` : props.contentPadding }));
+		const showHeader = computed(() => {
+			return !!props.title || !!props.subtitle || !!slots["subtitle"] || !!slots["header-extra"];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NCard), mergeProps({
+				class: "base-card-item base-card-item-spacing",
+				"content-class": "base-card-item-content",
+				"header-class": "base-card-item-header",
+				"content-style": contentStyle.value
+			}, _ctx.$attrs), createSlots({
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+				_: 2
+			}, [showHeader.value ? {
+				name: "header",
+				fn: withCtx(() => [createElementVNode("div", _hoisted_1$5, [createElementVNode("div", _hoisted_2$3, [createElementVNode("span", _hoisted_3$2, toDisplayString(__props.title), 1), renderSlot(_ctx.$slots, "subtitle", {}, () => [__props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], true)]), createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "header-extra", {}, void 0, true)])])]),
+				key: "0"
+			} : void 0]), 1040, ["content-style"]);
+		};
+	}
+}), [["__scopeId", "data-v-e9115957"]]);
+//#endregion
+//#region src/timeline/timeline-mapping.ts
+/** 固定尾节点：节点有数据时渲染追加（display 下状态按流程是否走完覆盖），接口返回与提交数据均不包含 */
+var END_NODE = {
+	type: "end",
+	name: "结束",
+	desc: "流程结束",
+	status: "pending",
+	users: []
+};
+/** 人员处理记录映射：一行 records 对应一条展示记录（finished=0 未完成行过滤）——result 优先：result=2 同意；result=3 或 is_reject=1 驳回行按记录操作人判定方向（record.user_id=挂载人员 id 主动驳回「驳回到 rejecters.name」、否则被驳回「被 user_name 驳回」、名字均缺且 flowRejected=true 展示「驳回到 发起人」、否则「驳回」）；result=0 不展示 */
+function toUserRecords(user, flowRejected) {
+	const toFiles = (files) => files?.length ? files.map((file) => ({
+		name: file.original_filename || file.file_name || "附件",
+		url: file.url
+	})) : void 0;
+	const rows = [];
+	(Array.isArray(user.records) ? user.records : []).forEach((record) => {
+		if (record.finished === 0) return;
+		const isSelf = record.user_id != null && String(record.user_id) === String(user.id);
+		const rejectTo = isSelf ? record.rejecters?.name : void 0;
+		const rejectBy = isSelf ? void 0 : record.user_name;
+		const base = {
+			time: record.assertion_time ? formatTime(record.assertion_time, "YYYY-MM-DD HH:mm") : void 0,
+			opinion: record.suggest || void 0,
+			attachments: toFiles(record.attachments)
+		};
+		if (record.result === 2) {
+			rows.push({
+				type: "approve",
+				...base
+			});
+			return;
+		}
+		if (record.is_reject !== 1 && record.result !== 3) return;
+		rows.push({
+			type: "reject",
+			...base,
+			rejectNode: rejectTo || (!rejectTo && !rejectBy && flowRejected ? "发起人" : void 0),
+			rejectBy
+		});
+	});
+	return rows;
+}
+/** 已处理记录（result=2/3 或 is_reject=1，与 toUserRecords 口径一致）中处理时间（assertion_time 毫秒时间戳）最新的一条是否为驳回（result=3 或 is_reject=1）；空集合返回 false，records 数组顺序不可靠必须按时间数值比较 */
+function isLatestRowsReject(rows) {
+	if (!rows.length) return false;
+	const latest = rows.reduce((acc, cur) => (cur.assertion_time ?? 0) >= (acc.assertion_time ?? 0) ? cur : acc, rows[0]);
+	return latest.result === 3 || latest.is_reject === 1;
+}
+/** display 模式审批时间线映射：节点快照直接映射 FlowNodeItem——发起人节点独立判定：流程被驳回到发起人（finished=1 且 status=-1）标红、其余一律完成绿色；其余节点按实例 finished、节点自带 finished（1=已完成）推导：进行中节点优先取第一个「未完成且 status=1 待处理」的节点，无激活节点时兜底认第一个存在待处理任务行（users.records 中 result=0 且 finished=0）的节点为当前节点，仍无则回退第一个未完成节点，有激活/兜底节点时其后节点一律待开始（剥离上一轮残留），流程被驳回终止时其余节点一律灰色待开始；人员状态按本人最新一条操作记录展示（已处理记录 result=2/3 或 is_reject=1 中 assertion_time 最新一条：驳回标红、同意标绿），无操作记录随节点状态（进行中节点淡黄、其余灰色未处理） */
+function mapTimelineNodes(data) {
+	const d = data;
+	if (!d?.nodes?.length) return [];
+	const instanceFinished = d.finished === 1;
+	const instanceRejected = instanceFinished && d.status === -1;
+	const activeIndex = d.nodes.findIndex((item) => item.status === 1 && item.finished !== 1);
+	const pendingIndex = !instanceFinished && activeIndex < 0 ? d.nodes.findIndex((item) => item.users.some((user) => (Array.isArray(user.records) ? user.records : []).some((record) => record.result === 0 && record.finished === 0))) : -1;
+	const currentIndex = activeIndex > -1 ? activeIndex : pendingIndex > -1 ? pendingIndex : instanceFinished ? -1 : d.nodes.findIndex((item) => item.finished !== 1);
+	return d.nodes.map((node, index) => {
+		const forcePending = !instanceFinished && (activeIndex > -1 || pendingIndex > -1) && index > currentIndex;
+		const nodeStatus = node.type === "start" ? instanceRejected ? "rejected" : "done" : instanceRejected ? "pending" : forcePending ? "pending" : !instanceFinished && index === currentIndex ? "doing" : instanceFinished || node.finished === 1 || currentIndex > -1 && index < currentIndex ? "done" : "pending";
+		const users = node.users.map((user) => {
+			const records = toUserRecords(user, instanceRejected);
+			const rawRows = Array.isArray(user.records) ? user.records : [];
+			const processedRows = rawRows.filter((record) => record.result === 2 || record.result === 3 || record.is_reject === 1);
+			const status = processedRows.length ? isLatestRowsReject(processedRows) ? "rejected" : "done" : nodeStatus === "doing" ? "doing" : nodeStatus === "done" && node.mode === "orsign" ? "pending" : nodeStatus;
+			return {
+				id: user.id,
+				name: user.name,
+				status,
+				pendingTask: rawRows.some((record) => record.result === 0 && record.finished === 0),
+				...records.length ? { records } : {}
+			};
+		});
+		return {
+			type: node.type,
+			id: node.node_id,
+			status: nodeStatus,
+			name: node.name,
+			desc: node.desc ?? void 0,
+			time: node.created_time && (node.finished === 1 || nodeStatus === "done" || nodeStatus === "rejected") ? formatTime(node.created_time, "YYYY-MM-DD HH:mm") : void 0,
+			mode: node.mode,
+			selfSelect: node.selfSelect,
+			users
+		};
+	});
+}
+/** 组装完整节点链：有数据统一追加 END 结束节点，无数据为空数组走空态；display（非 form）流程全部完成时 END 状态同步 done；末节点已是 end（后端快照自带 end、或调用方传入已组装过 END 的节点链，如 FlowLayout → FlowNodesPanel）时幂等跳过，防止结束节点重复渲染 */
+function withEndNode(baseNodes, mode) {
+	if (!baseNodes.length) return [];
+	if (baseNodes[baseNodes.length - 1].type === "end") return baseNodes;
+	const allDone = mode !== "form" && baseNodes.every((node) => node.status === "done");
+	return [...baseNodes, {
+		...END_NODE,
+		status: allDone ? "done" : "pending"
+	}];
+}
+/** 折叠面板标题流程状态标签：仅 display 模式且有详情数据时推导——finished=1 且 status=-1 已拒绝（驳回到发起人终止）、finished=1 已同意、未结束进行中；form 发起模式无实例状态不展示，数据未返回前隐藏避免先展示「进行中」再跳变 */
+function getFlowStatusTag(mode, data) {
+	if (mode === "form" || !data) return void 0;
+	if (data.finished === 1) return data.status === -1 ? {
+		text: "已拒绝",
+		type: "error"
+	} : {
+		text: "已同意",
+		type: "success"
+	};
+	return {
+		text: "进行中",
+		type: "warning"
+	};
+}
+//#endregion
+//#region src/timeline/FlowNodesPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = { class: "flow-node__title" };
+var _hoisted_2$2 = { class: "flow-node__list" };
+//#endregion
+//#region src/timeline/FlowNodesPanel.vue
+var FlowNodesPanel_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	name: "FlowNodesPanel",
+	__name: "FlowNodesPanel",
+	props: /* @__PURE__ */ mergeModels({
+		data: {},
+		nodes: {},
+		mode: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		title: { default: "审批流程" },
+		statusTag: {}
+	}, {
+		"selectedUsersMap": { default: () => ({}) },
+		"selectedUsersMapModifiers": {}
+	}),
+	emits: ["update:selectedUsersMap"],
+	setup(__props) {
+		const props = __props;
+		/** 自选审批人节点已选人员（key=节点名） */
+		const selectedUsersMap = useModel(__props, "selectedUsersMap");
+		/** 面板渲染节点链：有数据时追加 END 结束节点，无数据为空数组走空态 */
+		const panelNodes = computed(() => {
+			if (props.mode === "form") return withEndNode(props.nodes ?? [], "form");
+			return withEndNode(props.data ? mapTimelineNodes(props.data) : props.nodes ?? [], "display");
+		});
+		/** 折叠面板标题流程状态标签 */
+		const panelStatusTag = computed(() => props.data ? getFlowStatusTag(props.mode, props.data) : props.statusTag);
+		return (_ctx, _cache) => {
+			const _component_NTag = NTag;
+			const _component_NEmpty = NEmpty;
+			const _component_NSpin = NSpin;
+			const _component_NCollapseItem = NCollapseItem;
+			const _component_NCollapse = NCollapse;
+			return openBlock(), createBlock(base_card_item_default, { "content-padding": 0 }, {
+				default: withCtx(() => [createVNode(_component_NCollapse, {
+					class: "flow-node",
+					"arrow-placement": "right",
+					"default-expanded-names": ["flow"]
+				}, {
+					default: withCtx(() => [createVNode(_component_NCollapseItem, { name: "flow" }, {
+						header: withCtx(() => [createElementVNode("span", _hoisted_1$4, [createTextVNode(toDisplayString(__props.title) + " ", 1), panelStatusTag.value ? (openBlock(), createBlock(_component_NTag, {
+							key: 0,
+							type: panelStatusTag.value.type,
+							size: "small"
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(panelStatusTag.value.text), 1)]),
+							_: 1
+						}, 8, ["type"])) : createCommentVNode("", true)])]),
+						default: withCtx(() => [createVNode(_component_NSpin, {
+							show: __props.loading,
+							class: "w-full"
+						}, {
+							default: withCtx(() => [createElementVNode("div", _hoisted_2$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(panelNodes.value, (node) => {
+								return openBlock(), createBlock(FlowNode_default, {
+									key: node.id ?? node.name,
+									"selected-users": selectedUsersMap.value[node.name],
+									"onUpdate:selectedUsers": ($event) => selectedUsersMap.value[node.name] = $event,
+									node,
+									mode: __props.mode
+								}, null, 8, [
+									"selected-users",
+									"onUpdate:selectedUsers",
+									"node",
+									"mode"
+								]);
+							}), 128)), !panelNodes.value.length ? (openBlock(), createBlock(_component_NEmpty, {
+								key: 0,
+								description: __props.mode === "form" ? "必填字段填写完整后展示流程节点" : "暂无流程节点"
+							}, null, 8, ["description"])) : createCommentVNode("", true)])]),
+							_: 1
+						}, 8, ["show"])]),
+						_: 1
+					})]),
+					_: 1
+				})]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-25e5146e"]]);
+//#endregion
 //#region src/base-ui/yg-confirm.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = { class: "yg-confirm" };
+var _hoisted_1$3 = { class: "yg-confirm" };
 //#endregion
 //#region src/base-ui/yg-confirm.vue
 var yg_confirm_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -6048,7 +6294,7 @@ var yg_confirm_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [__props.triggerType === "button" ? (openBlock(), createBlock(unref(NButton), mergeProps({ key: 0 }, buttonProps.value, { onClick: handleOpen }), createSlots({
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [__props.triggerType === "button" ? (openBlock(), createBlock(unref(NButton), mergeProps({ key: 0 }, buttonProps.value, { onClick: handleOpen }), createSlots({
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 2
 			}, [_ctx.$slots.icon ? {
@@ -6092,7 +6338,7 @@ var yg_confirm_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 }), [["__scopeId", "data-v-a65cb6d5"]]);
 //#endregion
 //#region src/base-ui/base-card.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = {
+var _hoisted_1$2 = {
 	key: 0,
 	class: "base-card-footer"
 };
@@ -6164,7 +6410,7 @@ var base_card_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_: 3
-				}, 8, ["show"]), showFooter.value ? (openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "footer", {}, () => [createVNode(unref(NSpace), { size: 12 }, {
+				}, 8, ["show"]), showFooter.value ? (openBlock(), createElementBlock("div", _hoisted_1$2, [renderSlot(_ctx.$slots, "footer", {}, () => [createVNode(unref(NSpace), { size: 12 }, {
 					default: withCtx(() => [
 						renderSlot(_ctx.$slots, "footer-extra", {}, void 0, true),
 						__props.cancelConfig?.show && __props.cancelConfig?.doubleConfirm ? (openBlock(), createBlock(yg_confirm_default, {
@@ -6221,51 +6467,6 @@ var base_card_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 	}
 }), [["__scopeId", "data-v-956107d8"]]);
 //#endregion
-//#region src/base-ui/base-card-item.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = { class: "header" };
-var _hoisted_2$3 = { class: "header-left" };
-var _hoisted_3$2 = { class: "title" };
-var _hoisted_4$2 = {
-	key: 0,
-	class: "subtitle"
-};
-var _hoisted_5$1 = { class: "header-right" };
-//#endregion
-//#region src/base-ui/base-card-item.vue
-var base_card_item_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
-	name: "BaseCardItem",
-	inheritAttrs: false,
-	__name: "base-card-item",
-	props: {
-		title: { default: "" },
-		subtitle: { default: "" },
-		contentPadding: { default: 16 }
-	},
-	setup(__props) {
-		const props = __props;
-		const slots = useSlots();
-		const contentStyle = computed(() => ({ padding: typeof props.contentPadding === "number" ? `${props.contentPadding}px` : props.contentPadding }));
-		const showHeader = computed(() => {
-			return !!props.title || !!props.subtitle || !!slots["subtitle"] || !!slots["header-extra"];
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(NCard), mergeProps({
-				class: "base-card-item base-card-item-spacing",
-				"content-class": "base-card-item-content",
-				"header-class": "base-card-item-header",
-				"content-style": contentStyle.value
-			}, _ctx.$attrs), createSlots({
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
-				_: 2
-			}, [showHeader.value ? {
-				name: "header",
-				fn: withCtx(() => [createElementVNode("div", _hoisted_1$3, [createElementVNode("div", _hoisted_2$3, [createElementVNode("span", _hoisted_3$2, toDisplayString(__props.title), 1), renderSlot(_ctx.$slots, "subtitle", {}, () => [__props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], true)]), createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "header-extra", {}, void 0, true)])])]),
-				key: "0"
-			} : void 0]), 1040, ["content-style"]);
-		};
-	}
-}), [["__scopeId", "data-v-e9115957"]]);
-//#endregion
 //#region src/adapter/wflow.ts
 /** 获取流程配置详情（GET /wflow/config/{config_id}） */
 function fetchGetWflowConfigDetail(configId) {
@@ -6307,12 +6508,8 @@ function fetchWflowUndoReject(data) {
 	});
 }
 //#endregion
-//#region src/timeline/FlowLayout.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "flow-node__title" };
-var _hoisted_2$2 = { class: "flow-node__list" };
-//#endregion
 //#region src/timeline/FlowLayout.vue
-var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+var FlowLayout_default = /* @__PURE__ */ defineComponent({
 	name: "FlowLayout",
 	__name: "FlowLayout",
 	props: {
@@ -6338,20 +6535,7 @@ var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		/** 是否展示驳回操作：仅 display 模式且 undo_finished=0（未处理）；form 发起模式无驳回 */
 		const canReject = computed(() => props.mode !== "form" && props.timelineData?.undo_finished === 0);
 		/** 折叠面板标题流程状态标签：仅 display 模式展示，颜色映射 已同意=success / 已拒绝=error / 进行中=warning */
-		const flowStatusTag = computed(() => {
-			if (props.mode === "form" || !props.timelineData) return void 0;
-			if (props.timelineData.finished === 1) return props.timelineData.status === -1 ? {
-				text: "已拒绝",
-				type: "error"
-			} : {
-				text: "已同意",
-				type: "success"
-			};
-			return {
-				text: "进行中",
-				type: "warning"
-			};
-		});
+		const flowStatusTag = computed(() => getFlowStatusTag(props.mode, props.timelineData));
 		/** 关闭：通知消费页（display=关闭详情页，form=取消发起）；页签关闭逻辑由消费页承担 */
 		function handleClose() {
 			emit("close");
@@ -6452,14 +6636,6 @@ var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			}
 			emit("success");
 		}
-		/** 固定尾节点：form/display 模式节点有数据时渲染追加（display 下状态按流程是否走完覆盖），接口返回与提交数据均不包含 */
-		const END_NODE = {
-			type: "end",
-			name: "结束",
-			desc: "流程结束",
-			status: "pending",
-			users: []
-		};
 		/** form 模式节点链：条件字段全部填写后经 fetchFlowNodes 请求所得（不同条件值得到不同节点），为空时节点区展示空态提示；不含 end 结束节点 */
 		const formNodes = ref([]);
 		/** form 模式节点请求中：节点区 NSpin loading（仅节点接口请求期间为 true，display 模式恒为 false） */
@@ -6509,100 +6685,11 @@ var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 		onMounted(() => {
 			flowConfigReady = initFlowConfig();
 		});
-		/** 人员处理记录映射：一行 records 对应一条展示记录（finished=0 未完成行过滤）——result 优先：result=2 同意；result=3 或 is_reject=1 驳回行按记录操作人判定方向（record.user_id=挂载人员 id 主动驳回「驳回到 rejecters.name」、否则被驳回「被 user_name 驳回」、名字均缺且 flowRejected=true 展示「驳回到 发起人」、否则「驳回」）；result=0 不展示 */
-		function toUserRecords(user, flowRejected) {
-			const toFiles = (files) => files?.length ? files.map((file) => ({
-				name: file.original_filename || file.file_name || "附件",
-				url: file.url
-			})) : void 0;
-			const rows = [];
-			(Array.isArray(user.records) ? user.records : []).forEach((record) => {
-				if (record.finished === 0) return;
-				const isSelf = record.user_id != null && String(record.user_id) === String(user.id);
-				const rejectTo = isSelf ? record.rejecters?.name : void 0;
-				const rejectBy = isSelf ? void 0 : record.user_name;
-				const base = {
-					time: record.assertion_time ? formatTime(record.assertion_time, "YYYY-MM-DD HH:mm") : void 0,
-					opinion: record.suggest || void 0,
-					attachments: toFiles(record.attachments)
-				};
-				if (record.result === 2) {
-					rows.push({
-						type: "approve",
-						...base
-					});
-					return;
-				}
-				if (record.is_reject !== 1 && record.result !== 3) return;
-				rows.push({
-					type: "reject",
-					...base,
-					rejectNode: rejectTo || (!rejectTo && !rejectBy && flowRejected ? "发起人" : void 0),
-					rejectBy
-				});
-			});
-			return rows;
-		}
-		/** 已处理记录（result=2/3 或 is_reject=1，与 toUserRecords 口径一致）中处理时间（assertion_time 毫秒时间戳）最新的一条是否为驳回（result=3 或 is_reject=1）；空集合返回 false，records 数组顺序不可靠必须按时间数值比较 */
-		function isLatestRowsReject(rows) {
-			if (!rows.length) return false;
-			const latest = rows.reduce((acc, cur) => (cur.assertion_time ?? 0) >= (acc.assertion_time ?? 0) ? cur : acc, rows[0]);
-			return latest.result === 3 || latest.is_reject === 1;
-		}
-		/** display 模式审批时间线：节点快照直接映射 FlowNodeItem——发起人节点独立判定：流程被驳回到发起人（finished=1 且 status=-1）标红、其余一律完成绿色；其余节点按实例 finished、节点自带 finished（1=已完成）推导：进行中节点优先取第一个「未完成且 status=1 待处理」的节点，无激活节点时兜底认第一个存在待处理任务行（users.records 中 result=0 且 finished=0）的节点为当前节点，仍无则回退第一个未完成节点，有激活/兜底节点时其后节点一律待开始（剥离上一轮残留），流程被驳回终止时其余节点一律灰色待开始；人员状态按本人最新一条操作记录展示（已处理记录 result=2/3 或 is_reject=1 中 assertion_time 最新一条：驳回标红、同意标绿），无操作记录随节点状态（进行中节点淡黄、其余灰色未处理） */
-		const displayNodes = computed(() => {
-			const d = props.timelineData;
-			if (!d?.nodes?.length) return [];
-			const instanceFinished = d.finished === 1;
-			const instanceRejected = instanceFinished && d.status === -1;
-			const activeIndex = d.nodes.findIndex((item) => item.status === 1 && item.finished !== 1);
-			const pendingIndex = !instanceFinished && activeIndex < 0 ? d.nodes.findIndex((item) => item.users.some((user) => (Array.isArray(user.records) ? user.records : []).some((record) => record.result === 0 && record.finished === 0))) : -1;
-			const currentIndex = activeIndex > -1 ? activeIndex : pendingIndex > -1 ? pendingIndex : instanceFinished ? -1 : d.nodes.findIndex((item) => item.finished !== 1);
-			return d.nodes.map((node, index) => {
-				const forcePending = !instanceFinished && (activeIndex > -1 || pendingIndex > -1) && index > currentIndex;
-				const nodeStatus = node.type === "start" ? instanceRejected ? "rejected" : "done" : instanceRejected ? "pending" : forcePending ? "pending" : !instanceFinished && index === currentIndex ? "doing" : instanceFinished || node.finished === 1 || currentIndex > -1 && index < currentIndex ? "done" : "pending";
-				const users = node.users.map((user) => {
-					const records = toUserRecords(user, instanceRejected);
-					const rawRows = Array.isArray(user.records) ? user.records : [];
-					const processedRows = rawRows.filter((record) => record.result === 2 || record.result === 3 || record.is_reject === 1);
-					const status = processedRows.length ? isLatestRowsReject(processedRows) ? "rejected" : "done" : nodeStatus === "doing" ? "doing" : nodeStatus === "done" && node.mode === "orsign" ? "pending" : nodeStatus;
-					return {
-						id: user.id,
-						name: user.name,
-						status,
-						pendingTask: rawRows.some((record) => record.result === 0 && record.finished === 0),
-						...records.length ? { records } : {}
-					};
-				});
-				return {
-					type: node.type,
-					id: node.node_id,
-					status: nodeStatus,
-					name: node.name,
-					desc: node.desc ?? void 0,
-					time: node.created_time && (node.finished === 1 || nodeStatus === "done" || nodeStatus === "rejected") ? formatTime(node.created_time, "YYYY-MM-DD HH:mm") : void 0,
-					mode: node.mode,
-					selfSelect: node.selfSelect,
-					users
-				};
-			});
-		});
+		/** display 模式审批时间线：节点快照直接映射 FlowNodeItem（映射规则详见 timeline-mapping.mapTimelineNodes） */
+		const displayNodes = computed(() => mapTimelineNodes(props.timelineData));
 		/** 按渲染模式取节点链：form=发起节点链、display=审批时间线（均为组件内部处理所得），有数据时统一追加 END 结束节点，无数据为空数组走空态 */
-		const flowNodes = computed(() => {
-			const baseNodes = props.mode === "form" ? formNodes.value : displayNodes.value;
-			if (!baseNodes.length) return [];
-			const allDone = props.mode !== "form" && baseNodes.every((node) => node.status === "done");
-			return [...baseNodes, {
-				...END_NODE,
-				status: allDone ? "done" : "pending"
-			}];
-		});
+		const flowNodes = computed(() => withEndNode(props.mode === "form" ? formNodes.value : displayNodes.value, props.mode));
 		return (_ctx, _cache) => {
-			const _component_NTag = NTag;
-			const _component_NEmpty = NEmpty;
-			const _component_NSpin = NSpin;
-			const _component_NCollapseItem = NCollapseItem;
-			const _component_NCollapse = NCollapse;
 			const _component_NButton = NButton;
 			return openBlock(), createBlock(base_card_default, {
 				loading: __props.loading,
@@ -6619,55 +6706,25 @@ var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 				onCancel: handleClose
 			}, createSlots({
 				default: withCtx(() => [
-					renderSlot(_ctx.$slots, "default", {}, void 0, true),
-					createVNode(base_card_item_default, { "content-padding": 0 }, {
-						default: withCtx(() => [createVNode(_component_NCollapse, {
-							class: "flow-node",
-							"arrow-placement": "right",
-							"default-expanded-names": ["flow"]
-						}, {
-							default: withCtx(() => [createVNode(_component_NCollapseItem, { name: "flow" }, {
-								header: withCtx(() => [createElementVNode("span", _hoisted_1$2, [_cache[1] || (_cache[1] = createTextVNode(" 审批流程 ", -1)), flowStatusTag.value ? (openBlock(), createBlock(_component_NTag, {
-									key: 0,
-									type: flowStatusTag.value.type,
-									size: "small"
-								}, {
-									default: withCtx(() => [createTextVNode(toDisplayString(flowStatusTag.value.text), 1)]),
-									_: 1
-								}, 8, ["type"])) : createCommentVNode("", true)])]),
-								default: withCtx(() => [createVNode(_component_NSpin, {
-									show: flowNodesLoading.value,
-									class: "w-full"
-								}, {
-									default: withCtx(() => [createElementVNode("div", _hoisted_2$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(flowNodes.value, (node) => {
-										return openBlock(), createBlock(FlowNode_default, {
-											key: node.id ?? node.name,
-											"selected-users": selfSelectedUsersMap.value[node.name],
-											"onUpdate:selectedUsers": ($event) => selfSelectedUsersMap.value[node.name] = $event,
-											node,
-											mode: __props.mode
-										}, null, 8, [
-											"selected-users",
-											"onUpdate:selectedUsers",
-											"node",
-											"mode"
-										]);
-									}), 128)), !flowNodes.value.length ? (openBlock(), createBlock(_component_NEmpty, {
-										key: 0,
-										description: __props.mode === "form" ? "必填字段填写完整后展示流程节点" : "暂无流程节点"
-									}, null, 8, ["description"])) : createCommentVNode("", true)])]),
-									_: 1
-								}, 8, ["show"])]),
-								_: 1
-							})]),
-							_: 1
-						})]),
-						_: 1
-					}),
+					renderSlot(_ctx.$slots, "default"),
+					createVNode(FlowNodesPanel_default, {
+						"selected-users-map": selfSelectedUsersMap.value,
+						"onUpdate:selectedUsersMap": _cache[0] || (_cache[0] = ($event) => selfSelectedUsersMap.value = $event),
+						nodes: flowNodes.value,
+						mode: __props.mode,
+						loading: flowNodesLoading.value,
+						"status-tag": flowStatusTag.value
+					}, null, 8, [
+						"selected-users-map",
+						"nodes",
+						"mode",
+						"loading",
+						"status-tag"
+					]),
 					canReject.value ? (openBlock(), createBlock(ApprovalModal_default, {
 						key: 0,
 						visible: approvalVisible.value,
-						"onUpdate:visible": _cache[0] || (_cache[0] = ($event) => approvalVisible.value = $event),
+						"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => approvalVisible.value = $event),
 						type: approvalType.value,
 						nodes: flowNodes.value,
 						onSubmitted: handleApprovalSubmit
@@ -6691,7 +6748,7 @@ var FlowLayout_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @_
 			} : void 0]), 1032, ["loading", "confirm-config"]);
 		};
 	}
-}), [["__scopeId", "data-v-1ed133b8"]]);
+});
 //#endregion
 //#region src/flow-list/modules/FlowListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = {
@@ -6910,4 +6967,4 @@ var flow_list_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__
 	}
 }), [["__scopeId", "data-v-3484a8df"]]);
 //#endregion
-export { ApprovalModal_default as ApprovalModal, FLOW_UI_KEY, FlowAvatar_default as FlowAvatar, FlowConfig_default as FlowConfig, FlowConfigField_default as FlowConfigField, FlowConfigMore_default as FlowConfigMore, FlowLayout_default as FlowLayout, flow_list_default as FlowList, FlowNode_default as FlowNode, person_selector_default as PersonSelector, createFlowUI, fetchGetWflowConfigDetail, fetchGetWflowFlowNodes, fetchLaunchWflowFlow, fetchWflowUndoApprove, fetchWflowUndoReject, getRemoteOptions, isRemoteField, useFlowUI };
+export { ApprovalModal_default as ApprovalModal, FLOW_UI_KEY, FlowAvatar_default as FlowAvatar, FlowConfig_default as FlowConfig, FlowConfigField_default as FlowConfigField, FlowConfigMore_default as FlowConfigMore, FlowLayout_default as FlowLayout, flow_list_default as FlowList, FlowNode_default as FlowNode, FlowNodesPanel_default as FlowNodesPanel, person_selector_default as PersonSelector, createFlowUI, fetchGetWflowConfigDetail, fetchGetWflowFlowNodes, fetchLaunchWflowFlow, fetchWflowUndoApprove, fetchWflowUndoReject, getRemoteOptions, isRemoteField, useFlowUI };

package/dist/style.css

@@ -2120,58 +2120,6 @@ to {
   width: 100%;
 }
 
-/* Developed collaboratively with vscode - 改动代码行数: 3行 */
-.yg-confirm[data-v-a65cb6d5] {
-  display: inline-block;
-}
-
-/* Developed collaboratively with vscode - 改动代码行数: 7行 */
-.base-card-wrapper[data-v-956107d8] {
-  height: 100%;
-  background: #f0f2f5;
-  display: flex;
-  flex-direction: column;
-}
-.dark .base-card-wrapper[data-v-956107d8] {
-  background: #141414;
-}
-
-/* Developed collaboratively with vscode - 改动代码行数: 6行 */
-.base-card-content[data-v-956107d8] {
-  flex: 1;
-  overflow: auto;
-  padding: 16px;
-}
-/* NSpin 容器需继承 flex:1 撑满剩余空间 */
-.base-card-content[data-v-956107d8] .n-spin-container {
-  height: 100%;
-}
-
-/* Developed collaboratively with vscode - 改动代码行数: 10行 */
-/* BaseCardItem 之间的间距 */
-.base-card-content[data-v-956107d8] .base-card-item-spacing {
-  margin-bottom: 16px !important;
-}
-.base-card-content[data-v-956107d8] .base-card-item-spacing:last-child {
-  margin-bottom: 0 !important;
-}
-
-/* Developed collaboratively with vscode - 改动代码行数: 20行 */
-.base-card-footer[data-v-956107d8] {
-  flex-shrink: 0;
-  height: 56px;
-  background: #ffffff;
-  box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.04);
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 0 24px;
-}
-.dark .base-card-footer[data-v-956107d8] {
-  background: #1e1e1e;
-  box-shadow: 0 -8px 12px 0 rgba(255, 255, 255, 0.04);
-}
-
 .base-card-item[data-v-e9115957] {
   background: var(--n-color) !important;
   padding: 0 !important;
@@ -2228,41 +2176,94 @@ to {
   gap: 12px;
 }
 
-.flow-node[data-v-1ed133b8] {
+/* Developed collaboratively with vscode - 改动代码行数: 31行（折叠面板样式自 FlowLayout.vue 迁入：单个折叠项间距/标题行布局/标题字号与底边框/内容区留白） */
+.flow-node[data-v-25e5146e] {
   /* 单个折叠项：去掉默认上外边距，上下间距统一由 header 内边距控制 */
 }
-.flow-node[data-v-1ed133b8] .n-collapse-item {
+.flow-node[data-v-25e5146e] .n-collapse-item {
   margin: 0;
 }
-.flow-node[data-v-1ed133b8] {
+.flow-node[data-v-25e5146e] {
   /* 标题行：文字左对齐、箭头右对齐；左右留白放在 header-main 上，保证 header 底边框顶满两侧 */
 }
-.flow-node[data-v-1ed133b8] .n-collapse-item__header-main {
+.flow-node[data-v-25e5146e] .n-collapse-item__header-main {
   justify-content: space-between;
   padding: 0 16px;
 }
-.flow-node[data-v-1ed133b8] {
-  /* Developed collaboratively with vscode - 改动代码行数: 5行（标题插槽包装：标题文案与状态标签横向排列、垂直居中；自身为 header-main 单一 flex 项，不参与 space-between 分离） */
+.flow-node[data-v-25e5146e] {
+  /* 标题插槽包装：标题文案与状态标签横向排列、垂直居中；自身为 header-main 单一 flex 项，不参与 space-between 分离 */
 }
-.flow-node .flow-node__title[data-v-1ed133b8] {
+.flow-node .flow-node__title[data-v-25e5146e] {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
-.flow-node[data-v-1ed133b8] {
+.flow-node[data-v-25e5146e] {
   /* 标题字号增大，上下等距内边距 + 底部分隔边框；用 first-child 提高优先级，覆盖 naive-ui 对首个折叠项 header 强制的 padding-top: 0 */
 }
-.flow-node[data-v-1ed133b8] .n-collapse-item:first-child > .n-collapse-item__header {
+.flow-node[data-v-25e5146e] .n-collapse-item:first-child > .n-collapse-item__header {
   padding: 16px 0;
   font-size: 16px;
   border-bottom: 1px solid var(--n-divider-color, rgba(0, 0, 0, 0.09));
 }
-.flow-node[data-v-1ed133b8] {
+.flow-node[data-v-25e5146e] {
   /* 内容区留白与标题行对齐 */
 }
-.flow-node[data-v-1ed133b8] .n-collapse-item__content-wrapper {
+.flow-node[data-v-25e5146e] .n-collapse-item__content-wrapper {
   padding: 0 16px 16px;
 }
+/* Developed collaboratively with vscode - 改动代码行数: 3行 */
+.yg-confirm[data-v-a65cb6d5] {
+  display: inline-block;
+}
+
+/* Developed collaboratively with vscode - 改动代码行数: 7行 */
+.base-card-wrapper[data-v-956107d8] {
+  height: 100%;
+  background: #f0f2f5;
+  display: flex;
+  flex-direction: column;
+}
+.dark .base-card-wrapper[data-v-956107d8] {
+  background: #141414;
+}
+
+/* Developed collaboratively with vscode - 改动代码行数: 6行 */
+.base-card-content[data-v-956107d8] {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}
+/* NSpin 容器需继承 flex:1 撑满剩余空间 */
+.base-card-content[data-v-956107d8] .n-spin-container {
+  height: 100%;
+}
+
+/* Developed collaboratively with vscode - 改动代码行数: 10行 */
+/* BaseCardItem 之间的间距 */
+.base-card-content[data-v-956107d8] .base-card-item-spacing {
+  margin-bottom: 16px !important;
+}
+.base-card-content[data-v-956107d8] .base-card-item-spacing:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Developed collaboratively with vscode - 改动代码行数: 20行 */
+.base-card-footer[data-v-956107d8] {
+  flex-shrink: 0;
+  height: 56px;
+  background: #ffffff;
+  box-shadow: 0 -8px 12px 0 rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 24px;
+}
+.dark .base-card-footer[data-v-956107d8] {
+  background: #1e1e1e;
+  box-shadow: 0 -8px 12px 0 rgba(255, 255, 255, 0.04);
+}
+
 .flow-item[data-v-aa89ccbf] {
   display: flex;
   align-items: center;

package/dist/timeline/FlowNodesPanel.d.ts

@@ -0,0 +1,32 @@
+import { FlowNodeItem } from './FlowNode';
+import { FlowStatusTag, FlowTimelineData } from './timeline-mapping';
+import { SelectedItem } from '../person-selector/types';
+type __VLS_Props = {
+    /** 原始详情数据（display 场景推荐）：内部映射为审批时间线并自动推导标题状态标签 */
+    data?: FlowTimelineData;
+    /** 已构建节点链：直接渲染（form 模式传请求所得节点链；display 场景传已映射时间线，未传 data 时生效，状态标签需配 statusTag） */
+    nodes?: FlowNodeItem[];
+    /** 渲染模式：display=审批时间线（缺省按 display 处理）/ form=发起节点（自选审批人为人员选择器、空态文案按模式区分） */
+    mode?: 'display' | 'form';
+    /** 节点区加载中：NSpin 遮罩（form 模式请求节点期间由外部传入，display 默认 false） */
+    loading?: boolean;
+    /** 折叠面板标题 */
+    title?: string;
+    /** 标题状态标签：data 模式自动推导无需传；nodes 模式需外部传入 */
+    statusTag?: FlowStatusTag;
+};
+type __VLS_ModelProps = {
+    /** 自选审批人节点已选人员（key=节点名） */
+    'selectedUsersMap'?: Record<string, SelectedItem[]>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selectedUsersMap": (value: Record<string, SelectedItem[]>) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:selectedUsersMap"?: ((value: Record<string, SelectedItem[]>) => any) | undefined;
+}>, {
+    title: string;
+    loading: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/timeline/timeline-mapping.d.ts

@@ -0,0 +1,24 @@
+import { FlowNodeItem, FlowNodeUserRecord } from './FlowNode';
+import { WflowTodoDetail, WflowTodoRecord } from '../adapter/wflow';
+/** display 模式原始详情数据：节点快照自带任务状态与每人处理结果 + status/finished 实例状态 */
+export type FlowTimelineData = Pick<WflowTodoDetail, 'nodes' | 'finished' | 'status'>;
+/** 流程状态标签（getFlowStatusTag 返回）：颜色映射 已同意=success / 已拒绝=error / 进行中=warning */
+export interface FlowStatusTag {
+    text: string;
+    type: 'success' | 'error' | 'warning';
+}
+/** 固定尾节点：节点有数据时渲染追加（display 下状态按流程是否走完覆盖），接口返回与提交数据均不包含 */
+export declare const END_NODE: FlowNodeItem;
+/** 人员处理记录映射：一行 records 对应一条展示记录（finished=0 未完成行过滤）——result 优先：result=2 同意；result=3 或 is_reject=1 驳回行按记录操作人判定方向（record.user_id=挂载人员 id 主动驳回「驳回到 rejecters.name」、否则被驳回「被 user_name 驳回」、名字均缺且 flowRejected=true 展示「驳回到 发起人」、否则「驳回」）；result=0 不展示 */
+export declare function toUserRecords(user: {
+    id?: number;
+    records?: WflowTodoRecord[];
+}, flowRejected?: boolean): FlowNodeUserRecord[];
+/** 已处理记录（result=2/3 或 is_reject=1，与 toUserRecords 口径一致）中处理时间（assertion_time 毫秒时间戳）最新的一条是否为驳回（result=3 或 is_reject=1）；空集合返回 false，records 数组顺序不可靠必须按时间数值比较 */
+export declare function isLatestRowsReject(rows: WflowTodoRecord[]): boolean;
+/** display 模式审批时间线映射：节点快照直接映射 FlowNodeItem——发起人节点独立判定：流程被驳回到发起人（finished=1 且 status=-1）标红、其余一律完成绿色；其余节点按实例 finished、节点自带 finished（1=已完成）推导：进行中节点优先取第一个「未完成且 status=1 待处理」的节点，无激活节点时兜底认第一个存在待处理任务行（users.records 中 result=0 且 finished=0）的节点为当前节点，仍无则回退第一个未完成节点，有激活/兜底节点时其后节点一律待开始（剥离上一轮残留），流程被驳回终止时其余节点一律灰色待开始；人员状态按本人最新一条操作记录展示（已处理记录 result=2/3 或 is_reject=1 中 assertion_time 最新一条：驳回标红、同意标绿），无操作记录随节点状态（进行中节点淡黄、其余灰色未处理） */
+export declare function mapTimelineNodes(data?: FlowTimelineData): FlowNodeItem[];
+/** 组装完整节点链：有数据统一追加 END 结束节点，无数据为空数组走空态；display（非 form）流程全部完成时 END 状态同步 done；末节点已是 end（后端快照自带 end、或调用方传入已组装过 END 的节点链，如 FlowLayout → FlowNodesPanel）时幂等跳过，防止结束节点重复渲染 */
+export declare function withEndNode(baseNodes: FlowNodeItem[], mode?: 'display' | 'form'): FlowNodeItem[];
+/** 折叠面板标题流程状态标签：仅 display 模式且有详情数据时推导——finished=1 且 status=-1 已拒绝（驳回到发起人终止）、finished=1 已同意、未结束进行中；form 发起模式无实例状态不展示，数据未返回前隐藏避免先展示「进行中」再跳变 */
+export declare function getFlowStatusTag(mode: 'display' | 'form' | undefined, data?: FlowTimelineData): FlowStatusTag | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yugu-ui/flow-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "堉古商城流程组件库：流程设计器（config）/ 审批时间线（timeline）/ 流程列表（FlowList）",
   "type": "module",
   "license": "UNLICENSED",
@@ -20,10 +20,6 @@
     },
     "./style.css": "./dist/style.css"
   },
-  "scripts": {
-    "build": "vite build --config vite.lib.config.ts",
-    "typecheck": "vue-tsc --noEmit --skipLibCheck"
-  },
   "peerDependencies": {
     "naive-ui": ">=2.40.0",
     "vue": ">=3.3.0"
@@ -54,5 +50,9 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "vite build --config vite.lib.config.ts",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
   }
-}
+}