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

src/api/bill.js

@@ -192,3 +192,30 @@ export function getBillFullText(params) {
         params,
     })
 }
+
+// 条款对比-根据两版版本与筛选条件获取配对条款列表
+/**
+ * @param {billId,oldVersionId,newVersionId,diffType,cRelated,keyword}
+ * @header token
+ * @returns { list: Array<{ oldTerm: object|null, newTerm: object|null }> }
+ */
+export function getBillTermsCompare(params) {
+    return request({
+        method: "GET",
+        url: "/api/billInfoBean/content/compare",
+        params,
+    });
+}
+
+// 版本对比-根据两版版本与筛选条件获取条款列表（分页）
+/**
+ * @param {billId,content,currentPage,currentVersion,isCn,originalVersion,pageSize,status}
+ * @header token
+ */
+export function getBillVersionCompare(params) {
+    return request({
+        method: "GET",
+        url: "/api/billInfoBean/versionCompare",
+        params,
+    });
+}

src/components/base/DecreeOriginal/index.vue

@@ -239,6 +239,8 @@ watch(isTranslate, () => {
 			background-color: white;
 			padding: 0 60px;
 			flex: auto;
+				height: 100%;
+				min-height: 0;
 			display: flex;
 			flex-direction: column;
 			.report-header {
@@ -324,9 +326,14 @@ watch(isTranslate, () => {
 
 			.report-main {
 				flex: auto;
+				min-height: 0;
 				box-sizing: border-box;
 				padding-top: 10px;
 
+				:deep(.el-scrollbar) {
+					height: 100%;
+				}
+
 				.no-content {
 					height: 100%;
 					display: flex;

src/components/base/boxBackground/analysisBox.vue

@@ -133,11 +133,12 @@ const emit = defineEmits(['save', 'download', 'collect'])
       }
     }
 
-    // .header-btn {
+    .header-btn {
       // display: flex;
       // justify-content: flex-end;
       // gap: 8px;
-    // }
+      margin-right: 10px;
+    }
 
     // .header-btn1 {
     //   position: absolute;

src/router/modules/bill.js

@@ -13,7 +13,7 @@ const BillInfluenceLayout = () => import('@/views/bill/influence/index.vue')
 const BillInfluenceIndustry = () => import('@/views/bill/influence/industry/index.vue')
 const BillInfluenceScientificResearch = () => import('@/views/bill/influence/scientificResearch/index.vue')
 const BillRelevantCircumstance = () => import('@/views/bill/relevantCircumstance/index.vue')
-const BillOriginalText = () => import('@/views/bill/billOriginalText/index.vue')
+const BillVersionCompare = () => import('@/views/bill/versionCompare/index.vue')
 
 
 const billRoutes = [
@@ -36,14 +36,6 @@ const billRoutes = [
       dynamicTitle: true // 标记需要动态设置标题
     },
     children: [
-      {
-        path: "originalText",
-        name: "BillOriginalText",
-        component: BillOriginalText,
-        meta: {
-          title: "法案原文"
-        }
-      },
       // 法案分析路由
       {
         path: "bill",
@@ -138,6 +130,14 @@ const billRoutes = [
         // meta: {
         //   title: "相关情况"
         // }
+      },
+      {
+        path: "versionCompare",
+        name: "BillVersionCompare",
+        component: BillVersionCompare,
+        meta: {
+          title: "版本对比"
+        }
       }
     ]
   },

src/views/bill/billHome/ResourceLibrarySection.vue

@@ -204,16 +204,20 @@
 									<div class="coop-members">
 										<div class="coop-member">
 											<img class="coop-avatar" :src="item.avatar || defaultAvatar" alt="committee-avatar" />
+											<div class="coop-member-info">
 												<div class="coop-member-name" :title="item.name">{{ item.name }}</div>
+												<div v-if="item.nameEn" class="coop-member-name-en" :title="item.nameEn">
+													{{ item.nameEn }}
+												</div>
 											</div>
 										</div>
-									<div class="coop-summary" :title="item.desc">
-										{{ item.desc }}
 									</div>
+									<!-- <div class="coop-summary" :title="item.desc">
+										{{ item.desc }}
+									</div> -->
 									<div class="coop-count">
 										{{ `${item.proposalSize ?? (item.bills || []).length}项重点法案` }}
 									</div>
-									<slot name="committee-extra" :committee="item" />
 								</div>
 								<div class="coop-proposals">
 									<div
@@ -447,6 +451,7 @@ const handleGetCommitteeList = async () => {
 				const descText = billInfoPage[0]?.originDepart || "";
 				return {
 					id: item.id,
+					nameEn:item.nameEn || "",
 					avatar: "",
 					name: item.name || "-",
 					desc: descText,
@@ -1232,6 +1237,12 @@ onMounted(() => {
 					min-width: 0;
 				}
 
+				.coop-member-info {
+					display: flex;
+					flex-direction: column;
+					min-width: 0;
+				}
+
 				.coop-avatar {
 					width: 40px;
 					height: 40px;
@@ -1273,6 +1284,17 @@ onMounted(() => {
 					text-overflow: ellipsis;
 				}
 
+				.coop-member-name-en {
+					color: var(--text-primary-65-color);
+					font-family: "Microsoft YaHei";
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 22px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
 				.coop-count {
 					flex-shrink: 0;
 					color: #1459bb;
@@ -1284,7 +1306,6 @@ onMounted(() => {
 				}
 
 				.coop-proposals {
-					margin-top: 10px;
 					padding-top: 10px;
 					border-top: 1px solid #eaeced;
 					display: grid;

src/views/bill/billHome/index.vue

@@ -127,7 +127,13 @@
 									<el-empty v-if="!box5HasData" description="暂无数据" :image-size="100" />
 									<div v-else id="box5Chart" class="overview-chart"></div>
 								</div>
+								<div class="overview-tip-row">
 									<TipTab class="overview-tip" />
+									<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box5')" />
+								</div>
+								<div v-if="aiPaneVisible.box5" class="overview-ai-pane" @mouseleave="handleHideAiPane('box5')">
+									<AiPane :aiContent="overviewAiContent.box5" />
+								</div>
 							</div>
 						</OverviewCard>
 						<OverviewCard class="overview-card--single box6" title="涉华法案领域分布" :icon="box6HeaderIcon">
@@ -141,7 +147,13 @@
 									<el-empty v-if="!box9HasData" description="暂无数据" :image-size="100" />
 									<div v-else id="box9Chart" class="overview-chart"></div>
 								</div>
+								<div class="overview-tip-row">
 									<TipTab class="overview-tip" />
+									<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box6')" />
+								</div>
+								<div v-if="aiPaneVisible.box6" class="overview-ai-pane" @mouseleave="handleHideAiPane('box6')">
+									<AiPane :aiContent="overviewAiContent.box6" />
+								</div>
 							</div>
 						</OverviewCard>
 					</div>
@@ -157,7 +169,13 @@
 									<el-empty v-if="!box7HasData" description="暂无数据" :image-size="100" />
 									<div v-else id="box7Chart" class="overview-chart"></div>
 								</div>
+								<div class="overview-tip-row">
 									<TipTab class="overview-tip" />
+									<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box7')" />
+								</div>
+								<div v-if="aiPaneVisible.box7" class="overview-ai-pane" @mouseleave="handleHideAiPane('box7')">
+									<AiPane :aiContent="overviewAiContent.box7" />
+								</div>
 							</div>
 						</OverviewCard>
 						<OverviewCard class="overview-card--single box8" title="涉华法案进展分布" :icon="box7HeaderIcon">
@@ -174,7 +192,13 @@
 										<div id="box8Chart" class="overview-chart box8-chart"></div>
 									</template>
 								</div>
+								<div class="overview-tip-row">
 									<TipTab class="overview-tip" />
+									<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box8')" />
+								</div>
+								<div v-if="aiPaneVisible.box8" class="overview-ai-pane" @mouseleave="handleHideAiPane('box8')">
+									<AiPane :aiContent="overviewAiContent.box8" />
+								</div>
 							</div>
 						</OverviewCard>
 						<OverviewCard class="overview-card--single box9" title="涉华法案关键条款" :icon="box7HeaderIcon">
@@ -183,7 +207,13 @@
 									<el-empty v-if="!wordCloudHasData" description="暂无数据" :image-size="100" />
 									<WordCloundChart v-else class="overview-chart" width="100%" height="100%" :data="wordCloudData" />
 								</div>
+								<div class="overview-tip-row">
 									<TipTab class="overview-tip" />
+									<AiButton class="overview-tip-action" @mouseenter="handleShowAiPane('box9')" />
+								</div>
+								<div v-if="aiPaneVisible.box9" class="overview-ai-pane" @mouseleave="handleHideAiPane('box9')"	>
+									<AiPane :aiContent="overviewAiContent.box9" />
+								</div>
 							</div>
 						</OverviewCard>
 					</div>
@@ -221,6 +251,8 @@ import OverviewCard from "./OverviewCard.vue";
 import ResourceLibrarySection from "./ResourceLibrarySection.vue";
 import { useContainerScroll } from "@/hooks/useScrollShow";
 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 WordCloundChart from "@/components/base/WordCloundChart/index.vue";
 
 import getMultiLineChart from "./utils/multiLineChart";
@@ -370,6 +402,36 @@ const box7YearList = ref([
 	}
 ]);
 
+const aiPaneVisible = ref({
+	box5: false,
+	box6: false,
+	box7: false,
+	box8: false,
+	box9: false
+});
+
+const overviewAiContent = ref({
+	box5: "智能总结生成中...",
+	box6: "智能总结生成中...",
+	box7: "智能总结生成中...",
+	box8: "智能总结生成中...",
+	box9: "智能总结生成中..."
+});
+
+const handleShowAiPane = key => {
+	aiPaneVisible.value = {
+		...aiPaneVisible.value,
+		[key]: true
+	};
+};
+
+const handleHideAiPane = key => {
+	aiPaneVisible.value = {
+		...aiPaneVisible.value,
+		[key]: false
+	};
+};
+
 const box8selectetedTime = ref("2025");
 const box8YearList = ref([
 	{
@@ -2109,6 +2171,20 @@ onUnmounted(() => {
 				.overview-card-body {
 					display: flex;
 					flex-direction: column;
+					position: relative;
+				}
+
+				.overview-ai-pane {
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					width: 100%;
+					z-index: 3;
+					pointer-events: none;
+
+					.ai-pane-wrapper {
+						pointer-events: auto;
+					}
 				}
 
 				.overview-chart-wrap {
@@ -2131,8 +2207,17 @@ onUnmounted(() => {
 					min-height: 0;
 				}
 
-				.overview-tip {
+				.overview-tip-row {
 					margin-top: 10px;
+					position: relative;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+
+				.overview-tip-action {
+					position: absolute;
+					right: -30px;
 				}
 			}
 		}

src/views/bill/billLayout/components/BillHeader.vue

@@ -78,14 +78,6 @@
 
 				<div class="right-box-bottom" v-if="showActions">
 					<template v-if="isLoading">
-						<div class="btn1 is-skeleton">
-							<div class="icon">
-								<el-skeleton-item class="skeleton-action-icon" variant="text" />
-							</div>
-							<div class="text">
-								<el-skeleton-item class="skeleton-action-text" variant="text" />
-							</div>
-						</div>
 						<div class="btn3 is-skeleton">
 							<div class="icon">
 								<el-skeleton-item class="skeleton-action-icon" variant="text" />
@@ -96,13 +88,6 @@
 						</div>
 					</template>
 					<template v-else>
-						<div class="btn1" @click="emit('open-original-text')">
-							<div class="icon">
-								<img :src="btnIconOriginalText" alt="" />
-							</div>
-							<div class="text">{{ "法案原文" }}</div>
-						</div>
-
 						<div class="btn3" @click="emit('open-analysis')">
 							<div class="icon">
 								<img :src="btnIconAnalysis" alt="" />
@@ -118,7 +103,6 @@
 
 <script setup>
 import { computed } from "vue";
-import btnIconOriginalText from "@/views/thinkTank/ReportDetail/images/btn-icon1.png";
 import btnIconAnalysis from "@/views/thinkTank/ReportDetail/images/btn-icon3.png";
 
 const props = defineProps({
@@ -150,7 +134,7 @@ const props = defineProps({
 
 const isLoading = computed(() => !props.billInfo || !props.billInfo.billName);
 
-const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]);
+const emit = defineEmits(["tab-click", "open-analysis"]);
 </script>
 
 <style lang="scss" scoped>
@@ -363,41 +347,6 @@ const emit = defineEmits(["tab-click", "open-original-text", "open-analysis"]);
 			justify-content: flex-end;
 			gap: 8px;
 
-			.btn1 {
-				cursor: pointer;
-				width: 120px;
-				height: 36px;
-				box-sizing: border-box;
-				border: 1px solid rgba(230, 231, 232, 1);
-				border-radius: 6px;
-				background: rgba(255, 255, 255, 1);
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: 8px;
-
-				.icon {
-					width: 16px;
-					height: 16px;
-
-					img {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				.text {
-					height: 24px;
-					color: rgba(95, 101, 108, 1);
-					font-family: Microsoft YaHei;
-					font-size: 16px;
-					font-weight: 400;
-					line-height: 24px;
-					letter-spacing: 0px;
-					text-align: left;
-				}
-			}
-
 			.btn3 {
 				cursor: pointer;
 				width: 120px;

src/views/bill/billLayout/index.vue

@@ -7,10 +7,9 @@
 				:defaultLogo="USALogo"
 				:tabs="mainHeaderBtnList"
 				:activeTitle="activeTitle"
-				:showTabs="!isBillOriginalTextPage"
-				:showActions="!isBillOriginalTextPage"
+				:showTabs="showHeaderTabs"
+				:showActions="showHeaderActions"
 				@tab-click="handleClickMainHeaderBtn"
-				@open-original-text="handleOpenBillOriginalText"
 				@open-analysis="handleAnalysisClick"
 			/>
 
@@ -22,14 +21,13 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import router from "@/router";
 import { useRoute } from "vue-router";
 import { getBillInfoGlobal } from "@/api/bill";
 import BillHeader from "./components/BillHeader.vue";
 
 const route = useRoute();
-const isBillOriginalTextPage = computed(() => route.path === "/billLayout/originalText");
 
 import icon1 from "./assets/icons/icon1.svg";
 import icon1Active from "./assets/icons/icon1_active.svg";
@@ -55,16 +53,6 @@ const getBillInfoGlobalFn = async () => {
 	}
 };
 
-const handleOpenBillOriginalText = () => {
-	const targetRoute = router.resolve({
-		path: "/billLayout/originalText",
-		query: {
-			billId: route.query.billId
-		}
-	});
-	window.open(targetRoute.href, "_blank");
-};
-
 const mainHeaderBtnList = ref([
 	{
 		icon: icon1,
@@ -93,6 +81,8 @@ const mainHeaderBtnList = ref([
 ]);
 
 const activeTitle = ref("法案概况");
+const showHeaderTabs = ref(true);
+const showHeaderActions = ref(true);
 
 const getActiveTitleByRoutePath = path => {
 	if (path.startsWith("/billLayout/deepDig")) return "深度挖掘";
@@ -102,8 +92,12 @@ const getActiveTitleByRoutePath = path => {
 	return "法案概况";
 };
 
-const syncActiveTitleFromRoute = () => {
+const syncHeaderStateFromRoute = () => {
+	const currentPath = route.path || "";
 	activeTitle.value = getActiveTitleByRoutePath(route.path);
+	const isVersionCompare = currentPath.startsWith("/billLayout/versionCompare");
+	showHeaderTabs.value = !isVersionCompare;
+	showHeaderActions.value = !isVersionCompare;
 };
 
 const handleClickMainHeaderBtn = item => {
@@ -134,7 +128,7 @@ const handleAnalysisClick = () => {
 onMounted(() => {
 	getBillInfoGlobalFn();
 	// 以当前路由为准，避免 sessionStorage 造成高亮错乱
-	syncActiveTitleFromRoute();
+	syncHeaderStateFromRoute();
 	// 兜底：如果未来出现未知路由且有缓存，再用缓存
 	const cachedTitle = window.sessionStorage.getItem("activeTitle");
 	if (!activeTitle.value && cachedTitle) activeTitle.value = cachedTitle;
@@ -143,7 +137,7 @@ onMounted(() => {
 watch(
 	() => route.path,
 	() => {
-		syncActiveTitleFromRoute();
+		syncHeaderStateFromRoute();
 	},
 	{ immediate: true }
 );

src/views/bill/deepDig/poliContribution/index.vue

@@ -697,6 +697,7 @@ onMounted(() => {
 			right: 84px;
 			top: 15px;
 			
+
 			.btn {
 				height: 28px;
 				padding: 0 8px;

src/views/bill/deepDig/processOverview/index.vue

 <template>
   <div class="process-overview-wrap">
-    <!-- <div class="box-header">
-      <div class="header-left"></div>
-      <div class="title">流程概要</div>
-				<div class="header-right">
-					<div class="icon">
-						<img src="@/assets/icons/box-header-icon2.png" alt="" />
-					</div>
-					<div class="icon">
-						<img src="@/assets/icons/box-header-icon3.png" alt="" />
-					</div>
-				</div>
-    </div>
-    <div class="main">
-      <div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
-        <div class="top">
-          <div class="top-line" :style="{ width: lineWidth }">
-            <div class="top-line1"></div>
-          </div>
-          <div class="start">
-            <div class="icon">
-              <img src="./assets/images/logo1.png" alt="" />
-            </div>
-            <div class="name">{{ "参议院" }}</div>
-          </div>
-          <div class="content-box" :style="senateBoxStyle">
-            <div class="item-box" v-for="(item, index) in senateList" :key="item.id" style="width: 280px; flex-shrink: 0;">
-              <div class="item-box-dot">
-                <img src="./assets/images/top-line-dot.png" alt="" />
-              </div>
-              <div class="item-content">
-                <div class="item-header">
-                  <div class="item-title" :title="item.actionTitle">
-                    {{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
-                  </div>
-                  <div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
-                  <img src="./assets/images/item-header-icon.png" alt="" />
-                </div>
-                </div>
-                <div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
-                  {{ (item.agreeVote || 0) + "赞成：" + (item.disagreeVote || 0) + "反对" }}
-                </div>
-                <div class="item-main" v-if="item.fynrList && item.fynrList.length">
-                  <div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
-                    <div class="icon"></div>
-                    <CommonPrompt :content="sub">
-                      <div class="text">{{ sub }}</div>
-                    </CommonPrompt>
-                  </div>
-                </div>
-              </div>
-              <div class="item-time">
-                {{ item.actionDate }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="bottom">
-          <div class="bottom-line" :style="{ width: lineWidth }">
-            <div class="bottom-line1"></div>
-          </div>
-          <div class="start">
-            <div class="name">{{ "众议院" }}</div>
-
-            <div class="icon">
-              <img src="./assets/images/logo2.png" alt="" />
-            </div>
-          </div>
-          <div class="content-box" :style="houseBoxStyle">
-            <div class="item-box" v-for="(item, index) in houseList" :key="item.id" style="width: 280px; flex-shrink: 0;">
-              <div class="item-time">
-                {{ item.actionDate }}
-              </div>
-              <div class="item-box-dot">
-                <img src="./assets/images/bottom-line-dot.png" alt="" />
-              </div>
-              <div class="item-content">
-                <div class="item-header">
-                  <div class="item-title" :title="item.actionTitle">
-                    {{ item.actionTitle }} <span v-if="item.versionId">({{ item.versionId }})</span>
-                  </div>
-                  <div class="item-header-icon" @click="handleClickDetail(true, item, $event)">
-                  <img src="./assets/images/item-header-icon.png" alt="" />
-                </div>
-                </div>
-                <div class="item-info" v-if="item.agreeVote !== null || item.disagreeVote !== null">
-                  {{ (item.agreeVote || 0) + "赞成：" + (item.disagreeVote || 0) + "反对" }}
-                </div>
-                <div class="item-main" v-if="item.fynrList && item.fynrList.length">
-                  <div class="item-main-item" v-for="(sub, subIndex) in item.fynrList" :key="subIndex">
-                    <div class="icon"></div>
-                    <CommonPrompt :content="sub">
-                      <div class="text">{{ sub }}</div>
-                    </CommonPrompt>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="right" :style="{ left: rightPos }">
-          <div class="junction-dot">
-            <div class="inner-dot"></div>
-          </div>
-          <div class="right-line"></div>
-        </div>
-      </div>
-    </div> -->
     <AnalysisBox title="流程概要" :showAllBtn="false">
       <div class="main">
         <div class="left" :style="{ width: (maxLineWidth + 250) + 'px' }">
@@ -207,17 +99,6 @@
           </div>
         </div>
       </div>
-      <!-- <div class="footer">
-      <div class="footer-left">
-        <img src="./assets/icons/right-icon1.png" alt="" />
-      </div>
-      <div class="footer-center">
-        立法过程始于2025年2月共和党启动预算框架谈判，5月22日众议院以215:214的1票优势通过初始版本；随后参议院历经16小时全文朗读和马拉松式辩论，于7月1日以51:50的票数通过修订版（副总统万斯投关键票）；因参议院版本大改（如永久化减税、提高债限至5万亿美元），法案重返众议院审议，经程序性投票（219:213）和最终表决（218:214），于7月3日深夜通过；特朗普在7月4日独立日签署生效，全程凸显两党对立、党内分歧及程序博弈。
-      </div>
-      <div class="footer-right">
-        <img src="./assets/icons/arrow-right.png" alt="" />
-      </div>
-    </div> -->
     </AnalysisBox>
 
     <ProcessOverviewDetailDialog

src/views/bill/index.vue

@@ -29,7 +29,7 @@ const siderBtnList = ref([
     path: '/billLayout/bill/background'
   },
    {
-    name: '内容概要',
+    name: '法案原文',
     path: '/billLayout/bill/template'
   },
 ])
@@ -38,7 +38,7 @@ const siderBtnActive = ref("法案简介");
 
 const getSiderActiveByRoutePath = path => {
 	if (path.includes("/billLayout/bill/background")) return "法案背景";
-	if (path.includes("/billLayout/bill/template")) return "内容概要";
+	if (path.includes("/billLayout/bill/template")) return "法案原文";
 	return "法案简介";
 };
 

src/views/bill/introdoction/index.vue

 <template>
 	<div class="introduction-wrap">
+		<WarningPane
+			v-if="riskSignal"
+			class="risk-signal-pane-top"
+			:warnningLevel="riskSignal.riskLevel"
+			:warnningContent="riskSignal.riskContent"
+		/>
+		<div class="introduction-wrap-content">
 			<div class="introduction-wrap-left">
 				<div class="introduction-wrap-left-box1">
-				<!-- <div class="box-header">
-					<div class="header-left"></div>
-					<div class="title">基本信息</div>
-					<div class="header-right">
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon2.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon3.png" alt="" />
-						</div>
-					</div>
-				</div>
-				<div class="box1-main">
-					<div class="box1-left">
-						<img :src=" basicInfo.imageUrl || defaultBill" alt="" />
-					</div>
-					<div class="box1-right">
-						<div class="box1-right-item">
-							<div class="item-left">提案人：</div>
-							<div class="item-right">{{ basicInfo.tarName }}</div>
-						</div>
 					
-						<div class="box1-right-item">
-							<div class="item-left">提出时间：</div>
-							<div class="item-right">{{ basicInfo.introductionDate }}</div>
-						</div>
-						<div class="box1-right-item">
-							<div class="item-left">相关领域：</div>
-							<div class="item-right1">
-								<div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div>
-							</div>
-						</div>
-						<div class="box1-right-item">
-							<div class="item-left">委员会报告：</div>
-							<div class="item-right2" v-if="basicInfo.reportList">
-								<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index">
-									{{ item }}
-								</div>
-							</div>
-						</div>
-						<div class="box1-right-item">
-							<div class="item-left">表决记录：</div>
-							<div class="item-right3">{{ `全程共进行${basicInfo.votetotal}次唱名表决` }}​</div>
-						</div>
-						<div class="box1-right-item">
-							<div class="item-left">最近状态：</div>
-							<div class="item-right3">{{ basicInfo.status }}​</div>
-						</div>
-						<div class="box1-right-item">
-							<div class="item-left">立案流程：</div>
-							<div class="item-right4">
-								<div
-									class="step"
-									v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []"
-									:key="index"
-									:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }"
-								>
-									<div
-										class="step-box"
-										:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }"
-									>
-										{{ item }}
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div> -->
 					<AnalysisBox title="基本信息" :showAllBtn="false">
 						<div class="box1-main">
 							<div class="box1-left">
@@ -88,14 +28,13 @@
 							<div class="box1-right-item">
 								<div class="item-left">相关领域：</div>
 								<div class="item-right1">
-									<!-- <div class="right1-item" v-for="item in basicInfo.hylyList" :key="item">{{ item }}</div> -->
-									<AreaTag v-for="item, index in basicInfo.hylyList" :key="index" :tagName="item"/>
+									<AreaTag v-for="item in hylyList" :key="item" :tagName="item" />
 								</div>
 							</div>
 							<div class="box1-right-item">
 								<div class="item-left">委员会报告：</div>
-								<div class="item-right2" v-if="basicInfo.reportList">
-									<div class="right2-item" v-for="(item, index) in basicInfo.reportList" :key="index">
+								<div class="item-right2" v-if="reportList.length">
+									<div class="right2-item" v-for="(item, index) in reportList" :key="getReportKey(item, index)">
 										{{ item }}
 									</div>
 								</div>
@@ -111,11 +50,14 @@
 							<div class="box1-right-item">
 								<div class="item-left">立案流程：</div>
 								<div class="item-right4">
-									<div class="step"
-										v-for="(item, index) in basicInfo.stageList ? [...basicInfo.stageList].reverse() : []" :key="index"
-										:style="{ zIndex: (basicInfo.stageList?.length || 0) - index }">
+									<div
+										v-for="(item, index) in reversedStageList"
+										:key="getStageKey(item, index)"
+										class="step"
+										:style="{ zIndex: getStageZIndex(index) }"
+									>
 										<div class="step-box"
-											:class="{ 'step-box-active': index === (basicInfo.stageList?.length || 0) - 1 }">
+											:class="{ 'step-box-active': index === stageActiveIndex }">
 											{{ item }}
 										</div>
 									</div>
@@ -126,33 +68,8 @@
 				</AnalysisBox>
 			</div>
 			<div class="introduction-wrap-left-box2">
-				<!-- <div class="box-header">
-					<div class="header-left"></div>
-					<div class="title">法案进展</div>
-					<div class="header-right">
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon2.png" alt="" />
-						</div>
-						<div class="icon">
-							<img src="@/assets/icons/box-header-icon3.png" alt="" />
-						</div>
-					</div>
-				</div>
-				<div class="box2-main">
-					<div class="box2-main-center">
-						<STimeline :dataList="timelineData" />
-					</div>
-				</div> -->
 				<AnalysisBox title="法案进展" :showAllBtn="false">
 					<template #header-btn>
-						<!-- <div class="progress-header-btns">
-							<div class="btn" :class="{ btnActive: progressMode === 'latest' }" @click="handleSwitchProgressMode('latest')">
-								最新进展
-							</div>
-							<div class="btn" :class="{ btnActive: progressMode === 'early' }" @click="handleSwitchProgressMode('early')">
-								前期进程
-							</div>
-						</div> -->
 					</template>
 					<div class="box2-main">
 						<div class="box2-main-center">
@@ -163,105 +80,10 @@
 			</div>
 			</div>
 			<div class="introduction-wrap-right">
-			<!-- <div class="box-header">
-				<div class="header-left"></div>
-				<div class="title">提出人</div>
-				<div class="header-right">
-					<div class="icon">
-						<img src="@/assets/icons/box-header-icon2.png" alt="" />
-					</div>
-					<div class="icon">
-						<img src="@/assets/icons/box-header-icon3.png" alt="" />
-					</div>
-				</div>
-			</div>
-			<div class="introduction-wrap-right-main">
-				<div class="right-main-box1">
-					<div class="name-box">
-						<div class="person-box">
-							<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
-								@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
-								{{ item.name }}
-							</div>
-						</div>
-					</div>
-					<div class="info-box">
-						<div class="info-left">
-							<img :src="defaultAvatar" alt="" @click="handleClickAvatar(curPerson)" />
-							<div class="usr-icon1">
-								<img src="./assets/images/usr-icon1.png" alt="" />
-							</div>
-							<div class="usr-icon2">
-								<img src="./assets/images/usr-icon2.png" alt="" />
-							</div>
-						</div>
-						<div class="info-right">
-							<div class="info-right-title" @click="handleClickAvatar(curPerson)">{{ curPerson.name }}</div>
-							<div class="info-right-item">
-								<div class="item-left">英文名:</div>
-								<div class="item-right">{{ curPerson.ename }}</div>
-							</div>
-							<div class="info-right-item">
-								<div class="item-left">党派:</div>
-								<div class="item-right">{{ curPerson.dp }}</div>
-							</div>
-							<div class="info-right-item">
-								<div class="item-left">选区:</div>
-								<div class="item-right">{{ curPerson.xq }}</div>
-							</div>
-							<div class="info-right-item">
-								<div class="item-left">职位:</div>
-								<div class="item-right">{{ curPerson.zw }}</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
-					<div class="tag-box" :class="{
-						status0: index % 4 === 0,
-						status1: index % 4 === 1,
-						status2: index % 4 === 2,
-						status3: index % 4 === 3
-					}" v-for="(tag, index) in curPerson.tagList" :key="index">
-						{{ tag.industryName }}
-					</div>
-				</div>
-				<div class="right-main-box3">
-					<div class="right-main-box3-header">
-						<div class="icon">
-							<img src="./assets/images/right-main-box3-header-icon.svg" alt="" />
-						</div>
-						<div class="title">人物动态</div>
-					</div>
-					<div class="right-main-box3-main">
-						<el-timeline style="max-width: 500px">
-							<el-timeline-item :timestamp="item.newsDate" placement="top"
-								v-for="(item, index) in curPerson.newsList?.slice(0, 3)" :key="index">
-								<div class="timeline-content">
-									{{ item.newsContent }}
-								</div>
-							</el-timeline-item>
-						</el-timeline>
-					</div>
-					<div class="right-main-box3-footer">
-						<div class="btn-more" @click="handleClickMore2">
-							<img src="../assets/images/btn-more.png" alt="" />
-						</div>
-					</div>
-				</div>
-			</div> -->
 				<AnalysisBox title="提出人" :showAllBtn="false">
 					<div class="introduction-wrap-right-main">
 						<div class="right-main-box1">
 							<div class="name-box">
-							<!-- <el-select
-							v-model="selectValue"
-							placeholder="请选择"
-							style="width: 180px; margin: 0 10px"
-							@change="handleChangeFaId"
-						>
-							<el-option v-for="item in faList" :key="item.value" :label="item.label" :value="item.id" />
-						</el-select> -->
 								<div class="person-box">
 									<div class="person-item" :class="{ nameItemActive: box3BtnActive === item.name }"
 										@click="handleClcikBox3Btn(item.name, index)" v-for="(item, index) in personList" :key="index">
@@ -301,7 +123,6 @@
 							</div>
 						</div>
 						<div class="right-main-box2" v-if="curPerson.tagList && curPerson.tagList.length">
-						<!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
 							<div class="tag-box status"v-for="(tag, index) in curPerson.tagList" :key="index">
 								{{ tag }}
 							</div>
@@ -321,17 +142,6 @@
 											{{ item.newsContent }}
 										</div>
 									</el-timeline-item>
-								<!-- <el-timeline-item timestamp="2018/4/3" placement="top">
-                <div class="timeline-content">
-                  借OBBBA通过势头，在得州巩固军工、能源集团支持，为2026年连任铺路，同时协调党内资源争夺关键摇摆选区。
-                </div>
-              </el-timeline-item>
-              <el-timeline-item timestamp="2018/4/2" placement="top">
-                <div class="timeline-content">
-                  特朗普力挺阿灵顿，白宫声明强调法案“美丽且必要”，双方矛盾凸显共和党内
-                  ​商业资本与传统能源势力裂痕。
-                </div>
-              </el-timeline-item> -->
 								</el-timeline>
 							</div>
 						</div>
@@ -339,13 +149,15 @@
 				</AnalysisBox>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import WordCloudMap from "./WordCloudMap.vue";
 import STimeline from "./STimeline.vue";
+import WarningPane from "@/components/base/WarningPane/index.vue";
 import { getBillInfo, getBillPerson, getBillEvent, getBillDyqk } from "@/api/bill";
 import defaultAvatar from "../assets/images/default-icon1.png";
 import defaultNew from "../assets/images/default-icon-news.png";
@@ -383,6 +195,19 @@ const handleSwitchProgressMode = mode => {
 
 const basicInfo = ref({});
 
+const riskSignal = computed(() => basicInfo.value?.riskSignalVO || null);
+const hylyList = computed(() => (Array.isArray(basicInfo.value?.hylyList) ? basicInfo.value.hylyList : []));
+const reportList = computed(() => (Array.isArray(basicInfo.value?.reportList) ? basicInfo.value.reportList : []));
+const reversedStageList = computed(() => {
+	const list = Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList : [];
+	return [...list].reverse();
+});
+const stageListLength = computed(() => (Array.isArray(basicInfo.value?.stageList) ? basicInfo.value.stageList.length : 0));
+const stageActiveIndex = computed(() => stageListLength.value - 1);
+const getStageZIndex = index => stageListLength.value - index;
+const getStageKey = (item, index) => `${item}-${index}`;
+const getReportKey = (item, index) => `${item}-${index}`;
+
 const handleGetBasicInfo = async () => {
 	const params = {
 		id: billId.value
@@ -452,8 +277,10 @@ onMounted(() => {
 <style lang="scss" scoped>
 .introduction-wrap {
 	width: 100%;
-	height: 880px;
+	min-height: 880px;
+	height: auto;
 	display: flex;
+	flex-direction: column;
 
 	.progress-header-btns {
 		display: flex;
@@ -536,6 +363,19 @@ onMounted(() => {
 		}
 	}
 
+	.risk-signal-pane-top {
+		width: 1600px;
+		margin-top: 16px;
+		margin-right: 18px;
+		height: 116px;
+		min-height: 116px;
+		flex-shrink: 0;
+	}
+
+	.introduction-wrap-content {
+		display: flex;
+	}
+
 	.introduction-wrap-left {
 		width: 1064px;
 		margin-top: 16px;
@@ -1358,6 +1198,7 @@ onMounted(() => {
 	line-height: 26px;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
+	line-clamp: 3;
 	-webkit-line-clamp: 3;
 	overflow: hidden;
 	text-overflow: ellipsis;

src/views/bill/template/index.vue

@@ -387,7 +387,7 @@ const handleChangeBill = val => {
 };
 
 const handleOpenVersionCompare = () => {
-	const targetUrl = `/billLayout/deepDig/processOverview?billId=${route.query.billId}`;
+	const targetUrl = `/billLayout/versionCompare?billId=${route.query.billId}`;
 	window.open(targetUrl, "_blank");
 };
 
@@ -404,8 +404,8 @@ const handleGetBillList = async () => {
 		billList.value = rawList
 			.map(item => {
 				return {
-					label: item.bbmc,
-					value: item.bbmc
+					label: item.contentZh,
+					value: item.contentZh
 				};
 			})
 			.filter(item => {

src/views/bill/versionCompare/assert/icons/translate-icons.svg

+<svg viewBox="0 0 13.5996 12.666" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13.599609" height="12.666016" fill="none" customFrame="#000000">
+	<path id="矢量 455" d="M2 8.66667L2 10C1.99999 10.0416 2.00192 10.0831 2.00578 10.1245C2.00965 10.1659 2.01545 10.207 2.02317 10.2479C2.03089 10.2888 2.0405 10.3292 2.052 10.3691C2.0635 10.4091 2.07684 10.4484 2.09202 10.4872C2.1072 10.5259 2.12416 10.5638 2.14289 10.6009C2.16162 10.6381 2.18204 10.6742 2.20416 10.7095C2.22627 10.7447 2.24998 10.7788 2.27529 10.8118C2.3006 10.8448 2.32739 10.8765 2.35566 10.907C2.38394 10.9375 2.41358 10.9666 2.44458 10.9944C2.47558 11.0221 2.50781 11.0483 2.54126 11.073C2.57472 11.0977 2.60925 11.1208 2.64487 11.1423C2.68048 11.1637 2.71702 11.1835 2.75448 11.2016C2.79195 11.2196 2.83017 11.2359 2.86916 11.2503C2.90814 11.2648 2.94772 11.2775 2.98788 11.2882C3.02805 11.299 3.06863 11.3079 3.10963 11.3149C3.15063 11.3218 3.19186 11.3269 3.23333 11.33L3.33333 11.3333L5.33333 11.3333L5.33333 12.6667L3.33333 12.6667C3.246 12.6667 3.15887 12.6624 3.07195 12.6538C2.98504 12.6453 2.89875 12.6325 2.81309 12.6154C2.72743 12.5984 2.64282 12.5772 2.55924 12.5518C2.47566 12.5265 2.39353 12.4971 2.31284 12.4637C2.23216 12.4303 2.1533 12.393 2.07627 12.3518C1.99925 12.3106 1.92443 12.2658 1.85181 12.2173C1.77919 12.1687 1.70913 12.1168 1.64162 12.0614C1.57411 12.006 1.50947 11.9474 1.44771 11.8856C1.38596 11.8239 1.32738 11.7592 1.27197 11.6917C1.21657 11.6242 1.1646 11.5541 1.11608 11.4815C1.06756 11.4089 1.02271 11.3341 0.981543 11.2571C0.940373 11.18 0.903077 11.1012 0.869654 11.0205C0.836232 10.9398 0.806845 10.8577 0.781492 10.7741C0.75614 10.6905 0.734944 10.6059 0.717906 10.5202C0.700867 10.4346 0.688068 10.3483 0.679507 10.2614C0.670947 10.1745 0.666666 10.0873 0.666666 10L0.666666 8.66667L2 8.66667L2 8.66667ZM10.6667 5.33333L13.6 12.6667L12.1633 12.6667L11.3627 10.6667L8.636 10.6667L7.83667 12.6667L6.40067 12.6667L9.33333 5.33333L10.6667 5.33333L10.6667 5.33333ZM10 7.25667L9.16867 9.33333L10.83 9.33333L10 7.25667ZM4 0L4 1.33333L6.66667 1.33333L6.66667 6L4 6L4 8L2.66667 8L2.66667 6L0 6L0 1.33333L2.66667 1.33333L2.66667 0L4 0ZM10 0.666667C10.0873 0.666667 10.1745 0.670947 10.2614 0.679507C10.3483 0.688068 10.4346 0.700867 10.5202 0.717906C10.6059 0.734944 10.6905 0.75614 10.7741 0.781492C10.8577 0.806845 10.9398 0.836232 11.0205 0.869654C11.1012 0.903077 11.18 0.940373 11.2571 0.981543C11.3341 1.02271 11.4089 1.06756 11.4815 1.11608C11.5541 1.1646 11.6242 1.21657 11.6917 1.27197C11.7592 1.32738 11.8239 1.38596 11.8856 1.44772C11.9474 1.50947 12.006 1.57411 12.0614 1.64162C12.1168 1.70913 12.1687 1.77919 12.2173 1.85181C12.2658 1.92443 12.3106 1.99925 12.3518 2.07628C12.393 2.1533 12.4303 2.23216 12.4637 2.31284C12.4971 2.39353 12.5265 2.47566 12.5518 2.55924C12.5772 2.64282 12.5984 2.72743 12.6154 2.81309C12.6325 2.89875 12.6453 2.98504 12.6538 3.07195C12.6624 3.15887 12.6667 3.246 12.6667 3.33333L12.6667 4.66667L11.3333 4.66667L11.3333 3.33333C11.3333 3.28966 11.3312 3.2461 11.3269 3.20264C11.3226 3.15919 11.3162 3.11604 11.3077 3.07321C11.2992 3.03038 11.2886 2.98807 11.2759 2.94629C11.2632 2.9045 11.2486 2.86343 11.2318 2.82309C11.2151 2.78274 11.1965 2.74332 11.1759 2.7048C11.1553 2.66629 11.1329 2.62888 11.1086 2.59257C11.0844 2.55626 11.0584 2.52123 11.0307 2.48748C11.003 2.45372 10.9737 2.4214 10.9428 2.39052C10.9119 2.35965 10.8796 2.33036 10.8459 2.30265C10.8121 2.27495 10.7771 2.24897 10.7408 2.22471C10.7045 2.20045 10.667 2.17802 10.6285 2.15744C10.59 2.13685 10.5506 2.1182 10.5102 2.10149C10.4699 2.08478 10.4288 2.07009 10.387 2.05741C10.3453 2.04474 10.303 2.03414 10.2601 2.02562C10.2173 2.0171 10.1741 2.0107 10.1307 2.00642C10.0872 2.00214 10.0437 2 10 2L8 2L8 0.666667L10 0.666667L10 0.666667ZM2.66667 2.66667L1.33333 2.66667L1.33333 4.66667L2.66667 4.66667L2.66667 2.66667ZM5.33333 2.66667L4 2.66667L4 4.66667L5.33333 4.66667L5.33333 2.66667Z" fill="rgb(95,101,108)" fill-rule="nonzero" />
+</svg>

src/views/bill/versionCompare/index.vue

+<template>
+	<div class="version-compare-wrap">
+			<div class="compare-top">
+				<div class="compare-top-col">
+					<div class="compare-top-label">原版本：</div>
+					<el-select v-model="oldVersionId" placeholder="请选择版本" class="compare-top-select" clearable>
+						<el-option
+							v-for="item in versionOptions"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							:disabled="item.value === newVersionId"
+						/>
+					</el-select>
+				</div>
+				<div class="compare-top-col">
+					<div class="compare-top-label">现版本：</div>
+					<el-select v-model="newVersionId" placeholder="请选择版本" class="compare-top-select" clearable>
+						<el-option
+							v-for="item in versionOptions"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+							:disabled="item.value === oldVersionId"
+						/>
+					</el-select>
+				</div>
+			</div>
+
+			<div class="compare-tools">
+				<div class="compare-tools-tabs" ref="tabsWrapRef">
+					<button
+						v-for="(tab, index) in diffTabs"
+						:key="tab.value"
+						class="compare-tools-tab"
+						:class="{ 'is-active': diffType === tab.value }"
+						type="button"
+						@click="handleDiffTabClick(tab.value)"
+						:ref="el => setTabRef(el, index)"
+					>
+						<span class="label">{{ tab.label }}</span>
+						<span
+							class="count"
+							v-if="diffCounts[tab.value] !== null && diffCounts[tab.value] !== undefined"
+						>
+							{{ diffCounts[tab.value] }}
+						</span>
+					</button>
+					<span class="compare-tools-tabs-active" :style="activeBarStyle"></span>
+				</div>
+
+				<div class="compare-tools-actions">
+					<el-checkbox v-model="onlyChinaRelated" label="只看涉华条款" size="large" />
+
+					<div class="compare-tools-switches">
+						<div class="compare-tools-switch">
+							<el-switch v-model="termsHighlight" inline-prompt/>
+							<span class="label">高亮实体</span>
+						</div>
+						<div class="compare-tools-switch">
+							<el-switch v-model="termsShowOriginal" inline-prompt/>
+							<span class="label">
+								<img class="label-icon" :src="translateIcon" alt="" />
+								显示原文
+							</span>
+						</div>
+					</div>
+
+					<div class="find-word-wrap">
+						<div class="find-word-box" v-if="findWordBox">
+							<div class="find-word-input">
+								<el-input ref="findWordInputRef" v-model="findWordTxt" placeholder="查找条款内容" clearable
+									@input="handleUpdateWord" />
+							</div>
+							<div class="find-word-limit">{{ findWordNum }}/{{ findWordMax }}</div>
+							<div class="find-word-icon" @click="handleFindWord('last')">
+								<el-icon><ArrowUp /></el-icon>
+							</div>
+							<div class="find-word-icon" @click="handleFindWord('next')">
+								<el-icon><ArrowDown /></el-icon>
+							</div>
+							<div class="find-word-icon" @click="handleFindWord('close')">
+								<el-icon><Close /></el-icon>
+							</div>
+						</div>
+						<el-button type="primary" plain class="find-word-open-btn"
+							@click="handleFindWord('open')">
+							<el-icon class="find-word-open-icon"><Search /></el-icon>
+							查找
+						</el-button>
+					</div>
+				</div>
+			</div>
+
+			<div class="compare-columns" v-loading="isLoading" @click="handleEntityClick">
+				<div class="compare-row" v-for="(pair, index) in comparePairs" :key="getPairKey(pair, index)">
+					<div class="compare-cell">
+						<template v-if="pair?.oldTerm">
+							<div class="term-body">
+								<div class="term-main">
+									<div class="term-row term-row-cn">
+										<div class="term-no-cn">第{{ pair.oldTerm.tkxh }}条.</div>
+										<div class="term-content-cn" v-html="getTermContentHtml(pair.oldTerm, 'cn')"></div>
+									</div>
+									<div class="term-row term-row-en" v-if="termsShowOriginal">
+										<div class="term-no-en">Sec.{{ pair.oldTerm.tkxh }}</div>
+										<div class="term-content-en" v-html="getTermContentHtml(pair.oldTerm, 'en')"></div>
+									</div>
+								</div>
+							</div>
+						</template>
+						<div v-else class="term-empty">—</div>
+					</div>
+
+					<div class="compare-cell">
+						<template v-if="pair?.newTerm">
+							<div class="term-body">
+								<div class="term-main">
+									<div class="term-row term-row-cn">
+										<div class="term-no-cn">第{{ pair.newTerm.tkxh }}条.</div>
+										<div class="term-content-cn" v-html="getTermContentHtml(pair.newTerm, 'cn')"></div>
+									</div>
+									<div class="term-row term-row-en" v-if="termsShowOriginal">
+										<div class="term-no-en">Sec.{{ pair.newTerm.tkxh }}</div>
+										<div class="term-content-en" v-html="getTermContentHtml(pair.newTerm, 'en')"></div>
+									</div>
+								</div>
+							</div>
+						</template>
+						<div v-else class="term-empty">—</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="compare-footer">
+				<div class="compare-footer-text">{{ `共 ${total} 项` }}</div>
+				<div class="compare-footer-right">
+					<el-pagination
+						background
+						layout="prev, pager, next"
+						:total="total"
+						v-model:current-page="currentPage"
+						v-model:page-size="pageSize"
+						@current-change="handleCurrentChange"
+					/>
+				</div>
+			</div>
+		</div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { getBillContentId, getBillVersionCompare } 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";
+
+const route = useRoute();
+
+const billId = computed(() => route.query.billId);
+
+const versionOptions = ref([]);
+const oldVersionId = ref("");
+const newVersionId = ref("");
+
+const diffType = ref("CHANGE");
+const onlyChinaRelated = ref(false);
+const keyword = ref("");
+
+const termsHighlight = ref(true);
+const termsShowOriginal = ref(true);
+
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+const diffTabs = [
+	{ label: "变更", value: "CHANGE" },
+	{ label: "新增", value: "ADD" },
+	{ label: "删除", value: "DELETE" }
+];
+const diffCounts = ref({ CHANGE: 0, ADD: 0, DELETE: 0 });
+const tabsWrapRef = ref(null);
+const tabItemRefs = ref([]);
+const activeBarStyle = ref({});
+
+const findWordBox = ref(false);
+const findWordInputRef = ref();
+const findWordTxt = ref("");
+const findWordKeyword = ref("");
+const findWordNum = ref(0);
+const findWordMax = ref(0);
+const findWordTimer = ref(null);
+
+const isLoading = ref(false);
+const comparePairs = ref([]);
+
+const compareRequestToken = ref(0);
+
+const handleLoadVersionOptions = async () => {
+	if (!billId.value) {
+		versionOptions.value = [];
+		oldVersionId.value = "";
+		newVersionId.value = "";
+		return;
+	}
+
+	const res = await getBillContentId({ id: billId.value });
+	const rawList = Array.isArray(res?.data) ? res.data : [];
+	const seen = new Set();
+	versionOptions.value = rawList
+		.map(item => {
+			return {
+				label: item?.contentZh,
+				value: item?.contentZh
+			};
+		})
+		.filter(item => item.value)
+		.filter(item => {
+			if (seen.has(item.value)) return false;
+			seen.add(item.value);
+			return true;
+		});
+
+	if (!versionOptions.value.length) {
+		oldVersionId.value = "";
+		newVersionId.value = "";
+		return;
+	}
+
+	if (versionOptions.value.length === 1) {
+		oldVersionId.value = versionOptions.value[0].value;
+		newVersionId.value = "";
+		return;
+	}
+
+	oldVersionId.value = versionOptions.value[0].value;
+	newVersionId.value = versionOptions.value[versionOptions.value.length - 1].value;
+};
+
+const normalizeDiffType = value => {
+	if (value === "ADD") return "ADD";
+	if (value === "DELETE") return "DELETE";
+	return "CHANGE";
+};
+
+const setTabRef = (el, index) => {
+	if (el) tabItemRefs.value[index] = el;
+};
+
+const updateActiveBar = () => {
+	const index = diffTabs.findIndex(tab => tab.value === diffType.value);
+	const target = tabItemRefs.value[index];
+	const wrap = tabsWrapRef.value;
+	if (!target || !wrap) {
+		activeBarStyle.value = {};
+		return;
+	}
+	const wrapRect = wrap.getBoundingClientRect();
+	const targetRect = target.getBoundingClientRect();
+	activeBarStyle.value = {
+		width: `${targetRect.width}px`,
+		transform: `translateX(${targetRect.left - wrapRect.left}px)`
+	};
+};
+
+const handleDiffTabClick = value => {
+	if (diffType.value === value) return;
+	diffType.value = value;
+	nextTick(() => {
+		updateActiveBar();
+	});
+};
+
+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);
+	if (diff === "ADD") return "add";
+	if (diff === "DELETE") return "del";
+	return "update";
+};
+
+const mapStatusToDiffType = value => {
+	if (value === "add") return "ADD";
+	if (value === "del") return "DELETE";
+	return "CHANGE";
+};
+
+const mapVersionCompareItemToPair = item => {
+	const oldTerm = item?.originalClauseMainId
+		? {
+				id: item.originalClauseMainId,
+				ywid: item.originalClauseMainId,
+				tkxh: item?.originalClauseNumber ?? "",
+				fynr: item?.originalContentZh ?? "",
+				ywnr: item?.originalContent ?? ""
+			}
+		: null;
+	const newTerm = item?.currentClauseMainId
+		? {
+				id: item.currentClauseMainId,
+				ywid: item.currentClauseMainId,
+				tkxh: item?.currentClauseNumber ?? "",
+				fynr: item?.currentContentZh ?? "",
+				ywnr: item?.currentContent ?? ""
+			}
+		: null;
+	return { oldTerm, newTerm };
+};
+
+const fetchComparePage = async ({ diff, page, size }) => {
+	const params = {
+		billId: billId.value,
+		content: keyword.value,
+		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 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
+	};
+};
+
+const getCountByChangeType = (countTypeList, changeTypeLabel) => {
+	const list = Array.isArray(countTypeList) ? countTypeList : [];
+	const target = list.find(item => String(item?.changeType ?? "") === changeTypeLabel);
+	return Number(target?.count ?? 0) || 0;
+};
+
+const loadComparePairs = async () => {
+	if (!billId.value || !oldVersionId.value || !newVersionId.value) {
+		comparePairs.value = [];
+		updateDiffCounts([]);
+		total.value = 0;
+		return;
+	}
+
+	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;
+		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);
+	} catch (error) {
+		if (currentToken !== compareRequestToken.value) return;
+		comparePairs.value = [];
+		updateDiffCounts([]);
+		total.value = 0;
+	} finally {
+		if (currentToken === compareRequestToken.value) {
+			isLoading.value = false;
+		}
+	}
+};
+
+const handleCurrentChange = page => {
+	currentPage.value = Number(page) || 1;
+};
+
+const getPairKey = (pair, index) => {
+	const oldKey = pair?.oldTerm?.ywid ?? pair?.oldTerm?.id ?? pair?.oldTerm?.tkxh ?? "";
+	const newKey = pair?.newTerm?.ywid ?? pair?.newTerm?.id ?? pair?.newTerm?.tkxh ?? "";
+	return `${oldKey || "old"}__${newKey || "new"}__${index}`;
+};
+
+const escapeHtml = value => {
+	const str = String(value ?? "");
+	return str
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#39;");
+};
+
+const escapeRegExp = text => {
+	return String(text || "").replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+
+const getSearchRanges = (text, searchTerm) => {
+	const rawText = String(text ?? "");
+	const term = String(searchTerm ?? "").trim();
+	if (!rawText || !term) return [];
+
+	const ranges = [];
+	const reg = new RegExp(escapeRegExp(term), "g");
+	let match;
+	while ((match = reg.exec(rawText)) !== null) {
+		ranges.push({ start: match.index, end: match.index + match[0].length });
+		if (match[0].length === 0) reg.lastIndex += 1;
+	}
+	return ranges;
+};
+
+const normalizeEntities = entities => {
+	const list = Array.isArray(entities) ? entities : [];
+	return list
+		.map(item => {
+			return {
+				text_span: String(item?.text_span ?? "").trim(),
+				type: String(item?.type ?? "").trim()
+			};
+		})
+		.filter(item => item.text_span);
+};
+
+const getEntityRanges = (text, entities) => {
+	const ranges = [];
+	const rawText = String(text ?? "");
+	if (!rawText) return ranges;
+
+	const list = normalizeEntities(entities).sort((a, b) => b.text_span.length - a.text_span.length);
+	for (const ent of list) {
+		let startIndex = 0;
+		while (startIndex < rawText.length) {
+			const idx = rawText.indexOf(ent.text_span, startIndex);
+			if (idx === -1) break;
+			ranges.push({ start: idx, end: idx + ent.text_span.length, ent });
+			startIndex = idx + ent.text_span.length;
+		}
+	}
+	ranges.sort((a, b) => a.start - b.start || b.end - a.end);
+
+	const merged = [];
+	let lastEnd = 0;
+	for (const r of ranges) {
+		if (r.start < lastEnd) continue;
+		merged.push(r);
+		lastEnd = r.end;
+	}
+	return merged;
+};
+
+const buildHighlightedHtml = (text, entities, enableHighlight, searchTerm) => {
+	const rawText = String(text ?? "");
+	if (!rawText) return "";
+
+	const safeText = escapeHtml(rawText).replace(/\n/g, "<br />");
+	const term = String(searchTerm ?? "").trim();
+	const enableSearch = Boolean(term);
+	if (!enableHighlight && !enableSearch) return safeText;
+
+	const ranges = getEntityRanges(rawText, entities);
+	const searchRanges = enableSearch ? getSearchRanges(rawText, term) : [];
+	if (!ranges.length && !searchRanges.length) return safeText;
+
+	const merged = [];
+	for (const r of ranges) {
+		merged.push({ start: r.start, end: r.end, type: "entity", ent: r.ent });
+	}
+	for (const r of searchRanges) {
+		const overlapsEntity = ranges.some(er => r.start < er.end && r.end > er.start);
+		if (overlapsEntity) continue;
+		merged.push({ start: r.start, end: r.end, type: "search" });
+	}
+	merged.sort((a, b) => a.start - b.start || b.end - a.end);
+
+	let html = "";
+	let cursor = 0;
+	for (const r of merged) {
+		if (cursor < r.start) {
+			html += escapeHtml(rawText.slice(cursor, r.start));
+		}
+		const spanText = rawText.slice(r.start, r.end);
+		if (r.type === "entity") {
+			const type = escapeHtml(r.ent?.type ?? "");
+			const text = escapeHtml(spanText);
+			html += `<span class="term-entity" data-entity-type="${type}" data-entity-text="${text}">${text}</span>`;
+		} else {
+			html += `<span class="term-find-highlight">${escapeHtml(spanText)}</span>`;
+		}
+		cursor = r.end;
+	}
+	if (cursor < rawText.length) {
+		html += escapeHtml(rawText.slice(cursor));
+	}
+	return html.replace(/\n/g, "<br />");
+};
+
+const handleEntityClick = event => {
+	const el = event?.target?.closest?.("span.term-entity");
+	if (!el) return;
+
+	const q = String(el.getAttribute("data-entity-text") ?? "").trim();
+	if (!q) return;
+
+	const url = `https://www.bing.com/search?q=${encodeURIComponent(q)}`;
+	window.open(url, "_blank", "noopener");
+};
+
+const termEntityCache = ref(new Map());
+const entityRequestToken = ref(0);
+
+const getTermEntityKey = (term, lang) => {
+	const baseKey = term?.ywid ?? term?.id ?? term?.tkxh ?? "";
+	return `${baseKey}__${lang}`;
+};
+
+const ensureEntitiesForPairs = async pairs => {
+	if (!termsHighlight.value) return;
+
+	const list = Array.isArray(pairs) ? pairs : [];
+	if (!list.length) return;
+
+	const currentToken = ++entityRequestToken.value;
+	const tasks = [];
+	const maxTasks = 40;
+
+	for (const pair of list) {
+		const terms = [pair?.oldTerm, pair?.newTerm].filter(Boolean);
+		for (const term of terms) {
+			const cnKey = getTermEntityKey(term, "cn");
+			const enKey = getTermEntityKey(term, "en");
+			if (!termEntityCache.value.has(cnKey) && String(term?.fynr ?? "").trim()) {
+				tasks.push({ key: cnKey, text: term.fynr });
+			}
+			if (!termEntityCache.value.has(enKey) && String(term?.ywnr ?? "").trim()) {
+				tasks.push({ key: enKey, text: term.ywnr });
+			}
+			if (tasks.length >= maxTasks) break;
+		}
+		if (tasks.length >= maxTasks) break;
+	}
+
+	if (!tasks.length) return;
+
+	try {
+		const results = await Promise.all(
+			tasks.map(async item => {
+				const res = await extractTextEntity(item.text);
+				const entities = normalizeEntities(res?.result ?? res?.data?.result ?? res?.data ?? res);
+				return { key: item.key, entities };
+			})
+		);
+
+		if (currentToken !== entityRequestToken.value) return;
+		for (const r of results) {
+			termEntityCache.value.set(r.key, r.entities);
+		}
+	} catch (error) {
+		if (currentToken !== entityRequestToken.value) return;
+	}
+};
+
+const getTermContentHtml = (term, lang) => {
+	const raw = lang === "en" ? term?.ywnr : term?.fynr;
+	const key = getTermEntityKey(term, lang);
+	const entities = termEntityCache.value.get(key) || [];
+	return buildHighlightedHtml(raw, entities, termsHighlight.value, findWordKeyword.value);
+};
+
+const countOccurrences = (text, searchTerm) => {
+	const rawText = String(text ?? "");
+	const term = String(searchTerm ?? "").trim();
+	if (!rawText || !term) return 0;
+	const reg = new RegExp(escapeRegExp(term), "g");
+	const matches = rawText.match(reg);
+	return matches ? matches.length : 0;
+};
+
+const updateActiveFindHighlight = () => {
+	const spans = document.querySelectorAll("span.term-find-highlight");
+	spans.forEach((span, index) => {
+		if (index + 1 === findWordNum.value) {
+			span.classList.add("is-active");
+			span.scrollIntoView({ block: "center" });
+		} else {
+			span.classList.remove("is-active");
+		}
+	});
+};
+
+const doUpdateFindWord = async () => {
+	findWordNum.value = 0;
+	findWordMax.value = 0;
+	const term = String(findWordTxt.value || "").trim();
+	findWordKeyword.value = term;
+
+	if (!term) {
+		await nextTick();
+		return;
+	}
+
+	const list = Array.isArray(comparePairs.value) ? comparePairs.value : [];
+	for (const pair of list) {
+		const terms = [pair?.oldTerm, pair?.newTerm].filter(Boolean);
+		for (const t of terms) {
+			findWordMax.value += countOccurrences(t?.fynr, term);
+			if (termsShowOriginal.value) {
+				findWordMax.value += countOccurrences(t?.ywnr, term);
+			}
+		}
+	}
+
+	if (findWordMax.value > 0) {
+		await nextTick();
+		findWordNum.value = 1;
+		updateActiveFindHighlight();
+	}
+};
+
+const handleUpdateWord = () => {
+	if (findWordTimer.value) {
+		clearTimeout(findWordTimer.value);
+		findWordTimer.value = null;
+	}
+	findWordTimer.value = setTimeout(() => {
+		doUpdateFindWord();
+	}, 300);
+};
+
+const handleFindWord = event => {
+	switch (event) {
+		case "open":
+			findWordBox.value = true;
+			nextTick(() => {
+				findWordInputRef.value?.focus?.();
+			});
+			break;
+		case "last":
+			if (findWordMax.value > 1) {
+				findWordNum.value = findWordNum.value === 1 ? findWordMax.value : findWordNum.value - 1;
+				updateActiveFindHighlight();
+			}
+			break;
+		case "next":
+			if (findWordMax.value > 1) {
+				findWordNum.value = findWordNum.value === findWordMax.value ? 1 : findWordNum.value + 1;
+				updateActiveFindHighlight();
+			}
+			break;
+		case "close":
+			findWordBox.value = false;
+			findWordTxt.value = "";
+			findWordKeyword.value = "";
+			findWordNum.value = 0;
+			findWordMax.value = 0;
+			break;
+	}
+};
+
+watch(
+	[billId, oldVersionId, newVersionId, diffType, onlyChinaRelated, keyword, currentPage, pageSize],
+	() => {
+		loadComparePairs();
+	},
+	{ immediate: true }
+);
+
+watch(diffType, () => {
+	currentPage.value = 1;
+	nextTick(() => {
+		updateActiveBar();
+	});
+});
+
+watch([oldVersionId, newVersionId, onlyChinaRelated, keyword], () => {
+	currentPage.value = 1;
+});
+
+watch(termsHighlight, () => {
+	ensureEntitiesForPairs(comparePairs.value);
+});
+
+watch(
+	[comparePairs, termsShowOriginal],
+	() => {
+		if (!findWordBox.value) return;
+		doUpdateFindWord();
+	},
+	{ deep: true }
+);
+
+onMounted(async () => {
+	await handleLoadVersionOptions();
+	nextTick(() => {
+		updateActiveBar();
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.version-compare-wrap {
+	display: flex;
+	flex-direction: column;
+	row-gap: 16px;
+	width: 100%;
+	background: #ffffff;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+	padding: 16px 75px;
+	box-sizing: border-box;
+}
+
+.compare-top {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 37px;
+	margin-top: 0;
+}
+
+.compare-top-col {
+	display: flex;
+	align-items: center;
+	gap: 22px;
+	background: transparent;
+	border-radius: 0;
+	padding: 0;
+	box-shadow: none;
+}
+
+.compare-top-label {
+	font-size: 16px;
+	font-weight: 400;
+	color: var(--text-primary-65-color);
+	white-space: nowrap;
+}
+
+.compare-top-select {
+	flex: 1;
+
+	:deep(.el-select__wrapper) {
+		background-color: rgb(246, 250, 255);
+		box-shadow: 0 0 0 1px var(--color-primary-35) inset;
+	}
+
+	:deep(.el-select__wrapper.is-hovering) {
+		box-shadow: 0 0 0 1px var(--color-primary-35) inset;
+	}
+
+	:deep(.el-select__wrapper.is-focused) {
+		box-shadow: 0 0 0 1px var(--color-primary-35) inset;
+	}
+
+	:deep(.el-select__selected-item),
+	:deep(.el-select__placeholder),
+	:deep(.el-select__input),
+	:deep(.el-select__caret),
+	:deep(.el-select__suffix),
+	:deep(.el-select__icon) {
+		color: var(--color-primary-100);
+	}
+}
+
+.compare-tools {
+	height: 66px;
+	border-bottom: 1px solid var(--border-black-5);
+	border-top: 1px solid var(--border-black-5);
+	background: transparent;
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	flex-wrap: nowrap;
+	white-space: nowrap;
+}
+
+.compare-tools-tabs {
+	flex: 0 0 auto;
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 28px;
+	height: 100%;
+}
+
+.compare-tools-tab {
+	background: transparent;
+	border: none;
+	padding: 0;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 16px;
+	font-weight: 400;
+	color: var(--text-primary-65-color);
+	position: relative;
+
+	&.is-active {
+		color: var(--color-primary-100);
+	}
+
+	&:focus-visible {
+		outline: 2px solid rgba(66, 133, 244, 0.5);
+		outline-offset: 4px;
+		border-radius: 6px;
+	}
+
+	.label {
+		line-height: 1;
+	}
+
+	.count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 22px;
+		height: 22px;
+		padding: 0 6px;
+		border-radius: 999px;
+		background: var(--color-primary-100);
+		color: var(--bg-white-100);
+		font-size: 12px;
+		font-weight: 600;
+	}
+}
+
+.compare-tools-tabs-active {
+	position: absolute;
+	left: 0;
+	bottom: -1px;
+	height: 2px;
+	background: var(--color-primary-100);
+	border-radius: 2px;
+	transition: transform 0.2s ease, width 0.2s ease;
+}
+
+.compare-tools-actions {
+	display: flex;
+	align-items: center;
+	gap: 24px;
+	flex-wrap: wrap;
+	margin-left: auto;
+	justify-content: flex-end;
+	font-size: 16px;
+	font-weight: 400;
+	color: var(--text-primary-65-color);
+
+	:deep(.el-checkbox__label) {
+		font-size: 16px;
+		font-weight: 400;
+		color: var(--text-primary-65-color);
+	}
+}
+
+.compare-tools-switches {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.compare-tools-switch {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+
+	.label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 16px;
+		font-weight: 400;
+		color: var(--text-primary-65-color);
+	}
+}
+
+.label-icon {
+	width: 16px;
+	height: 16px;
+}
+
+.compare-tools-search {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.find-word-box {
+	width: 430px;
+	height: 60px;
+	border: 1px solid rgba(230, 231, 232, 1);
+	background-color: #ffffff;
+	border-radius: 6px;
+	display: flex;
+	align-items: center;
+	position: absolute;
+	right: 0;
+	top: -68px;
+	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+
+	.find-word-input {
+		flex: 1;
+		min-width: 0;
+		padding-left: 8px;
+	}
+
+	.find-word-limit {
+		border-right: solid 1px rgba(230, 231, 232, 1);
+		color: #5f656c;
+		padding: 0 16px 0 8px;
+		white-space: nowrap;
+	}
+
+	.find-word-icon {
+		padding: 6px 10px;
+		margin: 0 2px;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+	}
+}
+
+.find-word-wrap {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}
+
+.find-word-open-btn {
+	height: 32px;
+	background-color: var(--bg-white-100);
+	border-color: var(--bg-black-10);
+	color: var(--text-primary-80-color);
+
+	&:hover {
+		background-color: var(--bg-black-5);
+		border-color: var(--bg-black-10);
+		color: var(--text-primary-80-color);
+	}
+
+	&:active {
+		background-color: var(--bg-black-10);
+		border-color: var(--bg-black-10);
+		color: var(--text-primary-80-color);
+	}
+}
+
+.find-word-open-icon {
+	margin-right: 4px;
+}
+
+:deep(span.term-find-highlight) {
+	background-color: #ffff00;
+}
+
+:deep(span.term-find-highlight.is-active) {
+	background-color: #ff9632;
+}
+
+.compare-columns {
+	margin-top: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.compare-row {
+	width: 100%;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
+.compare-cell {
+	width: 100%;
+	box-sizing: border-box;
+	border-radius: 2px;
+	background: var(--bg-white-100);
+	display: flex;
+	align-items: flex-start;
+	position: relative;
+	padding: 16px;
+}
+
+.compare-row:nth-child(2n-1) .compare-cell {
+	background: var(--bg-black-2);
+}
+
+.compare-footer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16px;
+	padding: 12px 0 0;
+}
+
+.compare-footer-text {
+	font-size: 14px;
+	color: var(--text-primary-65-color);
+	white-space: nowrap;
+}
+
+.compare-footer-right {
+	display: flex;
+	justify-content: flex-end;
+	flex: 1;
+	min-width: 0;
+}
+
+.term-empty {
+	width: 100%;
+	min-height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgba(132, 136, 142, 1);
+}
+
+.term-body {
+	display: flex;
+	column-gap: 18px;
+	flex: 1;
+	min-width: 0;
+	width: 100%;
+}
+
+.term-main {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	row-gap: 6px;
+}
+
+.term-row {
+	display: flex;
+	align-items: flex-start;
+	column-gap: 18px;
+}
+
+.term-no-cn {
+	font-size: 16px;
+	font-weight: 700;
+	line-height: 24px;
+	color: var(--color-primary-100);
+	white-space: nowrap;
+	width: 90px;
+	text-align: center;
+	flex: 0 0 90px;
+}
+
+.term-no-en {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 24px;
+	color: var(--color-primary-100);
+	white-space: nowrap;
+	width: 90px;
+	text-align: center;
+	flex: 0 0 90px;
+}
+
+.term-content-cn {
+	flex: 1;
+	font-size: 16px;
+	font-weight: 700;
+	line-height: 24px;
+	color: var(--text-primary-80-color);
+
+	:deep(.term-entity) {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0 6px 0 4px;
+		background: var(--color-primary-10);
+		cursor: pointer;
+		transition: background-color 0.15s ease, transform 0.15s ease;
+	}
+
+	:deep(.term-entity:hover) {
+		background: var(--color-primary-35);
+		transform: translateY(-1px);
+	}
+
+	:deep(.term-entity::before) {
+		content: "";
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		flex: 0 0 14px;
+		background-color: var(--color-primary-100);
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M448 768c176.736 0 320-143.264 320-320S624.736 128 448 128 128 271.264 128 448s143.264 320 320 320zm0 64C236.288 832 64 659.712 64 448S236.288 64 448 64s384 172.288 384 384-172.288 384-384 384z'/%3E%3Cpath d='M832 832a32 32 0 0 1-22.624-9.376l-160-160a32 32 0 0 1 45.248-45.248l160 160A32 32 0 0 1 832 832z'/%3E%3C/svg%3E");
+		mask-repeat: no-repeat;
+		mask-position: center;
+		mask-size: contain;
+	}
+}
+
+.term-content-en {
+	flex: 1;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 24px;
+	color: var(--text-primary-65-color);
+
+	:deep(.term-entity) {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0 6px 0 4px;
+		background: var(--color-primary-10);
+		cursor: pointer;
+		transition: background-color 0.15s ease, transform 0.15s ease;
+	}
+
+	:deep(.term-entity:hover) {
+		background: var(--color-primary-35);
+		transform: translateY(-1px);
+	}
+
+	:deep(.term-entity::before) {
+		content: "";
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		flex: 0 0 14px;
+		background-color: var(--color-primary-100);
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M448 768c176.736 0 320-143.264 320-320S624.736 128 448 128 128 271.264 128 448s143.264 320 320 320zm0 64C236.288 832 64 659.712 64 448S236.288 64 448 64s384 172.288 384 384-172.288 384-384 384z'/%3E%3Cpath d='M832 832a32 32 0 0 1-22.624-9.376l-160-160a32 32 0 0 1 45.248-45.248l160 160A32 32 0 0 1 832 832z'/%3E%3C/svg%3E");
+		mask-repeat: no-repeat;
+		mask-position: center;
+		mask-size: contain;
+	}
+}
+
+@media (max-width: 1680px) {
+
+	.compare-row,
+	.compare-top {
+		grid-template-columns: 1fr;
+	}
+
+	.compare-tools-actions {
+		width: 100%;
+	}
+
+	.compare-tools-search {
+		width: 100%;
+	}
+
+	.find-word-box {
+		width: 100%;
+	}
+}
+</style>