neo-cmp-cli 1.13.12 → 1.13.13

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

@@ -0,0 +1,42 @@
+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,103 @@
+/**
+ * @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,37 @@
+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;
+  }
+}

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

@@ -0,0 +1,37 @@
+# StageTimeChart 组件
+
+阶段停留时间组件，展示各销售阶段的平均停留时间。
+
+## 使用方式
+
+```tsx
+import StageTimeChart from './components/stageTimeChart__c';
+
+<StageTimeChart
+  title="Avg. Time in Stage"
+  items={[
+    { stageName: 'Prospecting', actualTime: '8天6时', actualPercent: 28, actualColor: '#22c55e', targetPercent: 33, limitPercent: 50 },
+  ]}
+  onStageClick={(name) => console.log('Clicked:', name)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | 'Avg. Time in Stage' |
+| items | 阶段数据 | StageTimeItem[] | [] |
+| showAiButton | 显示AI按钮 | boolean | true |
+| onStageClick | 阶段点击回调 | (stageName: string) => void | - |
+
+## StageTimeItem
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| stageName | 阶段名称 | string |
+| actualTime | 实际时间 | string |
+| actualPercent | 实际百分比 | number |
+| actualColor | 实际颜色 | string |
+| targetPercent | 目标百分比 | number |
+| limitPercent | 限制百分比 | number |

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

@@ -0,0 +1,126 @@
+/**
+ * @file 阶段停留时间组件
+ * @description 展示各销售阶段的平均停留时间，包含实际值、目标值和限制值
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface StageTimeItem {
+  stageName: string;
+  actualTime: string;
+  actualPercent: number;
+  actualColor: string;
+  targetPercent: number;
+  limitPercent: number;
+}
+
+interface StageTimeChartProps {
+  title?: string;
+  items?: StageTimeItem[];
+  showAiButton?: boolean;
+  onStageClick?: (stageName: string) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface StageTimeChartState {
+  loading: boolean;
+}
+
+class StageTimeChart extends BaseCmp<StageTimeChartProps, StageTimeChartState> {
+  constructor(props: StageTimeChartProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('StageTimeChart 组件挂载');
+  }
+
+  render() {
+    const {
+      title = 'Avg. Time in Stage',
+      items = [],
+      showAiButton = true,
+      onStageClick,
+      className,
+      style,
+    } = this.props;
+
+    return (
+      <div className={`stage-time-chart__c ${className || ''}`} style={style}>
+        <div className="chart-header">
+          <h3 className="chart-title">{title}</h3>
+          {showAiButton && (
+            <span
+              className="ai-btn"
+              onClick={() => console.log('AI Analysis clicked')}
+              title="AI Analysis"
+            >
+              ✨
+            </span>
+          )}
+        </div>
+
+        <div className="chart-legend">
+          <span className="legend-item">
+            <span className="legend-actual" />
+            Actual
+          </span>
+          <span className="legend-item">
+            <span className="legend-target" />
+            Target
+          </span>
+          <span className="legend-item">
+            <span className="legend-limit" />
+            Limit
+          </span>
+        </div>
+
+        <div className="chart-body">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="stage-time-item"
+              onClick={() => onStageClick?.(item.stageName)}
+            >
+              <div className="stage-time-header">
+                <span className="stage-name">{item.stageName}</span>
+                <span
+                  className="stage-time-value"
+                  style={{ color: item.actualColor }}
+                >
+                  {item.actualTime}
+                </span>
+              </div>
+              <div className="stage-time-bar">
+                <div
+                  className="stage-time-actual"
+                  style={{
+                    width: `${item.actualPercent}%`,
+                    backgroundColor: item.actualColor,
+                  }}
+                />
+                <div
+                  className="stage-time-target"
+                  style={{ left: `${item.targetPercent}%` }}
+                />
+                <div
+                  className="stage-time-limit"
+                  style={{ left: `${item.limitPercent}%` }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(StageTimeChart);

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

@@ -0,0 +1,35 @@
+export class StageTimeChartModel {
+  label: string = '阶段停留时间';
+  description: string = '展示各销售阶段的平均停留时间，包含实际值、目标值和限制值';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/stageTimeChart.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Avg. Time in Stage',
+    items: [
+      { stageName: 'Prospecting', actualTime: '8天6时', actualPercent: 28, actualColor: '#22c55e', targetPercent: 33, limitPercent: 50 },
+      { stageName: 'Needs Analysis', actualTime: '15天12时', actualPercent: 52, actualColor: '#eab308', targetPercent: 40, limitPercent: 60 },
+      { stageName: 'Proposal/Price Quote', actualTime: '22天8时', actualPercent: 74, actualColor: '#ef4444', targetPercent: 50, limitPercent: 67 },
+    ],
+    showAiButton: true,
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新停留时间数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'string',
+      name: 'title',
+      label: '标题',
+    },
+  ];
+}
+
+export default StageTimeChartModel;