neo-cmp-cli 1.0.0

package/src/template/react-ts-custom-widget-template/src/components/list-widget/model.ts

@@ -0,0 +1,92 @@
+/**
+ * @file 列表组件对接编辑器的描述文件
+ */
+// @ts-ignore
+import { registerNeoEditorModel } from 'neo-register';
+
+export class ListWidgetModel {
+  // 自定义组件名称，用于标识组件的唯一性
+  cmpType: string = 'list-widget';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '列表组件';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '支持配置的列表展示组件，内置模拟数据';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://neo-widgets.bj.bcebos.com/favicon.png';
+  // iconSrc: string = 'https://custom-widgets.bj.bcebos.com/custom-icon1.svg'; // custom-icon2
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title: '内容列表',
+    label: '列表组件',
+    showImage: true,
+    showTags: true,
+    itemCount: 8,
+    listType: 'default',
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '列表组件',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'text',
+      name: 'title',
+      label: '列表标题',
+      value: '内容列表',
+    },
+    {
+      type: 'switch',
+      name: 'showImage',
+      label: '显示图片',
+      value: true,
+    },
+    {
+      type: 'switch',
+      name: 'showTags',
+      label: '显示标签',
+      value: true,
+    },
+    {
+      type: 'number',
+      name: 'itemCount',
+      label: '列表项数量',
+      value: 8,
+      min: 1,
+      max: 50,
+    },
+    {
+      type: 'radios',
+      name: 'listType',
+      label: '列表样式',
+      value: 'default',
+      options: [
+        { label: '默认样式', value: 'default' },
+        { label: '卡片样式', value: 'card' },
+        { label: '简洁样式', value: 'simple' },
+      ],
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+registerNeoEditorModel(ListWidgetModel);
+
+export default ListWidgetModel;

package/src/template/react-ts-custom-widget-template/src/components/list-widget/register.ts

@@ -0,0 +1,5 @@
+import ListWidget from './index';
+// @ts-ignore
+import { registerNeoCmp } from 'neo-register';
+
+registerNeoCmp(ListWidget, 'list-widget');

package/src/template/react-ts-custom-widget-template/src/components/list-widget/style.scss

@@ -0,0 +1,350 @@
+:root {
+  --list-padding: 16px;
+  --list-border-radius: 8px;
+  --list-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  --list-hover-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+}
+
+.list-widget-container {
+  position: relative;
+  box-sizing: border-box;
+  margin: 12px;
+  padding: var(--list-padding);
+  background-color: #fff;
+  border-radius: var(--list-border-radius);
+  box-shadow: var(--list-shadow);
+
+  .list-header {
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid #f0f0f0;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 40px;
+      height: 2px;
+      background: linear-gradient(90deg, #1890ff, #40a9ff);
+      border-radius: 1px;
+    }
+
+    .list-title {
+      margin: 0;
+      color: #262626;
+      font-weight: 600;
+      font-size: 20px;
+      position: relative;
+    }
+  }
+
+  .list-content {
+    .list-item {
+      padding: 18px 0;
+      border-bottom: 1px solid #f5f5f5;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: linear-gradient(180deg, #1890ff, #40a9ff);
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        border-radius: 0 2px 2px 0;
+      }
+
+      &:hover {
+        background-color: #fafafa;
+        border-radius: 8px;
+        margin: 0 -12px;
+        padding: 18px 12px;
+        box-shadow: var(--list-hover-shadow);
+        transform: translateX(4px);
+
+        &::before {
+          opacity: 1;
+        }
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .item-image {
+        width: 100%;
+        height: 200px;
+        margin-bottom: 16px;
+        border-radius: 8px;
+        overflow: hidden;
+        position: relative;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: transform 0.3s ease;
+        }
+
+        &:hover img {
+          transform: scale(1.05);
+        }
+      }
+
+      .item-content {
+        .item-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          margin-bottom: 8px;
+          gap: 12px;
+
+          .item-title {
+            margin: 0;
+            color: #262626;
+            font-weight: 500;
+            line-height: 1.4;
+            flex: 1;
+            font-size: 16px;
+          }
+
+          .item-status {
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 11px;
+            line-height: 1.2;
+            font-weight: 500;
+
+            &.status-green {
+              background-color: #f6ffed;
+              color: #52c41a;
+              border: 1px solid #b7eb8f;
+            }
+
+            &.status-orange {
+              background-color: #fff7e6;
+              color: #fa8c16;
+              border: 1px solid #ffd591;
+            }
+
+            &.status-gray {
+              background-color: #f5f5f5;
+              color: #8c8c8c;
+              border: 1px solid #d9d9d9;
+            }
+          }
+        }
+
+        .item-description {
+          margin-bottom: 12px;
+          line-height: 1.6;
+          color: #595959;
+          font-size: 14px;
+          display: box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .item-meta {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+
+          .item-meta-info {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .meta-item {
+              color: #8c8c8c;
+              font-size: 12px;
+            }
+
+            .meta-separator {
+              color: #8c8c8c;
+              font-size: 12px;
+            }
+          }
+
+          .item-tags {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+
+            .tag {
+              padding: 2px 6px;
+              background-color: #e6f7ff;
+              color: #1890ff;
+              border: 1px solid #91d5ff;
+              border-radius: 4px;
+              font-size: 11px;
+              line-height: 1.2;
+            }
+          }
+        }
+      }
+    }
+
+    // 卡片样式
+    &.list-card {
+      .list-item {
+        margin-bottom: 12px;
+        padding: 16px;
+        background: #fff;
+        border: 1px solid #f0f0f0;
+        border-radius: var(--list-border-radius);
+        box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+
+        &:hover {
+          box-shadow: var(--list-hover-shadow);
+          border-color: #d9d9d9;
+          transform: translateY(-2px);
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .item-image {
+          height: 180px;
+          margin-bottom: 12px;
+        }
+      }
+    }
+
+    // 简洁样式
+    &.list-simple {
+      .list-item {
+        padding: 12px 0;
+        border-bottom: 1px solid #f0f0f0;
+
+        &:hover {
+          background-color: transparent;
+          box-shadow: none;
+          margin: 0;
+          padding: 12px 6px;
+        }
+
+        .item-image {
+          height: 120px;
+          margin-bottom: 8px;
+        }
+
+        .item-content {
+          .item-header {
+            margin-bottom: 4px;
+
+            .item-title {
+              font-size: 14px;
+              font-weight: 400;
+            }
+          }
+
+          .item-description {
+            font-size: 12px;
+            color: #8c8c8c;
+            margin-bottom: 8px;
+            -webkit-line-clamp: 1;
+            line-clamp: 1;
+          }
+
+          .item-meta {
+            .item-tags {
+              .tag {
+                font-size: 10px;
+                padding: 1px 4px;
+                line-height: 1.1;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .list-widget-container {
+    margin: 8px;
+    padding: 12px;
+
+    .list-content {
+      .list-item {
+        .item-content {
+          .item-header {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+
+            .item-title {
+              margin-right: 0;
+            }
+          }
+
+          .item-meta {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 8px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 暗色主题支持
+@media (prefers-color-scheme: dark) {
+  .list-widget-container {
+    background-color: #1f1f1f;
+    color: #fff;
+
+    .list-header {
+      border-bottom-color: #303030;
+
+      .list-title {
+        color: #fff;
+      }
+    }
+
+    .list-content {
+      .list-item {
+        border-bottom-color: #303030;
+
+        &:hover {
+          background-color: #2a2a2a;
+        }
+
+        .item-content {
+          .item-header {
+            .item-title {
+              color: #fff;
+            }
+          }
+
+          .item-description {
+            color: #ccc;
+          }
+        }
+      }
+
+      &.list-card {
+        .list-item {
+          background: #1f1f1f;
+          border-color: #303030;
+        }
+      }
+    }
+  }
+}

package/src/template/react-ts-custom-widget-template/src/preview.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import InfoCard from './components/info-card';
+import ListWidget from './components/list-widget';
+
+/* 引入公共的静态资源 */
+import '$public/css/base.css';
+
+// 预览 info-card 组件
+ReactDOM.render(
+  <InfoCard
+    {...{
+      title:
+        'neo-widget是开发neo自定义组件的工具集，提供注册neo自定义组件和neo-editor自定义组件模型的方法。',
+      backgroundImage: '',
+      imgCount: 101,
+      commentCount: 2022,
+    }}
+  />,
+  document.getElementById('root'),
+);
+
+/*
+// 预览 list-widget 组件
+ReactDOM.render(
+  <ListWidget
+    {...{
+      title: '内容列表预览',
+      showImage: true,
+      showTags: true,
+      itemCount: 6,
+      listType: 'default',
+    }}
+  />,
+  document.getElementById('root'),
+);
+*/

package/src/template/react-ts-custom-widget-template/tsconfig.json

@@ -0,0 +1,68 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    /* Basic Options */
+    "target": "esnext",
+    /* 指定编译之后的版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "esnext" /* 指定要使用的模板标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "allowJs": false /* 指定是否允许编译JS文件，默认false,即不编译JS文件. */,
+    // "checkJs": true,                       /* 指定是否检查和报告JS文件中的错误，默认false */
+    "jsx": "react" /* 指定jsx代码用于的开发环境:'preserve','react-native', or 'react'. */,
+    "declaration": false /* 指定是否在编译的时候生成相的d.ts声明文件 */,
+    // "declarationMap": true,                /* 指定编译时是否生成.map文件 */
+    // "sourceMap": true,                     /* 指定编译时是否生成.map文件 */
+    // "outFile": "./",                       /* 指定输出文件合并为一个文件 */
+    // "outDir": "dist", /* 指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹*/
+    // "rootDir": "src", /* 指定编译文件的根目录，编译器会在根目录查找入口文件 */
+    // "composite": true,                     /* 是否编译构建引用项目 */
+    // "removeComments": true,                /* 指定是否将编译后的文件注释删掉，设为true的话即删除注释，默认为false */
+    "noEmit": false /* 不生成编译文件 */,
+    "importHelpers": true /* 指定是否引入tslib里的复制工具函数，默认为false */,
+    // "downlevelIteration": true,            /* 当target为"ES5"或"ES3"时，为"for-of" "spread"和"destructuring"中的迭代器提供完全支持 */
+    "isolatedModules": false /* 指定是否将每个文件作为单独的模块，默认为true */,
+
+    /* Strict Type-Checking Options */
+    "strict": false /* 指定是否启动所有类型检查 */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* Enable strict null checks. */,
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": false /* Report errors on unused locals. */,
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "paths": {
+      "@": ["./src"]
+    } /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    /* 指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载 */
+    "typeRoots": ["./@types", "./node_modules/@types"],
+    // "types": [],                           /* 指定需要包含的模块，只有在这里列出的模块的声明文件才会被加载 */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+    // "suppressImplicitAnyIndexErrors": true /* Suppress --noImplicitAny errors for indexing objects lacking index signatures. See issue #1232 for more details. */
+  },
+  "include": ["src", "test"],
+  "exclude": ["node_modules"]
+}

package/src/template/vue2-neo-custom-widget/.editorconfig

@@ -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/vue2-neo-custom-widget/.prettierrc.js

@@ -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/vue2-neo-custom-widget/README.md

@@ -0,0 +1,52 @@
+### 目录说明
+- src: 自定义组件源码；
+- src/assets: 存放组件静态资源，比如 css、img等；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称作为目录进行存放；
+- src/components/info-card/index.vue: 信息卡片自定义组件代码；
+- src/components/info-card/register.js: 用于注册一个 neo 自定义组件，注册成功后编辑器画布区中才会正常展示自定义组件内容；
+- src/components/info-card/model.js: 用于注册一个 neo-editor 自定义组件模型，注册成功后编辑器左侧组件面板中会展示；
+- src/preview.js: 用于本地预览自定义组件内容；
+- 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-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模式：用于构建发布到 npm 中的文件，默认存放到 当前 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/vue2-neo-custom-widget/commitlint.config.js

@@ -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'],
+  },
+};