feat: - 增加结算页面的图表，用于统计打字准确率和速度。

- 实现图表历史数据，每次结算都可以与上次的打字记录进行对比。

README.md

@@ -5,6 +5,9 @@
 
 整个项目包含前端和后端，前端 Vue3 + Vite，后端使用 Koa2 + [Leancloud](https://leancloud.cn)。该项目是前端部分，后端也将在未来开源。
 
+### 2024.4.7
+- 增加结算页面的图表，用于统计打字准确率和速度。
+- 实现图表历史数据，每次结算都可以与上次的打字记录进行对比。
 ### 2024.4.2
 - **[比一比](https://typing.yasinchan.com/game)功能基本完成！**
 ### 2024.3.8

package.json

@@ -16,6 +16,7 @@
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
     "dayjs": "^1.11.10",
+    "echarts": "^5.5.0",
     "fontfaceobserver": "^2.3.0",
     "jdenticon": "^3.2.0",
     "js-cookie": "^3.0.5",
@@ -26,6 +27,7 @@
     "pinyin-pro": "^3.15.4",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.3.4",
+    "vue-echarts": "^6.6.9",
     "vue-router": "^4.2.2",
     "vue3-colorpicker": "^2.2.3"
   },

src/common/chart.ts

@@ -0,0 +1,46 @@
+import YStorage from '@/common/YStorage';
+
+// 处理图表数据，包括存储到本地缓存
+export function handleChart(typingChartRecord: any, currentTitle: string) {
+  let typingChartSpeed = [];
+  let lastTypingChartSpeed = [];
+  let typingChartAccuracy = [];
+  let lastTypingChartAccuracy = [];
+  if (typingChartRecord && typingChartRecord.speed) {
+    typingChartSpeed = typingChartRecord.speed;
+    const yStorage = YStorage.get('Y_STORAGE') || {};
+
+    if (yStorage.typingChartSpeed && yStorage.typingChartSpeed[currentTitle]) {
+      lastTypingChartSpeed = yStorage.typingChartSpeed[currentTitle] || [];
+    }
+
+    YStorage.set(
+      'Y_STORAGE',
+      Object.assign(yStorage, {
+        typingChartSpeed: { [currentTitle]: typingChartSpeed }
+      })
+    );
+  }
+  if (typingChartRecord && typingChartRecord.accuracy) {
+    typingChartAccuracy = typingChartRecord.accuracy;
+    const yStorage = YStorage.get('Y_STORAGE') || {};
+
+    if (yStorage.typingChartAccuracy && yStorage.typingChartAccuracy[currentTitle]) {
+      lastTypingChartAccuracy = yStorage.typingChartAccuracy[currentTitle] || [];
+    }
+
+    YStorage.set(
+      'Y_STORAGE',
+      Object.assign(yStorage, {
+        typingChartAccuracy: { [currentTitle]: typingChartAccuracy }
+      })
+    );
+  }
+
+  return {
+    typingChartSpeed,
+    lastTypingChartSpeed,
+    typingChartAccuracy,
+    lastTypingChartAccuracy
+  };
+}

src/components/ResultContent.vue

@@ -4,6 +4,7 @@ import { reactive, computed, onMounted, onUnmounted, inject } from 'vue';
 // components
 import Tooltip from '@/components/ui/Tooltip.vue';
 import YButton from '@/components/ui/Button.vue';
+import Chart from '@/components/chart/Chart.vue';
 
 // types
 import type { TypingRecordType, TypingRecordItemType } from '@/types';
@@ -34,6 +35,10 @@ const props = defineProps<{
   isPositive?: boolean; // 是否是正向计时
   type?: string;
   showSaveRecord?: boolean;
+  chartSpeed?: number[];
+  lastChartSpeed?: number[];
+  chartAccuracy?: number[];
+  lastChartAccuracy?: number[];
 }>();
 const emit = defineEmits(['restart']);
 const state = reactive({
@@ -299,24 +304,41 @@ async function record() {
 }
 </script>
 <template>
-  <div class="result-content flex-center" :content="state.accuracyInfo">
-    准确率：<span class="result-content--main-color">{{ state.accuracy }}</span>
-    <Tooltip class="cursor-pointer result-content__tips" :content="state.accuracyInfo">
-      <IcoTips></IcoTips>
-    </Tooltip>
-  </div>
-  <div class="result-content flex-center">
-    速度：<span class="result-content--main-color">{{ state.speed }}</span>
-    <Tooltip
-      class="cursor-pointer result-content__tips"
-      content="速度的计算规则为「总字数/总时间(秒)*60」，即每分钟输入的字数，其中总字数包含标点符号，不包括空格。"
-    >
-      <IcoTips></IcoTips>
-    </Tooltip>
-  </div>
-  <div class="result-content flex-center">
-    时长：<span class="result-content--main-color">{{ totalTime.toFixed(1) }}</span> 秒
+  <div class="y-result-content__info flex-center">
+    <div class="result-content flex-center" :content="state.accuracyInfo">
+      准确率：<span class="result-content--main-color">{{ state.accuracy }}</span>
+      <Tooltip class="cursor-pointer result-content__tips" :content="state.accuracyInfo">
+        <IcoTips></IcoTips>
+      </Tooltip>
+    </div>
+    <div class="result-content flex-center">
+      速度：<span class="result-content--main-color">{{ state.speed }}</span>
+      <Tooltip
+        class="cursor-pointer result-content__tips"
+        content="速度的计算规则为「总字数/总时间(秒)*60」，即每分钟输入的字数，其中总字数包含标点符号，不包括空格。"
+      >
+        <IcoTips></IcoTips>
+      </Tooltip>
+    </div>
+    <div class="result-content flex-center">
+      时长：<span class="result-content--main-color">{{ totalTime.toFixed(1) }}</span> 秒
+    </div>
   </div>
+  <Chart
+    v-if="chartAccuracy && chartAccuracy.length"
+    class="y-result-content__chart"
+    :current-data="chartAccuracy"
+    :last-data="lastChartAccuracy"
+    y-name="准确率（%）"
+    title="准确率曲线"
+  ></Chart>
+  <Chart
+    v-if="chartSpeed && chartSpeed.length"
+    :current-data="chartSpeed"
+    :last-data="lastChartSpeed"
+    y-name="速度（字/每分钟）"
+    title="速度曲线"
+  ></Chart>
   <div class="result-content__toolbar flex-center">
     <YButton class="result-content__svg" size="large" @click="restart"
       ><IcoChange></IcoChange>重新开始</YButton
@@ -367,8 +389,19 @@ async function record() {
       >
     </span>
   </div>
+  <div class="y-result-content__bottom">
+    *提醒：
+    <ol>
+      <li>输入记录将会保留在本地，再次尝试同一篇文案时将会与上次对比。</li>
+      <li>「查看回放」可以回放整个过程，还可以加速播放。</li>
+      <li>为避免无意义的数据，「保存记录」需要满足时长大于 15 秒，同时准确率大于 80%。</li>
+    </ol>
+  </div>
 </template>
 <style lang="scss">
+.y-result-content__info {
+  margin-bottom: 40px;
+}
 .result-content__svg {
   &.result-content__svg--disabled {
     svg {
@@ -389,7 +422,7 @@ async function record() {
 .result-content {
   font-size: 20px;
   color: $gray-06;
-  margin-bottom: 40px;
+  margin: 0 20px;
   svg {
     width: 18px;
     height: 18px;
@@ -450,4 +483,16 @@ async function record() {
     color: $main-red;
   }
 }
+.y-result-content__chart {
+  margin-bottom: 40px;
+}
+
+.y-result-content__bottom {
+  margin: 50px 0 20px;
+  font-size: 14px;
+  color: $gray-04;
+  li {
+    margin-left: 20px;
+  }
+}
 </style>