ui: problem change to interface first step.

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"

packages/core/model/problem.ts

@@ -29,6 +29,7 @@ export interface ProblemSchema {
     version?: Record<string, ProblemContent>;
     versionDisplay?: Record<string, string>;
     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();

packages/declare/README.md

@@ -0,0 +1 @@
+This package for global to make message more standard.

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
+}

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, Array<string> | 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<string, string | undefined> = {
+    background: '题目背景',
+    statement: '题目描述',
+    inFormer: '输入格式',
+    outFormer: '输出格式',
+    simples: '样例组',
+    hint: '提示',
+    pdf: '题目PDF'
+};
+
+export const PlatformToCNName: Record<string, string | undefined> = {
+    luogu: '洛谷',
+};

packages/ui/src/app.css

@@ -7,4 +7,19 @@
 
 .rmjac-Container-root {
     max-width: 75% !important;
-}
+}
+
+.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;
+}

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 (
+        <>
+            <Text size={16} fw={600}>
+                样例# {id}
+            </Text>
+            <Space h={5}></Space>
+            <Group grow>
+                <div>
+                    <Text size={14} fw={500}>
+                        输入样例
+                    </Text>
+                    <Space h={2}></Space>
+                    <Code block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
+                        {ind}
+                    </Code>
+                </div>
+                <div>
+                    <Text size={14} fw={500}>
+                        输出样例
+                    </Text>
+                    <Space h={2}></Space>
+                    <Code block style={{ backgroundColor: theme.colorScheme === 'dark' ? theme.colors?.dark[7] : theme.colors?.gray[1] }}>
+                        {out}
+                    </Code>
+                </div>
+            </Group>
+            <Space h={15}></Space>
+        </>
+    );
+}
+
+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 */}
+                    <Text size={18} fw={600}>
+                        {StatementToCNName[item]}
+                    </Text>
+                    <Space h={10}></Space>
+                    <div dangerouslySetInnerHTML={{ __html: item || '' }}></div>
+                    <Space h={20}></Space>
+                </>
+            );
+        else {
+            const res = ((item as unknown) as Array<{ in: string; out: string }>).map((item, index) => {
+                return <ShowSimple key={index + 1} id={index + 1} ind={item.in} out={item.out} />;
+            });
+            return (
+                <>
+                    {' '}
+                    {/* deepscan-disable-line */}
+                    <Text size={18} fw={600}>
+                        样例组
+                    </Text>
+                    <Space h={15} />
+                    {res}
+                </>
+            );
+        }
+    });
+    return <NoStyleCard>{items}</NoStyleCard>;
+}
+
+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 (
+        <NoStyleCard>
+            <Text size={18} fw={600}>
+                {title}
+            </Text>
+            <Space h={1}></Space>
+            <Text size={13} fw={300} color={theme.colors.gray[theme.colorScheme === 'dark' ? 4 : 7]}>
+                {sourceCode}
+            </Text>
+            <Space h={5} />
+            {mode === 'view' ? (
+                <>
+                    <Button
+                        variant={'filled'}
+                        size={'xs'}
+                        onClick={() => {
+                            setMode('submit');
+                        }}
+                    >
+                        远程提交
+                    </Button>
+                    &nbsp;
+                    <Button variant={'light'} size={'xs'}>
+                        保存至题单
+                    </Button>
+                </>
+            ) : (
+                <Button
+                    variant={'light'}
+                    size={'xs'}
+                    onClick={() => {
+                        setMode('view');
+                    }}
+                >
+                    <IconArrowLeft size={14} /> &nbsp;返回题目
+                </Button>
+            )}
+        </NoStyleCard>
+    );
+}
+
+interface ProblemDescriptionProp {
+    time: string;
+    memory: string;
+    difficult: {
+        text: string;
+        hint?: string;
+        color: string;
+    };
+}
+
+export function ProblemDescription({ time, memory, difficult }: ProblemDescriptionProp) {
+    return (
+        <NoStyleCard>
+            <Group grow>
+                <Box>
+                    <Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
+                        时间限制
+                    </Text>
+                    <Group position='apart' align='flex-end' spacing={0}>
+                        <Text size={14} fw={300}>
+                            {time}
+                        </Text>
+                    </Group>
+                </Box>
+                <Box>
+                    <Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
+                        空间限制
+                    </Text>
+                    <Group position='apart' align='flex-end' spacing={0}>
+                        <Text size={14} fw={300}>
+                            {memory}
+                        </Text>
+                    </Group>
+                </Box>
+                <Box>
+                    <Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
+                        难度
+                    </Text>
+                    <Group position='apart' align='flex-end' spacing={0}>
+                        {difficult.hint !== '' && difficult.hint !== undefined ? (
+                            <Tooltip.Floating label='省选/NOI-'>
+                                <Text size={14} fw={300} color={difficult.color}> {/*TODO: dark system */}
+                                    {difficult.text}
+                                </Text>
+                            </Tooltip.Floating>
+                        ) : (
+                            <Text size={14} fw={300} color={difficult.color}>
+                                {difficult.text}
+                            </Text>
+                        )}
+                    </Group>
+                </Box>
+            </Group>
+        </NoStyleCard>
+    );
+}
+
+export function ProblemSubmit() {
+
+}
+
+// export function ShowCard() {
+
+// }

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,