fix 优化原文组件

src/components/base/DecreeOriginal/index.vue

@@ -11,18 +11,16 @@
 					<el-switch v-model="isTranslate" />
 					<div class="switch-label">原文显示</div>
 
-					<div class="btn" @click="emits('download')">
-						<div class="icon icon-gap-4">
-							<img :src="defaultDownloadIcon" alt="" />
+					<div
+						v-for="action in headerActions"
+						:key="action.key"
+						class="btn"
+						@click="action.onClick"
+					>
+						<div :class="['icon', action.iconGapClass]">
+							<img :src="action.icon" alt="" />
 						</div>
-						<div class="text">下载</div>
-					</div>
-
-					<div class="btn" @click="handleFindWord('open')">
-						<div class="icon icon-gap-6">
-							<img :src="defaultSearchIcon" alt="" />
-						</div>
-						<div class="text">查找</div>
+						<div class="text">{{ action.text }}</div>
 					</div>
 
 					<div class="find-word-box" v-if="findWordBox">
@@ -47,15 +45,16 @@
 				</div>
 
 				<div class="report-main">
-					<div v-if="!displayReportData.length" class="noContent">{{ "暂无数据" }}</div>
-					<el-scrollbar height="100%" v-else>
+					<div v-if="!displayReportData.length" class="no-content">暂无数据</div>
+					<el-scrollbar v-else height="100%">
 						<div
 							v-for="item in displayReportData"
 							:key="item.num"
-							:class="['content-row', { 'high-light': isHighlight }]"
+							class="content-row"
+							:class="{ 'high-light': isHighlight }"
 						>
-							<div :class="['content-cn', { 'translate-cn': !isTranslate }]" v-html="item.content"></div>
-							<div class="content-en" v-html="item.contentEn" v-if="isTranslate"></div>
+							<div class="content-cn" :class="{ 'translate-cn': !isTranslate }" v-html="item.content" />
+							<div v-if="isTranslate" class="content-en" v-html="item.contentEn" />
 						</div>
 					</el-scrollbar>
 				</div>
@@ -70,8 +69,6 @@ import defaultSearchIcon from "./assets/icons/search.png";
 import { nextTick, ref, watch } from "vue";
 import { debounce } from "lodash";
 
-// 该组件为公共展示组件：网络请求/下载等业务由父组件处理；查找、高亮、显示切换等通用交互在组件内部封装。
-// 图标资源固定使用组件内置文件，保证组件资源自包含。
 const props = defineProps({
 	reportData: { type: Array, default: () => [] },
 });
@@ -88,6 +85,23 @@ const findWordMax = ref(0);
 const originReportData = ref([]);
 const displayReportData = ref([]);
 
+const headerActions = [
+	{
+		key: "download",
+		text: "下载",
+		icon: defaultDownloadIcon,
+		iconGapClass: "icon-gap-4",
+		onClick: () => emits("download"),
+	},
+	{
+		key: "search",
+		text: "查找",
+		icon: defaultSearchIcon,
+		iconGapClass: "icon-gap-6",
+		onClick: () => handleFindWord("open"),
+	},
+];
+
 function escapeRegExp(text) {
 	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -137,7 +151,9 @@ const doUpdateWord = () => {
 
 	displayReportData.value = originReportData.value.map((item) => {
 		const cn = applyHighlightToText(item.content, term);
-		const en = isTranslate.value ? applyHighlightToText(item.contentEn, term) : { html: item.contentEn, count: 0 };
+		const en = isTranslate.value
+			? applyHighlightToText(item.contentEn, term)
+			: { html: item.contentEn, count: 0 };
 		findWordMax.value += cn.count + en.count;
 		return {
 			...item,
@@ -222,7 +238,6 @@ watch(isTranslate, () => {
 			width: 1600px;
 			background-color: white;
 			padding: 0 60px;
-			height: 20px;
 			flex: auto;
 			display: flex;
 			flex-direction: column;
@@ -245,7 +260,6 @@ watch(isTranslate, () => {
 					display: flex;
 					align-items: center;
 					.find-word-input {
-						width: 20px;
 						flex: auto;
 					}
 					.find-word-limit {
@@ -265,8 +279,7 @@ watch(isTranslate, () => {
 					font-size: 20px;
 					line-height: 20px;
 					font-weight: 700;
-					width: 20px;
-					flex: auto;
+					flex: 1;
 				}
 				.btn {
 					margin-left: 10px;
@@ -310,25 +323,11 @@ watch(isTranslate, () => {
 			}
 
 			.report-main {
-				height: 20px;
 				flex: auto;
 				box-sizing: border-box;
 				padding-top: 10px;
 
-				&::-webkit-scrollbar {
-					display: none;
-				}
-
-				&::-webkit-scrollbar-thumb {
-					background: #c1c1c1;
-					border-radius: 4px;
-				}
-
-				&::-webkit-scrollbar-track {
-					background: #f1f1f1;
-				}
-
-				.noContent {
+				.no-content {
 					height: 100%;
 					display: flex;
 					align-items: center;
@@ -347,10 +346,6 @@ watch(isTranslate, () => {
 					min-height: 100px;
 					gap: 80px;
 
-					&:last-child {
-						border-bottom: none;
-					}
-
 					.content-en,
 					.content-cn {
 						width: 50%;

src/views/bill/billOriginalText/index.vue

 <template>
 	<div class="bill-original-text-page">
-		<div class="page-header">
-			<div class="page-title">法案原文</div>
-			<div class="page-actions">
-				<div class="action-btn" @click="handleBack">返回</div>
-			</div>
-		</div>
-
-		<div class="page-content">
-			<iframe v-if="billFullText" :src="billFullText" width="100%" height="100%" frameborder="0"></iframe>
-			<div v-else class="empty-state">暂无原文</div>
-		</div>
+		<DecreeOriginal :report-data="reportData" @download="handleDownload" />
 	</div>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { getBillFullText } from "@/api/bill";
-
-const route = useRoute();
-const router = useRouter();
-
-const billFullText = ref("");
+import { ref } from "vue";
+import DecreeOriginal from "@/components/base/DecreeOriginal/index.vue";
 
-const getBillFullTextFn = async () => {
-	const res = await getBillFullText({
-		id: route.query.billId
-	});
-	if (res.code === 200 && res.data) {
-		billFullText.value = typeof res.data === "string" ? res.data.trim() : res.data;
-	}
-};
+// 旧“法案原文”功能/按钮全部废弃：页面仅承载通用原文组件，后续接入新接口再赋值。
+const reportData = ref([]);
 
-const handleBack = () => {
-	router.back();
+const handleDownload = () => {
+	// 后续接入新接口/下载逻辑
 };
-
-onMounted(() => {
-	getBillFullTextFn();
-});
 </script>
 
 <style lang="scss" scoped>
 .bill-original-text-page {
 	width: 100%;
-	box-sizing: border-box;
-	background: rgba(248, 249, 250, 1);
-	padding: 0 0 20px;
-
-	.page-header {
-		width: 100%;
-		height: 64px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.page-title {
-			color: rgba(59, 65, 75, 1);
-			font-family: Microsoft YaHei;
-			font-size: 18px;
-			font-weight: 700;
-		}
-
-		.page-actions {
-			display: flex;
-			justify-content: flex-end;
-
-			.action-btn {
-				cursor: pointer;
-				height: 32px;
-				line-height: 32px;
-				padding: 0 12px;
-				border-radius: 6px;
-				border: 1px solid rgba(230, 231, 232, 1);
-				background: rgba(255, 255, 255, 1);
-				color: rgba(95, 101, 108, 1);
-				font-family: Microsoft YaHei;
-				font-size: 14px;
-				font-weight: 400;
-			}
-		}
-	}
-
-	.page-content {
-		width: 100%;
-		height: calc(100vh - 320px);
-		min-height: 600px;
-		background: #fff;
-		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
-		overflow: hidden;
-
-		iframe {
-			display: block;
-		}
-
-		.empty-state {
-			height: 100%;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: rgba(132, 136, 142, 1);
-			font-family: Microsoft YaHei;
-			font-size: 14px;
-		}
-	}
+	height: 100%;
 }
 </style>