cfc/cfc-frontend/components/TagChip.vue

<template>
  <view
    class="tag-chip"
    :class="['tag-chip--' + variant, { 'is-active': active }]"
    @select="onTap"
  >
    <text class="tag-chip__label">{{ label }}</text>
  </view>
</template>

<script>
/**
 * TagChip — 单选/多选标签胶囊
 *
 * 抽取自 diet-checkin / exercise-checkin / diet-index / exercise-index 的
 * .tag-btn + .tag-active 重复样式（F 批 · 重复模式组件化）。
 *
 * Props:
 *   label    — 文案
 *   active   — 是否选中
 *   variant  — 'brand'（成长记录页，品牌橙选中态）| 'body'（身维度首页，身体维度色选中态）
 * Events:
 *   select   — 点击（用 select 而非 tap，避免与小程序原生 tap 冒泡重复触发）
 */
export default {
  name: 'TagChip',
  props: {
    label: { type: String, default: '' },
    active: { type: Boolean, default: false },
    variant: { type: String, default: 'brand' }
  },
  methods: {
    onTap() {
      this.$emit('select')
    }
  }
}
</script>

<style scoped lang="scss">
.tag-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 24rpx;
  border: 2rpx solid $facade-fill-4;
  border-radius: 30rpx;
  background: $facade-fill-ghost;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.tag-chip__label {
  font-size: 26rpx;
  color: $facade-text-body;
}

.tag-chip.is-active {
  border-color: $brand-primary;
  background: $fortune-1-tint;
  box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.15);
}

.tag-chip.is-active .tag-chip__label {
  color: $brand-primary;
  font-weight: 600;
}

/* ---- 身维度首页（饮食/运动）选中态 ---- */
.tag-chip--body {
  border-width: 1rpx;
  border-color: $facade-border-soft;
  border-radius: 30rpx;
  background-color: $facade-fill-ghost;
  transition: none;
}

.tag-chip--body .tag-chip__label {
  font-size: 24rpx;
}

.tag-chip--body.is-active {
  border-color: $dim-body;
  background-color: $flat-card;
  box-shadow: none;
}

.tag-chip--body.is-active .tag-chip__label {
  color: $dim-body;
  font-weight: 400;
}
</style>