npm - neo-cmp-cli - Versions diffs - 1.8.3 → 1.8.6 - Mend

neo-cmp-cli 1.8.3 → 1.8.6

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 (189) hide show

package/template/echarts-custom-cmp-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/template/echarts-custom-cmp-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/template/echarts-custom-cmp-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/template/echarts-custom-cmp-template/src/assets/img/NeoCRM.jpg ADDED Viewed

Binary file

package/template/echarts-custom-cmp-template/src/assets/img/chart.svg ADDED Viewed

@@ -0,0 +1 @@

+ <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1757492173072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M929.295093 873.474968 119.673029 873.474968 63.904067 873.474968 63.904067 817.603677l0-586.341561c0-15.451584 12.484061-27.935645 27.935645-27.935645 15.451584 0 27.935645 12.484061 27.935645 27.935645l0 586.341561 809.622065 0c15.451584 0 27.935645 12.484061 27.935645 27.935645C957.230738 860.990906 944.746677 873.474968 929.295093 873.474968L929.295093 873.474968zM845.590487 761.732387l-55.87129 0c-30.800839 0-55.87129-24.968122-55.87129-55.87129L733.847906 370.940342c0-30.800839 24.968122-55.87129 55.87129-55.87129l55.87129 0c30.800839 0 55.87129 24.968122 55.87129 55.87129l0 335.023084C901.461777 736.764265 876.391326 761.732387 845.590487 761.732387L845.590487 761.732387zM566.438693 761.732387l-55.87129 0c-30.800839 0-55.87129-24.968122-55.87129-55.87129L454.696113 203.4288c0-30.800839 24.968122-55.87129 55.87129-55.87129l55.87129 0c30.800839 0 55.87129 24.968122 55.87129 55.87129l0 502.534626C622.207655 736.764265 597.239532 761.732387 566.438693 761.732387L566.438693 761.732387zM287.184571 761.732387l-55.87129 0c-30.800839 0-55.87129-24.968122-55.87129-55.87129L175.441991 482.580594c0-30.800839 24.968122-55.87129 55.87129-55.87129l55.87129 0c30.800839 0 55.87129 24.968122 55.87129 55.87129l0 223.382832C343.055861 736.764265 318.087739 761.732387 287.184571 761.732387L287.184571 761.732387z" p-id="2396" fill="#0764f5"></path></svg>

package/template/echarts-custom-cmp-template/src/assets/img/custom-widget.svg ADDED Viewed

@@ -0,0 +1 @@

+ <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1756957113315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5395" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M288 768v115.2c0 25.6 19.2 44.8 44.8 44.8h556.8c25.6 0 44.8-19.2 44.8-44.8v-198.4s0-6.4-6.4-6.4h-83.2c-38.4 0-70.4-32-70.4-70.4 0-38.4 32-70.4 70.4-70.4h83.2s6.4 0 6.4-6.4V332.8c0-25.6-19.2-44.8-44.8-44.8H768C768 198.4 697.6 128 608 128S448 198.4 448 288H332.8c-25.6 0-44.8 19.2-44.8 44.8V448C198.4 448 128 518.4 128 608S198.4 768 288 768z m0-249.6h70.4V358.4h160V288c0-51.2 38.4-89.6 89.6-89.6 51.2 0 89.6 38.4 89.6 89.6v70.4h160v108.8h-19.2c-76.8 0-140.8 64-140.8 140.8 0 76.8 64 140.8 140.8 140.8h19.2v108.8H358.4v-160H288c-51.2 0-89.6-38.4-89.6-89.6 0-51.2 38.4-89.6 89.6-89.6z" p-id="5396" fill="#0764f5"></path></svg>

package/template/echarts-custom-cmp-template/src/assets/img/favicon.png ADDED Viewed

Binary file

package/template/echarts-custom-cmp-template/src/components/chartWidget/README.md ADDED Viewed

@@ -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设计