delete: 删除项目中无用的文件
parent
6933f82ec0
commit
c80b7b0143
@ -1,281 +0,0 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import {
|
||||
Typography,
|
||||
Card,
|
||||
Form,
|
||||
Select,
|
||||
Input,
|
||||
Grid,
|
||||
Space,
|
||||
Button,
|
||||
Message,
|
||||
} from '@arco-design/web-react';
|
||||
import { FormInstance } from '@arco-design/web-react/es/Form';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
import './mock';
|
||||
|
||||
function GroupForm() {
|
||||
const t = useLocale(locale);
|
||||
const formRef = useRef<FormInstance>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
function submit(data) {
|
||||
setLoading(true);
|
||||
axios
|
||||
.post('/api/groupForm', {
|
||||
data,
|
||||
})
|
||||
.then(() => {
|
||||
Message.success(t['groupForm.submitSuccess']);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
formRef.current.validate().then((values) => {
|
||||
submit(values);
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
formRef.current.resetFields();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Form layout="vertical" ref={formRef} className={styles['form-group']}>
|
||||
<Card>
|
||||
<Typography.Title heading={6}>
|
||||
{t['groupForm.title.video']}
|
||||
</Typography.Title>
|
||||
<Grid.Row gutter={80}>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.mode']}
|
||||
field="video.mode"
|
||||
initialValue={'custom'}
|
||||
>
|
||||
<Select placeholder={t['groupForm.placeholder.video.mode']}>
|
||||
<Select.Option value="custom">自定义</Select.Option>
|
||||
<Select.Option value="mode1">模式1</Select.Option>
|
||||
<Select.Option value="mode2">模式2</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.acquisition.resolution']}
|
||||
field="video.acquisition.resolution"
|
||||
>
|
||||
<Select
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.acquisition.resolution']
|
||||
}
|
||||
>
|
||||
<Select.Option value="resolution1">分辨率1</Select.Option>
|
||||
<Select.Option value="resolution2">分辨率2</Select.Option>
|
||||
<Select.Option value="resolution3">分辨率3</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.acquisition.frameRate']}
|
||||
field="video.acquisition.frameRate"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.acquisition.frameRate']
|
||||
}
|
||||
addAfter="fps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
<Grid.Row gutter={80}>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.resolution']}
|
||||
field="video.encoding.resolution"
|
||||
>
|
||||
<Select
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.resolution']
|
||||
}
|
||||
>
|
||||
<Select.Option value="resolution1">分辨率1</Select.Option>
|
||||
<Select.Option value="resolution2">分辨率2</Select.Option>
|
||||
<Select.Option value="resolution3">分辨率3</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.rate.min']}
|
||||
field="video.encoding.rate.min"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.rate.min']
|
||||
}
|
||||
addAfter="bps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.rate.max']}
|
||||
field="video.encoding.rate.max"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.rate.max']
|
||||
}
|
||||
addAfter="bps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
<Grid.Row gutter={80}>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.rate.default']}
|
||||
field="video.encoding.rate.default"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.rate.default']
|
||||
}
|
||||
addAfter="bps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.frameRate']}
|
||||
field="video.encoding.frameRate"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.frameRate']
|
||||
}
|
||||
addAfter="fps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.video.encoding.profile']}
|
||||
field="video.encoding.profile"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.video.encoding.profile']
|
||||
}
|
||||
addAfter="bps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Card>
|
||||
<Card>
|
||||
<Typography.Title heading={6}>
|
||||
{t['groupForm.title.audio']}
|
||||
</Typography.Title>
|
||||
<Grid.Row gutter={80}>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.audio.mode']}
|
||||
initialValue={'custom'}
|
||||
field="audio.mode"
|
||||
>
|
||||
<Select placeholder={t['groupForm.placeholder.audio.mode']}>
|
||||
<Select.Option value="custom">自定义</Select.Option>
|
||||
<Select.Option value="mode1">模式1</Select.Option>
|
||||
<Select.Option value="mode2">模式2</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.audio.acquisition.channels']}
|
||||
field="audio.acquisition.channels"
|
||||
>
|
||||
<Select
|
||||
placeholder={
|
||||
t['groupForm.placeholder.audio.acquisition.channels']
|
||||
}
|
||||
>
|
||||
<Select.Option value="1">1</Select.Option>
|
||||
<Select.Option value="2">2</Select.Option>
|
||||
<Select.Option value="3">3</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.audio.encoding.rate']}
|
||||
field="audio.encoding.rate"
|
||||
>
|
||||
<Input
|
||||
placeholder={t['groupForm.placeholder.audio.encoding.rate']}
|
||||
addAfter="bps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
<Grid.Row gutter={80}>
|
||||
<Grid.Col span={8}>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.audio.encoding.profile']}
|
||||
field="audio.encoding.profile"
|
||||
>
|
||||
<Input
|
||||
placeholder={
|
||||
t['groupForm.placeholder.audio.encoding.profile']
|
||||
}
|
||||
addAfter="fps"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Card>
|
||||
<Card style={{ marginBottom: '40px' }}>
|
||||
<Typography.Title heading={6}>
|
||||
{t['groupForm.title.explanation']}
|
||||
</Typography.Title>
|
||||
<Form.Item
|
||||
label={t['groupForm.form.label.explanation']}
|
||||
field="audio.explanation"
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder={t['groupForm.placeholder.explanation']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
</Form>
|
||||
<div className={styles.actions}>
|
||||
<Space>
|
||||
<Button onClick={handleReset} size="large">
|
||||
{t['groupForm.reset']}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleSubmit}
|
||||
loading={loading}
|
||||
size="large"
|
||||
>
|
||||
{t['groupForm.submit']}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GroupForm;
|
||||
@ -1,11 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
// 保存表单数据
|
||||
Mock.mock(new RegExp('/api/groupForm'), () => {
|
||||
return true;
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -1,23 +0,0 @@
|
||||
.container {
|
||||
overflow: hidden;
|
||||
|
||||
:global(.arco-card-body) {
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
:global(.arco-card) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 12px 40px;
|
||||
background-color: var(--color-bg-2);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -3px 12px rgb(0 0 0 / 10%);
|
||||
}
|
||||
@ -1,257 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Steps,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
InputTag,
|
||||
Button,
|
||||
Typography,
|
||||
Space,
|
||||
Card,
|
||||
Switch,
|
||||
Result,
|
||||
} from '@arco-design/web-react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const { Title, Paragraph } = Typography;
|
||||
function StepForm() {
|
||||
const t = useLocale(locale);
|
||||
const [current, setCurrent] = useState(1);
|
||||
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const viewForm = () => {
|
||||
const values = form.getFields();
|
||||
form.setFields(values);
|
||||
setCurrent(1);
|
||||
};
|
||||
|
||||
const reCreateForm = () => {
|
||||
form.resetFields();
|
||||
setCurrent(1);
|
||||
};
|
||||
|
||||
const toNext = async () => {
|
||||
try {
|
||||
await form.validate();
|
||||
setCurrent(current + 1);
|
||||
} catch (_) {}
|
||||
};
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Card>
|
||||
<Title heading={5}>{t['stepForm.desc.basicInfo']}</Title>
|
||||
<div className={styles.wrapper}>
|
||||
<Steps current={current} lineless>
|
||||
<Steps.Step
|
||||
title={t['stepForm.title.basicInfo']}
|
||||
description={t['stepForm.desc.basicInfo']}
|
||||
/>
|
||||
<Steps.Step
|
||||
title={t['stepForm.title.channel']}
|
||||
description={t['stepForm.desc.channel']}
|
||||
/>
|
||||
<Steps.Step
|
||||
title={t['stepForm.title.created']}
|
||||
description={t['stepForm.desc.created']}
|
||||
/>
|
||||
</Steps>
|
||||
<Form form={form} className={styles.form}>
|
||||
{current === 1 && (
|
||||
<Form.Item noStyle>
|
||||
<Form.Item
|
||||
label={t['stepForm.basicInfo.name']}
|
||||
required
|
||||
field="basic.name"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.basicInfo.name.required'],
|
||||
},
|
||||
{
|
||||
validator: (value: string, callback) => {
|
||||
if (!/^[\u4e00-\u9fa5a-zA-Z0-9]{1,20}$/g.test(value)) {
|
||||
callback(t['stepForm.basicInfo.name.placeholder']);
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t['stepForm.basicInfo.name.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.basicInfo.channelType']}
|
||||
required
|
||||
initialValue="app"
|
||||
field="basic.channelType"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.basicInfo.channelType.required'],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Select>
|
||||
<Select.Option value="app">APP通用渠道</Select.Option>
|
||||
<Select.Option value="site">网页通用渠道</Select.Option>
|
||||
<Select.Option value="game">游戏通用渠道</Select.Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.basicInfo.time']}
|
||||
required
|
||||
field="basic.time"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.basicInfo.time.required'],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DatePicker.RangePicker style={{ width: '100%' }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.basicInfo.link']}
|
||||
required
|
||||
extra={t['stepForm.basicInfo.link.tips']}
|
||||
field="basic.link"
|
||||
initialValue={'https://arco.design'}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t['stepForm.basicInfo.link.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
)}
|
||||
{current === 2 && (
|
||||
<Form.Item noStyle>
|
||||
<Form.Item
|
||||
label={t['stepForm.channel.source']}
|
||||
required
|
||||
field="channel.source"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.channel.source.required'],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t['stepForm.channel.source.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.channel.media']}
|
||||
required
|
||||
field="channel.media"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.channel.media.required'],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input
|
||||
placeholder={t['stepForm.channel.media.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.channel.keywords']}
|
||||
required
|
||||
field="channel.keywords"
|
||||
initialValue={['今日头条', '火山']}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputTag />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t['stepForm.channel.remind']}
|
||||
required
|
||||
initialValue={true}
|
||||
field="channel.remind"
|
||||
triggerPropName="checked"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label={t['stepForm.channel.content']}
|
||||
required
|
||||
field="channel.content"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t['stepForm.channel.content.required'],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder={t['stepForm.channel.content.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
)}
|
||||
{current !== 3 ? (
|
||||
<Form.Item label=" ">
|
||||
<Space>
|
||||
{current === 2 && (
|
||||
<Button
|
||||
size="large"
|
||||
onClick={() => setCurrent(current - 1)}
|
||||
>
|
||||
{t['stepForm.prev']}
|
||||
</Button>
|
||||
)}
|
||||
{current !== 3 && (
|
||||
<Button type="primary" size="large" onClick={toNext}>
|
||||
{t['stepForm.next']}
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item noStyle>
|
||||
<Result
|
||||
status="success"
|
||||
title={t['stepForm.created.success.title']}
|
||||
subTitle={t['stepForm.created.success.desc']}
|
||||
extra={[
|
||||
<Button
|
||||
key="reset"
|
||||
style={{ marginRight: 16 }}
|
||||
onClick={viewForm}
|
||||
>
|
||||
{t['stepForm.created.success.view']}
|
||||
</Button>,
|
||||
<Button key="again" type="primary" onClick={reCreateForm}>
|
||||
{t['stepForm.created.success.again']}
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</div>
|
||||
{current === 3 && (
|
||||
<div className={styles['form-extra']}>
|
||||
<Title heading={6}>{t['stepForm.created.extra.title']}</Title>
|
||||
<Paragraph type="secondary">
|
||||
{t['stepForm.created.extra.desc']}
|
||||
<Button type="text">{t['stepForm.created.extra.detail']}</Button>
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StepForm;
|
||||
@ -1,11 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
// 保存表单数据
|
||||
Mock.mock(new RegExp('/api/groupForm'), () => {
|
||||
return true;
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -1,39 +0,0 @@
|
||||
.container {
|
||||
:global(.arco-card-body) {
|
||||
> h5 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 624px;
|
||||
margin: 0 auto;
|
||||
padding-top: 56px;
|
||||
padding-bottom: 70px;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 76px;
|
||||
padding-right: 76px;
|
||||
}
|
||||
|
||||
.form-extra {
|
||||
width: 895px;
|
||||
margin: 54px auto;
|
||||
background-color: var(--color-fill-1);
|
||||
padding: 20px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
> h6 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Card } from '@arco-design/web-react';
|
||||
import cs from 'classnames';
|
||||
import { IconPlus } from '@arco-design/web-react/icon';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
interface AddCardProps {
|
||||
description?: string;
|
||||
}
|
||||
function AddCard(props: AddCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={cs(styles['card-block'], styles['add-card'])}
|
||||
title={null}
|
||||
bordered={true}
|
||||
size="small"
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<div className={styles['add-icon']}>
|
||||
<IconPlus />
|
||||
</div>
|
||||
<div className={styles.description}>{props.description}</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddCard;
|
||||
@ -1,255 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import cs from 'classnames';
|
||||
import {
|
||||
Button,
|
||||
Switch,
|
||||
Tag,
|
||||
Card,
|
||||
Descriptions,
|
||||
Typography,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Skeleton,
|
||||
} from '@arco-design/web-react';
|
||||
import {
|
||||
IconStarFill,
|
||||
IconThumbUpFill,
|
||||
IconSunFill,
|
||||
IconFaceSmileFill,
|
||||
IconPenFill,
|
||||
IconCheckCircleFill,
|
||||
IconCloseCircleFill,
|
||||
IconMore,
|
||||
} from '@arco-design/web-react/icon';
|
||||
import PermissionWrapper from '@/components/PermissionWrapper';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import { QualityInspection, BasicCard } from './interface';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
interface CardBlockType {
|
||||
type: 'quality' | 'service' | 'rules';
|
||||
card: QualityInspection & BasicCard;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const IconList = [
|
||||
IconStarFill,
|
||||
IconThumbUpFill,
|
||||
IconSunFill,
|
||||
IconFaceSmileFill,
|
||||
IconPenFill,
|
||||
].map((Tag, index) => <Tag key={index} />);
|
||||
|
||||
const { Paragraph } = Typography;
|
||||
|
||||
function CardBlock(props: CardBlockType) {
|
||||
const { type, card = {} } = props;
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [status, setStatus] = useState(card.status);
|
||||
const [loading, setLoading] = useState(props.loading);
|
||||
|
||||
const t = useLocale(locale);
|
||||
const changeStatus = async () => {
|
||||
setLoading(true);
|
||||
await new Promise((resolve) =>
|
||||
setTimeout(() => {
|
||||
setStatus(status !== 1 ? 1 : 0);
|
||||
resolve(null);
|
||||
}, 1000)
|
||||
).finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(props.loading);
|
||||
}, [props.loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (card.status !== status) {
|
||||
setStatus(card.status);
|
||||
}
|
||||
}, [card.status]);
|
||||
|
||||
const getTitleIcon = () => {
|
||||
if (type === 'service' && typeof card.icon === 'number') {
|
||||
return (
|
||||
<div className={styles.icon}>
|
||||
{IconList[card.icon % IconList.length]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const getButtonGroup = () => {
|
||||
if (type === 'quality') {
|
||||
return (
|
||||
<>
|
||||
<PermissionWrapper
|
||||
requiredPermissions={[
|
||||
{ resource: /^menu.list.*/, actions: ['read'] },
|
||||
]}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: '12px' }}
|
||||
loading={loading}
|
||||
>
|
||||
{t['cardList.options.qualityInspection']}
|
||||
</Button>
|
||||
</PermissionWrapper>
|
||||
|
||||
<PermissionWrapper
|
||||
requiredPermissions={[
|
||||
{ resource: /^menu.list.*/, actions: ['write'] },
|
||||
]}
|
||||
>
|
||||
<Button loading={loading}>{t['cardList.options.remove']}</Button>
|
||||
</PermissionWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === 'service') {
|
||||
return (
|
||||
<>
|
||||
{status === 1 ? (
|
||||
<Button loading={loading} onClick={changeStatus}>
|
||||
{t['cardList.options.cancel']}
|
||||
</Button>
|
||||
) : (
|
||||
<Button type="outline" loading={loading} onClick={changeStatus}>
|
||||
{status === 0
|
||||
? t['cardList.options.subscribe']
|
||||
: t['cardList.options.renewal']}
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Switch checked={!!status} loading={loading} onChange={changeStatus} />
|
||||
);
|
||||
};
|
||||
|
||||
const getStatus = () => {
|
||||
if (type === 'rules' && status) {
|
||||
return (
|
||||
<Tag
|
||||
color="green"
|
||||
icon={<IconCheckCircleFill />}
|
||||
className={styles.status}
|
||||
size="small"
|
||||
>
|
||||
{t['cardList.tag.activated']}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
switch (status) {
|
||||
case 1:
|
||||
return (
|
||||
<Tag
|
||||
color="green"
|
||||
icon={<IconCheckCircleFill />}
|
||||
className={styles.status}
|
||||
size="small"
|
||||
>
|
||||
{t['cardList.tag.opened']}
|
||||
</Tag>
|
||||
);
|
||||
case 2:
|
||||
return (
|
||||
<Tag
|
||||
color="red"
|
||||
icon={<IconCloseCircleFill />}
|
||||
className={styles.status}
|
||||
size="small"
|
||||
>
|
||||
{t['cardList.tag.expired']}
|
||||
</Tag>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getContent = () => {
|
||||
if (loading) {
|
||||
return (
|
||||
<Skeleton
|
||||
text={{ rows: type !== 'quality' ? 3 : 2 }}
|
||||
animation
|
||||
className={styles['card-block-skeleton']}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (type !== 'quality') {
|
||||
return <Paragraph>{card.description}</Paragraph>;
|
||||
}
|
||||
return (
|
||||
<Descriptions
|
||||
column={2}
|
||||
data={[
|
||||
{ label: '待质检数', value: card.qualityCount },
|
||||
{ label: '积压时长', value: `${card.duration}s` },
|
||||
{ label: '待抽检数', value: card.randomCount },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const className = cs(styles['card-block'], styles[`${type}-card`]);
|
||||
|
||||
return (
|
||||
<Card
|
||||
bordered={true}
|
||||
className={className}
|
||||
size="small"
|
||||
title={
|
||||
loading ? (
|
||||
<Skeleton
|
||||
animation
|
||||
text={{ rows: 1, width: ['100%'] }}
|
||||
style={{ width: '120px', height: '24px' }}
|
||||
className={styles['card-block-skeleton']}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={cs(styles.title, {
|
||||
[styles['title-more']]: visible,
|
||||
})}
|
||||
>
|
||||
{getTitleIcon()}
|
||||
{card.title}
|
||||
{getStatus()}
|
||||
<Dropdown
|
||||
droplist={
|
||||
<Menu>
|
||||
{['操作1', '操作2'].map((item, key) => (
|
||||
<Menu.Item key={key.toString()}>{item}</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
}
|
||||
trigger="click"
|
||||
onVisibleChange={setVisible}
|
||||
popupVisible={visible}
|
||||
>
|
||||
<div className={styles.more}>
|
||||
<IconMore />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div className={styles.time}>{card.time}</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className={styles.content}>{getContent()}</div>
|
||||
<div className={styles.extra}>{getButtonGroup()}</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default CardBlock;
|
||||
@ -1,95 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import { Tabs, Card, Input, Typography, Grid } from '@arco-design/web-react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
import CardBlock from './card-block';
|
||||
import AddCard from './card-add';
|
||||
import { QualityInspection, BasicCard } from './interface';
|
||||
import './mock';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Row, Col } = Grid;
|
||||
|
||||
const defaultList = new Array(10).fill({});
|
||||
export default function ListCard() {
|
||||
const t = useLocale(locale);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [data, setData] = useState({
|
||||
quality: defaultList,
|
||||
service: defaultList,
|
||||
rules: defaultList,
|
||||
});
|
||||
|
||||
const [activeKey, setActiveKey] = useState('all');
|
||||
|
||||
const getData = () => {
|
||||
axios
|
||||
.get('/api/cardList')
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
7;
|
||||
const getCardList = (
|
||||
list: Array<BasicCard & QualityInspection>,
|
||||
type: keyof typeof data
|
||||
) => {
|
||||
return (
|
||||
<Row gutter={24} className={styles['card-content']}>
|
||||
{type === 'quality' && (
|
||||
<Col xs={24} sm={12} md={8} lg={6} xl={6} xxl={6}>
|
||||
<AddCard description={t['cardList.add.quality']} />
|
||||
</Col>
|
||||
)}
|
||||
{list.map((item, index) => (
|
||||
<Col xs={24} sm={12} md={8} lg={6} xl={6} xxl={6} key={index}>
|
||||
<CardBlock card={item} type={type} loading={loading} />
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title heading={6}>{t['menu.list.card']}</Title>
|
||||
<Tabs
|
||||
activeTab={activeKey}
|
||||
type="rounded"
|
||||
onChange={setActiveKey}
|
||||
extra={
|
||||
<Input.Search
|
||||
style={{ width: '240px' }}
|
||||
placeholder={t[`cardList.tab.${activeKey}.placeholder`]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Tabs.TabPane key="all" title={t['cardList.tab.title.all']} />
|
||||
<Tabs.TabPane key="quality" title={t['cardList.tab.title.quality']} />
|
||||
<Tabs.TabPane key="service" title={t['cardList.tab.title.service']} />
|
||||
<Tabs.TabPane key="rules" title={t['cardList.tab.title.rules']} />
|
||||
</Tabs>
|
||||
<div className={styles.container}>
|
||||
{activeKey === 'all' ? (
|
||||
Object.entries(data).map(([key, list]) => (
|
||||
<div key={key}>
|
||||
<Title heading={6}>{t[`cardList.tab.title.${key}`]}</Title>
|
||||
{getCardList(list, key as keyof typeof data)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className={styles['single-content']}>
|
||||
{getCardList(data[activeKey], activeKey as keyof typeof data)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
export interface QualityInspection {
|
||||
title?: string;
|
||||
time?: string;
|
||||
qualityCount?: number;
|
||||
randomCount?: number;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export interface BasicCard {
|
||||
icon?: number;
|
||||
status?: 0 | 1 | 2;
|
||||
description?: string;
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.list': 'List',
|
||||
'menu.list.card': 'Card List',
|
||||
'cardList.tab.title.all': 'All',
|
||||
'cardList.tab.title.quality': 'Content quality',
|
||||
'cardList.tab.title.service': 'Service opening',
|
||||
'cardList.tab.title.rules': 'Rule presets',
|
||||
'cardList.tab.all.placeholder': 'Search',
|
||||
'cardList.tab.quality.placeholder': 'Search queue',
|
||||
'cardList.tab.service.placeholder': 'Search service',
|
||||
'cardList.tab.rules.placeholder': 'Search rule',
|
||||
'cardList.searchInput.placeholder': 'Search service',
|
||||
'cardList.add.quality': 'Create quality inspection queue',
|
||||
'cardList.enable': 'Enable',
|
||||
'cardList.disable': 'Disable',
|
||||
'cardList.action': 'action',
|
||||
'cardList.detail': 'Detail',
|
||||
'cardList.tab.title.announcement': 'Recent Announcement',
|
||||
'cardList.announcement.noData': 'No announcement',
|
||||
'cardList.statistic.enable': 'Enable',
|
||||
'cardList.statistic.disable': 'Disable',
|
||||
'cardList.statistic.applicationNum': 'Applications',
|
||||
'cardList.options.qualityInspection': 'Quality inspection',
|
||||
'cardList.options.remove': 'Remove',
|
||||
'cardList.options.cancel': 'Cancel',
|
||||
'cardList.options.subscribe': 'Subscribe',
|
||||
'cardList.options.renewal': 'Renewal',
|
||||
'cardList.tag.activated': 'Activated',
|
||||
'cardList.tag.opened': 'Already Opened',
|
||||
'cardList.tag.expired': 'Expired',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.list': '列表页',
|
||||
'menu.list.card': '卡片列表',
|
||||
'cardList.tab.title.all': '全部',
|
||||
'cardList.tab.title.quality': '内容质检',
|
||||
'cardList.tab.title.service': '服务开通',
|
||||
'cardList.tab.title.rules': '规则预置',
|
||||
'cardList.tab.all.placeholder': '搜索',
|
||||
'cardList.tab.quality.placeholder': '搜索队列',
|
||||
'cardList.tab.service.placeholder': '搜索服务',
|
||||
'cardList.tab.rules.placeholder': '搜索规则',
|
||||
'cardList.searchInput.placeholder': '搜索服务',
|
||||
'cardList.add.quality': '点击创建质检内容队列',
|
||||
'cardList.enable': '启用',
|
||||
'cardList.disable': '禁用',
|
||||
'cardList.action': '操作',
|
||||
'cardList.detail': '详细信息',
|
||||
'cardList.tab.title.announcement': '最近公告',
|
||||
'cardList.announcement.noData': '暂无公告',
|
||||
'cardList.statistic.enable': '已启用',
|
||||
'cardList.statistic.disable': '未启用',
|
||||
'cardList.statistic.applicationNum': '应用数',
|
||||
'cardList.options.qualityInspection': '质检',
|
||||
'cardList.options.remove': '删除',
|
||||
'cardList.options.cancel': '取消开通',
|
||||
'cardList.options.subscribe': '开通服务',
|
||||
'cardList.options.renewal': '续约服务',
|
||||
'cardList.tag.activated': '已启用',
|
||||
'cardList.tag.opened': '已开通',
|
||||
'cardList.tag.expired': '已过期',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -1,156 +0,0 @@
|
||||
.container {
|
||||
:global(.arco-list-content) {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:global(.arco-card-meta-title) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
min-height: 180px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.single-content {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:global(.arco-card-header) {
|
||||
border-bottom: none;
|
||||
height: auto;
|
||||
padding: 16px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
line-height: 24px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: var(--color-white);
|
||||
background: #626aea;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.more {
|
||||
color: var(--color-text-4);
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title-more {
|
||||
.more {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.time,
|
||||
.content > :global(.arco-typography),
|
||||
:global(.arco-descriptions-item-label),
|
||||
:global(.arco-descriptions-item-value) {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-3);
|
||||
padding: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
:global(.arco-descriptions-item-value) {
|
||||
color: var(--color-text-2);
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.extra {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-skeleton {
|
||||
:global(.arco-skeleton-content .arco-skeleton-text-row:not(:last-child)) {
|
||||
height: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-block:hover {
|
||||
box-shadow: 4px 4px 10px rgba(0, 0, 0, 10%);
|
||||
|
||||
.title {
|
||||
.more {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-card {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.add-icon {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: 16px;
|
||||
color: var(--color-text-3);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:global(.arco-card-body) {
|
||||
padding-top: 52px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.service-card {
|
||||
:global(.arco-card-body) {
|
||||
padding: 12px 16px 16px 48px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 10px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.rules-card {
|
||||
:global(.arco-card-body) {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default <T>(url: string, defaultValue: T[]): [boolean, T[]] => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<T[]>(defaultValue);
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get(url)
|
||||
.then((res) => {
|
||||
setData(res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}, [url]);
|
||||
|
||||
return [loading, data];
|
||||
};
|
||||
@ -1,91 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Button, Typography, Badge } from '@arco-design/web-react';
|
||||
import IconText from './icons/text.svg';
|
||||
import IconHorizontalVideo from './icons/horizontal.svg';
|
||||
import IconVerticalVideo from './icons/vertical.svg';
|
||||
import dayjs from 'dayjs';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
export const ContentType = ['图文', '横版短视频', '竖版短视频'];
|
||||
export const FilterType = ['规则筛选', '人工'];
|
||||
export const Status = ['未上线', '已上线'];
|
||||
|
||||
const ContentIcon = [
|
||||
<IconText key={0} />,
|
||||
<IconHorizontalVideo key={1} />,
|
||||
<IconVerticalVideo key={2} />,
|
||||
];
|
||||
|
||||
export function getColumns(
|
||||
t: any,
|
||||
callback: (record: Record<string, any>, type: string) => Promise<void>
|
||||
) {
|
||||
return [
|
||||
{
|
||||
title: t['searchTable.columns.id'],
|
||||
dataIndex: 'id',
|
||||
render: (value) => <Text copyable>{value}</Text>,
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.name'],
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.contentType'],
|
||||
dataIndex: 'contentType',
|
||||
render: (value) => (
|
||||
<div className={styles['content-type']}>
|
||||
{ContentIcon[value]}
|
||||
{ContentType[value]}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.filterType'],
|
||||
dataIndex: 'filterType',
|
||||
render: (value) => FilterType[value],
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.contentNum'],
|
||||
dataIndex: 'count',
|
||||
sorter: (a, b) => a.count - b.count,
|
||||
render(x) {
|
||||
return Number(x).toLocaleString();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.createdTime'],
|
||||
dataIndex: 'createdTime',
|
||||
render: (x) => dayjs().subtract(x, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
sorter: (a, b) => b.createdTime - a.createdTime,
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.status'],
|
||||
dataIndex: 'status',
|
||||
render: (x) => {
|
||||
if (x === 0) {
|
||||
return <Badge status="error" text={Status[x]}></Badge>;
|
||||
}
|
||||
return <Badge status="success" text={Status[x]}></Badge>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t['searchTable.columns.operations'],
|
||||
dataIndex: 'operations',
|
||||
headerCellStyle: { paddingLeft: '15px' },
|
||||
render: (_, record) => (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => callback(record, 'view')}
|
||||
>
|
||||
{t['searchTable.columns.operations.view']}
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export default () => ContentIcon;
|
||||
@ -1,135 +0,0 @@
|
||||
import React, { useContext } from 'react';
|
||||
import dayjs from 'dayjs';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
DatePicker,
|
||||
Button,
|
||||
Grid,
|
||||
} from '@arco-design/web-react';
|
||||
import { GlobalContext } from '@/context';
|
||||
import locale from './locale';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { IconRefresh, IconSearch } from '@arco-design/web-react/icon';
|
||||
import { ContentType, FilterType, Status } from './constants';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const { Row, Col } = Grid;
|
||||
const { useForm } = Form;
|
||||
|
||||
function SearchForm(props: {
|
||||
onSearch: (values: Record<string, any>) => void;
|
||||
}) {
|
||||
const { lang } = useContext(GlobalContext);
|
||||
|
||||
const t = useLocale(locale);
|
||||
const [form] = useForm();
|
||||
|
||||
const handleSubmit = () => {
|
||||
const values = form.getFieldsValue();
|
||||
props.onSearch(values);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
props.onSearch({});
|
||||
};
|
||||
|
||||
const colSpan = lang === 'zh-CN' ? 8 : 12;
|
||||
|
||||
return (
|
||||
<div className={styles['search-form-wrapper']}>
|
||||
<Form
|
||||
form={form}
|
||||
className={styles['search-form']}
|
||||
labelAlign="left"
|
||||
labelCol={{ span: 5 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
<Row gutter={24}>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['searchTable.columns.id']} field="id">
|
||||
<Input placeholder={t['searchForm.id.placeholder']} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['searchTable.columns.name']} field="name">
|
||||
<Input
|
||||
allowClear
|
||||
placeholder={t['searchForm.name.placeholder']}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['searchTable.columns.contentType']}
|
||||
field="contentType"
|
||||
>
|
||||
<Select
|
||||
placeholder={t['searchForm.all.placeholder']}
|
||||
options={ContentType.map((item, index) => ({
|
||||
label: item,
|
||||
value: index,
|
||||
}))}
|
||||
mode="multiple"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['searchTable.columns.filterType']}
|
||||
field="filterType"
|
||||
>
|
||||
<Select
|
||||
placeholder={t['searchForm.all.placeholder']}
|
||||
options={FilterType.map((item, index) => ({
|
||||
label: item,
|
||||
value: index,
|
||||
}))}
|
||||
mode="multiple"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item
|
||||
label={t['searchTable.columns.createdTime']}
|
||||
field="createdTime"
|
||||
>
|
||||
<DatePicker.RangePicker
|
||||
allowClear
|
||||
style={{ width: '100%' }}
|
||||
disabledDate={(date) => dayjs(date).isAfter(dayjs())}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={colSpan}>
|
||||
<Form.Item label={t['searchTable.columns.status']} field="status">
|
||||
<Select
|
||||
placeholder={t['searchForm.all.placeholder']}
|
||||
options={Status.map((item, index) => ({
|
||||
label: item,
|
||||
value: index,
|
||||
}))}
|
||||
mode="multiple"
|
||||
allowClear
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
<div className={styles['right-button']}>
|
||||
<Button type="primary" icon={<IconSearch />} onClick={handleSubmit}>
|
||||
{t['searchTable.form.search']}
|
||||
</Button>
|
||||
<Button icon={<IconRefresh />} onClick={handleReset}>
|
||||
{t['searchTable.form.reset']}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchForm;
|
||||
@ -1,20 +0,0 @@
|
||||
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="1" width="14" height="14" rx="1.67" fill="#FFDDE0"/>
|
||||
<path d="M0.0708579 2.61134C0.0786468 1.68906 0.832619 0.94772 1.7549 0.955509L12.414 1.04553C13.3363 1.05332 14.0776 1.80729 14.0699 2.72957L13.999 11.1181L1.49778e-05 10.9999L0.0708579 2.61134Z" fill="#FF8B96"/>
|
||||
<g opacity="0.9" filter="url(#filter0_d_422_41703)">
|
||||
<path d="M5.32269 7.78472V4.65415C5.32269 4.18777 5.83148 3.8997 6.23139 4.13965L8.8402 5.70494C9.2286 5.93798 9.2286 6.50089 8.8402 6.73393L6.23139 8.29922C5.83148 8.53917 5.32269 8.2511 5.32269 7.78472Z" fill="#FFEDEF"/>
|
||||
</g>
|
||||
<rect opacity="0.6" width="10" height="1" rx="0.4" transform="matrix(1 0 0 -1 2.04199 13.5156)" fill="#FF727F"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_422_41703" x="3.6636" y="2.39413" width="7.12699" height="7.65071" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="0.829547"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.8625 0 0 0 0 0.280312 0 0 0 0 0.33552 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_41703"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_41703" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -1,41 +0,0 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 2C0 0.89543 0.895431 0 2 0H12C13.1046 0 14 0.895431 14 2V12C14 13.1046 13.1046 14 12 14H2C0.895431 14 0 13.1046 0 12V2Z" fill="url(#paint0_linear_422_41656)"/>
|
||||
<g opacity="0.9" filter="url(#filter0_d_422_41656)">
|
||||
<path d="M4.48218 3.23096C4.81406 3.23101 5.13232 3.36289 5.36695 3.59758C5.60159 3.83228 5.73337 4.15056 5.73332 4.48241C5.73326 4.81426 5.60137 5.13249 5.36666 5.36711C5.13195 5.60172 4.81364 5.73349 4.48176 5.73344C4.14989 5.73333 3.83165 5.6014 3.59705 5.36666C3.36246 5.13193 3.23072 4.81363 3.23084 4.48178C3.23095 4.14993 3.36289 3.83172 3.59764 3.59714C3.83239 3.36257 4.15072 3.23085 4.4826 3.23096H4.48218Z" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip0_422_41656)">
|
||||
<g opacity="0.9" filter="url(#filter1_d_422_41656)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.92035 17.5178C10.868 17.5178 12.447 15.0428 12.447 11.9896C12.447 8.93649 10.868 6.46143 8.92035 6.46143C7.69985 6.46143 6.62416 7.43332 5.99105 8.91033C5.58344 8.38402 5.03884 8.06253 4.44061 8.06253C3.17724 8.06253 2.15308 9.49636 2.15308 11.2651C2.15308 13.0338 3.17724 14.4676 4.44061 14.4676C4.87779 14.4676 5.28633 14.2959 5.6337 13.9981C6.14641 16.0582 7.42464 17.5178 8.92035 17.5178Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_422_41656" x="0.308552" y="2.25686" width="8.34704" height="8.34701" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.94819"/>
|
||||
<feGaussianBlur stdDeviation="1.46114"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.207843 0 0 0 0 0.701961 0 0 0 0 0.94902 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_41656"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_41656" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_422_41656" x="-0.5182" y="5.571" width="15.6364" height="16.3989" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.78085"/>
|
||||
<feGaussianBlur stdDeviation="1.33564"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.207843 0 0 0 0 0.701961 0 0 0 0 0.94902 0 0 0 1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_41656"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_41656" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_422_41656" x1="0" y1="0" x2="9.36513" y2="14.6703" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1B9FFF"/>
|
||||
<stop offset="0.0001" stop-color="#479AFB"/>
|
||||
<stop offset="1" stop-color="#77C6FF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_422_41656">
|
||||
<rect x="2.15375" y="6.46143" width="10.2939" height="4.95632" rx="2" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.1 KiB |
@ -1,24 +0,0 @@
|
||||
<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.9" width="13" height="16" rx="1.67" fill="url(#paint0_linear_422_41748)"/>
|
||||
<g opacity="0.9" filter="url(#filter0_d_422_41748)">
|
||||
<path d="M5 7.91745V5.08255C5 4.61129 5.51837 4.32398 5.918 4.57375L8.18592 5.9912C8.56192 6.2262 8.56192 6.7738 8.18592 7.0088L5.918 8.42625C5.51837 8.67602 5 8.38871 5 7.91745Z" fill="white"/>
|
||||
</g>
|
||||
<rect opacity="0.8" width="9" height="1" rx="0.315789" transform="matrix(1 0 0 -1 2 12)" fill="#FFF5E8"/>
|
||||
<rect opacity="0.8" width="6" height="1" rx="0.315789" transform="matrix(1 0 0 -1 2 14)" fill="#FFF5E8"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_422_41748" x="3.73684" y="3.21853" width="5.99424" height="6.56294" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="0.631579"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.870833 0 0 0 0 0.554311 0 0 0 0 0.148767 0 0 0 0.8 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_422_41748"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_422_41748" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_422_41748" x1="0.5" y1="0.5" x2="12.5" y2="15.5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FF8A00"/>
|
||||
<stop offset="1" stop-color="#FFC581"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,120 +0,0 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Card,
|
||||
PaginationProps,
|
||||
Button,
|
||||
Space,
|
||||
Typography,
|
||||
} from '@arco-design/web-react';
|
||||
import PermissionWrapper from '@/components/PermissionWrapper';
|
||||
import { IconDownload, IconPlus } from '@arco-design/web-react/icon';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import SearchForm from './form';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
import './mock';
|
||||
import { getColumns } from './constants';
|
||||
|
||||
const { Title } = Typography;
|
||||
export const ContentType = ['图文', '横版短视频', '竖版短视频'];
|
||||
export const FilterType = ['规则筛选', '人工'];
|
||||
export const Status = ['已上线', '未上线'];
|
||||
|
||||
function SearchTable() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
const tableCallback = async (record, type) => {
|
||||
console.log(record, type);
|
||||
};
|
||||
|
||||
const columns = useMemo(() => getColumns(t, tableCallback), [t]);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [pagination, setPatination] = useState<PaginationProps>({
|
||||
sizeCanChange: true,
|
||||
showTotal: true,
|
||||
pageSize: 10,
|
||||
current: 1,
|
||||
pageSizeChangeResetCurrent: true,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formParams, setFormParams] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [pagination.current, pagination.pageSize, JSON.stringify(formParams)]);
|
||||
|
||||
function fetchData() {
|
||||
const { current, pageSize } = pagination;
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/list', {
|
||||
params: {
|
||||
page: current,
|
||||
pageSize,
|
||||
...formParams,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setData(res.data.list);
|
||||
setPatination({
|
||||
...pagination,
|
||||
current,
|
||||
pageSize,
|
||||
total: res.data.total,
|
||||
});
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function onChangeTable({ current, pageSize }) {
|
||||
setPatination({
|
||||
...pagination,
|
||||
current,
|
||||
pageSize,
|
||||
});
|
||||
}
|
||||
|
||||
function handleSearch(params) {
|
||||
setPatination({ ...pagination, current: 1 });
|
||||
setFormParams(params);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title heading={6}>{t['menu.list.searchTable']}</Title>
|
||||
<SearchForm onSearch={handleSearch} />
|
||||
<PermissionWrapper
|
||||
requiredPermissions={[
|
||||
{ resource: 'menu.list.searchTable', actions: ['write'] },
|
||||
]}
|
||||
>
|
||||
<div className={styles['button-group']}>
|
||||
<Space>
|
||||
<Button type="primary" icon={<IconPlus />}>
|
||||
{t['searchTable.operations.add']}
|
||||
</Button>
|
||||
<Button>{t['searchTable.operations.upload']}</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button icon={<IconDownload />}>
|
||||
{t['searchTable.operation.download']}
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</PermissionWrapper>
|
||||
<Table
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
onChange={onChangeTable}
|
||||
pagination={pagination}
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchTable;
|
||||
@ -1,52 +0,0 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.list': 'List',
|
||||
'menu.list.searchTable': 'Search Table',
|
||||
'searchTable.form.search': 'Search',
|
||||
'searchTable.form.reset': 'Reset',
|
||||
'searchTable.columns.id': 'Collection ID',
|
||||
'searchTable.columns.name': 'Collection Name',
|
||||
'searchTable.columns.contentType': 'Content genre',
|
||||
'searchTable.columns.filterType': 'Filter method',
|
||||
'searchTable.columns.createdTime': 'Creation time',
|
||||
'searchTable.columns.status': 'Status',
|
||||
'searchTable.columns.contentNum': 'Content quantity',
|
||||
'searchTable.columns.operations': 'Operation',
|
||||
'searchTable.columns.operations.view': 'View',
|
||||
'searchTable.columns.operations.update': 'Edit',
|
||||
'searchTable.columns.operations.offline': 'Offline',
|
||||
'searchTable.columns.operations.online': 'Online',
|
||||
'searchTable.operations.add': 'New',
|
||||
'searchTable.operations.upload': 'Bulk upload',
|
||||
'searchTable.operation.download': 'Download',
|
||||
'searchForm.id.placeholder': 'Please enter the collection ID',
|
||||
'searchForm.name.placeholder': 'Please enter the collection name',
|
||||
'searchForm.all.placeholder': 'all',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.list': '列表页',
|
||||
'menu.list.searchTable': '查询表格',
|
||||
'searchTable.form.search': '查询',
|
||||
'searchTable.form.reset': '重置',
|
||||
'searchTable.columns.id': '集合编号',
|
||||
'searchTable.columns.name': '集合名称',
|
||||
'searchTable.columns.contentType': '内容体裁',
|
||||
'searchTable.columns.filterType': '筛选方式',
|
||||
'searchTable.columns.createdTime': '创建时间',
|
||||
'searchTable.columns.status': '状态',
|
||||
'searchTable.columns.contentNum': '内容量',
|
||||
'searchTable.columns.operations': '操作',
|
||||
'searchTable.columns.operations.view': '查看',
|
||||
'searchTable.columns.operations.update': '修改',
|
||||
'searchTable.columns.operations.online': '上线',
|
||||
'searchTable.columns.operations.offline': '下线',
|
||||
'searchTable.operations.add': '新建',
|
||||
'searchTable.operations.upload': '批量导入',
|
||||
'searchTable.operation.download': '下载',
|
||||
'searchForm.id.placeholder': '请输入集合编号',
|
||||
'searchForm.name.placeholder': '请输入集合名称',
|
||||
'searchForm.all.placeholder': '全部',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -1,99 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import qs from 'query-string';
|
||||
import dayjs from 'dayjs';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
const { list } = Mock.mock({
|
||||
'list|100': [
|
||||
{
|
||||
id: /[0-9]{8}[-][0-9]{4}/,
|
||||
name: () =>
|
||||
Mock.Random.pick([
|
||||
'每日推荐视频集',
|
||||
'抖音短视频候选集',
|
||||
'国际新闻集合',
|
||||
]),
|
||||
'contentType|0-2': 0,
|
||||
'filterType|0-1': 0,
|
||||
'count|0-2000': 0,
|
||||
'createdTime|1-60': 0,
|
||||
'status|0-1': 0,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const filterData = (
|
||||
rest: {
|
||||
id?: string;
|
||||
name?: string;
|
||||
'contentType[]'?: string[];
|
||||
'filterType[]'?: string[];
|
||||
'createdTime[]'?: string[];
|
||||
'status[]'?: string;
|
||||
} = {}
|
||||
) => {
|
||||
const {
|
||||
id,
|
||||
name,
|
||||
'contentType[]': contentType,
|
||||
'filterType[]': filterType,
|
||||
'createdTime[]': createdTime,
|
||||
'status[]': status,
|
||||
} = rest;
|
||||
if (id) {
|
||||
return list.filter((item) => item.id === id);
|
||||
}
|
||||
let result = [...list];
|
||||
if (name) {
|
||||
result = result.filter((item) => {
|
||||
return (item.name as string).toLowerCase().includes(name.toLowerCase());
|
||||
});
|
||||
}
|
||||
if (contentType) {
|
||||
result = result.filter((item) =>
|
||||
contentType.includes(item.contentType.toString())
|
||||
);
|
||||
}
|
||||
if (filterType) {
|
||||
result = result.filter((item) =>
|
||||
filterType.includes(item.filterType.toString())
|
||||
);
|
||||
}
|
||||
if (createdTime && createdTime.length === 2) {
|
||||
const [begin, end] = createdTime;
|
||||
result = result.filter((item) => {
|
||||
const time = dayjs()
|
||||
.subtract(item.createdTime, 'days')
|
||||
.format('YYYY-MM-DD HH:mm:ss');
|
||||
return (
|
||||
!dayjs(time).isBefore(dayjs(begin)) && !dayjs(time).isAfter(dayjs(end))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
if (status && status.length) {
|
||||
result = result.filter((item) => status.includes(item.status.toString()));
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
Mock.mock(new RegExp('/api/list'), (params) => {
|
||||
const {
|
||||
page = 1,
|
||||
pageSize = 10,
|
||||
...rest
|
||||
} = qs.parseUrl(params.url).query;
|
||||
const p = page as number;
|
||||
const ps = pageSize as number;
|
||||
|
||||
const result = filterData(rest);
|
||||
return {
|
||||
list: result.slice((p - 1) * ps, p * ps),
|
||||
total: result.length,
|
||||
};
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -1,50 +0,0 @@
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content-type {
|
||||
display: flex;
|
||||
|
||||
> svg {
|
||||
margin-right: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form-wrapper {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border-1);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.right-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
border-left: 1px solid var(--color-border-2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
padding-right: 20px;
|
||||
|
||||
:global(.arco-form-label-item-left) {
|
||||
> label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,164 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Steps,
|
||||
Typography,
|
||||
Grid,
|
||||
Space,
|
||||
Button,
|
||||
Table,
|
||||
Badge,
|
||||
} from '@arco-design/web-react';
|
||||
import axios from 'axios';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import ProfileItem from './item';
|
||||
import styles from './style/index.module.less';
|
||||
import './mock';
|
||||
|
||||
function BasicProfile() {
|
||||
const t = useLocale(locale);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState({ status: 1 });
|
||||
const [preLoading, setPreLoading] = useState(false);
|
||||
const [preData, setPreData] = useState({});
|
||||
const [tableLoading, setTableLoading] = useState(false);
|
||||
const [tableData, setTableData] = useState([]);
|
||||
|
||||
function fetchData() {
|
||||
setLoading(true);
|
||||
axios
|
||||
.get('/api/basicProfile')
|
||||
.then((res) => {
|
||||
setData(res.data || {});
|
||||
})
|
||||
.finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchPreData() {
|
||||
setPreLoading(true);
|
||||
axios
|
||||
.get('/api/basicProfile')
|
||||
.then((res) => {
|
||||
setPreData(res.data || {});
|
||||
})
|
||||
.finally(() => {
|
||||
setPreLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchTableData() {
|
||||
setTableLoading(true);
|
||||
axios
|
||||
.get('/api/adjustment')
|
||||
.then((res) => {
|
||||
setTableData(res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
setTableLoading(false);
|
||||
});
|
||||
}
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
fetchPreData();
|
||||
fetchTableData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Card>
|
||||
<Grid.Row justify="space-between" align="center">
|
||||
<Grid.Col span={16}>
|
||||
<Typography.Title heading={6}>
|
||||
{t['basicProfile.title.form']}
|
||||
</Typography.Title>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8} style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<Button>{t['basicProfile.cancel']}</Button>
|
||||
<Button type="primary">{t['basicProfile.goBack']}</Button>
|
||||
</Space>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
|
||||
<Steps current={data.status} lineless className={styles.steps}>
|
||||
<Steps.Step title={t['basicProfile.steps.commit']} />
|
||||
<Steps.Step title={t['basicProfile.steps.approval']} />
|
||||
<Steps.Step title={t['basicProfile.steps.finish']} />
|
||||
</Steps>
|
||||
</Card>
|
||||
|
||||
<ProfileItem
|
||||
title={t['basicProfile.title.currentParams']}
|
||||
data={data}
|
||||
type="current"
|
||||
loading={loading}
|
||||
/>
|
||||
<ProfileItem
|
||||
title={t['basicProfile.title.originParams']}
|
||||
data={preData}
|
||||
type="origin"
|
||||
loading={preLoading}
|
||||
/>
|
||||
<Card>
|
||||
<Typography.Title heading={6}>
|
||||
{t['basicProfile.adjustment.record']}
|
||||
</Typography.Title>
|
||||
<Table
|
||||
loading={tableLoading}
|
||||
data={tableData}
|
||||
columns={[
|
||||
{
|
||||
dataIndex: 'contentId',
|
||||
title: t['basicProfile.adjustment.contentId'],
|
||||
},
|
||||
{
|
||||
dataIndex: 'content',
|
||||
title: t['basicProfile.adjustment.content'],
|
||||
},
|
||||
{
|
||||
dataIndex: 'status',
|
||||
title: t['basicProfile.adjustment.status'],
|
||||
render: (status) => {
|
||||
if (status) {
|
||||
return (
|
||||
<Badge
|
||||
status="success"
|
||||
text={t['basicProfile.adjustment.success']}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Badge
|
||||
status="processing"
|
||||
text={t['basicProfile.adjustment.waiting']}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'updatedTime',
|
||||
title: t['basicProfile.adjustment.updatedTime'],
|
||||
},
|
||||
{
|
||||
title: t['basicProfile.adjustment.operation'],
|
||||
headerCellStyle: { paddingLeft: '15px' },
|
||||
render() {
|
||||
return (
|
||||
<Button type="text">
|
||||
{t['basicProfile.adjustment.operation.view']}
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicProfile;
|
||||
@ -1,128 +0,0 @@
|
||||
import React, { CSSProperties } from 'react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import { Descriptions, Card, Skeleton } from '@arco-design/web-react';
|
||||
import locale from './locale';
|
||||
|
||||
interface ProfileItemProps {
|
||||
title: string;
|
||||
data: any;
|
||||
style?: CSSProperties;
|
||||
type: 'origin' | 'current';
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
function ProfileItem(props: ProfileItemProps) {
|
||||
const t = useLocale(locale);
|
||||
const { title, data, type, loading } = props;
|
||||
const blockDataList: {
|
||||
title: string;
|
||||
data: {
|
||||
label: string;
|
||||
value: string;
|
||||
}[];
|
||||
}[] = [];
|
||||
|
||||
blockDataList.push({
|
||||
title: t[`basicProfile.title.${type}Video`],
|
||||
data: [
|
||||
{
|
||||
label: t['basicProfile.label.video.mode'],
|
||||
value: data?.video?.mode || '-',
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.acquisition.resolution'],
|
||||
value: data?.video?.acquisition.resolution || '-',
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.acquisition.frameRate'],
|
||||
value: `${data?.video?.acquisition.frameRate || '-'} fps`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.resolution'],
|
||||
value: data?.video?.encoding.resolution || '-',
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.rate.min'],
|
||||
value: `${data?.video?.encoding.rate.min || '-'} bps`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.rate.max'],
|
||||
value: `${data?.video?.encoding.rate.max || '-'} bps`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.rate.default'],
|
||||
value: `${data?.video?.encoding.rate.default || '-'} bps`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.frameRate'],
|
||||
value: `${data?.video?.encoding.frameRate || '-'} fpx`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.video.encoding.profile'],
|
||||
value: data?.video?.encoding.profile || '-',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
blockDataList.push({
|
||||
title: t[`basicProfile.title.${type}Audio`],
|
||||
data: [
|
||||
{
|
||||
label: t['basicProfile.label.audio.mode'],
|
||||
value: data?.audio?.mode || '-',
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.audio.acquisition.channels'],
|
||||
value: `${data?.audio?.acquisition.channels || '-'} ${
|
||||
t['basicProfile.unit.audio.channels']
|
||||
}`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.audio.encoding.channels'],
|
||||
value: `${data?.audio?.encoding.channels || '-'} ${
|
||||
t['basicProfile.unit.audio.channels']
|
||||
}`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.audio.encoding.rate'],
|
||||
value: `${data?.audio?.encoding.rate || '-'} kbps`,
|
||||
},
|
||||
{
|
||||
label: t['basicProfile.label.audio.encoding.profile'],
|
||||
value: data?.audio?.encoding.profile || '-',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div>
|
||||
{blockDataList.map(({ title: blockTitle, data: blockData }, index) => (
|
||||
<Descriptions
|
||||
key={`${index}`}
|
||||
colon=":"
|
||||
labelStyle={{ textAlign: 'right', width: 200, paddingRight: 10 }}
|
||||
valueStyle={{ width: 400 }}
|
||||
title={blockTitle}
|
||||
data={
|
||||
loading
|
||||
? blockData.map((item) => ({
|
||||
...item,
|
||||
value: (
|
||||
<Skeleton
|
||||
text={{ rows: 1, style: { width: '200px' } }}
|
||||
animation
|
||||
/>
|
||||
),
|
||||
}))
|
||||
: blockData
|
||||
}
|
||||
style={index > 0 ? { marginTop: '20px' } : {}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfileItem;
|
||||
@ -1,82 +0,0 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.profile': 'Profile',
|
||||
'menu.profile.basic': 'Basic Profile',
|
||||
'basicProfile.title.form': 'Parameter Approval Process Table',
|
||||
'basicProfile.steps.commit': 'Commit',
|
||||
'basicProfile.steps.approval': 'Approval',
|
||||
'basicProfile.steps.finish': 'Finish',
|
||||
'basicProfile.title.currentVideo': 'Current Video Parameters',
|
||||
'basicProfile.title.currentAudio': 'Current Audio Parameters',
|
||||
'basicProfile.title.originVideo': 'Origin Video Parameters',
|
||||
'basicProfile.title.originAudio': 'Origin Audio Parameters',
|
||||
'basicProfile.label.video.mode': 'Config Mode',
|
||||
'basicProfile.label.video.acquisition.resolution': 'Acquisition Resolution',
|
||||
'basicProfile.label.video.acquisition.frameRate': 'Acquisition Frame Rate',
|
||||
'basicProfile.label.video.encoding.resolution': 'Encoding Resolution',
|
||||
'basicProfile.label.video.encoding.rate.min': 'Encoding Min Rate',
|
||||
'basicProfile.label.video.encoding.rate.max': 'Encoding Max Rate',
|
||||
'basicProfile.label.video.encoding.rate.default': 'Encoding Default Rate',
|
||||
'basicProfile.label.video.encoding.frameRate': 'Encoding Frame Rate',
|
||||
'basicProfile.label.video.encoding.profile': 'Encoding Profile',
|
||||
'basicProfile.label.audio.mode': 'Config Mode',
|
||||
'basicProfile.label.audio.acquisition.channels': 'Acquisition Channels',
|
||||
'basicProfile.label.audio.encoding.channels': 'Encoding Channels',
|
||||
'basicProfile.label.audio.encoding.rate': 'Encoding Rate',
|
||||
'basicProfile.label.audio.encoding.profile': 'Encoding Profile',
|
||||
'basicProfile.unit.audio.channels': 'channels',
|
||||
'basicProfile.goBack': 'GoBack',
|
||||
'basicProfile.cancel': 'Cancel Process',
|
||||
|
||||
'basicProfile.adjustment.record': 'Parameter adjustment record',
|
||||
'basicProfile.adjustment.contentId': 'Content number',
|
||||
'basicProfile.adjustment.content': 'Adjust content',
|
||||
'basicProfile.adjustment.status': 'Current state',
|
||||
'basicProfile.adjustment.updatedTime': 'Change the time',
|
||||
'basicProfile.adjustment.operation': 'Operation',
|
||||
'basicProfile.adjustment.success': 'passed',
|
||||
'basicProfile.adjustment.waiting': 'under review',
|
||||
'basicProfile.adjustment.operation.view': 'view',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.profile': '详情页',
|
||||
'menu.profile.basic': '基础详情页',
|
||||
'basicProfile.title.form': '参数审批流程表',
|
||||
'basicProfile.steps.commit': '提交修改',
|
||||
'basicProfile.steps.approval': '审批中',
|
||||
'basicProfile.steps.finish': '修改完成',
|
||||
'basicProfile.title.currentVideo': '现视频参数',
|
||||
'basicProfile.title.currentAudio': '现音频参数',
|
||||
'basicProfile.title.originVideo': '原视频参数',
|
||||
'basicProfile.title.originAudio': '原音频参数',
|
||||
'basicProfile.label.video.mode': '配置模式',
|
||||
'basicProfile.label.video.acquisition.resolution': '采集分辨率',
|
||||
'basicProfile.label.video.acquisition.frameRate': '采集帧率',
|
||||
'basicProfile.label.video.encoding.resolution': '编码分辨率',
|
||||
'basicProfile.label.video.encoding.rate.min': '编码码率最小值',
|
||||
'basicProfile.label.video.encoding.rate.max': '编码码率最大值',
|
||||
'basicProfile.label.video.encoding.rate.default': '编码码率默认值',
|
||||
'basicProfile.label.video.encoding.frameRate': '编码帧率',
|
||||
'basicProfile.label.video.encoding.profile': '编码profile',
|
||||
'basicProfile.label.audio.mode': '配置模式',
|
||||
'basicProfile.label.audio.acquisition.channels': '采集声道数',
|
||||
'basicProfile.label.audio.encoding.channels': '编码声道数',
|
||||
'basicProfile.label.audio.encoding.rate': '编码码率',
|
||||
'basicProfile.label.audio.encoding.profile': '编码 profile',
|
||||
'basicProfile.unit.audio.channels': '声道',
|
||||
'basicProfile.goBack': '返回',
|
||||
'basicProfile.cancel': '取消流程',
|
||||
|
||||
'basicProfile.adjustment.record': '参数调整记录',
|
||||
'basicProfile.adjustment.contentId': '内容编号',
|
||||
'basicProfile.adjustment.content': '调整内容',
|
||||
'basicProfile.adjustment.status': '当前状态',
|
||||
'basicProfile.adjustment.updatedTime': '修改时间',
|
||||
'basicProfile.adjustment.operation': '操作',
|
||||
'basicProfile.adjustment.success': '已通过',
|
||||
'basicProfile.adjustment.waiting': '审核中',
|
||||
'basicProfile.adjustment.operation.view': '查看',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -1,52 +0,0 @@
|
||||
import Mock from 'mockjs';
|
||||
import setupMock from '@/utils/setupMock';
|
||||
|
||||
setupMock({
|
||||
setup: () => {
|
||||
Mock.mock(new RegExp('/api/basicProfile'), () => {
|
||||
return {
|
||||
status: 2,
|
||||
video: {
|
||||
mode: '自定义',
|
||||
acquisition: {
|
||||
resolution: '720*1280',
|
||||
frameRate: 15,
|
||||
},
|
||||
encoding: {
|
||||
resolution: '720*1280',
|
||||
rate: {
|
||||
min: 300,
|
||||
max: 800,
|
||||
default: 1500,
|
||||
},
|
||||
frameRate: 15,
|
||||
profile: 'high',
|
||||
},
|
||||
},
|
||||
audio: {
|
||||
mode: '自定义',
|
||||
acquisition: {
|
||||
channels: 8,
|
||||
},
|
||||
encoding: {
|
||||
channels: 8,
|
||||
rate: 128,
|
||||
profile: 'ACC-LC',
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Mock.mock(new RegExp('/api/adjustment'), () => {
|
||||
return new Array(2).fill('0').map(() => ({
|
||||
contentId: `${Mock.Random.pick([
|
||||
'视频类',
|
||||
'音频类',
|
||||
])}${Mock.Random.natural(1000, 9999)}`,
|
||||
content: '视频参数变更，音频参数变更',
|
||||
status: Mock.Random.natural(0, 1),
|
||||
updatedTime: Mock.Random.datetime('yyyy-MM-dd HH:mm:ss'),
|
||||
}));
|
||||
});
|
||||
},
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
.container {
|
||||
:global(.arco-card) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.steps {
|
||||
max-width: 548px;
|
||||
margin: 0 auto;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Typography, Result, Button, Link } from '@arco-design/web-react';
|
||||
import { IconLink } from '@arco-design/web-react/icon';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
function Success() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.wrapper}>
|
||||
<Result
|
||||
className={styles.result}
|
||||
status="error"
|
||||
title={t['error.result.title']}
|
||||
subTitle={t['error.result.subTitle']}
|
||||
extra={[
|
||||
<Button key="again" type="secondary" style={{ marginRight: 16 }}>
|
||||
{t['error.result.goBack']}
|
||||
</Button>,
|
||||
<Button key="back" type="primary">
|
||||
{t['error.result.retry']}
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<div className={styles['details-wrapper']}>
|
||||
<Typography.Title heading={6} style={{ marginTop: 0 }}>
|
||||
{t['error.detailTitle']}
|
||||
</Typography.Title>
|
||||
<Typography.Paragraph style={{ marginBottom: 0 }}>
|
||||
<ol>
|
||||
<li>
|
||||
{t['error.detailLine.record']}
|
||||
<Link suppressHydrationWarning>
|
||||
<IconLink />
|
||||
{t['error.detailLine.record.link']}
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
{t['error.detailLine.auth']}
|
||||
<Link suppressHydrationWarning>{t['error.detailLine.auth.link']}</Link>
|
||||
</li>
|
||||
</ol>
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Success;
|
||||
@ -1,33 +0,0 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.result': 'Result',
|
||||
'menu.result.error': 'Error',
|
||||
'error.result.title': 'Submit Error',
|
||||
'error.result.subTitle':
|
||||
'Please check the modified information and try again',
|
||||
'error.result.goBack': 'GoBack',
|
||||
'error.result.retry': 'Retry',
|
||||
'error.detailTitle': 'Details of Error',
|
||||
'error.detailLine.record':
|
||||
'The current domain name has not been registered, please check the registration process: ',
|
||||
'error.detailLine.record.link': 'Registration Process',
|
||||
'error.detailLine.auth':
|
||||
'Your user group does not have the authority to perform this operation;',
|
||||
'error.detailLine.auth.link': 'Request for access',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.result': '结果页',
|
||||
'menu.result.error': '失败页',
|
||||
'error.result.title': '提交失败',
|
||||
'error.result.subTitle': '请核对修改信息后，再重试',
|
||||
'error.result.goBack': '回到首页',
|
||||
'error.result.retry': '返回修改',
|
||||
'error.detailTitle': '错误详情',
|
||||
'error.detailLine.record': '当前域名未备案，备案流程请查看：',
|
||||
'error.detailLine.record.link': '备案流程',
|
||||
'error.detailLine.auth': '你的用户组不具有进行此操作的权限；',
|
||||
'error.detailLine.auth.link': '申请权限',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -1,18 +0,0 @@
|
||||
.wrapper {
|
||||
padding: 24px 150px;
|
||||
background-color: var(--color-bg-2);
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - 168px);
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 150px 0 36px;
|
||||
}
|
||||
|
||||
.details-wrapper {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: var(--color-fill-2);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Typography, Result, Button, Steps } from '@arco-design/web-react';
|
||||
import useLocale from '@/utils/useLocale';
|
||||
import locale from './locale';
|
||||
import styles from './style/index.module.less';
|
||||
|
||||
const Step = Steps.Step;
|
||||
|
||||
function Success() {
|
||||
const t = useLocale(locale);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.wrapper}>
|
||||
<Result
|
||||
className={styles.result}
|
||||
status="success"
|
||||
title={t['success.result.title']}
|
||||
subTitle={t['success.result.subTitle']}
|
||||
extra={[
|
||||
<Button key="again" type="secondary" style={{ marginRight: 16 }}>
|
||||
{t['success.result.printResult']}
|
||||
</Button>,
|
||||
<Button key="back" type="primary">
|
||||
{t['success.result.projectList']}
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
<div className={styles['steps-wrapper']}>
|
||||
<Typography.Paragraph bold>
|
||||
{t['success.result.progress']}
|
||||
</Typography.Paragraph>
|
||||
<Steps type="dot" current={2}>
|
||||
<Step
|
||||
title={t['success.submitApplication']}
|
||||
description="2020/10/10 14:00:39"
|
||||
/>
|
||||
<Step
|
||||
title={t['success.leaderReview']}
|
||||
description={t['success.processing']}
|
||||
/>
|
||||
<Step
|
||||
title={t['success.purchaseCertificate']}
|
||||
description={t['success.waiting']}
|
||||
/>
|
||||
<Step
|
||||
title={t['success.safetyTest']}
|
||||
description={t['success.waiting']}
|
||||
/>
|
||||
<Step
|
||||
title={t['success.launched']}
|
||||
description={t['success.waiting']}
|
||||
/>
|
||||
</Steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Success;
|
||||
@ -1,36 +0,0 @@
|
||||
const i18n = {
|
||||
'en-US': {
|
||||
'menu.result': 'Result',
|
||||
'menu.result.success': 'Success',
|
||||
'success.result.title': 'Submit Success',
|
||||
'success.result.subTitle': 'Submit form success!',
|
||||
'success.result.printResult': 'Print result',
|
||||
'success.result.projectList': 'Project List',
|
||||
'success.result.progress': 'Progress',
|
||||
'success.submitApplication': 'Submit Application',
|
||||
'success.leaderReview': 'Leader Review',
|
||||
'success.purchaseCertificate': 'Purchase Certificate',
|
||||
'success.safetyTest': 'Safety Test',
|
||||
'success.launched': 'Officially launched',
|
||||
'success.waiting': 'Waiting',
|
||||
'success.processing': 'Processing',
|
||||
},
|
||||
'zh-CN': {
|
||||
'menu.result': '结果页',
|
||||
'menu.result.success': '成功页',
|
||||
'success.result.title': '提交成功',
|
||||
'success.result.subTitle': '表单提交成功！',
|
||||
'success.result.printResult': '打印结果',
|
||||
'success.result.projectList': '返回项目列表',
|
||||
'success.result.progress': '当前进度',
|
||||
'success.submitApplication': '提交申请',
|
||||
'success.leaderReview': '直属领导审核',
|
||||
'success.purchaseCertificate': '购买证书',
|
||||
'success.safetyTest': '安全测试',
|
||||
'success.launched': '正式上线',
|
||||
'success.waiting': '未开始',
|
||||
'success.processing': '进行中',
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
@ -1,19 +0,0 @@
|
||||
.wrapper {
|
||||
padding: 24px 150px;
|
||||
background-color: var(--color-bg-2);
|
||||
box-sizing: border-box;
|
||||
min-height: calc(100vh - 168px);
|
||||
}
|
||||
|
||||
.result {
|
||||
margin: 150px 0 36px;
|
||||
}
|
||||
|
||||
.steps-wrapper {
|
||||
width: 100%;
|
||||
min-width: fit-content;
|
||||
padding: 20px;
|
||||
background-color: var(--color-fill-2);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 150px;
|
||||
}
|
||||
Loading…
Reference in New Issue