neo-cmp-cli 1.13.12 → 1.13.15

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

@@ -0,0 +1,183 @@
+/**
+ * @file AI推荐Commit抽屉组件
+ * @description 展示AI推荐的Commit商机，支持From Pipeline和From Commit两个Tab
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface CommitDeal {
+  id: string;
+  name: string;
+  account: string;
+  amount: string;
+  stage: string;
+  closeDate: string;
+  aiScore: string;
+  description?: string;
+}
+
+interface AiCommitDrawerProps {
+  visible?: boolean;
+  totalAmount?: string;
+  closedAmount?: string;
+  closedCount?: number;
+  tabs?: { key: string; label: string; amount: string; count: number }[];
+  pipelineDeals?: CommitDeal[];
+  commitDeals?: CommitDeal[];
+  onClose?: () => void;
+  onPrioritize?: (deal: CommitDeal) => void;
+  onDismiss?: (deal: CommitDeal) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface AiCommitDrawerState {
+  activeTab: string;
+}
+
+class AiCommitDrawer extends BaseCmp<AiCommitDrawerProps, AiCommitDrawerState> {
+  constructor(props: AiCommitDrawerProps) {
+    super(props);
+    this.state = {
+      activeTab: props.tabs?.[0]?.key ?? 'pipeline',
+    };
+  }
+
+  componentDidMount() {
+    console.log('AiCommitDrawer 组件挂载');
+  }
+
+  componentWillReceiveProps(nextProps: AiCommitDrawerProps) {
+    if (nextProps.visible && !this.props.visible) {
+      this.setState({ activeTab: nextProps.tabs?.[0]?.key ?? 'pipeline' });
+    }
+  }
+
+  handleTabChange = (tab: string) => {
+    this.setState({ activeTab: tab });
+  };
+
+  handleClose = () => {
+    const { onClose } = this.props;
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  renderDealCard = (deal: CommitDeal) => {
+    const { onPrioritize, onDismiss } = this.props;
+
+    return (
+      <div key={deal.id} className="deal-card">
+        <div className="deal-card-header">
+          <div className="deal-info">
+            <div className="deal-name">{deal.name}</div>
+            <div className="deal-account">
+              {deal.account} · {deal.amount}
+            </div>
+            <div className="deal-meta">
+              <span className="deal-stage">{deal.stage}</span>
+              <span> · Close: {deal.closeDate}</span>
+            </div>
+          </div>
+          <span className="deal-score">✨ {deal.aiScore}</span>
+        </div>
+        {deal.description && (
+          <div className="deal-description">{deal.description}</div>
+        )}
+        <div className="deal-actions">
+          <button
+            className="btn-prioritize"
+            onClick={() => onPrioritize?.(deal)}
+          >
+            Prioritize
+          </button>
+          <button className="btn-dismiss" onClick={() => onDismiss?.(deal)}>
+            Dismiss
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    const {
+      visible = false,
+      totalAmount = '$6,800,000',
+      closedAmount = '$3,200,000',
+      closedCount = 5,
+      tabs = [],
+      pipelineDeals = [],
+      commitDeals = [],
+      className,
+      style,
+    } = this.props;
+
+    const { activeTab } = this.state;
+
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <div className={`ai-commit-drawer__c-overlay`} onClick={this.handleClose}>
+        <div
+          className={`ai-commit-drawer__c ${className || ''}`}
+          style={style}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="drawer-header">
+            <h3>✨ AI Forecast</h3>
+            <button className="close-btn" onClick={this.handleClose}>
+              ✕
+            </button>
+          </div>
+
+          <div className="drawer-summary">
+            <span className="summary-amount">{totalAmount}</span>
+            <span className="summary-desc">
+              Based on deal health and engagement signals
+            </span>
+          </div>
+
+          {/* Closed Won 汇总 */}
+          <div className="closed-summary">
+            <div className="closed-info">
+              <div className="closed-label">Closed Won</div>
+              <div className="closed-amount">{closedAmount}</div>
+            </div>
+            <div className="closed-count">{closedCount} deals</div>
+          </div>
+
+          {/* Tab切换 */}
+          <div className="drawer-tabs">
+            {tabs.map((tab) => (
+              <button
+                key={tab.key}
+                className={`ai-commit-tab ${
+                  activeTab === tab.key ? 'active' : ''
+                }`}
+                onClick={() => this.handleTabChange(tab.key)}
+              >
+                {tab.label} · {tab.amount} · {tab.count} deals
+              </button>
+            ))}
+          </div>
+
+          {/* Tab内容 */}
+          <div className="drawer-content">
+            {activeTab === 'pipeline' &&
+              pipelineDeals.map((deal) => this.renderDealCard(deal))}
+            {activeTab === 'commit' &&
+              commitDeals.map((deal) => this.renderDealCard(deal))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(AiCommitDrawer);

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

@@ -0,0 +1,90 @@
+export class AiCommitDrawerModel {
+  label: string = 'AI推荐抽屉';
+  description: string =
+    '展示AI推荐的Commit商机，支持From Pipeline和From Commit两个Tab';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/aiCommitDrawer.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    visible: false,
+    totalAmount: '$6,800,000',
+    closedAmount: '$3,200,000',
+    closedCount: 5,
+    tabs: [
+      {
+        key: 'pipeline',
+        label: 'From Open Pipeline',
+        amount: '$2,500,000',
+        count: 2,
+      },
+      { key: 'commit', label: 'From Commit', amount: '$1,800,000', count: 2 },
+    ],
+    pipelineDeals: [
+      {
+        id: '1',
+        name: 'Starlight Initiative',
+        account: 'Tencent',
+        amount: '$500,000',
+        stage: 'Pipeline',
+        closeDate: '2026-05-20',
+        aiScore: '52%',
+        description:
+          'Strong engagement signals and past wins with this account',
+      },
+      {
+        id: '2',
+        name: 'Galaxy Partnership',
+        account: 'Alibaba',
+        amount: '$2,000,000',
+        stage: 'Best Case',
+        closeDate: '2026-05-10',
+        aiScore: '45%',
+        description: 'High product usage and active engagement in last 7 days',
+      },
+    ],
+    commitDeals: [
+      {
+        id: '3',
+        name: 'Aurora Solution',
+        account: 'ByteDance',
+        amount: '$800,000',
+        stage: 'Commit',
+        closeDate: '2026-04-30',
+        aiScore: '91%',
+      },
+      {
+        id: '4',
+        name: 'Apollo Project',
+        account: 'Huawei Tech',
+        amount: '$1,000,000',
+        stage: 'Commit',
+        closeDate: '2026-04-15',
+        aiScore: '86%',
+      },
+    ],
+  };
+
+  functions = [
+    {
+      apiKey: 'openDrawer',
+      label: '打开抽屉',
+      helpTextKey: '打开AI推荐抽屉',
+    },
+    {
+      apiKey: 'closeDrawer',
+      label: '关闭抽屉',
+      helpTextKey: '关闭AI推荐抽屉',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'boolean',
+      name: 'visible',
+      label: '是否显示',
+    },
+  ];
+}
+
+export default AiCommitDrawerModel;

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

@@ -0,0 +1,218 @@
+.ai-commit-drawer__c-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 150;
+}
+
+.ai-commit-drawer__c {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 480px;
+  height: 100%;
+  background: #fff;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+  overflow-y: auto;
+  padding: 24px;
+
+  .drawer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    h3 {
+      font-size: 16px;
+      margin: 0;
+    }
+
+    .close-btn {
+      border: none;
+      background: none;
+      font-size: 20px;
+      cursor: pointer;
+      color: #999;
+
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  .drawer-summary {
+    font-size: 12px;
+    color: #888;
+    margin-bottom: 20px;
+
+    .summary-amount {
+      font-weight: 700;
+      color: #6366f1;
+      font-size: 16px;
+    }
+
+    .summary-desc {
+      margin-left: 4px;
+    }
+  }
+
+  .closed-summary {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 16px;
+    margin-bottom: 20px;
+
+    .closed-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .closed-label {
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 2px;
+    }
+
+    .closed-amount {
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    .closed-count {
+      font-size: 12px;
+      color: #999;
+    }
+  }
+
+  .drawer-tabs {
+    display: flex;
+    gap: 0;
+    margin-bottom: 16px;
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+  .ai-commit-tab {
+    padding: 8px 16px;
+    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;
+    white-space: nowrap;
+
+    &:hover {
+      color: #6366f1;
+    }
+
+    &.active {
+      color: #6366f1;
+      border-bottom-color: #6366f1;
+    }
+  }
+
+  .drawer-content {
+    .deal-card {
+      border: 1px solid #e5e7eb;
+      border-left: 3px solid #6366f1;
+      border-radius: 10px;
+      padding: 14px;
+      margin-bottom: 10px;
+
+      .deal-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: start;
+        margin-bottom: 6px;
+      }
+
+      .deal-info {
+        flex: 1;
+      }
+
+      .deal-name {
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .deal-account {
+        font-size: 12px;
+        color: #888;
+      }
+
+      .deal-meta {
+        font-size: 11px;
+        color: #888;
+        margin-top: 2px;
+      }
+
+      .deal-stage {
+        background: #f0f0f0;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 10px;
+      }
+
+      .deal-score {
+        color: #6366f1;
+        font-weight: 600;
+        font-size: 13px;
+      }
+
+      .deal-description {
+        font-size: 12px;
+        color: #666;
+        background: #f8f9fa;
+        padding: 6px 8px;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+
+      .deal-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .btn-prioritize {
+        flex: 1;
+        padding: 7px;
+        border: none;
+        border-radius: 6px;
+        background: #6366f1;
+        color: #fff;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+        transition: opacity 0.2s;
+
+        &:hover {
+          opacity: 0.9;
+        }
+      }
+
+      .btn-dismiss {
+        flex: 1;
+        padding: 7px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        background: #fff;
+        cursor: pointer;
+        font-size: 12px;
+        color: #666;
+        transition: all 0.2s;
+
+        &:hover {
+          border-color: #6366f1;
+          color: #6366f1;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+# FilterBar 组件
+
+筛选栏组件，支持日期范围、负责人、业务类型等多维度筛选。
+
+## 使用方式
+
+```tsx
+import FilterBar from './components/filterBar__c';
+
+<FilterBar
+  filters={[
+    { name: 'closeDate', label: 'Close Date', type: 'select', options: [...] },
+    { name: 'owner', label: 'Opportunity Owner', type: 'owner' },
+  ]}
+  onChange={(key, value) => console.log(key, value)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| filters | 筛选配置数组 | FilterItem[] | [] |
+| values | 筛选值 | Record<string, string> | {} |
+| onChange | 筛选变化回调 | (key: string, value: string) => void | - |
+| onSearch | 搜索按钮回调 | () => void | - |
+
+## FilterItem
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| name | 字段标识 | string |
+| label | 显示标签 | string |
+| type | 类型 | 'select' \| 'date' \| 'owner' \| 'custom' |
+| options | 下拉选项 | FilterOption[] |