ui: enhance font selection

packages/ui-default/locales/zh.yaml

@@ -124,6 +124,7 @@ CLOSE: 关闭
 Code blocks: 代码区块
 Code language: 代码语言
 Code: 代码
+codeFontFamily: 代码字体
 collapse: 收缩
 Comment: 评论
 Comments: 评论

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.32.0",
+  "version": "4.32.1",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/pages/api.page.styl

@@ -3,7 +3,7 @@
   padding: 5px 40px 0px 0px !important
 
 .graphiql-container .docExplorerWrap
-  font-family: "Source Code Pro", "Consolas" !important
+  font-family: var(--code-font-family) !important
 
 .graphiql-container .doc-explorer-back
   overflow: hidden;

packages/ui-default/pages/home_preference.page.jsx

@@ -74,6 +74,10 @@ const page = new NamedPage('home_preference', () => {
     this.style.fontFamily = this.getAttribute('value');
     this.textContent = i18n(this.textContent.trim());
   });
+  function updateFont() {
+    this.style.fontFamily = $(this).val();
+  }
+  $('[name="fontFamily"], [name="codeFontFamily"]').on('change', updateFont).each(updateFont);
 });
 
 export default page;