feat 搭建架构骨架

src/components/StatusTag.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  label: string
+  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+}
+
+withDefaults(defineProps<Props>(), { variant: 'info' })
+</script>
+
+<template>
+  <span class="status-tag" :class="`status-tag--${variant}`">
+    {{ label }}
+  </span>
+</template>
+
+<style lang="less" scoped>
+.status-tag {
+  display: inline-block;
+  padding: 2px @spacing-sm;
+  border-radius: @radius-sm;
+  font-size: @font-size-sm;
+  line-height: 1.5;
+  white-space: nowrap;
+
+  &--primary {
+    background: @primary-light;
+    color: @primary-color;
+  }
+
+  &--success {
+    background: fade(@success-color, 12%);
+    color: @success-color;
+  }
+
+  &--warning {
+    background: fade(@warning-color, 12%);
+    color: @warning-color;
+  }
+
+  &--danger {
+    background: fade(@danger-color, 12%);
+    color: @danger-color;
+  }
+
+  &--info {
+    background: @bg-color;
+    color: @text-color-secondary;
+  }
+}
+</style>