Add new components for login and comment functionality

components/kl-tab-bar/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-tabs
+    v-model="tabActive"
+    :class="['demo-tabs', { 'no-border': !border, 'page-header': pageHeader }]"
+    :before-leave="() => !loading"
+    @tab-change="handleChange"
+  >
+    <el-tab-pane v-for="(item, index) in data" :key="index" :label="item.label" :name="item.value">
+      <template v-if="showNum" #label>
+        <img v-if="item.value === tabActive && showIcon" src="@/assets/images/2.png" alt="" srcset="" class="mr-7px" />
+        <span>{{ item.label }}</span>
+        <el-badge :value="item.num" class="item" :max="9999999999999" :hidden="!item.num" />
+      </template>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script lang="ts" setup>
+  import type { TabPaneName } from 'element-plus'
+  import type { PropType } from 'vue'
+  import { computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    border: {
+      //是否显示底边框
+      type: Boolean,
+      default: false,
+    },
+    showNum: {
+      //显示数量
+      type: Boolean,
+      default: true,
+    },
+    pageHeader: {
+      //是否是页面头部
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: [Number, String],
+      default: 0,
+    },
+    /**切换是否是路由模式，true则会跳转到对应value值中的路由页面*/
+    route: {
+      type: Boolean,
+      default: false,
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+  })
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: number | string): void
+    (e: 'change', value: TabPaneName): void
+  }>()
+  const tabActive = computed({
+    get() {
+      return props.modelValue
+    },
+    set(val) {
+      emits('update:modelValue', val)
+    },
+  })
+  const handleChange = (name: TabPaneName) => {
+    if (props.route && name) {
+      router.push(name as string)
+      return
+    }
+    emits('change', name)
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+  }
+  .no-border :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+  :deep(.el-tabs__header) {
+    margin-bottom: 10px;
+  }
+  :deep(.el-tabs__item) {
+    height: auto;
+    padding-bottom: 8px;
+    color: #333333;
+    font-size: 20px;
+    margin-right: 40px;
+  }
+  :deep(.el-tabs__item > span) {
+    margin-right: 2px;
+  }
+  .page-header {
+    padding: 6px 10px 8px;
+    :deep(.el-tabs__header) {
+      margin-bottom: 0;
+    }
+  }
+  .page-header :deep(.el-tabs__item) {
+    font-size: 15px;
+  }
+  :deep(.el-tabs__item.is-active),
+  :deep(.el-tabs__item:hover) {
+    color: #1a65ff !important;
+  }
+  .page-table-wrap > .el-tabs.el-tabs--top :deep(.el-tabs__active-bar.is-top) {
+    height: 2px;
+    background-color: transparent;
+    padding: 0;
+    box-sizing: border-box !important;
+  }
+  .page-table-wrap > .el-tabs.el-tabs--top :deep(.el-tabs__active-bar.is-top::before) {
+    content: '';
+    height: 2px;
+    display: block;
+    background: $color-primary;
+    width: var(--actbar-w);
+  }
+  .page-header :deep(.el-tabs__item.is-active) {
+    font-weight: 600;
+  }
+  .page-header :deep(.el-tabs__active-bar.is-top) {
+    height: 4px;
+    background-color: transparent;
+    padding: 0;
+    box-sizing: border-box !important;
+  }
+  .page-header :deep(.el-tabs__active-bar.is-top::before) {
+    content: '';
+    border-radius: 2px;
+    height: 4px;
+    width: 20px;
+    display: block;
+    background: $color-primary;
+    margin: auto;
+  }
+  :deep(.el-badge) {
+    display: flex;
+  }
+</style>

components/kl-tab-bar/v2/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-button v-for="(item, index) in props.data" :key="index" :type="modelValue === item.value ? 'primary' : ''" @click="handleChange(item)">{{
+    item.label
+  }}</el-button>
+</template>
+
+<script lang="ts" setup>
+  import  type{ PropType } from 'vue'
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
+      default: () => [],
+    },
+  })
+
+  const emits = defineEmits(['change'])
+
+  const modelValue = defineModel<number | string>('modelValue', {
+    required: true,
+  }) // 双向绑定的value
+
+  const handleChange = (value: { value: string | number; [key: string]: any }) => {
+    modelValue.value = value.value
+    emits('change', value)
+  }
+</script>