neo-cmp-cli 1.1.8 → 1.1.9

package/src/template/echarts-custom-cmp-template/README.md

@@ -0,0 +1,91 @@
+### 目录说明
+- src: 自定义组件源码；
+- src/assets: 存放组件静态资源，比如 css、img等；
+- src/components: 存放自定义组件代码，每个自定义组件以自身名称（cmpType 数值）作为目录进行存放；
+- src/components/info-card/: 信息卡片组件；
+- src/components/chart-widget/: 酷炫图表组件（新增）；
+- neo.config.js: neo-cmp-cli 配置文件。
+
+### 🎨 酷炫图表组件 (Chart Widget)
+
+这是一个功能丰富的图表组件，基于 ECharts 5.x 构建，支持多种图表类型和丰富的配置选项。
+
+#### 特性
+- **8种图表类型**: 折线图、柱状图、饼图、散点图、雷达图、仪表盘、漏斗图、桑基图
+- **现代化设计**: 渐变背景、毛玻璃效果、响应式布局
+- **丰富配置**: JSON AMIS 表单配置，支持主题切换、尺寸调整、交互控制
+- **数据驱动**: 支持多种数据源，实时数据更新
+
+#### 快速开始
+```bash
+# 安装依赖
+./install-deps.sh
+
+# 预览图表组件
+npm run preview --cmpType=chart-widget
+
+# 查看演示页面
+npm run preview --cmpType=demo
+```
+
+#### 组件使用
+```tsx
+import ChartWidget from './components/chart-widget';
+
+<ChartWidget
+  chartType="line"
+  title="销售趋势"
+  subtitle="2024年数据"
+  width={800}
+  height={400}
+  mockData={{
+    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+    series: [{
+      name: '销售额',
+      data: [120, 200, 150, 80, 70, 110]
+    }]
+  }}
+/>
+```
+
+更多详细信息请查看 [图表组件文档](./src/components/chart-widget/README.md)。
+
+### 组件开发规范
+- 存放在 src/components 目录下的自定义组件，默认 index 为自定义组件源码入口文件，register.[tj]s 为注册 自定义组件的脚本文件，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 相关配置；
+- 请使用 react 16版本。
+
+### 自定义组件注册器使用说明
+- [neo-register 使用说明](https://www.npmjs.com/package/neo-register?activeTab=readme)
+备注：预览、调试（linkDebug）和构建发布时 cli 会自动创建对应的注册文件（含 neo-register 的使用），用户无需关注 neo-register。
+
+### 开发说明
+
+1. **安装依赖**
+```bash
+$ npm i 或者 yarn
+```
+
+2. **preview: 组件预览模式（带热更新）**
+> preview模式：用于预览自定义组件内容。
+```bash
+$ npm run preview
+```
+
+3. **linkDebug: 外链调试（在线上页面设计器端预览自定义组件）**
+> linkDebug模式：用于在线上页面设计器中预览和调试自定义组件。
+```bash
+$ npm run linkDebug
+```
+
+4. **发布到对象存储服务中**
+> 需要确保 package.json 中的 name 值唯一，version 值不重复。
+```bash
+$ npm run publish2oss
+```
+
+### 配置项说明（neo-cmp-cli）
+[请查看neo-cmp-cli](https://github.com/wibetter/neo-cmp-cli)

package/src/template/echarts-custom-cmp-template/neo.config.js

@@ -0,0 +1,117 @@
+'use strict';
+const path = require('path');
+
+// 统一路径解析
+function resolve(dir) {
+  return path.resolve(__dirname, dir);
+}
+
+// 包括生产和开发的环境配置信息
+module.exports = {
+  settings: {
+    enableESLint: true, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式
+    enableESLintFix: true, // 是否自动修正代码格式，默认不自动修正
+    enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式
+    enableStyleLintFix: false, // 是否需要StyleLint自动修正代码格式
+  },
+  webpack: {
+    target: ['web', 'es5'], // 指定目标环境为 web 和 es5，确保兼容性
+    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: [],
+    // babelPlugins: [],
+  },
+  neoCommonModule: {
+    // neoExports: ['echarts'], // 自定义组件 共享出来的模块，支持数组和对象
+    neoExports: {
+      'neo/chart-widget': require('./src/components/chart-widget'),
+      'neo-register': require('neo-register'),
+    },
+    neoExternals: ['echarts'], // 自定义组件 需要剔除的模块，仅支持数组写法
+  },
+  preview: {
+    // 用于开启本地预览模式的相关配置信息
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 本地预览自定义组件内容
+      index: './src/preview.jsx',
+    },
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    },
+    */
+  },
+  linkDebug: {
+    // 用于开启本地调试模式的相关配置信息
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    entry: { // 根据 src/components 目录下的文件自动生成 entry 相关配置
+      // 外链调试（在线上页面设计器端预览自定义组件）
+      index: [
+        './src/components/info-card/register.ts',
+        './src/components/info-card/model.ts',
+      ],
+    },
+    NODE_ENV: 'development',
+    port: 80, // 设置基础端口，如果被占用则自动寻找可用端口
+    closeHotReload: true, // 是否关闭热更新
+    assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径）
+    assetsSubDirectory: '',
+    hostname: 'localhost',
+    proxyTable: {
+      '/apiTest': {
+        target: 'http://api-test.com.cn', // 不支持跨域的接口根地址
+        ws: true,
+        changeOrigin: true,
+      },
+    }
+    */
+  },
+  publish2oss: {
+    // 用于构建并发布至 OSS 的相关配置
+    /*
+    【特别说明】以下配置项都自带默认值，非必填。如需自定义请自行配置。
+    NODE_ENV: 'production',
+    entry: { // 根据 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') // 上传指定目录下的脚本文件
+    */
+  },
+};

package/src/template/echarts-custom-cmp-template/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "echarts-custom-cmp-template",
+  "version": "1.1.0",
+  "description": "neo自定义组件模板（react&ts技术栈）",
+  "keywords": [
+    "自定义组件模板",
+    "react&ts技术栈",
+    "neo自定义组件"
+  ],
+  "author": "wibetter",
+  "license": "MIT",
+  "scripts": {
+    "preview": "neo preview --cmpType=chart-widget",
+    "linkDebug": "neo linkDebug",
+    "publish2oss": "neo publish2oss",
+    "format": "prettier --write \"src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}\""
+  },
+  "files": [
+    "dist/*"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/**/*.{js,jsx,ts,tsx,vue,scss,json}": [
+      "prettier --write"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git@github.com:wibetter/echarts-custom-cmp-template.git"
+  },
+  "bugs": {
+    "url": "https://github.com/wibetter/echarts-custom-cmp-template/issues"
+  },
+  "dependencies": {
+    "neo-register": "^1.0.2",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "echarts": "^5.5.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.15",
+    "neo-cmp-cli": "^1.1.8",
+    "husky": "^4.2.5",
+    "lint-staged": "^10.2.9",
+    "prettier": "^2.0.5",
+    "@types/echarts": "^4.9.0"
+  },
+  "engines": {
+    "node": ">= 10.13.0",
+    "npm": ">= 6.4.1"
+  }
+}

package/src/template/echarts-custom-cmp-template/src/components/chart-widget/README.md

@@ -0,0 +1,186 @@
+# 酷炫图表组件 (Chart Widget)
+一个功能丰富的图表组件，基于 ECharts 5.x 构建，支持多种图表类型和丰富的配置选项。
+
+### 特别说明
+- 这是通过 Cursor 生成的一个自定义组件示例
+
+## 功能特性
+
+### 📊 支持的图表类型
+- **折线图** - 适合展示趋势数据
+- **柱状图** - 适合对比数据
+- **饼图** - 适合展示占比数据
+- **散点图** - 适合展示相关性数据
+- **雷达图** - 适合多维度数据对比
+- **仪表盘** - 适合展示单一指标
+- **漏斗图** - 适合展示转化流程
+- **桑基图** - 适合展示流向关系
+
+### 🎨 样式特性
+- 现代化渐变背景设计
+- 毛玻璃效果
+- 响应式布局
+- 深色主题支持
+- 悬停动画效果
+- 专业配色方案
+
+### ⚙️ 配置选项
+- 图表类型切换
+- 标题和副标题设置
+- 尺寸自定义
+- 颜色主题配置
+- 图例、提示框、网格等显示控制
+- 数据缩放功能
+- 动画效果配置
+- 交互行为设置
+
+### 📝 数据配置
+- 支持 JSON AMIS 表单配置
+- 多种数据源类型（模拟数据、API接口、静态数据）
+- 不同类型图表的专用数据配置
+- 实时数据更新支持
+
+## 使用方法
+
+### 基础用法
+
+```tsx
+import ChartWidget from './components/chart-widget';
+
+<ChartWidget
+  chartType="line"
+  title="销售趋势"
+  subtitle="2025年数据"
+  width={800}
+  height={400}
+  mockData={{
+    xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+    series: [{
+      name: '销售额',
+      data: [120, 200, 150, 80, 70, 110]
+    }]
+  }}
+/>
+```
+
+### 配置选项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| chartType | string | 'line' | 图表类型 |
+| title | string | '图表标题' | 主标题 |
+| subtitle | string | '' | 副标题 |
+| width | number | 800 | 图表宽度 |
+| height | number | 400 | 图表高度 |
+| theme | string | 'default' | 主题风格 |
+| showLegend | boolean | true | 是否显示图例 |
+| showTooltip | boolean | true | 是否显示提示框 |
+| showDataZoom | boolean | false | 是否显示数据缩放 |
+| showGrid | boolean | true | 是否显示网格 |
+| backgroundColor | string | 'transparent' | 背景颜色 |
+| textColor | string | '#333' | 文字颜色 |
+| mockData | object | {} | 模拟数据 |
+| dataConfig | object | {} | 数据配置 |
+
+### 数据格式
+
+#### 折线图/柱状图数据
+```javascript
+{
+  xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+  series: [{
+    name: '销售额',
+    data: [120, 200, 150, 80, 70, 110]
+  }]
+}
+```
+
+#### 饼图数据
+```javascript
+{
+  series: [{
+    data: [
+      { value: 1048, name: '搜索引擎' },
+      { value: 735, name: '直接访问' },
+      { value: 580, name: '邮件营销' }
+    ]
+  }]
+}
+```
+
+#### 散点图数据
+```javascript
+{
+  series: [{
+    data: [
+      [161.2, 51.6], [167.5, 59.0], [159.5, 49.2]
+    ]
+  }]
+}
+```
+
+#### 雷达图数据
+```javascript
+{
+  indicator: [
+    { name: '销售', max: 6500 },
+    { name: '管理', max: 16000 }
+  ],
+  series: [{
+    value: [4200, 3000],
+    name: '预算分配'
+  }]
+}
+```
+
+## 主题配置
+
+组件支持多种主题风格：
+- `default` - 默认主题
+- `dark` - 深色主题
+- `light` - 明亮主题
+- `business` - 商务主题
+
+## 响应式设计
+
+组件自动适配不同屏幕尺寸，在移动端和桌面端都有良好的显示效果。
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 技术栈
+
+- React 16.9+
+- TypeScript
+- ECharts 5.4+
+- SCSS
+
+## 开发说明
+
+### 安装依赖
+```bash
+npm install
+```
+
+### 预览组件
+```bash
+npm run preview --cmpType=chart-widget
+```
+
+### 构建发布
+```bash
+npm run publish2oss
+```
+
+## 更新日志
+
+### v1.0.0
+- 初始版本发布
+- 支持8种图表类型
+- 完整的配置选项
+- 响应式设计
+- 现代化UI设计