feat(components): 添加按钮标签页组件

src/components/ButtonTabs.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import type { RegionNameList } from '@/types';
+
+interface Props {
+  data: RegionNameList[];
+  selectId: number;
+  width: string;
+  radius: string;
+  tooltip: boolean;
+}
+
+interface ButtonStyle {
+  height: string;
+  width: string;
+  borderRadius: string;
+}
+const emit = defineEmits(['selectClick']);
+const props = defineProps<Props>();
+
+const buttonStyle = ref<ButtonStyle>({
+  height: '32px',
+  width: props.width,
+  borderRadius: props.radius,
+});
+
+const buttonClick = (id: number) => {
+  emit('selectClick', id);
+};
+</script>
+
+<template>
+  <div>
+    <div v-for="item in data" :key="item.id">
+      <div @click="buttonClick(item.id)">
+        <AFlex
+          :class="item.id === selectId ? 'button-tabs-select button-tabs' : 'button-tabs-default button-tabs'"
+          justify="center"
+          align="center"
+          :style="buttonStyle"
+        >
+          <ATooltip v-if="tooltip" :title="item.name">
+            <div class="button-tabs-text">
+              {{ item.name }}
+            </div>
+          </ATooltip>
+          <div v-else class="button-tabs-text">
+            {{ item.name }}
+          </div>
+        </AFlex>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.button-tabs {
+  padding: 0 6px;
+  margin-bottom: 16px;
+  cursor: pointer;
+}
+
+.button-tabs-text {
+  overflow: hidden; /* 隐藏超出容器的内容 */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  text-align: left;
+  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
+  white-space: nowrap; /* 禁止文本换行 */
+}
+
+.button-tabs-default {
+  color: var(--antd-color-primary);
+  background: rgb(50 186 192 / 15%);
+}
+
+.button-tabs-select {
+  color: #fff;
+  background: var(--antd-color-primary);
+}
+</style>