@baic/yolk-cli 2.1.0-alpha.9 → 2.1.0-github.0

package/templates/umi-web-screen/README.md.tpl

@@ -0,0 +1,34 @@
+# web
+
+## Getting Started
+
+Install dependencies,
+
+{{ #dependenciesInstallType }}
+
+```bash
+$ {{ dependenciesInstallType }} install
+```
+
+{{ /dependenciesInstallType }}
+{{ ^dependenciesInstallType }}
+
+```bash
+$ pnpm install
+```
+
+{{ /dependenciesInstallType }}
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build,
+
+```bash
+$ npm run build
+```
+
+[查阅文档](https://303394539.github.io/yolk-docs/)

package/templates/umi-web-screen/package.json.tpl

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "name": "{{ projectName }}",
+  "scripts": {
+    "start": "yolk start",
+    "build": "yolk build"
+  },
+  "dependencies": {
+    "@ant-design/charts": "1.x",
+    "@baic/preset-yolk-umi-web": "~{{ yolkVersion }}"
+  },
+  "pnpm": {
+    "peerDependencyRules": {
+      "ignoreMissing": "*"
+    }
+  }
+}

package/templates/umi-web-screen/src/app.tsx

@@ -0,0 +1,19 @@
+import { Provider } from '@baic/yolk-web';
+
+import request from '@/common/request';
+
+import '@baic/yolk-web/es/style/index.less';
+
+export function rootContainer(container: React.ReactNode) {
+  return (
+    <Provider
+      request={request}
+      iconfontScriptUrl={[
+        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js',
+        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js',
+      ]}
+    >
+      {container}
+    </Provider>
+  );
+}

package/templates/umi-web-screen/src/common/request.ts

@@ -0,0 +1,3 @@
+import { Request } from '@baic/yolk-web';
+
+export default new Request();

package/templates/umi-web-screen/src/common/util.ts

@@ -0,0 +1,15 @@
+import { Util } from '@baic/yolk-web';
+
+const util = {
+  ...Util,
+  getViewportSize() {
+    const width = document.documentElement.clientWidth || window.innerWidth;
+    const height = document.documentElement.clientHeight || window.innerHeight;
+    return {
+      width,
+      height,
+    };
+  },
+};
+
+export default util;

package/templates/umi-web-screen/src/components/index.ts

@@ -0,0 +1 @@
+export { default as ResizeContainer } from './resize-container';

package/templates/umi-web-screen/src/components/resize-container/index.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+
+import classnames from 'classnames';
+
+import _ from 'lodash';
+
+import { useSize } from 'ahooks';
+
+import style from './style.less';
+
+export interface ContainerInstance {
+  zoom: number;
+  width: number;
+  height: number;
+  container?: HTMLDivElement | null;
+}
+
+interface ResizeContainerProps {
+  children?: React.ReactNode | ((e: ContainerInstance) => React.ReactNode);
+  className?: string;
+  getContainer?: () => HTMLElement | React.RefObject<HTMLElement>;
+  onResize?: (e: ContainerInstance) => void;
+  containerParentElementZoom?: boolean | number;
+  containerZoom?: boolean | number;
+}
+
+const Component = React.forwardRef<ContainerInstance, ResizeContainerProps>(
+  (
+    {
+      children,
+      className,
+      getContainer,
+      onResize,
+      containerParentElementZoom = true,
+      containerZoom = true,
+    },
+    ref,
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const { width = 0, height = 0 } = useSize(
+      _.isFunction(getContainer)
+        ? getContainer()
+        : () => containerRef.current?.parentElement || null,
+    ) || { width: 0, height: 0 };
+    const instance = React.useMemo(() => {
+      let res = {
+        width,
+        height,
+        zoom: 1,
+        container: containerRef.current,
+      };
+      if (containerRef.current) {
+        const $zoom = _.isNumber(containerParentElementZoom)
+          ? containerParentElementZoom
+          : containerParentElementZoom
+          ? Number(document.body.getAttribute('data-zoom') || 1)
+          : 1;
+        const realWidth = width * $zoom;
+        const realHeight = height * $zoom;
+        res = {
+          ...res,
+          zoom: $zoom,
+          width: realWidth,
+          height: realHeight,
+        };
+        if (containerZoom) {
+          // @ts-ignore
+          containerRef.current.style.zoom = 1 / $zoom;
+        }
+      }
+      if (_.isFunction(onResize)) {
+        onResize(res);
+      }
+      return res;
+    }, [width, height, onResize, containerParentElementZoom, containerZoom]);
+    React.useImperativeHandle(ref, () => instance);
+    const childrenMemo = React.useMemo(() => {
+      const { width: containerWidth, height: containerHeight } = instance;
+      if (0 === containerWidth || 0 === containerHeight) {
+        return null;
+      }
+      return _.isFunction(children) ? children(instance) : children;
+    }, [children, instance]);
+    return (
+      <div
+        className={classnames(style.container, className)}
+        ref={containerRef}
+      >
+        {childrenMemo}
+      </div>
+    );
+  },
+);
+
+export default Component;

package/templates/umi-web-screen/src/components/resize-container/style.less

@@ -0,0 +1,3 @@
+.container {
+  display: inline-flex;
+}

package/templates/umi-web-screen/src/constants.ts

@@ -0,0 +1,7 @@
+export const RootFontSize = 14;
+
+export const RootWinWidth = 1920;
+
+export const RootWinHeight = 1080;
+
+export const BGColor = '#020217';

package/templates/umi-web-screen/src/global.less

@@ -0,0 +1,28 @@
+body {
+  font-size: @RootFontSize;
+  white-space: nowrap;
+  background-color: @bgColor;
+  transform-origin: left top;
+  user-select: none;
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+#yolk-app {
+  position: relative;
+  width: max-content;
+  height: max-content;
+}
+
+// 布局容器
+div[class^='layout'] {
+  height: 100%;
+}

package/templates/umi-web-screen/src/hooks/use-size.ts

@@ -0,0 +1,18 @@
+import { useSize as useAHooksSize } from 'ahooks';
+
+import Util from '@/common/util';
+
+export type Size = '16/9';
+
+const { width: winWidth, height: winHeight } = Util.getViewportSize();
+
+const useSize = (): [Size, number, number] => {
+  const { width, height } = useAHooksSize(document.documentElement) || {
+    width: winWidth,
+    height: winHeight,
+  };
+
+  return ['16/9', width, height];
+};
+
+export default useSize;

package/templates/umi-web-screen/src/layouts/16_9/fixed.less

@@ -0,0 +1,16 @@
+.body-16-9 {
+  .loading {
+    width: @RootWinWidth;
+    height: @RootWinHeight;
+  }
+
+  .ant-modal-mask,
+  .ant-modal-wrap {
+    width: @RootWinWidth;
+    height: @RootWinHeight;
+  }
+
+  .ant-message {
+    width: @RootWinWidth;
+  }
+}

package/templates/umi-web-screen/src/layouts/16_9/index.tsx

@@ -0,0 +1,30 @@
+import { Outlet } from 'umi';
+
+import { useSize as aHooksUseSize } from 'ahooks';
+
+import { RootWinHeight } from '@/constants';
+
+import './fixed.less';
+
+import style from './style.less';
+
+const Layout = () => {
+  const { height } = aHooksUseSize(
+    () => document.getElementsByClassName(style.header)[0],
+  ) || { height: 0 };
+  return (
+    <div className={style.gLayout}>
+      <div className={style.header} />
+      <div
+        className={style.flex}
+        style={{
+          maxHeight: RootWinHeight - height,
+        }}
+      >
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

package/templates/umi-web-screen/src/layouts/16_9/style.less

@@ -0,0 +1,17 @@
+.g-layout {
+  display: flex;
+  flex-direction: column;
+  width: @RootWinWidth;
+  height: @RootWinHeight;
+  background-position: center;
+  background-size: cover;
+
+  .header {
+    width: 100%;
+  }
+
+  .flex {
+    position: relative;
+    flex: 1;
+  }
+}

package/templates/umi-web-screen/src/layouts/controller/index.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+
+import { createContext, useEffect, useRef, useState } from 'react';
+
+import useSize from '@/hooks/use-size';
+
+import { RootWinWidth } from '@/constants';
+
+export interface Value {
+  layout: {
+    16_9: {
+      type: 1;
+    };
+  };
+}
+
+export const context = createContext<Value>({
+  layout: {
+    16_9: {
+      type: 1,
+    },
+  },
+});
+
+interface Props {
+  children?: ReactNode;
+}
+
+const { Provider } = context;
+
+const Component = ({ children }: Props) => {
+  // layout
+  const [layout] = useState<Value['layout']>({
+    16_9: {
+      type: 1,
+    },
+  });
+
+  /**
+   * 容器尺寸变化刷新重绘
+   */
+  const [size, winWidth, winHeight] = useSize();
+  const [visible, setVisible] = useState<boolean>(true);
+  const timeoutIDRef = useRef<NodeJS.Timeout>();
+  useEffect(() => {
+    const rect = `${winWidth}x${winHeight}`;
+    const reloadRect = window.sessionStorage.getItem('reload.rect') || rect;
+    window.sessionStorage.setItem('reload.rect', rect);
+    setVisible(false);
+    if (reloadRect !== rect) {
+      if (timeoutIDRef.current) {
+        clearTimeout(timeoutIDRef.current);
+      }
+      timeoutIDRef.current = setTimeout(() => window.location.reload(), 1000);
+    } else {
+      let zoom = 1;
+      let className = 'body-16-9';
+      if ('16/9' === size) {
+        zoom = winWidth / RootWinWidth;
+      } else if ('32/9' === size) {
+        zoom = winWidth / (RootWinWidth * 2);
+        className = 'body-32-9';
+      }
+      document.body.className = className;
+      document.body.style.transform = `scale3d(${zoom}, ${zoom}, 1)`;
+      document.body.setAttribute('data-zoom', String(zoom));
+      setVisible(true);
+    }
+    return () => {
+      if (timeoutIDRef.current) {
+        clearTimeout(timeoutIDRef.current);
+      }
+    };
+  }, [winWidth, winHeight, size]);
+
+  return <Provider value={{ layout }}>{visible ? children : null}</Provider>;
+};
+
+export default Component;

package/templates/umi-web-screen/src/layouts/index.tsx

@@ -0,0 +1,11 @@
+import L16_9 from './16_9';
+
+import Controller from './controller';
+
+const Layout = () => (
+  <Controller>
+    <L16_9 />
+  </Controller>
+);
+
+export default Layout;

package/templates/umi-web-screen/src/pages/404.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Result, Button } from 'antd';
+
+import { history } from 'umi';
+
+export default () => (
+  <Result
+    status="404"
+    title="404"
+    subTitle="对不起，您访问的页面不存在。"
+    extra={
+      <Button type="primary" onClick={() => history.replace('/')}>
+        返回首页
+      </Button>
+    }
+  />
+);

package/templates/umi-web-screen/src/pages/index.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default () => <div>Hello world</div>;

package/templates/umi-web-screen/src/pages/template/16_9/index.tsx

@@ -0,0 +1,13 @@
+import style from './style.less';
+
+import { Chart } from '../components';
+
+const Layout = () => (
+  <div className={style.layout}>
+    <div className={style.flex}>
+      <Chart.DemoLine />
+    </div>
+  </div>
+);
+
+export default Layout;

package/templates/umi-web-screen/src/pages/template/16_9/style.less

@@ -0,0 +1,7 @@
+.layout {
+  .flex {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}