npm - neo-cmp-cli - Versions diffs - 1.0.0 - Mend

neo-cmp-cli 1.0.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 (76) hide show

package/src/template/react-custom-widget-template/public/template.html ADDED Viewed

@@ -0,0 +1,13 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="format-detection" content="telephone=no"/>
+  <meta name="viewport" content="initial-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>自定义组件预览页</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/src/template/react-custom-widget-template/src/assets/css/common.scss ADDED Viewed

@@ -0,0 +1,127 @@
+/* 公共的自定义函数 */
+@function px2vw($px, $screen-width: 750) {
+  @return ($px / $screen-width) * 100vw;
+}
+@function px2rem($px, $remRate: 100) {
+  @return ($px / $remRate) + rem;
+}
+@function px2vmin($px, $screen-width: 750) {
+  @return ($px / $screen-width) * 100vmin;
+}
+@mixin fillBox {
+  width: 100%;
+  height: 100%;
+}
+/* 头部细线 */
+@mixin borderTop {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  transform: scaleY(0.5);
+}
+/* 底部细线 */
+@mixin borderBtm {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background: #ddd;
+  transform: scaleY(0.5);
+}
+/* 统一的内边距 */
+@mixin unifiedPadding($value: 40) {
+  padding: 0 px2rem($value) 0 px2rem($value);
+}
+/* 统一的左内边距 */
+@mixin unifiedLeftPadding($value: 40) {
+  padding-left: px2rem($value);
+}
+/* 统一的右内边距 */
+@mixin unifiedRightPadding($value: 40) {
+  padding-right: px2rem($value);
+}
+/* 统一的底部边框样式 */
+@mixin unifiedBottomBorder {
+  border-bottom: 1px solid #ddd;
+}
+/* 统一的上边框样式 */
+@mixin unifiedTopBorder {
+  border-top: 1px solid #ddd;
+}
+/* 统一的Item高度 */
+@mixin unifiedItemHeight {
+  line-height: px2rem(120);
+  height: px2rem(120);
+}
+/* 设置行高样式 */
+@mixin setItemHeight($value: 120) {
+  line-height: px2rem($value);
+  height: px2rem($value);
+}
+/* 统一的Item样式 */
+@mixin unifiedItemStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(28);
+  color: #828282;
+  letter-spacing: 0;
+}
+/* 统一的弹性盒子样式 */
+@mixin unifiedFlexBoxStyle {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+/* 统一的Title样式 */
+@mixin unifiedTitleStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(40);
+  color: #1e1e1e;
+}
+/* 统一的内容样式 */
+@mixin unifiedContentStyle {
+  font-family: PingFangSC-Regular;
+  font-size: px2rem(28);
+  color: #1e1e1e;
+  letter-spacing: 0;
+  text-align: right;
+  line-height: px2rem(28);
+}
+/* 底部导航盒子样式 */
+@mixin fixedBottomBox {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+}
+// 常用的变量
+$background-color: #fafafa;
+$border-color: #f7f7f7;
+$page-padding-top: px2rem(20);

package/src/template/react-custom-widget-template/src/assets/css/mixin.scss ADDED Viewed

@@ -0,0 +1,47 @@
+// 通用mixin
+$borderColor: #ddd;
+// type 为top 或者 bottom
+@mixin borderTopOrBtm($type) {
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    #{$type}: 0;
+    width: 100%;
+    height: 1px;
+    background: $borderColor;
+    transform: scaleY(0.5);
+  }
+}
+// type为 right 或者 left
+@mixin borderRtOrLt($type) {
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    #{$type}: 0;
+    height: 100%;
+    width: 1px;
+    background: $borderColor;
+    transform: scaleX(0.5);
+  }
+}
+//超出1行显示...
+@mixin ellipsis1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+// 超出多行显示...
+@mixin ellipsis($num) {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: $num;
+  -webkit-box-orient: vertical;
+}

package/src/template/react-custom-widget-template/src/components/info-card/index.jsx ADDED Viewed

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import './style.scss'; // 组件内容样式
+export default class InfoCard extends React.PureComponent {
+  constructor() {
+    super();
+    this.agreeDataFormat = this.agreeDataFormat.bind(this);
+  }
+  agreeDataFormat(agreeData) {
+    if (agreeData && agreeData <= 9999) {
+      return agreeData;
+    }
+    if (agreeData && agreeData > 9999) {
+      return `${Math.floor(agreeData / 1000) / 10}w`;
+    }
+  }
+  render() {
+    const { title, backgroundImage, imgCount, commentCount } = this.props;
+    const curBackgroundImage =
+      backgroundImage || 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg';
+    return (
+      <div className="info-card-container">
+        <div className="news-title">
+          {title ||
+            '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
+        </div>
+        <div className="item-imgbox">
+          <div
+            className="news-img"
+            style={{ backgroundImage: `url(${curBackgroundImage})` }}
+          ></div>
+          {imgCount > 0 && <div className="img-count">{imgCount}</div>}
+        </div>
+        <div className="news-info">
+          <div className="left media-mark">NeoCRM · 低代码平台</div>
+          {commentCount && commentCount > 0 && (
+            <div className="cmt-num right">
+              {this.agreeDataFormat(commentCount)}评
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+}

package/src/template/react-custom-widget-template/src/components/info-card/model.js ADDED Viewed

@@ -0,0 +1,81 @@
+/**
+ * @file 自定义组件对接编辑器的描述文件
+ */
+// @ts-ignore
+import { registerNeoEditorModel } from 'neo-register';
+export class InfoCardModel {
+  // 自定义组件名称，用于标识组件的唯一性
+  cmpType = 'info-card';
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label = '信息卡片';
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description = '信息展示卡片';
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags = ['自定义组件'];
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  // iconSrc = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg';
+  iconSrc = 'https://neo-widgets.bj.bcebos.com/favicon.png';
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title:
+      '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
+    label: '信息卡片',
+    backgroundImage: 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg',
+    imgCount: 3,
+    commentCount: 2025,
+  };
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '信息卡片',
+  };
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   * 备注：自定义组件中可用的配置项类型 请见 [当前可用表单项](https://github.com/wibetter/neo-register/blob/master/docs/FormItemType.md
+   */
+  propsSchema = [
+    {
+      type: 'textarea',
+      name: 'title',
+      label: '卡片title',
+      value:
+        '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
+    },
+    {
+      type: 'text',
+      name: 'backgroundImage',
+      label: '展示图片',
+      value: 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg',
+    },
+    {
+      type: 'number',
+      name: 'imgCount',
+      label: '图片数量',
+      value: 3,
+    },
+    {
+      type: 'number',
+      name: 'commentCount',
+      label: '评论数',
+      value: 2025,
+    },
+  ];
+  // 支持 函数式写法：propsSchemaCreator，com 为页面设计器中的组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any, data: any) => {
+    return [];
+  };
+  */
+}
+registerNeoEditorModel(InfoCardModel);
+export default InfoCardModel;

package/src/template/react-custom-widget-template/src/components/info-card/register.js ADDED Viewed

@@ -0,0 +1,4 @@
+import InfoCard from './index';
+import { registerNeoCmp } from 'neo-register';
+registerNeoCmp(InfoCard, 'info-card');

package/src/template/react-custom-widget-template/src/components/info-card/style.scss ADDED Viewed

@@ -0,0 +1,67 @@
+.info-card-container {
+  position: relative;
+  box-sizing: border-box;
+  // border-bottom: 1px solid #ececec;
+  margin: 6px 12px;
+  padding: 6px 12px;
+  background-color: #fff;
+  .news-title {
+    padding: 6px 0;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    line-height: 22px;
+    color: #5f5e5e;
+  }
+  .item-imgbox {
+    position: relative;
+    height: 395px;
+    background: #f0f0f0;
+    cursor: pointer;
+    box-sizing: border-box;
+    text-align: center;
+    overflow: hidden;
+    .news-img {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      background-size: contain;
+    }
+    .img-count {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: 6px 8px;
+      color: #fff;
+      min-width: 60px;
+      text-align: center;
+      line-height: 1.2;
+      background: rgba(0, 0, 0, 0.4);
+      font-size: 25px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+  }
+  .news-info {
+    font-family: PingFangSC-Light;
+    height: 28px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .media-mark,
+  .cmt-num {
+    display: inline-block;
+    height: 28px;
+    line-height: 28px;
+    font-family: PingFangSC-Light;
+    font-size: 18px;
+    color: #828282;
+  }
+}

package/src/template/react-custom-widget-template/src/preview.js ADDED Viewed

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import InfoCard from './components/info-card';
+ReactDOM.render(<InfoCard />, document.getElementById('root'));

package/src/template/react-ts-custom-widget-template/.editorconfig ADDED Viewed

@@ -0,0 +1,10 @@
+root = true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 80

package/src/template/react-ts-custom-widget-template/.prettierrc.js ADDED Viewed

@@ -0,0 +1,12 @@
+/*
+  prettier 配置文件
+  更多配置信息：https://prettier.io/docs/en/options.html
+ */
+module.exports = {
+  semi: true, // Semicolons 分号，默认需要分号
+  tabWidth: 2, // 空格，默认 2,
+  useTabs: false,
+  singleQuote: true, // 单引号还是双引号，默认为false 双引号
+  trailingComma: 'all', // 逗号
+  jsxBracketSameLine: false, // 默认为false，Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+};

package/src/template/react-ts-custom-widget-template/README.md ADDED Viewed

@@ -0,0 +1,53 @@
+### 目录说明
+- src: 自定义组件源码；
+- src/assets: 存放组件静态资源，比如 css、img等；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称作为目录进行存放；
+- src/components/info-card/index.tsx: 信息卡片自定义组件代码；
+- src/components/info-card/register.ts: 用于注册一个 neo 自定义组件，注册成功后编辑器画布区中才会正常展示自定义组件内容；
+- src/components/info-card/model.ts: 用于注册一个 neo-editor 自定义组件模型，注册成功后编辑器左侧组件面板中会展示；
+- src/preview.tsx: 用于本地预览自定义组件内容；
+- neo.config.js: neo-cmp-cli 配置文件。
+### 组件开发规范
+- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 Neo 组件的脚本文件，model.[tj]s 为自定义组件的描述文件（和页面设计器对接需要）；
+- 当 neo.config.js 中的 entry 为空或者不存在时，cli 将根据 src/components 目录下的自定义组件结构生成对应的 entry 配置（可在命令控制台查看生成的 entry 配置）；
+- 自定义组件中可用的配置项类型 请见 [当前可用表单项](https://github.com/wibetter/neo-register/blob/master/docs/FormItemType.md)；
+- 自定义组件最外层请设置一个唯一的 ClassName（比如 xx-cmpType-container），所有内容样式请放在该 ClassName 中；
+- 默认开启代码规范检测（含样式内容），如需关闭，请调整 neo.config.js 相关配置。
+### 自定义组件注册器使用说明
+- [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+### 开发说明
+1. **安装依赖**
+```bash
+$ npm i 或者 yarn
+```
+2. **preview: 组件预览模式（带热更新）**
+> preview模式：用于预览自定义组件内容。
+```bash
+$ npm run preview
+```
+3. **linkDebug: 外链调试（在线上页面设计器端预览自定义组件）**
+> linkDebug模式：用于在线上页面设计器中预览和调试自定义组件。
+```bash
+$ npm run linkDebug
+```
+4. **build2lib: 构建自定义组件输出产物**
+> build2lib模式：用于构建发布到 oss 中的文件，默认存放到 当前 dist 目录中。
+```bash
+$ npm run build2lib
+```
+5. **发布到对象存储服务中**
+> 需要确保 package.json 中的 name 值唯一，version 值不重复。
+```bash
+$ npm run publish2oss
+```
+### 配置项说明（neo-cmp-cli）
+[请查看neo-cmp-cli](https://github.com/wibetter/neo-cmp-cli)

package/src/template/react-ts-custom-widget-template/commitlint.config.js ADDED Viewed

@@ -0,0 +1,59 @@
+/**
+ * https://www.npmjs.com/package/@commitlint/config-conventional\
+ *
+ * Git提交规范-配置文件
+ * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下：
+ *  <type>(<scope>): <subject>
+ *  <BLANK LINE>
+ *   <body>
+ *  <BLANK LINE>
+ *  <footer>
+ *
+ *【备注】
+ * type 用于说明 commit 的类别，常用下面 7 个标识：
+ * scope 用于说明当前功能点作用于哪个页面或者哪个功能模块；
+ * subject 用于简短的描述当前commit，不超过50个字符；
+ * body 用于填写对本次 commit 的详细描述，可以分成多行；
+ * footer 不兼容变动声明，或者关闭 Issue。
+ *
+ * 【type类型取值类型】
+ * feat：新功能（feature）
+ * fix：功能优化
+ * bug：修补bug
+ * docs：文档（documentation）
+ * style：格式（不影响代码运行的变动）
+ * refactor：重构（即不是新增功能，也不是修改bug的代码变动）
+ * test：增加测试
+ * chore：构建过程或辅助工具的变动
+ * build：影响构建系统或外部依赖项的更改（示例范围：gulp，broccoli，npm）
+ * ci：对 CI 配置文件和脚本的更改（示例范围：Travis，Circle，BrowserStack，SauceLabs）
+ * perf：改进性能的代码更改
+ *
+ */
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'bug',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'perf',
+        'build',
+        'ci',
+      ],
+    ],
+    'type-empty': [2, 'never'],
+    'scope-empty': [1, 'never'],
+    'subject-full-stop': [0, 'never'],
+    'subject-case': [0, 'never'],
+  },
+};

package/src/template/react-ts-custom-widget-template/neo.config.js ADDED Viewed

@@ -0,0 +1,106 @@
+'use strict';
+const path = require('path');
+// 统一路径解析
+function resolve(dir) {
+  return path.resolve(__dirname, dir);
+}
+// 包括生产和开发的环境配置信息
+module.exports = {
+  settings: {
+    enableESLint: true, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: true, // 是否自动修正代码格式，默认不自动修正
+    enableStyleLint: true, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: true, // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    resolve: {
+      // webpack的resolve配置
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.umd.js', '.min.js', '.json'], // 用于配置webpack在尝试过程中用到的后缀列表
+      alias: {
+        '@': resolve('src'),
+        $assets: resolve('src/assets'),
+        $public: resolve('public'),
+      },
+    },
+    // sassResources中的sass文件会自动注入每一个sass文件中
+    sassResources: [
+      resolve('./src/assets/css/common.scss'),
+      resolve('./src/assets/css/mixin.scss'),
+    ],
+    // createDeclaration: true, // 打包时是否创建ts声明文件
+    ignoreNodeModules: false, // 打包时是否忽略 node_modules
+    allowList: [], // ignoreNodeModules为true时生效
+    projectDir: ['src'],
+    // template: resolve('./public/template.html'), // 自定义html模板
+    // plugins: []
+  },
+  preview: {
+    // 用于开启本地预览模式的相关配置信息
+    entry: {
+      // 本地预览自定义组件内容
+      index: './src/preview.tsx',
+    },
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+    */
+  },
+  linkDebug: {
+    // 用于开启本地调试模式的相关配置信息
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // entry 会根据 src/components 目录下的文件自动生成
+      // 外链调试（在线上页面设计器端预览自定义组件）
+      index: [
+        './src/components/info-card/register.ts',
+        './src/components/info-card/model.ts',
+      ],
+    },
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    }
+    */
+  },
+  publish2oss: {
+    // 用于构建并发布至 OSS 的相关配置
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    NODE_ENV: 'production',
+    entry: { // entry 未配置时，cli 会根据 src/components 目录下的文件自动生成对应的 entry
+      InfoCardModel: './src/components/info-card/model.ts',
+      infoCard: './src/components/info-card/register.ts'
+    },
+    cssExtract: false, // 不额外提取css文件
+    ossType: 'ali', // oss类型：ali、baidu
+    ossConfig: {
+      endpoint: 'https://oss-cn-beijing.aliyuncs.com',
+      AccessKeyId: 'xxx',
+      AccessKeySecret: 'xx',
+      bucket: 'neo-widgets' // 存储桶名称
+    },
+    assetsRoot: resolve('dist') // 上传指定目录下的脚本文件
+    */
+  },
+};