Skip to content

Commit

Permalink
ui: change problem view page
Browse files Browse the repository at this point in the history
  • Loading branch information
@smallfangqwq
smallfangqwq committed Sep 17, 2023
1 parent 1c80179 commit 0d1b1cd
Show file tree
Hide file tree
Showing 7 changed files with 163 additions and 120 deletions.
87 changes: 43 additions & 44 deletions packages/ui/src/components/problem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
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, TypographyStylesProvider, useMantineTheme } from '@mantine/core';
import { Alert, Badge, Box, Button, Center, Code, Card, Divider, Grid, Group, Input, NativeSelect, Space, Tabs, Text, Tooltip, TypographyStylesProvider, useMantineTheme } from '@mantine/core';

Check warning on line 2 in packages/ui/src/components/problem.tsx

View workflow job for this annotation

GitHub Actions / Run eslint scanning 

'Card' is defined but never used
import React from 'react';
import { NoStyleCard, StandardCard } from './card';
import { IconAlertCircle, IconArrowLeft, IconChevronsDown } from '@tabler/icons-react';
Expand Down Expand Up @@ -72,24 +72,30 @@ export function ProblemStatementShow({ data }: { data: StandardProblemStatement
const items = data.showProp.map((id) => {
const item = data[id] as string;

if (id !== 'samples')
if (id !== 'samples') {

if (item === '') {
return (<></>)
}
return (
<> {/* deepscan-disable-line */}
<Text size={18} fw={600}>
<Text size={16} fw={600}>
{StatementToCNName[id] || id}
</Text>
<Space h={10}></Space>
<TypographyStylesProvider fz={16}><div dangerouslySetInnerHTML={{ __html: item || '' }}></div></TypographyStylesProvider>
<Space h={20}></Space>
<Space h={5}></Space>
<TypographyStylesProvider fw={500} fz={15}>
<div style={{color: '#424344'}} dangerouslySetInnerHTML={{__html: item || ''}}></div>
</TypographyStylesProvider>
<Space h={5}></Space>
</>
);
else {
} else {
const res = ((item as unknown) as Array<{ in: string; out: string }>).map((item, index) => {
return <ShowSample key={index + 1} id={index + 1} ind={item.in} out={item.out} />;
});
return (
<> {/* deepscan-disable-line */}
<Text size={18} fw={600}>
<Text size={16} fw={600}>
{t('problem.simpleGroup')}
</Text>
<Space h={10} />
Expand All @@ -99,7 +105,8 @@ export function ProblemStatementShow({ data }: { data: StandardProblemStatement
);
}
});
return <NoStyleCard>{items}</NoStyleCard>;
const theme = useMantineTheme();

Check warning on line 108 in packages/ui/src/components/problem.tsx

View workflow job for this annotation

GitHub Actions / Run eslint scanning 

'theme' is assigned a value but never used
return <>{items}</>;
}

interface ProblemTitleProp {
Expand All @@ -117,7 +124,6 @@ export function ProblemTitle({ title, source, mode, setMode }: ProblemTitleProp)
const sourceCode = source.map((item, index) => {
return ` ${index === 0 ? '' : '/'} ${PlatformToCNName[item.platform] || item.platform} ${item.pid}`;
});
// const {t} = useTranslation();
return (
<NoStyleCard>
<Text size={18} fw={600}>
Expand Down Expand Up @@ -172,49 +178,42 @@ interface ProblemDescriptionProp {
export function ProblemDescription({ time, memory, difficult }: ProblemDescriptionProp) {
return (
<NoStyleCard>
<Group grow>
<Box>
<Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
{t('problem.timelimit')}
</Text>
<Group position='apart' align='flex-end' spacing={0}>
<Text size={time.length >= 13 ? 10 : 12} fw={300}>
{time}
</Text>
</Group>
</Box>
<Box>
<Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
{t('problem.memorylimit')}

<Box>
<Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
{t('problem.timelimit')}
</Text>
<Group position='apart' align='flex-end' spacing={0}>
<Text size={time.length >= 13 ? 10 : 12} fw={300}>
{time}
</Text>
<Group position='apart' align='flex-end' spacing={0}>
<Text size={12} fw={300}>
{memory.length > 8 ? <Tooltip.Floating label={memory}>
</Group>
</Box>
<Box>
<Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
{t('problem.memorylimit')}
</Text>
<Group position='apart' align='flex-end' spacing={0}>
<Text size={12} fw={300}>
{memory.length > 8 ? <Tooltip.Floating label={memory}>
<Text size={14} fw={300}>
{memory.slice(0, 8)}...
{memory.slice(0, 8)}...
</Text>
</Tooltip.Floating>
:
<>{memory}</>}
</Text>
</Group>
</Box>
:
<>{memory}</>}
</Text>
</Group>
</Box>
<Group grow>
<Box>
<Text tt='uppercase' fz='xs' c='dimmed' fw={700}>
{t('problem.difficult')}
</Text>
<Group position='apart' align='flex-end' spacing={0}>
{difficult.hint !== '' && difficult.hint !== undefined ? (
<Tooltip.Floating label={difficult.hint}>
<Text size={12} fw={300} color={difficult.color}> {/*TODO: dark system */}
{difficult.text}
</Text>
</Tooltip.Floating>
) : (
<Text size={12} fw={300} color={difficult.color}>
{difficult.text}
</Text>
)}
<Text size={12} fw={300} color={difficult.color}>
{difficult.text}
</Text>
</Group>
</Box>
</Group>
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
"outputSample": "Out",
"inSample": "In",
"simple": "Sample",
"algorithm": "{{status}} Algorithm Tag"
"algorithm": "{{status}} Algorithm Tag",
"history-score": ""
},
"platform": {
"luogu": "Luogu"
Expand Down
84 changes: 55 additions & 29 deletions packages/ui/src/pages/event.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { EventTask } from 'rmjac-declare/event';
import React from 'react';
import { Container, Grid, Space, Table, Text, useMantineTheme } from '@mantine/core';
import { NoStyleCard } from '../components/card';
import { IconInfoCircle } from '@tabler/icons-react';
import {Button, Container, Grid, Group, Space, Table, Text, useMantineTheme} from '@mantine/core';
import {NoStyleCard, StandardCard} from '../components/card';
import {IconArrowLeft, IconExternalLink, IconHistory, IconInfoCircle} from '@tabler/icons-react';

Check warning on line 5 in packages/ui/src/pages/event.tsx

View workflow job for this annotation

GitHub Actions / Run eslint scanning 

'IconArrowLeft' is defined but never used

Check warning on line 5 in packages/ui/src/pages/event.tsx

View workflow job for this annotation

GitHub Actions / Run eslint scanning 

'IconExternalLink' is defined but never used

Check warning on line 5 in packages/ui/src/pages/event.tsx

View workflow job for this annotation

GitHub Actions / Run eslint scanning 

'IconHistory' is defined but never used
import {t} from 'i18next';
import {RightIcons} from './problemView';

export function EventShow() {
const theme = useMantineTheme();
Expand Down Expand Up @@ -40,7 +42,7 @@ export function EventShow() {
return (<>
<Container>
<Grid>
<Grid.Col span={12}>
<Grid.Col span={9}>
<NoStyleCard>
<Text size={18} fw={600}>
{data.title}
Expand All @@ -49,23 +51,61 @@ export function EventShow() {
<Text size={13} fw={300} color={theme.colors.gray[theme.colorScheme === 'dark' ? 4 : 7]}>
{data.id}
</Text>
<Space h={5} />
<Button
size={'xs'}
>
收藏事件
</Button>
</NoStyleCard>
</Grid.Col>
</Grid>
<Grid>
<Grid.Col span={4}>

<Space h={10} />
<NoStyleCard>
<Table>
<thead>
<tr>
<th>题目顺序</th>
<th>题目</th>
<th>状态</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
</NoStyleCard>
</Grid.Col>
<Grid.Col span={3}>
<StandardCard title={'关于 Event'}>
<Text size={14} fw={400}>
<div dangerouslySetInnerHTML={{__html: data.description}}></div>
</Text>
</NoStyleCard>
</StandardCard>
<Space h={10} />
<NoStyleCard>
<Text size={14} fw={400}>
<span style={{fontWeight: 600}}>举行时间: </span>2011<br />
<span style={{fontWeight: 600}}>题目数: </span>6<br />
<span style={{fontWeight: 600}}>状态: </span>已结束<br />
</Text>
<Group grow>
<Text color="dimmed" fw={700} size={'xs'}>
举行时间
</Text>
<Text color="blue" fw={700} size={'xs'}>
2011
</Text>
</Group>
<Group grow>
<Text color="dimmed" fw={700} size={'xs'}>
题目数
</Text>
<Text color="blue" fw={700} size={'xs'}>
6
</Text>
</Group>
<Group grow>
<Text color="dimmed" fw={700} size={'xs'}>
状态
</Text>
<Text color="dimmed" fw={700} size={'xs'}>
已结束
</Text>
</Group>

</NoStyleCard>
<Space h={10} />
<NoStyleCard>
Expand All @@ -77,21 +117,7 @@ export function EventShow() {
</Text>
</NoStyleCard>
</Grid.Col>
<Grid.Col span={8}>
<NoStyleCard>
<Table>
<thead>
<tr>
<th>题目顺序</th>
<th>题目</th>
<th>状态</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
</NoStyleCard>
</Grid.Col>
</Grid>
</Container>
</>)
}
}
72 changes: 46 additions & 26 deletions packages/ui/src/pages/problemView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Text,
Tabs,
Modal,
useMantineTheme
useMantineTheme, Card, Button, SegmentedControl
} from '@mantine/core';
import React, { useEffect, useState } from 'react';
import { NoStyleCard } from '../components/card';
Expand Down Expand Up @@ -118,44 +118,59 @@ export function ProblemViewPageIn({data, state, islogin}: ProblemViewPage) {
const [opened, setOpened] = useState(false);
const theme = useMantineTheme();
const LeftGrid = mode === 'view' ? (<>
<Tabs variant='pills' onTabChange={async(item) => {
setUTab(item as string)
await setStatement(data.version[item as string])
}} styles={standardTab} value={uTab}>
<NoStyleCard>
<Modal withCloseButton={false} opened={opened} onClose={() => {setOpened(false)}} >
<Text size={14} fw={600}>{t('Choose Version')}</Text>
<Tabs.List>
<Tabs.Tab value={data.defaultVersion}>{PlatformToCNName[data.defaultVersion] || data.defaultVersion}</Tabs.Tab>
{statementVersion}
</Tabs.List>
</Modal>
<Text fw={600} size={14}>当前展示版本为 {PlatformToCNName[uTab] || uTab}</Text>
<Text fw={400} size={10} color='dimmed'>Version: Luogu / root. <a href='#change-version' style={{textDecoration: 'none', color: theme.colors.blue[9]}} onClick={() => {setOpened(true)}}>点击更换版本</a></Text>
</NoStyleCard>
<Space h={10}/>
<ProblemStatementShow data={statement} />
</Tabs>
<>
<NoStyleCard>
<Card.Section p={'sm'} pl={15} mb={5}>
<Text size={16} fw={600}>{data.title}</Text>
<Text size={12} fw={400} color={'dimmed'}>时间限制: {data.limit.time} · 空间限制: {data.limit.memory} · 难度：{data.limit.difficult.text}</Text>
</Card.Section>
<ProblemStatementShow data={statement} />
</NoStyleCard>
</>
</>) : (<>
<Tabs onTabChange={(item) => {
setSubmitMode(item as string)
}} value={submit} styles={standardTab}>
}} value={submit} variant={'pills'}>

<NoStyleCard>
<Card.Section p={'sm'} pl={15} mb={5}>
<Text size={16} fw={600}>{data.title}</Text>
<Text size={12} fw={400} color={'dimmed'}>时间限制: {data.limit.time} · 空间限制: {data.limit.memory} · 难度：{data.limit.difficult.text}</Text>
</Card.Section>
<Tabs.List>
<Tabs.Tab value="direct">{t('problem.directsubmit')}</Tabs.Tab>
<Tabs.Tab value="sync">{t('problem.syncsubmit')}</Tabs.Tab>
</Tabs.List>
</NoStyleCard>
<Space h={10}/>
<NoStyleCard>
<Space h={20}/>
<DirectProblemSubmit />
<SyncProblemSubmit />
</NoStyleCard>
</Tabs>
</>);
const RightGrid = (<>
<ProblemDescription {...data.limit} />
{/*<ProblemDescription {...data.limit} />*/}

<SegmentedControl fullWidth
data={[
{ label: '题目详情', value: 'view' },
{ label: '提交', value: 'submit' },
]}
value={mode} onChange={(mode: string) => setMode(mode as 'view' | 'submit')}
/>
<Space h={10}/>
<NoStyleCard>
<Modal withCloseButton={false} opened={opened} onClose={() => {setOpened(false)}} >
<Text size={14} fw={600}>{t('Choose Version')}</Text>
<Space h={10} />
<Tabs.List>
<Tabs.Tab value={data.defaultVersion}>{PlatformToCNName[data.defaultVersion] || data.defaultVersion}</Tabs.Tab>
{statementVersion}
</Tabs.List>
</Modal>
<Text fw={600} size={14}>当前展示版本为 {PlatformToCNName[uTab] || uTab}</Text>
<Text fw={400} size={10} color='dimmed'>Version: Luogu / root. <a href='#change-version' style={{textDecoration: 'none', color: theme.colors.blue[9]}} onClick={() => {setOpened(true)}}>点击更换版本</a></Text>
</NoStyleCard>
<Space h={10} />
{islogin ? <NoStyleCard p={'null'}>
<Group p="sm" pl={'md'} grow>
<Text color="dimmed" fw={700} size={'xs'}>
Expand Down Expand Up @@ -192,10 +207,14 @@ export function ProblemViewPageIn({data, state, islogin}: ProblemViewPage) {
return (
<>
<Container>
<Tabs variant='pills' onTabChange={async(item) => {
setUTab(item as string)
await setStatement(data.version[item as string])
}} styles={standardTab} value={uTab}>
<Grid>
<Grid.Col span={9}>
<ProblemTitle setMode={setMode} title={data.title} source={data.sources} mode={mode} />
<Space h={10}></Space>
{/*<ProblemTitle setMode={setMode} title={data.title} source={data.sources} mode={mode} />*/}
{/*<Space h={10}></Space>*/}
{LeftGrid}
</Grid.Col>
<Grid.Col span={3}>
Expand All @@ -204,6 +223,7 @@ export function ProblemViewPageIn({data, state, islogin}: ProblemViewPage) {
<TagCard event={data.tags || []} algorithm={data.algorithm || []} />
</Grid.Col>
</Grid>
</Tabs>
</Container>
</>
)
Expand Down
Loading

0 comments on commit 0d1b1cd

Please sign in to comment.