Amos-designer NPM

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,
  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)