neo-cmp-cli 1.13.16 → 1.13.17

package/template/neo-pipeline-cmps/src/components/simpleTable__c/model.ts

@@ -0,0 +1,124 @@
+/**
+ * @file XObject 表格组件对接编辑器的描述文件（简化版）
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ * @author Neo Custom Widget CLI
+ * @version 1.0.0
+ */
+export class SimpleTableModel {
+  /**
+   * 组件类型标识
+   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
+   * 注意：此字段在构建时会被自动替换，不需要手动设置
+   */
+  // cmpType: string = 'simpleTable';
+
+  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
+  label: string = '商机列表';
+
+  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
+  description: string =
+    '基于 XObject 的数据表格组件，仅支持数据展示，不支持增删改查操作';
+
+  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示  */
+  // tags: string[] = ['自定义组件'];
+
+  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/table.svg';
+
+  /**
+   * 用于设置组件支持的页面类型
+   *
+   * 当前 NeoCRM 平台存在的页面类型：
+   * all:	1	全页面
+   * entityFormPage:	4	实体表单页
+   * customPage:	6	自定义页面
+   */
+  targetPage: string[] = ['all'];
+
+  /**
+   * 用于设置组件支持的终端类型
+   *
+   * 当前 NeoCRM 平台存在的终端类型：
+   * web:	网页端
+   * mobile: 移动端
+   */
+  targetDevice: string = 'web';
+
+  /** 初次插入页面的默认属性数据 */
+  defaultComProps = {
+    title: 'Opportunity List',
+    activeStage: 'Prospecting',
+    description: 'Filtered by Close Date, Opportunity Owner, Business Type',
+  };
+
+  // 当前组件支持的函数列表（其他组件可触发当前组件的函数）
+  functions = [
+    {
+      apiKey: 'loadData',
+      label: '刷新表格',
+      helpTextKey: '刷新当前表格数据',
+    },
+    {
+      apiKey: 'setFilter',
+      label: '设置过滤条件',
+      helpTextKey:
+        '设置与图表一致的 filter（closeDate / ownerId / entityType），并重新查询表格',
+      funcInParams: [
+        {
+          apiKey: 'filter',
+          label: '过滤条件数据',
+          type: 'Object',
+          required: false,
+        },
+      ],
+    },
+    {
+      apiKey: 'updateActiveStage',
+      label: '更新当前激活阶段',
+      helpTextKey: '设置当前激活的销售阶段',
+      funcInParams: [
+        {
+          apiKey: 'activeStage',
+          label: '当前激活阶段',
+          type: 'String',
+          required: false,
+        },
+      ],
+    },
+  ];
+
+  /**
+   * 组件属性配置模式
+   * 支持静态配置：propsSchema，优先级比 propsSchemaCreator 低
+   * 定义组件在编辑器中可配置的属性
+   */
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'title',
+      label: '表格标题',
+      placeholder: '请输入表格标题',
+    },
+    {
+      type: 'panelInput',
+      name: 'description',
+      label: '表格说明',
+      placeholder: '显示在标题下方的说明文字',
+    },
+    /*
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      value: {
+        xObjectApiKey: 'customContact__c',
+        fields: ['name', 'phone__c'],
+      },
+      placeholder: '请选择实体数据源',
+      custom: true,
+    },
+    */
+  ];
+}
+
+export default SimpleTableModel;

package/template/neo-pipeline-cmps/src/components/simpleTable__c/style.scss

@@ -0,0 +1,193 @@
+/** 表头 AI 图标：用法同 openChatPageBtn 的 openChatPageBtn-icon（背景图） */
+.simpleTable-th-title-with-ai-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.simpleTable-th-ai-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  background-image: url('../../assets/img/aiLogo.png');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+.simpleTable__c {
+  background: #fff;
+  border-radius: 8px;
+
+  .table-wrapper {
+    // border: 1px solid #ddd;
+    padding: 16px 20px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .panel-header {
+    padding: 12px 0 6px 0;
+    background: #fff;
+    border-bottom: 1px solid #ddd;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .panel-header-text {
+      flex: 1;
+      min-width: 0;
+    }
+
+    h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #262626;
+    }
+
+    .panel-header-description {
+      margin: 6px 0 0;
+      font-size: 12px;
+      color: #888;
+      line-height: 1.5;
+    }
+
+    .panel-header-summary {
+      flex-shrink: 0;
+      margin-left: 12px;
+      padding-top: 2px;
+      font-size: 13px;
+      font-weight: 500;
+      color: #666;
+      line-height: 1.4;
+      text-align: right;
+      white-space: nowrap;
+
+      .summary-amount {
+        font-weight: 700;
+      }
+    }
+  }
+
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+
+    .ant-table {
+      .ant-table-thead > tr > th {
+        background-color: #f9f9f9;
+        font-weight: 600;
+        color: #262626;
+        border-bottom: 1px solid #eee;
+        padding: 10px;
+        text-align: left;
+        font-size: 13px;
+        position: sticky;
+        top: 0;
+      }
+
+      .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #eee;
+        padding: 10px;
+        text-align: left;
+        font-size: 13px;
+      }
+
+      .ant-table-tbody > tr:hover > td {
+        background-color: #f5f5f5;
+      }
+    }
+
+    .ant-empty {
+      padding: 40px 0;
+
+      .ant-empty-description {
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .ant-spin {
+    .ant-spin-dot {
+      font-size: 20px;
+    }
+
+    .ant-spin-text {
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+  }
+
+  .simpleTable-opp-name-link {
+    color: #1677ff;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .opp-health-tag {
+    display: inline-block;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.4;
+    white-space: nowrap;
+  }
+
+  .opp-health-tag--green {
+    background: #22c55f;
+    color: #fff;
+  }
+
+  .opp-health-tag--yellow {
+    background: #f59e0d;
+    color: #fff;
+  }
+
+  .opp-health-tag--red {
+    background: #ef4444;
+    color: #fff;
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .panel-header {
+      padding: 12px;
+    }
+
+    .table-container {
+      .ant-table {
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+          padding: 8px 12px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    .panel-header {
+      padding: 10px;
+    }
+
+    .table-container {
+      .ant-table {
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+          padding: 6px 8px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+