仪表盘首页逻辑

仪表盘首页设计已完成（如下图），现需要对图中每个部分的数据进行查询和填充。具体分为这几个部分

• 顶部卡片：通过 publicCodingExercises.{totalCount,viewerPassedCount}, me.exerciseStatuses.{totalCount,passedCount}, publicGroups.viewerJoinedCount 实现。消息相关接口还没有做好，新消息就写 0。
• 统计图数据：通过 me.exerciseStatuses, me.exerciseStatusesByLang 实现，需要对结果进行映射
• 最近题包和最近题目：使用 localStorage 记录最近访问的题包和题目，可以实现在 data/utils/recent.ts 中，具体实现 useRecent 和 touch 两个函数，前一个用来返回最近列表，后一个用来在访问到题目/题包时更新列表。注意最好使用 vueuse 的 useStorage 访问 localStorage，可参考 src/learning/pages/Coding.vue 中的 onCodeChange 的实现。

另外注意：

1. 最近列表可对题包、题目各存最近10条记录，但首页只显示最近3条；
2. 在 localStorage 中需要存储 id、title/name、题包的 shortMsg，这样这些信息可在首页直接显示、不需要再次网络查询；
3. 注意首页每个题目题包前都有色块，需要在第一次加入最近列表时随机生成颜色，并保持同一个 id 的颜色始终一致。可选颜色列表：gray, red, orange, yellow, green, teal, blue, indigo, purple, pink；
4. 上述需要查询服务器的地方，因为查询都比较独立，直接在页面中 useQuery 即可，不用提取为 use 工具函数。

附图：