npm - @baic/yolk-cli - Versions diffs - 2.1.0-alpha.9 → 2.1.0-github.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (636) hide show

package/templates/ice-web-screen/.prettierignore ADDED Viewed

@@ -0,0 +1,8 @@
+build/
+.ice/
+coverage/
+package-lock.json
+yarn.lock
+yarn-debug.log
+yarn-error.log
+pnpm-lock.yaml

package/templates/ice-web-screen/.prettierrc.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ module.exports = require('@baic/yolk-cli/lib/.prettierrc');

package/templates/ice-web-screen/.stylelintrc ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "extends": "@baic/stylelint-config-yolk"
+}

package/templates/ice-web-screen/README.md.tpl ADDED Viewed

@@ -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/ice-web-screen/package.json.tpl ADDED Viewed

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

package/templates/ice-web-screen/public/favicon.ico ADDED Viewed

Binary file

package/templates/ice-web-screen/public/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+    <title></title>
+  </head>
+  <body>
+    <div id="yolk-app"></div>
+  </body>
+</html>

package/templates/ice-web-screen/src/app.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { runApp } from 'ice';
+import '@baic/yolk-web/lib/style/index.less';
+runApp();

package/templates/ice-web-screen/src/common/request.ts ADDED Viewed

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

package/templates/ice-web-screen/src/common/util.ts ADDED Viewed

@@ -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/ice-web-screen/src/components/index.ts ADDED Viewed

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

package/templates/ice-web-screen/src/components/resize-container/index.tsx ADDED Viewed

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import _ from 'lodash';
+import { useSize } from 'ahooks';
+import style from './style.module.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/ice-web-screen/src/components/resize-container/style.module.less ADDED Viewed

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

package/templates/ice-web-screen/src/constants.ts ADDED Viewed

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

package/templates/ice-web-screen/src/global.less ADDED Viewed

@@ -0,0 +1,31 @@
+@import 'antd/dist/antd.less';
+@import '@/styles/vars.less';
+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/ice-web-screen/src/hooks/use-size.ts ADDED Viewed

@@ -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/ice-web-screen/src/layouts/16_9/fixed.less ADDED Viewed

@@ -0,0 +1,18 @@
+@import '@/styles/vars.less';
+.body-16-9 {
+  .loading {
+    width: @RootWinWidth;
+    height: @RootWinHeight;
+  }
+  .ant-modal-mask,
+  .ant-modal-wrap {
+    width: @RootWinWidth;
+    height: @RootWinHeight;
+  }
+  .ant-message {
+    width: @RootWinWidth;
+  }
+}

package/templates/ice-web-screen/src/layouts/16_9/index.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { useSize as aHooksUseSize } from 'ahooks';
+import { RootWinHeight } from '@/constants';
+import './fixed.less';
+import style from './style.module.less';
+interface Props {
+  children?: ReactNode;
+}
+const Layout = ({ children }: Props) => {
+  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,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+export default Layout;

package/templates/ice-web-screen/src/layouts/16_9/style.module.less ADDED Viewed

@@ -0,0 +1,19 @@
+@import '@/styles/vars.less';
+.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/ice-web-screen/src/layouts/components/index.ts ADDED Viewed

File without changes

package/templates/ice-web-screen/src/layouts/controller/index.tsx ADDED Viewed

@@ -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/ice-web-screen/src/layouts/index.tsx ADDED Viewed

@@ -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/ice-web-screen/src/pages/404.tsx ADDED Viewed

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

package/templates/ice-web-screen/src/pages/index.tsx ADDED Viewed

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

package/templates/ice-web-screen/src/pages/template/16_9/index.tsx ADDED Viewed

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

package/templates/ice-web-screen/src/pages/template/16_9/style.module.less ADDED Viewed

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