diff --git a/src/pages/user/index.less b/src/pages/user/index.less new file mode 100644 index 0000000..9a48e1a --- /dev/null +++ b/src/pages/user/index.less @@ -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; +} diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx new file mode 100644 index 0000000..10b315d --- /dev/null +++ b/src/pages/user/index.tsx @@ -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 = ` + + + + + Document + + + +
+ +

+ (H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案， + 致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。 +

+
+ + +`; + +export default function() { + const [isUpdate, setUpdate] = useState(false); + const [cursor, setCursor] = useState({ 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( + "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 ( + + ); + }, [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 ( +
+
+
+
+ + Dooring-强大的h5编辑器 + +
+
| 在线代码编辑器
+
+
+ + + +
+
+
+
+ {CodeMirrorRender} +
+ +
+ +
+
+
+ ); +}