neo-cmp-cli 1.8.3 → 1.8.6

package/template/neo-custom-cmp-template/src/components/entityDetail/style.scss

@@ -0,0 +1,292 @@
+.entity-detail-container {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 6px 12px;
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .detail-header {
+    flex-shrink: 0;
+    margin-bottom: 16px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .header-title {
+      margin: 0 !important;
+      font-family: PingFangSC-Medium, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.4;
+      color: #262626;
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .title-icon {
+        color: #1890ff;
+        font-size: 20px;
+      }
+    }
+
+    .refresh-button {
+      flex-shrink: 0;
+      border-radius: 6px;
+      font-size: 13px;
+      height: 32px;
+      padding: 4px 12px;
+      box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
+        transform: translateY(-1px);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+
+      .anticon {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .detail-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .error-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 300px;
+      padding: 20px;
+    }
+
+    .detail-column-card {
+      height: 100%;
+      background: #fafafa;
+      border-radius: 8px;
+
+      .ant-card-body {
+        padding: 0;
+      }
+
+      .ant-descriptions {
+        background: transparent;
+
+        &.ant-descriptions-bordered {
+          .ant-descriptions-item-label {
+            font-weight: 500;
+            background-color: #f5f5f5;
+            color: #262626;
+            font-size: 14px;
+            padding: 12px 16px;
+            border-right: 1px solid #e8e8e8;
+          }
+
+          .ant-descriptions-item-content {
+            background-color: #ffffff;
+            color: #595959;
+            font-size: 14px;
+            padding: 12px 16px;
+            word-break: break-word;
+          }
+
+          .ant-descriptions-row {
+            border-bottom: 1px solid #e8e8e8;
+
+            &:last-child {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 空状态样式
+  .ant-empty {
+    padding: 60px 20px;
+
+    .ant-empty-description {
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+  }
+
+  // Tag 样式优化
+  .ant-tag {
+    margin: 0;
+    border-radius: 4px;
+    font-size: 13px;
+    padding: 2px 8px;
+    line-height: 20px;
+  }
+
+  // 链接样式
+  a {
+    color: #1890ff;
+    text-decoration: none;
+    transition: color 0.3s;
+
+    &:hover {
+      color: #40a9ff;
+      text-decoration: underline;
+    }
+
+    &:active {
+      color: #096dd9;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 1200px) {
+    .detail-content {
+      .ant-col-md-8 {
+        max-width: 50%;
+        flex: 0 0 50%;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin: 4px 8px;
+    padding: 12px;
+
+    .detail-header {
+      margin-bottom: 12px;
+
+      .header-content {
+        gap: 12px;
+      }
+
+      .header-title {
+        font-size: 16px;
+
+        .title-icon {
+          font-size: 18px;
+        }
+      }
+
+      .refresh-button {
+        height: 28px;
+        padding: 2px 8px;
+        font-size: 12px;
+
+        .anticon {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .detail-content {
+      .ant-col-md-8,
+      .ant-col-md-12 {
+        max-width: 100%;
+        flex: 0 0 100%;
+      }
+
+      .detail-column-card {
+        margin-bottom: 16px;
+
+        .ant-descriptions {
+          &.ant-descriptions-bordered {
+            .ant-descriptions-item-label,
+            .ant-descriptions-item-content {
+              font-size: 13px;
+              padding: 10px 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    margin: 2px 4px;
+    padding: 8px;
+
+    .detail-header {
+      .header-content {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+      }
+
+      .header-title {
+        font-size: 15px;
+      }
+
+      .refresh-button {
+        width: 100%;
+      }
+    }
+
+    .detail-content {
+      .detail-column-card {
+        .ant-descriptions {
+          &.ant-descriptions-bordered {
+            .ant-descriptions-item-label,
+            .ant-descriptions-item-content {
+              font-size: 12px;
+              padding: 8px 10px;
+            }
+
+            .ant-descriptions-item-label {
+              width: 30%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 加载状态样式
+.ant-spin-container {
+  min-height: 200px;
+}
+
+.ant-spin-nested-loading {
+  > div > .ant-spin {
+    max-height: none;
+  }
+}
+
+// 自定义滚动条样式
+.entity-detail-container .detail-content {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #bfbfbf;
+    border-radius: 3px;
+    transition: background 0.3s;
+
+    &:hover {
+      background: #8c8c8c;
+    }
+  }
+}

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

@@ -0,0 +1,176 @@
+# Object Form 对象表单组件
+
+基于 XObject 的对象表单组件，专门用于新增对象数据，支持动态字段渲染和多种字段类型。
+备注：使用 Neo Open API SDK（neo-open-api）提供的方法实现数据对象的新增操作。
+
+## 功能特性
+
+- 📝 **动态表单渲染**：根据 XObject 字段描述自动生成表单项
+- ➕ **数据新增**：支持向 Neo 平台新增数据记录
+- 🎨 **多种字段类型**：支持文本、数字、日期、下拉选择等多种字段类型
+- 📐 **响应式布局**：支持单列和双列布局，适配不同屏幕尺寸
+- ✅ **表单验证**：自动根据字段配置进行必填验证
+- 🔄 **表单重置**：支持快速重置表单内容
+- 🎯 **成功提示**：提交成功后显示友好的提示信息
+- ⚙️ **属性配置**：支持通过编辑器配置组件属性
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| formTitle | string | '新增数据' | 表单标题 |
+| xObjectDataApi | object | - | 实体数据源配置，包含 xObjectApiKey 和 fields |
+| xObjectDataApi.xObjectApiKey | string | '' | 数据对象的 API Key |
+| xObjectDataApi.fields | string[] | [] | 要显示的字段列表（可选，不传则显示所有字段） |
+| columnCount | 1 \| 2 | 1 | 表单列数（1列或2列） |
+| showResetButton | boolean | true | 是否显示重置按钮 |
+| onSuccess | function | - | 提交成功后的回调函数 |
+
+## 使用方法
+
+### 1. 在编辑器中使用
+
+1. 从组件面板拖拽 "对象表单" 组件到页面
+2. 在右侧属性面板中选择要操作的数据对象
+3. 选择要在表单中显示的字段
+4. 配置表单标题、列数等属性
+5. 保存并预览
+
+### 2. 代码中使用
+
+```tsx
+import EntityForm from './components/entity-form';
+
+// 基础使用
+<EntityForm
+  formTitle="新增联系人"
+  xObjectDataApi={{
+    xObjectApiKey: 'customContact__c',
+    fields: ['name', 'phone__c', 'email__c'],
+  }}
+  columnCount={2}
+  showResetButton={true}
+  onSuccess={(data) => {
+    console.log('提交成功:', data);
+  }}
+/>
+```
+
+## 支持的字段类型
+
+组件支持以下字段类型，并自动渲染对应的输入组件：
+
+| 字段类型 | 输入组件 | 说明 |
+|---------|---------|------|
+| text | Input | 单行文本输入框 |
+| textarea | TextArea | 多行文本输入框 |
+| int / float | InputNumber | 数字输入框 |
+| email | Input (email) | 邮箱输入框 |
+| phone | Input (tel) | 电话号码输入框 |
+| url | Input (url) | URL 输入框 |
+| date | DatePicker | 日期选择器 |
+| datetime | DatePicker | 日期时间选择器 |
+| time | DatePicker | 时间选择器 |
+| picklist | Select | 单选下拉框 |
+| multipicklist | Select (multiple) | 多选下拉框 |
+| entityType | Select | 业务类型选择器 |
+
+## 技术实现
+
+### 核心依赖
+
+- **Ant Design**：UI 组件库
+- **React**：前端框架
+- **TypeScript**：类型支持
+- **Neo Open API**：数据操作 SDK
+
+### 数据流程
+
+1. **初始化**：组件挂载时获取字段描述和业务类型列表
+2. **表单生成**：根据字段描述动态生成表单项
+3. **数据验证**：提交前进行必填字段验证
+4. **数据提交**：使用 `xObject.create` 创建新记录
+5. **结果反馈**：显示成功或失败提示
+
+### 表单布局
+
+组件支持两种布局模式：
+
+- **单列布局**：适合字段较多或需要宽输入框的场景
+- **双列布局**：适合字段较少或需要紧凑布局的场景
+
+## 样式定制
+
+组件提供了完整的 SCSS 样式文件，支持以下定制：
+
+- 表单样式（标签、输入框、间距等）
+- 按钮样式（颜色、大小、位置等）
+- 成功提示样式（动画、颜色等）
+- 响应式设计（移动端适配）
+
+## 注意事项
+
+1. **权限要求**：确保用户有对应 XObject 的写入权限
+2. **必填字段**：表单会根据字段的 required 属性进行验证
+3. **日期格式**：日期类型字段会自动转换为时间戳格式提交
+4. **错误处理**：组件内置了完善的错误处理和用户提示
+5. **字段过滤**：如果指定了 fields 参数，只会显示指定的字段
+
+## 扩展开发
+
+如需扩展功能，可以：
+
+1. **添加字段类型支持**：在 `renderForm()` 方法中添加新的字段类型
+2. **自定义验证规则**：在表单项的 rules 中添加自定义验证
+3. **添加提交前处理**：在 `handleSubmit()` 方法中添加数据预处理逻辑
+4. **自定义样式**：修改 `style.scss` 文件定制组件外观
+5. **添加回调事件**：扩展组件 props 支持更多回调事件
+
+## 示例场景
+
+### 场景一：客户信息录入
+
+```tsx
+<EntityForm
+  formTitle="新增客户"
+  xObjectDataApi={{
+    xObjectApiKey: 'account',
+    fields: ['name', 'industry', 'phone', 'email', 'website'],
+  }}
+  columnCount={2}
+  onSuccess={(data) => {
+    message.success('客户创建成功');
+    // 跳转到客户详情页
+  }}
+/>
+```
+
+### 场景二：联系人快速录入
+
+```tsx
+<EntityForm
+  formTitle="新增联系人"
+  xObjectDataApi={{
+    xObjectApiKey: 'customContact__c',
+    fields: ['name', 'phone__c', 'email__c'],
+  }}
+  columnCount={1}
+  showResetButton={true}
+/>
+```
+
+### 场景三：自定义对象数据录入
+
+```tsx
+<EntityForm
+  formTitle="新增订单"
+  xObjectDataApi={{
+    xObjectApiKey: 'customOrder__c',
+  }}
+  columnCount={2}
+  onSuccess={(data) => {
+    console.log('订单创建成功:', data);
+  }}
+/>
+```
+