diff --git a/package.json b/package.json index 3a752e8..d5ba672 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "rmjac-config": "*", "rmjac-core": "*", "rmjac-web": "*", + "rmjac-declare": "*", "source-map-support": "^0.5.21", "uuid": "^9.0.0", "yargs": "^17.7.2" diff --git a/packages/core/model/problem.ts b/packages/core/model/problem.ts index 478f42d..8da7825 100644 --- a/packages/core/model/problem.ts +++ b/packages/core/model/problem.ts @@ -29,6 +29,7 @@ export interface ProblemSchema { version?: Record; versionDisplay?: Record; tags?: string[]; + algorithm?: string[]; timeLimit: number | string; memoryLimit: number | string; difficult: number | string; @@ -92,6 +93,7 @@ export class ProblemModel { Object.assign(content, {pid}); await db.update('problem', {pid}, content); } + } export const problem = new ProblemModel(); \ No newline at end of file diff --git a/packages/declare/README.md b/packages/declare/README.md new file mode 100644 index 0000000..216eac5 --- /dev/null +++ b/packages/declare/README.md @@ -0,0 +1 @@ +This package for global to make message more standard. diff --git a/packages/declare/package.json b/packages/declare/package.json new file mode 100644 index 0000000..b273745 --- /dev/null +++ b/packages/declare/package.json @@ -0,0 +1,8 @@ +{ + "name": "rmjac-declare", + "version": "0.1.0", + "description": "Project Global Declare.", + "main": "index.js", + "author": "smallfang", + "private": false +} diff --git a/packages/declare/problem.ts b/packages/declare/problem.ts new file mode 100644 index 0000000..c5ca35e --- /dev/null +++ b/packages/declare/problem.ts @@ -0,0 +1,69 @@ +export type StandardProblemStatementProp = 'background' | 'statement' | 'inFormer' | 'outFormer' | 'simples' | 'hint' | string; + +/* +* Standard Problem Statement Format. +* 标准题目陈述格式 +* */ +export interface StandardProblemStatement extends Record | string | undefined | Array<{in: string, out: string}>> { // Standard Problem Statement + background?: string; // background. / 题目背景 / Only HTML + statement?: string; // statement. / 题目描述 / Only HTML + inFormer?: string; // In Former. / 输入格式 / Only HTML + outFormer?: string; // Out Former. / 输出格式 / Only HTML + simples: { + in: string; // Simple In / 样例输入 / Texts + out: string; // Simple Out / 样例输出 / Texts + }[]; // Simples / 样例组 / Texts / Must Required([] if null) + hint?: string; // Hint / 提示 / Only HTML + showProp: StandardProblemStatementProp[]; // show Prop / 展示的题目格式 / Must Required([] if null) +} + + +/* +* Standard Format / Universal Format. +* 标准格式 / 全局传输格式 +* */ +export interface Problem { //Standard Problem Schema + statement: StandardProblemStatement; // Statement + title: string; + sources: { + platform: string; // 中文 + pid: string; // 题号 + }[]; + tags?: string[]; // events + algorithm?: string[]; // 算法标签 + translate?: StandardProblemStatement; // translate version. + allowedPlatform?: { + platform: string; + pid: string; + allowPublic: boolean; + }[]; // 可接受的平台及其题目提交位置 + history?: { + score: string; + }; // If user login. + limit: { + time: string; + memory: string; + difficult: { + text: string; + color: string; + hint: string; + } + } +} + +/* +* 英语名称的展示问题 （i18n影响） +* */ +export const StatementToCNName: Record = { + background: '题目背景', + statement: '题目描述', + inFormer: '输入格式', + outFormer: '输出格式', + simples: '样例组', + hint: '提示', + pdf: '题目PDF' +}; + +export const PlatformToCNName: Record = { + luogu: '洛谷', +}; \ No newline at end of file diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css index 60f4b9d..fa0130c 100644 --- a/packages/ui/src/app.css +++ b/packages/ui/src/app.css @@ -7,4 +7,19 @@ .rmjac-Container-root { max-width: 75% !important; -} \ No newline at end of file +} + +.shadowButton:hover { + animation: dynamics 2s ease infinite; + -webkit-animation: dynamics 2s ease infinite; + -moz-animation: dynamics 2s ease infinite; + box-shadow: rgba(51, 154, 240, 10) 0px 0px 20px; +} + +.shadowButton:active { + box-shadow: rgba(51, 154, 240, 10) 0px 0px 20px; +} + +.shadowButton { + transition: all 0.1s ease-in-out; +} diff --git a/packages/ui/src/components/problem.tsx b/packages/ui/src/components/problem.tsx new file mode 100644 index 0000000..af37cbf --- /dev/null +++ b/packages/ui/src/components/problem.tsx @@ -0,0 +1,202 @@ +import { PlatformToCNName, StandardProblemStatement, StatementToCNName } from 'rmjac-declare/problem'; +import { Box, Button, Code, Group, Space, Text, Tooltip, useMantineTheme } from '@mantine/core'; +import React from 'react'; +import { NoStyleCard } from './card'; +import { IconArrowLeft } from '@tabler/icons-react'; + +interface SimpleShowProp { + key: number | string; + id: number | string; + ind: string; + out: string; +} + +function ShowSimple({ id, ind, out }: SimpleShowProp) { + const theme = useMantineTheme(); + return ( + <> + + 样例# {id} + + + +
+ + 输入样例 + + + + {ind} + +
+
+ + 输出样例 + + + + {out} + +
+ + + + ); +} + +export function ProblemStatementShow({ data }: { data: StandardProblemStatement }) { + const items = data.showProp.map((id) => { + const item = data[id] as string; + if (item !== 'simples') + return ( + <> + {' '} + {/* deepscan-disable-line */} + + {StatementToCNName[item]} + + +
+ + + ); + else { + const res = ((item as unknown) as Array<{ in: string; out: string }>).map((item, index) => { + return ; + }); + return ( + <> + {' '} + {/* deepscan-disable-line */} + + 样例组 + + + {res} + + ); + } + }); + return {items}; +} + +interface ProblemTitleProp { + title: string; + source: { + platform: string; + pid: string; + }[]; + mode: string; + setMode: (value: 'view' | 'submit') => void; +} + +export function ProblemTitle({ title, source, mode, setMode }: ProblemTitleProp) { + const theme = useMantineTheme(); + const sourceCode = source.map((item, index) => { + return ` ${index === 0 ? '' : '/'} ${PlatformToCNName[item.platform] || item.platform} ${item.pid}`; + }); + return ( + + + {title} + + + + {sourceCode} + + + {mode === 'view' ? ( + <> + +   + + + ) : ( + + )} + + ); +} + +interface ProblemDescriptionProp { + time: string; + memory: string; + difficult: { + text: string; + hint?: string; + color: string; + }; +} + +export function ProblemDescription({ time, memory, difficult }: ProblemDescriptionProp) { + return ( + + + + + 时间限制 + + + + {time} + + + + + + 空间限制 + + + + {memory} + + + + + + 难度 + + + {difficult.hint !== '' && difficult.hint !== undefined ? ( + + {/*TODO: dark system */} + {difficult.text} + + + ) : ( + + {difficult.text} + + )} + + + + + ); +} + +export function ProblemSubmit() { + +} + +// export function ShowCard() { + +// } diff --git a/packages/ui/src/pages/problemEditor.tsx b/packages/ui/src/pages/problemEditor.tsx index e841dbe..3839bb4 100644 --- a/packages/ui/src/pages/problemEditor.tsx +++ b/packages/ui/src/pages/problemEditor.tsx @@ -126,7 +126,7 @@ export function ProblemEditor() { const editorBackGround = useEditor({ extensions: [ StarterKit, - Mathematics, + Mathematics as AnyExtension, Underline as AnyExtension, Link, Superscript as AnyExtension, @@ -139,7 +139,7 @@ export function ProblemEditor() { const editorStateMent = useEditor({ extensions: [ StarterKit, - Mathematics, + Mathematics as AnyExtension, Underline as AnyExtension, Link, Superscript as AnyExtension, @@ -152,7 +152,7 @@ export function ProblemEditor() { const editorInputFormer = useEditor({ extensions: [ StarterKit, - Mathematics, + Mathematics as AnyExtension, Underline as AnyExtension, Link, Superscript as AnyExtension, @@ -165,7 +165,7 @@ export function ProblemEditor() { const editorOutputFormer = useEditor({ extensions: [ StarterKit, - Mathematics, + Mathematics as AnyExtension, Underline as AnyExtension, Link, Superscript as AnyExtension, @@ -178,7 +178,7 @@ export function ProblemEditor() { const editorHint = useEditor({ extensions: [ StarterKit, - Mathematics, + Mathematics as AnyExtension, Underline as AnyExtension, Link, Superscript as AnyExtension, diff --git a/packages/ui/src/pages/problemView.tsx b/packages/ui/src/pages/problemView.tsx index 6ce3096..27a60ad 100644 --- a/packages/ui/src/pages/problemView.tsx +++ b/packages/ui/src/pages/problemView.tsx @@ -1,9 +1,47 @@ -import { createStyles, Box, Group, rem, Card, Container, Grid, Space, Text, Badge, Select, Button, useMantineTheme, Loader, Center, NativeSelect, Tooltip } from '@mantine/core'; -import React from 'react'; +import { + createStyles, + Box, + Divider, + Group, + rem, + Card, + Container, + Grid, + Space, + Text, + Badge, + Select, + Button, + useMantineTheme, + Loader, + Center, + NativeSelect, + Tooltip, + Tabs, Input, Alert, Menu, Code +} from '@mantine/core'; +import React, { useState } from 'react'; import { NoStyleCard, StandardCard } from '../components/card'; -import { IconBrandTelegram, IconCaretDown, IconChevronDown, IconClock, IconDatabase, IconExternalLink, IconHistory, IconLanguageHiragana, IconListSearch, IconMenuOrder, IconSend, IconTransferIn } from '@tabler/icons-react'; +import { + IconAlertCircle, + IconBrandTelegram, + IconCaretDown, + IconChevronDown, + IconClock, + IconDatabase, + IconExternalLink, + IconHistory, + IconLanguageHiragana, + IconListSearch, + IconMenuOrder, + IconSend, + IconChevronsDown, + IconTransferIn, IconChevronsUp, IconArrowLeft +} from '@tabler/icons-react'; import Editor from '@monaco-editor/react'; import { standardSelect } from '../styles/select'; +import {Prism} from '@mantine/prism'; +import { Problem, StandardProblemStatement } from 'rmjac-declare/problem'; +import { ProblemDescription, ProblemStatementShow, ProblemTitle } from '../components/problem'; const useStyles = createStyles((theme) => ({ link: { @@ -61,23 +99,199 @@ export function RightIcons({ links, active }: TableOfContentsProps) { ); } +export function ProblemViewPageIn({data, state}: {data: Problem, state: 'view' | 'submit'}) { + const [mode, setMode] = useState(state); + const LeftGrid = mode === 'view' ? (<> + + ) : (<> + + ); + const RightGrid = (<> + + ); + return ( + <> + + + + + + {LeftGrid} + + + {RightGrid} + + + + + ) +} + export function ProblemViewPage() { const theme = useMantineTheme(); + const [mode, setMode] = useState('view'); return ( <> - - - 直角三角形 - - - - 洛谷 P2216 - - + + { + console.log(item); + }} defaultValue="chat" styles={(theme) => ({ + tab: { + borderBottomWidth: 3, + fontWeight: 700 + }, + tabsList: { + borderBottomWidth: 0, + } + })}> + + + + 原版 + 翻译 + {/* 直接提交 + 同步提交 */} + {/*存档*/} + + + + {/* + + + } + rightSectionWidth={1} + /> + } + rightSectionWidth={20} + /> + + + + +
+ + + } + rightSectionWidth={1} + /> + + + + + + +
+
 通过记录同步
+ + + + } + rightSectionWidth={1} + /> + } + rightSectionWidth={1} + /> + } + rightSectionWidth={20} + /> + + + + } title="提示" color="red"> + + 您的帐号未配置 / 您可以点击 + 这里 进行临时登录。 + + + + + + + + + */} + 题目背景 @@ -89,13 +303,52 @@ a×b 的整数组成的矩阵，现请你从中找出一个 n×n 的正方形区域，使得该区域所有数中的最大值和最小值的差最小。 - 题目描述 - - 有一个 - -a×b 的整数组成的矩阵，现请你从中找出一个 - -n×n 的正方形区域，使得该区域所有数中的最大值和最小值的差最小。 + 样例组 + + + 样例#1 + + + +
+ + 输入样例 + + 10 12 +
+
+ 输出样例 + + 10 12 +
+ + + 样例 #2 + + + +
+ + + + 输入样例 + + + + + + + + 10 12 +
+
+ 输出样例 + + 10 12 +
+ 输入格式 @@ -107,104 +360,14 @@ n×n 的正方形区域，使得该区域所有数中的最大值和最小值的 一个整数C, 表示A+B - - - 提交代码 - - - } - rightSectionWidth={1} - /> - } - rightSectionWidth={1} - /> - } - rightSectionWidth={1} - /> - - - } theme={theme.colorScheme === 'dark' ? 'vs-dark' : 'light'} language='cpp' height={500}> - - - + + + + - - - - - 时间限制 - - - 1.0s~3.0s - - - - - 空间限制 - - - 1GB - - - - - 难度 - - - - Luogu/7 - - - - - + @@ -218,15 +381,7 @@ n×n 的正方形区域，使得该区域所有数中的最大值和最小值的  历史提交, keys:'send', order: 1, link: '#'}, - ]} active={''} /> - - - -  远程提交, keys:'send', order: 1, link: '#'}, - {label:
 原题连接
, order: 1, keys:'re', link: '#'}, - {label:
 保存至题单
, order: 1, keys:'save', link: '#'}, - {label:
 查看翻译
, order: 1, keys:'save', link: '#'}, + {label:
 原题链接
, order: 1, keys:'re', link: '#'}, ]} active={''} /> diff --git a/packages/ui/src/pages/submissionResult.tsx b/packages/ui/src/pages/submissionResult.tsx index 5e416e8..2fde35f 100644 --- a/packages/ui/src/pages/submissionResult.tsx +++ b/packages/ui/src/pages/submissionResult.tsx @@ -244,7 +244,7 @@ export function SubmissionResultPage() { }, }} > - +