neo-cmp-cli 1.13.16 → 1.13.17

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

@@ -0,0 +1,50 @@
+export class FilterBarModel {
+  label: string = '筛选栏';
+  description: string = '支持日期范围、负责人、业务类型等多维度筛选';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/filter.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    closeDateOptions: [
+      { value: 201, label: 'This Week' },
+      { value: 301, label: 'This Month' },
+      { value: 401, label: 'This Quarter' },
+      { value: 'custom', label: 'Custom' },
+    ],
+    /** 与商机业务类型接口返回项的 apiKey 一致时，作为 Business Type 默认选中项 */
+    defaultBusiType: 'defaultBusiType_1', // New Business
+  };
+
+  /**
+   * 声明当前组件会触发的所有事件（与组件内 @NeoEvent.dispatch 方法名一致）
+   */
+  events = [
+    {
+      apiKey: 'onFiltersChange',
+      label: '筛选条件变化后',
+      helpText:
+        '任一筛选项或自定义时间区间变更时触发；事件参数含 closeDate、closeDateCustomRange（非 custom 时为当前相对周期起止 Unix 毫秒时间戳；custom 时为 RangePicker 起止）、opportunityOwner（负责人多选 id 数组）、businessType、businessTypeLabel（业务类型展示名）、changesSince、changesSinceCustomTime（Changes Since 为 Custom 时为所选日期当日 0 点；否则在 Close Date 非 custom 时为周期起点当日 0 点）',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"data","label":"当前筛选数据","type":"Object"}],"label":"事件入参","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'resetFilters',
+      label: '重置筛选条件',
+      helpTextKey: '重置所有筛选条件为默认值并触发「筛选条件变化后」事件',
+    },
+    {
+      apiKey: 'getFilters',
+      label: '获取筛选条件',
+      helpTextKey:
+        '返回当前筛选快照对象；closeDate 非 custom 时 closeDateCustomRange 为相对周期起止时间戳；custom 时为自定义区间；businessTypeLabel 为业务类型展示名；changesSinceCustomTime 在 Changes Since 为 Custom 时为所选日 0 点，否则在 Close Date 非 custom 时为周期起点 0 点',
+    },
+  ];
+
+  propsSchema = [];
+}
+
+export default FilterBarModel;

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

@@ -0,0 +1,119 @@
+.filterBar__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 10px 12px;
+  align-items: flex-start;
+  align-content: flex-start;
+  margin-bottom: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  .filter-block {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 6px 8px;
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .filter-field {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+
+    label {
+      font-size: 13px;
+      color: #666;
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    &.filter-field-range {
+      flex: 0 0 auto;
+    }
+  }
+
+  .filter-select {
+    min-width: 160px;
+    max-width: 100%;
+  }
+
+  .filter-select-wide {
+    min-width: 220px;
+  }
+
+  .filter-select-spin-wrap {
+    min-width: 220px;
+    min-height: 32px;
+  }
+
+  .filter-btn {
+    padding: 6px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background: #fff;
+
+    &.active {
+      background: #6366f1;
+      color: #fff;
+      border-color: #6366f1;
+    }
+  }
+
+  /* Changes Since 问号提示 */
+  .help-tip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: help;
+    color: #999;
+    font-size: 12px;
+    margin-left: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid #ddd;
+
+    .help-tip-text {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: #fff;
+      padding: 6px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      white-space: nowrap;
+      z-index: 100;
+      font-weight: 400;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 5px solid transparent;
+        border-top-color: #333;
+      }
+    }
+
+    &:hover .help-tip-text {
+      display: block;
+    }
+  }
+}

package/template/neo-pipeline-cmps/src/components/pipelineFunnel__c/index.tsx

@@ -0,0 +1,415 @@
+/**
+ * @file Pipeline漏斗图组件
+ * @description 展示销售管道的漏斗转化情况，数据来自 NeoBI queryDataTask
+ */
+import * as React from 'react';
+import * as echarts from 'echarts';
+import { Spin } from 'antd';
+// @ts-ignore
+import { request } from 'neo-open-api';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+import { filter2chartFilter } from '../../utils/filter2chartFilter';
+import {
+  buildQueryDataTaskFormBody,
+  formatAmountDisplay,
+  getDefaultFilterWhereByProps,
+} from '../../utils/common';
+import {
+  buildFunnelChartOption,
+  filterOutClosedLostRows,
+  isTruthyProp,
+  parseRowsToStages,
+  type FunnelStage,
+} from '../../utils/pipelineFunnel';
+
+import './style.scss';
+
+const QUERY_DATA_TASK_URL = '/rest/neobi/v2.0/bestpractices/queryDataTask';
+
+const FORM_URLENCODED_UTF8 = 'application/x-www-form-urlencoded;charset=UTF-8';
+
+interface PipelineFunnelProps {
+  title?: string;
+  /** 视图 ID，参与 queryDataTask */
+  viewId?: string;
+  /** 视图类型，对应请求参数 type */
+  viewType?: string;
+  /**
+   * 为 true 时层宽随阶段顺序递减（经典漏斗），层高度按各阶段金额占比；
+   * 为 false（默认）时层宽按各阶段真实金额比例绘制 */
+  useClassicFunnelShape?: boolean;
+  /** Neo 注入，含当前用户 */
+  data?: {
+    __NeoCurrentUser?: { id?: string | number };
+  };
+  showAiButton?: boolean;
+  onStageClick?: (stageName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface PipelineFunnelState {
+  loading: boolean;
+  error: string | null;
+  stages: FunnelStage[];
+  /** 各阶段金额数值总和，用于占比 */
+  totalAmountNum: number;
+  /** 顶部展示用总金额文案 */
+  totalAmountLabel: string;
+  /** 请求体中的 filter，可由组件动作 setFilter 更新 */
+  filter: any;
+}
+
+class PipelineFunnel extends BaseCmp<PipelineFunnelProps, PipelineFunnelState> {
+  private chartRef = React.createRef<HTMLDivElement>();
+
+  private chartInstance: echarts.ECharts | null = null;
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor(props: PipelineFunnelProps) {
+    super(props);
+    this.state = {
+      loading: false,
+      error: null,
+      stages: [],
+      totalAmountNum: 0,
+      totalAmountLabel: formatAmountDisplay(0),
+      filter: getDefaultFilterWhereByProps(props),
+    };
+
+    this.initChart = this.initChart.bind(this);
+    this.bindResize = this.bindResize.bind(this);
+    this.unbindResize = this.unbindResize.bind(this);
+    this.handleWindowResize = this.handleWindowResize.bind(this);
+    this.updateChart = this.updateChart.bind(this);
+    this.fetchChartData = this.fetchChartData.bind(this);
+    this.refreshData = this.refreshData.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchChartData();
+    this.initChart();
+    this.bindResize();
+
+    /*
+    // 监听一个广播事件
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('PipelineFunnel 监听到了一个广播事件 updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+    */
+  }
+
+  componentDidUpdate(
+    prevProps: PipelineFunnelProps,
+    prevState: PipelineFunnelState,
+  ) {
+    const uid = this.props.data?.__NeoCurrentUser?.id;
+    const puid = prevProps.data?.__NeoCurrentUser?.id;
+    if (
+      this.props.viewId !== prevProps.viewId ||
+      this.props.viewType !== prevProps.viewType ||
+      uid !== puid
+    ) {
+      this.fetchChartData();
+    }
+
+    if (
+      prevState.stages !== this.state.stages ||
+      prevState.loading !== this.state.loading ||
+      isTruthyProp(prevProps.useClassicFunnelShape) !==
+        isTruthyProp(this.props.useClassicFunnelShape)
+    ) {
+      this.updateChart();
+    }
+
+    if (!this.chartInstance && this.chartRef.current) {
+      this.initChart();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unbindResize();
+    if (this.chartInstance) {
+      this.chartInstance.dispose();
+      this.chartInstance = null;
+    }
+  }
+
+  initChart() {
+    if (!this.chartRef.current || this.chartInstance) return;
+    this.chartInstance = echarts.init(this.chartRef.current);
+    this.updateChart();
+  }
+
+  bindResize() {
+    window.addEventListener('resize', this.handleWindowResize);
+    if (typeof ResizeObserver === 'undefined') return;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.chartInstance?.resize();
+      if (
+        isTruthyProp(this.props.useClassicFunnelShape) &&
+        this.state.stages.length > 0
+      ) {
+        this.updateChart();
+      }
+    });
+    const el = this.chartRef.current;
+    if (el) this.resizeObserver.observe(el);
+  }
+
+  unbindResize() {
+    window.removeEventListener('resize', this.handleWindowResize);
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  handleWindowResize() {
+    this.chartInstance?.resize();
+    if (
+      isTruthyProp(this.props.useClassicFunnelShape) &&
+      this.state.stages.length > 0
+    ) {
+      this.updateChart();
+    }
+  }
+
+  updateChart() {
+    if (!this.chartInstance) return;
+    const { stages } = this.state;
+    const { onStageClick, useClassicFunnelShape } = this.props;
+    const classicShape = isTruthyProp(useClassicFunnelShape);
+    const el = this.chartRef.current;
+    const fallbackH = Math.max(stages.length * 52, 220);
+    const chartViewHeightPx = Math.max(el?.clientHeight ?? 0, fallbackH);
+
+    try {
+      if (stages.length === 0) {
+        this.chartInstance.clear();
+      } else {
+        const option = buildFunnelChartOption(stages, classicShape, {
+          chartViewHeightPx: classicShape ? chartViewHeightPx : undefined,
+          funnelGap: 2,
+        });
+        this.chartInstance.setOption(option, true);
+        this.chartInstance.off('click');
+        this.chartInstance.on(
+          'click',
+          (params: {
+            componentType?: string;
+            seriesType?: string;
+            seriesName?: string;
+            dataIndex?: number;
+          }) => {
+            if (
+              params.componentType === 'series' &&
+              params.seriesType === 'funnel' &&
+              params.seriesName !== 'PipelineName'
+            ) {
+              const idx =
+                typeof params.dataIndex === 'number' ? params.dataIndex : -1;
+              const name = stages[idx]?.name;
+              if (name) {
+                this.handleStageClick(name);
+                onStageClick?.(name);
+              }
+            }
+          },
+        );
+      }
+      requestAnimationFrame(() => this.chartInstance?.resize());
+    } catch (e) {
+      console.error('PipelineFunnel ECharts 更新失败:', e);
+    }
+  }
+
+  async fetchChartData() {
+    const { viewId, viewType } = this.props;
+    const userId = this.props.data?.__NeoCurrentUser?.id;
+
+    if (viewId == null || viewId === '' || userId == null || userId === '') {
+      this.setState({
+        loading: false,
+        error: '缺少 viewId 或当前用户 id（data.__NeoCurrentUser.id）',
+        stages: [],
+        totalAmountNum: 0,
+        totalAmountLabel: formatAmountDisplay(0),
+      });
+      return;
+    }
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const filterObj =
+        this.state.filter &&
+        typeof this.state.filter === 'object' &&
+        !Array.isArray(this.state.filter)
+          ? this.state.filter
+          : {};
+
+      const res = await request({
+        url: QUERY_DATA_TASK_URL,
+        method: 'POST',
+        data: buildQueryDataTaskFormBody({
+          viewId: String(viewId),
+          userId,
+          type: viewType ?? 'sync',
+          filter: filterObj,
+        }),
+        headers: {
+          'Content-Type': FORM_URLENCODED_UTF8,
+        },
+      });
+
+      const status = res?.status;
+      const table = res?.data;
+
+      if (status !== 0 || !Array.isArray(table)) {
+        this.setState({
+          loading: false,
+          error: res?.message || res?.msg || '查询图表数据失败',
+          stages: [],
+          totalAmountNum: 0,
+          totalAmountLabel: formatAmountDisplay(0),
+        });
+        return;
+      }
+
+      const filteredTable = filterOutClosedLostRows(table as unknown[][]);
+      const { stages, totalAmountNum } = parseRowsToStages(filteredTable);
+
+      this.setState({
+        loading: false,
+        error: null,
+        stages,
+        totalAmountNum,
+        totalAmountLabel: formatAmountDisplay(totalAmountNum),
+      });
+    } catch (e: any) {
+      console.error('PipelineFunnel queryDataTask 失败:', e);
+      this.setState({
+        loading: false,
+        error: e?.message || '网络请求失败',
+        stages: [],
+        totalAmountNum: 0,
+        totalAmountLabel: formatAmountDisplay(0),
+      });
+    }
+  }
+
+  /**
+   * 刷新漏斗图数据（设计器可绑定）
+   */
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchChartData();
+  }
+
+  /**
+   * 设置过滤条件并重新拉数（设计器可绑定）
+   * @param filter 过滤对象，将作为 queryDataTask 的 filter 字段
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (!filter) {
+      return;
+    }
+    const nextFilter = filter2chartFilter(filter);
+    console.log('[PipelineFunnel__c] setFilter:', filter, nextFilter);
+    if (!isEqual(nextFilter, this.state.filter)) {
+      this.setState({ filter: nextFilter }, () => {
+        this.fetchChartData();
+      });
+    }
+  }
+
+  @NeoEvent.dispatch
+  onActiveStageChange(eventData?: any) {}
+
+  // 点击阶段切换时，更新当前激活的销售阶段
+  handleStageClick(stageName: string) {
+    this.onActiveStageChange({
+      activeStage: stageName,
+    });
+  }
+
+  render() {
+    const {
+      title = 'Pipeline Funnel',
+      // showAiButton = false,
+      className,
+      style,
+    } = this.props;
+    const showAiButton = false;
+
+    const { loading, error, stages, totalAmountLabel } = this.state;
+    const chartHeight = Math.max(stages.length * 52, 200);
+
+    return (
+      <div
+        className={`pipelineFunnel__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.15 01"
+      >
+        <Spin spinning={loading}>
+          <div className="funnel-header">
+            <h3 className="funnel-title">{title}</h3>
+            {showAiButton && (
+              <span
+                className="ai-btn"
+                onClick={() => console.log('AI Analysis clicked')}
+                title="AI Analysis"
+              >
+                ✨
+              </span>
+            )}
+          </div>
+
+          {error ? (
+            <div
+              className="funnel-error"
+              style={{ color: '#cf1322', fontSize: 12, marginBottom: 8 }}
+            >
+              {error}
+            </div>
+          ) : null}
+
+          <div className="funnel-total">
+            <div className="funnel-total-label">Sales Amount</div>
+            <div className="funnel-total-value">{totalAmountLabel}</div>
+          </div>
+
+          <div className="funnel-body">
+            <div className="funnel-chart-wrap" style={{ height: chartHeight }}>
+              <div
+                ref={this.chartRef}
+                className="funnel-chart"
+                style={{ width: '100%', height: chartHeight }}
+              />
+            </div>
+          </div>
+
+          <div className="funnel-legend">
+            {stages.map((stage, index) => (
+              <span key={index} className="legend-item">
+                <span
+                  className="legend-dot"
+                  style={{ backgroundColor: stage.color }}
+                />
+                {stage.name}
+              </span>
+            ))}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default PipelineFunnel;

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

@@ -0,0 +1,79 @@
+export class PipelineFunnelModel {
+  label: string = 'Pipeline漏斗图';
+  description: string = '展示销售管道的漏斗转化情况，直观显示各阶段金额和数量';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/funnel.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Pipeline Funnel',
+    viewId: '4264464770007375',
+    viewType: 'sync',
+    showAiButton: true,
+    /** 为 true 时层宽按阶段顺序递减（经典形状），层高度按各阶段金额占比；默认 false，层宽按真实金额 */
+    useClassicFunnelShape: false,
+  };
+
+  events = [
+    {
+      apiKey: 'onActiveStageChange',
+      label: '点击阶段触发',
+      helpText:
+        '点击漏斗阶段触发；事件参数含 activeStage（当前激活阶段）',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"activeStage","label":"当前激活阶段","type":"String"}],"label":"事件入参","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '重新请求 queryDataTask 刷新漏斗图数据',
+    },
+    {
+      apiKey: 'setFilter',
+      label: '设置过滤条件',
+      helpTextKey: '设置报表组件的 filter 并重新拉取数据',
+      funcInParams: [
+        {
+          apiKey: 'filter',
+          label: '过滤条件',
+          type: 'Object',
+          required: false,
+        },
+      ],
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'title',
+      label: '标题',
+    },
+    {
+      type: 'panelInput',
+      name: 'viewId',
+      label: '视图 ID',
+    },
+    {
+      type: 'panelInput',
+      name: 'viewType',
+      label: '视图类型（请求 type）',
+    },
+    {
+      type: 'panelSelect',
+      name: 'useClassicFunnelShape',
+      label: '漏斗形状',
+      value: false,
+      options: [
+        { label: '按真实金额设置漏斗形状', value: false },
+        { label: '经典漏斗（层高按数值大小）', value: true },
+      ],
+      clearable: false,
+    },
+  ];
+}
+
+export default PipelineFunnelModel;