neo-cmp-cli 1.13.12 → 1.13.15

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);

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

@@ -0,0 +1,50 @@
+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,285 @@
+/**
+ * @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,86 @@
+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;
+      }
+    }
+  }
+}