HeGanjie/document.ejs

## document.ejs
<!doctype html>
<html style="font-size: 100px">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Expires" content="-1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <% if (context.title != null) { %>
        <title><%= context.title %></title>
    <% } %>
    <% if (context.isProd) { %>
        <script type="text/javascript">
          if(!(window.console && console.log)) {
            console = {
              log: function(){},
              debug: function(){},
              info: function(){},
              warn: function(){},
              error: function(){}
            };
          }
          if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) {
            document.write('<script src="/sycm/_bc/babel-polyfill/dist/polyfill.min.js"><\/script>\n<script src="/sycm/_bc/whatwg-fetch/dist/fetch.umd.js"><\/script>');
          }
          try {
            window.ENV = 'production';
            window.version = <%- JSON.stringify(context.version) || '""' %>;
            console.log('sycm version: ', window.version)
          } catch (e) {
            console.warn(e)
          }

        </script>
    <% } else { %>
        <script>
          window.ENV = 'development'
        </script>
    <%}%>
    <script type='text/javascript'>
      'use strict';
      window.CURR_SCALE = 1;

      (function () {
        var html = document.documentElement;
        function onWindowResize() {
          html.style.fontSize = html.getBoundingClientRect().width / 19.20 + 'px';
        }
        // window.addEventListener('resize', onWindowResize);
        onWindowResize();
      })();

      // 强制清除缓存
      document.addEventListener('DOMContentLoaded', function () {
        if (!window.version) {
          return
        }
        function includes(str, keyword) {
          return (str || '').indexOf(keyword) !== -1;
        }
        function withExtraQueryStr(url, extraQueryStr) {
          return !extraQueryStr ? url : '' + url + (includes(url, '?') ? '&' : '?') + extraQueryStr;
        }

        try {
          fetch('/api/get-public-config?cCache=30')
            .then(function (res) { return res.json() })
            .then(function (res) {
              var version = res && res.version || Date.now();
              var currUrl = window.location.href;

              if (version && version !== window.version) {
                var nextUrl = includes(currUrl, 'ver=')
                  ? currUrl.replace(/ver=[\w.-]+/, 'ver=' + version)
                  : withExtraQueryStr(currUrl, 'ver=' + version);
                window.location.href = nextUrl;
              }
            })
            .catch(function (err) { return console.warn(err) });
        } catch (e) {
          console.warn(e);
        }
      }, false);
    </script>
</head>
<body>

<div id="<%= context.config.mountElementId %>"></div>

</body>
</html>

## layouts.js
import React, {useEffect, useState} from "react";
import _ from 'lodash'

export default function Layouts(props) {
  const [viewPortBounds, setViewPortBounds] = useState();
  useEffect(() => {
    let html = document.documentElement;
    function onWindowResize() {
      let { width: sWidth, height: sHeight } = html.getBoundingClientRect();

      // 1rem = 100px for 1920 screen
      // 调整 rem 单位方法： https://unix.stackexchange.com/a/430111/240824
      const remUnit = sWidth / 19.2;

      let idealAspectRatio = 16 / 9;
      let screenAspectRatio = sWidth / sHeight;
      let widthEnough = idealAspectRatio <= screenAspectRatio;
      // ideal: w/h = 16/9
      // 需求：内容占满屏幕，不能显示滚动条，通过 rem 缩放而不能用 scale；
      // 做法：屏幕宽度低于 1366px 时等比缩小保证内容可以一屏展示，但是宽度需要放大超过 19.2rem 从而保持占满屏幕宽度
      // rem = sWidth / 19.2
      // boxWidth = sWidth
      // boxHeight = sWidth / idealAspectRatio

      // 矮屏，根据高度缩放，scale * boxHeight = sHeight
      // 窄屏，根据宽度缩放, scale * boxWidth = sWidth

      let scale = widthEnough // 矮屏
        ? sHeight / (sWidth / idealAspectRatio)
        : 1

      window.CURR_SCALE = Math.min(1, scale)

      html.style.fontSize = remUnit * window.CURR_SCALE + 'px';
      const nextState = {
        width: sWidth,
        height: sHeight,
        scale: window.CURR_SCALE
      };
      if (!_.isEqual(viewPortBounds, nextState)) {
        setViewPortBounds(nextState);
      }
    }
    onWindowResize()
    window.addEventListener("resize", onWindowResize);
    return () => {
      window.removeEventListener("resize", onWindowResize);
    };
  });

  // 用户要求不需要保持 16：9 比例，需要占满屏幕
  let scale = viewPortBounds?.scale ?? 1
  let boxWidthRem = 19.2 / scale
  return (
    <div
      className="business-consultant-entry relative"
      style={{
        width: `${boxWidthRem}rem`,
        height: `10.8rem`,
        background: "#F0F2F9"
      }}
    >
      {props.children}
    </div>
  );
}
	<!doctype html>
	<html style="font-size: 100px">
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Expires" content="-1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<% if (context.title != null) { %>
	<title><%= context.title %></title>
	<% } %>
	<% if (context.isProd) { %>
	<script type="text/javascript">
	if(!(window.console && console.log)) {
	console = {
	log: function(){},
	debug: function(){},
	info: function(){},
	warn: function(){},
	error: function(){}
	};
	}
	if (/MSIE \d\|Trident.*rv:/.test(navigator.userAgent)) {
	document.write('<script src="/sycm/_bc/babel-polyfill/dist/polyfill.min.js"><\/script>\n<script src="/sycm/_bc/whatwg-fetch/dist/fetch.umd.js"><\/script>');
	}
	try {
	window.ENV = 'production';
	window.version = <%- JSON.stringify(context.version) \|\| '""' %>;
	console.log('sycm version: ', window.version)
	} catch (e) {
	console.warn(e)
	}

	</script>
	<% } else { %>
	<script>
	window.ENV = 'development'
	</script>
	<%}%>
	<script type='text/javascript'>
	'use strict';
	window.CURR_SCALE = 1;

	(function () {
	var html = document.documentElement;
	function onWindowResize() {
	html.style.fontSize = html.getBoundingClientRect().width / 19.20 + 'px';
	}
	// window.addEventListener('resize', onWindowResize);
	onWindowResize();
	})();

	// 强制清除缓存
	document.addEventListener('DOMContentLoaded', function () {
	if (!window.version) {
	return
	}
	function includes(str, keyword) {
	return (str \|\| '').indexOf(keyword) !== -1;
	}
	function withExtraQueryStr(url, extraQueryStr) {
	return !extraQueryStr ? url : '' + url + (includes(url, '?') ? '&' : '?') + extraQueryStr;
	}

	try {
	fetch('/api/get-public-config?cCache=30')
	.then(function (res) { return res.json() })
	.then(function (res) {
	var version = res && res.version \|\| Date.now();
	var currUrl = window.location.href;

	if (version && version !== window.version) {
	var nextUrl = includes(currUrl, 'ver=')
	? currUrl.replace(/ver=[\w.-]+/, 'ver=' + version)
	: withExtraQueryStr(currUrl, 'ver=' + version);
	window.location.href = nextUrl;
	}
	})
	.catch(function (err) { return console.warn(err) });
	} catch (e) {
	console.warn(e);
	}
	}, false);
	</script>
	</head>
	<body>

	<div id="<%= context.config.mountElementId %>"></div>

	</body>
	</html>
	import React, {useEffect, useState} from "react";
	import _ from 'lodash'

	export default function Layouts(props) {
	const [viewPortBounds, setViewPortBounds] = useState();
	useEffect(() => {
	let html = document.documentElement;
	function onWindowResize() {
	let { width: sWidth, height: sHeight } = html.getBoundingClientRect();

	// 1rem = 100px for 1920 screen
	// 调整 rem 单位方法： https://unix.stackexchange.com/a/430111/240824
	const remUnit = sWidth / 19.2;

	let idealAspectRatio = 16 / 9;
	let screenAspectRatio = sWidth / sHeight;
	let widthEnough = idealAspectRatio <= screenAspectRatio;
	// ideal: w/h = 16/9
	// 需求：内容占满屏幕，不能显示滚动条，通过 rem 缩放而不能用 scale；
	// 做法：屏幕宽度低于 1366px 时等比缩小保证内容可以一屏展示，但是宽度需要放大超过 19.2rem 从而保持占满屏幕宽度
	// rem = sWidth / 19.2
	// boxWidth = sWidth
	// boxHeight = sWidth / idealAspectRatio

	// 矮屏，根据高度缩放，scale * boxHeight = sHeight
	// 窄屏，根据宽度缩放, scale * boxWidth = sWidth

	let scale = widthEnough // 矮屏
	? sHeight / (sWidth / idealAspectRatio)
	: 1

	window.CURR_SCALE = Math.min(1, scale)

	html.style.fontSize = remUnit * window.CURR_SCALE + 'px';
	const nextState = {
	width: sWidth,
	height: sHeight,
	scale: window.CURR_SCALE
	};
	if (!_.isEqual(viewPortBounds, nextState)) {
	setViewPortBounds(nextState);
	}
	}
	onWindowResize()
	window.addEventListener("resize", onWindowResize);
	return () => {
	window.removeEventListener("resize", onWindowResize);
	};
	});

	// 用户要求不需要保持 16：9 比例，需要占满屏幕
	let scale = viewPortBounds?.scale ?? 1
	let boxWidthRem = 19.2 / scale
	return (
	<div
	className="business-consultant-entry relative"
	style={{
	width: `${boxWidthRem}rem`,
	height: `10.8rem`,
	background: "#F0F2F9"
	}}
	>
	{props.children}
	</div>
	);
	}