Split component, improve UI, fix and refactor (#1162)

src/classes/utils.js

@@ -351,5 +351,29 @@ export default {
             echarts = module;
             return echarts;
         });
+    },
+    // CJK character in Japanese, Korean, Chinese are different
+    // so change font-family order when users change language to display CJK character correctly
+    changeCJKorder(lang) {
+        const otherFonts = window
+            .getComputedStyle(document.body)
+            .fontFamily.split(',')
+            .filter((item) => !item.includes('Noto Sans'))
+            .join(', ');
+        const notoSans = 'Noto Sans';
+
+        const fontFamilies = {
+            ja_JP: ['JP', 'KR', 'TC', 'SC'],
+            ko: ['KR', 'JP', 'TC', 'SC'],
+            zh_TW: ['TC', 'JP', 'KR', 'SC'],
+            zh_CN: ['SC', 'JP', 'KR', 'TC']
+        };
+
+        if (fontFamilies[lang]) {
+            const CJKFamily = fontFamilies[lang]
+                .map((item) => `${notoSans} ${item}`)
+                .join(', ');
+            document.body.style.fontFamily = `${CJKFamily}, ${otherFonts}`;
+        }
     }
 };