amos-designer

amos-designer

针对设计器页面，抽离公共组件，以供后期有关设计器类型界面快速开发

notice:

amos-designer 中提供的所有登录页面、主框架页面，仅适配新版平台的数据格式及风格，早期版本的 amos-security 并不能完全兼容，why？

答：主要表现在数据格式部分不匹配，后端接口部分不匹配。

install

# 设置私服，然后执行以下命令（内网用户）
npm install --save amos-designer

# or
npm install --save amos-designer --registry=http://私服IP地址:端口

目录说明

.
├── src
    ├── assets
    ├── components                // 存放公共组件类
        ├── contianer
        .   ├── CaveContainer.js
        .   ├── ...
        ├── ext
        .   ├── ImageCropper.js
        .   ├── ...
        └...
    ├── consts                    // 默认常量
    ├── pages                     // 通用页面
        ├── bizroot
        .   ├── index.js
        ├── common
        .   ├── EmptyPage.js
        .   ├── StageContainer.js
        .   ├── ...
        ├── layer
        .   ├── ...
        ├── login                // 独立登录页面
        ├── mainframe            // 系统主框架页面
        ├── sso                  // 统一认证登录页面，基础平台登录页面
        ├── stagebar             // 设计器工具栏
        ├── widgets              // 设计器元素列表栏
        └...
    ├── styles                   // 系统主样式
    ├── utils
        ├── api.js               // 公共 api
        ├── assembleRoutes.js    // 构建通用routes，生成默认 Provider 和 Router
        ├── cache.js             //
        ├── generateCode.js      // 创建code
        ├── globalTrigger.js     // 全局 global，主要用于标识设计器画布中修改未保存
        ├── routerValidate.js    // 路由校验
        ├── sso.js               // sso 公共工具类
    └── index.js

component list

  DesignerLayout,
  DesignerHeader,

  PanelContainer,
  CaveContainer,
  SettingView,
  // 功能是将一系列 form 组合在一起
  SubView,
  // 同 PanelContainer
  ScrollView,

  GraphIcon,
  SvgIcon,

  NonSketch,
  ShortCutDescr,

  ToolbarGroup,
  ToolbarItem,
  ControlBtn,
  IconButton,
  CommonBarItem,
  BarGroup,

  LineCombox,
  IconBtn,
  FromItemContent,
  InputBox,
  formItemLayout,
  frmItemStyle,

  PublishModal, PublishModalWithPlatform,
  PaneHeader, DesignerPane,

  // pages
  SSOAuth,
  OAuth,
  connectOAuth,
  Login,
  MainFrame,
  BizRoot,
  WidgetsPanel,
  LayerMgmt,
  SceneBars, ProjectBars,
  EmptyPage, StageContainer,


  globalTrigger,
  generateHtmlCode

Minframes 和 menus

提供系统所需的所有菜单类型，包含5中风格菜单。

• logoConfig 配置信息

logoConfigTypes = {
  className: PropTypes.string,
  logoImg: PropTypes.string,
  text: PropTypes.string,
  subText: PropTypes.string,
  style: PropTypes.object,
  onLogoClick: PropTypes.func
}

仅 main、single、fall、vframe、dbscreen、standardFrame 支持 noticeVersion 功能

ext components list

import ImageCropper from 'amos-designer/lib/components/ext/ImageCropper';

const cropperProps = {
  className: 'thumb-mgmt-cropper',
  style: { height: 160, width: '100%' },
  aspectRatio: 16 / 9,
  guides: false,
  preview: '.thumb-pane-img-preview'
};

onCropperCreated = (cropper) => {
  this.cropper = cropper;
}

const { thumb } = this.state;

<div className="thumb-mgmt-content">
  <ImageCropper
    {...cropperProps}
    src={thumb}
    onCreated={this.onCropperCreated}
  />
  <div className="thumb-pane-img-preview" />
</div>

styles 提供的变量

// layout

$model-area-width: 260px;
$setting-area-width: 300px;
$designer-header-height: 40px;
$main-bgcolor: white;
$designer-border: 1px solid #eaeaea;
$btnbar-width: 2.5rem; // 30px
$btnbar-height: 2.5rem; // 30px
$btnbar-border-radius: 4px;

$zindex-header: 2;
$zindex-stage: 1;
$zindex-model-setting: 3;
$zindex-drawer: 9;

$actvie-color: #345fa6;

// mixin

/**
 * 给指定 scrollbar 的节点，添加自定义滚动条支持
 * example：
 * @include @include custom-scrollbar('main-container');;
 */
@mixin custom-scrollbar($cls: app);

/**
 *定义滚动条样式 圆角和阴影不需要则传入null
 *  1、$outColor -- 滚动条颜色
 *  2、$innerColor -- 滑块颜色
 *  3、$height -- 滚动条宽高、圆角
 *  4、$width
 *  5、$radius
 *  6、$shadow -- 阴影
 *  example:
 *  .my { @include scrollbar(5px, 8px); }
 */
@mixin scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null);

/**
 * 使用 dragdesign
 *  1、$prefix -- dragdesign 样式前缀
 *  2、$size -- 拖拽handle大小
 *  3、$useDot -- 是否启用圆角，默认为true，设置为false，则可采用rect方式
 *  example:
 *  @include make-drag-resizer(mydrag, 12px, true);
 */
@mixin make-drag-resizer($prefix: $handlePrefix, $size: $handle-size, $useDot: true)

OAuth

在需要使用免登录认证的系统中，加入以下组件，设置 router ，然后访问相应的路由地址时，即可实现 OAuth 认证。

如果基础平台需要支持 OAuth 认证，则需要添加 OAuthDemo2 组件采用 url 的方式进行认证，并配置 oauth 路由。

import React, { Component } from 'react';
import { OAuth } from 'amos-designer';

function loginAction(data){
  return new Promise((resolve, reject) => {
    resolve(data);
  });
}
// 采用内置校验
export default class OAuthDemo extends Component {
  render() {
    const props = {
      loginAction,
      authParams: {
        loginId: 'super',
        password: 'a1234560'
      },
      redirectURI: 'http://example.com'
    };
    return (
      <OAuth {...props} useInnerParam />
    );
  }
}

export class OAuthDemo2 extends Component {
  render() {
    // 采用 url 方式，`http://xxx/oauth?userId=1&token=asasdzxxzas&redirect_uri=http://sdf/sdf`
    // 如果 redirect_uri 传入的是完整 url 路径，则需要采用 encodeUrl 进行转译。
    // import { encodeUrl } from 'amos-tool';
    // encodeUrl(redirect_uri);
    return (
      <OAuth useInnerParam={false} />
    );
  }
}

connectOAuth

注意与 OAuth 组件的区别。

在直接访问需要 oauth认证的组件路由，或从其它系统跳转该路由，且在 url 中提供了 token 时，采用该 hoc 组件，使得组件自动跳过 oauth。

还可以给相应的组件添加默认的 loginId 以实现自动授权。

支持的参数有：

• useInnerParam 是否采用内置登录
• loginAction 内置登录请求action
• authParams 内置登录参数 { loginId, password }
• tip 授权提示，默认 正在进行授权中，请稍后...
• showTip 是否展示授权提示，通过该字段，可以控制只有在授权成功之后，才加载被包裹组件

import React, { Component } from 'react';
import { connectOAuth } from 'amos-designer';

// 不传任何参数，直接通过url传入token 的方式
// url: http://xxx/xxx?token=safasdfas&userId=super
@connectOAuth()
export default class NeedOAuthDemo extends Component {
  render() {
    ...
  }
}

// or
import MyComponent from './Component';

export default connectOAuth()(MyComponent);


// 采用内置用户的方式，实现自动授权

function loginAction(data){
  return new Promise((resolve, reject) => {
    resolve(data);
  });
}

@connectOAuth({
  useInnerParam: true,
  loginAction,
  authParams: {
    loginId: 'super',
    password: 'a1234560'
  }
})
export default class OAuthDemo2 extends Component {
  render() {
    // 采用 url 方式，`http://xxx/oauth?userId=1&token=asasdzxxzas&redirect_uri=http://sdf/sdf`
    // 如果 redirect_uri 传入的是完整 url 路径，则需要采用 encodeUrl 进行转译。
    // import { encodeUrl } from 'amos-tool';
    // encodeUrl(redirect_uri);
    return (
      <OAuth useInnerParam={false} />
    );
  }
}

assembleRoutes 使用

entry.js

import { Component } from 'react';
import { browserHistory } from 'amos-react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import assembleRoutes, { processDefaultRoute } from 'amos-designer/lib/utils/assembleRoutes';
import rootRoutes from './routes';
import configureStore from './store';
import { menusRoutesActions } from './../services/auth';

const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);

@assembleRoutes({
  loginLink: '/login',
  // 默认情况下，登录之后的所有路由，均在 /main 之下，则可无需传入
  accessRoutes: ['/main', '/vizmix', '/vizmixpub','/mixuap', '/viz3d', '/viz3dpub', '/vizmorphic'],
  store,
  history,
  routesGenerator: rootRoutes,
  // 登录成功之后将会执行
  routesAction: menusRoutesActions
})
class App extends Component {

  /** 处理权限路由映射完毕之后的跳转 */
  handleJump = (perm) => {
    const firstMenu = processDefaultRoute(perm).find(e => {
      if ((!e.children || e.children.length === 0) && e.path && e.path.startsWith('/')) {
        return true;
      }
    });
    if (firstMenu) {
      browserHistory.push(firstMenu.path);
    } else {
      browserHistory.push('/main');
    }
  }

  render(){
    return null;
  }
}

render(<App />, document.getElementById('app'));

Usage

consts

// VIZ_MIX -> vizmix
// VIZ_MIX_CODE -> '118105122109105120'
import { VIZ_MIX, VIZ_MIX_CODE } from 'amos-designer/lib/consts/constants';

tools

import { strToAsciiCode, getPropsValue, createPageName,
  createWidgetName, nextPageSort, getSceneValue } from 'amos-designer/lib/utils/tools';

strToAsciiCode('vizmix'); // '118105122109105120'

const scene = { id: '1', uiobject: { children: [1,2,3] }};
getSceneValue(scene, 'uiobject.children'); // [1,2,3]

sso 安全模块

• 采用 DES 加密解密

// 密码加密
import { useDESPolicy, encodePassword } from 'amos-designer/lib/utils/sso';

const pwd = useDESPolicy('原密码', '加密key');

// 传入的对象中，如果包含 password 字段，则进行加密处理
const data = encodePassword({
  ...
  password: '原密码',
  ...
}, '加密key');

• 采用 AES 加密解密

// 密码加密
import { useAESPolicy, decodeAESPolicy, encodeAESPassword } from 'amos-designer/lib/utils/sso';

const pwd = useAESPolicy('原密码', '加密key');

// 解密
const pwd = decodeAESPolicy('密文', '加密key');

// 传入的对象中，如果包含 password、rePassword 字段，则进行加密处理
const data = encodeAESPassword({
  ...
  password: '原密码',
  rePassword: '原密码',
  ...
}, '加密key');

• GLOBAL_MONITOR 使用教程

直接在内部的 @assembleRoutes 中使用

@assembleRoutes({
  loginLink: '/login',
  // 默认情况下，登录之后的所有路由，均在 /main 之下，则可无需传入
  accessRoutes,
  store,
  history,
  routesGenerator: rootRoutes,
  // 登录成功之后将会执行
  routesAction: menusRoutesGroupActions,
  onMount() {
    // 监听 token
    sso.GLOBAL_MONITOR.token(window.UAPConf?.disableInvalidTokenClosePage, (params) => {
      const { type, oldValue, newValue } = params || {};
      // 'token-clear': 其他页面注销（oldValue 存在，newValue 不存在）
      // 'token-new': 直接在某个页面（或新建一个页面）输入登录页地址，重新登录 （平台登录，在登录之前会清空 token 等）
      // 其他页面注销（oldValue 存在，newValue 不存在）
      if (type === 'token-clear' || type === 'token-new'){
        // 防止 在 login 页面 loop
        if (location.pathname !== '/login'){
          // 直接去登录页面
          getHistory().push('/login');
        }
      }
    });
    sso.GLOBAL_MONITOR.error();
  },
  onUnmount() {
    sso.GLOBAL_MONITOR.errorCancel();
  },
  // 自定义清除所有，防止部分缓存数据导致页面混乱
  customClearAll(){
    // 有其它信息，也需要全部清除，否则会出现数据混乱问题
    localStorage.clear();
  }
})
class App extends Component {
  ...
}

store 模块

localforage 文档

localforage 中文

import { localForage } from 'amos-designer';

localForage.setItem();
localForage.getItem();
localForage.removeItem();
localForage.clear();

Contributor

ilex.h

鸣谢

• amos-framework

注意事项

• why? 在进行打包时，为什么不采用老版本 amos-run amoscore 进行打包而改为 amos-run security？

采用 amoscore 打包时，未能将 src/assets/** 下的所有文件，同步至 lib 下，该问题在 amos-build@next 版本中已解决。

• npm run exp-prod 是干什么的？

该命令，将 demo 下的案例，打包成可运行的 site 站点，可供 doc 系统使用。

• 外部引入文档说明：由于自 1.2.5 版本之后，添加了 viz 文档，导致docsite文件过大，此时将不在内置可执行 doc 库。外部系统需要自行添加并且执行打包命令。

示例脚本如下：

/**
 * webpack 打包配置文件
 * @author ilex
 */

const docitConfig = require('amos-build/lib/docitConfig');
const resolveCwd = require('amos-build/lib/tools/resolveCwd');
const __ENV__ = require('amos-build/lib/tools/__ENV__');

const designer = docitConfig({
  name: 'amos-designer',
  tpl: './tpl.html',
  toFile: 'index.html',
  port: 3710,
  lint: false,
  entry: {
    app: './node_modules/amos-designer/docsite/entry.js'
  },
  opened: true,
  sourceMap: __ENV__ === 'production' ? false : true
});
// mdx
designer.module.rules.push(
  { test: /\.mdx$/, loader: 'file-rawtxt-loader' }
);
// demo 进行打包发布
if (__ENV__ === 'production'){
  designer.output.path = resolveCwd('innerpkg/amos-designer');
  designer.output.publicPath = '';
}

// 返回数组是为了可以处理多个这样内置的 doc
module.exports = [
  designer
];

changelog

since 20211116 之后，将 changelog 单独进行说明。