neo-cmp-cli 1.13.11 → 1.13.13

package/template/neo-bi-cmps/docs//350/264/246/345/217/267/347/233/270/345/205/263/344/277/241/346/201/257.md

@@ -0,0 +1,10 @@
+Gartner 租户管理员账号：
+tina.kung@qingmiaox.org
+Gartner0718
+
+pipeline设计稿：https://www.figma.com/design/n5orqOOhfsRNXGnOUYWSYp/%E5%95%86%E6%9C%BAPipeline%E5%92%8C%E9%A2%84%E6%B5%8B%EF%BC%88to26Gartner%EF%BC%89?node-id=14-10608&t=yFrDOnJuuaMFUACl-4
+
+figma账号：summer_han23@163.com
+密码：neocrm123456
+
+环境：https://crm.xiaoshouyi.com/bff/neoweb#/neoPage/customPage/Pipeline

package/template/neo-bi-cmps/package.json

@@ -50,7 +50,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.15",
     "@types/axios": "^0.14.0",
-    "neo-cmp-cli": "^1.13.11",
+    "neo-cmp-cli": "^1.13.13",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.9",
     "prettier": "^2.0.5"

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

@@ -0,0 +1,52 @@
+# AiCommitDrawer 组件
+
+AI推荐Commit抽屉组件，展示AI推荐的Commit商机。
+
+## 使用方式
+
+```tsx
+import AiCommitDrawer from './components/aiCommitDrawer__c';
+
+<AiCommitDrawer
+  visible={true}
+  totalAmount="$6,800,000"
+  closedAmount="$3,200,000"
+  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={[...]}
+  commitDeals={[...]}
+  onClose={() => console.log('Close')}
+  onPrioritize={(deal) => console.log('Prioritize:', deal)}
+  onDismiss={(deal) => console.log('Dismiss:', deal)}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| visible | 是否显示 | boolean | false |
+| totalAmount | AI预测总额 | string | '$6,800,000' |
+| closedAmount | 已关闭金额 | string | '$3,200,000' |
+| closedCount | 已关闭数量 | number | 5 |
+| tabs | Tab配置 | { key, label, amount, count }[] | [] |
+| pipelineDeals | Pipeline商机 | CommitDeal[] | [] |
+| commitDeals | Commit商机 | CommitDeal[] | [] |
+| onClose | 关闭回调 | () => void | - |
+| onPrioritize | 优先处理回调 | (deal: CommitDeal) => void | - |
+| onDismiss | 忽略回调 | (deal: CommitDeal) => void | - |
+
+## CommitDeal
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| id | 唯一标识 | string |
+| name | 商机名称 | string |
+| account | 账户 | string |
+| amount | 金额 | string |
+| stage | 阶段 | string |
+| closeDate | 关闭日期 | string |
+| aiScore | AI评分 | string |
+| description | 描述 | string |

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

@@ -0,0 +1,176 @@
+/**
+ * @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,49 @@
+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[] |