Add new components for login and comment functionality

components/kl-tag/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="kl-tag"
+    :style="{
+      color,
+      background: bgColor,
+      borderRadius,
+      border: showBorder ? '1px solid' : '',
+      borderColor: borderColor ? borderColor : color,
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue'
+  defineProps({
+    color: {
+      //文字颜色
+      type: String as PropType<string>,
+      default: '#3A84F0',
+    },
+    bgColor: {
+      //背景色
+      type: String as PropType<string>,
+      default: '#EAF1FF',
+    },
+    showBorder: {
+      //是否需要边框
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+    borderColor: {
+      //边框颜色
+      type: String as PropType<string>,
+      default: '',
+    },
+    borderRadius: {
+      //圆角大小
+      type: String as PropType<string>,
+      default: '4px',
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kl-tag {
+    display: inline-block;
+    font-size: 12px;
+    padding: 1px 4px;
+  }
+</style>