neo-cmp-cli 1.1.8 → 1.1.10

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/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).
+};

package/src/template/neo-custom-cmp-template/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'],
+  },
+};

package/src/template/{echart-custom-cmp-template → neo-custom-cmp-template}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "echart-custom-cmp-template",
+  "name": "neo-custom-cmp-template",
   "version": "1.1.0",
   "description": "neo自定义组件模板（react&ts技术栈）",
   "keywords": [
@@ -10,7 +10,7 @@
   "author": "wibetter",
   "license": "MIT",
   "scripts": {
-    "preview": "neo preview --cmpType=info-card",
+    "preview": "neo preview --cmpType=neo-entity-grid",
     "linkDebug": "neo linkDebug",
     "publish2oss": "neo publish2oss",
     "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
@@ -31,21 +31,23 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://git@github.com:wibetter/echart-custom-cmp-template.git"
+    "url": "https://git@github.com:wibetter/neo-custom-cmp-template.git"
   },
   "bugs": {
-    "url": "https://github.com/wibetter/echart-custom-cmp-template/issues"
+    "url": "https://github.com/wibetter/neo-custom-cmp-template/issues"
   },
   "dependencies": {
     "neo-register": "^1.0.2",
     "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react-dom": "^16.9.0",
+    "axios": "^0.27.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
+    "@types/axios": "^0.14.0",
     "neo-cmp-cli": "^1.1.8",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",