mirror of
https://github.com/MrXujiang/h5-Dooring.git
synced 2025-12-10 16:52:49 +00:00
add module
This commit is contained in:
ggchinazhangwei
parent
8f64938639
commit
dafe548b4d
66
src/pages/user/index.less
Normal file
66
src/pages/user/index.less
Normal file
@ -0,0 +1,66 @@
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
.logoArea {
|
||||
display: contents;
|
||||
width: 300px;
|
||||
font-size: 18px;
|
||||
color: #2f54eb;
|
||||
.backBtn {
|
||||
display: inline-block;
|
||||
padding: 12px 10px;
|
||||
margin-right: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
img {
|
||||
width: 108px;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
.logoText {
|
||||
margin-left: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.operationBar {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contentWrap {
|
||||
display: flex;
|
||||
}
|
||||
.codeWrap {
|
||||
width: calc(100vw - 440px);
|
||||
min-height: 560px;
|
||||
height: 100%;
|
||||
}
|
||||
:global(.cm-s-material.CodeMirror) {
|
||||
height: 100%;
|
||||
}
|
||||
.previewWrap {
|
||||
margin: 0 30px;
|
||||
margin-top: 30px;
|
||||
width: 375px;
|
||||
min-width: 375px;
|
||||
overflow: auto;
|
||||
border: 12px solid #000;
|
||||
border-radius: 20px;
|
||||
}
|
||||
202
src/pages/user/index.tsx
Normal file
202
src/pages/user/index.tsx
Normal file
@ -0,0 +1,202 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { Controlled } from "react-codemirror2";
|
||||
import { useState } from "react";
|
||||
import { Button, message } from "antd";
|
||||
import { saveAs } from "file-saver";
|
||||
import Logo from "@/assets/logo.png";
|
||||
import styles from "./index.less";
|
||||
import { isDev, useGetRect } from "utils/tool";
|
||||
import { SaveOutlined } from "@ant-design/icons";
|
||||
import { useHotkeys } from "react-hotkeys-hook";
|
||||
require("codemirror/mode/xml/xml");
|
||||
require("codemirror/mode/javascript/javascript");
|
||||
|
||||
const serverUrl = isDev ? "http://localhost:3000" : "http://localhost:3000";
|
||||
|
||||
let html = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#root {
|
||||
padding-top: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
padding: 0 10px;
|
||||
color: #06c;
|
||||
line-height: 1.8;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<img src="http://io.nainor.com/uploads/logo_1747374040f.png" />
|
||||
<p>
|
||||
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，
|
||||
致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
export default function() {
|
||||
const [isUpdate, setUpdate] = useState(false);
|
||||
const [cursor, setCursor] = useState<CodeMirror.Position>({ line: 1, ch: 1 });
|
||||
const [data, setData] = useState<{ data: string }>({ data: html });
|
||||
const handleChange = (
|
||||
_editor: CodeMirror.Editor,
|
||||
_data: CodeMirror.EditorChange,
|
||||
value: string
|
||||
) => {
|
||||
setData({ data: value });
|
||||
};
|
||||
const fetchPage = useMemo(() => {
|
||||
return (v?: string) => {
|
||||
let res = v ?? data.data;
|
||||
fetch(`${serverUrl}/dooring/render`, { method: "POST", body: res }).then(
|
||||
() => {
|
||||
html = res;
|
||||
message.success("已保存");
|
||||
setUpdate(prev => !prev);
|
||||
}
|
||||
);
|
||||
};
|
||||
}, [data]);
|
||||
const downLoadHtml = () => {
|
||||
var file = new File([data.data], `${Date.now()}.html`, {
|
||||
type: "text/html;charset=utf-8"
|
||||
});
|
||||
saveAs(file);
|
||||
};
|
||||
|
||||
const onCursorChange = (
|
||||
_editor: CodeMirror.Editor,
|
||||
data1: CodeMirror.Position
|
||||
) => {
|
||||
const { line, ch } = data1;
|
||||
setCursor({ line, ch });
|
||||
};
|
||||
|
||||
useHotkeys<HTMLDivElement>(
|
||||
"ctrl+s",
|
||||
event => {
|
||||
fetchPage();
|
||||
event.preventDefault();
|
||||
},
|
||||
[data]
|
||||
);
|
||||
|
||||
const editHotKey = useMemo(() => {
|
||||
return (editor: CodeMirror.Editor, event: KeyboardEvent) => {
|
||||
if (event.ctrlKey && event.key === "s") {
|
||||
fetchPage(editor.getValue());
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
}, [fetchPage]);
|
||||
|
||||
const CodeMirrorRender = useMemo(() => {
|
||||
return (
|
||||
<Controlled
|
||||
className={styles.codeWrap}
|
||||
value={data.data}
|
||||
options={{
|
||||
mode: "xml",
|
||||
theme: "material",
|
||||
lineNumbers: true
|
||||
}}
|
||||
onBeforeChange={handleChange}
|
||||
cursor={cursor}
|
||||
onCursor={onCursorChange}
|
||||
onKeyDown={editHotKey}
|
||||
/>
|
||||
);
|
||||
}, [cursor, data.data, editHotKey]);
|
||||
|
||||
const rect = useGetRect();
|
||||
const height = useMemo(() => {
|
||||
let res = rect.height - 42 - 1; //-1防止差值产生滚动条
|
||||
return res < 694 ? 694 : res;
|
||||
}, [rect.height]);
|
||||
|
||||
const phoneHeight = useMemo(() => {
|
||||
//let res = rect.height - 42 - 30 - 1; //30是其上边距
|
||||
//return res < 694 ? 694 : res;
|
||||
return 694; //大屏幕过长，维持高度，需要变高另外处理
|
||||
}, []);
|
||||
const iframeHeight = useMemo(() => {
|
||||
return phoneHeight - 30 - 12 - 12; //上边距30 上下padding 12
|
||||
}, [phoneHeight]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.logoArea}>
|
||||
<div className={styles.logo} title="Dooring">
|
||||
<a href="http://h5.dooring.cn">
|
||||
<img src={Logo} alt="Dooring-强大的h5编辑器" />
|
||||
</a>
|
||||
</div>
|
||||
<div className={styles.logoText}>| 在线代码编辑器</div>
|
||||
</div>
|
||||
<div className={styles.operationBar}>
|
||||
<Button
|
||||
type="primary"
|
||||
title="保存（ctrl+s）"
|
||||
onClick={() => fetchPage()}
|
||||
style={{ marginRight: "10px" }}
|
||||
>
|
||||
<SaveOutlined />
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={downLoadHtml}
|
||||
style={{ marginRight: "10px" }}
|
||||
>
|
||||
下载页面
|
||||
</Button>
|
||||
<Button danger onClick={downLoadHtml}>
|
||||
一键部署
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={styles.contentWrap}
|
||||
style={{ height: `${height}px`, position: "relative" }}
|
||||
>
|
||||
<div
|
||||
className={styles.codeWrap}
|
||||
style={{ height: `${height}px`, position: "relative" }}
|
||||
>
|
||||
{CodeMirrorRender}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={styles.previewWrap}
|
||||
style={{ height: `${phoneHeight}px` }}
|
||||
>
|
||||
<iframe
|
||||
title="preview"
|
||||
src={`${serverUrl}/html?flag=${isUpdate}`}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: `${iframeHeight}px`,
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
border: "none"
|
||||
}}
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user