@baishuyun/chat-sdk 0.0.7 → 0.0.9

package/src/plugins/report-query-plugin/utils.tsx

@@ -0,0 +1,389 @@
+import {
+  IQueryResult,
+  IQueryResultPreviewerProps,
+  IQueryResultCreateParams,
+  IDashComponent,
+  IDashComponentField,
+  IDashComponentFilterCond,
+  IFilterField,
+  IQueryResultField,
+} from '@baishuyun/types';
+
+/** 生成唯一的 widget ID */
+const generateWidgetId = (): string => {
+  return `_widget_${Date.now()}`;
+};
+
+/** 生成唯一的 entry ID */
+const generateEntryId = (): string => {
+  const chars = 'abcdef0123456789';
+  let result = '';
+  for (let i = 0; i < 24; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+};
+
+/** 获取字段图标 */
+const getFieldIcon = (type: string): string => {
+  const iconMap: Record<string, string> = {
+    text: 'icon-widget-text',
+    textarea: 'icon-widget-textarea',
+    number: 'icon-widget-number',
+    datetime: 'icon-widget-datetime',
+    date: 'icon-widget-date',
+    time: 'icon-widget-time',
+    radiogroup: 'icon-widget-radiogroup',
+    checkboxgroup: 'icon-widget-checkboxgroup',
+    user: 'icon-widget-user',
+    usergroup: 'icon-widget-usergroup',
+    dept: 'icon-widget-dept',
+    deptgroup: 'icon-widget-deptgroup',
+    upload: 'icon-widget-upload',
+    image: 'icon-widget-image',
+    location: 'icon-widget-location',
+    select: 'icon-widget-select',
+    combo: 'icon-widget-combo',
+    signature: 'icon-widget-signature',
+  };
+  return iconMap[type] || 'icon-widget-text';
+};
+
+/** 将 IQueryResultField 转换为 IDashComponentField */
+const convertField = (
+  field: IQueryResultField,
+  formId: string,
+  index: number
+): IDashComponentField => {
+  return {
+    id: field.id ?? index,
+    name: field.name,
+    text: field.title,
+    type: field.type,
+    title: field.title,
+    form: formId,
+    isEditable: field.isEditable ?? false,
+    icon: getFieldIcon(field.type),
+    group: field.group || 'dimension',
+    formula: '',
+    tag: `f_${Date.now() + index}`,
+  };
+};
+
+/** 将 IFilterField 转换为 IDashComponentFilterCond */
+const convertFilterField = (filter: IFilterField, formId: string): IDashComponentFilterCond => {
+  return {
+    title: filter.title,
+    name: filter.name,
+    type: filter.type,
+    entryId: formId,
+    form: formId,
+    field: filter.name,
+    method: filter.method,
+    value: filter.value ?? [],
+    hasEmpty: filter.method !== 'not_empty',
+    fieldvalueMode: 'widget',
+    fieldvalueName: '',
+  };
+};
+
+const createLabelField = (formId: string): IDashComponentField => {
+  return {
+    name: 'label',
+    text: '标题',
+    type: 'textarea',
+    title: '标题',
+    form: formId,
+    isEditable: true,
+    icon: getFieldIcon('textarea'),
+    group: 'dimension',
+    formula: '',
+    tag: `f_${Date.now()}`,
+  };
+};
+
+/** 创建默认样式配置 */
+const createDefaultStyles = () => ({
+  theme: {
+    name: 'preset_style_light_1',
+    highLightColor: '#0265FF',
+    palette: 'preset_1',
+    gradation: 'preset_map_1',
+  },
+  background: {
+    type: 'color',
+    color: '#F4F6F9',
+  },
+  widget: {
+    theme: {
+      color: '#E9E9E9',
+      icon: 1,
+      cardName: 'preset_metric_1',
+    },
+    background: {
+      type: 'color',
+      color: '#FFFFFF',
+    },
+    fontSetting: {
+      titleColor: '#1F2D3D',
+      headColor: '#5E6D82',
+      textColor: '#1F2D3D',
+      textAlign: 'default',
+    },
+  },
+});
+
+/** 创建默认的 attrList 配置 */
+const createDefaultAttrList = () => ({
+  title: {
+    show: false,
+    text: '标题内容',
+    textStyle: {
+      color: '#333333',
+      fontStyle: 'normal',
+      fontSize: 16,
+      fontWeight: 'normal',
+    },
+    left: 'left',
+    borderColor: 'transparent',
+    borderWidth: 2,
+    padding: 5,
+    onBorderColor: false,
+    borderRadius: 0,
+    backgroundColor: 'transparent',
+  },
+  orient: 'vertical',
+  legend: {
+    textStyle: {
+      fontStyle: 'normal',
+      fontSize: 10,
+      fontWeight: 'normal',
+    },
+    itemWidth: 12,
+    itemHeight: 12,
+    position: 'bottom',
+    type: 'plain',
+    padding: 10,
+  },
+  itemStyle: {
+    opacity: 0.7,
+    borderWidth: 2,
+  },
+  tooltip: {
+    show: true,
+    triggerOn: 'mousemove',
+    position: '0',
+    seriesName: '',
+    formatter: '1',
+    opacity: 1,
+    textStyle: {
+      color: '#FFFFFF',
+      fontStyle: 'normal',
+      fontSize: 14,
+      fontWeight: 'normal',
+    },
+  },
+  label: {
+    fontStyle: 'normal',
+    fontWeight: 'normal',
+    fontSize: 10,
+    position: 'top',
+    formatter: '1',
+  },
+});
+
+/** 将 IQueryResult 转换为 IQueryResultPreviewerProps */
+export const queryResult2previewerProps = (
+  result: IQueryResult,
+  entryId: string
+): IQueryResultPreviewerProps => {
+  const appId = result.appID || '';
+  const widgetId = generateWidgetId();
+  const formId = result.formIds?.[0] || '';
+  const componentName = result.title || '未命名数据表';
+
+  // 转换字段
+  const fields: IDashComponentField[] =
+    result.fields?.map((field, index) => convertField(field, formId, index)) || [];
+
+  // 转换过滤条件
+  const filterConds: IDashComponentFilterCond[] =
+    result.filter?.conds?.map((cond) => convertFilterField(cond, formId)) || [];
+  const filterRel = result.filter?.rel || 'and';
+
+  // 创建组件配置
+  const component: IDashComponent = {
+    title: componentName,
+    forms: result.formIds || [],
+    type: 'data_table',
+    xFields: [],
+    metrics: [],
+    hasExport: false,
+    widgetId,
+    palette: 'default',
+    chart_label: { enable: true },
+    width: 30,
+    height: 20,
+    posX: 0,
+    posY: 0,
+    fields,
+    formulas: result.formulas || [],
+    widgetNameAlias: widgetId,
+    yFields: [],
+    permission: 'all',
+    triggers: [],
+    filter: {
+      cond: filterConds,
+      rel: filterRel,
+    },
+    defaultSort: [],
+    reportAuth: [],
+    enableRowEdit: false,
+    attrList: createDefaultAttrList(),
+    batchmenu: { enable: true, set: [] },
+    itemSeleable: true,
+    itemMarekerable: true,
+    mapScale: 14,
+    itemDataable: true,
+    scopefields: [],
+    menu: { enable: true, set: [] },
+    onSwitchButton: false,
+    BtnName: '点击操作',
+    FunctionBtn: 'itemManualData',
+    dryRun: true,
+    DataMode: false,
+    mapfields: [],
+    tFields: [],
+    bgColorFilter: [],
+    cardConfig: { widget_id: '{}' },
+    cardConfigFields: [],
+    selectFields: [],
+    mapFields: [],
+    selectArg: {},
+    thresholds: [],
+    guideline: [],
+    treeFields: {},
+    batchmenuAuth: {},
+  };
+
+  const components: Record<string, IDashComponent> = {
+    [widgetId]: component,
+  };
+
+  const styles = createDefaultStyles();
+
+  // 创建 entry 配置（用于 allComponentDash）
+  const entry = {
+    appId,
+    entryId,
+    hasLazyLoad: true,
+    styles,
+    autoLoad: true,
+    rel: filterRel,
+    cacheFilter: 0,
+    isMobileFilteringButton: 0 as const,
+    showFilter: 0 as const,
+    components,
+    mode: 'preview' as const,
+    dryRun: true,
+    name: result.title || '未命名分析报表',
+  };
+
+  return {
+    appId,
+    entryId,
+    hasLazyLoad: true,
+    styles,
+    autoLoad: true,
+    rel: 'and',
+    cacheFilter: 0,
+    isMobileFilteringButton: 1,
+    showFilter: 0,
+    components,
+    mode: 'preview',
+    showType: 'popup',
+    name: result.title || '未命名分析报表',
+    allComponentDash: {
+      entry,
+    },
+  };
+};
+
+export const queryResult2createParams = (
+  result: IQueryResult,
+  entryId: string
+): IQueryResultCreateParams => {
+  const appId = result.appID || '';
+  const widgetId = generateWidgetId();
+  const formId = result.formIds?.[0] || '';
+  const componentName = result.title || '未命名数据表';
+
+  const labelField = createLabelField(formId);
+  const fields: IDashComponentField[] = [labelField].concat(
+    result.fields?.map((field, index) => convertField(field, formId, index)) || []
+  );
+
+  const filterConds: IDashComponentFilterCond[] =
+    result.filter?.conds?.map((cond) => convertFilterField(cond, formId)) || [];
+  const filterRel = result.filter?.rel || 'and';
+
+  const widget: IDashComponent = {
+    title: componentName,
+    forms: result.formIds || [],
+    type: 'data_table',
+    xFields: [],
+    metrics: [],
+    hasExport: false,
+    widgetId,
+    palette: 'default',
+    chart_label: { enable: true },
+    width: 30,
+    height: 20,
+    posX: 0,
+    posY: 0,
+    fields,
+    formulas: result.formulas || [],
+    widgetNameAlias: widgetId,
+    yFields: [],
+    permission: 'all',
+    triggers: [],
+    filter: {
+      cond: filterConds,
+      rel: filterRel,
+    },
+    defaultSort: [],
+    reportAuth: [],
+    enableRowEdit: false,
+    attrList: createDefaultAttrList(),
+    batchmenu: { enable: true, set: [] },
+    itemSeleable: true,
+    itemMarekerable: true,
+    mapScale: 14,
+    itemDataable: true,
+    scopefields: [],
+    menu: { enable: true, set: [] },
+    onSwitchButton: false,
+    BtnName: '点击操作',
+    FunctionBtn: 'itemManualData',
+    DataMode: false,
+    mapfields: [],
+    tFields: [],
+    bgColorFilter: [],
+    cardConfig: { widget_id: {} },
+    cardConfigFields: [],
+    selectFields: [],
+    mapFields: [],
+    selectArg: {},
+    thresholds: [],
+    guideline: [],
+    treeFields: {},
+  };
+
+  return {
+    appId,
+    entryId,
+    widget,
+    datahelpers_remove: [],
+    datahelpers: {},
+  };
+};

package/src/sdk.impl.tsx

@@ -117,6 +117,13 @@ export class ChatSDK implements IChatSDK {
     };
   }
 
+  public setUserId(userId: string) {
+    this.options.chatApiHeaders = {
+      ...this.options.chatApiHeaders,
+      'X-User-Id': userId,
+    };
+  }
+
   public getChatStatus() {
     return this.Store.getState().chatStatus;
   }

package/src/store/index.ts

@@ -104,8 +104,9 @@ export const setupStoreSubscriptions = (store: ChatStore, option: IChatSDKOption
     (status) => {
       const eventBus = store.getState().eventBus;
       const visible = status !== 'hide';
-      eventBus.emit('chat-area-visibility-change', { visible });
       option.onChatStatusChange?.(status);
+      // @deprecated, will be removed in future versions
+      eventBus.emit('chat-area-visibility-change', { visible, status });
       console.log('chat status changed:', status);
     }
   );

package/src/stories/CardField.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { CardField } from '@/components/bs-ui/card-field';
+
+const meta: Meta<typeof CardField> = {
+  title: 'Example/Chat/CardField',
+  component: CardField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardField>;
+
+// 基础用法
+export const Base: Story = {
+  args: {
+    label: '维度（行）',
+    children: '仓库、产品名称、产品编码、日期（年-月）',
+  },
+};
+
+// label 过长省略展示
+export const LongLabel: Story = {
+  args: {
+    label: '这是一个非常长的标签文字需要省略展示',
+    children: '内容区域',
+  },
+};
+
+// 无 children 时显示「无」
+export const NoChildren: Story = {
+  args: {
+    label: '空字段',
+  },
+};
+
+// children 为空字符串
+export const EmptyChildren: Story = {
+  args: {
+    label: '字段名称',
+    children: '',
+  },
+};
+
+// children 内容较长换行展示
+export const LongContent: Story = {
+  args: {
+    label: '详细描述',
+    children:
+      '这是一段很长的内容，用于测试换行效果。内容区域支持自动换行，确保文字不会溢出容器，保持良好的阅读体验。',
+  },
+};
+
+// 多个 CardField 组合使用
+export const MultipleFields: Story = {
+  args: {
+    label: '维度（行）',
+    children: '仓库、产品名称、产品编码、日期（年-月）',
+  },
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <CardField label="维度（行）">仓库、产品名称、产品编码、日期（年-月）</CardField>
+      <CardField label="维度（列）">产品类别</CardField>
+      <CardField label="指标">销售额、销售量、库存量</CardField>
+      <CardField label="筛选条件" />
+    </div>
+  ),
+};
+
+// children 为自定义 ReactNode
+export const CustomChildren: Story = {
+  args: {
+    label: '状态',
+    children: <span className="text-green-500 font-medium">已完成</span>,
+  },
+};

package/src/stories/FormulaField.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormulaField } from '@/plugins/report-query-plugin/components/result-cards/FormulaField';
+
+const meta: Meta<typeof FormulaField> = {
+  title: 'Example/Chat/FormulaField',
+  component: FormulaField,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 308 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    field: {
+      name: '_formula_1770204131633',
+      title: '活动数量',
+      formula: 'COUNT($_widget_1545113120234)',
+    },
+  },
+} satisfies Meta<typeof FormulaField>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** COUNT → 计数 */
+export const Count: Story = {};
+
+/** SUM → 求和 */
+export const Sum: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131634',
+      title: '总销售金额',
+      formula: 'SUM($_widget_1766566822319)',
+    },
+  },
+};
+
+/** MAX → 最大值 */
+export const Max: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131635',
+      title: '最高库存',
+      formula: 'MAX($_widget_1751887349089)',
+    },
+  },
+};
+
+/** MIN → 最小值 */
+export const Min: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131636',
+      title: '最低库存',
+      formula: 'MIN($_widget_1751887349089)',
+    },
+  },
+};
+
+/** AVERAGE → 平均 */
+export const Average: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131637',
+      title: '平均单价',
+      formula: 'AVERAGE($_widget_1766566822319)',
+    },
+  },
+};
+
+/** COUNTDISTINCT → 去重计数 */
+export const CountDistinct: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131638',
+      title: '产品种类数',
+      formula: 'COUNTDISTINCT($_widget_1545113120234)',
+    },
+  },
+};
+
+/** 算术表达式（无聚合函数） → 不显示 tag */
+export const ArithmeticExpression: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131639',
+      title: '利润计算',
+      formula: '$_widget_1751887349089 - $_widget_1766566822319',
+    },
+  },
+};
+
+/** 长标题截断 */
+export const LongTitle: Story = {
+  args: {
+    field: {
+      name: '_formula_1770204131640',
+      title: '这是一个非常长的公式字段名称需要被截断显示',
+      formula: 'COUNT($_widget_1545113120234)',
+    },
+  },
+};
+
+/** 多条公式一览 */
+export const MultipleFormulas: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <FormulaField
+        field={{ name: '_formula_1', title: '活动数量', formula: 'COUNT($_widget_1545113120234)' }}
+      />
+      <FormulaField
+        field={{
+          name: '_formula_2',
+          title: '同意参与活动数量',
+          formula: 'COUNT($_widget_1551492482126)',
+        }}
+      />
+      <FormulaField
+        field={{
+          name: '_formula_3',
+          title: '需要货品支持数量',
+          formula: 'COUNT($_widget_1566611350781)',
+        }}
+      />
+      <FormulaField
+        field={{ name: '_formula_4', title: '总金额', formula: 'SUM($_widget_1766566822319)' }}
+      />
+      <FormulaField
+        field={{
+          name: '_formula_5',
+          title: '利润',
+          formula: '$_widget_1751887349089 - $_widget_1766566822319',
+        }}
+      />
+    </div>
+  ),
+};

package/src/stories/FormulaTag.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { FormulaTag } from '@/components/bs-ui/formula-tag';
+import { type FormulaOp, FORMULA_OP_LABEL } from '@baishuyun/types';
+
+const meta = {
+  title: 'Example/Chat/FormulaTag',
+  component: FormulaTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: Object.keys(FORMULA_OP_LABEL) as FormulaOp[],
+      description: '统计方式',
+    },
+  },
+  args: {
+    type: 'sum',
+  },
+} satisfies Meta<typeof FormulaTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 求和 – #3767F1 */
+export const Sum: Story = {
+  args: { type: 'sum' },
+};
+
+/** 最大值 – #F06648 */
+export const Max: Story = {
+  args: { type: 'max' },
+};
+
+/** 最小值 – #4ACC8C */
+export const Min: Story = {
+  args: { type: 'min' },
+};
+
+/** 平均 – #4AC0EC */
+export const Average: Story = {
+  args: { type: 'average' },
+};
+
+/** 计数 – #9362CE */
+export const Count: Story = {
+  args: { type: 'count' },
+};
+
+/** 去重计数 – #F168B6 */
+export const CountDistinct: Story = {
+  args: { type: 'countDistinct' },
+};
+
+/** 所有统计方式一览 */
+export const AllTypes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      {(Object.keys(FORMULA_OP_LABEL) as FormulaOp[]).map((op) => (
+        <FormulaTag key={op} type={op} />
+      ))}
+    </div>
+  ),
+};