perf: 优化结果页

nopdan · Mar 13, 2024 · cf0c915 · cf0c915
1 parent cb2d04b
commit cf0c915
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 182 deletions.
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
@@ -17,10 +17,12 @@ declare module "@vue/runtime-core" {
     CombsDescription: (typeof import("./src/components/Result/CombsDescription.vue"))["default"];
     CombsDistBar: (typeof import("./src/components/Result/CombsDistBar.vue"))["default"];
     ComparedBars: (typeof import("./src/components/Result/comparedBars.vue"))["default"];
+    FingerHeatMap: (typeof import("./src/components/FingerHeatMap.vue"))["default"];
     FingerPie: (typeof import("./src/components/Result/FingerPie.vue"))["default"];
     FingersDescription: (typeof import("./src/components/Result/FingersDescription.vue"))["default"];
     HandComp: (typeof import("./src/components/Result/HandComp.vue"))["default"];
     HandsDescription: (typeof import("./src/components/Result/HandsDescription.vue"))["default"];
+    HeatMap: (typeof import("./src/components/HeatMap.vue"))["default"];
     KeyHeatSorted: (typeof import("./src/components/Result/KeyHeatSorted.vue"))["default"];
     Main: (typeof import("./src/components/Main.vue"))["default"];
     MultiResult: (typeof import("./src/components/MultiResult.vue"))["default"];
@@ -32,7 +34,8 @@ declare module "@vue/runtime-core" {
     NDrawer: (typeof import("naive-ui"))["NDrawer"];
     NDrawerContent: (typeof import("naive-ui"))["NDrawerContent"];
     NFlex: (typeof import("naive-ui"))["NFlex"];
-    NIcon: (typeof import("naive-ui"))["NIcon"];
+    NGi: (typeof import("naive-ui"))["NGi"];
+    NGrid: (typeof import("naive-ui"))["NGrid"];
     NInput: (typeof import("naive-ui"))["NInput"];
     NInputNumber: (typeof import("naive-ui"))["NInputNumber"];
     NMessageProvider: (typeof import("naive-ui"))["NMessageProvider"];
@@ -41,9 +44,6 @@ declare module "@vue/runtime-core" {
     NSelect: (typeof import("naive-ui"))["NSelect"];
     NSwitch: (typeof import("naive-ui"))["NSwitch"];
     NTag: (typeof import("naive-ui"))["NTag"];
-    NText: (typeof import("naive-ui"))["NText"];
-    NUpload: (typeof import("naive-ui"))["NUpload"];
-    NUploadDragger: (typeof import("naive-ui"))["NUploadDragger"];
     Result: (typeof import("./src/components/Result/Result.vue"))["default"];
     ResultBasic: (typeof import("./src/components/Result/ResultBasic.vue"))["default"];
     ResultKeyHeat: (typeof import("./src/components/Result/ResultKeyHeat.vue"))["default"];

diff --git a/frontend/src/components/Data.ts b/frontend/src/components/Data.ts
@@ -108,6 +108,7 @@ export class DataUtils {
 export function New2Old(_new: Data): DataOld {
   const util = new DataUtils(_new);
   const _old: DataOld = {
+    Name: _new.Info.DictName,
     TextName: _new.Info.TextName,
     TextLen: _new.Info.TextLen,
     DictName: _new.Info.DictName,

diff --git a/frontend/src/components/DataOld.ts b/frontend/src/components/DataOld.ts
@@ -1,6 +1,7 @@
 // Generated by https://quicktype.io
 
 export interface DataOld {
+  Name: string;
   TextName: string;
   TextLen: number;
   DictName: string;

diff --git a/frontend/src/components/FingerHeatMap.vue b/frontend/src/components/FingerHeatMap.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Data } from "./Data";
+
+const props = defineProps<{
+  data: Data;
+  colspan: number;
+  name: string;
+  num: number;
+}>();
+</script>
+
+<template>
+  <div
+    class="heat-key"
+    :style="{
+      'background-color': `rgb(80, 80, 255, ${(data.Dist.Finger[num] || 0) / data.Keys.Count / 0.3})`,
+    }"
+  >
+    <div style="font-size: 0.8em; color: #000; white-space: nowrap">{{ name }}</div>
+    <div style="font-size: 0.3em; color: #333; white-space: nowrap">
+      {{ ((data.Dist.Finger[num] / data.Keys.Count) * 100 || 0).toFixed(2) }}
+    </div>
+  </div>
+</template>
+<style scoped></style>
diff --git a/frontend/src/components/HeatMap.vue b/frontend/src/components/HeatMap.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Data } from "./Data";
+
+const props = defineProps<{
+  _key: string;
+  data: Data;
+}>();
+</script>
+
+<template>
+  <div
+    class="heat-key"
+    :style="{
+      'background-color': `rgb(255, 0, 0, ${(data.Dist.Key[_key] || 0) / data.Keys.Count / 0.13})`,
+    }"
+  >
+    <div style="font-size: 0.8em; color: #000; white-space: nowrap">{{ _key.toUpperCase() }}</div>
+    <div style="font-size: 0.3em; color: #555; white-space: nowrap">
+      {{ ((data.Dist.Key[_key] / data.Keys.Count) * 100 || 0).toFixed(2) }}
+    </div>
+  </div>
+</template>
+<style>
+div.heat-key {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 5px;
+  box-shadow: 0 0 2px 0 #bbbbbb;
+  -webkit-box-shadow: 0 0 2px 0 #bbbbbb;
+  margin: 3px;
+}
+</style>