neo-cmp-cli 1.2.12 → 1.2.15

package/src/template/neo-custom-cmp-template/src/components/entity-detail/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/src/template/neo-custom-cmp-template/src/components/object-card-list/README.md

@@ -0,0 +1,61 @@
+# ObjectCardList 数据卡片列表组件
+数据卡片列表组件用于展示数据信息，以卡片形式展示每个数据的姓名和手机号。组件使用 Ant Design 的 Card 组件，具有良好的视觉效果和交互体验。
+
+## 功能特性
+
+- 📱 响应式设计，支持多种屏幕尺寸
+- 🎨 美观的卡片布局，支持悬停效果
+- 🔄 自动加载数据，支持错误重试
+- 📊 使用 neo-open-api 获取 customContact__c 数据
+- 🎯 展示数据姓名和手机号信息
+- 💫 加载状态和空状态处理
+
+## 组件属性
+
+| 属性名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| title | string | '数据卡片列表' | 组件标题 |
+| data | any | - | 组件数据，包含用户信息和系统信息 |
+
+## 数据源
+
+组件通过 `neo-open-api` 工具函数获取数据：
+
+- **数据表**: `customContact__c`
+- **字段**: `id`, `name`, `phone__c`
+
+## 样式特性
+
+- 使用 Flexbox 布局，支持响应式设计
+- 卡片悬停效果，提升用户体验
+- 渐变色头像，美观大方
+- 支持移动端适配
+
+## 使用示例
+
+```tsx
+import ObjectCardList from './components/object-card-list';
+
+// 在页面中使用
+<ObjectCardList 
+  title="我的数据" 
+  data={amisData}
+/>
+```
+
+## 技术栈
+
+- React 16.9+
+- TypeScript
+- Ant Design 4.9+
+- SCSS
+
+## 文件结构
+
+```
+object-card-list/
+├── index.tsx          # 主组件文件
+├── model.ts           # 组件配置和编辑器属性定义
+├── style.scss         # 组件样式文件
+└── README.md          # 组件说明文档
+```

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

@@ -0,0 +1,201 @@
+import * as React from 'react';
+import { Card, Row, Col, Spin, Empty, Avatar, Button } from 'antd';
+import { UserOutlined, PhoneOutlined, ReloadOutlined } from '@ant-design/icons';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+import './style.scss';
+
+interface ObjectCardListProps {
+  title: string;
+  xObjectDataApi?: any;
+  data?: any;
+}
+
+interface ContactData {
+  id: string;
+  name: string;
+  phone__c: string;
+  [key: string]: any;
+}
+
+interface ObjectCardListState {
+  objectDataList: ContactData[];
+  totalSize: number;
+  loading: boolean;
+  error: string | null;
+}
+
+export default class ObjectCardList extends React.PureComponent<
+  ObjectCardListProps,
+  ObjectCardListState
+> {
+  constructor(props: ObjectCardListProps) {
+    super(props);
+
+    this.state = {
+      objectDataList: [],
+      totalSize: 0,
+      loading: false,
+      error: null,
+    };
+
+    this.loadObjectData = this.loadObjectData.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadObjectData();
+  }
+
+  componentDidUpdate(prevProps: ObjectCardListProps) {
+    const { xObjectDataApi } = this.props;
+    if (
+      xObjectDataApi?.xObjectApiKey !==
+        prevProps.xObjectDataApi?.xObjectApiKey ||
+      xObjectDataApi?.fields !== prevProps.xObjectDataApi?.fields
+    ) {
+      this.loadObjectData();
+    }
+  }
+
+  async loadObjectData() {
+    this.setState({ loading: true, error: null });
+    const { xObjectDataApi } = this.props;
+
+    try {
+      // 使用 Neo Open API 获取 customContact__c 数据
+      if (xObjectDataApi) {
+        const result = await xObject.query(xObjectDataApi);
+
+        if (result?.status) {
+          const records = result.data || [];
+          const totalSize = result.totalSize || 0;
+          this.setState({
+            objectDataList: records,
+            totalSize,
+            loading: false,
+          });
+        } else {
+          this.setState({
+            error: result?.msg || '获取数据数据失败',
+            loading: false,
+          });
+        }
+      }
+    } catch (error: any) {
+      this.setState({
+        error: error.message || '获取数据数据失败',
+        loading: false,
+      });
+    }
+  }
+
+  renderObjectCard(object: ContactData, index: number) {
+    return (
+      <Col xs={24} sm={12} md={8} lg={6} xl={6} key={object.id || index}>
+        <Card
+          className="object-card"
+          hoverable
+          size="small"
+          style={{ marginBottom: 16 }}
+        >
+          <div className="object-card-content">
+            <div className="object-avatar">
+              <Avatar
+                size={48}
+                icon={<UserOutlined />}
+                className="avatar-icon"
+              />
+            </div>
+            <div className="object-info">
+              <div className="object-name">
+                <UserOutlined className="info-icon" />
+                <span className="name-text">
+                  {object.name ||
+                    object.accountName ||
+                    object.productName ||
+                    '未知姓名'}
+                </span>
+              </div>
+              <div className="object-phone">
+                <PhoneOutlined className="info-icon" />
+                <span className="phone-text">
+                  {object.phone__c ||
+                    object.phone ||
+                    object.phoneNumber ||
+                    '未填写手机号'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+    );
+  }
+
+  render() {
+    const { title } = this.props;
+    const { objectDataList, loading, error } = this.state;
+    const curAmisData = this.props.data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    console.log('this.props:', this.props);
+
+    return (
+      <div className="object-card-list-container">
+        <div className="card-list-header">
+          <div className="header-content">
+            <h3 className="header-title">
+              {title || '数据卡片列表'}
+              {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+            </h3>
+            <Button
+              type="primary"
+              icon={<ReloadOutlined />}
+              onClick={this.loadObjectData}
+              loading={loading}
+              className="refresh-button"
+              size="small"
+            >
+              刷新
+            </Button>
+          </div>
+        </div>
+
+        <div className="card-list-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
+                        className="retry-button"
+                        onClick={this.loadObjectData}
+                      >
+                        重新加载
+                      </button>
+                    </div>
+                  }
+                />
+              </div>
+            ) : objectDataList.length === 0 ? (
+              <Empty
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                description="暂无数据数据"
+              />
+            ) : (
+              <Row gutter={[16, 16]}>
+                {objectDataList.map((object, index) =>
+                  this.renderObjectCard(object, index),
+                )}
+              </Row>
+            )}
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+}

package/src/template/neo-custom-cmp-template/src/components/object-card-list/model.ts

@@ -0,0 +1,66 @@
+/**
+ * @file 数据卡片列表组件对接编辑器的描述文件
+ */
+export class ObjectCardListModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'object-card-list';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = '数据卡片列表';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = '展示数据信息的卡片列表组件，支持姓名和手机号展示';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/data-list.svg';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title: '数据卡片列表',
+    label: '数据卡片列表',
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['id', 'name', 'phone__c'],
+    },
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: '数据卡片列表',
+    title: '数据卡片列表',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'textarea',
+      name: 'title',
+      label: '组件标题',
+      value: '数据卡片列表',
+      placeholder: '请输入组件标题',
+    },
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      placeholder: '请选择实体数据源',
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default ObjectCardListModel;