Skip to content

L
lab-learnvideo-web
Commit 5801ce16 authored by yangyutan's avatar yangyutan
Browse files
Options

feat: backendData driven preview page

parent 0c0f4aa0
Hide whitespace changes
Inline Side-by-side
Showing with 664 additions and 656 deletions
package.json
View file @ 5801ce16
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --host",
"build": "vite build", "build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview" "preview": "vite preview"
......
public/test.mp4
View file @ 5801ce16
No preview for this file type
src/commonents/antTest/index.jsx
View file @ 5801ce16
import React from 'react'; import React from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
const AntTest = () => ( const AntTest = () => (
<div className="App"> <div className="App">
<Button type="primary">Button</Button> <Button type="primary">Button</Button>
</div> </div>
); );
export default AntTest; export default AntTest;
src/commonents/cssAnimation/index.css
View file @ 5801ce16
body { body {
background-color: rgb(48, 66, 148); background-color: rgb(48, 66, 148);
} }
#box { #box {
width:300px; width:300px;
height:300px; height:300px;
border:1px solid yellow; border:1px solid yellow;
} }
#boll { #boll {
width:50px; width:50px;
height:50px; height:50px;
background-color:chartreuse; background-color:chartreuse;
animation-name:move,chColor; animation-name:move,chColor;
animation-duration:2s,2s; animation-duration:2s,2s;
animation-direction:alternate-reverse; animation-direction:alternate-reverse;
animation-iteration-count:4,1; /*infinite*/ animation-iteration-count:4,1; /*infinite*/
} }
@keyframes toGroat { @keyframes toGroat {
from { from {
width:50px; width:50px;
height: 50px; height: 50px;
} }
to { to {
width:200px; width:200px;
height:200px; height:200px;
} }
} }
@keyframes chColor { @keyframes chColor {
from,to { from,to {
background-color:green; background-color:green;
} }
25% { 25% {
background-color:yellow; background-color:yellow;
} }
50% { 50% {
background-color: red; background-color: red;
} }
75% { 75% {
background-color:blueviolet; background-color:blueviolet;
} }
} }
@keyframes move { @keyframes move {
25% { 25% {
transform: translateX(250px); transform: translateX(250px);
} }
50% { 50% {
transform: translate(250px,250px); transform: translate(250px,250px);
} }
75% { 75% {
transform: translateY(250px); transform: translateY(250px);
} }
} }
\ No newline at end of file
src/commonents/cssAnimation/index.jsx
View file @ 5801ce16
import './index.css' import './index.css'
import { useEffect } from 'react' import { useEffect } from 'react'
function cssAnimation() { function cssAnimation() {
useEffect(() => { useEffect(() => {
console.log('all') console.log('all')
}) })
return ( return (
<> <>
<div className="container"> <div className="container">
<p>css animation</p> <p>css animation</p>
<div id="box"> <div id="box">
<div id="boll"></div> <div id="boll"></div>
</div> </div>
</div> </div>
</> </>
) )
} }
export default cssAnimation export default cssAnimation
src/commonents/fabricTest/index.css
View file @ 5801ce16
#canvas-container { #canvas-container {
width: 360px; width: 360px;
height: 640px; height: 640px;
background-color: #E4E4E4; background-color: #E4E4E4;
} }
\ No newline at end of file
src/commonents/fabricTest/index.jsx
View file @ 5801ce16
import './index.css' import './index.css'
import { useEffect } from 'react' import { useEffect } from 'react'
// import { fabric } from 'fabric' // import { fabric } from 'fabric'
function Fabric() { function Fabric() {
// useEffect(() => { // useEffect(() => {
// var canvas =new fabric.Canvas('canvas-container'); // var canvas =new fabric.Canvas('canvas-container');
// var rect = new fabric.Rect({ // var rect = new fabric.Rect({
// left:100,//距离画布左侧的距离，单位是像素 // left:100,//距离画布左侧的距离，单位是像素
// top:100,//距离画布上边的距离 // top:100,//距离画布上边的距离
// fill:'red',//填充的颜色 // fill:'red',//填充的颜色
// width:30,//方形的宽度 // width:30,//方形的宽度
// height:30//方形的高度 // height:30//方形的高度
// }) // })
// canvas.add(rect) // canvas.add(rect)
// }) // })
return ( return (
<> <>
<div className="container"> <div className="container">
<p>画布</p> <p>画布</p>
<canvas id="canvas-container">3</canvas> <canvas id="canvas-container">3</canvas>
</div> </div>
</> </>
) )
} }
export default Fabric export default Fabric
src/pages/home/index.jsx
View file @ 5801ce16
import AntTest from '../../commonents/antTest/index.jsx' import AntTest from '../../commonents/antTest/index.jsx'
let Home = () => { let Home = () => {
return <> return <>
<AntTest /> <AntTest />
</> </>
} }
export default Home export default Home
\ No newline at end of file
src/pages/preview/components/videoBox/index.jsx
View file @ 5801ce16
import { Spin } from 'antd' import { Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons' import { LoadingOutlined } from '@ant-design/icons'
const VideoBox = (props) => { const VideoBox = (props) => {
let spin = ( let spin = (
<Spin <Spin
delay={1000} delay={1000}
spinning={false} spinning={false}
indicator={ indicator={
<LoadingOutlined <LoadingOutlined
style={{ style={{
fontSize: 64 fontSize: 64
}} }}
spin spin
/> />
} }
/> />
) )
return ( return (
<div <div
style={{ style={{
width: 440, width: 440,
height: 330, height: 330,
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
backgroundColor: '#E4E4E4', backgroundColor: '#E4E4E4',
padding: 0, padding: 0,
margin: 0, margin: 0,
borderRadius: 10, borderRadius: 10,
overflow: 'hidden' overflow: 'hidden'
}}> }}>
<div <div
style={{ style={{
width: '42%', width: '42%',
height: '100%', height: '100%',
overflow: 'hidden', overflow: 'hidden',
backgroundColor: 'orange' backgroundColor: 'orange'
}}> }}>
<video <video
controls controls
height="100%" height="100%"
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
overflow: 'hidden' overflow: 'hidden'
}}> }}>
<source src={props.videoData.url} type="video/mp4" /> <source src={props.videoData.url} type="video/mp4" />
</video> </video>
</div> </div>
<div <div
style={{ style={{
flex: 1, flex: 1,
width: '58%', width: '58%',
height: '100%', height: '100%',
padding: 10, padding: 10,
backgroundColor: '#fff', backgroundColor: '#fff',
display: 'flex', display: 'flex',
flexDirection: 'column' flexDirection: 'column'
}}> }}>
<div <div
style={{ style={{
flex: 1, flex: 1,
height: '50%', height: '50%',
marginBottom: 16 marginBottom: 16
// backgroundColor: 'skyblue' // backgroundColor: 'skyblue'
}}> }}>
<div <div
style={{ style={{
height: '18%', height: '18%',
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
borderBottom: '1px solid #000' borderBottom: '1px solid #000'
}}> }}>
Target user group： Target user group：
</div> </div>
<div <div
style={{ style={{
height: '82%', height: '82%',
fontSize: 15, fontSize: 15,
overflowY: 'auto', overflowY: 'auto',
lineHeight: '24px' lineHeight: '24px'
}}> }}>
{props.videoData.targetAudience} {props.videoData.targetAudience}
</div> </div>
</div> </div>
<div <div
style={{ style={{
flex: 1, flex: 1,
height: '50%' height: '50%'
}}> }}>
<div <div
style={{ style={{
width: '100%', width: '100%',
height: '18%', height: '18%',
fontSize: 18, fontSize: 18,
fontWeight: 'bold', fontWeight: 'bold',
borderBottom: '1px solid #000' borderBottom: '1px solid #000'
}}> }}>
Pain points for users： Pain points for users：
</div> </div>
<div <div
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
fontSize: 15, fontSize: 15,
overflowY: 'auto' overflowY: 'auto'
}}> }}>
{props.videoData.painPoint} {props.videoData.painPoint}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) )
} }
export default VideoBox export default VideoBox
src/pages/preview/index.jsx
View file @ 5801ce16
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Layout, Flex, message } from 'antd' import { Layout, Flex, message } from 'antd'
import VideoBox from './components/videoBox' import VideoBox from './components/videoBox'
import { useLocation } from 'react-router-dom' import { useLocation } from 'react-router-dom'
import axios from 'axios' import axios from 'axios'
const { Header, Footer, Content } = Layout const { Header, Footer, Content } = Layout
const headerStyle = { const headerStyle = {
color: '#fff', color: '#fff',
height: 64, height: 64,
paddingInline: 48, paddingInline: 48,
lineHeight: '64px', lineHeight: '64px',
backgroundColor: '#4096ff' backgroundColor: '#4096ff'
} }
const contentStyle = { const contentStyle = {
minHeight: 120, minHeight: 120,
backgroundColor: '#0958d9', backgroundColor: '#0958d9',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'flex-start', alignItems: 'flex-start',
alignContent: 'flex-start', alignContent: 'flex-start',
padding: 25, padding: 25,
gap: 25 gap: 25
} }
const footerStyle = { const footerStyle = {
color: '#fff', color: '#fff',
backgroundColor: '#4096ff' backgroundColor: '#4096ff'
} }
const layoutStyle = { const layoutStyle = {
borderRadius: 8, borderRadius: 8,
overflow: 'hidden', overflow: 'hidden',
width: 'calc(100% - 8px)', width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)', maxWidth: 'calc(100% - 8px)',
minHeight: '100vh' minHeight: '100vh'
} }
const VideoList = () => { const VideoList = () => {
const { state } = useLocation() const { state } = useLocation()
const [Videos, setVideos] = useState([]) const [Videos, setVideos] = useState([])
//Call the backend interface to obtain the latest video results //Call the backend interface to obtain the latest video results
const refreshVideo = async () => { // const refreshVideo = async () => {
let res = null // let res = null
try { // try {
res = await axios.get(`http://10.20.1.10:3100/2403/learnvideo/check?shotDirName=${state.reqData.shotDirName}`) // res = await axios.get(`http://10.20.1.10:3100/2403/learnvideo/check?shotDirName=${state.reqData.shotDirName}`)
} catch (err) { // } catch (err) {
message.error('Connect server failed') // message.error('Connect server failed')
console.error(err) // console.error(err)
} // }
if (res.data.code != 200) { // if (res.data.code != 200) {
message.error(`request server failed: ${res.data.code}`) // console.log(res.data)
} // message.error(`request server failed: ${res.data.code}`)
//Always refresh display list // }
if (res.data.data.length) { // //Always refresh display list
let _Videos = res.data.data.map((video, index) => { // if (res.data.data.length) {
let videoData = { // let _Videos = res.data.data.map((video, index) => {
url: video.url, // let videoData = {
targetAudience: video.data.targetAudience, // url: video.url,
painPoint: video.data.painPoint // targetAudience: video.data.targetAudience,
} // painPoint: video.data.painPoint
return <VideoBox videoData={videoData} key={index} /> // }
}) // return <VideoBox videoData={videoData} key={index} />
setVideos(_Videos) // })
} // setVideos(_Videos)
let timer = setTimeout(() => { // }
clearTimeout(timer) // let timer = setTimeout(() => {
refreshVideo() // clearTimeout(timer)
}, 4000) // refreshVideo()
} // }, 4000)
// }
useEffect(() => {
console.log('state_is:', state) useEffect(() => {
refreshVideo() console.log('state_is:', state)
// let res = {} // 模拟请求和渲染过程
// res.data = { let res = {}
// code: 200, res.data = {
// data: [ code: 200,
// { data: [
// url: '/test1.mp4', {
// data: { url: '/test.mp4',
// targetAudience: '1忙碌的上班族和年轻家庭主妇...', data: {
// painPoint: '1工作繁忙，没时间去市场挑选新鲜海鲜...' targetAudience: '1忙碌的上班族和年轻家庭主妇...',
// } painPoint: '1工作繁忙，没时间去市场挑选新鲜海鲜...'
// }, }
// { },
// url: '/test.mp4', {
// data: { url: '/test.mp4',
// targetAudience: '2忙碌的上班族和年轻家庭主妇...', data: {
// painPoint: '2工作繁忙，没时间去市场挑选新鲜海鲜...' targetAudience: '2忙碌的上班族和年轻家庭主妇...',
// } painPoint: '2工作繁忙，没时间去市场挑选新鲜海鲜...'
// }, }
// { },
// url: '/test.mp4', {
// data: { url: '/test.mp4',
// targetAudience: '3忙碌的上班族和年轻家庭主妇...', data: {
// painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...' targetAudience: '3忙碌的上班族和年轻家庭主妇...',
// } painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
// } }
// ] }
// } ]
// const refreshVideo = () => { }
// setTimeout(() => { const refreshVideo = () => {
// if (res.data.code == 200) { setTimeout(() => {
// let _Videos = res.data.data.map((video, index) => { if (res.data.code == 200) {
// let videoData = { let _Videos = res.data.data.map((video, index) => {
// url: video.url, let videoData = {
// targetAudience: video.data.targetAudience, url: video.url,
// painPoint: video.data.painPoint targetAudience: video.data.targetAudience,
// } painPoint: video.data.painPoint
// return <VideoBox videoData={videoData} key={index} /> }
// }) return <VideoBox videoData={videoData} key={index} />
// setVideos(_Videos) })
// res.data.data.push({ setVideos(_Videos)
// url: '/test.mp4', res.data.data.push({
// data: { url: '/test.mp4',
// targetAudience: '3忙碌的上班族和年轻家庭主妇...', data: {
// painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...' targetAudience: '3忙碌的上班族和年轻家庭主妇...',
// } painPoint: '3工作繁忙，没时间去市场挑选新鲜海鲜...'
// }) }
// refreshVideo() })
// } refreshVideo()
// }, 3000) }
// } }, 3000)
// refreshVideo() }
}, [])
return <>{Videos}</>
} refreshVideo()
}, [])
const Preview = () => { return <>{Videos}</>
return ( }
<Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}> const Preview = () => {
<Header style={headerStyle}>TapVideo</Header> return (
<Content style={contentStyle}> <Flex gap="middle" wrap="wrap">
<VideoList /> <Layout style={layoutStyle}>
</Content> <Header style={headerStyle}>TapVideo</Header>
<Footer style={footerStyle}>©Goyoo</Footer> <Content style={contentStyle}>
</Layout> <VideoList />
</Flex> </Content>
) <Footer style={footerStyle}>©Goyoo</Footer>
} </Layout>
</Flex>
export default Preview )
}
export default Preview
src/pages/upload/components/uploadVideo/index.jsx
View file @ 5801ce16
import React from 'react' import React from 'react'
import { InboxOutlined } from '@ant-design/icons' import { InboxOutlined } from '@ant-design/icons'
import { message, Upload, Card } from 'antd' import { message, Upload, Card } from 'antd'
import $eventbus from '../../../../utils/EventBus.js' import $eventbus from '../../../../utils/EventBus.js'
const { Dragger } = Upload const { Dragger } = Upload
const UploadVideo = (props) => { const UploadVideo = (props) => {
let lock = false let lock = false
const opts = { const opts = {
name: 'file', name: 'file',
accept: '.mp4', accept: '.mp4',
multiple: false, multiple: false,
directory: true, directory: true,
action: 'http://10.20.1.10:3100/2403/learnvideo/upload', action: 'http://10.20.1.10:3100/2403/learnvideo/upload',
beforeUpload(file) { beforeUpload(file) {
if (file.webkitRelativePath.split('/').length != 2) { if (file.webkitRelativePath.split('/').length != 2) {
console.log('---', file.webkitRelativePath) console.log('---', file.webkitRelativePath)
return Upload.LIST_IGNORE return Upload.LIST_IGNORE
} }
if (!lock) { if (!lock) {
$eventbus.emit('upload_fold_name', { $eventbus.emit('upload_fold_name', {
group: props.group, group: props.group,
name: file.webkitRelativePath.split('/')[0] name: file.webkitRelativePath.split('/')[0]
}) })
lock = true lock = true
} }
}, },
customRequest(config) { customRequest(config) {
let rand = Math.random() * 1500 let rand = Math.random() * 1500
let timer = setTimeout(() => { let timer = setTimeout(() => {
clearTimeout(timer) clearTimeout(timer)
config.onSuccess() config.onSuccess()
}, rand) }, rand)
}, },
onChange(info) { onChange(info) {
const { status } = info.file const { status } = info.file
if (status !== 'uploading') { if (status !== 'uploading') {
// console.log(info.file, info.fileList) // console.log(info.file, info.fileList)
} }
if (status === 'done') { if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`) message.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') { } else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`) message.error(`${info.file.name} file upload failed.`)
} }
}, },
onDrop(e) { onDrop(e) {
// console.log('Dropped files', e.dataTransfer.files) // console.log('Dropped files', e.dataTransfer.files)
} }
} }
return ( return (
<Card <Card
title={props.title} title={props.title}
bordered={false} bordered={false}
style={{ style={{
flexBasis: 'max(400px, calc(44%))', flexBasis: 'max(400px, calc(44%))',
marginTop: 25 marginTop: 25
}}> }}>
<Dragger {...opts}> <Dragger {...opts}>
<p className="ant-upload-drag-icon"> <p className="ant-upload-drag-icon">
<InboxOutlined /> <InboxOutlined />
</p> </p>
<p className="ant-upload-text">Click or drag the folder to this area for uploading</p> <p className="ant-upload-text">Click or drag the folder to this area for uploading</p>
</Dragger> </Dragger>
</Card> </Card>
) )
} }
export default UploadVideo export default UploadVideo
src/pages/upload/index.jsx
View file @ 5801ce16
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { Layout, Flex, Card, Button, Form, Input } from 'antd' import { Layout, Flex, Card, Button, Form, Input } from 'antd'
import { UploadOutlined } from '@ant-design/icons' import { UploadOutlined } from '@ant-design/icons'
import UploadVideo from './components/uploadVideo' import UploadVideo from './components/uploadVideo'
import $eventbus from '../../utils/EventBus.js' import $eventbus from '../../utils/EventBus.js'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import axios from 'axios' import axios from 'axios'
const { Header, Footer, Content } = Layout const { Header, Footer, Content } = Layout
const headerStyle = { const headerStyle = {
color: '#fff', color: '#fff',
height: 64, height: 64,
paddingInline: 48, paddingInline: 48,
lineHeight: '64px', lineHeight: '64px',
backgroundColor: '#4096ff' backgroundColor: '#4096ff'
} }
const contentStyle = { const contentStyle = {
minHeight: 120, minHeight: 120,
lineHeight: '120px', lineHeight: '120px',
color: '#fff', color: '#fff',
backgroundColor: '#0958d9', backgroundColor: '#0958d9',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-around', justifyContent: 'space-around',
flexWrap: 'wrap', flexWrap: 'wrap',
padding: 25, padding: 25,
gap: 25 gap: 25
} }
const footerStyle = { const footerStyle = {
color: '#fff', color: '#fff',
backgroundColor: '#4096ff' backgroundColor: '#4096ff'
} }
const layoutStyle = { const layoutStyle = {
borderRadius: 8, borderRadius: 8,
overflow: 'hidden', overflow: 'hidden',
width: 'calc(100% - 8px)', width: 'calc(100% - 8px)',
maxWidth: 'calc(100% - 8px)', maxWidth: 'calc(100% - 8px)',
minHeight: '100vh' minHeight: '100vh'
} }
const Upload = () => { const Upload = () => {
const navigate = useNavigate() const navigate = useNavigate()
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [folds, setFolds] = useState([]) const [folds, setFolds] = useState([])
const [form] = Form.useForm() const [form] = Form.useForm()
const submitTask = async () => { const submitTask = async () => {
let values = '' let values = ''
try { try {
values = await form.validateFields() values = await form.validateFields()
console.log('Success:', values) console.log('Success:', values)
} catch (errorInfo) { } catch (errorInfo) {
console.log('Failed:', errorInfo) console.log('Failed:', errorInfo)
return return
} }
if (!values.productDesc) { if (!values.productDesc) {
alert('Please input the description of your product') alert('Please input the description of your product')
return return
} }
let filmFold = folds.find((fold) => fold.group === 0) let filmFold = folds.find((fold) => fold.group === 0)
let shotFold = folds.find((fold) => fold.group === 1) let shotFold = folds.find((fold) => fold.group === 1)
if (!filmFold) { if (!filmFold) {
alert('Please upload excellent videos') alert('Please upload excellent videos')
return return
} }
if (!shotFold) { if (!shotFold) {
alert('Please upload project footage') alert('Please upload project footage')
return return
} }
let reqData = { let reqData = {
filmDirName: filmFold.name, filmDirName: filmFold.name,
shotDirName: shotFold.name, shotDirName: shotFold.name,
productDesc: values.productDesc, productDesc: values.productDesc,
count: 5 count: 5
} }
console.log(reqData) console.log(reqData)
setLoading(true) setLoading(true)
const res = axios.post('http://10.20.1.10:3100/2403/learnvideo/start', reqData) const res = axios.post('http://10.20.1.10:3100/2403/learnvideo/start', reqData)
let timer = setTimeout(() => { let timer = setTimeout(() => {
clearTimeout(timer) clearTimeout(timer)
setLoading(false) setLoading(false)
navigate('/preview', { state: { reqData } }) navigate('/preview', { state: { reqData } })
}, 2000) }, 5000)
} }
useEffect(() => { useEffect(() => {
const recvFoldData = (fold) => { const recvFoldData = (fold) => {
console.log('======================') console.log('======================')
setFolds((prevFolds) => { setFolds((prevFolds) => {
const newFolds = [...prevFolds] const newFolds = [...prevFolds]
newFolds.push(fold) newFolds.push(fold)
return newFolds return newFolds
}) })
} }
$eventbus.on('upload_fold_name', recvFoldData) $eventbus.on('upload_fold_name', recvFoldData)
return () => { return () => {
$eventbus.off('upload_fold_name', recvFoldData) $eventbus.off('upload_fold_name', recvFoldData)
} }
}, []) }, [])
return ( return (
<Flex gap="middle" wrap="wrap"> <Flex gap="middle" wrap="wrap">
<Layout style={layoutStyle}> <Layout style={layoutStyle}>
<Header style={headerStyle}>TapVideo</Header> <Header style={headerStyle}>TapVideo</Header>
<Content style={contentStyle}> <Content style={contentStyle}>
<UploadVideo title="Upload excellent videos：" group={0} /> <UploadVideo title="Upload excellent videos：" group={0} />
<UploadVideo title="Upload project shots：" group={1} /> <UploadVideo title="Upload project shots：" group={1} />
{/* <Card {/* <Card
bordered={false} bordered={false}
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
flexBasis: 'max(calc(95%), min(400px, calc(100%)))', flexBasis: 'max(calc(95%), min(400px, calc(100%)))',
marginTop: 25 marginTop: 25
}}> */} }}> */}
{/* <Button type="primary" size="large" icon={<UploadOutlined />} loading={loading} onClick={() => submitTask()}> {/* <Button type="primary" size="large" icon={<UploadOutlined />} loading={loading} onClick={() => submitTask()}>
点击生成视频 点击生成视频
</Button> */} </Button> */}
<Form <Form
// inputFontSizeLG // inputFontSizeLG
form={form} form={form}
name="wrap" name="wrap"
labelCol={{ labelCol={{
flex: '110px' flex: '110px'
}} }}
labelAlign="left" labelAlign="left"
labelWrap labelWrap
wrapperCol={{ wrapperCol={{
flex: 1 flex: 1
}} }}
colon={false} colon={false}
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
maxWidth: 1600, maxWidth: 1600,
width: '50vw', width: '50vw',
flexBasis: 'max(calc(95%), min(400px, calc(100%)))', flexBasis: 'max(calc(95%), min(400px, calc(100%)))',
backgroundColor: '#fff', backgroundColor: '#fff',
borderRadius: 10, borderRadius: 10,
padding: 20 padding: 20
}}> }}>
<Form.Item label="DESCRIPTION：" name="productDesc" inputFontSize={20}> <Form.Item label="DESCRIPTION：" name="productDesc" inputFontSize={20}>
<Input placeholder="Please input the description of your product" /> <Input placeholder="Please input the description of your product" />
</Form.Item> </Form.Item>
<Form.Item label=" "> <Form.Item label=" ">
<Button type="primary" size="large" htmlType="submit" loading={loading} onClick={() => submitTask()} style={{ <Button type="primary" size="large" htmlType="submit" loading={loading} onClick={() => submitTask()} style={{
}}> }}>
Click to generate Click to generate
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
{/* </Card> */} {/* </Card> */}
</Content> </Content>
<Footer style={footerStyle}>©Goyoo</Footer> <Footer style={footerStyle}>©Goyoo</Footer>
</Layout> </Layout>
</Flex> </Flex>
) )
} }
export default Upload export default Upload
src/routes/index.jsx
View file @ 5801ce16
import Home from '../pages/home/index.jsx' import Home from '../pages/home/index.jsx'
import Upload from '../pages/upload/index.jsx' import Upload from '../pages/upload/index.jsx'
import Preview from '../pages/preview/index.jsx' import Preview from '../pages/preview/index.jsx'
import { Navigate } from 'react-router-dom' import { Navigate } from 'react-router-dom'
let routes = [ let routes = [
{ {
path: '/', path: '/',
element: <Navigate to="/upload" /> element: <Navigate to="/upload" />
},{ },{
path: '/home', path: '/home',
element: <Home /> element: <Home />
}, },
{ {
path: '/upload', path: '/upload',
element: <Upload /> element: <Upload />
}, },
{ {
path: '/preview', path: '/preview',
element: <Preview /> element: <Preview />
} }
] ]
export default routes export default routes
\ No newline at end of file
src/utils/EventBus.js
View file @ 5801ce16
import mitt from 'mitt' import mitt from 'mitt'
const $eventbus = mitt() const $eventbus = mitt()
export default $eventbus export default $eventbus
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment