审核题解页显示该题题目难度

Author: Mr-Python-in-China

package.json

@@ -25,6 +25,7 @@
     "@mr.python/axios-userscript-adapter": "^1.0.0",
     "axios": "^1.7.2",
     "dayjs": "^1.11.11",
+    "deepmerge": "^4.3.1",
     "hast-util-to-jsx-runtime": "^2.3.0",
     "highlight.js": "^11.10.0",
     "katex": "^0.16.11",

src/app/features/article/index.tsx

@@ -16,13 +16,19 @@ import {
   PopoverSurface
 } from '@fluentui/react-components';
 import { getArticle, submitArticleCheckResult } from '../../../fetch';
-import { ErrorDiv, InputDateTime, UserName } from '../../utils';
+import {
+  ErrorDiv,
+  InputDateTime,
+  ProblemNameWithDifficulty,
+  UserName
+} from '../../utils';
 import dayjs from 'dayjs';
 import emptyQueueImage from 'assets/emptyQueue.webp';
 import './style.css';
 import { useNotUndefinedContext } from '../../../notUndefinedContext';
 import { MyInfoContext } from '../../contexts';
 import { isCancel } from 'axios';
+import { oldDifficultySystem } from '../../../constants';
 
 export default function Article() {
   const [status, setStatus] = useState<{
@@ -46,12 +52,10 @@ export default function Article() {
     const cancel = new AbortController();
     getArticle(skipBefore / 1000, { signal: cancel.signal })
       .then(v => {
-        console.log(v);
         setStatus({ details: v }),
           v.article && setSkipBefore(v.article.promoteResult.updateAt * 1000);
       })
       .catch(e => {
-        console.log(e);
         if (isCancel(e)) return;
         console.error('Error in feature Article', e), setFetchError(e);
       });
@@ -71,7 +75,9 @@ export default function Article() {
   async function submit() {
     if (!details?.article) throw new Error('No article');
     setStatus({ details: details, submiting: true });
-    await submitArticleCheckResult([details.article.lid, refuseCommit || true]);
+    await submitArticleCheckResult([
+      [details.article.lid, refuseCommit || true]
+    ]);
     setStatus(null);
     setOtherRefuseCommit('');
     updateArticle();
@@ -129,13 +135,13 @@ export default function Article() {
             {details.article.solutionFor && (
               <Text>
                 关联于题目{' '}
-                <Link
-                  href={`https://www.luogu.com.cn/problem/${details.article.solutionFor.pid}`}
-                  target="_blank"
-                >
-                  {details.article.solutionFor.pid}{' '}
-                  {details.article.solutionFor.title}
-                </Link>
+                <ProblemNameWithDifficulty
+                  pid={details.article.solutionFor.pid}
+                  name={details.article.solutionFor.title}
+                  difficulty={oldDifficultySystem.findIndex(
+                    x => x >= details.article.solutionFor!.difficulty
+                  )}
+                />
                 。
                 {details.countForProblem && (
                   <>
@@ -154,7 +160,10 @@ export default function Article() {
             )}
             <div className="adminCommit">
               <Text>管理员备注：</Text>
-              <textarea defaultValue={details.article.adminComment} />
+              <textarea
+                defaultValue={details.article.adminComment}
+                spellCheck="false"
+              />
             </div>
           </>
         ) : undefined}
@@ -185,7 +194,7 @@ export default function Article() {
                   很遗憾，您的《
                   <Link
                     href={`https://www.luogu.com.cn/article/${details.article.lid}`}
-                    target='_blank'
+                    target="_blank"
                   >
                     {details.article.title}
                   </Link>

src/app/utils.tsx

@@ -1,33 +1,16 @@
-import React from 'react';
+import React, { memo, useEffect, useState } from 'react';
 
 import { UserSummary } from 'luogu-api';
 import { isError } from 'lodash';
-import { isAxiosError } from 'axios';
-import { Button, tokens, Input } from '@fluentui/react-components';
+import { isAxiosError, isCancel } from 'axios';
+import { Button, tokens, Input, Link } from '@fluentui/react-components';
 import dayjs from 'dayjs';
 import { DismissCircleRegular } from '@fluentui/react-icons';
+import { getProblemData } from '../fetch';
+import { UsernameColor, DifficultyColor } from '../constants';
 
 export type Override<P, S> = Omit<P, keyof S> & S;
 
-export const UsernameColor = {
-    Purple: 'rgb(157, 61, 207)',
-    Red: 'rgb(254, 76, 97)',
-    Orange: 'rgb(243, 156, 17)',
-    Green: 'rgb(82, 196, 26)',
-    Blue: 'rgb(52, 152, 219)',
-    Gray: 'rgb(191, 191, 191)'
-  },
-  DifficultyColor = [
-    '#BFBFBF',
-    '#FE4C61',
-    '#F39C11',
-    '#FFC116',
-    '#52C41A',
-    '#3498DB',
-    '#9D3DCF',
-    '#0E1D69'
-  ];
-
 export function UserName({ children }: { children: UserSummary }) {
   return (
     <a
@@ -151,3 +134,54 @@ export function InputDateTime(
     />
   );
 }
+
+export const ProblemNameWithDifficulty = memo(
+  ({
+    pid,
+    name,
+    difficulty
+  }: {
+    pid: string;
+    name?: string;
+    difficulty?: number;
+  }) => {
+    const [difficultyState, setDifficultyState] = useState<number | undefined>(
+      difficulty
+    );
+    const [nameState, setNameState] = useState<string | undefined>(name);
+    useEffect(() => {
+      if (difficultyState !== undefined && nameState !== undefined) return;
+      const cancel = new AbortController();
+      getProblemData(pid, { signal: cancel.signal })
+        .then(data => {
+          if (difficultyState === undefined)
+            setDifficultyState(data.currentData.problem.difficulty);
+          if (nameState === undefined)
+            setNameState(data.currentData.problem.title);
+        })
+        .catch(e => {
+          if (isCancel(e)) return;
+          console.error('Error when fetch problem data', e);
+        });
+      return () => cancel.abort();
+    }, []);
+    return (
+      <Link href={'https://www.luogu.com.cn/problem/' + pid} target="_blank">
+        <span
+          style={
+            difficultyState !== undefined
+              ? {
+                  fontWeight: 'bold',
+                  fontSize: '16px',
+                  color: DifficultyColor[difficultyState]
+                }
+              : undefined
+          }
+        >
+          {pid}
+        </span>
+        {nameState !== undefined && ' ' + nameState}
+      </Link>
+    );
+  }
+);

src/constants.ts

@@ -0,0 +1,22 @@
+export const DifficultyColor = [
+  'rgb(191, 191, 191)',
+  'rgb(254, 76, 97)',
+  'rgb(243, 156, 17)',
+  'rgb(255, 193, 22)',
+  'rgb(82, 196, 26)',
+  'rgb(52, 152, 219)',
+  'rgb(157, 61, 207)',
+  'rgb(14, 29, 105)'
+];
+
+export const oldDifficultySystem = [0, 2, 3.5, 5, 6, 8, 10, 2147483647];
+
+export const UsernameColor = {
+  Purple: 'rgb(157, 61, 207)',
+  Red: 'rgb(254, 76, 97)',
+  Orange: 'rgb(243, 156, 17)',
+  Green: 'rgb(82, 196, 26)',
+  Blue: 'rgb(52, 152, 219)',
+  Gray: 'rgb(191, 191, 191)',
+  Cheater: 'rgb(173, 139, 0)'
+};

src/fetch/index.ts

@@ -2,6 +2,8 @@ import Axios, { AxiosRequestConfig, CancelToken } from 'axios';
 import GMadaptr from '@mr.python/axios-userscript-adapter';
 
 import { AdminMeta, SolutionAdminInfo } from '../interface';
+import deepmerge from 'deepmerge';
+import { DataResponse, ProblemData } from 'luogu-api';
 
 const axios = Axios.create({
   baseURL: 'https://www.luogu.com.cn/sadmin',
@@ -16,35 +18,61 @@ axios.interceptors.response.use(v => {
 
 GM_xmlhttpRequest; // add it to @grant
 
-export const fetchMyInfo = () =>
+export const fetchMyInfo = (config: AxiosRequestConfig = {}) =>
   axios
-    .get<AdminMeta>('https://www.luogu.com.cn/sadmin', {
-      headers: {
-        'x-lentille-request': 'content-only'
-      }
-    })
+    .get<AdminMeta>(
+      'https://www.luogu.com.cn/sadmin',
+      deepmerge(
+        {
+          headers: {
+            'x-lentille-request': 'content-only'
+          }
+        },
+        config
+      )
+    )
     .then(x => {
       if (!x.data.user) throw new Error('unknown user', { cause: x });
       return x.data.user;
     });
 
-export const getArticle = (skipBefore: number, config?: AxiosRequestConfig) =>
+export const getArticle = (
+  skipBefore: number,
+  config: AxiosRequestConfig = {}
+) =>
   axios
-    .post<SolutionAdminInfo>('api/article/promotionReview/next', undefined, {
-      params: {
-        skipBefore: skipBefore || 0
-      },
-      ...config
-    })
+    .post<SolutionAdminInfo>(
+      'api/article/promotionReview/next',
+      undefined,
+      deepmerge(
+        {
+          params: {
+            skipBefore: skipBefore || 0
+          }
+        },
+        config
+      )
+    )
     .then(x => x.data);
 
-export const submitArticleCheckResult = (...data: [string, string | true][]) =>
+export const submitArticleCheckResult = (
+  data: [string, string | true][],
+  config: AxiosRequestConfig = {}
+) =>
   axios
     .post<{
       rejected: string[];
       accepted: string[];
     }>(
       'https://www.luogu.com.cn/sadmin/api/article/promotionReview/submit',
-      Object.fromEntries<string | true>(data)
+      Object.fromEntries<string | true>(data),
+      config
     )
     .then(x => x.data);
+
+export const getProblemData = (pid: string, config: AxiosRequestConfig = {}) =>
+  axios
+    .get<
+      DataResponse<ProblemData>
+    >(`https://www.luogu.com.cn/problem/${pid}`, deepmerge({ headers: { 'x-luogu-type': 'content-only' } }, config))
+    .then(x => x.data);

yarn.lock

@@ -4187,6 +4187,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^4.3.1":
+  version: 4.3.1
+  resolution: "deepmerge@npm:4.3.1"
+  checksum: 10c0/e53481aaf1aa2c4082b5342be6b6d8ad9dfe387bc92ce197a66dea08bd4265904a087e75e464f14d1347cf2ac8afe1e4c16b266e0561cc5df29382d3c5f80044
+  languageName: node
+  linkType: hard
+
 "default-gateway@npm:^6.0.3":
   version: 6.0.3
   resolution: "default-gateway@npm:6.0.3"
@@ -6621,6 +6628,7 @@ __metadata:
     css-loader: "npm:^7.1.2"
     css-minimizer-webpack-plugin: "npm:^7.0.0"
     dayjs: "npm:^1.11.11"
+    deepmerge: "npm:^4.3.1"
     eslint: "npm:8.56.0"
     eslint-plugin-react: "npm:^7.34.2"
     hast-util-to-jsx-runtime: "npm:^2.3.0"