feat: 优化比一比进度展示

src/App.vue

@@ -277,10 +277,13 @@ async function suggestClick(info?: SuggestItem | MouseEvent) {
           <router-link
             to="/game"
             class="y-menu__item"
-            :class="router.currentRoute.value.name !== 'Game' ? 'y-menu__item--blink' : ''"
+            :class="{
+              'y-menu__item--active': $route.name === 'Game' || $route.name === 'GameRoom',
+              'y-menu__item--blink': $route.name !== 'Game' && $route.name !== 'GameRoom'
+            }"
             >比一比</router-link
           >
-          <router-link to="/" class="y-menu__item y-menu__item--active">限时模式</router-link>
+          <router-link to="/" class="y-menu__item">限时模式</router-link>
           <!--        <router-link to="/words" class="y-menu__item">词/成语模式</router-link>-->
           <router-link to="/quote" class="y-menu__item">计时模式</router-link>
           <router-link to="/custom" class="y-menu__item">自定义模式</router-link>
@@ -589,6 +592,9 @@ footer {
   &.y-menu__item-auth {
     padding: 0;
   }
+  &.y-menu__item--active {
+    color: $main-color;
+  }
 }
 .y-menu__item--blink {
   animation: title-blink 0.8s infinite alternate;

src/components/WordInput.vue

@@ -4,11 +4,11 @@ import { KEY_CODE_ENUM } from '@/config/key';
 import { useScroll } from '@vueuse/core';
 // @ts-ignore
 import cloneDeep from 'lodash/cloneDeep';
-import type {
-  IWebsocketTypingInfo,
-  SentenceArrItem,
-  TypingRecordItemType,
-  TypingRecordType
+import {
+  type IWebsocketTypingInfo,
+  type SentenceArrItem,
+  type TypingRecordItemType,
+  type TypingRecordType
 } from '@/types';
 
 // common
@@ -110,11 +110,12 @@ const progressInfoComputed = computed<Record<number, any>>(() => {
     const len = value.len;
     const name = key;
     const accuracy = value.accuracy;
+    const color = value.color;
 
     if (transformed[len]) {
-      transformed[len].push({ name, accuracy });
+      transformed[len].push({ name, accuracy, color });
     } else {
-      transformed[len] = [{ name, accuracy }];
+      transformed[len] = [{ name, accuracy, color }];
     }
   }
   return transformed;
@@ -559,8 +560,11 @@ defineExpose({
             ><span
               class="y-word-input__typing-info"
               v-for="i in progressInfoComputed[index]"
+              :style="{
+                color: i.color
+              }"
               :key="i.name"
-              >{{ shortenString(i.name) }}：{{ i.accuracy }}</span
+              >{{ shortenString(i.name) }} : {{ i.accuracy }}</span
             ></template
           >
         </span>
@@ -689,13 +693,14 @@ defineExpose({
   height: 20px;
   display: block;
   left: 0;
-  opacity: 0.6;
+  opacity: 0.4;
   color: $gray-06;
   &:after {
     position: absolute;
     content: '';
     width: 1px;
-    background: $gray-08;
+    //background: $gray-08;
+    border-left: 1px solid;
     height: 38px;
     left: 0;
     top: 0;

src/types/index.ts

@@ -1,5 +1,15 @@
 export type KeyBoardType = '68' | 'standard' | 'mbp';
 
+export enum NAME_COLOR_ENUM {
+  RED = 'red',
+  GREEN = 'green',
+  PINK = 'pink',
+  YELLOW = 'yellow',
+  PURPLE = 'purple',
+  ORANGE = 'orange',
+  GRAY = 'gray'
+}
+
 export interface IWebsocketInfos {
   id: string;
   name: string;
@@ -16,6 +26,7 @@ export interface IWebsocketTyping {
   name?: string;
   isLenLargest?: boolean;
   isAccuracyLargest?: boolean;
+  color?: string;
 }
 
 export interface IWebsocketTypingInfo {

src/view/Game.vue

@@ -187,7 +187,7 @@ watch(
         >后才能创建比一比。不过加入已创建的房间则<strong>不需要登录</strong>，设置一个昵称就可以了哦。
       </li>
       <li>
-        创建的房间如果<strong>五分钟</strong>内没有任何操作，则会自动关闭。不过当还剩五秒会关闭时，会有弹框提示，任何输入操作都可以避免关闭。
+        创建的房间如果<strong>五分钟</strong>内没有任何操作，则会自动关闭。不过当还剩五秒会关闭时，会有弹框提示，任何操作都可以避免关闭。
       </li>
       <li>遇到任何问题欢迎点击右下角按钮反馈。</li>
     </ul>

src/view/GameRoom.vue

@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 import dayjs from 'dayjs';
 
 // types
-import type { IWebsocketInfos, IWebsocketTypingInfo } from '@/types';
+import { NAME_COLOR_ENUM, type IWebsocketInfos, type IWebsocketTypingInfo } from '@/types';
 
 // api
 import { getWsById } from '@/request';
@@ -223,6 +223,16 @@ async function getList() {
   }
 }
 
+const NAME_COLOR = [
+  NAME_COLOR_ENUM.RED,
+  NAME_COLOR_ENUM.GREEN,
+  NAME_COLOR_ENUM.YELLOW,
+  NAME_COLOR_ENUM.PURPLE,
+  NAME_COLOR_ENUM.PINK,
+  NAME_COLOR_ENUM.ORANGE,
+  NAME_COLOR_ENUM.GRAY
+];
+
 function startWs(
   id: string,
   name: string,
@@ -265,10 +275,14 @@ function startWs(
     state.getName = data.name;
 
     if (data.typing) {
-      state.websocketTypingInfo[data.name] = {
+      const info = state.websocketTypingInfo[data.name] || {};
+      if (!info.color) {
+        info.color = NAME_COLOR.shift();
+      }
+      state.websocketTypingInfo[data.name] = Object.assign(info, {
         len: data.typing.len,
         accuracy: data.typing.accuracy
-      };
+      });
       if (!(data.typing.len === 0 && data.typing.accuracy === '0%')) {
         // 结束的时候会发送清零的消息，这里是需要记录下结束之前的数据的，所以当有空信息就不记录。
         state.recordResult[data.name] = {