neo-cmp-cli 1.8.3 → 1.8.6

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

@@ -0,0 +1,260 @@
+.contact-card-list-container {
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 6px 12px;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .card-list-header {
+    flex-shrink: 0;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+    padding-bottom: 12px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .header-title {
+      margin: 0;
+      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;
+    }
+
+    .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;
+      }
+    }
+  }
+
+  .card-list-content {
+    flex: 1;
+    overflow-y: auto;
+
+    .error-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 300px;
+      padding: 20px;
+
+      .retry-button {
+        padding: 8px 16px;
+        background-color: #1890ff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: background-color 0.3s;
+
+        &:hover {
+          background-color: #40a9ff;
+        }
+
+        &:active {
+          background-color: #096dd9;
+        }
+      }
+    }
+  }
+
+  .contact-card {
+    height: 100%;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+    border: 1px solid #f0f0f0;
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      transform: translateY(-2px);
+      border-color: #d9d9d9;
+    }
+
+    .ant-card-body {
+      padding: 16px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .contact-card-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      gap: 12px;
+
+      .contact-avatar {
+        flex-shrink: 0;
+
+        .avatar-icon {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2px solid #fff;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+      }
+
+      .contact-info {
+        flex: 1;
+        min-width: 0;
+
+        .contact-name,
+        .contact-phone {
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+          gap: 6px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .info-icon {
+            font-size: 12px;
+            color: #8c8c8c;
+            flex-shrink: 0;
+          }
+
+          .name-text,
+          .phone-text {
+            font-size: 14px;
+            line-height: 1.4;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .name-text {
+            color: #262626;
+            font-weight: 500;
+          }
+
+          .phone-text {
+            color: #595959;
+            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+              Courier, monospace;
+          }
+        }
+
+        .contact-name {
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    margin: 4px 8px;
+    padding: 8px;
+
+    .card-list-header {
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+
+      .header-content {
+        gap: 12px;
+      }
+
+      .header-title {
+        font-size: 16px;
+      }
+
+      .refresh-button {
+        height: 28px;
+        padding: 2px 8px;
+        font-size: 12px;
+
+        .anticon {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .contact-card {
+      .ant-card-body {
+        padding: 12px;
+      }
+
+      .contact-card-content {
+        gap: 8px;
+
+        .contact-avatar {
+          .avatar-icon {
+            width: 40px !important;
+            height: 40px !important;
+            line-height: 40px !important;
+          }
+        }
+
+        .contact-info {
+          .contact-name,
+          .contact-phone {
+            .name-text,
+            .phone-text {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 480px) {
+    .contact-card {
+      .contact-card-content {
+        flex-direction: column;
+        text-align: center;
+        gap: 8px;
+
+        .contact-info {
+          .contact-name,
+          .contact-phone {
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 全局样式覆盖
+.ant-spin-container {
+  min-height: 200px;
+}
+
+.ant-empty {
+  padding: 40px 20px;
+}

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

@@ -0,0 +1,94 @@
+# 联系人表单组件
+
+基于 Ant Design 的联系人表单组件，支持姓名、所有人、业务类型、所属部门、手机号等字段的输入和提交。
+
+## 功能特性
+
+- ✅ 基于 Ant Design 4.x 组件库
+- ✅ 表单字段验证（姓名和手机号为必填项）
+- ✅ 手机号格式验证
+- ✅ 数据提交到 Neo 平台 API
+- ✅ 加载状态显示
+- ✅ 成功/错误消息提示
+- ✅ 响应式设计
+- ✅ 使用 React state 管理表单数据
+
+## 表单字段
+
+| 字段名 | 类型 | 必填 | 说明 |
+|--------|------|------|------|
+| 姓名 | text | ✅ | 联系人姓名 |
+| 所有人 | number | ❌ | 联系人用户ID (userId) |
+| 业务类型 | select | ❌ | 销售/市场/客服/技术/其他 (entityType) |
+| 所属部门 | number | ❌ | 联系人所属部门ID (dimDepart) |
+| 手机号 | number | ✅ | 联系人手机号（格式验证）(phone__c) |
+
+## API 接口
+
+组件会将表单数据提交到以下接口：
+
+```
+POST /rest/data/v2.0/xobjects/customContact__c
+```
+
+### 请求数据格式
+
+```json
+{
+  "name": "张三",
+  "userId": 12345,
+  "entityType": 3998003734470119,
+  "dimDepart": 67890,
+  "phone__c": "13800138000"
+}
+```
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| title | string | '创建联系人' | 表单标题 |
+| data | object | {} | Neo 平台数据（包含用户信息和系统信息） |
+
+## 使用示例
+
+```tsx
+import ContactForm from './components/contact-form';
+
+// 在页面中使用
+<ContactForm 
+  title="创建新联系人"
+  data={amisData}
+/>
+```
+
+## 技术栈
+
+- React 16.9.0
+- TypeScript
+- Ant Design 4.x
+- SCSS
+
+## 样式定制
+
+组件基于 Ant Design 设计规范，支持通过 SCSS 进行样式定制：
+
+```scss
+.contact-form-container {
+  .contact-form-card {
+    // 卡片样式定制
+  }
+  
+  .contact-form {
+    // 表单样式定制
+  }
+}
+```
+
+## 注意事项
+
+1. 确保 Neo 平台已正确配置 `customContact__c` 对象
+2. 组件依赖 `antd` 和 `axios` 进行 UI 渲染和 API 调用
+3. 需要确保用户有创建联系人的权限
+4. 手机号格式验证仅支持中国大陆手机号（1开头的11位数字）
+5. 组件使用 React state 管理表单数据，无需手动处理 ref

package/template/develop/neo-custom-cmp-template/src/components/contactForm/index.tsx

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import { Form, Input, Select, Button, message, Card } from 'antd';
+import { getEntityTypeList, createXObject } from '../../utils/xobjects';
+const { Option } = Select;
+
+import './style.scss';
+
+interface ContactFormProps {
+  title: string;
+  data?: any;
+}
+
+interface ContactFormState {
+  formData: {
+    name: string;
+    entityType?: number;
+    phone__c: string;
+  };
+  entityTypeList: any[];
+  loading: boolean;
+}
+
+export default class ContactForm extends React.PureComponent<
+  ContactFormProps,
+  ContactFormState
+> {
+  private formRef: any;
+
+  constructor(props: ContactFormProps) {
+    super(props);
+
+    this.state = {
+      formData: {
+        name: 'wibetter',
+        phone__c: '15900000003',
+      },
+      entityTypeList: [],
+      loading: false,
+    };
+
+    // 获取业务类型列表
+    getEntityTypeList('customContact__c').then((res: any) => {
+      if (res && res.code === '200') {
+        const result = res.data || {};
+        this.setState({
+          entityTypeList: result.records || [],
+        });
+      }
+    });
+
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.resetForm = this.resetForm.bind(this);
+  }
+
+  handleInputChange(
+    field: keyof ContactFormState['formData'],
+    value: string | number,
+  ) {
+    this.setState((prevState) => ({
+      formData: {
+        ...prevState.formData,
+        [field]: value,
+      },
+    }));
+  }
+
+  validateForm() {
+    const { formData } = this.state;
+
+    if (!formData.name.trim()) {
+      message.error('请输入联系人姓名');
+      return false;
+    }
+
+    if (!formData.phone__c.trim()) {
+      message.error('请输入手机号');
+      return false;
+    }
+
+    // 手机号格式验证
+    const phoneRegex = /^1[3-9]\d{9}$/;
+    if (!phoneRegex.test(formData.phone__c)) {
+      message.error('请输入正确的手机号格式');
+      return false;
+    }
+
+    return true;
+  }
+
+  async handleSubmit() {
+    if (!this.validateForm()) {
+      return;
+    }
+    this.setState({ loading: true });
+
+    try {
+      const { formData } = this.state;
+      // 获取当前用户信息
+      const curAmisData = this.props.data || {};
+      const userInfo = curAmisData.__NeoCurrentUser;
+
+      // 准备提交的数据
+      let submitData = {
+        name: formData.name.trim(),
+        phone__c: formData.phone__c.trim(),
+        entityType: formData.entityType
+      };
+
+      if (userInfo && userInfo.id) {
+        submitData = Object.assign(submitData, {
+          userId: userInfo.id,
+          dimDepart: userInfo.departId,
+        });
+      }
+
+      console.log('提交联系人数据:', submitData);
+
+      // 调用 API 提交数据
+      const response: any = await createXObject('customContact__c', {
+        method: 'POST',
+        data: submitData,
+      });
+
+      if (response && response.code === '200') {
+        console.log('联系人创建成功:', response.data);
+
+        message.success('联系人创建成功！');
+        // 成功后重置表单
+        setTimeout(() => {
+          this.resetForm();
+        }, 1000);
+      } else {
+        message.error('创建联系人失败:', response.message);
+      }
+    } catch (error: any) {
+      message.error('创建联系人失败:', error);
+    } finally {
+      this.setState({ loading: false });
+    }
+  }
+
+  resetForm() {
+    this.setState({
+      formData: {
+        name: '',
+        phone__c: '',
+      },
+    });
+
+    // 重置 Ant Design 表单
+    if (this.formRef) {
+      this.formRef.resetFields();
+    }
+  }
+
+  render() {
+    const { title } = this.props;
+    const { formData, loading, entityTypeList } = this.state;
+    const curAmisData = this.props.data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    return (
+      <div className="contact-form-container">
+        <Card
+          title={title || '创建联系人'}
+          extra={systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+          className="contact-form-card"
+        >
+          <Form
+            ref={(ref) => {
+              this.formRef = ref;
+            }}
+            layout="vertical"
+            className="contact-form"
+            initialValues={formData}
+          >
+            <Form.Item
+              label="姓名"
+              required
+              rules={[{ required: true, message: '请输入联系人姓名' }]}
+            >
+              <Input
+                value={formData.name}
+                onChange={(e) => this.handleInputChange('name', e.target.value)}
+                placeholder="请输入联系人姓名"
+                disabled={loading}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="手机号"
+              required
+              rules={[
+                { required: true, message: '请输入手机号' },
+                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' },
+              ]}
+            >
+              <Input
+                value={formData.phone__c}
+                onChange={(e) =>
+                  this.handleInputChange('phone__c', e.target.value)
+                }
+                placeholder="请输入手机号"
+                disabled={loading}
+              />
+            </Form.Item>
+
+            <Form.Item label="业务类型">
+              <Select
+                value={formData.entityType}
+                onChange={(value) =>
+                  this.handleInputChange('entityType', value)
+                }
+                placeholder="请选择业务类型"
+                disabled={loading}
+              >
+                {entityTypeList.map((item) => (
+                  <Option
+                    key={item.apiKey}
+                    value={item.id}
+                    disabled={!item.active}
+                  >
+                    {item.label}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+
+            <Form.Item className="form-actions">
+              <Button
+                onClick={this.resetForm}
+                disabled={loading}
+                style={{ marginRight: 8 }}
+              >
+                重置
+              </Button>
+              <Button
+                type="primary"
+                onClick={this.handleSubmit}
+                loading={loading}
+              >
+                保存联系人
+              </Button>
+            </Form.Item>
+          </Form>
+        </Card>
+      </div>
+    );
+  }
+}

package/template/develop/neo-custom-cmp-template/src/components/contactForm/model.ts

@@ -0,0 +1,56 @@
+/**
+ * @file 自定义组件对接编辑器的描述文件
+ */
+export class ContactFormModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'contact-form';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '联系人表单';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string =
+    '基于 Ant Design 的联系人表单组件，支持姓名、所有人、业务类型、所属部门、手机号等字段';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  // tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/contact-form.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title: '创建联系人',
+    label: '联系人表单',
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '联系人表单',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'textarea',
+      name: 'title',
+      label: '表单标题',
+      value: '创建联系人',
+      placeholder: '请输入表单标题',
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default ContactFormModel;