neo-cmp-cli 1.8.3 → 1.8.6

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

@@ -0,0 +1,370 @@
+.entity-form-container {
+  .form-header {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .form-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .form-content {
+    .ant-form {
+      .ant-form-item {
+        margin-bottom: 20px;
+
+        .ant-form-item-label {
+          padding-bottom: 6px;
+
+          label {
+            font-weight: 500;
+            color: #262626;
+            font-size: 14px;
+
+            &::before {
+              display: inline-block;
+              margin-right: 4px;
+              color: #ff4d4f;
+              font-size: 14px;
+              font-family: SimSun, sans-serif;
+              line-height: 1;
+            }
+          }
+        }
+
+        .ant-input,
+        .ant-select-selector,
+        .ant-input-number,
+        .ant-picker {
+          border-radius: 4px;
+          border: 1px solid #d9d9d9;
+          transition: all 0.3s;
+
+          &:hover {
+            border-color: #40a9ff;
+          }
+
+          &:focus,
+          &.ant-input-focused,
+          &.ant-select-focused .ant-select-selector,
+          &.ant-picker-focused {
+            border-color: #40a9ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+          }
+        }
+
+        .ant-input-number {
+          width: 100%;
+        }
+
+        .ant-input-textarea {
+          textarea {
+            resize: vertical;
+            min-height: 80px;
+            border-radius: 4px;
+          }
+        }
+
+        .ant-picker {
+          width: 100%;
+        }
+
+        .ant-select {
+          width: 100%;
+        }
+      }
+
+      // 错误提示样式
+      .ant-form-item-has-error {
+        .ant-input,
+        .ant-select-selector,
+        .ant-input-number,
+        .ant-picker {
+          border-color: #ff4d4f;
+
+          &:focus {
+            border-color: #ff4d4f;
+            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+          }
+        }
+      }
+    }
+
+    .submit-success-message {
+      margin: 16px 0;
+      padding: 12px 16px;
+      background-color: #f6ffed;
+      border: 1px solid #b7eb8f;
+      border-radius: 4px;
+      color: #52c41a;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      animation: fadeIn 0.3s ease-in;
+
+      .anticon {
+        margin-right: 8px;
+        font-size: 16px;
+      }
+    }
+
+    .form-actions {
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid #f0f0f0;
+      text-align: center;
+
+      .ant-space {
+        .ant-btn {
+          min-width: 100px;
+          height: 40px;
+          font-size: 15px;
+          border-radius: 4px;
+          font-weight: 500;
+          transition: all 0.3s;
+
+          &.ant-btn-primary {
+            background: #1890ff;
+            border-color: #1890ff;
+
+            &:hover {
+              background: #40a9ff;
+              border-color: #40a9ff;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+            }
+
+            &:active {
+              background: #096dd9;
+              border-color: #096dd9;
+              transform: translateY(0);
+            }
+
+            &:disabled {
+              background: #f5f5f5;
+              border-color: #d9d9d9;
+              color: rgba(0, 0, 0, 0.25);
+              transform: none;
+              box-shadow: none;
+            }
+          }
+
+          &:not(.ant-btn-primary) {
+            &:hover {
+              color: #40a9ff;
+              border-color: #40a9ff;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            &:active {
+              color: #096dd9;
+              border-color: #096dd9;
+              transform: translateY(0);
+            }
+          }
+        }
+      }
+    }
+
+    .ant-empty {
+      padding: 40px 0;
+
+      .ant-empty-description {
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  // 动画效果
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .form-header {
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+
+      .form-title {
+        font-size: 16px;
+      }
+    }
+
+    .form-content {
+      .ant-form {
+        .ant-form-item {
+          margin-bottom: 16px;
+
+          .ant-form-item-label {
+            label {
+              font-size: 13px;
+            }
+          }
+
+          .ant-input,
+          .ant-select-selector,
+          .ant-input-number,
+          .ant-picker {
+            font-size: 14px;
+          }
+        }
+      }
+
+      .form-actions {
+        margin-top: 24px;
+        padding-top: 16px;
+
+        .ant-space {
+          .ant-btn {
+            min-width: 80px;
+            height: 36px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    .form-header {
+      .form-title {
+        font-size: 15px;
+      }
+    }
+
+    .form-content {
+      .ant-form {
+        // 在小屏幕上强制单列显示
+        .ant-row {
+          .ant-col {
+            max-width: 100% !important;
+            flex: 0 0 100% !important;
+          }
+        }
+
+        .ant-form-item {
+          margin-bottom: 14px;
+
+          .ant-form-item-label {
+            label {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+
+      .form-actions {
+        .ant-space {
+          width: 100%;
+
+          .ant-space-item {
+            flex: 1;
+          }
+
+          .ant-btn {
+            width: 100%;
+            min-width: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 全局样式覆盖
+.ant-card {
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  .ant-card-body {
+    padding: 24px;
+  }
+}
+
+// Spin 加载样式
+.ant-spin {
+  .ant-spin-dot {
+    font-size: 20px;
+  }
+
+  .ant-spin-text {
+    color: #8c8c8c;
+    font-size: 14px;
+  }
+}
+
+// Select 下拉样式优化
+.ant-select-dropdown {
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .ant-select-item {
+    padding: 8px 12px;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &.ant-select-item-option-selected {
+      background-color: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+}
+
+// DatePicker 日期选择器样式优化
+.ant-picker-dropdown {
+  .ant-picker-panel-container {
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .ant-picker-cell-selected {
+    .ant-picker-cell-inner {
+      background-color: #1890ff;
+    }
+  }
+
+  .ant-picker-cell:hover:not(.ant-picker-cell-selected) {
+    .ant-picker-cell-inner {
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+// InputNumber 数字输入框样式优化
+.ant-input-number {
+  .ant-input-number-handler-wrap {
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    .ant-input-number-handler-wrap {
+      opacity: 1;
+    }
+  }
+
+  .ant-input-number-handler {
+    border-left: 1px solid #d9d9d9;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+}

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

@@ -0,0 +1,92 @@
+# XObject 数据表格组件
+基于 XObject 的数据表格组件，支持增删改查操作，表格列根据 `xObject.getDesc` 返回的 fields 动态生成。
+备注：使用 Neo Open API SDK（neo-open-api） 提供的方法实现数据对象的增删改查相关操作。
+
+## 功能特性
+
+- 📊 **动态表格列**：根据 XObject 字段描述自动生成表格列
+- ➕ **新增记录**：支持通过弹窗表单新增数据记录
+- ✏️ **编辑记录**：支持编辑现有数据记录
+- 🗑️ **删除记录**：支持删除数据记录，带确认提示
+- 🔄 **数据刷新**：支持手动刷新数据
+- 📄 **分页支持**：支持分页显示，可配置每页显示条数
+- 🎨 **响应式设计**：适配不同屏幕尺寸
+- ⚙️ **属性配置**：支持通过编辑器配置组件属性
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| title | string | '数据表格' | 表格标题 |
+| xObjectApiKey | string | '' | 数据对象的 API Key |
+| pageSize | number | 10 | 每页显示条数 |
+| showPagination | boolean | true | 是否显示分页 |
+| showAddButton | boolean | true | 是否显示新增按钮 |
+| showEditButton | boolean | true | 是否显示编辑按钮 |
+| showDeleteButton | boolean | true | 是否显示删除按钮 |
+
+## 使用方法
+
+### 1. 在编辑器中使用
+
+1. 从组件面板拖拽 "XObject 数据表格" 组件到页面
+2. 在右侧属性面板中选择要操作的数据对象
+3. 配置其他属性（可选）
+4. 保存并预览
+
+### 2. 代码中使用
+
+```tsx
+import EntityTable from './components/entity-table';
+
+// 使用组件
+<EntityTable
+  title="联系人列表"
+  xObjectApiKey="customContact__c"
+  pageSize={20}
+  showPagination={true}
+  showAddButton={true}
+  showEditButton={true}
+  showDeleteButton={true}
+/>
+```
+
+## 技术实现
+
+### 核心依赖
+
+- **Ant Design**：UI 组件库
+- **React**：前端框架
+- **TypeScript**：类型支持
+
+### 数据流程
+
+1. **初始化**：组件挂载时获取实体列表和字段描述
+2. **列生成**：根据字段描述动态生成表格列
+3. **数据加载**：使用 `xObject.query` 获取数据列表
+4. **操作处理**：通过对应的 API 方法处理增删改操作
+
+## 样式定制
+
+组件提供了完整的 SCSS 样式文件，支持以下定制：
+
+- 表格样式（边框、悬停效果等）
+- 按钮样式（颜色、大小、间距等）
+- 弹窗样式（表单布局、输入框样式等）
+- 响应式设计（移动端适配）
+
+## 注意事项
+
+1. **权限要求**：确保用户有对应 XObject 的读写权限
+2. **字段类型**：目前支持 text、textarea、select 等基础字段类型
+3. **必填字段**：表单会根据字段的 required 属性进行验证
+4. **错误处理**：组件内置了完善的错误处理和用户提示
+
+## 扩展开发
+
+如需扩展功能，可以：
+
+1. **添加字段类型支持**：在 `renderForm()` 方法中添加新的字段类型
+2. **自定义操作列**：修改 `generateColumns()` 方法中的操作列配置
+3. **添加批量操作**：扩展表格功能支持批量删除等操作
+4. **自定义样式**：修改 `style.scss` 文件定制组件外观