ui: make ui interface with json

rotriw · Aug 19, 2023 · da060a0 · da060a0
1 parent 1a7e5fa
commit da060a0
Show file tree

Hide file tree

Showing 11 changed files with 381 additions and 343 deletions.
diff --git a/packages/core/model/problem.ts b/packages/core/model/problem.ts
@@ -25,9 +25,8 @@ export interface ProblemSchema {
     sourceid?: string[];
     pid: number;
     sources?: ProblemSource[];
-    content?: ProblemContent;
+    defaultVersion?: string;
     version?: Record<string, ProblemContent>;
-    versionDisplay?: Record<string, string>;
     tags?: string[];
     algorithm?: string[];
     timeLimit: number | string;

diff --git a/packages/declare/problem.ts b/packages/declare/problem.ts
@@ -23,7 +23,8 @@ export interface StandardProblemStatement extends Record<string, Array<string> |
 * 标准格式 / 全局传输格式
 * */
 export interface Problem { //Standard Problem Schema
-    statement: StandardProblemStatement; // Statement
+    version: Record<string, StandardProblemStatement>; // Statement
+    defaultVersion: string; // default
     title: string;
     sources: {
         platform: string; // 中文
@@ -36,7 +37,7 @@ export interface Problem { //Standard Problem Schema
         platform: string;
         pid: string;
         allowPublic: boolean;
-    }[]; // 可接受的平台及其题目提交位置
+    }[]; // 可接受提交的平台及其题目提交位置
     history?: {
         score: string;
     }; // If user login.

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -48,6 +48,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
     "react-use": "^17.4.0",

diff --git a/packages/ui/src/app.tsx b/packages/ui/src/app.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { MantineProvider, ColorScheme, createEmotionCache } from '@mantine/core';
+import { MantineProvider, ColorScheme, createEmotionCache, useMantineTheme } from '@mantine/core';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Root } from './structure/root';
 import HomePage from './pages/home';
@@ -67,13 +67,14 @@ function App() {
                             },
                             'html, body': {
                                 backgroundColor: theme.colorScheme === 'dark' ? '#2C2E33 !important' : 'white !important',
-                            }
+                            },
                         }),
                         shadows: {
                             xs: '0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1);',
                         },
                     }}
                 >
+
                     {window?.web?.type === 'back' ? (
                         <Root onThemeChange={onThemeChange} type='direct'>
                             {// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -87,8 +88,8 @@ function App() {
                                     <Route path='' element={<Root type='route' onThemeChange={onThemeChange} />}>
                                         <Route path='' element={<SubmissionResultPage></SubmissionResultPage>} />
                                         <Route path='login' element={<LoginPage></LoginPage>} />
-                                        
-                                        <Route path='problem/:id' element={<ProblemViewPage></ProblemViewPage>} />
+
+                                        <Route path='problem/:pid' element={<ProblemViewPage></ProblemViewPage>} />
                                         <Route path='problem/create' element={<ProblemEditor></ProblemEditor>} />
                                     </Route>
                                 </Routes>

diff --git a/packages/ui/src/components/problem.tsx b/packages/ui/src/components/problem.tsx
@@ -1,8 +1,9 @@
 import { PlatformToCNName, StandardProblemStatement, StatementToCNName } from 'rmjac-declare/problem';
-import { Box, Button, Code, Group, Space, Text, Tooltip, useMantineTheme } from '@mantine/core';
+import { Alert, 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 { IconArrowLeft } from '@tabler/icons-react';
+import { IconAlertCircle, IconArrowLeft, IconChevronsDown } from '@tabler/icons-react';
+import { Editor } from '@monaco-editor/react';
 
 interface SimpleShowProp {
     key: number | string;
@@ -16,25 +17,43 @@ function ShowSimple({ id, ind, out }: SimpleShowProp) {
     return (
         <>
             <Text size={16} fw={600}>
-                样例# {id}
+                样例 #{id}
             </Text>
-            <Space h={5}></Space>
+            <Space h={10}></Space>
             <Group grow>
                 <div>
-                    <Text size={14} fw={500}>
-                        输入样例
-                    </Text>
+                    <Grid>
+                        <Grid.Col span={10}>
+                            <Text size={14} fw={500}>
+                                输入样例
+                            </Text>
+                        </Grid.Col>
+                        <Grid.Col span={2}>
+                            <Button fullWidth color='indigo' variant='light' compact size='xs'>
+                                复制
+                            </Button>
+                        </Grid.Col>
+                    </Grid>
                     <Space h={2}></Space>
-                    <Code block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
+                    <Code h={80} block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
                         {ind}
                     </Code>
                 </div>
                 <div>
-                    <Text size={14} fw={500}>
-                        输出样例
-                    </Text>
+                    <Grid>
+                        <Grid.Col span={10}>
+                            <Text size={14} fw={500}>
+                                输出样例
+                            </Text>
+                        </Grid.Col>
+                        <Grid.Col span={2}>
+                            <Button fullWidth color='indigo' variant='light' compact size='xs'>
+                                复制
+                            </Button>
+                        </Grid.Col>
+                    </Grid>
                     <Space h={2}></Space>
-                    <Code block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
+                    <Code h={80} block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
                         {out}
                     </Code>
                 </div>
@@ -47,13 +66,12 @@ function ShowSimple({ id, ind, out }: SimpleShowProp) {
 export function ProblemStatementShow({ data }: { data: StandardProblemStatement }) {
     const items = data.showProp.map((id) => {
         const item = data[id] as string;
-        if (item !== 'simples')
+        if (id !== 'simples')
             return (
                 <>
-                    {' '}
                     {/* deepscan-disable-line */}
                     <Text size={18} fw={600}>
-                        {StatementToCNName[item]}
+                        {StatementToCNName[id] || id}
                     </Text>
                     <Space h={10}></Space>
                     <div dangerouslySetInnerHTML={{ __html: item || '' }}></div>
@@ -71,8 +89,9 @@ export function ProblemStatementShow({ data }: { data: StandardProblemStatement
                     <Text size={18} fw={600}>
                         样例组
                     </Text>
-                    <Space h={15} />
+                    <Space h={10} />
                     {res}
+                    <Space h={20}></Space>
                 </>
             );
         }
@@ -193,6 +212,147 @@ export function ProblemDescription({ time, memory, difficult }: ProblemDescripti
     );
 }
 
+//TODO
+export function SyncProblemSubmit() {
+
+    return (<Tabs.Panel value="sync">
+    <Group>
+        <NativeSelect
+            data={[
+                {
+                    label: '洛谷',
+                    value: 'Luogu',
+                }
+            ]}
+            label='平台'
+            name='platform'
+            w={100}
+            variant='filled'
+            rightSection={<></>}
+            rightSectionWidth={1}
+        />
+        <NativeSelect
+            data={[
+                {
+                    label: 'smallfangddasdfsasdfaslfjadskl',
+                    value: '99640',
+                },
+            ]}
+            label='同步帐号'
+            name='private'
+            variant='filled'
+            rightSection={<></>}
+            rightSectionWidth={20}
+        />
+    </Group>
+    <Space h={10} />
+    <Button size={'xs'} className={'shadowButton'}>同步</Button>
+    <Space h={5} />
+    <div style={{display: 'none'}}><Divider my="xs" label={'通过提交记录同步'} labelPosition="center" />
+    <Space  h={5} />
+    <Group>
+            <NativeSelect
+                data={[
+                    {
+                        label: '洛谷',
+                        value: 'Luogu',
+                    }
+                ]}
+                label='平台'
+                name='platform'
+                description={'已通过的提交'}
+                w={100}
+                variant='filled'
+                rightSection={<></>}
+                rightSectionWidth={1}
+            />
+            <Input.Wrapper label="提交记录" description={'RID / link 均可'}>
+                <Input w={300} variant={'filled'} placeholder={'数字 / 链接 / 字符串'}  />
+            </Input.Wrapper>
+        </Group>
+        <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>
+    </Tabs.Panel>);
+}
+
+
+//TODO
+export function DirectProblemSubmit() {
+    const theme = useMantineTheme();
+    return (<Tabs.Panel value='direct'>
+    <Group>
+        <NativeSelect
+            data={[
+                {
+                    label: 'C++',
+                    value: 'cpp',
+                },
+                {
+                    label: 'C',
+                    value: 'c',
+                },
+                {
+                    label: 'Java',
+                    value: 'java',
+                },
+            ]}
+            label='语言'
+            name='language'
+            w={100}
+            variant='filled'
+            rightSection={<></>}
+            rightSectionWidth={1}
+        />
+        <NativeSelect
+            data={[
+                {
+                    label: '洛谷',
+                    value: 'Luogu',
+                }
+            ]}
+            label='平台'
+            name='platform'
+            w={100}
+            variant='filled'
+            rightSection={<></>}
+            rightSectionWidth={1}
+        />
+        <NativeSelect
+            data={[
+                {
+                    label: '公共帐号',
+                    value: 'private',
+                },
+                {
+                    label: 'smallfangddasdfsasdfaslfjadskl',
+                    value: '99640',
+                },
+            ]}
+            label='提交账号'
+            name='private'
+            variant='filled'
+            rightSection={<></>}
+            rightSectionWidth={20}
+        />
+
+    </Group>
+    <Space h={10} />
+    <Alert radius={'md'} icon={<IconAlertCircle size="1rem" />} title="提示" color="red">
+        <Text size={12.5} color={theme.colorScheme === 'dark' ? theme.colors.red[0] :  theme.colors.red[8]}>
+            您的帐号未配置 / 您可以点击 <span style={{color: theme.colorScheme === 'dark' ? theme.colors.blue[0] :  theme.colors.blue[8]}}>
+        这里</span> 进行临时登录。
+        </Text>
+    </Alert>
+    <Space h={5} />
+    <Space h={20} />
+    <Editor height={300}></Editor>
+    <Space h={10} />
+    <Button size={'xs'} className={'shadowButton'}>提交代码</Button>
+    </Tabs.Panel>);
+}
+
 export function ProblemSubmit() {
 
 }

diff --git a/packages/ui/src/handlers/problemHandler.ts b/packages/ui/src/handlers/problemHandler.ts
@@ -0,0 +1,26 @@
+import { fetch } from '../interfaces/data';
+
+interface RegisterProp {
+    email: string;
+    username: string;
+    password: string;
+    gender: string;
+}
+
+interface LoginProp {
+    email: string;
+    password: string;
+}
+
+interface Response {
+    status: 'success' | 'error';
+    msg?: string;
+    type?: string;
+    data?: unknown;
+    param?: string;
+}
+
+export async function handleProblem(pid: string): Promise<any> {
+    const data = await fetch('problem', 'view', { pid });
+    return data;
+}