feat&lint: add event ui & fix lint error.

rotriw · Aug 22, 2023 · e8f812f · e8f812f
1 parent da060a0
commit e8f812f
Show file tree

Hide file tree

Showing 21 changed files with 286 additions and 190 deletions.
diff --git a/packages/core/declare/event.ts b/packages/core/declare/event.ts
@@ -0,0 +1,12 @@
+export interface EventProblemCore {
+    psid: string; // problem/{psid}
+    hint: string;
+}
+
+// Core use / compress verison / for db.
+export interface EventTaskCore {
+    title: string;
+    id: string;
+    description: string;
+    list: EventProblemCore[];
+}
diff --git a/packages/core/test/tests.js b/packages/core/test/tests.js
diff --git a/packages/core/utils/eventImport.ts b/packages/core/utils/eventImport.ts
@@ -0,0 +1,9 @@
+import { EventTaskCore } from '../declare/event';
+
+
+
+//TODO
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function parseCode(code: string): EventTaskCore[] {
+    return [];
+}
diff --git a/packages/declare/event.ts b/packages/declare/event.ts
@@ -0,0 +1,19 @@
+import { ProblemScore } from './score';
+
+export interface EventProblem {
+    psid: string; // problem/{psid}
+    hint: string;
+    title: string;
+    score?: ProblemScore;
+}
+
+/*
+* Standard Format / Universal Format.
+* 标准格式 / 全局传输格式
+* */
+export interface EventTask {
+    id: string; // Event task id
+    title: string; // Event string
+    description: string; // Event description.
+    list: EventProblem[]; // EventProblem, concern order.
+}
diff --git a/packages/declare/problem.ts b/packages/declare/problem.ts
@@ -18,6 +18,12 @@ export interface StandardProblemStatement extends Record<string, Array<string> |
 }
 
 
+export interface TagView {
+    hint: string; 
+    id: string;
+    color?: string;
+}
+
 /*
 * Standard Format / Universal Format.
 * 标准格式 / 全局传输格式
@@ -30,8 +36,8 @@ export interface Problem { //Standard Problem Schema
         platform: string; // 中文
         pid: string; // 题号
     }[];
-    tags?: string[]; // events
-    algorithm?: string[]; // 算法标签
+    tags?: TagView[]; // events
+    algorithm?: TagView[]; // 算法标签
     translate?: StandardProblemStatement; // translate version.
     allowedPlatform?: {
         platform: string;

diff --git a/packages/declare/score.ts b/packages/declare/score.ts
@@ -0,0 +1 @@
+export type ProblemScore = 'ac' | 'wa' | 'no';
diff --git a/packages/eventbus/main/index.ts b/packages/eventbus/main/index.ts
@@ -45,18 +45,16 @@ io.of('/edge').on('connection', (socket) => {
         }
     });
 
-    socket.on('qwq', (msg) => {
-        console.log(socket.handshake.auth);
-        console.log(msg);
-        console.log('qwq');
-    })
+    // socket.on('qwq', (msg) => {
+        // console.log(socket.handshake.auth);
+        // console.log(msg);
+        // console.log('qwq');
+    // })
 });
 
-io.of('/edge').on('connection', (socket) => {
-    socket.on('u2', (msg) => {
-        console.log(socket.handshake.auth);
-    });
-});
+// io.of('/edge').on('connection', (socket) => {
+// });
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
 export async function apply(loggerI: Logger) {
 }
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -5,6 +5,10 @@
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + React + TS</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous">
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
+        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
+            onload="renderMathInElement(document.body);"></script>
         <script>
             <!--RENDER-->
         </script>

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -39,6 +39,7 @@
     "@tiptap/pm": "^2.0.4",
     "@tiptap/react": "^2.0.4",
     "@tiptap/starter-kit": "^2.0.4",
+    "@types/katex": "^0.16.2",
     "axios": "1.0.0",
     "dayjs": "^1.11.7",
     "embla-carousel-react": "^7.1.0",
@@ -59,6 +60,7 @@
   "devDependencies": {
     "@eslint/create-config": "^0.4.2",
     "@types/emoji-mart": "^3.0.9",
+    "@types/katex": "^0.16.2",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "5.56.0",

diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { MantineProvider, ColorScheme, createEmotionCache, useMantineTheme } from '@mantine/core';
+import { MantineProvider, ColorScheme, createEmotionCache } from '@mantine/core';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Root } from './structure/root';
-import HomePage from './pages/home';
+// import HomePage from './pages/home';
 import LoginPage from './pages/login';
 import store from './store/store';
 import { Provider } from 'react-redux';
@@ -12,6 +12,7 @@ import './app.css';
 import { ProblemViewPage } from './pages/problemView';
 import { SubmissionResultPage } from './pages/submissionResult';
 import { ProblemEditor } from './pages/problemEditor';
+import { EventShow } from './pages/event';
 
 const myCache = createEmotionCache({ key: 'rmjac' });
 
@@ -89,6 +90,7 @@ function App() {
                                         <Route path='' element={<SubmissionResultPage></SubmissionResultPage>} />
                                         <Route path='login' element={<LoginPage></LoginPage>} />
 
+                                        <Route path='event/:eid' element={<EventShow></EventShow>} />
                                         <Route path='problem/:pid' element={<ProblemViewPage></ProblemViewPage>} />
                                         <Route path='problem/create' element={<ProblemEditor></ProblemEditor>} />
                                     </Route>

diff --git a/packages/ui/src/components/problem.tsx b/packages/ui/src/components/problem.tsx
@@ -1,9 +1,11 @@
-import { PlatformToCNName, StandardProblemStatement, StatementToCNName } from 'rmjac-declare/problem';
-import { Alert, Box, Button, Center, Code, Divider, Grid, Group, Input, NativeSelect, Space, Tabs, Text, Tooltip, useMantineTheme } from '@mantine/core';
+import { PlatformToCNName, StandardProblemStatement, StatementToCNName, TagView } from 'rmjac-declare/problem';
+import { Alert, Badge, Box, Button, Center, Code, Divider, Grid, Group, Input, NativeSelect, Space, Tabs, Text, Tooltip, useMantineTheme } from '@mantine/core';
 import React from 'react';
-import { NoStyleCard } from './card';
+import { NoStyleCard, StandardCard } from './card';
 import { IconAlertCircle, IconArrowLeft, IconChevronsDown } from '@tabler/icons-react';
 import { Editor } from '@monaco-editor/react';
+import { useToggle } from '@mantine/hooks';
+// import { renderToString } from 'katex';
 
 interface SimpleShowProp {
     key: number | string;
@@ -64,12 +66,14 @@ function ShowSimple({ id, ind, out }: SimpleShowProp) {
 }
 
 export function ProblemStatementShow({ data }: { data: StandardProblemStatement }) {
+    // console.log(katex);
+    // console.log(renderToString('$233$'));
     const items = data.showProp.map((id) => {
         const item = data[id] as string;
+
         if (id !== 'simples')
             return (
-                <>
-                    {/* deepscan-disable-line */}
+                <> {/* deepscan-disable-line */}
                     <Text size={18} fw={600}>
                         {StatementToCNName[id] || id}
                     </Text>
@@ -83,9 +87,7 @@ export function ProblemStatementShow({ data }: { data: StandardProblemStatement
                 return <ShowSimple key={index + 1} id={index + 1} ind={item.in} out={item.out} />;
             });
             return (
-                <>
-                    {' '}
-                    {/* deepscan-disable-line */}
+                <> {/* deepscan-disable-line */}
                     <Text size={18} fw={600}>
                         样例组
                     </Text>
@@ -137,7 +139,7 @@ export function ProblemTitle({ title, source, mode, setMode }: ProblemTitleProp)
                     </Button>
                     &nbsp;
                     <Button variant={'light'} size={'xs'}>
-                        保存至题单
+                        跳转至CPH
                     </Button>
                 </>
             ) : (
@@ -195,7 +197,7 @@ export function ProblemDescription({ time, memory, difficult }: ProblemDescripti
                     </Text>
                     <Group position='apart' align='flex-end' spacing={0}>
                         {difficult.hint !== '' && difficult.hint !== undefined ? (
-                            <Tooltip.Floating label='省选/NOI-'>
+                            <Tooltip.Floating label={difficult.hint}>
                                 <Text size={14} fw={300} color={difficult.color}> {/*TODO: dark system */}
                                     {difficult.text}
                                 </Text>
@@ -273,7 +275,7 @@ export function SyncProblemSubmit() {
         <Space h={10} />
         <Button size={'xs'} className={'shadowButton'}>同步</Button>
         </div>
-        <Center style={{ alignItems: 'center', display: 'flex' }}><Text fw={700} color={'dimmed'} size={14} style={{ alignItems: 'center', display: 'flex' }}><IconChevronsDown stroke={2} size={14} ></IconChevronsDown>&nbsp;通过记录同步</Text></Center>
+        <Center style={{ alignItems: 'center', display: 'flex' }}><Text fw={700} color={'dimmed'} size={14} style={{ alignItems: 'center', display: 'flex' }}><IconChevronsDown stroke={2.4} size={15} ></IconChevronsDown>&nbsp;通过记录同步</Text></Center>
     </Tabs.Panel>);
 }
 
@@ -353,10 +355,35 @@ export function DirectProblemSubmit() {
     </Tabs.Panel>);
 }
 
-export function ProblemSubmit() {
+interface TagCardProp {
+    event: TagView[];
+    algorithm: TagView[];
+}
 
+export function TagCard({event, algorithm}: TagCardProp) {
+    const eventShow = event.map((item: TagView) => {
+        return (
+            <Badge key={item.id} size='sm' radius='xs' mr={5} color={item.color || 'blue'}>{item.hint || item.id}</Badge>
+        )
+    })
+    const algorithmShow = algorithm.map((item: TagView) => {
+        return (
+            <Badge key={item.id} size='sm' radius='xs' mr={5} color={item.color || 'blue'}>{item.hint || item.id}</Badge>
+        )
+    })
+    const [showAlgorithm, setStatusAlgorithm]: readonly['close' | 'show', (val?: 'close' | 'show') => void] = useToggle(['close', 'show']);
+    return (<StandardCard title='分类'>
+        {eventShow}
+        {showAlgorithm === 'show' ? algorithmShow : <></>}
+        <Space h={5} />
+        <Center><Button onClick={() => {setStatusAlgorithm()}} size='xs' variant="subtle" color="gray" compact>{showAlgorithm === 'show' ? '收起算法标签' : '展开算法标签'}</Button></Center>
+    </StandardCard>);
 }
 
+// export function ProblemSubmit() {
+
+// }
+
 // export function ShowCard() {
 
 // }
diff --git a/packages/ui/src/handlers/problemHandler.ts b/packages/ui/src/handlers/problemHandler.ts
@@ -1,26 +1,12 @@
+import { Problem } from 'rmjac-declare/problem';
 import { fetch } from '../interfaces/data';
 
-interface RegisterProp {
-    email: string;
-    username: string;
-    password: string;
-    gender: string;
-}
-
-interface LoginProp {
-    email: string;
-    password: string;
-}
-
-interface Response {
+interface ResponseProblem {
     status: 'success' | 'error';
-    msg?: string;
-    type?: string;
-    data?: unknown;
-    param?: string;
+    data?: Problem;
 }
 
-export async function handleProblem(pid: string): Promise<any> {
+export async function handleProblem(pid: string): Promise<ResponseProblem> {
     const data = await fetch('problem', 'view', { pid });
     return data;
 }
diff --git a/packages/ui/src/interfaces/data.tsx b/packages/ui/src/interfaces/data.tsx
@@ -9,6 +9,7 @@ export async function fetch(handler: string, operation: string, data: any) {
 }
 
 export async function updateNewPageBackEndData(path: string) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const datas = await axios.get(`${window.web?.link || ''}${path}?onlyJSON`);
     // window.web = datas.data;
     return ;