@hsu-react/ui 0.0.1

package/lib/components/Chart/chartUtils/calculateAxisConfig.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateAxisConfig = calculateAxisConfig;
+/**
+ * 计算合适的Y轴范围和间隔，确保0是刻度点，且总刻度数固定为6个
+ * @param min 最小值
+ * @param max 最大值
+ * @returns { min, max, interval } Y轴配置
+ */
+function calculateAxisConfig(min, max) {
+  // 根据数值大小选择合适的取整基数
+  const getNiceNumber = value => {
+    if (value === 0) return 1;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(Math.abs(value))));
+    const normalized = value / magnitude;
+
+    // 选择 1, 2, 5, 10 这样的"整齐"数字
+    let niceNormalized;
+    if (normalized <= 1) niceNormalized = 1;else if (normalized <= 2) niceNormalized = 2;else if (normalized <= 5) niceNormalized = 5;else niceNormalized = 10;
+    return niceNormalized * magnitude;
+  };
+
+  // 处理无效数据
+  if (min === Number.POSITIVE_INFINITY || max === Number.NEGATIVE_INFINITY) {
+    return {
+      min: 0,
+      max: 5,
+      interval: 1
+    };
+  }
+
+  // 如果数据全部为0，返回默认值（6个刻度：0,1,2,3,4,5）
+  if (min === 0 && max === 0) {
+    return {
+      min: 0,
+      max: 5,
+      interval: 1
+    };
+  }
+
+  // 如果数据跨越0（有正有负）
+  if (min < 0 && max > 0) {
+    const absMax = Math.abs(max * 1.1);
+    const absMin = Math.abs(min * 1.1);
+
+    // 计算总范围，分成5个间隔（6个刻度）
+    const totalRange = absMax + absMin;
+    const roughInterval = totalRange / 5;
+    const interval = getNiceNumber(roughInterval);
+
+    // 计算需要多少个刻度能覆盖正负数据
+    const negativeSteps = Math.ceil(absMin / interval);
+    const positiveSteps = Math.ceil(absMax / interval);
+    const totalSteps = negativeSteps + positiveSteps; // 不包括0
+
+    // 如果总刻度数正好是6个（5个间隔+0）
+    if (totalSteps === 5) {
+      return {
+        min: -negativeSteps * interval,
+        max: positiveSteps * interval,
+        interval
+      };
+    }
+
+    // 否则，调整为固定5个间隔，按比例分配正负两边
+    const ratio = absMax / (absMax + absMin);
+    const positiveIntervals = Math.round(ratio * 5);
+    const negativeIntervals = 5 - positiveIntervals;
+    return {
+      min: -negativeIntervals * interval,
+      max: positiveIntervals * interval,
+      interval
+    };
+  }
+
+  // 如果全是非负数（固定6个刻度：0到max，分5段）
+  if (min >= 0) {
+    const roughMax = max * 1.1;
+    const roughInterval = roughMax / 5;
+    const interval = getNiceNumber(roughInterval);
+    return {
+      min: 0,
+      max: interval * 5,
+      interval
+    };
+  }
+
+  // 如果全是负数（固定6个刻度：min到0，分5段）
+  const roughMin = Math.abs(min * 1.1);
+  const roughInterval = roughMin / 5;
+  const interval = getNiceNumber(roughInterval);
+  return {
+    min: -interval * 5,
+    max: 0,
+    interval
+  };
+}

package/lib/components/Chart/chartUtils/chartTooltipFormatter.d.ts

@@ -0,0 +1,23 @@
+import * as echarts from "echarts";
+type TooltipRenderMode = "html" | "richText";
+interface RichTextTooltipMarker {
+    renderMode: TooltipRenderMode;
+    content: string;
+    style: Record<string, unknown>;
+}
+export interface TooltipParams {
+    marker?: string | RichTextTooltipMarker;
+    seriesName?: string;
+    value?: unknown;
+    color?: string | echarts.Color;
+    name?: string;
+}
+export interface ChartTooltipFormatterProps {
+    params: TooltipParams | TooltipParams[];
+    hideName?: boolean;
+    hideMarker?: boolean;
+    textStyle?: Record<string, unknown>;
+    unit?: string;
+}
+declare const chartTooltipFormatter: (props: ChartTooltipFormatterProps) => string;
+export default chartTooltipFormatter;

package/lib/components/Chart/chartUtils/chartTooltipFormatter.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const chartTooltipFormatter = props => {
+  const {
+    params,
+    hideName,
+    hideMarker,
+    textStyle = {
+      fontSize: 14,
+      color: "#666",
+      fontWeight: 400
+    },
+    unit
+  } = props;
+  if (!Array.isArray(params)) {
+    return `
+      <div style="margin: 0;line-height:1;">
+        <div style="margin: 0;line-height:1;">
+          ${hideMarker ? "" : `${params?.marker}`}
+          <span style="font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};margin-left:2px">${params?.name}</span>
+          <span style="float:right;margin-left:20px;font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight}">${params?.value}${unit ? ` ` + unit : ""}</span>
+          <div style="clear:both"></div>
+        </div>
+        <div style="clear:both"></div>
+      </div>
+    `;
+  }
+  if (params.length === 1) {
+    const item = params[0];
+    return `
+      <div style="margin: 0;line-height:1;">
+        <div style="margin: 0;line-height:1;">
+          ${hideMarker ? "" : `${item?.marker}`}
+          <span style="font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};margin-left:2px">${item?.name}</span>
+          <span style="float:right;margin-left:20px;font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight}">${item?.value}${unit ? ` ${unit}` : ""}</span>
+          <div style="clear:both"></div>
+        </div>
+        <div style="clear:both"></div>
+      </div>
+    `;
+  }
+  const items = params?.map((item, idx) => {
+    const value = item.value ?? "";
+    return `
+      <div style="margin: 0 0 ${idx === params.length - 1 ? "0" : "10px"} 0;line-height:1;">
+        <div style="margin: 0px 0 0;line-height:1;">
+          ${hideMarker ? "" : `${item?.marker}`}
+          <span style="font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};margin-left:2px">${item?.seriesName}</span>
+          <span style="float:right;margin-left:20px;font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight}">${value}${unit ? ` ${unit}` : ""}</span>
+          <div style="clear:both"></div>
+        </div>
+        <div style="clear:both"></div>
+      </div>
+    `;
+  }).join("");
+  return `
+    <div style="margin: 0px 0 0;line-height:1;">
+      <div style="margin: 0px 0 0;line-height:1;">
+        ${hideName ? "" : `<div style="margin-bottom: 10px;font-size:${textStyle?.fontSize}px;color:${textStyle?.color};font-weight:${textStyle?.fontWeight};line-height:1;">${params[0]?.name || ""}</div>`}
+        ${items}
+        <div style="clear:both"></div>
+      </div>
+      <div style="clear:both"></div>
+    </div>
+  `;
+};
+var _default = exports.default = chartTooltipFormatter;

package/lib/components/Chart/chartUtils/index.d.ts

@@ -0,0 +1,7 @@
+import chartTooltipFormatter from "./chartTooltipFormatter";
+import { TooltipParams, ChartTooltipFormatterProps } from "./chartTooltipFormatter";
+import { autoScrollLegend, AutoScrollLegendProps } from "../_utils/autoScrollLegend";
+import { calculateAxisConfig } from "./calculateAxisConfig";
+import { MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick } from "./yAxisDisplayUnit";
+export { chartTooltipFormatter, autoScrollLegend, calculateAxisConfig, MB_PER_GB, MB_PER_TB, trimAxisNumber, chineseMagnitudeDivisor, formatChineseMagnitudeTick, mbDisplayTier, formatMbAxisTick, };
+export type { TooltipParams, ChartTooltipFormatterProps, AutoScrollLegendProps, };

package/lib/components/Chart/chartUtils/index.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MB_PER_GB", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.MB_PER_GB;
+  }
+});
+Object.defineProperty(exports, "MB_PER_TB", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.MB_PER_TB;
+  }
+});
+Object.defineProperty(exports, "autoScrollLegend", {
+  enumerable: true,
+  get: function () {
+    return _autoScrollLegend.autoScrollLegend;
+  }
+});
+Object.defineProperty(exports, "calculateAxisConfig", {
+  enumerable: true,
+  get: function () {
+    return _calculateAxisConfig.calculateAxisConfig;
+  }
+});
+Object.defineProperty(exports, "chartTooltipFormatter", {
+  enumerable: true,
+  get: function () {
+    return _chartTooltipFormatter.default;
+  }
+});
+Object.defineProperty(exports, "chineseMagnitudeDivisor", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.chineseMagnitudeDivisor;
+  }
+});
+Object.defineProperty(exports, "formatChineseMagnitudeTick", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.formatChineseMagnitudeTick;
+  }
+});
+Object.defineProperty(exports, "formatMbAxisTick", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.formatMbAxisTick;
+  }
+});
+Object.defineProperty(exports, "mbDisplayTier", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.mbDisplayTier;
+  }
+});
+Object.defineProperty(exports, "trimAxisNumber", {
+  enumerable: true,
+  get: function () {
+    return _yAxisDisplayUnit.trimAxisNumber;
+  }
+});
+var _chartTooltipFormatter = _interopRequireDefault(require("./chartTooltipFormatter"));
+var _autoScrollLegend = require("../_utils/autoScrollLegend");
+var _calculateAxisConfig = require("./calculateAxisConfig");
+var _yAxisDisplayUnit = require("./yAxisDisplayUnit");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/Chart/chartUtils/yAxisDisplayUnit.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
+ * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ */
+export declare const MB_PER_GB = 1024;
+export declare const MB_PER_TB: number;
+export declare function trimAxisNumber(n: number): string;
+/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+export declare function chineseMagnitudeDivisor(max: number, interval: number): 1 | 10000 | 100000000;
+export declare function formatChineseMagnitudeTick(value: number, max: number, interval: number): string;
+/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+export declare function mbDisplayTier(maxMb: number, intervalMb: number): "MB" | "GB" | "TB";
+export declare function formatMbAxisTick(value: number, maxMb: number, intervalMb: number): string;

package/lib/components/Chart/chartUtils/yAxisDisplayUnit.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MB_PER_TB = exports.MB_PER_GB = void 0;
+exports.chineseMagnitudeDivisor = chineseMagnitudeDivisor;
+exports.formatChineseMagnitudeTick = formatChineseMagnitudeTick;
+exports.formatMbAxisTick = formatMbAxisTick;
+exports.mbDisplayTier = mbDisplayTier;
+exports.trimAxisNumber = trimAxisNumber;
+/**
+ * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
+ * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ */
+
+const MB_PER_GB = exports.MB_PER_GB = 1024;
+const MB_PER_TB = exports.MB_PER_TB = 1024 * 1024;
+function trimAxisNumber(n) {
+  if (Number.isInteger(n)) return String(n);
+  const s = n.toFixed(2).replace(/\.?0+$/, "");
+  return s === "" || s === "-" ? "0" : s;
+}
+
+/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+function chineseMagnitudeDivisor(max, interval) {
+  const m = Number.isFinite(max) ? max : 0;
+  const iv = Number.isFinite(interval) ? interval : 0;
+  if (m >= 1e8 && iv >= 1e8) return 100_000_000;
+  if (m >= 1e4 && iv >= 1e4) return 10_000;
+  return 1;
+}
+function formatChineseMagnitudeTick(value, max, interval) {
+  const v = Number(value);
+  if (v === 0) return "0";
+  const div = chineseMagnitudeDivisor(max, interval);
+  if (div === 1) return trimAxisNumber(v);
+  return trimAxisNumber(v / div);
+}
+
+/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+function mbDisplayTier(maxMb, intervalMb) {
+  const m = Number.isFinite(maxMb) ? maxMb : 0;
+  const iv = Number.isFinite(intervalMb) ? intervalMb : 0;
+  if (m >= MB_PER_TB && iv >= MB_PER_TB) return "TB";
+  if (m >= MB_PER_GB && iv >= MB_PER_GB) return "GB";
+  return "MB";
+}
+function formatMbAxisTick(value, maxMb, intervalMb) {
+  const v = Number(value);
+  if (v === 0) return "0";
+  const tier = mbDisplayTier(maxMb, intervalMb);
+  if (tier === "TB") return trimAxisNumber(v / MB_PER_TB);
+  if (tier === "GB") return trimAxisNumber(v / MB_PER_GB);
+  return trimAxisNumber(v);
+}

package/lib/components/Chart/index.d.ts

@@ -0,0 +1,60 @@
+import * as echarts from "echarts";
+import { ChartBarProps } from "./Bar";
+import { ChartPolarProps } from "./Polar";
+import { ChartGroupProps } from "./Group";
+import { ChartLineProps } from "./Line";
+import { ChartPieFC, ChartPieProps } from "./Pie";
+import { ChartGaugeProps } from "./Gauge";
+import { ChartSankeyProps } from "./Sankey";
+import { ChartTreeProps } from "./Tree";
+import { ChartBubbleProps } from "./Bubble";
+import { ChartHeatmapProps } from "./Heatmap";
+import { ChartRadarProps } from "./Radar";
+import React, { CSSProperties } from "react";
+export type CommonObj<T = unknown> = Record<string, T>;
+/**
+ * ChartTypes
+ * ChartOptionsType
+ *
+ * 关联 Group
+ */
+export type ChartTypes = "Line" | "Bar" | "Pie";
+export type ChartOptionsType = ChartLineProps | ChartBarProps | ChartPieProps;
+export type ChartOptionType = CommonObj;
+export type ChartsOption = echarts.EChartsOption;
+export type Series = echarts.SeriesOption & ChartOptionType;
+export interface SeriesData<T = number | undefined> {
+    series?: Series;
+    value: T;
+    name?: string;
+    [key: string]: unknown;
+}
+export type SeriesDataType = Array<SeriesData<number | (number | undefined)[] | undefined> | (number | undefined)>;
+interface VarCSSProperties {
+    [key: string]: string | number | undefined;
+}
+export type ChartCSSProperties = VarCSSProperties & CSSProperties;
+export interface ChartCommonProps extends ChartsOption {
+    className?: string;
+    style?: ChartCSSProperties;
+    insideDataZoom?: echarts.DataZoomComponentOption;
+    sliderDataZoom?: echarts.DataZoomComponentOption;
+    /** 图表实例就绪回调，可用于图例自动滚动等 */
+    onChart?: (chart: echarts.ECharts) => void;
+}
+interface ChartType {
+    Group: React.FC<ChartGroupProps>;
+    Line: React.FC<ChartLineProps>;
+    Bar: React.FC<ChartBarProps>;
+    Pie: ChartPieFC;
+    Polar: React.FC<ChartPolarProps>;
+    Gauge: React.FC<ChartGaugeProps>;
+    Sankey: React.FC<ChartSankeyProps>;
+    Tree: React.FC<ChartTreeProps>;
+    Bubble: React.FC<ChartBubbleProps>;
+    Heatmap: React.FC<ChartHeatmapProps>;
+    Radar: React.FC<ChartRadarProps>;
+    Common: React.FC<ChartCommonProps>;
+}
+declare const Chart: ChartType;
+export default Chart;

package/lib/components/Chart/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Bar = _interopRequireDefault(require("./Bar"));
+var _Polar = _interopRequireDefault(require("./Polar"));
+var _Group = _interopRequireDefault(require("./Group"));
+var _Line = _interopRequireDefault(require("./Line"));
+var _Pie = _interopRequireDefault(require("./Pie"));
+var _Gauge = _interopRequireDefault(require("./Gauge"));
+var _Sankey = _interopRequireDefault(require("./Sankey"));
+var _Tree = _interopRequireDefault(require("./Tree"));
+var _Bubble = _interopRequireDefault(require("./Bubble"));
+var _Heatmap = _interopRequireDefault(require("./Heatmap"));
+var _Radar = _interopRequireDefault(require("./Radar"));
+var _Common = _interopRequireDefault(require("./Common"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * ChartTypes
+ * ChartOptionsType
+ *
+ * 关联 Group
+ */
+
+const Chart = {
+  Group: _Group.default,
+  Line: _Line.default,
+  Bar: _Bar.default,
+  Pie: _Pie.default,
+  Polar: _Polar.default,
+  Gauge: _Gauge.default,
+  Sankey: _Sankey.default,
+  Tree: _Tree.default,
+  Bubble: _Bubble.default,
+  Heatmap: _Heatmap.default,
+  Radar: _Radar.default,
+  Common: _Common.default
+};
+var _default = exports.default = Chart;

package/lib/components/Chart/index.module.less

@@ -0,0 +1,4 @@
+.chart-container {
+  width: 100%;
+  height: 100%;
+}

package/lib/components/Chat/ChatHistory/_components/HistoryGroup/index.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ChatHistoryData } from "../..";
+interface HistoryGroupProps {
+    title: string;
+    items: ChatHistoryData[];
+    currentChatId?: string;
+    updateTitle?: (chatId: string, title: string) => void;
+    deleteHistory?: (item?: ChatHistoryData) => void;
+    onItemClick?: (item: ChatHistoryData) => void;
+}
+declare const HistoryGroup: React.FC<HistoryGroupProps>;
+export default HistoryGroup;

package/lib/components/Chat/ChatHistory/_components/HistoryGroup/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _HistoryItem = _interopRequireDefault(require("../HistoryItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const HistoryGroup = ({
+  title,
+  items,
+  currentChatId,
+  updateTitle,
+  deleteHistory,
+  onItemClick
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _indexModule.default.historyGroup,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.historyGroupTitle,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.historyGroupContent,
+      children: items?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_HistoryItem.default, {
+        item: item,
+        isActive: currentChatId === item.conversationId,
+        updateTitle: updateTitle,
+        deleteHistory: deleteHistory,
+        onClick: onItemClick
+      }, item.conversationId || item.id))
+    })]
+  });
+};
+var _default = exports.default = HistoryGroup;

package/lib/components/Chat/ChatHistory/_components/HistoryGroup/index.module.less

@@ -0,0 +1,21 @@
+.historyGroup {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+
+  .historyGroupTitle {
+    padding: 0 10px;
+
+    font-size: 14px;
+    font-weight: bold;
+    color: #b3b3b3;
+
+    cursor: default;
+  }
+
+  .historyGroupContent {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+  }
+}

package/lib/components/Chat/ChatHistory/_components/HistoryItem/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatHistoryData } from "../..";
+interface HistoryItemProps {
+    item: ChatHistoryData;
+    isActive: boolean;
+    updateTitle?: (chatId: string, title: string) => void;
+    deleteHistory?: (item?: ChatHistoryData) => void;
+    onClick?: (item: ChatHistoryData) => void;
+}
+declare const HistoryItem: React.FC<HistoryItemProps>;
+export default HistoryItem;