设计一个可交互的Vue组件，该组件包含一个可点击的view元素，用于展示一个动态变化的数字和背景色。 添加一个按钮来重置数字到初始值并恢复默认背景色。 根据背景颜色的亮度动态改变文字颜色，过亮为黑色，过暗为白色

设计一个可交互的Vue组件，你可以创建一个名为`ColorfulCounter.vue`的文件，内容如下：

<template>
  <div class="colorful-counter">
    <div :style="{ backgroundColor: backgroundColor, color: textColor }">
      <button @click="reset">重置</button>
      <span v-text="counter">{{ counter }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
      initialValue: 0, // 初始数值
      backgroundColors: [
        'lightblue', 'orange', 'green', 'pink', 'gray'
      ],
      currentIndex: 0, // 当前背景颜色索引
      textColor: '', // 文字颜色
    };
  },
  computed: {
    backgroundColor() {
      const brightness = this.calculateBrightness();
      if (brightness > 50) {
        this.textColor = 'black';
      } else if (brightness < 50) {
        this.textColor = 'white';
      } else {
        this.textColor = '';
      }
      return this.backgroundColors[this.currentIndex];
    },
    textColor: { // 文字颜色计算属性
      get() {
        return this.textColor;
      },
      set(color) {
        this.$emit('text-color-change', color);
      }
    },
  },
  methods: {
    calculateBrightness() {
      // 可能需要引入一个第三方库来处理颜色的亮度计算
      // 这里仅示例一种简单方法，实际应用中可能更复杂
      const hex = window.getComputedStyle(document.body).backgroundColor.slice(4, -1);
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; // 根据RGB计算亮度
      return luminance;
    },
    reset() {
      this.counter = this.initialValue;
      this.currentIndex = 0; // 重置背景颜色
    },
  },
  watch: {
    counter(newVal, oldVal) {
      // 更新文字颜色以适应新的计数
      this.textColor = '';
    },
  },
  mounted() {
    this.updateBackgroundColor(); // 设置初始背景颜色
  },
  updated() {
    this.updateBackgroundColor();
  },
  methods: {
    updateBackgroundColor() {
      this.currentIndex = (this.currentIndex + 1) % this.backgroundColors.length;
      this.backgroundColor = this.backgroundColors[this.currentIndex];
    },
  },
};
</script>

<style scoped>
.colorful-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

这个组件包含了以下几个关键点：

1. `counter`变量表示动态数字。
2. 使用`:style`绑定动态背景颜色和文本颜色。
3. `calculateBrightness`函数计算背景颜色的亮度。
4. `reset`方法重置数字和背景。
5. 观察`counter`的变化更新文字颜色。
6. `updateBackgroundColor`定期切换背景颜色。

要在其他地方使用这个组件，只需将其导入并作为子组件使用，并通过事件`text-color-change`监听文字颜色的变化。