neo-cmp-cli 1.13.12 → 1.13.13

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

@@ -0,0 +1,186 @@
+/**
+ * @file 筛选栏组件
+ * @description 支持日期范围、负责人、业务类型等多维度筛选
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface FilterOption {
+  value: string;
+  label: string;
+}
+
+interface FilterItem {
+  name: string;
+  label: string;
+  type: 'select' | 'date' | 'owner' | 'custom';
+  options?: FilterOption[];
+  placeholder?: string;
+}
+
+interface FilterBarProps {
+  filters: FilterItem[];
+  values?: Record<string, string>;
+  onChange?: (key: string, value: string) => void;
+  onSearch?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface FilterBarState {
+  values: Record<string, string>;
+  ownerPickerOpen: boolean;
+  ownerSearchText: string;
+}
+
+class FilterBar extends BaseCmp<FilterBarProps, FilterBarState> {
+  constructor(props: FilterBarProps) {
+    super(props);
+    this.state = {
+      values: props.values || {},
+      ownerPickerOpen: false,
+      ownerSearchText: '',
+    };
+
+    this.handleFilterChange = this.handleFilterChange.bind(this);
+    this.handleOwnerSelect = this.handleOwnerSelect.bind(this);
+  }
+
+  componentDidMount() {
+    console.log('FilterBar 组件挂载');
+  }
+
+  handleFilterChange(key: string, value: string) {
+    this.setState((prevState) => ({
+      values: { ...prevState.values, [key]: value },
+    }));
+
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(key, value);
+    }
+  }
+
+  handleOwnerSelect(name: string) {
+    this.setState((prevState) => ({
+      values: { ...prevState.values, owner: name },
+      ownerPickerOpen: false,
+    }));
+
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange('owner', name);
+    }
+  }
+
+  toggleOwnerPicker = () => {
+    this.setState((prevState) => ({
+      ownerPickerOpen: !prevState.ownerPickerOpen,
+    }));
+  };
+
+  handleOwnerSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ ownerSearchText: e.target.value });
+  };
+
+  renderFilterItem(filter: FilterItem) {
+    const { values } = this.state;
+
+    switch (filter.type) {
+      case 'select':
+        return (
+          <div className="filter-group" key={filter.name}>
+            <label>{filter.label}</label>
+            <select
+              value={values[filter.name] || ''}
+              onChange={(e) => this.handleFilterChange(filter.name, e.target.value)}
+            >
+              {filter.options?.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+
+      case 'owner':
+        return (
+          <div className="filter-group owner-picker-wrap" key={filter.name}>
+            <label>{filter.label}</label>
+            <div
+              className="owner-picker-trigger"
+              onClick={this.toggleOwnerPicker}
+            >
+              <span className="owner-selected-text">
+                {values[filter.name] || 'Current User'}
+              </span>
+              <span className="owner-arrow">▾</span>
+            </div>
+            {this.state.ownerPickerOpen && (
+              <div className="owner-picker-dropdown open">
+                <input
+                  type="text"
+                  className="owner-search"
+                  placeholder="Search people or departments..."
+                  onChange={this.handleOwnerSearch}
+                />
+                <div className="owner-section-label">People</div>
+                {['Current User', 'Alice', 'Steve', 'Chloe']
+                  .filter((name) =>
+                    name.toLowerCase().includes(this.state.ownerSearchText.toLowerCase())
+                  )
+                  .map((name) => (
+                    <div
+                      key={name}
+                      className={`owner-item ${values[filter.name] === name ? 'selected' : ''}`}
+                      data-name={name}
+                      onClick={() => this.handleOwnerSelect(name)}
+                    >
+                      <span className="owner-check">{values[filter.name] === name ? '✓' : ''}</span>
+                      <span className="owner-icon">👤</span>
+                      {name}
+                    </div>
+                  ))}
+                <div className="owner-section-label">Departments</div>
+                {['Sales Dept', 'Enterprise Team']
+                  .filter((name) =>
+                    name.toLowerCase().includes(this.state.ownerSearchText.toLowerCase())
+                  )
+                  .map((name) => (
+                    <div
+                      key={name}
+                      className={`owner-item ${values[filter.name] === name ? 'selected' : ''}`}
+                      data-name={name}
+                      onClick={() => this.handleOwnerSelect(name)}
+                    >
+                      <span className="owner-check">{values[filter.name] === name ? '✓' : ''}</span>
+                      <span className="owner-icon">🏢</span>
+                      {name}
+                    </div>
+                  ))}
+              </div>
+            )}
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  }
+
+  render() {
+    const { filters = [], className, style } = this.props;
+
+    return (
+      <div className={`filter-bar__c ${className || ''}`} style={style}>
+        {filters.map((filter) => this.renderFilterItem(filter))}
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(FilterBar);

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

@@ -0,0 +1,72 @@
+export class FilterBarModel {
+  label: string = '筛选栏';
+  description: string = '支持日期范围、负责人、业务类型等多维度筛选';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/filterBar.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    filters: [
+      {
+        name: 'closeDate',
+        label: 'Close Date',
+        type: 'select',
+        options: [
+          { value: 'This Week', label: 'This Week' },
+          { value: 'This Month', label: 'This Month' },
+          { value: 'This Quarter', label: 'This Quarter' },
+          { value: 'Custom', label: 'Custom' },
+        ],
+      },
+      {
+        name: 'owner',
+        label: 'Opportunity Owner',
+        type: 'owner',
+      },
+      {
+        name: 'businessType',
+        label: 'Business Type',
+        type: 'select',
+        options: [
+          { value: 'New Business', label: 'New Business' },
+          { value: 'Renewal', label: 'Renewal' },
+          { value: 'Expansion', label: 'Expansion' },
+        ],
+      },
+      {
+        name: 'changesSince',
+        label: 'Changes Since',
+        type: 'select',
+        options: [
+          { value: 'Start of the Period', label: 'Start of the Period' },
+          { value: 'Custom', label: 'Custom' },
+        ],
+      },
+    ],
+    values: {},
+  };
+
+  functions = [
+    {
+      apiKey: 'resetFilters',
+      label: '重置筛选条件',
+      helpTextKey: '重置所有筛选条件为默认值',
+    },
+    {
+      apiKey: 'getFilters',
+      label: '获取筛选条件',
+      helpTextKey: '获取当前筛选条件',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'object',
+      name: 'filters',
+      label: '筛选配置',
+      schema: [],
+    },
+  ];
+}
+
+export default FilterBarModel;

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

@@ -0,0 +1,212 @@
+.filter-bar__c {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+
+    label {
+      font-size: 13px;
+      color: #666;
+      white-space: nowrap;
+    }
+
+    select,
+    input {
+      padding: 6px 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 13px;
+      background: #fff;
+      cursor: pointer;
+    }
+
+    select:focus {
+      border-color: #6366f1;
+      outline: none;
+    }
+  }
+
+  .filter-btn {
+    padding: 6px 16px;
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background: #fff;
+
+    &.active {
+      background: #6366f1;
+      color: #fff;
+      border-color: #6366f1;
+    }
+  }
+
+  /* Owner选人选部门组件 */
+  .owner-picker-wrap {
+    position: relative;
+  }
+
+  .owner-picker-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 13px;
+    cursor: pointer;
+    background: #fff;
+    min-width: 140px;
+
+    &:hover {
+      border-color: #6366f1;
+    }
+  }
+
+  .owner-selected-text {
+    flex: 1;
+  }
+
+  .owner-arrow {
+    font-size: 10px;
+    color: #999;
+  }
+
+  .owner-picker-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+    width: 260px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
+    z-index: 250;
+    padding: 8px 0;
+    max-height: 340px;
+    overflow-y: auto;
+
+    &.open {
+      display: block;
+    }
+  }
+
+  .owner-search {
+    width: calc(100% - 16px);
+    margin: 0 8px 8px;
+    padding: 8px 10px;
+    border: 1px solid #eee;
+    border-radius: 6px;
+    font-size: 12px;
+    outline: none;
+
+    &:focus {
+      border-color: #6366f1;
+    }
+  }
+
+  .owner-section-label {
+    padding: 6px 14px;
+    font-size: 11px;
+    color: #999;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .owner-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 14px;
+    font-size: 13px;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: #f5f5ff;
+    }
+
+    &.selected {
+      background: #f0f0ff;
+      color: #6366f1;
+      font-weight: 600;
+    }
+  }
+
+  .owner-icon {
+    font-size: 14px;
+    width: 20px;
+    text-align: center;
+  }
+
+  .owner-check {
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid #ccc;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    color: transparent;
+    flex-shrink: 0;
+  }
+
+  .owner-item.selected .owner-check {
+    background: #6366f1;
+    border-color: #6366f1;
+    color: #fff;
+  }
+
+  /* Changes Since 问号提示 */
+  .help-tip {
+    position: relative;
+    display: inline-block;
+    cursor: help;
+    color: #999;
+    font-size: 12px;
+    margin-left: 2px;
+
+    .help-tip-text {
+      display: none;
+      position: absolute;
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: #333;
+      color: #fff;
+      padding: 6px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      white-space: nowrap;
+      z-index: 100;
+      font-weight: 400;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 5px solid transparent;
+        border-top-color: #333;
+      }
+    }
+
+    &:hover .help-tip-text {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+# ForecastChart 组件
+
+预测看板图表组件，展示预测数据的堆叠柱状图。
+
+## 使用方式
+
+```tsx
+import ForecastChart from './components/forecastChart__c';
+
+<ForecastChart
+  title="Forecast Overview"
+  quotaValue="$10M"
+  forecastValue="$7.5M"
+  aiValue="$6.8M"
+  columns={[
+    { label: 'Closed', value: '$3.2M', color: '#3b82f6' },
+    { label: 'Commit', value: '$2.5M', color: '#22c55e' },
+  ]}
+/>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 标题 | string | 'Forecast Overview' |
+| quotaValue | Quota值 | string | '$10M' |
+| forecastValue | Forecast值 | string | '$7.5M' |
+| aiValue | AI预测值 | string | '$6.8M' |
+| columns | 柱状图数据 | ChartColumn[] | [] |
+| showAiButton | 显示AI按钮 | boolean | true |

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

@@ -0,0 +1,161 @@
+/**
+ * @file 预测看板图表组件
+ * @description 展示预测数据的堆叠柱状图，包含Closed、Commit、Best Case、Pipeline等
+ */
+import * as React from 'react';
+// @ts-ignore
+import { BaseCmp, StatusHoc, NeoEvent } from 'neo-ui-common';
+
+import './style.scss';
+
+interface ChartColumn {
+  label: string;
+  value: string;
+  height: number;
+  color: string;
+}
+
+interface ForecastChartProps {
+  title?: string;
+  quotaValue?: string;
+  forecastValue?: string;
+  aiValue?: string;
+  columns?: ChartColumn[];
+  showAiButton?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface ForecastChartState {
+  loading: boolean;
+}
+
+class ForecastChart extends BaseCmp<ForecastChartProps, ForecastChartState> {
+  constructor(props: ForecastChartProps) {
+    super(props);
+    this.state = {
+      loading: false,
+    };
+  }
+
+  componentDidMount() {
+    console.log('ForecastChart 组件挂载');
+  }
+
+  getScaleHeight = (value: string, max: string): number => {
+    const numValue = parseFloat(value.replace(/[$,M]/g, ''));
+    const numMax = parseFloat(max.replace(/[$,M]/g, ''));
+    if (isNaN(numValue) || isNaN(numMax) || numMax === 0) return 0;
+    return (numValue / numMax) * 100;
+  };
+
+  render() {
+    const {
+      title = 'Forecast Overview',
+      quotaValue = '$10M',
+      forecastValue = '$7.5M',
+      aiValue = '$6.8M',
+      columns = [],
+      showAiButton = true,
+      className,
+      style,
+    } = this.props;
+
+    const maxValue = 10; // 默认最大值 $10M
+    const chartHeight = 190; // 总高度
+    const gridLineHeight = chartHeight * 0.8; // 网格区域高度
+
+    // 计算Quota、Forecast、AI基准线位置
+    const quotaPos = 0; // 顶部
+    const forecastPos = this.getScaleHeight(forecastValue, quotaValue);
+    const aiPos = this.getScaleHeight(aiValue, quotaValue);
+
+    return (
+      <div className={`forecast-chart__c ${className || ''}`} style={style}>
+        <div className="chart-header">
+          <h3 className="chart-title">{title}</h3>
+          {showAiButton && (
+            <span
+              className="ai-btn"
+              onClick={() => console.log('AI Analysis clicked')}
+              title="AI Analysis"
+            >
+              ✨
+            </span>
+          )}
+        </div>
+
+        <div className="chart-content">
+          <div className="chart-y-axis">
+            <span>$10M</span>
+            <span>$8M</span>
+            <span>$6M</span>
+            <span>$4M</span>
+            <span>$2M</span>
+            <span>$0</span>
+          </div>
+
+          <div className="chart-main">
+            {/* 网格线 */}
+            <div className="chart-grid">
+              <div style={{ top: '0%' }} />
+              <div style={{ top: '20%' }} />
+              <div style={{ top: '40%' }} />
+              <div style={{ top: '60%' }} />
+              <div style={{ top: '80%' }} />
+              <div style={{ top: '100%' }} />
+            </div>
+
+            {/* Quota基准线 */}
+            <div className="chart-quota-line" style={{ top: `${quotaPos}%` }}>
+              <span className="quota-label">Quota: {quotaValue}</span>
+            </div>
+
+            {/* Forecast基准线 */}
+            <div
+              className="chart-forecast-line"
+              style={{ top: `${forecastPos}%` }}
+            >
+              <span className="forecast-label">Forecast {forecastValue}</span>
+            </div>
+
+            {/* AI基准线 */}
+            <div
+              className="chart-ai-line"
+              style={{ top: `${aiPos}%` }}
+            >
+              <span className="ai-label">✨ AI {aiValue}</span>
+            </div>
+
+            {/* 柱状图 */}
+            <div className="chart-bars">
+              {columns.map((col, index) => {
+                const heightPercent = this.getScaleHeight(col.value, quotaValue);
+                return (
+                  <div key={index} className="chart-bar">
+                    <span
+                      className="bar-value"
+                      style={{ color: col.color }}
+                    >
+                      {col.value}
+                    </span>
+                    <div
+                      className="bar-column"
+                      style={{
+                        height: `${(heightPercent / 100) * gridLineHeight}px`,
+                        backgroundColor: col.color,
+                      }}
+                    />
+                    <span className="bar-label">{col.label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default StatusHoc(ForecastChart);

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

@@ -0,0 +1,39 @@
+export class ForecastChartModel {
+  label: string = '预测看板图表';
+  description: string = '展示预测数据的堆叠柱状图，包含Closed、Commit、Best Case、Pipeline等';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/forecastChart.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    title: 'Forecast Overview',
+    quotaValue: '$10M',
+    forecastValue: '$7.5M',
+    aiValue: '$6.8M',
+    columns: [
+      { label: 'Closed', value: '$3.2M', height: 61, color: '#3b82f6' },
+      { label: 'Commit', value: '$2.5M', height: 47, color: '#22c55e' },
+      { label: 'Best Case', value: '$1.8M', height: 34, color: '#10b981' },
+      { label: 'Pipeline', value: '$2.5M', height: 47, color: '#93c5fd' },
+    ],
+    showAiButton: true,
+  };
+
+  functions = [
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '刷新预测图表数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'string',
+      name: 'title',
+      label: '标题',
+    },
+  ];
+}
+
+export default ForecastChartModel;