neo-cmp-cli 1.13.12 → 1.13.13

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

@@ -0,0 +1,154 @@
+.forecast-chart__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .chart-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);
+    }
+  }
+
+  .chart-content {
+    display: flex;
+    gap: 16px;
+    flex: 1;
+    align-items: flex-end;
+    height: 220px;
+  }
+
+  .chart-y-axis {
+    width: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-right: 8px;
+    font-size: 11px;
+    color: #999;
+  }
+
+  .chart-main {
+    flex: 1;
+    position: relative;
+    padding: 16px 16px 40px 0;
+  }
+
+  .chart-grid {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 20px;
+    bottom: 50px;
+
+    div {
+      position: absolute;
+      width: 100%;
+      border-top: 1px solid #eee;
+    }
+  }
+
+  .chart-quota-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: 2.5px solid #22c55e;
+    z-index: 5;
+
+    .quota-label {
+      position: absolute;
+      top: -18px;
+      left: 0;
+      font-size: 11px;
+      background: #22c55e;
+      color: #fff;
+      padding: 1px 8px;
+      border-radius: 3px;
+    }
+  }
+
+  .chart-forecast-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: 2px solid #8b5cf6;
+    z-index: 5;
+
+    .forecast-label {
+      position: absolute;
+      top: -16px;
+      right: 0;
+      font-size: 10px;
+      color: #8b5cf6;
+    }
+  }
+
+  .chart-ai-line {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border-top: 2px dashed #a78bfa;
+    z-index: 5;
+
+    .ai-label {
+      position: absolute;
+      top: -16px;
+      right: 80px;
+      font-size: 10px;
+      color: #a78bfa;
+    }
+  }
+
+  .chart-bars {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 20px;
+    bottom: 50px;
+    display: flex;
+    align-items: flex-end;
+    gap: 0;
+  }
+
+  .chart-bar {
+    flex: 0 0 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .bar-value {
+    font-size: 11px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  .bar-column {
+    width: 50px;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .bar-label {
+    font-size: 10px;
+    color: #666;
+    margin-top: 6px;
+  }
+}

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

@@ -0,0 +1,36 @@
+# ForecastGrid 组件
+
+预测矩阵表格组件，展示预测矩阵数据。
+
+## 使用方式
+
+```tsx
+import ForecastGrid from './components/forecastGrid__c';
+
+<ForecastGrid
+  title="Forecast Grid"
+  rows={[
+    { name: 'Alice', quota: '$3,000,000', aiForecast: '$2,400,000', closed: '$1,200,000', commit: '$1,800,000', bestCase: '$2,500,000', pipeline: '$8,400,000', coverage: '2.8x' },
+  ]}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | 'Forecast Grid' |
+| rows | 表格数据 | ForecastRow[] | [] |
+
+## ForecastRow
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| name | 名称 | string |
+| quota | Quota | string |
+| aiForecast | AI预测 | string |
+| closed | 已关闭 | string |
+| commit | 提交 | string |
+| bestCase | 最佳情况 | string |
+| pipeline | 管道 | string |
+| coverage | 覆盖率 | string |

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

@@ -0,0 +1,86 @@
+/**
+ * @file 预测矩阵表格组件
+ * @description 展示预测矩阵数据，包含Quota、AI Forecast、Closed、Commit、Best Case、Pipeline等
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface ForecastRow {
+  name: string;
+  quota: string;
+  aiForecast: string;
+  closed: string;
+  commit: string;
+  bestCase: string;
+  pipeline: string;
+  coverage: string;
+}
+
+interface ForecastGridProps {
+  title?: string;
+  rows?: ForecastRow[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface ForecastGridState {
+  loading: boolean;
+}
+
+class ForecastGrid extends BaseCmp<ForecastGridProps, ForecastGridState> {
+  constructor(props: ForecastGridProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('ForecastGrid 组件挂载');
+  }
+
+  render() {
+    const { title = 'Forecast Grid', rows = [], className, style } = this.props;
+
+    return (
+      <div className={`forecast-grid__c ${className || ''}`} style={style}>
+        <h3 className="grid-title">{title}</h3>
+        <div className="table-wrapper">
+          <table className="grid-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th style={{ textAlign: 'right' }}>Quota</th>
+                <th style={{ textAlign: 'right' }}>✨ AI Forecast</th>
+                <th style={{ textAlign: 'right' }}>Closed</th>
+                <th style={{ textAlign: 'right' }}>Commit</th>
+                <th style={{ textAlign: 'right' }}>Best Case</th>
+                <th style={{ textAlign: 'right' }}>Pipeline</th>
+                <th style={{ textAlign: 'right' }}>Coverage</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, index) => (
+                <tr key={index}>
+                  <td style={{ textAlign: 'left' }}>{row.name}</td>
+                  <td style={{ textAlign: 'right' }}>{row.quota}</td>
+                  <td style={{ textAlign: 'right' }}>{row.aiForecast}</td>
+                  <td style={{ textAlign: 'right' }}>{row.closed}</td>
+                  <td style={{ textAlign: 'right' }}>{row.commit}</td>
+                  <td style={{ textAlign: 'right' }}>{row.bestCase}</td>
+                  <td style={{ textAlign: 'right' }}>{row.pipeline}</td>
+                  <td style={{ textAlign: 'right' }}>{row.coverage}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(ForecastGrid);

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

@@ -0,0 +1,34 @@
+export class ForecastGridModel {
+  label: string = '预测矩阵表格';
+  description: string = '展示预测矩阵数据，包含Quota、AI Forecast、Closed、Commit、Best Case、Pipeline等';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/forecastGrid.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Forecast Grid',
+    rows: [
+      { name: 'Alice', quota: '$3,000,000', aiForecast: '$2,400,000', closed: '$1,200,000', commit: '$1,800,000', bestCase: '$2,500,000', pipeline: '$8,400,000', coverage: '2.8x' },
+      { name: 'Steve', quota: '$3,500,000', aiForecast: '$2,800,000', closed: '$800,000', commit: '$2,200,000', bestCase: '$3,000,000', pipeline: '$10,850,000', coverage: '3.1x' },
+      { name: 'Chloe', quota: '$3,500,000', aiForecast: '$1,600,000', closed: '$1,200,000', commit: '$1,500,000', bestCase: '$2,300,000', pipeline: '$8,750,000', coverage: '2.5x' },
+    ],
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新预测矩阵数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'string',
+      name: 'title',
+      label: '标题',
+    },
+  ];
+}
+
+export default ForecastGridModel;

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

@@ -0,0 +1,48 @@
+.forecast-grid__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  overflow-x: auto;
+
+  .grid-title {
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  .grid-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;
+    }
+
+    td {
+      color: #333;
+    }
+
+    tbody tr {
+      transition: background 0.15s;
+
+      &:hover {
+        background: #fafafa;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+# GapCloser 组件
+
+Gap Closer组件，展示Rescue Commit和Upgrade Candidates两类卡片。
+
+## 使用方式
+
+```tsx
+import GapCloser from './components/gapCloser__c';
+
+<GapCloser
+  cards={[
+    { type: 'rescue', title: 'Rescue Commit', amount: '$1,200,000', dealCount: 3, description: '...' },
+    { type: 'upgrade', title: 'Upgrade Candidates', amount: '$2,500,000', dealCount: 4, description: '...' },
+  ]}
+  onViewDeals={(type) => console.log('View deals:', type)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| cards | Gap卡片数据 | GapCloserCard[] | [] |
+| onViewDeals | 查看商机回调 | (type: 'rescue' \| 'upgrade') => void | - |

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

@@ -0,0 +1,95 @@
+/**
+ * @file Gap Closer组件
+ * @description 展示Rescue Commit和Upgrade Candidates两类Gap Closer卡片
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface GapCloserCard {
+  type: 'rescue' | 'upgrade';
+  title: string;
+  amount: string;
+  dealCount: number;
+  description: string;
+}
+
+interface GapCloserProps {
+  cards?: GapCloserCard[];
+  onViewDeals?: (type: 'rescue' | 'upgrade') => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface GapCloserState {
+  loading: boolean;
+}
+
+class GapCloser extends BaseCmp<GapCloserProps, GapCloserState> {
+  constructor(props: GapCloserProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('GapCloser 组件挂载');
+  }
+
+  getCardStyle = (type: 'rescue' | 'upgrade') => {
+    if (type === 'rescue') {
+      return {
+        background: 'linear-gradient(135deg, #fff7ed, #ffedd5)',
+        borderLeftColor: '#f59e0b',
+      };
+    }
+    return {
+      background: 'linear-gradient(135deg, #f0f0ff, #e8e8ff)',
+      borderLeftColor: '#6366f1',
+    };
+  };
+
+  getCardTitleStyle = (type: 'rescue' | 'upgrade') => {
+    return type === 'rescue' ? '#92400e' : '#4338ca';
+  };
+
+  render() {
+    const { cards = [], onViewDeals, className, style } = this.props;
+
+    return (
+      <div className={`gap-closer__c ${className || ''}`} style={style}>
+        {cards.map((card, index) => (
+          <div
+            key={index}
+            className="gap-card"
+            style={this.getCardStyle(card.type)}
+          >
+            <div
+              className="gap-card-title"
+              style={{ color: this.getCardTitleStyle(card.type) }}
+            >
+              {card.type === 'rescue' ? '⚠' : '✨'} {card.title}
+            </div>
+            <div className="gap-card-amount">
+              <span className="amount-value">{card.amount}</span>
+              <span className="amount-count">· {card.dealCount} deals {card.type === 'rescue' ? 'at risk' : 'to pull in'}</span>
+            </div>
+            <div className="gap-card-desc">{card.description}</div>
+            <button
+              className="gap-card-btn"
+              style={{ backgroundColor: card.type === 'rescue' ? '#f59e0b' : '#6366f1' }}
+              onClick={() => onViewDeals?.(card.type)}
+            >
+              View Deals
+            </button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(GapCloser);

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

@@ -0,0 +1,43 @@
+export class GapCloserModel {
+  label: string = 'Gap Closer';
+  description: string = '展示Rescue Commit和Upgrade Candidates两类Gap Closer卡片';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/gapCloser.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    cards: [
+      {
+        type: 'rescue' as const,
+        title: 'Rescue Commit',
+        amount: '$1,200,000',
+        dealCount: 3,
+        description: 'Committed deals not fully AI-backed, still worth rescuing',
+      },
+      {
+        type: 'upgrade' as const,
+        title: 'Upgrade Candidates',
+        amount: '$2,500,000',
+        dealCount: 4,
+        description: 'High win-rate deals from Open Pipeline worth upgrading to Commit',
+      },
+    ],
+  };
+
+  functions = [
+    {
+      apiKey: 'openRescueDrawer',
+      label: '打开Rescue抽屉',
+      helpTextKey: '打开Rescue Commit抽屉',
+    },
+    {
+      apiKey: 'openUpgradeDrawer',
+      label: '打开Upgrade抽屉',
+      helpTextKey: '打开Upgrade Candidates抽屉',
+    },
+  ];
+
+  propsSchema = [];
+}
+
+export default GapCloserModel;

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

@@ -0,0 +1,60 @@
+.gap-closer__c {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .gap-card {
+    background: #fff;
+    border-radius: 8px;
+    padding: 12px 14px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    border-left: 3px solid;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .gap-card-title {
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 6px;
+  }
+
+  .gap-card-amount {
+    margin-bottom: 6px;
+  }
+
+  .amount-value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #333;
+  }
+
+  .amount-count {
+    font-size: 11px;
+    color: #888;
+  }
+
+  .gap-card-desc {
+    font-size: 11px;
+    color: #78716c;
+    margin-bottom: 8px;
+  }
+
+  .gap-card-btn {
+    padding: 7px 14px;
+    border: none;
+    border-radius: 6px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+    width: 100%;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+# KpiCards 组件
+
+KPI指标卡片组件，展示Quota、Closed、Forecast、AI Forecast等核心KPI指标。
+
+## 使用方式
+
+```tsx
+import KpiCards from './components/kpiCards__c';
+
+<KpiCards
+  columns={2}
+  items={[
+    { label: 'Quota', value: '$10,000,000' },
+    { label: 'Closed', value: '$3,200,000', subLabel: 'Gap: $6,800,000', subDirection: 'negative' },
+  ]}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| items | KPI数据 | KpiItem[] | [] |
+| columns | 列数 | number | 2 |
+| className | 自定义类名 | string | - |
+| style | 自定义样式 | React.CSSProperties | - |
+
+## KpiItem
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| label | 指标名称 | string |
+| value | 指标值 | string |
+| subLabel | 副文本 | string |
+| subDirection | 副文本方向 | 'negative' \| 'positive' |

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

@@ -0,0 +1,70 @@
+/**
+ * @file KPI指标卡片组件
+ * @description 展示Quota、Closed、Forecast、AI Forecast等核心KPI指标
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface KpiItem {
+  label: string;
+  value: string;
+  subLabel?: string;
+  subDirection?: 'negative' | 'positive';
+}
+
+interface KpiCardsProps {
+  items?: KpiItem[];
+  columns?: number;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface KpiCardsState {
+  loading: boolean;
+}
+
+class KpiCards extends BaseCmp<KpiCardsProps, KpiCardsState> {
+  constructor(props: KpiCardsProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('KpiCards 组件挂载');
+  }
+
+  render() {
+    const { items = [], columns = 2, className, style } = this.props;
+
+    return (
+      <div
+        className={`kpi-cards__c ${className || ''}`}
+        style={{
+          ...style,
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          gap: '8px',
+        }}
+      >
+        {items.map((item, index) => (
+          <div key={index} className="kpi-card">
+            <div className="kpi-label">{item.label}</div>
+            <div className="kpi-value">{item.value}</div>
+            {item.subLabel && (
+              <div className={`kpi-sub ${item.subDirection || ''}`}>
+                {item.subLabel}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(KpiCards);