合并分支 'zym-dev' 到 'master'

src/api/aiAnalysis/index.js

-import request from "@/api/request.js";
+import { getToken } from "@/api/request.js";
+
+const CHART_INTERPRETATION_URL = "/aiAnalysis/chart_interpretation";
+const API_KEY = "aircasKEY19491001";
+
+/**
+ * 从模型返回的 markdown code fence 中提取数组 JSON
+ * 例如：```json\n[ ... ]\n```
+ * @param {string} buffer
+ * @returns {unknown[]}
+ */
+function parseChartInterpretationArray(buffer) {
+	// 可能带有前后空白、换行、以及 ```/```json 包裹
+	let cleaned = String(buffer || "").trim();
+
+	// 移除开头 fence
+	cleaned = cleaned.replace(/^```(?:json)?\s*/i, "");
+	// 移除结尾 fence（允许末尾有换行）
+	cleaned = cleaned.replace(/```[\s\r\n]*$/i, "").trim();
+
+	// 优先直接解析
+	try {
+		const parsed = JSON.parse(cleaned);
+		if (Array.isArray(parsed)) return parsed;
+	} catch (_) { }
+
+	// 兜底：从 first '[' 到 last ']' 截取
+	const start = cleaned.indexOf("[");
+	const end = cleaned.lastIndexOf("]");
+	if (start !== -1 && end !== -1 && end > start) {
+		const arrStr = cleaned.slice(start, end + 1);
+		const parsed = JSON.parse(arrStr);
+		if (Array.isArray(parsed)) return parsed;
+	}
+
+	throw new Error("无法解析图表解读 JSON 数组");
+}
 
-// 图表解读（流式）
 /**
- * @param {text} 
+ * 图表解读（SSE 流式）
+ * @param {object} data - 请求体
+ * @param {object} [options] - 可选配置
+ * @param {function(string): void} [options.onChunk] - 每收到一条 SSE 消息时回调，参数为当前 chunk 的 text
+ * @returns {Promise<{data: unknown[]}>}
  */
-export function getChartAnalysis(data) {
-  return request({
-    method: 'POST',
-    url: `/aiAnalysis/chart_interpretation`,
-    data,
-  })
+export function getChartAnalysis(data, options = {}) {
+	const { onChunk } = options;
+	return new Promise((resolve, reject) => {
+		let buffer = "";
+		let settled = false;
+		const abortController = new AbortController();
+
+		const safeResolve = value => {
+			if (settled) return;
+			settled = true;
+			resolve(value);
+		};
+
+		const safeReject = err => {
+			if (settled) return;
+			settled = true;
+			reject(err);
+		};
+
+		(async () => {
+			try {
+				const { fetchEventSource } = await import("@microsoft/fetch-event-source");
+
+				await fetchEventSource(CHART_INTERPRETATION_URL, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						Accept: "text/event-stream",
+						"Cache-Control": "no-cache",
+						"X-API-Key": API_KEY,
+						// 后端同项目其它接口使用 token 字段名（axios 拦截器里就是这样注入的）
+						token: getToken()
+					},
+					body: JSON.stringify(data),
+					signal: abortController.signal,
+					openWhenHidden: true,
+					retryDelay: 1000,
+					maxRetries: 2,
+					onopen: response => {
+						const contentType = response.headers.get("content-type") || "";
+						if (!contentType.includes("text/event-stream")) {
+							throw new Error("SSE连接格式异常：content-type 不是 text/event-stream");
+						}
+					},
+					onmessage: event => {
+						const raw = (event?.data || "").trim();
+						if (!raw) return;
+						if (raw === "[DONE]") return;
+
+						let chunk = "";
+						// 后端返回格式示例：{"text":"```"} / {"text":"json\n[\n"}
+						try {
+							const msg = JSON.parse(raw);
+							if (msg && typeof msg === "object" && "text" in msg) {
+								chunk = String(msg.text ?? "");
+								buffer += chunk;
+							} else {
+								chunk = raw;
+								buffer += raw;
+							}
+						} catch (e) {
+							chunk = raw;
+							buffer += raw;
+						}
+
+						// 每收到一条消息即回调，用于流式渲染
+						if (chunk && typeof onChunk === "function") {
+							onChunk(chunk);
+						}
+
+						// 如果 buffer 已经拼完 markdown code fence，则提前解析并中断连接
+						const trimmed = buffer.trim();
+						if (trimmed.endsWith("```")) {
+							try {
+								const arr = parseChartInterpretationArray(trimmed);
+								safeResolve({ data: arr });
+								abortController.abort();
+							} catch (_) { }
+						}
+					},
+					onclose: () => {
+						try {
+							const arr = parseChartInterpretationArray(buffer);
+							safeResolve({ data: arr });
+						} catch (e) {
+							safeReject(e);
+						}
+					},
+					onerror: error => {
+						if (error?.name === "AbortError") return true;
+						safeReject(error);
+						return true;
+					}
+				});
+			} catch (error) {
+				safeReject(error);
+			}
+		})();
+	});
 }
\ No newline at end of file

src/api/bill.js

@@ -212,10 +212,25 @@ export function getBillTermsCompare(params) {
  * @param {billId,content,currentPage,currentVersion,isCn,originalVersion,pageSize,status}
  * @header token
  */
-export function getBillVersionCompare(params) {
+export function getBillVersionCompare(params, config = {}) {
     return request({
         method: "GET",
         url: "/api/billInfoBean/versionCompare",
         params,
+        signal: config.signal,
+    });
+}
+
+// 版本对比-根据筛选条件获取变更统计
+/**
+ * @param {billId,content,currentVersion,isCn,originalVersion}
+ * @header token
+ */
+export function getBillVersionCompareStatistics(params, config = {}) {
+    return request({
+        method: "GET",
+        url: "/api/billInfoBean/versionCompareStatistics",
+        params,
+        signal: config.signal,
     });
 }

src/api/bill/billHome.js

@@ -2,17 +2,24 @@ import request from "@/api/request.js";
 
 // 涉华法案领域分布
 /**
- * @param {year} 
+ * @param {Object} params
+ * @param {string} params.year - 年份
+ * @param {string} [params.status] - 状态：提出法案/通过法案
  */
 export function getBillIndustry(params) {
     return request({
         method: 'GET',
         url: `/api/BillOverview/billIndustry/${params.year}`,
-        params,
+        params: { status: params.status }
     })
 }
 
 // 涉华法案统计
+/**
+ * @param {Object} params
+ * @param {string} [params.dateDesc] - 时间范围：近一年/近两年/近三年/全部
+ * @param {string} [params.industryId] - 行业领域 ID
+ */
 export function getBillCount(params) {
     return request({
         method: 'GET',

src/api/intelligent/index.ts

@@ -10,12 +10,16 @@ export class TextEntity {
 	type: string;
 }
 // 智能化：提取文本实体
-export function extractTextEntity(text: string): Promise<IntelligentResultWrapper<TextEntity[]>> {
+export function extractTextEntity(
+	text: string,
+	config: { signal?: AbortSignal } = {}
+): Promise<IntelligentResultWrapper<TextEntity[]>> {
 	return request({
 		url: `${INTELLECTUAL_API}/extract-entity`,
 		method: "POST",
 		data: {
 			text
-		}
+		},
+		signal: config.signal
 	});
 }

src/views/bill/billHome/utils/multiLineChart.js

@@ -65,9 +65,22 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
       {
         type: 'value',
         position: 'left',
+        // 纵轴单位只在纵轴上方显示一次（通过 axis.name），避免每个刻度重复显示
+        name: '项',
+        nameLocation: 'end',
+        nameGap: 12,
+        nameTextStyle: {
+          color: '#666',
+          fontSize: 14,
+          fontWeight: 400,
+          // 给单位一点点下移空间，使其更贴近顶部刻度数字的视觉基线
+          padding: [0, 0, 6, -20]
+        },
         axisLabel: {
-            formatter: '{value}项',
-            color: '#666'
+            formatter: '{value}',
+            color: '#666',
+            fontSize: 14,
+            fontWeight: 400
         },
         splitLine: {
             show: true,
@@ -83,9 +96,21 @@ const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
         min: 0,
         max: 100,
         interval: 20,
+        // 通过率单位仅展示一次
+        name: '%',
+        nameLocation: 'end',
+        nameGap: 12,
+        nameTextStyle: {
+          color: '#666',
+          fontSize: 14,
+          fontWeight: 400,
+          padding: [0, 0, 6, 20]
+        },
         axisLabel: {
-            formatter: '{value}%',
-            color: '#666'
+            formatter: '{value}',
+            color: '#666',
+            fontSize: 14,
+            fontWeight: 400
         },
         splitLine: {
             show: true,

src/views/bill/billHome/utils/piechart.js

@@ -6,9 +6,18 @@ const truncateLabel = (value, maxLen = 6) => {
   return `${chars.slice(0, maxLen).join('')}...`
 }
 
-const getPieChart = (data, colorList) => {
+const getPieChart = (data, colorList, options = {}) => {
+  const showCount = options.showCount !== false
   let option = {
     // color: colorList,
+    tooltip: showCount
+      ? undefined
+      : {
+          formatter: params => {
+            const percent = typeof params.percent === 'number' ? params.percent : 0
+            return `${params.name}: ${percent}%`
+          }
+        },
     series: [
       {
         type: 'pie',
@@ -26,7 +35,8 @@ const getPieChart = (data, colorList) => {
             const name = truncateLabel(params?.name, 6)
             const value = params?.value ?? 0
             const percent = typeof params?.percent === 'number' ? params.percent : 0
-            return `{name|${name}}\n{time|${value} 条 ${percent}%}`
+            const labelText = showCount ? `${value} 条 ${percent}%` : `${percent}%`
+            return `{name|${name}}\n{time|${labelText}}`
           },
           minMargin: 5,
           edgeDistance: 10,

src/views/bill/template/index.vue

@@ -43,7 +43,17 @@
 			<div class="side">
 				<div class="side-box side-box-domain">
 					<AnalysisBox title="涉及领域" width="520px" height="415px" v-loading="domainLoading">
-						<div :class="['right-box2-main', { 'right-box-main--full': !domainFooterText }]" id="chart2"></div>
+						<div class="chart-ai-wrap">
+							<div :class="['right-box2-main', { 'right-box-main--full': !domainFooterText }]" id="chart2"></div>
+							<div class="overview-tip-row">
+								<TipTab class="overview-tip" />
+								<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('domain')" />
+							</div>
+							<div v-if="aiPaneVisible.domain" class="overview-ai-pane"
+								@mouseleave="handleHideAiPane('domain')">
+								<AiPane :aiContent="overviewAiContent.domain" />
+							</div>
+						</div>
 						<div v-if="domainFooterText" class="right-box2-footer">
 							<div class="right-box2-footer-left">
 								<img src="./assets/icons/right-icon1.png" alt="" />
@@ -59,7 +69,17 @@
 				</div>
 				<div class="side-box side-box-limit">
 					<AnalysisBox title="限制手段" width="520px" height="415px" v-loading="limitLoading">
-						<div :class="['right-box1-main', { 'right-box-main--full': !limitFooterText }]" id="chart1"></div>
+						<div class="chart-ai-wrap">
+							<div :class="['right-box1-main', { 'right-box-main--full': !limitFooterText }]" id="chart1"></div>
+							<div class="overview-tip-row">
+								<TipTab class="overview-tip" />
+								<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('limit')" />
+							</div>
+							<div v-if="aiPaneVisible.limit" class="overview-ai-pane"
+								@mouseleave="handleHideAiPane('limit')">
+								<AiPane :aiContent="overviewAiContent.limit" />
+							</div>
+						</div>
 						<div v-if="limitFooterText" class="right-box1-footer">
 							<div class="right-box1-footer-left">
 								<img src="./assets/icons/right-icon1.png" alt="" />
@@ -136,6 +156,10 @@ import * as echarts from "echarts";
 import { Search } from "@element-plus/icons-vue";
 import getPieChart from "./utils/piechart";
 import { getBillContentId, getBillContentTk, getBillContentXzfs, getBillHyly } from "@/api/bill";
+import { getChartAnalysis } from "@/api/aiAnalysis/index";
+import TipTab from "@/components/base/TipTab/index.vue";
+import AiButton from "@/components/base/Ai/AiButton/index.vue";
+import AiPane from "@/components/base/Ai/AiPane/index.vue";
 import { MUTICHARTCOLORS } from "@/common/constant";
 import { extractTextEntity } from "@/api/intelligent/index";
 
@@ -318,6 +342,26 @@ const chart2ColorList = ref([...MUTICHARTCOLORS]);
 
 const chart2Data = ref([]);
 
+const aiPaneVisible = ref({
+	domain: false,
+	limit: false
+});
+
+const overviewAiContent = ref({
+	domain: "智能总结生成中...",
+	limit: "智能总结生成中..."
+});
+
+const aiPaneFetched = ref({
+	domain: false,
+	limit: false
+});
+
+const aiPaneLoading = ref({
+	domain: false,
+	limit: false
+});
+
 const displayTermsList = computed(() => {
 	const keyword = (searchKeyword.value || "").trim().toLowerCase();
 	const domain = selectedDomain.value;
@@ -356,6 +400,83 @@ watch(
 	{ immediate: true }
 );
 
+const buildAiChartPayload = key => {
+	if (key === "domain") {
+		return {
+			type: "饼图",
+			name: "涉及领域",
+			data: (chart2Data.value || []).map(item => ({
+				industry_name: item.name,
+				count_bill: Number(item.value || 0)
+			}))
+		};
+	}
+	if (key === "limit") {
+		return {
+			type: "饼图",
+			name: "限制手段",
+			data: (chart1Data.value || []).map(item => ({
+				industry_name: item.name,
+				count_bill: Number(item.value || 0)
+			}))
+		};
+	}
+	return { type: "", name: "", data: [] };
+};
+
+const requestAiPaneContent = async key => {
+	if (!key || aiPaneLoading.value[key] || aiPaneFetched.value[key]) return;
+	aiPaneLoading.value = { ...aiPaneLoading.value, [key]: true };
+	overviewAiContent.value = { ...overviewAiContent.value, [key]: "智能总结生成中..." };
+
+	try {
+		const payload = buildAiChartPayload(key);
+		const res = await getChartAnalysis(
+			{ text: JSON.stringify(payload) },
+			{
+				onChunk: chunk => {
+					const current = overviewAiContent.value[key];
+					const base = current === "智能总结生成中..." ? "" : current;
+					overviewAiContent.value = {
+						...overviewAiContent.value,
+						[key]: base + chunk
+					};
+				}
+			}
+		);
+		const list = res?.data;
+		const first = Array.isArray(list) ? list[0] : null;
+		const interpretation = first?.解读 || first?.["解读"];
+		if (interpretation) {
+			overviewAiContent.value = {
+				...overviewAiContent.value,
+				[key]: interpretation
+			};
+		}
+		aiPaneFetched.value = { ...aiPaneFetched.value, [key]: true };
+	} catch (error) {
+		console.error("获取图表解读失败", error);
+		overviewAiContent.value = { ...overviewAiContent.value, [key]: "智能总结生成失败" };
+	} finally {
+		aiPaneLoading.value = { ...aiPaneLoading.value, [key]: false };
+	}
+};
+
+const handleShowAiPane = key => {
+	aiPaneVisible.value = {
+		...aiPaneVisible.value,
+		[key]: true
+	};
+	requestAiPaneContent(key);
+};
+
+const handleHideAiPane = key => {
+	aiPaneVisible.value = {
+		...aiPaneVisible.value,
+		[key]: false
+	};
+};
+
 const handleSearchSubmit = () => {
 	searchKeyword.value = searchValue.value;
 	currentPage.value = 1;
@@ -554,6 +675,7 @@ const handleGetBillContentXzfs = async () => {
 				value: item.countTk
 			};
 		});
+		aiPaneFetched.value = { ...aiPaneFetched.value, limit: false };
 		let chart1 = getPieChart(chart1Data.value, chart1ColorList.value);
 		setChart(chart1, "chart1");
 	} catch (error) {
@@ -602,6 +724,7 @@ const handleGetBillHyly = async () => {
 				value: item.countTk
 			};
 		});
+		aiPaneFetched.value = { ...aiPaneFetched.value, domain: false };
 
 		let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
 		setChart(chart2, "chart2");
@@ -1017,6 +1140,38 @@ onMounted(async () => {
 			width: 520px;
 		}
 
+		.chart-ai-wrap {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+		}
+
+		.overview-tip-row {
+			margin-top: 10px;
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.overview-tip-action {
+			position: absolute;
+			right: 0px;
+		}
+
+		.overview-ai-pane {
+			position: absolute;
+			left: 0;
+			bottom: -22px;
+			width: 100%;
+			z-index: 3;
+			pointer-events: none;
+
+			:deep(.ai-pane-wrapper) {
+				pointer-events: auto;
+			}
+		}
+
 		.side-box-limit {
 			margin-top: 15px;
 			width: 520px;
@@ -1024,12 +1179,12 @@ onMounted(async () => {
 
 			.right-box1-main {
 				width: 520px;
-				height: 315px;
+				height: 275px;
 				padding: 16px;
 			}
 
 			.right-box-main--full {
-				height: 375px;
+				height: 315px;
 			}
 
 			.right-box1-footer {
@@ -1091,12 +1246,12 @@ onMounted(async () => {
 
 			.right-box2-main {
 				width: 520px;
-				height: 315px;
+				height: 275px;
 				padding: 16px;
 			}
 
 			.right-box-main--full {
-				height: 375px;
+				height: 315px;
 			}
 
 			.right-box2-footer {

src/views/bill/versionCompare/index.vue

@@ -151,7 +151,7 @@
 <script setup>
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
-import { getBillContentId, getBillVersionCompare } from "@/api/bill";
+import { getBillContentId, getBillVersionCompare, getBillVersionCompareStatistics } from "@/api/bill";
 import { extractTextEntity } from "@/api/intelligent/index";
 import { ArrowDown, ArrowUp, Close, Search } from "@element-plus/icons-vue";
 import translateIcon from "./assert/icons/translate-icons.svg";
@@ -197,6 +197,22 @@ const isLoading = ref(false);
 const comparePairs = ref([]);
 
 const compareRequestToken = ref(0);
+const queryAbortController = ref(null);
+
+const resetAbortController = () => {
+	queryAbortController.value?.abort?.();
+	queryAbortController.value = new AbortController();
+	return queryAbortController.value;
+};
+
+const isAbortError = error => {
+	return (
+		error?.code === "ERR_CANCELED" ||
+		error?.name === "CanceledError" ||
+		error?.name === "AbortError" ||
+		(typeof error?.message === "string" && /canceled|aborted/i.test(error.message))
+	);
+};
 
 const handleLoadVersionOptions = async () => {
 	if (!billId.value) {
@@ -273,21 +289,6 @@ const handleDiffTabClick = value => {
 	});
 };
 
-const updateDiffCounts = list => {
-	const counts = { CHANGE: 0, ADD: 0, DELETE: 0 };
-	for (const pair of list) {
-		const isOld = Boolean(pair?.oldTerm);
-		const isNew = Boolean(pair?.newTerm);
-		if (isOld && isNew) {
-			counts.CHANGE += 1;
-		} else if (isNew && !isOld) {
-			counts.ADD += 1;
-		} else if (isOld && !isNew) {
-			counts.DELETE += 1;
-		}
-	}
-	diffCounts.value = counts;
-};
 
 const mapDiffTypeToStatus = value => {
 	const diff = normalizeDiffType(value);
@@ -296,12 +297,6 @@ const mapDiffTypeToStatus = value => {
 	return "update";
 };
 
-const mapStatusToDiffType = value => {
-	if (value === "add") return "ADD";
-	if (value === "del") return "DELETE";
-	return "CHANGE";
-};
-
 const mapVersionCompareItemToPair = item => {
 	const oldTerm = item?.originalClauseMainId
 		? {
@@ -324,63 +319,78 @@ const mapVersionCompareItemToPair = item => {
 	return { oldTerm, newTerm };
 };
 
-const fetchComparePage = async ({ diff, page, size }) => {
+const getVersionCompareBaseParams = () => ({
+	billId: billId.value,
+	content: keyword.value,
+	currentVersion: newVersionId.value,
+	isCn: onlyChinaRelated.value ? "Y" : "N",
+	originalVersion: oldVersionId.value
+});
+
+const fetchComparePage = async ({ diff, page, size, signal }) => {
 	const params = {
-		billId: billId.value,
-		content: keyword.value,
+		...getVersionCompareBaseParams(),
 		currentPage: Math.max(1, Number(page) || 1),
-		currentVersion: newVersionId.value,
-		isCn: onlyChinaRelated.value ? "Y" : "N",
-		originalVersion: oldVersionId.value,
 		pageSize: Math.max(1, Number(size) || 10),
 		status: mapDiffTypeToStatus(diff)
 	};
-	const res = await getBillVersionCompare(params);
+	const res = await getBillVersionCompare(params, { signal });
 	const data = res?.data?.data ?? res?.data ?? {};
 	const raw = Array.isArray(data?.content) ? data.content : [];
-	const countType = Array.isArray(data?.countType) ? data.countType : [];
 	return {
 		list: raw.map(mapVersionCompareItemToPair),
-		total: Number(data?.totalElements ?? 0) || 0,
-		countType
+		total: Number(data?.totalElements ?? 0) || 0
 	};
 };
 
-const getCountByChangeType = (countTypeList, changeTypeLabel) => {
-	const list = Array.isArray(countTypeList) ? countTypeList : [];
+const getCountByChangeType = (statisticsList, changeTypeLabel) => {
+	const list = Array.isArray(statisticsList) ? statisticsList : [];
 	const target = list.find(item => String(item?.changeType ?? "") === changeTypeLabel);
 	return Number(target?.count ?? 0) || 0;
 };
 
+const loadCompareStatistics = async (currentToken, signal) => {
+	debugger
+	const res = await getBillVersionCompareStatistics(getVersionCompareBaseParams(), { signal });
+	if (currentToken !== compareRequestToken.value) return;
+	const list = res.data
+	diffCounts.value = {
+		CHANGE: getCountByChangeType(list, "更新"),
+		ADD: getCountByChangeType(list, "新增"),
+		DELETE: getCountByChangeType(list, "删除")
+	};
+};
+
 const loadComparePairs = async () => {
 	if (!billId.value || !oldVersionId.value || !newVersionId.value) {
+		queryAbortController.value?.abort?.();
 		comparePairs.value = [];
-		updateDiffCounts([]);
+		diffCounts.value = { CHANGE: 0, ADD: 0, DELETE: 0 };
 		total.value = 0;
 		return;
 	}
 
+	const controller = resetAbortController();
 	const currentToken = ++compareRequestToken.value;
 	isLoading.value = true;
 	try {
-		const currentRes = await fetchComparePage({
-			diff: diffType.value,
-			page: currentPage.value,
-			size: pageSize.value
-		});
-		if (currentToken !== compareRequestToken.value) return;
+		const [currentRes] = await Promise.all([
+			fetchComparePage({
+				diff: diffType.value,
+				page: currentPage.value,
+				size: pageSize.value,
+				signal: controller.signal
+			}),
+			loadCompareStatistics(currentToken, controller.signal)
+		]);
+		if (currentToken !== compareRequestToken.value || controller.signal.aborted) return;
 		comparePairs.value = currentRes.list;
 		total.value = currentRes.total;
-		diffCounts.value = {
-			CHANGE: getCountByChangeType(currentRes.countType, "更新"),
-			ADD: getCountByChangeType(currentRes.countType, "新增"),
-			DELETE: getCountByChangeType(currentRes.countType, "删除")
-		};
-		await ensureEntitiesForPairs(comparePairs.value);
+		await ensureEntitiesForPairs(comparePairs.value, controller.signal);
 	} catch (error) {
-		if (currentToken !== compareRequestToken.value) return;
+		if (currentToken !== compareRequestToken.value || isAbortError(error)) return;
 		comparePairs.value = [];
-		updateDiffCounts([]);
+		diffCounts.value = { CHANGE: 0, ADD: 0, DELETE: 0 };
 		total.value = 0;
 	} finally {
 		if (currentToken === compareRequestToken.value) {
@@ -532,8 +542,9 @@ const getTermEntityKey = (term, lang) => {
 	return `${baseKey}__${lang}`;
 };
 
-const ensureEntitiesForPairs = async pairs => {
+const ensureEntitiesForPairs = async (pairs, signal = queryAbortController.value?.signal) => {
 	if (!termsHighlight.value) return;
+	if (signal?.aborted) return;
 
 	const list = Array.isArray(pairs) ? pairs : [];
 	if (!list.length) return;
@@ -563,18 +574,19 @@ const ensureEntitiesForPairs = async pairs => {
 	try {
 		const results = await Promise.all(
 			tasks.map(async item => {
-				const res = await extractTextEntity(item.text);
+				if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+				const res = await extractTextEntity(item.text, { signal });
 				const entities = normalizeEntities(res?.result ?? res?.data?.result ?? res?.data ?? res);
 				return { key: item.key, entities };
 			})
 		);
 
-		if (currentToken !== entityRequestToken.value) return;
+		if (currentToken !== entityRequestToken.value || signal?.aborted) return;
 		for (const r of results) {
 			termEntityCache.value.set(r.key, r.entities);
 		}
 	} catch (error) {
-		if (currentToken !== entityRequestToken.value) return;
+		if (currentToken !== entityRequestToken.value || isAbortError(error)) return;
 	}
 };
 
@@ -721,6 +733,8 @@ onMounted(async () => {
 	flex-direction: column;
 	row-gap: 16px;
 	width: 100%;
+	height: 848px;
+	overflow: hidden;
 	background: #ffffff;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 	padding: 16px 75px;
@@ -974,6 +988,10 @@ onMounted(async () => {
 
 .compare-columns {
 	margin-top: 16px;
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+	overflow-x: hidden;
 	display: flex;
 	flex-direction: column;
 }