mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-11 17:32:50 +00:00
🆕 添加dooring主页 ⬆️ 升级依赖 🎨 修改header跳转逻辑
This commit is contained in:
xujiang
parent
8f5927be0e
commit
e1a576f5e6
36
.umirc.ts
36
.umirc.ts
@ -18,25 +18,23 @@ export default defineConfig({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
// component: '@/layouts',
|
||||
routes: [
|
||||
{
|
||||
path: '/editor',
|
||||
component: '../pages/editor',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: '../pages/login',
|
||||
},
|
||||
{
|
||||
path: '/mobileTip',
|
||||
component: '../pages/mobileTip',
|
||||
},
|
||||
{
|
||||
path: '/preview',
|
||||
component: '../pages/editor/preview',
|
||||
},
|
||||
],
|
||||
component: '../pages/home',
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
component: '../pages/editor',
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: '../pages/login',
|
||||
},
|
||||
{
|
||||
path: '/mobileTip',
|
||||
component: '../pages/mobileTip',
|
||||
},
|
||||
{
|
||||
path: '/preview',
|
||||
component: '../pages/editor/preview',
|
||||
},
|
||||
],
|
||||
theme: {
|
||||
|
||||
@ -8,7 +8,9 @@ import {
|
||||
DeleteOutlined,
|
||||
UndoOutlined,
|
||||
RedoOutlined,
|
||||
FileAddOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { history } from 'umi';
|
||||
import QRCode from 'qrcode.react';
|
||||
import { saveAs } from 'file-saver';
|
||||
import Zan from 'components/Zan';
|
||||
@ -97,6 +99,20 @@ const HeaderComponent = memo(props => {
|
||||
window.location.href = `/h5_plus/login?tid=${tid}`;
|
||||
};
|
||||
|
||||
const toBack = () => {
|
||||
history.push('/');
|
||||
};
|
||||
|
||||
const newPage = () => {
|
||||
let prev = localStorage.getItem('myH5');
|
||||
try {
|
||||
localStorage.setItem('myH5', JSON.stringify(prev ? [...prev, pointData] : [pointData]));
|
||||
} catch (err) {
|
||||
throw error(err);
|
||||
}
|
||||
clearData();
|
||||
};
|
||||
|
||||
const savePreview = () => {
|
||||
const { tid } = props.location.query || '';
|
||||
req.post('/visible/preview', { tid, tpl: pointData });
|
||||
@ -106,7 +122,7 @@ const HeaderComponent = memo(props => {
|
||||
return (
|
||||
<div className={styles.header}>
|
||||
<div className={styles.logoArea}>
|
||||
<div className={styles.backBtn} onClick={toLogin}>
|
||||
<div className={styles.backBtn} onClick={toBack}>
|
||||
<ArrowLeftOutlined />
|
||||
</div>
|
||||
<div className={styles.logo}>Dooring</div>
|
||||
@ -140,6 +156,15 @@ const HeaderComponent = memo(props => {
|
||||
>
|
||||
<CopyOutlined />
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
style={{ marginRight: '9px' }}
|
||||
title="新建页面"
|
||||
onClick={newPage}
|
||||
disabled={!pointData.length}
|
||||
>
|
||||
<FileAddOutlined />
|
||||
</Button>
|
||||
<Popover placement="bottom" title={null} content={content} trigger="click">
|
||||
<Button
|
||||
type="link"
|
||||
@ -159,10 +184,22 @@ const HeaderComponent = memo(props => {
|
||||
>
|
||||
<DeleteOutlined />
|
||||
</Button>
|
||||
<Button type="link" style={{ marginRight: '9px' }} title="撤销" onClick={undohandler}>
|
||||
<Button
|
||||
type="link"
|
||||
style={{ marginRight: '9px' }}
|
||||
title="撤销"
|
||||
onClick={undohandler}
|
||||
disabled={!pointData.length}
|
||||
>
|
||||
<UndoOutlined />
|
||||
</Button>
|
||||
<Button type="link" style={{ marginRight: '9px' }} title="重做" onClick={redohandler}>
|
||||
<Button
|
||||
type="link"
|
||||
style={{ marginRight: '9px' }}
|
||||
title="重做"
|
||||
onClick={redohandler}
|
||||
disabled={!pointData.length}
|
||||
>
|
||||
<RedoOutlined />
|
||||
</Button>
|
||||
<Button type="link" onClick={toPreview} disabled={!pointData.length}>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
.logoArea {
|
||||
width: 300px;
|
||||
.backBtn {
|
||||
@ -18,22 +18,20 @@
|
||||
}
|
||||
.logo {
|
||||
display: inline-block;
|
||||
width: 52px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.controlArea {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.btnArea {
|
||||
width: 320px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
60
src/pages/home/index.less
Normal file
60
src/pages/home/index.less
Normal file
@ -0,0 +1,60 @@
|
||||
.homeWrap {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.leftArea {
|
||||
padding: 10px 0 10px 20px;
|
||||
width: 320px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.contentArea {
|
||||
flex: 1;
|
||||
.logoTip {
|
||||
padding-top: 100px;
|
||||
text-align: center;
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
font-size: 30px;
|
||||
.logoText {
|
||||
font-weight: bold;
|
||||
color: #2f54eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
.operation {
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
.card {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0);
|
||||
font-size: 60px;
|
||||
border: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
div {
|
||||
margin-top: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
&:first-child {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/pages/home/index.tsx
Normal file
82
src/pages/home/index.tsx
Normal file
@ -0,0 +1,82 @@
|
||||
import React from 'react';
|
||||
import { Tabs, message } from 'antd';
|
||||
import { history } from 'umi';
|
||||
import { MobileOutlined, ConsoleSqlOutlined, GithubOutlined } from '@ant-design/icons';
|
||||
import styles from './index.less';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const Home = () => {
|
||||
const handleGo = (type: string) => {
|
||||
if (type === 'H5') {
|
||||
history.push('/editor?tid=123456');
|
||||
} else {
|
||||
message.error('该功能暂未开放, 敬请关注...');
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className={styles.homeWrap}>
|
||||
<div className={styles.leftArea}>
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<MobileOutlined />
|
||||
我的H5
|
||||
</span>
|
||||
}
|
||||
key="1"
|
||||
>
|
||||
正在开发...
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={
|
||||
<span>
|
||||
<ConsoleSqlOutlined />
|
||||
我的大屏
|
||||
</span>
|
||||
}
|
||||
key="2"
|
||||
>
|
||||
正在开发...
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
<div className={styles.contentArea}>
|
||||
<div className={styles.logoTip}>
|
||||
<div className={styles.logo}>
|
||||
<span className={styles.logoText} title="H5-Dooring可视化编辑器">
|
||||
H5-Dooring
|
||||
</span>
|
||||
可视化编辑器
|
||||
</div>
|
||||
<p style={{ display: 'inline-block', width: '520px', fontSize: '16px', lineHeight: '2' }}>
|
||||
H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，
|
||||
致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 技术栈以react为主，
|
||||
后台采用nodejs开发。
|
||||
</p>
|
||||
</div>
|
||||
<div className={styles.operation}>
|
||||
<div className={styles.card} onClick={() => handleGo('H5')}>
|
||||
<MobileOutlined />
|
||||
<div>制作H5页面</div>
|
||||
</div>
|
||||
<div className={styles.card} onClick={() => handleGo('PC')}>
|
||||
<ConsoleSqlOutlined />
|
||||
<div>制作可视化大屏</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer className={styles.footer}>
|
||||
<div>
|
||||
<a href="https://github.com/MrXujiang/h5-Dooring">
|
||||
<GithubOutlined />
|
||||
</a>
|
||||
<p>Welcome to H5-Dooring 👋</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
Loading…
x
Reference in New Issue
Block a user