neo-cmp-cli 1.2.12 → 1.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neo-cmp-cli",
-  "version": "1.2.12",
+  "version": "1.2.13",
   "description": "前端脚手架：自定义组件开发工具，支持react 和 vue2.0技术栈。",
   "keywords": [
     "neo-cli",

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

@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.2.12",
+    "neo-cmp-cli": "^1.2.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/develop/neo-custom-cmp-template/package.json

@@ -51,7 +51,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
     "@types/axios": "^0.14.0",
-    "neo-cmp-cli": "^1.2.12",
+    "neo-cmp-cli": "^1.2.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

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

@@ -47,7 +47,7 @@
     "@commitlint/config-conventional": "^9.1.1",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
-    "neo-cmp-cli": "^1.2.12",
+    "neo-cmp-cli": "^1.2.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5",

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

@@ -44,5 +44,5 @@ $ npm run linkDebug
 $ npm run publish2oss
 ```
 
-### 配置项说明（neo-cmp-cli）
+### 前端工程配置项说明（neo-cmp-cli）
 [请查看neo-cmp-cli](https://github.com/wibetter/neo-cmp-cli)

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

@@ -44,7 +44,7 @@
     "axios": "^0.27.2",
     "antd": "^4.9.4",
     "lodash": "^4.17.21",
-    "neo-open-api": "^1.0.2"
+    "neo-open-api": "^1.0.8"
   },
   "devDependencies": {
     "@commitlint/cli": "^8.3.5",
@@ -52,7 +52,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
     "@types/axios": "^0.14.0",
-    "neo-cmp-cli": "^1.2.12",
+    "neo-cmp-cli": "^1.2.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

package/src/template/neo-custom-cmp-template/src/assets/img/detail.svg

@@ -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="1759211982910" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2424" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1024 1024H0V0h768v20.608l19.84-19.904 235.52 235.392-19.84 19.904H1024v768zM768 147.2V256h108.8zM896 384h-256V128H128v768h768V384z m-128 192H256V448h512v128z m0 192H256v-128h512v128z" fill="#0764f5" p-id="2425"></path></svg>

package/src/template/neo-custom-cmp-template/src/components/contact-card-list/README.md

@@ -1,8 +1,4 @@
 # ContactCardList 联系人卡片列表组件
-- 使用 cursor 生成的自定义组件。  
-
-## 组件描述
-
 联系人卡片列表组件用于展示联系人信息，以卡片形式展示每个联系人的姓名和手机号。组件使用 Ant Design 的 Card 组件，具有良好的视觉效果和交互体验。
 
 ## 功能特性
@@ -10,7 +6,7 @@
 - 📱 响应式设计，支持多种屏幕尺寸
 - 🎨 美观的卡片布局，支持悬停效果
 - 🔄 自动加载数据，支持错误重试
-- 📊 使用 queryXObjectData 获取 customContact__c 数据
+- 📊 使用 neo-open-api 获取 customContact__c 数据
 - 🎯 展示联系人姓名和手机号信息
 - 💫 加载状态和空状态处理
 
@@ -23,11 +19,10 @@
 
 ## 数据源
 
-组件通过 `queryXObjectData` 工具函数获取数据：
+组件通过 `neo-open-api` 工具函数获取数据：
 
 - **数据表**: `customContact__c`
 - **字段**: `id`, `name`, `phone__c`
-- **API**: `/rest/data/v2/query`
 
 ## 样式特性
 

package/src/template/neo-custom-cmp-template/src/components/contact-card-list/index.tsx

@@ -76,6 +76,16 @@ export default class ContactCardList extends React.PureComponent<
     }
   }
 
+  getDataName = (data: any) => {
+    let dataNameKey = 'name';
+    Object.keys(data).forEach((nameKey: string) => {
+      if (nameKey && /Name$/.test(nameKey)) {
+        dataNameKey = nameKey;
+      }
+    });
+    return data[dataNameKey];
+  };
+
   renderContactCard(contact: ContactData, index: number) {
     return (
       <Col xs={24} sm={12} md={8} lg={6} xl={6} key={contact.id || index}>
@@ -96,7 +106,9 @@ export default class ContactCardList extends React.PureComponent<
             <div className="contact-info">
               <div className="contact-name">
                 <UserOutlined className="info-icon" />
-                <span className="name-text">{contact.name || '未知姓名'}</span>
+                <span className="name-text">
+                  {contact.name || this.getDataName(contact) || '未知姓名'}
+                </span>
               </div>
               <div className="contact-phone">
                 <PhoneOutlined className="info-icon" />

package/src/template/neo-custom-cmp-template/src/components/contact-form/index.tsx

@@ -109,14 +109,13 @@ export default class ContactForm extends React.PureComponent<
 
       if (userInfo && userInfo.id) {
         submitData = Object.assign(submitData, {
-          userId: userInfo.id,
-          dimDepart: userInfo.departId,
+          userId: userInfo.id, // 当前用户ID，非必填
+          dimDepart: userInfo.departId, // 当前用户所属部门ID，非必填
         });
       }
 
       // 调用 API 提交数据
       const response: any = await xObject.create('customContact__c', {
-        method: 'POST',
         data: submitData,
       });
 

package/src/template/neo-custom-cmp-template/src/components/entity-detail/README.md

@@ -0,0 +1,193 @@
+# 实体数据详情组件
+实体数据详情组件（entity-detail）是一个用于展示实体数据详细信息的自定义组件。它通过 Neo Open API 获取数据，支持多列布局展示，自动识别字段类型并进行格式化显示。
+
+## 功能特性
+
+- ✅ **数据获取**：基于 Neo Open API 获取实体数据详情
+- ✅ **多列布局**：支持 1-4 列的灵活布局配置
+- ✅ **字段类型识别**：自动识别并格式化不同类型的字段（布尔值、日期、数字、URL、邮箱、电话等）
+- ✅ **可视化配置**：在编辑器中可视化配置实体类型、数据ID、列数等属性
+- ✅ **响应式设计**：支持不同屏幕尺寸的自适应布局
+- ✅ **刷新功能**：支持手动刷新数据
+- ✅ **错误处理**：完善的错误提示和重试机制
+
+## 使用场景
+
+- 实体记录详情页展示
+- 数据详情弹窗
+- 审批流程中的数据展示
+- 仪表盘中的详细信息卡片
+
+## 组件属性配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| title | string | '实体数据详情' | 组件标题 |
+| showTitle | boolean | true | 是否显示标题栏和刷新按钮 |
+| xObjectDetailApi | object | { xObjectApiKey: 'account', objectId: '' } | 业务详情数据配置，包含实体对象API Key和数据ID |
+| xObjectDetailApi.xObjectApiKey | string | 'account' | 实体对象的 API Key |
+| xObjectDetailApi.objectId | string | '' | 要展示的数据记录ID，支持变量如 ${recordId} |
+| columnCount | number | 3 | 详情页面的列数布局（1-4列） |
+
+## 字段类型支持
+
+组件会根据字段类型自动格式化显示：
+
+- **boolean**：显示为带图标的标签（是/否）
+- **date/datetime**：格式化为本地日期时间
+- **number/currency/percent**：使用千分位格式化
+- **url**：显示为可点击的链接
+- **email**：显示为邮箱链接
+- **phone**：显示为电话链接
+- **text**：普通文本显示
+- **空值**：显示为 "-"
+
+## 使用示例
+
+### 基础用法
+
+```jsx
+<EntityDetail
+  title="客户详情"
+  xObjectDetailApi={{
+    xObjectApiKey: "account",
+    objectId: "12345"
+  }}
+  columnCount={3}
+/>
+```
+
+### 使用变量
+
+在 Neo 平台中，可以使用上下文变量：
+
+```jsx
+<EntityDetail
+  title="当前记录详情"
+  xObjectDetailApi={{
+    xObjectApiKey: "customContact__c",
+    objectId: "${recordId}"
+  }}
+  columnCount={2}
+/>
+```
+
+### 隐藏标题栏
+
+```jsx
+<EntityDetail
+  showTitle={false}
+  xObjectDetailApi={{
+    xObjectApiKey: "account",
+    objectId: "12345"
+  }}
+  columnCount={1}
+/>
+```
+
+## 技术实现
+
+### 数据获取
+
+组件使用以下 API 获取数据：
+
+1. **xObject.get**：获取单条实体数据
+2. **xObject.getDesc**：获取实体字段描述信息
+
+```typescript
+// 获取详情数据
+const result = await xObject.get(xObjectDetailApi.xObjectApiKey, xObjectDetailApi.objectId);
+
+// 获取字段描述
+const descResult = await xObject.getDesc(xObjectDetailApi.xObjectApiKey);
+```
+
+### 布局方案
+
+组件采用 Ant Design 的 Row/Col 栅格系统，根据 `columnCount` 属性动态分配字段到不同的列中：
+
+- 1列：每列占 24 格（100%宽度）
+- 2列：每列占 12 格（50%宽度）
+- 3列：每列占 8 格（33.3%宽度）
+- 4列：每列占 6 格（25%宽度）
+
+### 响应式适配
+
+- **桌面端**（>1200px）：按配置的列数显示
+- **平板端**（768px-1200px）：3列及以上自动调整为2列
+- **移动端**（<768px）：自动调整为单列显示
+
+## 样式定制
+
+组件提供了丰富的 CSS 类名，可以通过自定义样式进行个性化定制：
+
+```scss
+.entity-detail-container {
+  // 容器样式
+  
+  .detail-header {
+    // 头部样式
+  }
+  
+  .detail-content {
+    // 内容区域样式
+    
+    .detail-column-card {
+      // 列卡片样式
+    }
+  }
+}
+```
+
+## 注意事项
+
+1. **xObjectDetailApi 参数必填**：必须提供有效的 `xObjectDetailApi` 对象，包含 `xObjectApiKey` 和 `objectId` 才能正常展示
+2. **权限要求**：确保当前用户有权限访问指定的实体对象
+3. **字段过滤**：组件会自动过滤以下划线开头的系统字段
+4. **性能优化**：大量字段时建议使用2-3列布局以保证用户体验
+5. **属性结构**：使用 `xObjectDetailApi` 对象结构，提供更清晰的数据配置方式
+
+## 开发说明
+
+### 目录结构
+
+```
+entity-detail/
+├── index.tsx       # 组件主文件
+├── model.ts        # 编辑器配置文件
+├── style.scss      # 样式文件
+└── README.md       # 组件文档
+```
+
+### 依赖包
+
+- react: ^16.9.0
+- antd: ^4.9.4
+- neo-open-api: ^1.0.2
+
+### 本地开发
+
+```bash
+# 预览组件
+npm run preview --cmpType=entity-detail
+
+# 构建组件
+npm run build
+```
+
+## 更新日志
+
+### v1.1.0 (2024-12-19)
+
+- **重大更新**：重构属性结构，使用 `xObjectDetailApi` 对象替代分离的 `xObjectApiKey` 和 `objectId` 属性
+- 优化组件属性配置，提供更清晰的数据结构
+- 更新编辑器配置，支持 `xObjectDetailApi` 类型的属性配置
+- 保持向后兼容性，现有功能完全保留
+
+### v1.0.0 (2024-09-30)
+
+- 初始版本发布
+- 支持基础的实体数据详情展示
+- 支持多列布局配置
+- 支持字段类型识别和格式化
+- 支持响应式布局

package/src/template/neo-custom-cmp-template/src/components/entity-detail/index.tsx

@@ -0,0 +1,325 @@
+import * as React from 'react';
+import {
+  Card,
+  Row,
+  Col,
+  Spin,
+  Empty,
+  Descriptions,
+  Button,
+  Tag,
+  Divider,
+  Typography,
+} from 'antd';
+import {
+  ReloadOutlined,
+  InfoCircleOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo OpenAPI SDK
+import './style.scss';
+
+const { Title, Text } = Typography;
+
+interface EntityDetailProps {
+  title?: string;
+  xObjectDetailApi?: {
+    xObjectApiKey: string;
+    objectId: string;
+  };
+  columnCount?: number;
+  showTitle?: boolean;
+  data?: any;
+}
+
+interface FieldDescription {
+  apiKey: string;
+  label: string;
+  type: string;
+  [key: string]: any;
+}
+
+interface EntityDetailState {
+  detailData: any;
+  fieldDescriptions: FieldDescription[];
+  loading: boolean;
+  error: string | null;
+}
+
+export default class EntityDetail extends React.PureComponent<
+  EntityDetailProps,
+  EntityDetailState
+> {
+  constructor(props: EntityDetailProps) {
+    super(props);
+
+    this.state = {
+      detailData: {},
+      fieldDescriptions: [],
+      loading: false,
+      error: null,
+    };
+
+    this.loadEntityDetail = this.loadEntityDetail.bind(this);
+    this.loadFieldDescriptions = this.loadFieldDescriptions.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  componentDidUpdate(prevProps: EntityDetailProps) {
+    const { xObjectDetailApi } = this.props;
+    if (
+      xObjectDetailApi?.xObjectApiKey !==
+        prevProps.xObjectDetailApi?.xObjectApiKey ||
+      xObjectDetailApi?.objectId !== prevProps.xObjectDetailApi?.objectId
+    ) {
+      this.loadData();
+    }
+  }
+
+  async loadData() {
+    const { xObjectDetailApi } = this.props;
+    if (!xObjectDetailApi?.xObjectApiKey || !xObjectDetailApi?.objectId) {
+      this.setState({
+        error: '缺少必要参数：实体类型或数据ID',
+        loading: false,
+      });
+      return;
+    }
+
+    await Promise.all([this.loadFieldDescriptions(), this.loadEntityDetail()]);
+  }
+
+  async loadFieldDescriptions() {
+    const { xObjectDetailApi } = this.props;
+    if (!xObjectDetailApi?.xObjectApiKey) return;
+
+    try {
+      const result = await xObject.getDesc(xObjectDetailApi.xObjectApiKey);
+      if (result?.status) {
+        const fields = result.data?.fields || [];
+        this.setState({ fieldDescriptions: fields });
+      }
+    } catch (error: any) {
+      console.error('获取字段描述失败:', error);
+    }
+  }
+
+  async loadEntityDetail() {
+    const xObjectDetailApi: any = this.props.xObjectDetailApi || {};
+    if (!xObjectDetailApi.xObjectApiKey || !xObjectDetailApi.objectId) return;
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const result = await xObject.get(
+        xObjectDetailApi.xObjectApiKey,
+        xObjectDetailApi.objectId,
+      );
+
+      if (result?.status) {
+        const data = result.data || {};
+        this.setState({
+          detailData: data,
+          loading: false,
+        });
+      } else {
+        this.setState({
+          error: result?.msg || '获取详情数据失败',
+          loading: false,
+        });
+      }
+    } catch (error: any) {
+      this.setState({
+        error: error.message || '获取详情数据失败',
+        loading: false,
+      });
+    }
+  }
+
+  getFieldLabel(apiKey: string): string {
+    const { fieldDescriptions } = this.state;
+    const field = fieldDescriptions.find((f) => f.apiKey === apiKey);
+    return field?.label || apiKey;
+  }
+
+  getFieldType(apiKey: string): string {
+    const { fieldDescriptions } = this.state;
+    const field = fieldDescriptions.find((f) => f.apiKey === apiKey);
+    return field?.type || 'text';
+  }
+
+  renderFieldValue(value: any, fieldType: string) {
+    if (value === null || value === undefined || value === '') {
+      return <Text type="secondary">-</Text>;
+    }
+
+    // 根据字段类型渲染不同的值
+    switch (fieldType) {
+      case 'boolean':
+        return value ? (
+          <Tag icon={<CheckCircleOutlined />} color="success">
+            是
+          </Tag>
+        ) : (
+          <Tag icon={<CloseCircleOutlined />} color="default">
+            否
+          </Tag>
+        );
+      case 'date':
+      case 'datetime':
+        return new Date(value).toLocaleString('zh-CN');
+      case 'number':
+      case 'currency':
+      case 'percent':
+        return typeof value === 'number'
+          ? value.toLocaleString('zh-CN')
+          : value;
+      case 'url':
+        return (
+          <a href={value} target="_blank" rel="noopener noreferrer">
+            {value}
+          </a>
+        );
+      case 'email':
+        return <a href={`mailto:${value}`}>{value}</a>;
+      case 'phone':
+        return <a href={`tel:${value}`}>{value}</a>;
+      default:
+        return String(value);
+    }
+  }
+
+  renderDetailContent() {
+    const { detailData } = this.state;
+    const { columnCount = 3 } = this.props;
+
+    if (!detailData || Object.keys(detailData).length === 0) {
+      return (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description="暂无详情数据"
+        />
+      );
+    }
+
+    // 过滤系统字段和空字段
+    const displayFields = Object.keys(detailData).filter(
+      (key) =>
+        // 可以根据需要自定义过滤规则
+        !key.startsWith('_') && detailData[key] !== undefined,
+    );
+
+    // 将字段分成多组，每组对应一列
+    const fieldsPerColumn = Math.ceil(displayFields.length / columnCount);
+    const columnGroups: string[][] = [];
+
+    for (let i = 0; i < columnCount; i++) {
+      const start = i * fieldsPerColumn;
+      const end = start + fieldsPerColumn;
+      columnGroups.push(displayFields.slice(start, end));
+    }
+
+    return (
+      <Row gutter={[24, 24]}>
+        {columnGroups.map((fields, colIndex) => (
+          <Col xs={24} sm={24} md={24 / columnCount} key={colIndex}>
+            <Card className="detail-column-card" bordered={false} size="small">
+              <Descriptions
+                column={1}
+                size="middle"
+                bordered
+                labelStyle={{
+                  fontWeight: 500,
+                  backgroundColor: '#fafafa',
+                  width: '35%',
+                }}
+                contentStyle={{
+                  backgroundColor: '#ffffff',
+                }}
+              >
+                {fields.map((fieldKey) => {
+                  const fieldType = this.getFieldType(fieldKey);
+                  const fieldLabel = this.getFieldLabel(fieldKey);
+                  const fieldValue = detailData[fieldKey];
+
+                  return (
+                    <Descriptions.Item label={fieldLabel} key={fieldKey}>
+                      {this.renderFieldValue(fieldValue, fieldType)}
+                    </Descriptions.Item>
+                  );
+                })}
+              </Descriptions>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    );
+  }
+
+  render() {
+    const { title, showTitle = true } = this.props;
+    const { loading, error } = this.state;
+    const curAmisData = this.props.data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    return (
+      <div className="entity-detail-container">
+        {showTitle && (
+          <div className="detail-header">
+            <div className="header-content">
+              <Title level={4} className="header-title">
+                <InfoCircleOutlined className="title-icon" />
+                {title || '实体数据详情'}
+                {systemInfo.tenantName ? (
+                  <Tag color="blue" style={{ marginLeft: 8 }}>
+                    {systemInfo.tenantName}
+                  </Tag>
+                ) : null}
+              </Title>
+              <Button
+                type="primary"
+                icon={<ReloadOutlined />}
+                onClick={this.loadEntityDetail}
+                loading={loading}
+                className="refresh-button"
+                size="small"
+              >
+                刷新
+              </Button>
+            </div>
+            <Divider style={{ margin: '12px 0' }} />
+          </div>
+        )}
+
+        <div className="detail-content">
+          <Spin spinning={loading} tip="加载详情数据中...">
+            {error ? (
+              <div className="error-container">
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <div>
+                      <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                        {error}
+                      </div>
+                      <Button type="primary" onClick={this.loadEntityDetail}>
+                        重新加载
+                      </Button>
+                    </div>
+                  }
+                />
+              </div>
+            ) : (
+              this.renderDetailContent()
+            )}
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+}