增加 98 五笔版本练习

src/App.vue

@@ -1,38 +1,43 @@
 <template>
   <el-container>
-    <el-header class="el-menu-demo">
-      <el-row>
-        <el-col style="color:#fff" :xs="24" :sm="{span:20, offset: 2}" :md="{span: 18, offset: 3}" :xl="{span: 12, offset: 6}" ><h1 style="margin:0 20px; float:left; line-height:60px">五笔练习</h1>
-        <el-menu
-          :default-active="activeIndex"
-          class="el-menu-demo"
-          mode="horizontal"
-          @select="handleSelect"
-          background-color="#545c64"
-          text-color="#fff"
-          active-text-color="#ffd04b">
-            <el-submenu index="0" v-if="windowWidth < 640">
-              <template slot="title"><i style="color:#fff" class="el-icon-s-unfold"></i></template>
-              <el-menu-item index="1">字根练习</el-menu-item>
-              <el-menu-item index="2">一级简码</el-menu-item>
-              <el-menu-item index="3">二级简码</el-menu-item>
-              <el-menu-item index="4" ><i style="color:#F56C6C;" class="el-icon-document"></i><a href="https://wubi.yantuz.cn" style="color:#F56C6C; text-decoration: none;" target="_blank"><b>五笔7天速成</b></a></el-menu-item>
-            </el-submenu>
-            <template v-else>
-              <el-menu-item index="1">字根练习</el-menu-item>
-              <el-menu-item index="2">一级简码</el-menu-item>
-              <el-menu-item index="3">二级简码</el-menu-item>
-              <el-menu-item index="4" ><i style="color:#F56C6C;" class="el-icon-document"></i><a href="https://wubi.yantuz.cn" style="color:#F56C6C; text-decoration: none;" target="_blank"><b>五笔7天速成</b></a></el-menu-item>
-            </template>
-          </el-menu>
-        </el-col>
-      </el-row>
-
+    <el-header>
+      <h1 style="margin:0 20px; float:left; line-height:60px">五笔练习</h1>
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b">
+          <el-submenu index="0" v-if="windowWidth < 740">
+            <template slot="title"><i style="color:#fff" class="el-icon-s-unfold"></i></template>
+            <el-menu-item index="1">字根练习</el-menu-item>
+            <el-menu-item index="2">一级简码</el-menu-item>
+            <el-menu-item index="3">二级简码</el-menu-item>
+            <el-menu-item index="4" ><i style="color:#F56C6C;" class="el-icon-document"></i><a href="https://wubi.yantuz.cn" style="color:#F56C6C; text-decoration: none;" target="_blank"><b>五笔7天速成</b></a></el-menu-item>
+          </el-submenu>
+          <template v-else>
+            <el-menu-item index="1">字根练习</el-menu-item>
+            <el-menu-item index="2">一级简码</el-menu-item>
+            <el-menu-item index="3">二级简码</el-menu-item>
+            <el-menu-item index="4" ><i style="color:#F56C6C;" class="el-icon-document"></i><a href="https://wubi.yantuz.cn" style="color:#F56C6C; text-decoration: none;" target="_blank"><b>五笔7天速成</b></a></el-menu-item>
+          </template>
+        </el-menu>
+        <el-dropdown class="wubi-version-dropdown" @command="toggleVersion">
+          <span class="dropdown-text">
+            {{ wubiVersion }} 版本<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="86">86 版本</el-dropdown-item>
+            <el-dropdown-item command="98">98 版本</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
     </el-header>
     <el-main>
       <el-row>
         <el-col :xs="24" :sm="{span:20, offset: 2}" :md="{span: 18, offset: 3}" :xl="{span: 12, offset: 6}" >
-          <Game :gameModel = this.gameModel />
+          <Game :gameModel="gameModel" :wubiVersion="wubiVersion" />
         </el-col>
       </el-row>
     </el-main>
@@ -50,7 +55,8 @@ export default {
       return {
         activeIndex: '1',
         gameModel: 'zigen',
-        windowWidth: 640
+        wubiVersion: '86',
+        windowWidth: 740,
       };
     },
   components: {
@@ -70,14 +76,19 @@ export default {
             this.gameModel = "erji";
             break;
         }
-      }
+      },
+      toggleVersion(command) {
+        this.wubiVersion = command;
+      },
     },
     mounted() {
       window.onresize = () => {
         return (() => {
           this.windowWidth = document.body.clientWidth;
         })();
       };
+
+      this.windowWidth = document.body.clientWidth;
     }
 }
 </script>
@@ -97,9 +108,24 @@ body{margin:0; padding: 0;}
   margin-top:0;
 }
 .el-header{
+  display: flex;
+  justify-content: space-around;
   background: #545c64;
   height: 80px;
-  color:"#fff";
+  padding: 0 40px;
+  color: #fff;
 }
 .el-menu-demo{float: left;}
+.wubi-version-dropdown {
+  float: right;
+  line-height: 60px;
+}
+.dropdown-text {
+  color: #fff;
+  cursor: pointer;
+}
+.dropdown-text:hover {
+  color: #66b1ff;
+  transition: .2s;
+}
 </style>

src/components/Game.vue

@@ -1,6 +1,11 @@
 <template>
     <div>
-        <el-row :class="{ zigen:gameModel == 'zigen' }" class="box" :gutter="20" style="margin-top:50px;">
+        <el-row
+            :class="{ zigen: gameModel === 'zigen', version98: wubiVersion === '98'  }"
+            class="box"
+            :gutter="20"
+            style="margin-top:50px;"
+        >
             <el-col :span="4" :offset="2">
                 <el-card shadow="always" v-bind:class="isRight ? 'boderNormal' :'boderError' " >
                     {{d1[1]}}
@@ -36,7 +41,9 @@
         </el-row>
         <el-collapse value = '1'>
                 <el-collapse-item title="字根图" name="1">
-                    <div class="rootImg"><img src="../assets/root.png" /></div>
+                    <div class="rootImg">
+                        <img :src="require(`../assets/root-${wubiVersion}.png`)" />
+                    </div>
                 </el-collapse-item>
                 <el-collapse-item  title="一级简码" name="2">
                     <el-table style="width: 100%" :data="tableData" >
@@ -48,7 +55,9 @@
                     </el-table>
                 </el-collapse-item>
                 <el-collapse-item title="二级简码" name="3">
-                    <div class="rootImg"><img src="../assets/86erjijianma.gif" /></div>
+                    <div class="rootImg">
+                        <img :src="require(`../assets/${wubiVersion}erjijianma.gif`)" />
+                    </div>
                 </el-collapse-item>
             </el-collapse>
     </div>
@@ -61,9 +70,16 @@
     font-weight: 400;
     src: url("../assets/font/HanZiRootFont.woff2") format("woff2"), url("../assets/font/HanZiRootFont.ttf") format("ttf");
 }
+@font-face{
+    font-family: "98WB";
+    src: url("../assets/font/98WB-1.otf") format("opentype");
+}
 .zigen{
     font-family: HanZiRootFont;
 }
+.zigen.version98 {
+    font-family: "98WB";
+}
 .box{
     font-size: 1cm;
     text-align: center;
@@ -87,65 +103,7 @@
 </style>
 
 <script>
-    var list = {
-        "g":["一","丁","丅","丄","丂","七"],
-        "f":["丐","丑","专","丒","丕","丘","丙","世","丗","且"],
-        "d":["丠","両","两","严","並","丢","丣","丨","丩","个","丫","丧"],
-        "s":["丰","丱","串","丳"],
-        "a":["乀","乁","乂","久","乄","乆","乇","乃","么","之","乍","义","乊","乌"],
-        "h":["乐","乒","乗","乘","乙","乕","乖","乓","乔","乑","乚"],
-        "j":["习","乡","乢","乣","乤","乥","书","乧","乨"],
-        "k":["买","乱","乲"],
-        "l":["亀","亁","亃","亂","亄","亅","了","亇","争","予","亊"],
-        "m":["亐","云","互","亓","五","井","亖","亗"],
-        "t":["亠","亡","交","亥","亢","亣","亨","亦","产"],
-        "r":["亰","亱","亳","亵","亲","亶","亴","亷","亹","亸"],
-        "e":["什","仁","仃","仅","仆","仄","仂","仇","仈","仌","今","仉","介"],
-        "w":["仐","仑","仒","仓","仔"],
-        "q":["仠","仡","令","仨","以","仦","仢","代","仧","仩","仪","仫","们","仭","仮"],
-        "y":["仰","仱","仲","仳","价","仵","件","仴","仸","仹"],
-        "u":["伀","企","伅","伃","伇","伆","伋","伄","伉","伊","伂","伌","伈"],
-        "i":["伐","伕","休","伓","伒","优","会","伔","伖","众","伙"],
-        "o":["传","伡","伢","伤","伣","伥"],
-        "p":["估","伴","伳","伲","伱","伵"],
-        "n":["佀","佁","佂","佃","佄","佌","佋","位","低","住","佐","佒","体","佔","何","佖","佇","佈","佉","但","佑","佊","佅"],
-        "b":["你","佡","佨","佥","佬","佦","佩","佧","佪","佫","佤","佢","佣","佭"],
-        "v":["佰","佱","佲","佴","併","佶","佷","佳"],
-        "c":["侀","侄","侅","侃","侁","侂"],
-        "x":["侓","侔","侕","侖","侗","侒","侐","侑"],
-    }
-    var listYi = {
-        "g":["一"],
-        "f":["地"],
-        "d":["在"],
-        "s":["要"],
-        "a":["工"],
-        "h":["上"],
-        "j":["是"],
-        "k":["中"],
-        "l":["国"],
-        "m":["同"],
-        "t":["和"],
-        "r":["的"],
-        "e":["有"],
-        "w":["人"],
-        "q":["我"],
-        "y":["主"],
-        "u":["产"],
-        "i":["不"],
-        "o":["为"],
-        "p":["这"],
-        "n":["民"],
-        "b":["了"],
-        "v":["发"],
-        "c":["以"],
-        "x":["经"],
-    }
-
-    var strEr="五于天末开下理事画现玫珠表珍列玉平不来与屯妻到互二寺城霜载直是吉协南才垢圾夫无坟增示赫过志地雪支三夺大厅左丰百右历成帮原胡春克太磁砂灰达成顾肆友龙本村枯林械相查可楞机格析极检构术样档杰棕杨李要权楷七革基苛式牙划或功贡攻匠菜共区芳燕东芝世节切芭药睛睦盯虎止旧占卤贞睡肯具餐眩瞳步眯瞎卢眼皮此量时晨果虹早昌蝇曙遇昨蝗明蛤晚景暗晃显晕电最归紧昆呈叶顺呆呀中虽吕另员呼听吸只史嘛啼吵喧叫啊哪吧哟车轩因困四辊加男轴力斩胃办罗罚较边思轨轻累同财央朵曲由则崭册几贩骨内风凡赠峭迪岂邮凤生行知条长处得各力向笔物秀答称入科秒管秘季委么第后持拓打找年提扣押抽手折扔失换扩拉朱搂近所报扫反批且肝肛胆肿肋肌用遥朋脸胸及胶膛爱甩服妥肥脂全会估休代个介保佃仙作伯仍从你信们偿伙亿他分公化钱针然钉氏外旬名锣负儿铁角欠多久匀乐炙锭包凶争色主计庆订度让刘训为高放诉衣认义方说就变这记离良充率闰半关亲并站间部曾商产瓣前闪交六立冰普帝决闻妆冯北汪法尖洒江小浊澡渐没少泊肖兴光注洋水淡学沁池当汉涨业灶类灯煤粘烛炽烟灿烽煌粗伙炮米料炒炎迷断籽娄烃定守害宁宽寂审宫军宙客宾家空宛社实宵灾之官字安它怀导居民收慢避惭届必怕愉懈心习悄屡忱忆敢恨怪尼卫际承阿陈耻阳职阵出降孤阴队隐防联孙耿辽也子限取陛姨寻姑杂毁旭如舅九奶婚妨嫌录灵巡刀好妇妈姆对参戏台劝观矣牟能难允驻驼马邓艰双线结顷红引旨强细纲张绵级给约纺弱纱继综纪弛绿经比";
-    var listEr = strEr.split('');
-
-    //console.log(getRandom());
+    import { list86, list98, listYi, tableYi, listEr86, listEr98 } from '../const';
 
     export default {
         data() {
@@ -161,17 +119,12 @@
                 errorSumTimes : 0,
                 rightTimes : 0,
                 lastRightDate: new Date(),
-                tableData: [
-                    {t1: 'G（一）',t2: 'H（上）',t3: 'T（和）',t4: 'Y（主）',t5: 'N（民）',},
-                    {t1: 'F（地）',t2: 'J（是）',t3: 'R（的）',t4: 'U（产）',t5: 'B（了）',},
-                    {t1: 'D（在）',t2: 'K（中）',t3: 'E（有）',t4: 'I（不）',t5: 'V（发）',},
-                    {t1: 'S（要）',t2: 'L（国）',t3: 'W（人）',t4: 'O（为）',t5: 'C（以）',},
-                    {t1: 'A（工）',t2: 'M（同）',t3: 'Q（我）',t4: 'P（这）',t5: 'X（经）',},
-                ]
+                tableData: tableYi,
             }
         },
         props:{
             gameModel: String,
+            wubiVersion: String,
         },
         computed: {
             //计算打字速度
@@ -186,18 +139,18 @@
         },
         watch:{
             gameModel(val){
-                this.d1='';
-                this.d2='';
-                this.d3='';
-                this.d4='';
-                this.d5='';
-                this.getData();
-                this.reset();
+                this.startNewGame();
                 if(val == "erji"){
                     this.$message('当前是二级简码模式，请更换为五笔输入法练习');
                 }
-                document.getElementById("intext").focus();
-            }
+            },
+            wubiVersion(val) {
+                this.startNewGame();
+                this.$message({
+                    message: `已切换为 ${val} 版本`,
+                    type: 'success',
+                });
+            },
         },
         methods: {
             //初始化
@@ -242,30 +195,44 @@
             },
             reset(){
                 this.rightTimes=0;
+                this.errorTimes = 0;
                 this.errorSumTimes = 0;
                 this.lastRightDate = new Date();
                 this.isRight = true;
                 document.getElementById("intext").focus();
             },
+            startNewGame() {
+                this.d1='';
+                this.d2='';
+                this.d3='';
+                this.d4='';
+                this.d5='';
+                this.getData();
+                this.reset();
+            },
             getRandom(){
-                var thisList = list;
+                var thisList = {};
+                const isVersion86 = this.wubiVersion === '86';
+
                 switch(this.gameModel){
-                    case "zigen":
+                    case "zigen": {
+                        const list = isVersion86 ? list86 : list98;
                         thisList = list;
                         break;
+                    }
                     case "yiji":
                         thisList = listYi;
                         break;
-                    case "erji":
+                    case "erji": {
+                        const listEr = isVersion86 ? listEr86 : listEr98;
                         return ["",listEr[Math.floor(Math.random() * listEr.length)]];
+                    }
                 }
 
-                var returnVal = {};
                 var keyList = Object.keys(thisList);
                 var key = keyList[Math.floor(Math.random() * keyList.length)];
                 var values = thisList[key];
                 var value = values[Math.floor(Math.random() * values.length)];
-                returnVal[key]=value;
                 return [key,value];
             }