feat: 添加全屏功能 (#108)

* feat: 添加全屏功能

* feat: add fullscrenn

web/build/webpack.dev.conf.js

@@ -1,10 +1,17 @@
-const base = require("./webpack.base.conf");
+const base = require('./webpack.base.conf')
 
 module.exports = Object.assign({}, base, {
   devServer: {
     port: 8877,
     historyApiFallback: true,
-    host: "127.0.0.1",
+    host: '127.0.0.1',
+    proxy: {
+      '*': {
+        target: 'http://14.116.241.63:8080/',
+        source: false,
+        changeOrigin: true,
+      },
+    },
   },
-  mode: "development",
-});
+  mode: 'development',
+})

web/src/polaris/common/components/MocacoEditor.tsx

@@ -11,25 +11,25 @@ import insertCSS from '../helpers/insertCSS'
 insertCSS(
   'monaco-section',
   `
-.monaco-section-full-screen {
-  position: fixed !important;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9998;
-}
-.monaco-section .app-tsf-alert__info{
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.monaco-full-screen-icon {
-  position: absolute;
-  right: 16px;
-  top: 16px;
-  z-index: 9999 
-}
+  .monaco-section-full-screen {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9998;
+  }
+  .monaco-section .app-tsf-alert__info{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .monaco-full-screen-icon {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    z-index: 1 
+  }
 `,
 )
 

web/src/polaris/configuration/fileGroup/detail/file/FileDiff.tsx

@@ -1,22 +1,121 @@
-import React from 'react'
-import { MonacoEditor, Row, Col } from 'tea-component'
+import React, { useEffect } from 'react'
+import { MonacoEditor, Row, Col, Icon } from 'tea-component'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import insertCSS from '@src/polaris/common/helpers/insertCSS'
+
+import { debounce } from '../../../utils'
 
 const { DiffEditor } = MonacoEditor
 interface Props {
   original: string
   now: string
   format: string
 }
+
+insertCSS(
+  'monaco-section-file-diff',
+  `
+  .monaco-file-diff-full-screen-icon {
+    position: absolute;
+    right: -2px;
+    top: 8px;
+    z-index: 9999;
+  }
+`,
+)
+
 export default function FileDiff(props: Props) {
   const { original, now, format } = props
+  const editorRef = React.useRef<{ editor: any }>(null)
+  const [isFullScreen, setFullScreen] = React.useState(false)
+  const [hasRecordSize, setHasRecordSize] = React.useState(false)
+
+  const [editorRect, setEditorRect] = React.useState({ width: 0, height: 400 })
+  const [dialogRect, setDialogRect] = React.useState({ width: '', height: '', maxHeight: '' })
+
+  function handleFullScreen() {
+    setFullScreen(!isFullScreen)
+    if (!editorRef.current) {
+      return
+    }
+    const dialogs = document.getElementsByClassName('tea-dialog__inner')
+    const dialog = dialogs[0] as HTMLDivElement
+    const dialogHeader = document.getElementsByClassName('tea-dialog__header')
+    const dialogFooter = document.getElementsByClassName('tea-dialog__footer')
+
+    if (!hasRecordSize) {
+      const editorOriginRect: DOMRect = editorRef.current.editor._domElement.getBoundingClientRect()
+      const dialogStyles = getComputedStyle(dialog, null)
+      setEditorRect({ width: editorOriginRect.width, height: editorOriginRect.height })
+      setDialogRect({
+        width: dialogStyles.width,
+        height: dialogStyles.height,
+        maxHeight: dialogStyles.maxHeight,
+      })
+      setHasRecordSize(true)
+    }
+    if (isFullScreen) {
+      editorRef.current.editor.layout({
+        height: editorRect.height,
+        width: editorRect.width,
+      })
+    } else {
+      editorRef.current.editor.layout({
+        height: document.body.clientHeight - 120,
+        width: document.body.clientWidth,
+      })
+    }
+
+    dialog.style.width = isFullScreen ? dialogRect.width : '100%'
+    dialog.style.height = isFullScreen ? dialogRect.height : '100%'
+    dialog.style.maxHeight = isFullScreen ? dialogRect.maxHeight : '100%'
+
+    const header = dialogHeader[0] as HTMLElement
+    header.style.display = isFullScreen ? 'block' : 'none'
+    const footer = dialogFooter[0] as HTMLElement
+    footer.style.display = isFullScreen ? 'block' : 'none'
+  }
+
+  const onResize = () => {
+    if (isFullScreen) {
+      editorRef.current.editor.layout({
+        height: document.body.clientHeight - 120,
+        width: document.body.clientWidth,
+      })
+    }
+  }
+  const onResizeHandler = debounce(onResize.bind(this), 300)
+
+  useEffect(() => {
+    window.addEventListener('resize', onResizeHandler)
+    return () => {
+      window.removeEventListener('resize', onResizeHandler)
+    }
+  }, [isFullScreen])
+
   return (
-    <section>
+    <section className='monaco-section-file-diff'>
       <Row style={{ margin: '10px 0px' }}>
         <Col>历史发布</Col>
         <Col>当前发布</Col>
+
+        <Col style={{ position: 'relative' }}>
+          <Icon
+            className='monaco-file-diff-full-screen-icon'
+            type={isFullScreen ? 'fullscreenquit' : 'fullscreen'}
+            size='l'
+            onClick={handleFullScreen}
+          />
+        </Col>
       </Row>
-      <DiffEditor monaco={monaco} height={400} language={format} original={original} value={now} />
+      <DiffEditor
+        ref={editorRef}
+        monaco={monaco}
+        height={editorRect.height}
+        language={format}
+        original={original}
+        value={now}
+      />
     </section>
   )
 }

web/src/polaris/configuration/utils.tsx

@@ -20,3 +20,23 @@ export const replaceTags = (tagKey, changeValue, tags, optionList, tagAttribute)
     return [...tags, tag]
   }
 }
+
+/**
+ * 通用函数节流
+ *
+ * @param { Function } func
+ * @param { Number } delay
+ * @return { Function }
+ */
+export const debounce = (func, delay) => {
+  let timer
+  return function(this: any, ...args) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(() => {
+      func.apply(this, args)
+      timer = null
+    }, delay)
+  }
+}