perf: fix some bugs

Author: ZLY201

.eslintrc.json

@@ -22,7 +22,6 @@
     "plugin:react/jsx-runtime",
     "plugin:import/recommended",
     "plugin:compat/recommended",
-    "plugin:prettier/recommended",
     "plugin:eslint-comments/recommended"
   ],
   "parser": "@typescript-eslint/parser",
@@ -79,13 +78,24 @@
         "newlines-between": "ignore"
       }
     ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "quote-props": [
+      "error",
+      "as-needed"
+    ],
     "semi": [
       "error",
       "always"
     ],
-    "quotes": [
+    "semi-spacing": [
       "error",
-      "single"
+      {
+        "before": false,
+        "after": true
+      }
     ],
     "no-trailing-spaces": "error",
     "@typescript-eslint/no-unused-vars": [
@@ -96,20 +106,6 @@
     ],
     "max-len": ["error", { "code": 120, "ignoreComments": true }],
     "object-curly-spacing": ["error", "always"],
-    "prettier/prettier": [
-      "error",
-      {
-        "printWidth": 80,
-        "tabWidth": 2,
-        "useTabs": false,
-        "semi": true,
-        "singleQuote": true,
-        "trailingComma": "all",
-        "bracketSpacing": true,
-        "jsxBracketSameLine": false,
-        "arrowParens": "avoid"
-      }
-    ],
     "react/jsx-indent": ["error", 2],
     "react/jsx-indent-props": ["error", 2],
     "react/jsx-tag-spacing": "error",

config/i18n.json

@@ -54,5 +54,9 @@
   "confirm_reset_code": {
     "en": "Are you sure to reset code?",
     "zh-CN": "确认重置代码？"
+  },
+  "no_question": {
+    "en": "No Result",
+    "zh-CN": "暂无数据"
   }
 }

package.json

@@ -48,21 +48,19 @@
     "react-syntax-highlighter": "^15.5.0",
     "rehype-katex": "^6.0.3",
     "rehype-raw": "^7.0.0",
+    "remark-gfm": "^3.0.1",
     "remark-math": "^6.0.0",
-    "styled-components": "^6.1.0",
     "ts-deepmerge": "^7.0.0",
     "type-assertions": "^1.1.0"
   },
   "devDependencies": {
     "@rspack/cli": "^0.6.5",
     "@rspack/core": "^0.6.5",
     "@rspack/plugin-html": "^0.5.8",
-    "@svgr/webpack": "^8.1.0",
     "@types/event-emitter": "^0.3.4",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^20.8.9",
-    "@types/prompts": "^2.4.9",
     "@types/react": "^17.0.67",
     "@types/react-copy-to-clipboard": "^5.0.6",
     "@types/react-dom": "^17.0.21",
@@ -85,9 +83,7 @@
     "less-loader": "^11.1.3",
     "lint-staged": "^14.0.1",
     "monaco-editor": "^0.44.0",
-    "prettier": "^3.0.3",
-    "prompts": "^2.4.2",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "typescript": "^5.2.2"
   },
   "resolutions": {

src/App.tsx

@@ -18,6 +18,10 @@ import { getQuestionList } from '@src/utils/type-challenges';
 import styles from './index.module.less';
 import './global.less';
 
+function getPopupContainer() {
+  return document.getElementById('root') || document.body;
+}
+
 function App() {
   const [context, setContext] = useState(getContext());
 
@@ -63,7 +67,11 @@ function App() {
 
   return (
     <ConfigProvider
-      getPopupContainer={() => document.getElementById('root') || document.body}
+      componentConfig={{
+        Modal: { getPopupContainer },
+        Drawer: { getPopupContainer },
+      }}
+      getPopupContainer={getPopupContainer}
     >
       <Context.Provider value={contextValue}>
         <Layout className={styles.container}>

src/components/CustomTabs/index.module.less

@@ -2,31 +2,37 @@
   width: 100%;
   height: 100%;
   border: none;
-  :global(.arco-tabs-header-wrapper) {
-    height: 36px;
-    padding: 4px;
-    box-sizing: border-box;
-    :global(.arco-tabs-header-title) {
-      height: 100%;
-      padding: 8px;
+  :global {
+    .arco-tabs-header-wrapper {
+      height: 36px;
+      padding: 4px;
       box-sizing: border-box;
-      border: none;
-      user-select: none;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 4px;
-      font-size: 16px;
+      .arco-tabs-header-title {
+        height: 100%;
+        padding: 8px;
+        box-sizing: border-box;
+        border: none;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-size: 16px;
+      }
+      .arco-tabs-header-title-active {
+        font-weight: 400;
+        &:hover {
+          background-color: var(--color-fill-3);
+        }
+      }
     }
-    :global(.arco-tabs-header-title-active) {
-      font-weight: 400;
-      &:hover {
-        background-color: var(--color-fill-3);
+    .arco-tabs-content {
+      width: 100%;
+      padding: 0;
+      border: none;
+      .arco-tabs-content-inner, .arco-tabs-content-item, .arco-tabs-pane {
+        height: 100%;
       }
     }
   }
-  :global(.arco-tabs-content) {
-    border: none;
-    padding: 0;
-  }
 }

src/components/Markdown/index.module.less

@@ -1,33 +1,53 @@
-blockquote {
-  margin: 0;
-  padding: 8px;
-  background-color: var(--color-neutral-2);
-  border-left: 4px solid var(--color-neutral-3);
-  border-radius: 4px;
-  * {
+.markdown-wrapper {
+  blockquote {
     margin: 0;
+    padding: 8px;
+    background-color: var(--color-neutral-2);
+    border-left: 4px solid var(--color-neutral-3);
+    border-radius: 4px;
+    * {
+      margin: 0;
+    }
+    p:not(:last-child) {
+      margin-bottom: 4px;
+    }
   }
-  p:not(:last-child) {
-    margin-bottom: 4px;
+  p > code {
+    margin: 0 2px;
+    padding: 2px 4px;
+    vertical-align: middle;
+    font-size: 14px;
+    line-height: 14px;
+    background-color: var(--color-neutral-2);
   }
-}
-p > code {
-  margin: 0 2px;
-  padding: 2px 4px;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: 14px;
-  background-color: var(--color-neutral-2);
-}
-.markdown-code {
-  font-size: 14px;
-  :global(.react-syntax-highlighter-line-number) {
-    min-width: 32px !important;
+  a {
+    color: rgb(var(--primary-6)) !important;
+    &:hover {
+      opacity: 0.8;
+    }
   }
-}
-.markdown-wrapper a {
-  color: rgb(var(--primary-6)) !important;
-  &:hover {
-    opacity: 0.8;
+  table {
+    width: 100%;
+    display: block;
+    overflow: auto;
+    border-spacing: 0;
+    border-collapse: collapse;
+    th, td {
+      padding: 6px 13px;
+      border: 1px solid #afb8c133;
+      code {
+        padding: 4px;
+        font-size: 85%;
+        white-space: break-spaces;
+        background-color: #afb8c133;
+        border-radius: 4px;
+      }
+    }
+  }
+  .markdown-code {
+    font-size: 14px;
+    :global(.react-syntax-highlighter-line-number) {
+      min-width: 32px !important;
+    }
   }
 }

src/components/Markdown/index.tsx

@@ -8,6 +8,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import { Setting } from '@src/utils/setting';
 import styles from './index.module.less';
 import 'katex/dist/katex.min.css';
@@ -23,20 +24,20 @@ const Markdown = function (props: {
   return (
     <ReactMarkdown
       className={styles['markdown-wrapper']}
-      remarkPlugins={[remarkMath]}
-      rehypePlugins={[rehypeRaw as any, rehypeKatex]}
+      remarkPlugins={[remarkMath, remarkGfm]}
+      rehypePlugins={[rehypeKatex, rehypeRaw as any]}
       components={{
         code(props) {
           const { children, className, inline, node, ...rest } = props;
           const match = /language-(typescript|ts)/.exec(className || '');
-          return match ? (
+          return !inline ? (
             <SyntaxHighlighter
               {...rest}
               node={node}
               inline={inline}
               className={styles['markdown-code']}
               style={theme === 'light' ? oneLight : oneDark}
-              language={match[1]}
+              language={match?.[1]}
               showLineNumbers={true}
               wrapLines={true}
             >

src/modules/Editor/index.tsx

@@ -17,6 +17,7 @@ function Editor() {
   const [raw, setRaw] = useState(DEFAULT_RAW);
   const [loading, setLoading] = useState(true);
   const [{ setting, currentQuestion }] = useContext(Context);
+  const { language } = setting;
 
   function onChange(filename: QuestionFiles, content: string) {
     if (!raw || filename !== QuestionFiles.template) return;
@@ -43,10 +44,10 @@ function Editor() {
 
   function resetCode() {
     const modal = Modal.confirm({
-      title: i18nJson['confirm_title'][setting.language],
-      content: i18nJson['confirm_reset_code'][setting.language],
-      okText: i18nJson['confirm_btn'][setting.language],
-      cancelText: i18nJson['cancel_btn'][setting.language],
+      title: i18nJson['confirm_title'][language],
+      content: i18nJson['confirm_reset_code'][language],
+      okText: i18nJson['confirm_btn'][language],
+      cancelText: i18nJson['cancel_btn'][language],
       onOk: async function () {
         setLoading(true);
         localCache.setQuestionCache(currentQuestion, {
@@ -70,9 +71,7 @@ function Editor() {
     <div className={styles.container}>
       <div className={styles.header}>
         <IconCode />
-        <span style={{ marginLeft: 5 }}>
-          {i18nJson['code'][setting.language]}
-        </span>
+        <span style={{ marginLeft: 5 }}>{i18nJson['code'][language]}</span>
         <a onClick={resetCode} className={styles.reset}>
           <Tooltip mini={true} content={'reset'}>
             <IconUndo />