amos-designer

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

notice:

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

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

install

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

# or
npm install --save amos-designer --registry=http://172.16.11.26:9696

目录说明

.
├── 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,
  PaneHeader, DesignerPane,

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


  globalTrigger,
  generateHtmlCode

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: $bgColor, $innerColor: $bgGrey, $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} />
    );
  }
}

Usage

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 系统使用。

changelog

2020-8-10~8-19 v1.1.3

1. 修改 NestedMenu 组件选中bug
2. 修改 NestedMenu 初始时选中bug
3. 修改 domTools 中页面大小问题

2020-8-7 v1.1.2

1. DoubleScreen 添加 triggerMenuChange static 方法，可由外部触发副屏菜单变化
2. 修改menu 或 navs 为 null 时，因调用 menus.map 方法错误，而导致系统崩溃问题
3. 修改嵌套菜单整体刷新问题

2020-8-5 v1.1.1

1. 副屏添加菜单变化监听

2020-8-3 v1.1.0

1. 添加单菜单、单例瀑布菜单
2. 添加双屏菜单

2020-7-13~7-17 v1.0.13

1. 添加 SizeStyle 属性配置
2. domtTools 添加 convertStyleUnit2px

2020-6-24~7-7 v1.0.12

1. 加入内置的 iconfont 资源文件
2. modify calcHandleScale bugs

2020-6-17 v1.0.11

1. 添加 connectOAuth 单组件认证单路由

2020-6-1 v1.0.10

1. 添加 OAuth 基础认证
2. 修改 domTools#exceptParams

2020-5-29 v1.0.9

1. 修改 WidgetsPanel 自定义 key
2. 修改 DragDesign#mixins.scss
3. 修改 AttributePanel, 支持扩展 panel

2020-5-11~5-13 v1.0.8

1. add attribute
2. add tools
3. add sketch settings
4. modify tools

2020-5-6~5-7 v1.0.7

1. 添加平台统一请求 request
2. widget 添加 openStatus 用于标识当前控件为开启，则无法进行拖拽
3. StageArear 中，设置 droppable 为 true，用于默认开启 drop 事件

2020-4-22~4-27 v1.0.6

1. 修改页面刷新时，路由刷新问题
2. 修改 StageArea 接收额外props
3. 添加 BasicSketch
4. 添加 domTools

以下内容，为 4-27 重新发布 1.0.6 版本时，新增的功能

1. StageArea，添加 droppable 可进行控制是否在最外层接收 drop 数据
2. 修改 domTools 中的bug
3. 添加 mixins.scss,新增 DragDesign 中快速生成 resizer

2020-4-16 v1.0.5

1. 修改 Login、SSOAuth 组件
2. 修改 rules
3. 修改 Login 记住密码颜色

2020-4-15 v1.0.4

1. 修改 toolbar drawer 组件样式
2. 修改 ProjectBars 组件 bug
3. 添加通用 $designer-drawer-height 高度
4. 添加通用 assembleRoutes、routerValidate
5. 添加 permissions 缓存

2020-4-9~4-14 v1.0.3

1. 修改 generateHtmlCode
2. 修改 PublishModal
3. 添加通用 SSO 和 MainFrame 页面
4. 添加 widgets panel
5. 添加通用组件

2020-4-9 v1.0.2

新增组件：PublishModal、generateHtmlCode

2020-4-9 v1.0.1

新增组件、样式 组件：LineCombox、IconBtn、FromItemContent、formItemLayout、frmItemStyle

2020-4-9 v1.0.0

初始抽离公共组件