@foundbyte/screen-template NPM

FoundByte-BigData-Template

快速开发平台

初始化

必须先安装 yarn

npm run init

初始化

npm run start

体验地址

http://bigdata-screen-v3-dev.gogdev.cn/#/

资产库

http://foundbyte-bigdata-docs-dev.gogdev.cn/

更新日志

log.md

目录结构

├── config
│   ├── proxy.js            // 本地代理
│   ├── webpack.common.js   // webpack通用配置
│   ├── webpack.dev.js      // webpack本地运行配置
│   ├── webpack.prod.js     // webpack构建打包配置
│   └── config.ts           // 全局配置
├── mock                    // http 模拟数据
├── public                  // 公共资源
├── dumi                    // dumi文档工程
│   └──  packages            // 组件包
└── src
    ├── assets              // 静态资源
    ├── components          // 公共组件
    ├── configs             // 配置相关
    ├── decorate            // 引入的组件包
    ├── dicts               // 数据字典配置
    ├── layouts             // 布局组件
    ├── models              // dva models
    ├── pages               // 路由页面
    ├── services            // 公共服务
    │   └── project.ts      // 数据处理、事件上下文
    ├── types               // 全局ts声明
    ├── utils               // 工具类
    ├── wrappers            // 路由拦截组件
    ├── app.ts              // 程序入口
    ├── document.ejs        // html 模板
    ├── global.less         // 全局样式
    └── render-router.tsx   // 路由渲染

主题色

./src/theme/index.tsx

默认主题色

const config = {
  default: 'dark' as Theme,
};

组件开发

情参考 bigdata-pkg 内的示例

├── settings-form               // 组件表单配置包示例（如需发布请修改项目名称）
└──  bigdata-pkg                // 组件包示例（如需发布请修改项目名称）
    └── src
          ├── index.ts          // 导出组件包
          └── widgets           // 组件包
              ├── index.ts      // 导出组件分类
              └── Echars        // 组件分类（如：常用工具、可视化组件）
                    ├── index.ts// 注册组件及分组（如：布局工具、文字）
                    ├── Bar     // 组件
                    └── ...     // 组件

组件通常包含以下内容

├── Bar
      ├── config.tsx            // 组件的默认配置
      ├── editor.tsx            // 组件的编辑器（推荐使用formilyjs编写）
      ├── schema.ts             // formilyjs 的配置
      ├── type.ts               // 一些内部ts类型
      ├── index.tsx             // 组件源码
      └── style                 // 组件样式

构建和发布

请修改 ./bigdata-pkg/package.json 中的包名

"name": "your widgets package name",

构建命令

cd ./bigdata-pkg

npm run build

发布请联系管理员

tian.mi@foundbyte.com

在项目中引用

├── src
      └── decorate
            └── widgets // 引入的组件包和配置

import { Widgets } from '@foundbyte/fast-blend-pkg';
import { ICompPackage } from '@foundbyte/fast-blend/es/types';
// 内部组件
import G2 from './G2';

// 注册组件包
const { Echars, Tool } = Widgets;

/** 左侧工具栏显示的组件 */
const components = {
  // 导入组件
  packages: {
    Tool,
    Echars,
    // G2,
  },
  // 导入配置
  config: [
    Tool.config,
    Echars.config,
    // G2.config
  ] as ICompPackage[],
};

/** 顶部工具栏显示的组件 */
const tool = {
  packages: {
    // Tool,
  },
  config: [
    // { ...(Tool.config as object), ...{ visible: true } }
  ] as ICompPackage[],
};

export { components, tool };

如果向使用路径映射，请修改 ./webpack.config.js 配置

// 如
import { Widgets } from '@foundbyte/fast-blend-pkg';

// 相当于
"@foundbyte/fast-blend-pkg": path.join(__dirname, "./bigdata-pkg/src"),

./webpack.config.js

module.exports = {
  ...
  resolve: {
    ...
    alias: {
      ...config.alias,
      "@foundbyte/fast-blend-pkg": path.join(__dirname, "./bigdata-pkg/src"),
      "@foundbyte/custom-pkg": path.join(__dirname, "./custom-pkg/src"),
      "@foundbyte/settings-form": path.join(__dirname, "./settings-form/src"),
      // 添加你的组件包路径
      ...
      "@": path.join(__dirname, "./src"),
    },
  },
  ...
}

自定义布局工具

接收标准参数参考 IWidgetProps, 其中有几个关键属性

import { IWidgetProps } from '@foundbyte/fast-blend';

const Demo: React.FC<IWidgetProps> = (props) => {
  const {
    id,           // 当前组件唯一id
    refresh,      // 强制刷新
    member = [],  // 内部组件
    packages,     // 当前编辑器使用的组件包配置
    editable,     // 是否是编辑（预览）模式
    activeWidget  // 编辑面板变化
  } = props;

  // 强制刷新（当出现嵌套容器时，为了减少组件刷新频率，可能会通知你进行主动刷新）
  useEffect(() => {
    ...
  }, [refresh]);

  // 监听布局工具内的组件变化（建议不要直接使用，member进行渲染）
  useEffect(() => {
    ...
  }, [member]);

  // 监听编辑面板编辑的变化
  useEffect(() => {
    ...
  }, [activeWidget]);
  return <>...</>
}

使用 WidgetBoard 组件包裹

import { WidgetBoard, IWidgetBoardRef } from '@foundbyte/fast-blend';

const Demo: React.FC<IWidgetProps> = (props) => {
  // IWidgetBoardRef 包含必要的操作内部组件方法
  const boardRef = useRef<IWidgetBoardRef>(null);

  return <WidgetBoard {...props} ref={boardRef}>
    ...
  </WidgetBoard>
}

@foundbyte/screen-template v1.0.0