CSS 优先 + 组件薄封装：一个 10KB 组件库的极简实践

┌─────────────────────────────────────────────────────────────┐
│                     设计令牌层（自动生成）                    │
│  ┌─────────────────────┐    ┌─────────────────────────────┐ │
│  │    colors.css       │    │       layout.css            │ │
│  │  颜色令牌（40+变量） │    │  布局令牌（间距/字体/动效）  │ │
│  │  【组件库的API层】   │    │                             │ │
│  └──────────┬──────────┘    └─────────────┬───────────────┘ │
│             └──────────────┬──────────────┘                 │
│                            ↓                                │
│                     组件样式层（手写）                        │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                 components.css                       │   │
│  │      组件类（.mg-button, .mg-card, .mg-input）        │   │
│  │              引用 var(--ui-*) 令牌                    │   │
│  └──────────────────────────┬──────────────────────────┘   │
│                             ↓                               │
│                      入口层（手写）                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    main.css                          │   │
│  │  导入三个文件 + 全局重置 + 极简工具类                  │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

<script setup lang="ts">
import { useSlots, computed } from "vue";

const slots = useSlots();
const hasIconSlot = computed(() => !!slots.icon);

type Variant = "filled" | "outline";
type Color = "primary" | "success" | "warning" | "error";
type Size = "xs" | "sm" | "md" | "lg";

interface Props {
  label?: string;
  variant?: Variant;
  color?: Color;
  size?: Size;
  disabled?: boolean;
  loading?: boolean;
  block?: boolean;
  icon?: string;
}

const props = withDefaults(defineProps<Props>(), {
  label: "",
  variant: "filled",
  color: "primary",
  size: "md",
  disabled: false,
  loading: false,
  block: false,
  icon: "",
});

const emit = defineEmits<{ click: [event: MouseEvent] }>();

const handleClick = (event: MouseEvent) => {
  if (props.disabled || props.loading) return;
  emit("click", event);
};
</script>

<template>
  <button
    class="mg-button"
    :class="[
      `mg-button-${variant}-${color}`,
      `mg-button-${size}`,
      { 'mg-button-block': block, 'mg-button-loading': loading },
    ]"
    :disabled="disabled || loading"
    :aria-busy="loading"
    :aria-disabled="disabled || loading"
    @click="handleClick"
  >
    <span v-if="loading" class="mg-button-loading-icon" />
    <span v-if="!loading && (hasIconSlot || icon)" class="mg-button-icon">
      <slot name="icon">
        <span v-if="icon">{{ icon }}</span>
      </slot>
    </span>
    <span class="mg-button-label">
      <slot>{{ label }}</slot>
    </span>
  </button>
</template>

<!-- 用户自定义颜色，无需修改组件源码 -->
<Button :style="{ '--btn-bg': '#ff6b6b' }" class="custom-button">
  自定义颜色
</Button>

/* components.css 中增加一行支持 */
.mg-button {
  background-color: var(--btn-bg, var(--ui-primary));
}

<template>
  <!-- 基础用法 -->
  <Button label="默认按钮" />

  <!-- 带图标 -->
  <Button icon="🔍" label="搜索" />

  <!-- 加载状态（自动禁用点击） -->
  <Button loading label="提交中" />

  <!-- 块级按钮 -->
  <Button block label="全宽按钮" />

  <!-- 完整组合 -->
  <Button variant="outline" color="error" size="lg" block :loading="isDeleting">
    删除项目
  </Button>
</template>

/* 布局 */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}

/* 间距（基于设计令牌） */
.gap-2 {
  gap: var(--ui-spacing-sm);
}
.p-4 {
  padding: var(--ui-spacing-lg);
}
.mx-auto {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* 尺寸 */
.w-full {
  width: 100%;
}

/* 响应式补丁（5 行解决 80% 移动端适配） */
@media (max-width: 768px) {
  .sm-hidden {
    display: none !important;
  }
  .sm-flex-col {
    flex-direction: column !important;
  }
}