neo-cmp-cli 1.1.7 → 1.1.9

package/src/template/echarts-custom-cmp-template/src/components/chart-widget/model.ts

@@ -0,0 +1,153 @@
+/**
+ * @file 图表组件对接编辑器的描述文件
+ */
+export class ChartWidgetModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'chart-widget';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '酷炫图表组件';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string =
+    '支持多种图表类型切换的专业图表组件，支持丰富的配置选项';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/chart.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    chartType: 'line',
+    title: '销售趋势分析',
+    subtitle: '2025年数据统计',
+    width: 800,
+    height: 400,
+    theme: 'default',
+    showLegend: true,
+    showTooltip: true,
+    showDataZoom: false,
+    showGrid: true,
+    backgroundColor: 'transparent',
+    textColor: '#333',
+    mockData: {
+      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      series: [
+        {
+          name: '销售额',
+          data: [120, 200, 150, 80, 70, 110],
+        },
+      ],
+    },
+    dataConfig: {
+      enableMock: true,
+      dataSource: 'mock',
+    },
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '酷炫图表组件',
+    chartType: 'bar',
+    title: '预览图表',
+    width: 400,
+    height: 300,
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   * 使用 JSON AMIS 表单配置
+   */
+  propsSchema = [
+    {
+      type: 'select',
+      name: 'chartType',
+      label: '图表类型',
+      value: 'line',
+      options: [
+        { label: '折线图', value: 'line' },
+        { label: '柱状图', value: 'bar' },
+        { label: '饼图', value: 'pie' },
+        { label: '散点图', value: 'scatter' },
+        { label: '雷达图', value: 'radar' },
+        { label: '仪表盘', value: 'gauge' },
+        { label: '漏斗图', value: 'funnel' },
+        { label: '桑基图', value: 'sankey' },
+      ],
+      clearable: false,
+    },
+    {
+      type: 'text',
+      name: 'title',
+      label: '主标题',
+      value: '销售趋势分析',
+      placeholder: '请输入图表标题',
+    },
+    {
+      type: 'text',
+      name: 'subtitle',
+      label: '副标题',
+      value: '2025年数据统计',
+      placeholder: '请输入图表副标题',
+    },
+    {
+      type: 'number',
+      name: 'width',
+      label: '宽度',
+      value: 800,
+      min: 200,
+      max: 2000,
+      step: 10,
+    },
+    {
+      type: 'number',
+      name: 'height',
+      label: '高度',
+      value: 400,
+      min: 200,
+      max: 1000,
+      step: 10,
+    },
+    /*
+    // 注释掉未生效的配置项
+    {
+      type: 'color',
+      name: 'backgroundColor',
+      label: '背景颜色',
+      value: 'transparent',
+    },
+    {
+      type: 'color',
+      name: 'textColor',
+      label: '文字颜色',
+      value: '#333',
+    },
+    */
+    {
+      type: 'switch',
+      name: 'showLegend',
+      label: '显示图例',
+      value: true,
+    },
+    {
+      type: 'switch',
+      name: 'showTooltip',
+      label: '显示提示框',
+      value: true,
+    }
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default ChartWidgetModel;

package/src/template/echarts-custom-cmp-template/src/components/chart-widget/style.scss

@@ -0,0 +1,209 @@
+.chart-widget-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, 
+      rgba(255, 255, 255, 0.1) 0%, 
+      rgba(255, 255, 255, 0.05) 50%, 
+      rgba(255, 255, 255, 0.1) 100%);
+    pointer-events: none;
+  }
+
+  .user-info {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 4px;
+
+    .user-name,
+    .tenant-name {
+      background: rgba(255, 255, 255, 0.9);
+      color: #333;
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      backdrop-filter: blur(10px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .user-name {
+      background: linear-gradient(135deg, #667eea, #764ba2);
+      color: white;
+    }
+  }
+
+  .chart-container {
+    position: relative;
+    margin: 0 auto;
+    z-index: 1;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    overflow: hidden;
+    transition: all 0.3s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    }
+
+    // ECharts 容器样式增强
+    .echarts-for-react {
+      width: 100% !important;
+      height: 100% !important;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    padding: 15px;
+    
+    .user-info {
+      top: 8px;
+      right: 15px;
+      
+      .user-name,
+      .tenant-name {
+        font-size: 11px;
+        padding: 3px 6px;
+      }
+    }
+  }
+
+  // 深色主题适配
+  &.dark-theme {
+    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    
+    .chart-container {
+      background: rgba(44, 62, 80, 0.95);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  // 动画效果
+  &.loading {
+    .chart-container {
+      position: relative;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 40px;
+        height: 40px;
+        margin: -20px 0 0 -20px;
+        border: 3px solid #f3f3f3;
+        border-top: 3px solid #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// 图表类型特定样式
+.chart-widget-container {
+  &.line-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+    }
+  }
+
+  &.bar-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.1));
+    }
+  }
+
+  &.pie-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));
+    }
+  }
+
+  &.scatter-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(233, 30, 99, 0.1));
+    }
+  }
+
+  &.radar-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(0, 150, 136, 0.1), rgba(0, 188, 212, 0.1));
+    }
+  }
+
+  &.gauge-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(255, 87, 34, 0.1), rgba(255, 152, 0, 0.1));
+    }
+  }
+
+  &.funnel-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(63, 81, 181, 0.1), rgba(103, 58, 183, 0.1));
+    }
+  }
+
+  &.sankey-chart {
+    .chart-container {
+      background: linear-gradient(135deg, rgba(121, 85, 72, 0.1), rgba(96, 125, 139, 0.1));
+    }
+  }
+}
+
+// 全局图表样式覆盖
+.chart-widget-container {
+  .chart-container {
+    // 确保 ECharts 图表在容器内正确显示
+    canvas {
+      border-radius: 8px;
+    }
+    
+    // 图表标题样式
+    .echarts-title {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      font-weight: 600;
+    }
+    
+    // 图例样式
+    .echarts-legend {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    }
+    
+    // 工具提示样式
+    .echarts-tooltip {
+      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    }
+  }
+}

package/src/template/echarts-custom-cmp-template/src/components/info-card/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import './style.scss'; // 组件内容样式
+
+interface InfoCardProps {
+  title: string;
+  backgroundImage: string;
+  imgCount: number;
+  commentCount: number;
+  data?: any;
+}
+
+export default class InfoCard extends React.PureComponent<InfoCardProps> {
+  constructor(props: InfoCardProps) {
+    super(props);
+    this.agreeDataFormat = this.agreeDataFormat.bind(this);
+  }
+
+  agreeDataFormat(agreeData: number) {
+    if (agreeData && agreeData <= 9999) {
+      return agreeData;
+    }
+    if (agreeData && agreeData > 9999) {
+      return `${Math.floor(agreeData / 1000) / 10}w`;
+    }
+    return '';
+  }
+
+  render() {
+    const { title, backgroundImage, imgCount, commentCount } = this.props;
+    console.log('当前自定义组件：', this.props, this);
+    const curAmisData = this.props.data || {};
+
+    const userInfo = curAmisData.__NeoCurrentUser;
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    const curBackgroundImage =
+      backgroundImage || 'https://neo-widgets.bj.bcebos.com/NeoCRM.jpg';
+    return (
+      <div className="info-card-container">
+        <div className="news-title">
+          {title ||
+            '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
+          {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+        </div>
+        <div className="item-imgbox">
+          {userInfo && userInfo.icon && (
+            <div className="user-info-box">
+              <img src={userInfo.icon} className="user-icon" />
+              <span className="user-name">{userInfo.name}</span>
+            </div>
+          )}
+          <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/echarts-custom-cmp-template/src/components/info-card/model.ts

@@ -0,0 +1,78 @@
+/**
+ * @file 自定义组件对接编辑器的描述文件
+ */
+export class InfoCardModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'info-card';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '信息卡片';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '信息展示卡片';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = '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: '信息卡片',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  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) => {
+    return [];
+  };
+  */
+}
+
+export default InfoCardModel;

package/src/template/echarts-custom-cmp-template/src/components/info-card/style.scss

@@ -0,0 +1,105 @@
+:root {
+  --padding-bottom: 12px;
+}
+
+.info-card-container {
+  position: relative;
+  box-sizing: border-box;
+
+  /* border-bottom: 1px solid #ececec; */
+  margin: 6px 12px;
+  padding: 6px var(--padding-bottom);
+  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: rgb(0 0 0 / 40%);
+      font-size: 25px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+    .user-info-box {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 100px;
+      min-height: 100px;
+      padding: 6px 8px;
+      color: #fff;
+      min-width: 60px;
+      text-align: center;
+      line-height: 1.2;
+      background: rgb(0 0 0 / 40%);
+      font-size: 25px;
+      box-sizing: border-box;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .user-icon {
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+      }
+
+      .user-name {
+        font-size: 16px;
+        font-weight: 600;
+        margin-top: 10px;
+      }
+    }
+  }
+
+  .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/echarts-custom-cmp-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/neo-custom-cmp-template/.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).
+};