feat:新增通用组件SiderTabs

src/components/base/SiderTabs/active-icon.svg

+<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8.000000" height="8.000000" fill="none" customFrame="#000000">
+	<path id="多边形 2" d="M7.4641 6L0.535898 6L4 0L7.4641 6Z" fill="rgb(255,255,255)" fill-rule="evenodd" transform="matrix(0,1,-1,0,8,0)" />
+</svg>

src/components/base/SiderTabs/index.vue

+<template>
+  <div class="sider-tabs-wrapper">
+    <div class="sider-item" 
+    :class="{'sider-item-active': sider.active}" 
+    v-for="sider, index in siderList" :key="index"
+    @click="handleClickSiderItem(sider)"
+    >
+      <div 
+      class="sider-item-text text-primary-65-clor text-tip-1" 
+      :class="{'sider-item-text-active': sider.active}">{{ sider.name }}</div>
+      <div class="sider-item-icon" v-show="sider.active">
+        <img src="./active-icon.svg" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  siderList: {
+    type: Array,
+    default: [
+      {
+        name: '分析内容1',
+        active: true
+      },
+       {
+        name: '分析内容2',
+        active: false
+      },
+       {
+        name: '分析内容3',
+        active: false
+      },
+    ]
+  },
+})
+
+const emits = defineEmits(['clickSiderItem'])
+
+const handleClickSiderItem = (sider) => {
+  emits('clickSiderItem', sider)
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.sider-tabs-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  .sider-item {
+    padding: 4px 28px;
+    border-radius: 16px;
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    .sider-item-icon{
+      position: absolute;
+      top: 6px;
+      right: 16px;
+      width: 8px;
+      height: 8px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.sider-item-active{
+  background: var(--color-main-active);
+}
+
+.sider-item-text-active {
+  color: rgb(255,255,255)
+}
+</style>
\ No newline at end of file

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

 <template>
 	<div class="wrap">
+		<!-- <div class="sider-tab-box">
+			<SiderTabs :siderList="siderTabList" @clickSiderItem="handleClickTabItem" />
+		</div> -->
 		<div class="top">
 			<div class="box1 box" v-loading="box1Loading">
 				<div class="box-header">
@@ -140,6 +143,28 @@ import getSankeyChart from "./utils/sankey";
 import getPieChart from "./utils/piechart";
 import getbarChart from "@/views/bill/utils/barchart";
 import { getSearchCountry, getStatArea, getStatNum, getSearchDirection } from "@/api/marketAccessRestrictions";
+import SiderTabs from "@/components/base/SiderTabs/index.vue"
+
+
+// const siderTabList = ref([
+// 	{
+// 		name: '分析内11111',
+// 		active: false
+// 	},
+// 	{
+// 		name: '分析内2',
+// 		active: true
+// 	},
+// 	{
+// 		name: '分析内3',
+// 		active: false
+// 	},
+// ])
+
+// const handleClickTabItem = (value) => {
+// 	console.log('val',value);
+	
+// }
 
 const selectYear = ref("2025");
 
@@ -315,6 +340,14 @@ onMounted(() => {
 <style lang="scss" scoped>
 .wrap {
 	overflow: hidden;
+	position: relative;
+
+	.sider-tab-box{
+		position: absolute;
+		left: 20px;
+		top: 20px;
+	}
+
 	.box {
 		width: 792px;
 		height: 410px;
@@ -323,10 +356,12 @@ onMounted(() => {
 		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 		background: rgba(255, 255, 255, 1);
 	}
+
 	.box-header {
 		height: 46px;
 		display: flex;
 		position: relative;
+
 		.header-left {
 			margin-top: 18px;
 			width: 8px;
@@ -334,6 +369,7 @@ onMounted(() => {
 			border-radius: 0 4px 4px 0;
 			background: var(--color-main-active);
 		}
+
 		.title {
 			margin-left: 14px;
 			margin-top: 14px;
@@ -344,6 +380,7 @@ onMounted(() => {
 			font-weight: 700;
 			line-height: 26px;
 		}
+
 		.warning-text {
 			position: absolute;
 			top: 16px;
@@ -357,11 +394,13 @@ onMounted(() => {
 			letter-spacing: 0px;
 			text-align: center;
 		}
+
 		.header-select-box {
 			position: absolute;
 			top: 13px;
 			right: 121px;
 		}
+
 		.header-right {
 			position: absolute;
 			top: 14px;
@@ -369,9 +408,11 @@ onMounted(() => {
 			display: flex;
 			justify-content: flex-end;
 			gap: 4px;
+
 			.icon {
 				width: 28px;
 				height: 28px;
+
 				img {
 					width: 100%;
 					height: 100%;
@@ -379,6 +420,7 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.box-footer {
 		margin: 5px auto;
 		width: 759px;
@@ -393,14 +435,17 @@ onMounted(() => {
 		border: 1px solid rgba(231, 243, 255, 1);
 		border-radius: 4px;
 		background: rgba(246, 250, 255, 1);
+
 		.box-footer-left {
 			width: 19px;
 			height: 20px;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
+
 		.box-footer-center {
 			width: 666px;
 			height: 24px;
@@ -412,26 +457,31 @@ onMounted(() => {
 			letter-spacing: 0px;
 			text-align: justify;
 		}
+
 		.box-footer-right {
 			width: 24px;
 			height: 24px;
+
 			img {
 				width: 100%;
 				height: 100%;
 			}
 		}
 	}
+
 	.top {
 		display: flex;
 		justify-content: center;
 		gap: 16px;
 		margin: 16px auto;
+
 		.box1 {
 			.box1-main {
 				height: 304px;
 				// background: orange;
 			}
 		}
+
 		.box2 {
 			.box2-main {
 				height: 304px;
@@ -439,18 +489,21 @@ onMounted(() => {
 			}
 		}
 	}
+
 	.bottom {
 		display: flex;
 		justify-content: center;
 		gap: 16px;
 		margin: 0 auto;
 		margin-bottom: 16px;
+
 		.box3 {
 			.box3-main {
 				height: 304px;
 				// background: orange;
 			}
 		}
+
 		.box4 {
 			.box4-main {
 				height: 304px;