@hsu-react/ui 0.0.1

package/src/components/Chart/chartUtils/chartTooltipFormatter.ts

@@ -0,0 +1,128 @@
+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;
+}
+
+const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
+  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>
+  `;
+};
+
+export default chartTooltipFormatter;

package/src/components/Chart/chartUtils/index.ts

@@ -0,0 +1,37 @@
+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/src/components/Chart/chartUtils/yAxisDisplayUnit.ts

@@ -0,0 +1,62 @@
+/**
+ * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
+ * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ */
+
+export const MB_PER_GB = 1024;
+export const MB_PER_TB = 1024 * 1024;
+
+export function trimAxisNumber(n: number): string {
+  if (Number.isInteger(n)) return String(n);
+  const s = n.toFixed(2).replace(/\.?0+$/, "");
+  return s === "" || s === "-" ? "0" : s;
+}
+
+/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+export function chineseMagnitudeDivisor(
+  max: number,
+  interval: number,
+): 1 | 10_000 | 100_000_000 {
+  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;
+}
+
+export function formatChineseMagnitudeTick(
+  value: number,
+  max: number,
+  interval: number,
+): string {
+  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 */
+export function mbDisplayTier(
+  maxMb: number,
+  intervalMb: number,
+): "MB" | "GB" | "TB" {
+  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";
+}
+
+export function formatMbAxisTick(
+  value: number,
+  maxMb: number,
+  intervalMb: number,
+): string {
+  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/src/components/Chart/index.md

@@ -0,0 +1,17 @@
+---
+nav: 组件
+group:
+  title: 数据展示
+  order: 4
+title: Chart 图表
+---
+
+# Chart 图表
+
+> `Chart` 组件。完整 API 见源码类型定义，下方为基础用法。
+
+## 引入
+
+```ts
+import { Chart } from "@hsu-react/ui";
+```

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

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

package/src/components/Chart/index.tsx

@@ -0,0 +1,88 @@
+import * as echarts from "echarts";
+
+import ChartBar, { ChartBarProps } from "./Bar";
+import ChartPolar, { ChartPolarProps } from "./Polar";
+import ChartGroup, { ChartGroupProps } from "./Group";
+import ChartLine, { ChartLineProps } from "./Line";
+import ChartPie, { ChartPieFC, ChartPieProps } from "./Pie";
+import ChartGauge, { ChartGaugeProps } from "./Gauge";
+import ChartSankey, { ChartSankeyProps } from "./Sankey";
+import ChartTree, { ChartTreeProps } from "./Tree";
+import ChartBubble, { ChartBubbleProps } from "./Bubble";
+import ChartHeatmap, { ChartHeatmapProps } from "./Heatmap";
+import ChartRadar, { ChartRadarProps } from "./Radar";
+import React, { CSSProperties } from "react";
+import ChartCommon from "./Common";
+
+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>;
+}
+
+const Chart: ChartType = {
+  Group: ChartGroup,
+  Line: ChartLine,
+  Bar: ChartBar,
+  Pie: ChartPie,
+  Polar: ChartPolar,
+  Gauge: ChartGauge,
+  Sankey: ChartSankey,
+  Tree: ChartTree,
+  Bubble: ChartBubble,
+  Heatmap: ChartHeatmap,
+  Radar: ChartRadar,
+  Common: ChartCommon,
+};
+
+export default Chart;

package/src/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/src/components/Chat/ChatHistory/_components/HistoryGroup/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styles from "./index.module.less";
+import { ChatHistoryData } from "../..";
+import HistoryItem from "../HistoryItem";
+
+interface HistoryGroupProps {
+  title: string;
+  items: ChatHistoryData[];
+  currentChatId?: string;
+  updateTitle?: (chatId: string, title: string) => void;
+  deleteHistory?: (item?: ChatHistoryData) => void;
+  onItemClick?: (item: ChatHistoryData) => void;
+}
+
+const HistoryGroup: React.FC<HistoryGroupProps> = ({
+  title,
+  items,
+  currentChatId,
+  updateTitle,
+  deleteHistory,
+  onItemClick,
+}) => {
+  return (
+    <div className={styles.historyGroup}>
+      <div className={styles.historyGroupTitle}>{title}</div>
+      <div className={styles.historyGroupContent}>
+        {items?.map((item) => (
+          <HistoryItem
+            key={item.conversationId || item.id}
+            item={item}
+            isActive={currentChatId === item.conversationId}
+            updateTitle={updateTitle}
+            deleteHistory={deleteHistory}
+            onClick={onItemClick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HistoryGroup;

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.module.less

@@ -0,0 +1,74 @@
+.renameInput {
+  width: 100%;
+  height: 32px;
+  min-height: 32px;
+}
+
+.historyItem {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+
+  height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: clip;
+
+  overflow: hidden;
+
+  border-radius: 6px;
+
+  cursor: pointer;
+
+  &:hover {
+    background: #0000000a;
+
+    .operation {
+      display: flex;
+    }
+  }
+
+  &.active {
+    background: #0000000a;
+
+    color: #126dff;
+  }
+
+  .operation {
+    display: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 24px;
+    height: 24px;
+
+    font-size: 16px;
+
+    border-radius: 8px;
+
+    transition: color 0.3s;
+
+    background-color: transparent;
+
+    color: #0a0a0a;
+
+    &:hover {
+      color: #126dff;
+    }
+  }
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+
+  &.delete {
+    color: #ff4d4f;
+  }
+}

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.tsx

@@ -0,0 +1,167 @@
+import React, { useState, useEffect, useRef } from "react";
+import classNames from "classnames";
+import { Dropdown } from "antd";
+import Icon from "../../../../Icon";
+import Input from "../../../../Input";
+import SecondConf from "../../../../SecondConf";
+import styles from "./index.module.less";
+import { ChatHistoryData } from "../..";
+import { formatChatName } from "../../_utils";
+import TextEllipsis from "../../../../TextEllipsis";
+
+interface HistoryItemProps {
+  item: ChatHistoryData;
+  isActive: boolean;
+  updateTitle?: (chatId: string, title: string) => void;
+  deleteHistory?: (item?: ChatHistoryData) => void;
+  onClick?: (item: ChatHistoryData) => void;
+}
+
+const HistoryItem: React.FC<HistoryItemProps> = ({
+  item,
+  isActive,
+  updateTitle,
+  deleteHistory,
+  onClick,
+}) => {
+  // 重命名相关状态
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [renameTitle, setRenameTitle] = useState("");
+  const [currentTitle, setCurrentTitle] = useState(formatChatName(item.name));
+  // 用于跟踪是否刚刚完成重命名，避免立即被外部更新覆盖
+  const justRenamedRef = useRef(false);
+
+  // 删除确认弹窗状态
+  const [deleteModal, setDeleteModal] = useState(false);
+
+  // 初始化重命名标题
+  useEffect(() => {
+    if (isRenaming) {
+      setRenameTitle(currentTitle);
+    }
+  }, [isRenaming, currentTitle]);
+
+  // 同步 item.name 的变化到 currentTitle（仅在非重命名状态下）
+  useEffect(() => {
+    if (!isRenaming && !justRenamedRef.current) {
+      const formattedName = formatChatName(item.name);
+      setCurrentTitle(formattedName);
+    }
+    // 重置重命名标记
+    if (justRenamedRef.current) {
+      justRenamedRef.current = false;
+    }
+  }, [item.name, item.conversationId, isRenaming]);
+
+  const handleRename = () => {
+    setIsRenaming(true);
+  };
+
+  const handleRenameConfirm = () => {
+    const newTitle = renameTitle.trim();
+    if (newTitle && updateTitle) {
+      updateTitle(item.conversationId, newTitle);
+      // 先更新显示的标题，确保立即显示用户输入的名称
+      setCurrentTitle(newTitle);
+      // 标记刚刚完成重命名，避免立即被外部更新覆盖
+      justRenamedRef.current = true;
+    }
+    setIsRenaming(false);
+    setRenameTitle("");
+  };
+
+  const handleRenameCancel = () => {
+    setIsRenaming(false);
+    setRenameTitle("");
+    setCurrentTitle(formatChatName(item.name));
+  };
+
+  const handleDelete = () => {
+    setDeleteModal(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    setDeleteModal(false);
+    deleteHistory?.(item);
+  };
+
+  const dropdownItems = [
+    {
+      key: "rename",
+      label: (
+        <span className={styles.dropdownItem}>
+          <Icon icon="ri:pencil-line" />
+          重命名
+        </span>
+      ),
+      onClick: handleRename,
+    },
+    {
+      key: "delete",
+      label: (
+        <span className={classNames(styles.dropdownItem, styles.delete)}>
+          <Icon icon="ri:delete-bin-line" />
+          删除
+        </span>
+      ),
+      onClick: handleDelete,
+    },
+  ];
+
+  if (isRenaming) {
+    return (
+      <Input
+        className={styles.renameInput}
+        onClick={(e) => e.stopPropagation()}
+        value={renameTitle}
+        onChange={(value) => setRenameTitle(value)}
+        onBlur={handleRenameCancel}
+        onPressEnter={handleRenameConfirm}
+        autoFocus={true}
+      />
+    );
+  }
+
+  return (
+    <>
+      <div
+        className={classNames(styles.historyItem, {
+          [styles.active]: isActive,
+        })}
+        onClick={() => onClick?.(item)}
+      >
+        <TextEllipsis>{currentTitle}</TextEllipsis>
+
+        <Dropdown
+          menu={{
+            items: dropdownItems,
+            onClick: ({ domEvent }) => {
+              domEvent.stopPropagation();
+            },
+          }}
+          placement="bottomRight"
+        >
+          <div
+            className={styles.operation}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Icon icon="ri:more-fill" />
+          </div>
+        </Dropdown>
+      </div>
+      <SecondConf
+        open={deleteModal}
+        onCancel={() => setDeleteModal(false)}
+        contentTitle="删除"
+        contentText="删除后，该会话将无法恢复，请确认是否继续？"
+        okButtonProps={{
+          danger: true,
+        }}
+        onOk={handleDeleteConfirm}
+        width={"40%"}
+      />
+    </>
+  );
+};
+
+export default HistoryItem;

package/src/components/Chat/ChatHistory/_components/NewChatButton/index.module.less

@@ -0,0 +1,34 @@
+.newChatContainer {
+  position: sticky;
+  top: 0;
+  z-index: 9;
+
+  padding: 0px 10px;
+
+  background-color: #f9f9f9;
+
+  .newChat {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 8px;
+
+    width: 100%;
+    height: 32px;
+
+    font-size: 14px;
+
+    background-color: #fff;
+
+    border-radius: 6px;
+    border: 1px solid #0d0d0d0d;
+
+    cursor: pointer;
+
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    }
+  }
+}

package/src/components/Chat/ChatHistory/_components/NewChatButton/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./index.module.less";
+import Icon from "../../../../Icon";
+
+interface NewChatButtonProps {
+  onClick?: () => void;
+}
+
+const NewChatButton: React.FC<NewChatButtonProps> = ({ onClick }) => {
+  return (
+    <div className={styles.newChatContainer}>
+      <div className={styles.newChat} onClick={onClick}>
+        <Icon icon="lets-icons:chat-alt-add" fontSize={18} />
+        <span>新对话</span>
+      </div>
+    </div>
+  );
+};
+
+export default NewChatButton;