neo-cmp-cli 1.13.12 → 1.13.15

package/template/neo-bi-cmps/src/components/pipelineFunnel__c/README.md

@@ -0,0 +1,39 @@
+# PipelineFunnel 组件
+
+Pipeline漏斗图组件，展示销售管道的漏斗转化情况。
+
+## 使用方式
+
+```tsx
+import PipelineFunnel from './components/pipelineFunnel__c';
+
+<PipelineFunnel
+  title="Pipeline Funnel"
+  totalAmount="$11.1M"
+  stages={[
+    { name: 'Prospecting', amount: '$3.2M', count: 15, color: '#3b82f6' },
+    { name: 'Needs Analysis', amount: '$1.8M', count: 7, conversionRate: '56.3%', color: '#22c55e' },
+  ]}
+  onStageClick={(name) => console.log('Clicked:', name)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | 'Pipeline Funnel' |
+| totalAmount | 总金额 | string | '$11.1M' |
+| stages | 漏斗阶段数据 | FunnelStage[] | [] |
+| showAiButton | 显示AI按钮 | boolean | true |
+| onStageClick | 阶段点击回调 | (stageName: string) => void | - |
+
+## FunnelStage
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| name | 阶段名称 | string |
+| amount | 金额 | string |
+| count | 数量 | number |
+| conversionRate | 转化率 | string |
+| color | 颜色 | string |

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

@@ -0,0 +1,130 @@
+/**
+ * @file Pipeline漏斗图组件
+ * @description 展示销售管道的漏斗转化情况
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface FunnelStage {
+  name: string;
+  amount: string;
+  count: number;
+  conversionRate?: string;
+  color: string;
+}
+
+interface PipelineFunnelProps {
+  title?: string;
+  totalAmount?: string;
+  stages?: FunnelStage[];
+  showAiButton?: boolean;
+  onStageClick?: (stageName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface PipelineFunnelState {
+  loading: boolean;
+}
+
+class PipelineFunnel extends BaseCmp<PipelineFunnelProps, PipelineFunnelState> {
+  constructor(props: PipelineFunnelProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('PipelineFunnel 组件挂载');
+  }
+
+  getFunnelClipPath = (index: number, total: number): string => {
+    const offset = index * 10;
+    return `polygon(${offset}% 0%, ${100 - offset}% 0%, ${
+      100 - offset - 10
+    }% 100%, ${offset + 10}% 100%)`;
+  };
+
+  render() {
+    const {
+      title = 'Pipeline Funnel',
+      totalAmount = '$11.1M',
+      stages = [],
+      showAiButton = true,
+      onStageClick,
+      className,
+      style,
+    } = this.props;
+
+    return (
+      <div className={`pipeline-funnel__c ${className || ''}`} style={style}>
+        <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>
+
+        <div className="funnel-total">
+          <div className="funnel-total-label">Sales Amount</div>
+          <div className="funnel-total-value">{totalAmount}</div>
+        </div>
+
+        <div className="funnel-body">
+          <div className="funnel-left-rates">
+            {stages.slice(0, -1).map((stage, index) => (
+              <div key={index} className="funnel-rate">
+                {stage.conversionRate || '—'}
+              </div>
+            ))}
+          </div>
+
+          <div className="funnel-main">
+            {stages.map((stage, index) => (
+              <div
+                key={index}
+                className="funnel-segment"
+                style={{ backgroundColor: stage.color }}
+                onClick={() => onStageClick?.(stage.name)}
+              >
+                {stage.name}
+              </div>
+            ))}
+          </div>
+
+          <div className="funnel-right-data">
+            {stages.map((stage, index) => (
+              <div key={index} className="funnel-data">
+                {stage.amount} / {stage.count}
+              </div>
+            ))}
+          </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>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(PipelineFunnel);

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

@@ -0,0 +1,66 @@
+export class PipelineFunnelModel {
+  label: string = 'Pipeline漏斗图';
+  description: string = '展示销售管道的漏斗转化情况，直观显示各阶段金额和数量';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/pipelineFunnel.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Pipeline Funnel',
+    totalAmount: '$11.1M',
+    stages: [
+      {
+        name: 'Prospecting',
+        amount: '$3.2M',
+        count: 15,
+        conversionRate: '—',
+        color: '#3b82f6',
+      },
+      {
+        name: 'Needs Analysis',
+        amount: '$1.8M',
+        count: 7,
+        conversionRate: '56.3%',
+        color: '#22c55e',
+      },
+      {
+        name: 'Proposal/Price Quote',
+        amount: '$4.5M',
+        count: 8,
+        conversionRate: '28.1%',
+        color: '#f59e0b',
+      },
+      {
+        name: 'Closed Won',
+        amount: '$1.6M',
+        count: 3,
+        conversionRate: '10.0%',
+        color: '#8b5cf6',
+      },
+    ],
+    showAiButton: true,
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新漏斗图数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'string',
+      name: 'title',
+      label: '标题',
+    },
+    {
+      type: 'string',
+      name: 'totalAmount',
+      label: '总金额',
+    },
+  ];
+}
+
+export default PipelineFunnelModel;

package/template/neo-bi-cmps/src/components/pipelineFunnel__c/style.scss

@@ -0,0 +1,133 @@
+.pipeline-funnel__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  .funnel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .funnel-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .ai-btn {
+    cursor: pointer;
+    font-size: 16px;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+
+  .funnel-total {
+    text-align: center;
+    margin-bottom: 16px;
+
+    .funnel-total-label {
+      font-size: 12px;
+      color: #888;
+    }
+
+    .funnel-total-value {
+      font-size: 22px;
+      font-weight: 700;
+    }
+  }
+
+  .funnel-body {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .funnel-left-rates {
+    width: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+    font-size: 11px;
+    color: #888;
+  }
+
+  .funnel-rate {
+    height: 48px;
+    display: flex;
+    align-items: center;
+  }
+
+  .funnel-main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .funnel-segment {
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+
+  .funnel-right-data {
+    width: 110px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+    font-size: 11px;
+    color: #555;
+    text-align: right;
+  }
+
+  .funnel-data {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .funnel-legend {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 16px;
+    font-size: 11px;
+    color: #666;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .legend-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+}

package/template/neo-bi-cmps/src/components/stageSwitch__c/README.md

@@ -0,0 +1,36 @@
+# StageSwitch 组件
+
+阶段切换卡片组件，切换显示不同销售阶段的数据。
+
+## 使用方式
+
+```tsx
+import StageSwitch from './components/stageSwitch__c';
+
+<StageSwitch
+  stages={[
+    { key: 'Prospecting', name: 'Prospecting', amount: '$3.2M', count: 15 },
+    { key: 'Proposal', name: 'Proposal', amount: '$4.5M', count: 8 },
+  ]}
+  activeStage="Prospecting"
+  onStageChange={(stage) => console.log('Changed:', stage.key)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| stages | 阶段数据 | StageTab[] | [] |
+| activeStage | 当前阶段 | string | 第一个阶段 |
+| onStageChange | 阶段切换回调 | (stage: StageTab) => void | - |
+
+## StageTab
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| key | 唯一标识 | string |
+| name | 阶段名称 | string |
+| amount | 金额 | string |
+| count | 数量 | number |
+| changes | 变化数据 | { amount, amountDirection, count, countDirection } |

package/template/neo-bi-cmps/src/components/stageSwitch__c/index.tsx

@@ -0,0 +1,118 @@
+/**
+ * @file 阶段切换卡片组件
+ * @description 切换显示不同销售阶段的数据
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface StageTab {
+  key: string;
+  name: string;
+  amount: string;
+  count: number;
+  changes?: {
+    amount: string;
+    amountDirection: 'up' | 'down';
+    count: string;
+    countDirection: 'up' | 'down';
+  };
+}
+
+interface StageSwitchProps {
+  stages?: StageTab[];
+  activeStage?: string;
+  onStageChange?: (stage: StageTab) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface StageSwitchState {
+  activeStage: string;
+}
+
+class StageSwitch extends BaseCmp<StageSwitchProps, StageSwitchState> {
+  constructor(props: StageSwitchProps) {
+    super(props);
+    this.state = {
+      activeStage: props.activeStage || (props.stages?.[0]?.key ?? ''),
+    };
+  }
+
+  componentDidMount() {
+    console.log('StageSwitch 组件挂载');
+  }
+
+  componentWillReceiveProps(nextProps: StageSwitchProps) {
+    if (
+      nextProps.activeStage &&
+      nextProps.activeStage !== this.props.activeStage
+    ) {
+      this.setState({ activeStage: nextProps.activeStage });
+    }
+  }
+
+  handleStageClick(stage: StageTab) {
+    this.setState({ activeStage: stage.key });
+    const { onStageChange } = this.props;
+    if (onStageChange) {
+      onStageChange(stage);
+    }
+  }
+
+  render() {
+    const { stages = [], className, style } = this.props;
+    const { activeStage } = this.state;
+
+    return (
+      <div className={`stage-switch__c ${className || ''}`} style={style}>
+        <div className="stage-tabs">
+          {stages.map((stage) => (
+            <div
+              key={stage.key}
+              className={`stage-tab ${
+                activeStage === stage.key ? 'active' : ''
+              }`}
+              onClick={() => this.handleStageClick(stage)}
+            >
+              <div className="stage-name">{stage.name}</div>
+              <div className="stage-amount-row">
+                <span className="stage-amount">{stage.amount}</span>
+                <span className="stage-count">({stage.count})</span>
+              </div>
+              {stage.changes && (
+                <div className="stage-sub">
+                  <span
+                    className={`change-amount ${
+                      stage.changes.amountDirection === 'up'
+                        ? 'positive'
+                        : 'negative'
+                    }`}
+                  >
+                    {stage.changes.amountDirection === 'up' ? '↑' : '↓'}{' '}
+                    {stage.changes.amount}
+                  </span>
+                  <span> &nbsp; </span>
+                  <span
+                    className={`change-count ${
+                      stage.changes.countDirection === 'up'
+                        ? 'positive'
+                        : 'negative'
+                    }`}
+                  >
+                    {stage.changes.countDirection === 'up' ? '↑' : '↓'}{' '}
+                    {stage.changes.count}
+                  </span>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(StageSwitch);

package/template/neo-bi-cmps/src/components/stageSwitch__c/model.ts

@@ -0,0 +1,92 @@
+export class StageSwitchModel {
+  label: string = '阶段切换卡片';
+  description: string = '切换显示不同销售阶段的数据，包含金额、数量和变化趋势';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/stageSwitch.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    stages: [
+      {
+        key: 'Prospecting',
+        name: 'Prospecting',
+        amount: '$3.2M',
+        count: 15,
+        changes: {
+          amount: '$280K',
+          amountDirection: 'up',
+          count: '3',
+          countDirection: 'up',
+        },
+      },
+      {
+        key: 'Needs Analysis',
+        name: 'Needs Analysis',
+        amount: '$1.8M',
+        count: 7,
+        changes: {
+          amount: '$320K',
+          amountDirection: 'down',
+          count: '2',
+          countDirection: 'down',
+        },
+      },
+      {
+        key: 'Proposal',
+        name: 'Proposal/Price Quote',
+        amount: '$4.5M',
+        count: 8,
+        changes: {
+          amount: '$500K',
+          amountDirection: 'up',
+          count: '3',
+          countDirection: 'up',
+        },
+      },
+      {
+        key: 'Closed Won',
+        name: 'Closed Won',
+        amount: '$1.6M',
+        count: 3,
+        changes: {
+          amount: '$400K',
+          amountDirection: 'up',
+          count: '1',
+          countDirection: 'up',
+        },
+      },
+      {
+        key: 'Closed Lost',
+        name: 'Closed Lost',
+        amount: '$0.9M',
+        count: 4,
+        changes: {
+          amount: '$200K',
+          amountDirection: 'down',
+          count: '2',
+          countDirection: 'up',
+        },
+      },
+    ],
+    activeStage: 'Prospecting',
+  };
+
+  functions = [
+    {
+      apiKey: 'setActiveStage',
+      label: '设置当前阶段',
+      helpTextKey: '设置当前激活的销售阶段',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'object',
+      name: 'stages',
+      label: '阶段配置',
+      schema: [],
+    },
+  ];
+}
+
+export default StageSwitchModel;

package/template/neo-bi-cmps/src/components/stageSwitch__c/style.scss

@@ -0,0 +1,89 @@
+.stage-switch__c {
+  .stage-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+  }
+
+  .stage-tab {
+    flex: 1;
+    padding: 10px 16px;
+    cursor: pointer;
+    border-right: 1px solid #f0f0f0;
+    transition: all 0.2s;
+    position: relative;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &:hover {
+      background: #fafafa;
+    }
+
+    &.active {
+      background: #fff;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: #6366f1;
+      }
+
+      .stage-name {
+        color: #6366f1;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .stage-name {
+    font-size: 11px;
+    color: #888;
+    margin-bottom: 2px;
+  }
+
+  .stage-amount-row {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+  }
+
+  .stage-amount {
+    font-size: 15px;
+    font-weight: 700;
+    color: #333;
+  }
+
+  .stage-count {
+    font-size: 11px;
+    color: #999;
+  }
+
+  .stage-sub {
+    font-size: 10px;
+    color: #999;
+    margin-top: 2px;
+  }
+
+  .change-amount,
+  .change-count {
+    font-weight: 700;
+  }
+
+  .positive {
+    color: #16a34a;
+  }
+
+  .negative {
+    color: #dc2626;
+  }
+}