第一题：动态tab栏目

.buttons {
  ......

  /* TODO: 请在此补充代码实现tab栏动态固定 */
  position: sticky;
  top: 0;
}

第二题：地球漫游

.earth-con {
    ......

    /* TODO:待补充代码，添加动画 */
    animation: orbit 36.5s linear infinite;
}

第三题：迷惑的this

  //事件处理函数
  handle() {
    // TODO：待补充代码  
    this.inputEl.addEventListener('input',this.handleInput.bind(this),false)
  },

第四题：魔法失灵了

//TODO：待修复代码
      // let { value } = { ...data };
      let { value } = toRefs(data);
      function update(val) {
        value = val;
      }

第五题：燃烧你的卡路里

目标1：

<!-- 抽屉 start -->
    <!-- TODO：待补充代码，点击按钮时显示抽屉组件 -->
    <el-drawer v-model="drawer" title="我是标题" :with-header="false" size="60%"  :direction="direction">

    ......

      </div>
    </el-drawer>

const submit = async () => {
      // TODO 待添加的代码 功能显示抽屉组件
      drawer.value = true;
        ......
    };

 目标2：

    const sortItem = (arr, pro, compare) => {
      // TODO 根据 compare 匹配食材对象后返回这个对象
      let result = arr.sort((a, b) => {
        return b[pro] - a[pro];
      });
      for (const item of result) {
        if (item[pro] < compare) {
          return item;
        }
      }
    };

第六题：司龄统计

目标1：

// 按照年龄分组的函数
const groupByAge = (peoples) => {
  // TODO:待补充代码，按照年龄进行分组
  const age_group = {};
  peoples.map((item) => {
    return (age_group[item.age] = []);
  });
  for (const item of peoples) {
    age_group[item.age].push(item)
  }
  return age_group
};

目标2： 

const app = Vue.createApp({
  setup() {
    const { updateData } = useECharts();
    let xAxisData = Vue.ref([]); // X 轴数据，司龄从小到大排列
    let seriesData = Vue.ref([]); // Y 轴数据，司龄对应的人数
    const groupedPeople = Vue.ref([]); // table 中显示的数据
    Vue.onMounted(async () => {
      const data = await (await fetch("./mock/data.json")).json();
      groupedPeople.value = groupByAge(data); //把请求回来的数据变成需要的数据格式
      // TODO: 设置 Echars X 轴数据 xAxisData 和 Y 轴数据 seriesData
      let age_result = data.sort((a, b) => {
        return a.age - b.age;
      });
      xAxisData.value = [...new Set(age_result.map((item) => item.age))];

      for (let key in groupedPeople.value) {
        seriesData.value.push(groupedPeople.value[key].length);
      }

      // 更新 echars 数据
      updateData(xAxisData.value, seriesData.value);
    });

第七题：不翼而飞的余额

目标1：

<script>
      const { createApp } = Vue;
      const { createPinia } = Pinia;
      const { createRouter, createWebHistory } = VueRouter; // TODO：待补充代码，在此引入路由相关 API
      const app = createApp({});
      app.use(createPinia());

      const router = createRouter({
        // TODO:待补充代码，为项目配置 history 模式的路由
        history: createWebHistory(),
        routes: [
          {
            path: "/",
            component: WalletPage,
          },
          {
            path: "/deposit",
            component: DepositPage,
          },
        ],
      });

      app.use(router);
      // 注册组件
      app.mount("#app");
    </script>

目标2/3：

<!-- TODO：待补充代码，在 # deposit-balance 中正确显示钱包余额  -->  
    <span id="deposit-balance">{{store.balance}}</span>

// TODO：待补充代码，完善点击存款按钮事件
    function deposit() {
      store.balance += depositAmount.value
      depositAmount.value = "";
    }
    return {
      depositAmount,
      store,
      deposit
    }

第八题：个性化推荐

req.on("end", () => {
  let { interested = [] } = qs.parse(body);
  // TODO: 补充个性化页面处理代码
  let html = ''
  interested = Array.isArray(interested) ? interested : [interested]
  if(interested.length) {
    let obj = data.reduce((p, c) => (p[c.tag] = c, p), {})
    interested = Array.from(new Set(interested.reduce((p, c) => (p.push(...obj[c].relevance), p), [...interested]))).map(item => obj[item])
    html = interested.map(item => `
    <div class="interest">
      <div class="tag">${item.tag}</div>
      <div>${item.content}</div>
    </div>`).join('')
  } else {
    html = '<div class="unselect">你还未选择任何感兴趣的标签！</div>'
  }
  let customizedPage = fs.readFileSync(path.join(__dirname, '../customized.html'), 'utf-8')
  customizedPage = customizedPage.replace('<body></body>', `<body>${html}</body>`)
  res.writeHead(200, { 'Content-Type': 'text/html' })
  res.write(customizedPage)
  res.end()
});

第九题：贪吃蛇

  // 移动蛇的头部
  nextStep() {
    // TODO：待补充代码
    let old_head = this.snakeBody[0];
    let new_head = {};
    switch (this.direction) {
      case "right": // 右
        new_head = {
          left: old_head.left + this.size,
          top: old_head.top,
        };
        break;
      case "down": // 下
        new_head = {
          left: old_head.left,
          top: old_head.top + this.size,
        };
        break;
      case "left": //左
        new_head = {
          left: old_head.left - this.size,
          top: old_head.top,
        };
        break;
      case "up": //上
        new_head = {
          left: old_head.left,
          top: old_head.top - this.size,
        };
        break;
    }
    this.snakeBody.unshift(new_head)
    this.snakeBody.pop()
  }

第十题：自定义表单验证

目标1： 

  setup(props, { emit }) {
    const inputValue = ref(props.value);
    const holder = ref(props.holder);

    //  TODO：目标 1 当输入框的值变化时，触发 input 事件更新父组件的 v-model 值
    watch(inputValue, (event) => emit("update:modelValue", event));
    //  TODO：end

    return {
      inputValue,
      holder,
    };
  },

目标2： 

/** 邮箱验证函数
 * @param {string} val  邮箱地址
 * @return {boolean}
 */
const is_email = (val) => {
  // TODO：目标 2 待补充代码
  return /^\w+@\w+\.[a-zA-Z]{2,4}$/.test(val);
};

目标3： 

// TODO：目标 3 编写通用的表单验证规则，并将错误信息放置到 errors 对象中
    const { rules, formData } = props;
    for (const key in rules) {
      const r = rules[key];
      const val = formData[key];

      for (const rule of r) {
        if (rule.validator && typeof rule.validator == "function") {
          rule.validator(rule, val, (e) => {
            if (e) errors.value[key] = e.message;
          });
        }
        if (rule.required && val == "") {
          !errors.value[key] && (errors.value[key] = rule.message);
        }
        if (rule.type) {
          let isTrue = validateByType(rule.type, val);
          if (!isTrue && !errors.value[key]) {
            errors.value[key] = rule.message;
          }
        }
        if (val < rule.min || val > rule.max) {
          !errors.value[key] && (errors.value[key] = rule.message);
        }
      }
    }
        // TODO：END