styles:组件命名更新

src/components/SearchContainer.vue

 <template>
 	<div class="search-container" v-show="!isShow">
-		<div class="search-main">
-			<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch" class="search-input" />
+		<div class="search-type-tabs" v-if="enableBillTypeSwitch">
+			<div class="search-type-tab" :class="{ active: billSearchType === 'federal' }"
+				@click="handleChangeBillSearchType('federal')">
+				联邦议会
+			</div>
+			<div class="search-type-tab" :class="{ active: billSearchType === 'state' }"
+				@click="handleChangeBillSearchType('state')">
+				州议会
+			</div>
+		</div>
+		<div class="search-main" :class="{ 'search-main-with-tabs': enableBillTypeSwitch }">
+			<input v-model="store.searchBillText" :placeholder="placeholder" @keyup.enter="handleSearch"
+				class="search-input" />
 			<div class="search-btn" @click="handleSearch">
 				<img src="@/assets/icons/search-icon.png" alt />
 				搜索
@@ -43,19 +54,26 @@
 </template>
 
 <script setup>
-import { ref, nextTick, watchEffect, onMounted } from "vue";
+import { ref, nextTick, watchEffect } from "vue";
 import { useContainerScroll } from "@/hooks/useScrollShow";
 import { useRouter } from "vue-router";
 import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
 
 const store = useWrittingAsstaintStore();
 const router = useRouter();
-let { countInfo, containerRef, placeholder, areaName } = defineProps({
+
+const {
+	countInfo,
+	containerRef,
+	placeholder,
+	areaName,
+	enableBillTypeSwitch,
+	defaultBillSearchType
+} = defineProps({
 	countInfo: {
 		type: Array,
 		default: () => []
 	},
-
 	containerRef: {
 		type: Object,
 		default: {}
@@ -67,18 +85,48 @@ let { countInfo, containerRef, placeholder, areaName } = defineProps({
 	areaName: {
 		type: String,
 		default: "法案"
+	},
+	// 法案页专用：是否展示“联邦议会/州议会”搜索类型切换
+	// 其他页面默认 false，不受影响
+	enableBillTypeSwitch: {
+		type: Boolean,
+		default: false
+	},
+	// 法案页专用：默认搜索类型
+	// 可选值：'federal'（联邦议会）| 'state'（州议会）
+	defaultBillSearchType: {
+		type: String,
+		default: "federal"
 	}
 });
+
+// 法案搜索类型状态（仅在 enableBillTypeSwitch=true 时生效）
+// 维护说明：
+// - federal: 联邦议会
+// - state: 州议会
+const billSearchType = ref(defaultBillSearchType === "state" ? "state" : "federal");
+
+const handleChangeBillSearchType = type => {
+	billSearchType.value = type;
+};
+
 const handleSearch = () => {
 	window.sessionStorage.setItem("curTabName", `搜索-${store.searchBillText}`);
 	if (!areaName) return;
 
+	const query = {
+		searchText: store.searchBillText,
+		areaName: areaName
+	};
+
+	// 法案页附带搜索类型参数，便于搜索结果页后续按类型处理
+	if (enableBillTypeSwitch) {
+		query.billSearchType = billSearchType.value;
+	}
+
 	const curRoute = router.resolve({
 		path: "/searchResults",
-		query: {
-			searchText: store.searchBillText,
-			areaName: areaName
-		}
+		query
 	});
 	window.open(curRoute.href, "_blank");
 };
@@ -90,17 +138,17 @@ watchEffect(() => {
 	if (isShow.value) {
 		homeMainRef.value.classList.add("scroll-main");
 		homeMainRef.value.classList.add("scrollHomeMain");
-		
+
 	} else {
 		homeMainRef.value.classList.remove("scroll-main");
 		homeMainRef.value.classList.remove("scrollHomeMain");
 
 	}
-	
+
 	store.changeIsShowSearchBar(isShow.value);
 });
 
-store.setSearchData({ placeholder, areaName,containerRef:homeMainRef });
+store.setSearchData({ placeholder, areaName, containerRef: homeMainRef });
 // 锚点跳转
 const handleToPosi = id => {
 	const element = document.getElementById(id);
@@ -131,6 +179,43 @@ const handleToPosi = id => {
 	width: 960px;
 	height: 168px;
 	margin: 0 auto 68px auto;
+
+	.search-type-tabs {
+		display: flex;
+		align-items: flex-end;
+		height: 41px;
+		gap: 2px;
+
+		.search-type-tab {
+			width: 176px;
+			height: 41px;
+			line-height: 48px;
+			text-align: center;
+			border-radius: 10px 10px 0 0;
+			border: 1px solid rgb(255, 255, 255);
+			border-bottom: none;
+			background: rgba(255, 255, 255, 0.65);
+			color: rgb(95, 101, 108);
+			font-family: Microsoft YaHei;
+			font-size: 18px;
+			font-weight: 700;
+			line-height: 41px;
+			cursor: pointer;
+			padding: 0 16px;
+			box-sizing: border-box;
+		}
+
+		.search-type-tab.active {
+			background: rgba(231, 243, 255, 1);
+			color: rgb(5, 95, 194);
+			border-color: rgb(255, 255, 255);
+		}
+	}
+
+	.search-main-with-tabs {
+		border-top-left-radius: 0 !important;
+	}
+
 	.search-center {
 		width: 688px;
 		height: 48px;
@@ -170,6 +255,7 @@ const handleToPosi = id => {
 			}
 		}
 	}
+
 	.search-main {
 		display: flex;
 		padding-right: 3px;
@@ -181,9 +267,11 @@ const handleToPosi = id => {
 		background-color: rgba(255, 255, 255, 0.65);
 		border-radius: 10px;
 		border: 1px solid #fff;
+
 		&:hover {
 			border: 1px solid var(--color-main-active);
 		}
+
 		.search-input {
 			border: none;
 			outline: none;
@@ -201,6 +289,7 @@ const handleToPosi = id => {
 				color: #a8abb2;
 			}
 		}
+
 		.search-btn {
 			cursor: pointer;
 			display: flex;
@@ -216,6 +305,7 @@ const handleToPosi = id => {
 			font-family: "Microsoft YaHei";
 			line-height: 22px;
 			color: #fff;
+
 			img {
 				width: 18px;
 				height: 18px;
@@ -223,6 +313,7 @@ const handleToPosi = id => {
 			}
 		}
 	}
+
 	.search-bottom {
 		width: 688px;
 		height: 48px;
@@ -230,6 +321,7 @@ const handleToPosi = id => {
 		margin-top: 36px;
 		display: flex;
 		justify-content: space-between;
+
 		// gap: 16px;
 		.btn {
 			display: flex;
@@ -243,9 +335,11 @@ const handleToPosi = id => {
 			background: #e7f3ff;
 			cursor: pointer;
 			position: relative;
+
 			&:hover {
 				background: #cae3fc;
 			}
+
 			.btn-text {
 				width: 80px;
 				color: var(--color-main-active);
@@ -256,12 +350,14 @@ const handleToPosi = id => {
 				margin-left: 36px;
 				text-align: center;
 			}
+
 			.btn-icon {
 				position: absolute;
 				top: 16px;
 				right: 19px;
 				width: 6px;
 				height: 12px;
+
 				img {
 					width: 100%;
 					height: 100%;