neo-cmp-cli 1.13.12 → 1.13.13

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

@@ -0,0 +1,35 @@
+export class KpiCardsModel {
+  label: string = 'KPI指标卡片';
+  description: string = '展示Quota、Closed、Forecast、AI Forecast等核心KPI指标';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/kpiCards.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    columns: 2,
+    items: [
+      { label: 'Quota', value: '$10,000,000' },
+      { label: 'Closed', value: '$3,200,000', subLabel: 'Gap: $6,800,000', subDirection: 'negative' },
+      { label: 'Forecast', value: '$7,500,000', subLabel: 'Gap: $2,500,000', subDirection: 'negative' },
+      { label: '✨ AI Forecast', value: '$6,800,000', subLabel: 'Gap: $3,200,000', subDirection: 'negative' },
+    ],
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新KPI指标数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'number',
+      name: 'columns',
+      label: '列数',
+    },
+  ];
+}
+
+export default KpiCardsModel;

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

@@ -0,0 +1,33 @@
+.kpi-cards__c {
+  .kpi-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 16px 20px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+    .kpi-label {
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 4px;
+    }
+
+    .kpi-value {
+      font-size: 22px;
+      font-weight: 700;
+    }
+
+    .kpi-sub {
+      font-size: 12px;
+      color: #999;
+      margin-top: 4px;
+
+      &.negative {
+        color: #ef4444;
+      }
+
+      &.positive {
+        color: #22c55e;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+# OppList 组件
+
+商机列表组件，展示商机数据表格，支持排序、筛选、Tab切换等功能。
+
+## 使用方式
+
+```tsx
+import OppList from './components/oppList__c';
+
+<OppList
+  title="Opportunity List"
+  tabs={[
+    { key: 'watch', label: '✨ Prioritized Deals' },
+    { key: 'all', label: 'All Opportunities' },
+  ]}
+  filterChips={['All (3)', 'Rescue (1)', 'Upgrade (2)']}
+  columns={['Name', 'Amount', 'Close Date', 'Stage']}
+  rows={[...]}
+  onRowClick={(opp) => console.log('Clicked:', opp)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | 'Opportunity List' |
+| summaryText | 摘要文本 | string | - |
+| tabs | Tab配置 | OppTab[] | [] |
+| activeTab | 当前Tab | string | 第一个Tab |
+| filterChips | 筛选 Chips | string[] | [] |
+| columns | 表头列 | string[] | [] |
+| rows | 商机数据 | Opportunity[] | [] |
+| onTabChange | Tab切换回调 | (tab: string) => void | - |
+| onChipChange | Chip切换回调 | (chip: string) => void | - |
+| onSort | 排序回调 | (column: string) => void | - |
+| onRowClick | 行点击回调 | (opp: Opportunity) => void | - |
+
+## Opportunity
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| name | 商机名称 | string |
+| account | 账户 | string |
+| forecastType | 预测类型 | string |
+| amount | 金额 | string |
+| closeDate | 关闭日期 | string |
+| stage | 阶段 | string |
+| aiScore | AI评分 | string |
+| aiWinRate | AI赢率 | string |
+| lastActivity | 最近活动 | string |
+| source | 来源 | 'rescue' \| 'upgrade' \| 'all' |

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

@@ -0,0 +1,228 @@
+/**
+ * @file 商机列表组件
+ * @description 展示商机数据表格，支持排序、筛选、Tab切换等功能
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface OppTab {
+  key: string;
+  label: string;
+  icon?: string;
+}
+
+interface Opportunity {
+  name: string;
+  account?: string;
+  forecastType?: string;
+  amount: string;
+  closeDate: string;
+  stage: string;
+  aiScore?: string;
+  aiScoreColor?: string;
+  aiWinRate?: string;
+  lastActivity?: string;
+  source?: 'rescue' | 'upgrade' | 'all';
+}
+
+interface OppListProps {
+  title?: string;
+  summaryText?: string;
+  tabs?: OppTab[];
+  activeTab?: string;
+  filterChips?: string[];
+  activeChip?: string;
+  columns?: string[];
+  rows?: Opportunity[];
+  onTabChange?: (tab: string) => void;
+  onChipChange?: (chip: string) => void;
+  onSort?: (column: string) => void;
+  onRowClick?: (opp: Opportunity) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface OppListState {
+  activeTab: string;
+  activeChip: string;
+  sortColumn?: string;
+  sortDirection?: 'asc' | 'desc';
+}
+
+class OppList extends BaseCmp<OppListProps, OppListState> {
+  constructor(props: OppListProps) {
+    super(props);
+    this.state = {
+      activeTab: props.activeTab || (props.tabs?.[0]?.key ?? 'watch'),
+      activeChip: props.activeChip || (props.filterChips?.[0] ?? 'all'),
+      sortColumn: undefined,
+      sortDirection: undefined,
+    };
+  }
+
+  componentDidMount() {
+    console.log('OppList 组件挂载');
+  }
+
+  handleTabChange = (tab: string) => {
+    this.setState({ activeTab: tab });
+    const { onTabChange } = this.props;
+    if (onTabChange) {
+      onTabChange(tab);
+    }
+  };
+
+  handleChipChange = (chip: string) => {
+    this.setState({ activeChip: chip });
+    const { onChipChange } = this.props;
+    if (onChipChange) {
+      onChipChange(chip);
+    }
+  };
+
+  handleSort = (column: string) => {
+    const { sortColumn, sortDirection } = this.state;
+    let newDirection: 'asc' | 'desc' = 'asc';
+
+    if (sortColumn === column) {
+      newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+    }
+
+    this.setState({ sortColumn: column, sortDirection: newDirection });
+    const { onSort } = this.props;
+    if (onSort) {
+      onSort(column);
+    }
+  };
+
+  getScoreBadgeStyle = (score: string, color?: string) => {
+    const bgColor = color || '#22c55e';
+    return {
+      backgroundColor: bgColor,
+      color: '#fff',
+      padding: '2px 8px',
+      borderRadius: '10px',
+      fontSize: '11px',
+    };
+  };
+
+  filterRows = () => {
+    const { rows = [] } = this.props;
+    const { activeChip } = this.state;
+
+    if (activeChip === 'all') {
+      return rows;
+    }
+
+    return rows.filter((row) => row.source === activeChip);
+  };
+
+  render() {
+    const {
+      title = 'Opportunity List',
+      summaryText,
+      tabs = [],
+      filterChips = [],
+      columns = [],
+      className,
+      style,
+    } = this.props;
+
+    const { activeTab, activeChip, sortColumn, sortDirection } = this.state;
+    const filteredRows = this.filterRows();
+
+    return (
+      <div className={`opp-list__c ${className || ''}`} style={style}>
+        {/* Tab切换 */}
+        {tabs.length > 0 && (
+          <div className="opp-tabs">
+            {tabs.map((tab) => (
+              <button
+                key={tab.key}
+                className={`opp-tab-btn ${activeTab === tab.key ? 'active' : ''}`}
+                onClick={() => this.handleTabChange(tab.key)}
+              >
+                {tab.icon} {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* 筛选Chips */}
+        {filterChips.length > 0 && (
+          <div className="filter-chips">
+            {filterChips.map((chip, index) => (
+              <button
+                key={index}
+                className={`watch-sub-tab ${activeChip === chip.split('(')[0].trim().toLowerCase() ? 'active' : ''}`}
+                onClick={() => this.handleChipChange(chip.split('(')[0].trim().toLowerCase())}
+              >
+                {chip}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {/* 标题和摘要 */}
+        <div className="list-header">
+          <h3 className="list-title">{title}</h3>
+          {summaryText && <div className="list-summary">{summaryText}</div>}
+        </div>
+
+        {/* 表格 */}
+        <div className="table-wrapper">
+          <table className="opp-table">
+            <thead>
+              <tr>
+                {columns.map((col, index) => (
+                  <th key={index} style={{ textAlign: col === 'Amount' ? 'right' : col === 'Close Date' || col === 'Stage' || col === 'Last Activity' || col === 'AI Score' || col === 'AI Win Rate' ? 'center' : 'left' }}>
+                    {col}
+                    <span
+                      className="sort-icon"
+                      onClick={() => this.handleSort(col)}
+                      style={{ color: sortColumn === col ? '#6366f1' : '#ccc', marginLeft: '4px' }}
+                    >
+                      {sortColumn === col ? (sortDirection === 'asc' ? '↑' : '↓') : '⇅'}
+                    </span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filteredRows.map((opp, index) => (
+                <tr key={index} className={opp.source ? `opp-row source-${opp.source}` : ''}>
+                  <td style={{ textAlign: 'left', color: '#3b82f6', cursor: 'pointer' }}>{opp.name}</td>
+                  {opp.account && <td style={{ textAlign: 'left' }}>{opp.account}</td>}
+                  {opp.forecastType && <td style={{ textAlign: 'left' }}>{opp.forecastType}</td>}
+                  <td style={{ textAlign: 'right' }}>{opp.amount}</td>
+                  <td style={{ textAlign: 'center' }}>{opp.closeDate}</td>
+                  <td style={{ textAlign: 'center' }}>{opp.stage}</td>
+                  {opp.aiScore && (
+                    <td style={{ textAlign: 'center' }}>
+                      <span style={this.getScoreBadgeStyle(opp.aiScore, opp.aiScoreColor)}>
+                        {opp.aiScore}
+                      </span>
+                    </td>
+                  )}
+                  {opp.aiWinRate && (
+                    <td style={{ textAlign: 'center', color: '#6366f1', fontWeight: 600 }}>
+                      {opp.aiWinRate}
+                    </td>
+                  )}
+                  {opp.lastActivity && (
+                    <td style={{ textAlign: 'center', color: '#999' }}>{opp.lastActivity}</td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(OppList);

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

@@ -0,0 +1,40 @@
+export class OppListModel {
+  label: string = '商机列表';
+  description: string = '展示商机数据表格，支持排序、筛选、Tab切换等功能';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/oppList.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Opportunity List',
+    tabs: [
+      { key: 'watch', label: '✨ Prioritized Deals', icon: '' },
+      { key: 'all', label: 'All Opportunities', icon: '' },
+    ],
+    filterChips: ['All (3)', 'Rescue (1)', 'Upgrade (2)'],
+    columns: ['Opportunity Name', 'Account', 'Forecast Type', 'Amount', 'Close Date', 'Stage', '✨ AI Score', '✨ AI Win Rate', 'Last Activity'],
+    rows: [
+      { name: 'Apollo Project', account: 'Huawei Tech', forecastType: 'Commit', amount: '$1,000,000', closeDate: '2026-04-15', stage: 'Negotiation', aiScore: 'Medium', aiScoreColor: '#f59e0b', aiWinRate: '42%', lastActivity: '2026-03-28', source: 'rescue' },
+      { name: 'Aurora Solution', account: 'ByteDance', forecastType: 'Best Case', amount: '$800,000', closeDate: '2026-04-30', stage: 'Proposal', aiScore: 'High', aiScoreColor: '#22c55e', aiWinRate: '91%', lastActivity: '2026-03-29', source: 'upgrade' },
+      { name: 'Cloud Migration', account: 'Tencent', forecastType: 'Pipeline', amount: '$1,700,000', closeDate: '2026-05-20', stage: 'Discovery', aiScore: 'Medium', aiScoreColor: '#f59e0b', aiWinRate: '78%', lastActivity: '2026-03-27', source: 'upgrade' },
+    ],
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新商机列表数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'string',
+      name: 'title',
+      label: '标题',
+    },
+  ];
+}
+
+export default OppListModel;

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

@@ -0,0 +1,133 @@
+.opp-list__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  overflow-x: auto;
+
+  .opp-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 16px;
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+  .opp-tab-btn {
+    padding: 8px 20px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: #999;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #6366f1;
+    }
+
+    &.active {
+      color: #6366f1;
+      border-bottom-color: #6366f1;
+    }
+  }
+
+  .filter-chips {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .watch-sub-tab {
+    padding: 6px 14px;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background: #fff;
+    color: #666;
+    border-radius: 20px;
+    transition: all 0.2s;
+
+    &:hover {
+      border-color: #6366f1;
+    }
+
+    &.active {
+      border: 1px solid #6366f1;
+      background: #f0f0ff;
+      color: #6366f1;
+    }
+  }
+
+  .list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .list-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .list-summary {
+    font-size: 13px;
+    color: #666;
+
+    span {
+      font-weight: 700;
+      color: #333;
+    }
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  .opp-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+
+    th,
+    td {
+      padding: 10px 12px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #333;
+      border-bottom: 2px solid #e5e7eb;
+      user-select: none;
+    }
+
+    td {
+      color: #333;
+    }
+
+    tbody tr {
+      transition: background 0.15s;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:hover {
+        background: #fafafa;
+      }
+    }
+
+    .sort-icon {
+      cursor: pointer;
+      font-size: 10px;
+
+      &:hover {
+        color: #6366f1 !important;
+      }
+    }
+  }
+}

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,128 @@
+/**
+ * @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);