styles:组件命名更新

src/components/RiskSignal/RiskSignal.vue

@@ -9,7 +9,8 @@
         <div class="num">{{ list.length }}</div>
       </div>
     </div>
-    <div class="box2-main">
+    <div class="box2-main" v-infinite-scroll="loadMore" :infinite-scroll-disabled="allLoaded || loading"
+      :infinite-scroll-distance="10" v-loading="loading">
 
       <div class="box2-main-item" v-for="(item, index) in list" :key="index" @click="handleItemClick(item, index)">
         <div :class="{
@@ -37,6 +38,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { ElMessage } from "element-plus";
 // 接收父组件传递的参数
 const props = defineProps({
@@ -72,11 +74,19 @@ const props = defineProps({
     type: String,
     default: "riskLevel"
   },
+  allLoaded: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
 
 });
 
 // 定义自定义事件，把点击事件传递给父组件
-const emit = defineEmits(['item-click', 'more-click']);
+const emit = defineEmits(['item-click', 'more-click', 'loadMore']);
 
 // 点击单条风险信号
 const handleItemClick = (item, index) => {
@@ -85,10 +95,84 @@ const handleItemClick = (item, index) => {
 
 // 点击“查看更多”
 const handleMoreClick = () => {
-
   emit('more-click')
 };
 
+// const allLoaded = ref(false)
+// const loading = ref(false)
+// const currentPage = ref(0)
+// const pageSize = ref(7)
+
+// const loadMore = async () => {
+//   if (allLoaded.value || loading.value) return;
+//   // await fetchListData(true); // 传入 true 表示追加数据
+//   ElMessage.success('追加数据')
+// }
+
+// // 添加初始化函数来获取数据
+// const fetchListData = async (append = false) => {
+//   console.log("加载状态 =>", loading.value, allLoaded.value);
+//   if (loading.value || allLoaded.value) return;
+
+//   try {
+//     loading.value = true;
+
+//     // 调用接口获取数据
+//     const response = await getStrategiesTopN(currentPage.value, pageSize.value, countryName.value);
+
+//     const apiData = response.data || [];
+
+//     // 转换数据格式
+//     const newData =
+//       apiData.content?.map(item => ({
+//         ...item,
+//         img: item.countryImageUrl, // 使用默认图片或根据需要调整
+//         title: item.titleZh,
+//         content: item.contentZh,
+//         time: formatTime(item.date), // 转换时间格式
+//         tagList: item.domains
+//           ? item.domains.slice(0, 2).map(field => ({
+//             name: field,
+//             status: Math.floor(Math.random() * 3) + 1 // 随机分配 1-3 的状态值
+//           }))
+//           : []
+//       })) || [];
+
+//     if (newData.length > 0) {
+//       if (append) {
+//         // 追加数据
+//         list.value = [...list.value, ...newData];
+//       } else {
+//         // 替换数据
+//         list.value = [...newData];
+//       }
+
+//       // 检查是否还有更多数据（根据实际 API 响应调整判断逻辑）
+//       if (newData.length < pageSize.value) {
+//         allLoaded.value = true;
+//       } else {
+//         currentPage.value++;
+//       }
+//     } else {
+//       allLoaded.value = true;
+//     }
+
+//     console.log("获取策略数据成功:", list.value);
+//   } catch (error) {
+//     console.error("获取策略数据失败:", error);
+//     // 错误处理，停止加载状态但不重置数据
+//     if (!append && list.value.length === 0) {
+//       list.value = [];
+//     }
+//   } finally {
+//     loading.value = false;
+//   }
+// };
+
+const loadMore = () => {
+  emit('loadMore')
+}
+
 
 </script>
 

src/components/base/ActionButton/index.vue

+<template>
+  <button class="action-button" :type="type">
+    {{ name }}
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    default: 'normal'
+  },
+  name: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped>
+.action-button {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid rgba(230, 231, 232, 1);
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 26px;
+  font-family: Source Han Sans CN;
+  font-size: 16px;
+  font-weight: 400;
+  transition: all 0.3s;
+}
+
+.action-button[type="normal"] {
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(59, 65, 75, 1);
+}
+
+.action-button[type="active"] {
+  background-color: rgba(231, 243, 255, 1);
+  color: var(--color-main-active);
+  border: 1px solid var(--color-main-active);
+}
+
+
+
+/* 悬停效果
+.action-button[type="normal"]:hover {
+  background-color: #d9d9d9;
+}
+
+.action-button[type="active"]:hover {
+  background-color: #40a9ff;
+} */
+
+
+</style>
\ No newline at end of file

src/components/base/MainButton/MainButton.vue

+<template>
+  <button class="main-button" :type="type">
+    
+  </button>
+</template>
+
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    default: 'normal'
+  },
+  name: {
+    type: String,
+    default: ''
+  }
+})
+</script>
+
+<style scoped>
+.main-button {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid rgba(230, 231, 232, 1);
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 26px;
+  font-family: Source Han Sans CN;
+  font-size: 16px;
+  font-weight: 400;
+  transition: all 0.3s;
+}
+
+.main-button[type="normal"] {
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(59, 65, 75, 1);
+}
+
+.main-button[type="active"] {
+  background-color: rgba(231, 243, 255, 1);
+  color: var(--color-main-active);
+  border: 1px solid var(--color-main-active);
+}
+
+
+
+/* 悬停效果
+.main-button[type="normal"]:hover {
+  background-color: #d9d9d9;
+}
+
+.main-button[type="active"]:hover {
+  background-color: #40a9ff;
+} */
+
+
+</style>
\ No newline at end of file

src/components/base/SourceTabList/index.vue

+<template>
+  <div class="source-tab-list-wrapper" :style="{ width: width }">
+    <div class="tab-item" :class="{ tabItemActive: activeSouceTabId === item.id }" v-for="item, index in sourceTabList"
+      :key="index" @click="handleClcikTab(item)">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '1000px'
+  },
+  sourceTabList: {
+    type: Array,
+    default: [
+    ]
+  },
+  activeSouceTabId: {
+    type: [String, Number],
+    default: ''
+  }
+
+})
+
+const emit = defineEmits('clickTab')
+
+const handleClcikTab = (tab) => {
+  emit('clickTab', tab)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.source-tab-list-wrapper {
+  height: 42px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 12px;
+
+  .tab-item {
+    height: 42px;
+    line-height: 42px;
+    padding: 0 16px;
+    font-size: 20px;
+    font-weight: 400;
+    color: rgba(59, 65, 75, 1);
+    font-family: Source Han Sans CN;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-main-active);
+    }
+  }
+
+  .tabItemActive {
+    background: var(--color-main-active);
+    color: #fff;
+    font-weight: 700;
+    border-radius: 21px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/main.js

@@ -12,16 +12,18 @@ import "./styles/main.css";
 import '@/assets/fonts/font.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
-import AreaTag from '@/components/base/areaTag/AreaTag.vue'
-import leftBtn from "@/components/base/pageBtn/leftBtn.vue";
-import rightBtn from "@/components/base/pageBtn/rightBtn.vue";
-import OverviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
-import OverviewNormalBox from "@/components/base/boxBackground/overviewNormalBox.vue";
-import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
-import NewsList from '@/components/base/newsList/NewsList.vue'
-import ModuleHeader from '@/components/base/moduleHeader/index.vue'
-import RiskSignal from "@/components/base/riskSignal/RiskSignal.vue";
-import MessageBubble from "@/components/base/messageBubble/MessageBubble.vue";
+import AreaTag from '@/components/base/AreaTag/index.vue'
+import LeftBtn from "@/components/base/PageBtn/LeftBtn.vue";
+import RightBtn from "@/components/base/PageBtn/RightBtn.vue";
+import OverviewMainBox from "@/components/base/BoxBackground/OverviewMainBox.vue";
+import OverviewNormalBox from "@/components/base/BoxBackground/OverviewNormalBox.vue";
+import AnalysisBox from '@/components/base/BoxBackground/AnalysisBox.vue'
+import NewsList from '@/components/base/NewsList/index.vue'
+import ModuleHeader from '@/components/base/ModuleHeader/index.vue'
+import RiskSignal from "@/components/base/RiskSignal/index.vue";
+import MessageBubble from "@/components/base/MessageBubble/index.vue";
+import SourceTabLsit from '@/components/base/SourceTabList/index.vue'
+import ActionButton from "@/components/base/ActionButton/index.vue"
 
 // 引入 Pinia 实例
 import pinia from './stores'
@@ -41,8 +43,8 @@ app.use(ElementPlus, {
 app.use(pinia) // 挂载 Pinia
 app.component("CardTitle", CardTitle);
 app.component('AreaTag', AreaTag)  // 领域标签
-app.component('leftBtn', leftBtn)  // 向左按钮 
-app.component('rightBtn', rightBtn)  // 向右按钮
+app.component('LeftBtn', LeftBtn)  // 向左按钮 
+app.component('RightBtn', RightBtn)  // 向右按钮
 app.component('OverviewMainBox', OverviewMainBox)  // 概览页最新动态背景盒子
 app.component('OverviewNormalBox', OverviewNormalBox)  // 概览页一版模块背景盒子
 app.component('AnalysisBox', AnalysisBox)  // 分析页模块背景
@@ -50,5 +52,8 @@ app.component('ModuleHeader', ModuleHeader)  // 模块头部
 app.component('RiskSignal', RiskSignal)  // 风险信号
 app.component('NewsList', NewsList)  // 新闻资讯
 app.component('MessageBubble', MessageBubble)  // 社交媒体
+app.component('SourceTabLsit', SourceTabLsit)  // 资源库tab列表
+app.component('ActionButton', ActionButton)  // 普通按钮和激活按钮
+
 
 app.mount("#app");

src/views/coopRestriction/components/askPage/index.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script setup>
-
+import NewsList from "@/components/NewsList/NewsList.vue";
 import { ref, onMounted } from "vue";
 import router from '@/router'
 import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'

src/views/marketAccessRestrictions/marketAccessHome/index.vue

@@ -265,94 +265,15 @@
 				</div>
 				<DivideHeader id="position2" class="divide-header" :titleText="'资讯要闻'"></DivideHeader>
 				<div class="center-center">
-					<!-- <div class="box3">
-						<div class="box3-header">
-							<div class="box3-header-left">
-								<div class="box3-header-icon">
-									<img src="./assets/images/header-news.png" alt="" />
-								</div>
-								<div class="box3-header-title">{{ "新闻资讯" }}</div>
-								<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
-							</div>
-						</div>
-						<div class="box3-main">
-							<div class="box3-item" v-for="(news, index) in newsList" :key="index" @click="handleToNewsAnalysis(news)">
-								<div class="left">
-									<img :src="news.newsImage ? news.newsImage : DefaultNewsIcon" alt="" />
-								</div>
-								<div class="right">
-									<div class="right-top">
-										<div class="title">{{ news.newsTitle }}</div>
-										<div class="time">{{ news.newsDate + " · " + news.newsOrg }}</div>
-									</div>
-									<!-- <el-popover effect="dark" :width="1000" :content="news.newsContent" placement="top-start">
-										<template #reference>
-											<div class="right-footer">{{ news.newsContent }}</div>
-										</template>
-									</el-popover> --
-									<div class="right-footer">{{ news.newsContent }}</div>
-								</div>
-							</div>
-						</div>
-					</div> -->
 					<NewsList :newsList="newsList" @item-click="handleToNewsAnalysis" @more-click="handleToMoreNews"
 						img="newsImage" title="newsTitle" content="newsContent" from="from" />
 					<MessageBubble :messageList="messageList" @person-click="handleClickPerson" @more-click="handleToSocialDetail"
 						source="orgName" content="remarks" name="personName" imageUrl="personImage">
 					</MessageBubble>
-					<!-- <div class="box4">
-						<div class="box4-header">
-							<div class="header-icon">
-								<img src="./assets/images/header-message.png" alt="" />
-							</div>
-							<div class="header-title">{{ "社交媒体" }}</div>
-						</div>
-						<div class="box4-main">
-							<MessageBubble v-for="(item, index) in messageList" @click="handleClickPerson(item)"
-								@info-click="handleMediaClick(item)" :key="index"
-								:avatar="item.personImage ? item.personImage : DefaultUserIcon" :name="item.personName"
-								:time="item.time" :source="item.orgName" :content="item.remarks" />
-							<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
-								<div class="left" @click="handleClickPerson(item)">
-									<img :src="item.personImage ? item.personImage : DefaultUserIcon" alt="" />
-								</div>
-								<div class="right">
-									<div class="right-top">
-										<div class="name">{{ item.personName }}</div>
-										<div class="time">{{ item.time + " · " + item.orgName }}</div>
-									</div>
-									<div class="content">{{ item.remarks }}</div>
-								</div>
-							</div> --
-						</div>
-					</div> -->
 				</div>
 				<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
 				<div class="center-footer">
 					<div class="box5">
-						<!-- <div class="box5-header">
-							<div class="box5-header-left">
-								<div class="box5-header-icon">
-									<img src="./assets/images/box3-header-icon.png" alt="" />
-								</div>
-								<div class="box5-header-title">{{ "调查数量" }}</div>
-							</div>
-							<div class="box-header-right">
-								<div class="icon">
-									<img src="@/assets/images/icon/header-btn.png" alt="" />
-								</div>
-								<div class="text">{{ "数据来源：美国商务部" }}</div>
-							</div>
-						</div>
-						<div class="box5-main">
-							<div class="box5-main-chart" id="chart1"></div>
-							<div class="box5-main-btn-box">
-								<div class="right-box" :class="{ rightBoxActive: box5BtnActive === item.value }"
-									v-for="(item, index) in box5BtnList" :key="index" @click="handleChangeBox5Btn(item.value)">
-									{{ item.name }}
-								</div>
-							</div>
-						</div> -->
 						<OverviewNormalBox title="调查数量">
 							<template #headerIcon>
 								<img style="width: 100%; height: 100%;" src="./assets/images/box3-header-icon.png" alt="" />
@@ -377,27 +298,6 @@
 						</OverviewNormalBox>
 					</div>
 					<div class="box6">
-						<!-- <div class="box6-header">
-							<div class="header-icon">
-								<img src="./assets/images/box6-header-icon.png" alt="" />
-							</div>
-							<div class="header-title">{{ "制裁领域分布" }}</div>
-							<div class="box-header-right">
-								<div class="icon">
-									<img src="@/assets/images/icon/header-btn.png" alt="" />
-								</div>
-								<div class="text">{{ "数据来源：美国商务部" }}</div>
-							</div>
-						</div>
-						<div class="box6-main">
-							<div class="box6-main-select-box">
-								<el-select v-model="box6SelectedYear" @change="handleChangeBox6Year" placeholder="选择时间"
-									style="width: 120px">
-									<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value" />
-								</el-select>
-							</div>
-							<div class="box6-mian-chart" id="chart2"></div>
-						</div> -->
 						<OverviewNormalBox title="制裁领域分布" width="521px">
 							<template #headerIcon>
 								<img style="width: 100%; height: 100%;" src="./assets/images/box6-header-icon.png" alt="" />
@@ -474,16 +374,10 @@
 					</div>
 				</div>
 			</div>
-
 			<div class="home-main-footer">
 				<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
 				<div class="home-main-footer-header">
-					<div class="btn-box">
-						<div class="btn" :class="{ btnActive: activeCateId === cate.id }" v-for="(cate, index) in categoryList"
-							:key="index" @click="handleClickCate(cate)">
-							{{ cate.name }}
-						</div>
-					</div>
+					<SourceTabList :sourceTabList="categoryList" :activeSouceTabId="activeCateId" @clickTab="handleClickCate"></SourceTabList>
 					<div class="select-box">
 						<div class="paixu-btn" @click="handleSwithSort">
 							<div class="icon1">
@@ -1391,8 +1285,8 @@ const categoryList = ref([
 
 const activeCateId = ref("");
 
-const handleClickCate = cate => {
-	activeCateId.value = cate.id;
+const handleClickCate = item => {
+	activeCateId.value = item.id;
 	handleGetInsList()
 	handleGetSurveyList();
 };
@@ -2820,11 +2714,9 @@ onMounted(async () => {
 						justify-content: flex-end;
 						align-items: center;
 						gap: 8px;
-
 						.icon {
 							width: 14px;
 							height: 16px;
-
 							img {
 								width: 100%;
 								height: 100%;

src/views/marketAccessRestrictions/marketAccessLayout/overview/232/index.vue

@@ -27,7 +27,7 @@
 					<div class="header-left"></div>
 					<div class="title">232调查数量年度变化趋势</div>
 					<div class="header-btn-box">
-						<div
+						<!-- <div
 							class="btn"
 							:class="{ btnActive: btnActiveName === '发起调查' }"
 							@click="handleClickBox1Btn('发起调查')"
@@ -40,7 +40,9 @@
 							@click="handleClickBox1Btn('结束调查')"
 						>
 							{{ "结束调查" }}
-						</div>
+						</div> -->
+						<ActionButton :type="btnActiveName === '发起调查' ? 'active' : 'normal'" name="发起调查" @click="handleClickBox1Btn('发起调查')"></ActionButton>
+						<ActionButton :type="btnActiveName === '结束调查' ? 'active' : 'normal'" name="结束调查" @click="handleClickBox1Btn('结束调查')"></ActionButton>
 					</div>
 					<div class="header-right">
 						<div class="icon">
@@ -293,6 +295,7 @@ onMounted(() => {
 			top: 14px;
 			right: 120px;
 			display: flex;
+			gap: 8px;
 			.btn {
 				margin-left: 8px;
 				height: 28px;