@baishuyun/chat-sdk 0.0.8 → 0.0.10

package/src/plugins/report-query-plugin/utils/get-group-rule.ts

@@ -0,0 +1,21 @@
+import { FieldType, IDashWidgetType } from '@baishuyun/types';
+
+export type GroupRule = 'year_month' | 'province_city' | undefined;
+
+export function getGroupRule(fieldType: FieldType, widgetType: IDashWidgetType): GroupRule {
+  switch (fieldType) {
+    case 'datetime':
+      return 'year_month';
+
+    case 'address':
+    case 'location':
+      // 地图组件中地址/位置字段不需要额外分组规则
+      if (widgetType === 'map_chart') {
+        return undefined;
+      }
+      return 'province_city';
+
+    default:
+      return undefined;
+  }
+}

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

@@ -0,0 +1,379 @@
+import {
+  IQueryResult,
+  IQueryResultPreviewerProps,
+  IQueryResultCreateParams,
+  IDashComponent,
+  IDashComponentField,
+  IDashComponentFilterCond,
+  IFilterField,
+  IQueryResultField,
+  FieldType,
+} from '@baishuyun/types';
+import { XFieldEnhance, MetricEnhance } from './utils/field-enhance';
+import { getFieldIcon } from './utils/get-field-icon';
+
+/** 生成唯一的 widget ID */
+const generateWidgetId = (): string => {
+  return `_widget_${Date.now()}`;
+};
+
+/** 将 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 as FieldType),
+    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 || [],
+
+    hasExport: false,
+    widgetId,
+    palette: 'default',
+    chart_label: { enable: true },
+    width: 30,
+    height: 20,
+    posX: 0,
+    posY: 0,
+    formulas: result.formulas || [],
+    widgetNameAlias: widgetId,
+    permission: 'all',
+    triggers: [],
+    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: {},
+
+    ...result,
+
+    xFields: (result.xFields || []).map((x, index) => {
+      return XFieldEnhance(x, result.type, index);
+    }),
+
+    yFields: (result.yFields || []).map((y, index) => {
+      return XFieldEnhance(y, result.type, index);
+    }),
+
+    metrics: (result.metrics || []).map((m, index) => {
+      return MetricEnhance(m, result.type, index);
+    }),
+
+    fields,
+    filter: {
+      cond: filterConds,
+      rel: filterRel,
+    },
+  };
+
+  console.log(component, result.formIds);
+
+  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: result.type,
+    xFields: (result.xFields || []).map((x, index) => {
+      return XFieldEnhance(x, result.type, index);
+    }),
+
+    yFields: (result.yFields || []).map((y, index) => {
+      return XFieldEnhance(y, result.type, index);
+    }),
+
+    metrics: (result.metrics || []).map((m, index) => {
+      return MetricEnhance(m, result.type, index);
+    }),
+
+    hasExport: false,
+    widgetId,
+    palette: 'default',
+    chart_label: { enable: true },
+    width: 30,
+    height: 20,
+    posX: 0,
+    posY: 0,
+    fields,
+    formulas: result.formulas || [],
+    widgetNameAlias: widgetId,
+    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/DashWidgetIcon.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IDashWidgetType } from '@baishuyun/types';
+import { DashWidgetIcon } from '@/components/biz-comp/dash-widget-icon';
+
+const DASH_WIDGET_TYPES: IDashWidgetType[] = [
+  'metric_table',
+  'gauge_chart',
+  'column_chart',
+  'funnel_chart',
+  'line_chart',
+  'pie_chart',
+  'area_chart',
+  'radar_chart',
+  'bar_chart',
+  'gantt',
+  'multi_axes_chart',
+  'data_table',
+  'background_table',
+  'pivot_table',
+  'map_chart',
+  'newMap',
+  'card',
+  'rili',
+  'description',
+  'image',
+  'gauge_imageMore',
+];
+
+const DASH_WIDGET_TYPE_LABEL: Record<IDashWidgetType, string> = {
+  metric_table: '指标图',
+  gauge_chart: '仪表盘',
+  column_chart: '柱形图',
+  funnel_chart: '漏斗图',
+  line_chart: '折线图',
+  pie_chart: '饼图',
+  area_chart: '面积图',
+  radar_chart: '雷达图',
+  bar_chart: '条形图',
+  gantt: '甘特图',
+  multi_axes_chart: '双轴图',
+  data_table: '数据表',
+  background_table: '背景表',
+  pivot_table: '透视图',
+  map_chart: '地图',
+  newMap: '新地图',
+  card: '卡片',
+  rili: '日历',
+  description: '富文本',
+  image: '图片',
+  gauge_imageMore: '仪表盘更多',
+};
+
+const meta: Meta<typeof DashWidgetIcon> = {
+  title: 'Example/Icons/DashWidgetIcon',
+  component: DashWidgetIcon,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    type: {
+      control: 'select',
+      options: DASH_WIDGET_TYPES,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DashWidgetIcon>;
+
+// 默认：指标图
+export const MetricTable: Story = {
+  args: { type: 'metric_table' },
+};
+
+// 仪表盘
+export const GaugeChart: Story = {
+  args: { type: 'gauge_chart' },
+};
+
+// 柱形图
+export const ColumnChart: Story = {
+  args: { type: 'column_chart' },
+};
+
+// 折线图
+export const LineChart: Story = {
+  args: { type: 'line_chart' },
+};
+
+// 饼图
+export const PieChart: Story = {
+  args: { type: 'pie_chart' },
+};
+
+// 条形图
+export const BarChart: Story = {
+  args: { type: 'bar_chart' },
+};
+
+// 所有图标类型一览
+export const AllTypes: Story = {
+  args: { type: 'metric_table' },
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gap: '16px',
+      }}
+    >
+      {DASH_WIDGET_TYPES.map((t) => (
+        <div
+          key={t}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '4px',
+            padding: '12px',
+            border: '1px solid #eee',
+            borderRadius: '8px',
+          }}
+        >
+          <DashWidgetIcon type={t} style={{ fontSize: 24 }} />
+          <span style={{ fontSize: 12, color: '#666' }}>{DASH_WIDGET_TYPE_LABEL[t]}</span>
+          <span style={{ fontSize: 10, color: '#aaa' }}>{t}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};