补充部分缺漏

src/views/exportControl/v2.0SingleSanction/originPage/index.vue

@@ -4,22 +4,29 @@
 			<div class="header-title">
 				<img :src="headerTitle.img" alt="" />
 				<div>
-					<div class="title">
-						{{ headerTitle.title }}
-					</div>
-					<div class="department">
-						{{ headerTitle.department }}
-					</div>
+					<div class="title">{{ headerTitle.title }}</div>
+					<div class="department">{{ headerTitle.department }}</div>
 				</div>
 			</div>
 		</div>
 		<div class="main">
 			<div class="main-header">
-				<div>实体清单制裁文件</div>
+				<div class="header-left">实体清单制裁文件</div>
+				<div class="header-right">
+					<!-- 中英文切换开关 -->
+					<div class="toggle-group">
+						<!-- <span :class="{ active: !showChinese }">英文</span> -->
+						<el-switch v-model="showChinese" @change="handleToggleChange" />
+						<img :src="transIcon" alt="" />
+						<span :class="{ active: showChinese }">显示原文</span>
+					</div>
+					<!-- 下载按钮 -->
+					<el-button plain :icon="Download" @click="handleDownload"> 下载 </el-button>
+				</div>
 			</div>
 			<!-- 外层滚动容器，统一控制两侧滚动 -->
 			<div class="report-box" ref="reportBoxRef">
-				<div class="pdf-pane-wrap">
+				<div class="pdf-pane-wrap" v-if="showChinese" :class="{ 'center-mode': !showChinese }">
 					<pdf ref="leftPdfRef" :pdfUrl="headerTitle.srcUrl" class="pdf-pane-inner" />
 				</div>
 				<div class="pdf-pane-wrap">
@@ -31,9 +38,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, computed } from "vue";
+import { Download } from "@element-plus/icons-vue";
 import { getSingleSanctionOverview } from "@/api/exportControlV2.0.js";
 import title from "../assets/title.png";
+import transIcon from "../assets/icon-translation.png";
 import pdf from "./pdf.vue";
 
 const leftPdfRef = ref(null);
@@ -51,6 +60,46 @@ const headerTitle = ref({
 const sanRecordId = ref("");
 const isSyncing = ref(false);
 
+// ✅ 控制中文 PDF 显示
+const showChinese = ref(true);
+
+// ✅ 计算当前显示模式
+const showMode = computed(() => {
+	return showChinese.value ? "both" : "en";
+});
+
+// ✅ 切换中英文显示
+const handleToggleChange = value => {
+	console.log("切换中英文显示:", value ? "中英双栏" : "仅英文");
+	showChinese.value = value;
+};
+
+// ✅ 下载功能
+const handleDownload = async () => {
+	const files = [
+		{ url: headerTitle.value.srcUrl, name: "英文原版.pdf" },
+		{ url: headerTitle.value.transUrl, name: "中文翻译.pdf" }
+	];
+
+	for (const file of files) {
+		if (file.url) {
+			try {
+				const response = await fetch(file.url);
+				const blob = await response.blob();
+				const link = document.createElement("a");
+				link.href = URL.createObjectURL(blob);
+				link.download = file.name;
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+				URL.revokeObjectURL(link.href);
+			} catch (error) {
+				console.error(`下载${file.name}失败:`, error);
+			}
+		}
+	}
+};
+
 const getUrlParams = () => {
 	const urlParams = new URLSearchParams(window.location.search);
 	sanRecordId.value = urlParams.get("id") || "";
@@ -112,7 +161,6 @@ const setupScrollSync = () => {
 watch(
 	() => [headerTitle.value.srcUrl, headerTitle.value.transUrl],
 	() => {
-		// PDF URL 变化时，等待渲染完成后设置滚动监听
 		setTimeout(() => {
 			setupScrollSync();
 		}, 1000);
@@ -124,18 +172,17 @@ onMounted(() => {
 	getUrlParams();
 	getSingleSanctionOverviewData();
 
-	// 等待 DOM 渲染完成后设置滚动监听
 	setTimeout(() => {
 		setupScrollSync();
 	}, 500);
 });
 </script>
-
 <style scoped lang="scss">
-* {
-	margin: 0;
-	padding: 0;
-}
+// * {
+// 	margin: 0;
+// 	padding: 0;
+// }
+
 .entity-list {
 	width: 100%;
 	height: 100%;
@@ -207,9 +254,57 @@ onMounted(() => {
 			font-weight: 700;
 			line-height: 26px;
 			width: 1456px;
-			text-align: left;
 			display: flex;
 			align-items: center;
+			justify-content: space-between;
+
+			.header-right {
+				display: flex;
+				align-items: center;
+				gap: 24px;
+
+				.toggle-group {
+					display: flex;
+					align-items: center;
+					gap: 10px;
+
+					span {
+						font-size: 14px;
+						color: rgb(150, 150, 150);
+						transition: color 0.3s;
+
+						&.active {
+							color: rgb(5, 95, 194);
+							font-weight: 600;
+						}
+					}
+
+					:deep(.el-switch) {
+						--el-switch-on-color: #055fc2;
+						--el-switch-off-color: #e6e7e8;
+
+						.el-switch__label {
+							color: #fff;
+							font-size: 12px;
+							font-weight: 600;
+
+							&.is-active {
+								color: #fff;
+							}
+						}
+					}
+				}
+
+				// :deep(.el-button) {
+				// 	--el-button-bg-color: #055fc2;
+				// 	--el-button-border-color: #055fc2;
+				// 	--el-button-hover-bg-color: #044c9b;
+				// 	--el-button-hover-border-color: #044c9b;
+
+				// 	font-size: 14px;
+				// 	padding: 10px 20px;
+				// }
+			}
 		}
 
 		.report-box {
@@ -217,8 +312,10 @@ onMounted(() => {
 			width: 1456px;
 			height: calc(100% - 64px);
 			display: flex;
-			overflow-y: auto; /* 统一滚动条，控制两侧一起滚动 */
+			overflow-y: auto;
 			overflow-x: hidden;
+			// ✅ 添加居中对齐
+			justify-content: center;
 		}
 
 		.pdf-pane-wrap {
@@ -226,6 +323,15 @@ onMounted(() => {
 			max-width: 50%;
 			height: 100%;
 			min-width: 0;
+			transition: all 0.3s;
+
+			&.center-mode {
+				flex: 0 0 100%;
+				max-width: 100%;
+				// ✅ 添加居中样式
+				width: 728px; // 约一半宽度，保持单栏时美观
+				margin: 0 auto;
+			}
 		}
 
 		.pdf-pane-inner {