cherry-muse 1.0.1

package/src/utils/codeBlockContentHandler.js

@@ -0,0 +1,351 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { getCodeBlockRule } from '@/utils/regexp';
+import codemirror from 'codemirror';
+import { copyToClip } from '@/utils/copy';
+import 'codemirror/keymap/sublime';
+
+export default class CodeBlockHandler {
+  /**
+   * 用来存放所有的数据
+   */
+  codeBlockEditor = {
+    info: {}, // 当前点击的预览区域code的相关信息
+    editorDom: {}, // 编辑器容器
+  };
+
+  constructor(trigger, target, container, previewerDom, codeMirror, parent) {
+    // 触发方式 click / hover
+    this.trigger = trigger;
+    this.target = target;
+    this.previewerDom = previewerDom;
+    this.container = container;
+    this.codeMirror = codeMirror;
+    this.$cherry = parent.previewer.$cherry;
+    this.parent = parent;
+    this.$initReg();
+  }
+
+  $initReg() {
+    this.codeBlockReg = this.codeBlockReg ? this.codeBlockReg : getCodeBlockRule().reg;
+  }
+
+  emit(type, event = {}, callback = () => {}) {
+    switch (type) {
+      case 'remove':
+        return this.$remove();
+      case 'scroll':
+        return this.$updateContainerPosition();
+      case 'previewUpdate':
+        this.$updateContainerPosition();
+        this.editing && this.$setInputOffset();
+        return;
+      case 'mouseup':
+        return this.$tryRemoveMe(event, callback);
+    }
+  }
+  $remove() {
+    this.codeBlockEditor = { info: {}, codeBlockCodes: [], editorDom: {} };
+  }
+  $tryRemoveMe(event, callback) {
+    const dom = this.codeBlockEditor.editorDom.inputDiv;
+    if (this.editing && dom && !dom.contains(event.target)) {
+      this.editing = false;
+      this.$remove();
+      callback();
+    }
+  }
+  /**
+   * 定位代码块源代码在左侧Editor的位置
+   */
+  $findCodeInEditor(selectLang = false) {
+    this.$collectCodeBlockDom();
+    this.$collectCodeBlockCode();
+    if (selectLang) {
+      this.$setLangSelection(this.codeBlockEditor.info.codeBlockIndex);
+    } else {
+      this.$setBlockSelection(this.codeBlockEditor.info.codeBlockIndex);
+    }
+  }
+  /**
+   * 找到预览区被点击编辑按钮的代码块，并记录这个代码块在预览区域所有代码块中的顺位
+   */
+  $collectCodeBlockDom() {
+    const list = Array.from(this.previewerDom.querySelectorAll('[data-type="codeBlock"]'));
+    this.codeBlockEditor.info = {
+      codeBlockNode: this.target,
+      codeBlockIndex: list.indexOf(this.target),
+    };
+  }
+  $collectCodeBlockCode() {
+    const codeBlockCodes = [];
+    this.codeMirror.getValue().replace(this.codeBlockReg, function (whole, ...args) {
+      const match = whole.replace(/^\n*/, '');
+      const offsetBegin = args[args.length - 2] + whole.match(/^\n*/)[0].length;
+      if (!match.startsWith('```mermaid')) {
+        codeBlockCodes.push({
+          code: match,
+          offset: offsetBegin,
+        });
+      }
+    });
+    this.codeBlockEditor.codeBlockCodes = codeBlockCodes;
+  }
+  $setBlockSelection(index) {
+    const codeBlockCode = this.codeBlockEditor.codeBlockCodes[index];
+    const whole = this.codeMirror.getValue();
+    const beginLine = whole.slice(0, codeBlockCode.offset).match(/\n/g)?.length ?? 0;
+    const endLine = beginLine + codeBlockCode.code.match(/\n/g).length;
+    const endCh = codeBlockCode.code.slice(0, -3).match(/[^\n]+\n*$/)[0].length;
+    // 从下往上选中内容，这样当代码块内容很多时，选中整个代码块不会触发滚动条滚动
+    this.codeBlockEditor.info.selection = [
+      { line: endLine - 1, ch: endCh },
+      { line: beginLine + 1, ch: 0 },
+    ];
+    this.codeMirror.setSelection(...this.codeBlockEditor.info.selection);
+  }
+  $setLangSelection(index) {
+    const codeBlockCode = this.codeBlockEditor.codeBlockCodes[index];
+    const whole = this.codeMirror.getValue();
+    const beginLine = whole.slice(0, codeBlockCode.offset).match(/\n/g)?.length ?? 0;
+    const firstLine = codeBlockCode.code.match(/```\s*[^\n]+/)[0] ?? '```';
+    const beginCh = 3;
+    const endLine = firstLine.length;
+    this.codeBlockEditor.info.selection = [
+      { line: beginLine, ch: beginCh },
+      { line: beginLine, ch: endLine },
+    ];
+    this.codeMirror.setSelection(...this.codeBlockEditor.info.selection);
+  }
+  showBubble(isEnableBubbleAndEditorShow = true) {
+    this.$updateContainerPosition();
+    if (this.trigger === 'hover') {
+      this.$showBtn(isEnableBubbleAndEditorShow);
+    }
+    if (this.trigger === 'click') {
+      this.$showContentEditor();
+    }
+    /**
+     * 把代码块操作相关元素上的鼠标滚动事件同步到预览区
+     */
+    this.container.addEventListener('wheel', (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      this.previewerDom.scrollTop += e.deltaY / 3; // 降低滚动的速度，懒得加动画了
+    });
+  }
+  /**
+   * 展示代码块编辑区的编辑器
+   */
+  $showContentEditor() {
+    this.editing = true;
+    this.$findCodeInEditor();
+    this.$drawEditor();
+  }
+  /**
+   * 展示代码块区域的按钮
+   */
+  $showBtn(isEnableBubbleAndEditorShow) {
+    const { editCode, copyCode, expandCode } = this.target.dataset;
+    this.container.innerHTML = '';
+    if (editCode === 'true' && isEnableBubbleAndEditorShow) {
+      // 添加编辑btn
+      const editDom = document.createElement('div');
+      editDom.className = 'cherry-edit-code-block';
+      editDom.innerHTML = '<span class="material-symbols-outlined">edit</span>';
+      this.container.appendChild(editDom);
+      editDom.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.$hideAllBtn();
+        this.$expandCodeBlock(true);
+        this.parent.$removeAllPreviewerBubbles('click');
+        this.parent.showCodeBlockPreviewerBubbles('click', this.target);
+      });
+      this.editDom = editDom;
+    }
+
+    if (copyCode === 'true') {
+      // 添加复制btn
+      const copyDom = document.createElement('div');
+      copyDom.className = 'cherry-copy-code-block';
+      copyDom.innerHTML = '<span class="material-symbols-outlined">content_copy</span>';
+      this.container.appendChild(copyDom);
+      copyDom.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.parent.$removeAllPreviewerBubbles('click');
+        this.$copyCodeBlock();
+      });
+      this.copyDom = copyDom;
+    }
+    if (expandCode === 'true') {
+      const isExpand = this.target.classList.contains('cherry-code-expand');
+      const maskDom = this.target.querySelector('.cherry-mask-code-block');
+      // 添加缩起btn
+      const unExpandDom = document.createElement('div');
+      unExpandDom.className = 'cherry-unExpand-code-block';
+      unExpandDom.innerHTML = '<span class=" expand-btn material-symbols-outlined">keyboard_arrow_up</span>';
+      if (!isExpand || !maskDom) {
+        unExpandDom.classList.add('hidden');
+      }
+      this.container.appendChild(unExpandDom);
+      unExpandDom.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.parent.$removeAllPreviewerBubbles('click');
+        this.$expandCodeBlock(false);
+      });
+      this.unExpandDom = unExpandDom;
+    }
+  }
+  // 隐藏所有按钮（切换语言、编辑、复制）
+  $hideAllBtn() {
+    if (this.editDom?.style?.display) {
+      this.editDom.style.display = 'none';
+    }
+    if (this.copyDom?.style?.display) {
+      this.copyDom.style.display = 'none';
+    }
+    if (this.unExpandDom?.style?.display) {
+      this.unExpandDom.style.display = 'none';
+    }
+  }
+
+  $drawEditor() {
+    const dom = document.createElement('div');
+    dom.className = 'cherry-previewer-codeBlock-content-handler__input';
+    const input = document.createElement('textarea');
+    input.id = 'codeMirrorEditor';
+    dom.appendChild(input);
+    const editorInstance = codemirror.fromTextArea(input, {
+      mode: '',
+      theme: 'default',
+      scrollbarStyle: 'null', // 取消滚动动画
+      lineNumbers: true, // 显示行号
+      autofocus: true, // 自动对焦
+      lineWrapping: true, // 自动换行
+      cursorHeight: 0.85, // 光标高度，0.85好看一些
+      indentUnit: 4, // 缩进单位为4
+      tabSize: 4, // 一个tab转换成的空格数量
+      keyMap: 'sublime',
+    });
+    const editor = this.codeMirror;
+    editorInstance.on('change', () => {
+      editor.replaceSelection(editorInstance.getValue(), 'around');
+    });
+    this.codeBlockEditor.editorDom.inputDiv = dom;
+    this.codeBlockEditor.editorDom.inputDom = editorInstance;
+    this.$updateEditorPosition();
+    this.container.appendChild(this.codeBlockEditor.editorDom.inputDiv);
+    this.codeBlockEditor.editorDom.inputDom.focus();
+    this.codeBlockEditor.editorDom.inputDom.refresh();
+    editorInstance.setValue(this.codeMirror.getSelection());
+    // 去掉下面的逻辑，因为在代码块比较高时，强制让光标定位在最后会让页面出现跳跃的情况
+    // editorInstance.setCursor(Number.MAX_VALUE, Number.MAX_VALUE); // 指针设置至CodeBlock末尾
+  }
+
+  /**
+   * 处理扩展、缩起代码块的操作
+   */
+  $expandCodeBlock(isExpand = true) {
+    if (!this.unExpandDom) {
+      return;
+    }
+    this.target.classList.remove('cherry-code-unExpand');
+    this.target.classList.remove('cherry-code-expand');
+    this.unExpandDom.classList.remove('hidden');
+    if (isExpand) {
+      this.target.classList.add('cherry-code-expand');
+    } else {
+      this.unExpandDom.classList.add('hidden');
+      this.target.classList.add('cherry-code-unExpand');
+    }
+  }
+  /**
+   * 处理复制代码块的操作
+   */
+  $copyCodeBlock() {
+    const codeContent = this.target.querySelector('pre').innerText;
+    const final = this.$cherry.options.callback.onCopyCode({ target: this.target }, codeContent);
+    if (final === false) {
+      return false;
+    }
+    const iconNode = this.copyDom.querySelector('span');
+    if (iconNode) {
+      iconNode.textContent = iconNode.textContent.replace('content_copy', 'done');
+      setTimeout(() => {
+        iconNode.textContent = iconNode.textContent.replace('done', 'content_copy');
+      }, 1000);
+    }
+    copyToClip(final);
+  }
+
+  /**
+   * 更新代码块复制、编辑等按钮的位置
+   */
+  $updateContainerPosition() {
+    this.codeBlockEditor.info.codeBlockNode = this.target;
+    const codeBlockInfo = this.$getPosition();
+    this.setStyle(this.container, 'width', `${codeBlockInfo.width}px`);
+    this.setStyle(this.container, 'top', `${codeBlockInfo.top}px`);
+    this.setStyle(this.container, 'left', `${codeBlockInfo.left}px`);
+  }
+
+  /**
+   * 更新编辑器的位置（尺寸和位置）
+   */
+  $updateEditorPosition() {
+    this.$setInputOffset();
+    const spanStyle = getComputedStyle(this.codeBlockEditor.info.codeBlockNode);
+    const editorWrapper = this.codeBlockEditor.editorDom.inputDom.getWrapperElement();
+    this.setStyle(editorWrapper, 'fontSize', spanStyle.fontSize || '16px');
+    this.setStyle(editorWrapper, 'fontFamily', spanStyle.fontFamily);
+    this.setStyle(editorWrapper, 'lineHeight', '1.8em');
+    this.setStyle(editorWrapper, 'zIndex', '1');
+  }
+
+  /**
+   * 设置codemirror偏移
+   */
+  $setInputOffset() {
+    const codeBlockInfo = this.$getPosition();
+    const { inputDiv } = this.codeBlockEditor.editorDom;
+    // 设置文本框的大小
+    this.setStyle(inputDiv, 'width', `${codeBlockInfo.width}px`);
+    this.setStyle(inputDiv, 'height', `${codeBlockInfo.height + 10}px`);
+  }
+
+  setStyle(element, property, value) {
+    const info = element.getBoundingClientRect();
+    if (info[property] !== value) {
+      element.style[property] = value;
+    }
+  }
+
+  $getPosition() {
+    const node = this.codeBlockEditor.info.codeBlockNode;
+    const position = node.getBoundingClientRect();
+    const editorPosition = this.previewerDom.parentNode.getBoundingClientRect();
+    return {
+      top: position.top - editorPosition.top,
+      height: position.height,
+      width: position.width,
+      left: position.left - editorPosition.left,
+      maxHeight: editorPosition.height,
+    };
+  }
+}

package/src/utils/config.js

@@ -0,0 +1,98 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * 用于lodash.mergeWith的customizer
+ * @param {any} objValue
+ * @param {any} srcValue
+ * @returns
+ */
+export function customizer(objValue, srcValue) {
+  if (Array.isArray(srcValue)) {
+    return srcValue;
+  }
+}
+
+/**
+ * 检查本地有没有值
+ * @param {string} key
+ */
+export function testKeyInLocal(key) {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(`cherry-${key}`) !== null;
+  }
+  return false;
+}
+
+/**
+ * 保存是否经典换行
+ * @param {boolean} isClassicBr
+ */
+export function saveIsClassicBrToLocal(isClassicBr) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('cherry-classicBr', isClassicBr ? 'true' : 'false');
+  }
+}
+
+/**
+ * 是否经典换行
+ */
+export function getIsClassicBrFromLocal() {
+  let ret = 'false';
+  if (typeof localStorage !== 'undefined') {
+    ret = localStorage.getItem('cherry-classicBr');
+  }
+  return ret === 'true';
+}
+
+/**
+ * 保存当前主题
+ * @param {string} theme
+ */
+function saveThemeToLocal(theme) {
+  if (typeof localStorage !== 'undefined') {
+    localStorage.setItem('cherry-theme', theme);
+  }
+}
+
+/**
+ * 获取当前主题
+ * @returns {string} 主题名
+ */
+export function getThemeFromLocal(fullClass = false) {
+  let ret = 'default';
+  if (typeof localStorage !== 'undefined') {
+    const localTheme = localStorage.getItem('cherry-theme');
+    if (localTheme) {
+      ret = localTheme;
+    }
+  }
+  return fullClass ? `theme__${ret}` : ret;
+}
+
+/**
+ * 修改主题
+ * @param {object} $cherry
+ * @param {string} theme 如果没有传theme，则从本地缓存里取
+ */
+export function changeTheme($cherry, theme = '') {
+  const newTheme = (theme ? theme : getThemeFromLocal()).replace(/^.*theme__/, ' ');
+  const newClass = ` theme__${newTheme}`;
+  $cherry.wrapperDom.className = $cherry.wrapperDom.className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
+  $cherry.previewer.getDomContainer().className =
+    $cherry.previewer.getDomContainer().className.replace(/ theme__[^ $]+?( |$)/g, ' ') + newClass;
+  saveThemeToLocal(newTheme);
+}

package/src/utils/copy.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * 复制内容到剪贴板
+ * @returns null
+ */
+export function copyToClip(str) {
+  function listener(e) {
+    e.clipboardData.setData('text/html', str);
+    e.clipboardData.setData('text/plain', str);
+    e.preventDefault();
+  }
+  document.addEventListener('copy', listener);
+  document.execCommand('copy');
+  document.removeEventListener('copy', listener);
+}
+
+/**
+ * 复制文本内容到剪贴板
+ * @param {string} str 复制文本
+ */
+export function copyByInput(str) {
+  const input = document.createElement('input');
+  input.value = str;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand('copy');
+  document.body.removeChild(input);
+}
+
+/**
+ * 复制文本
+ * @param {string} str 复制文本
+ * @returns
+ */
+export async function copyTextByClipboard(str) {
+  if (!navigator.clipboard) {
+    copyByInput(str);
+    return;
+  }
+  return await navigator.clipboard.writeText(str);
+}

package/src/utils/dialog.js

@@ -0,0 +1,196 @@
+/**
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createElement } from './dom';
+
+const clamp = (num, min, max) => {
+  return Math.min(Math.max(num, min), max);
+};
+
+/**
+ * 对话框基操集合
+ */
+const dialog = {
+  open() {
+    this.resetStyle();
+    this.dom.style.display = 'block';
+    this.postMessage('ready?');
+  },
+
+  close() {
+    this.dom.style.display = 'none';
+  },
+
+  postMessage(messageName, value = '') {
+    this.iframeDom?.contentWindow?.postMessage({ eventName: messageName, value }, '*');
+  },
+
+  resetStyle() {
+    const { dom } = this;
+    dom.style.left = '10%';
+    dom.style.top = '10%';
+  },
+
+  bindEvents() {
+    this.bindClickEvents();
+    this.bindDNDEvents();
+  },
+
+  bindClickEvents() {
+    this.headCloseButton.addEventListener('click', () => {
+      this.close();
+    });
+
+    this.footSureButton.addEventListener('click', () => {
+      this.postMessage('getData');
+    });
+  },
+
+  bindDNDEvents() {
+    const { dom, head, body } = this;
+
+    let offsetX;
+    let offsetY;
+
+    const handleMouseMove = function (e) {
+      e.preventDefault();
+      const left = clamp(e.clientX - offsetX, 0, window.innerWidth - 16);
+      const top = clamp(e.clientY - offsetY, 0, window.innerHeight - 16);
+      dom.style.left = `${left}px`;
+      dom.style.top = `${top}px`;
+    };
+
+    const handleMouseUp = function (e) {
+      head.style.cursor = 'grab';
+      body.style.pointerEvents = null;
+
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mousemove', handleMouseUp);
+    };
+
+    head.addEventListener('mousedown', function (e) {
+      if (e.target.classList.contains('cherry-dialog--close')) {
+        return;
+      }
+      offsetX = e.clientX - dom.offsetLeft;
+      offsetY = e.clientY - dom.offsetTop;
+      head.style.cursor = 'grabbing';
+      body.style.pointerEvents = 'none';
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    });
+  },
+
+  draw(params, onReady, onSubmit) {
+    const { iframeSrc, title } = params;
+    this.onSubmit = onSubmit;
+    this.onReady = onReady;
+
+    if (this.dom) {
+      const test = new RegExp(`${iframeSrc}$`, 'i');
+      if (!test.test(this.iframeDom.src)) {
+        this.iframeDom.src = iframeSrc;
+      }
+      this.open();
+      return;
+    }
+    // 添加通信事件
+    window.addEventListener('message', (event) => {
+      // @ts-ignore
+      if (!event.data || !event.data.eventName) {
+        return;
+      }
+      // @ts-ignore
+      switch (event.data.eventName) {
+        case 'getData:success':
+          // @ts-ignore
+          this.onSubmit(event.data.value);
+          this.close();
+        case 'ready':
+          this.onReady();
+      }
+    });
+    // 构造页面元素
+    this.iframeDom = createElement('iframe', 'cherry-dialog-iframe', { src: iframeSrc, style: 'border: none;' });
+    this.dom = createElement('div', 'cherry-dialog', {
+      style: [
+        'z-index:9999',
+        'display: block',
+        'position: absolute',
+        'top: 10%;left: 10%;width: 80%;height: 80%;',
+        'background-color: #FFF',
+        'box-shadow: 0px 50px 100px -12px rgba(0,0,0,.05),0px 30px 60px -30px rgba(0,0,0,.1)',
+        'border-radius: 6px',
+        'border: 1px solid #ddd;',
+      ].join(';'),
+    });
+    this.head = createElement('div', 'cherry-dialog--head', {
+      style: ['height: 30px', 'line-height: 30px', 'padding-left: 10px', 'padding-right: 10px', 'cursor: grab;'].join(
+        ';',
+      ),
+    });
+    this.body = createElement('div', 'cherry-dialog--body', {
+      style: ['position: absolute', 'bottom: 30px', 'top: 30px', 'left: 0', 'right: 0', 'overflow: hidden'].join(';'),
+    });
+    this.foot = createElement('div', 'cherry-dialog--foot', {
+      style: [
+        'height: 30px',
+        'line-height: 30px',
+        'padding-left: 10px',
+        'padding-right: 10px',
+        'position: absolute',
+        'bottom: 0',
+        'left: 0',
+        'right: 0',
+      ].join(';'),
+    });
+    this.headTitle = createElement('span', 'cherry-dialog--title', { style: 'user-select:none;' });
+    this.headCloseButton = createElement('i', 'cherry-dialog--close ch-icon ch-icon-close', {
+      style: 'float: right;font-size: 12px;cursor: pointer;',
+    });
+    this.footSureButton = createElement('button', 'cherry-dialog--sure', {
+      style: [
+        'float: right',
+        'cursor: pointer',
+        'margin: 3px',
+        'background-color: #4d90fe',
+        'color: #FFF',
+        'border: 1px solid #4d90fe',
+        'border-radius: 2px',
+        'padding: 2px 15px',
+        'user-select:none',
+      ].join(';'),
+    });
+
+    this.headCloseButton.title = '关闭';
+    this.footSureButton.textContent = '确定';
+
+    this.headTitle.textContent = title;
+    this.head.appendChild(this.headTitle);
+    this.head.appendChild(this.headCloseButton);
+    this.foot.appendChild(this.footSureButton);
+
+    this.body.appendChild(this.iframeDom);
+    this.dom.appendChild(this.head);
+    this.dom.appendChild(this.body);
+    this.dom.appendChild(this.foot);
+
+    this.bindEvents();
+
+    document.body.appendChild(this.dom);
+  },
+};