@hsu-react/ui 0.0.13 → 0.0.15

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

@@ -1,20 +1,20 @@
 /**
- * 计算合适的Y轴范围和间隔，确保0是刻度点，且总刻度数固定为6个
- * @param min 最小值
- * @param max 最大值
- * @returns { min, max, interval } Y轴配置
+ * Calculates a suitable Y-axis range and interval, ensuring 0 is a tick point and the total tick count is fixed at 6
+ * @param min minimum value
+ * @param max maximum value
+ * @returns { min, max, interval } Y-axis configuration
  */
 export function calculateAxisConfig(
   min: number,
   max: number
 ): { min: number; max: number; interval: number } {
-  // 根据数值大小选择合适的取整基数
+  // Choose a suitable rounding base according to the value's magnitude
   const getNiceNumber = (value: number) => {
     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 这样的"整齐"数字
+    // Pick a "nice" number like 1, 2, 5, or 10
     let niceNormalized: number;
     if (normalized <= 1) niceNormalized = 1;
     else if (normalized <= 2) niceNormalized = 2;
@@ -24,32 +24,32 @@ export function calculateAxisConfig(
     return niceNormalized * magnitude;
   };
 
-  // 处理无效数据
+  // Handle invalid data
   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 all data is 0, return default values (6 ticks: 0,1,2,3,4,5)
   if (min === 0 && max === 0) {
     return { min: 0, max: 5, interval: 1 };
   }
 
-  // 如果数据跨越0（有正有负）
+  // If the data spans 0 (has both positive and negative values)
   if (min < 0 && max > 0) {
     const absMax = Math.abs(max * 1.1);
     const absMin = Math.abs(min * 1.1);
 
-    // 计算总范围，分成5个间隔（6个刻度）
+    // Compute the total range, split into 5 intervals (6 ticks)
     const totalRange = absMax + absMin;
     const roughInterval = totalRange / 5;
     const interval = getNiceNumber(roughInterval);
 
-    // 计算需要多少个刻度能覆盖正负数据
+    // Compute how many ticks are needed to cover the positive and negative data
     const negativeSteps = Math.ceil(absMin / interval);
     const positiveSteps = Math.ceil(absMax / interval);
-    const totalSteps = negativeSteps + positiveSteps; // 不包括0
+    const totalSteps = negativeSteps + positiveSteps; // excluding 0
 
-    // 如果总刻度数正好是6个（5个间隔+0）
+    // If the total tick count is exactly 6 (5 intervals + 0)
     if (totalSteps === 5) {
       return {
         min: -negativeSteps * interval,
@@ -58,7 +58,7 @@ export function calculateAxisConfig(
       };
     }
 
-    // 否则，调整为固定5个间隔，按比例分配正负两边
+    // Otherwise, adjust to a fixed 5 intervals, distributed proportionally between the positive and negative sides
     const ratio = absMax / (absMax + absMin);
     const positiveIntervals = Math.round(ratio * 5);
     const negativeIntervals = 5 - positiveIntervals;
@@ -70,7 +70,7 @@ export function calculateAxisConfig(
     };
   }
 
-  // 如果全是非负数（固定6个刻度：0到max，分5段）
+  // If all values are non-negative (fixed 6 ticks: 0 to max, split into 5 segments)
   if (min >= 0) {
     const roughMax = max * 1.1;
     const roughInterval = roughMax / 5;
@@ -83,7 +83,7 @@ export function calculateAxisConfig(
     };
   }
 
-  // 如果全是负数（固定6个刻度：min到0，分5段）
+  // If all values are negative (fixed 6 ticks: min to 0, split into 5 segments)
   const roughMin = Math.abs(min * 1.1);
   const roughInterval = roughMin / 5;
   const interval = getNiceNumber(roughInterval);

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

@@ -22,7 +22,7 @@ export interface ChartTooltipFormatterProps {
   hideMarker?: boolean;
   textStyle?: Record<string, unknown>;
   unit?: string;
-  /** 多系列时按数值从大到小排序展示（大的在上） */
+  /** For multiple series, display sorted by value in descending order (largest on top) */
   sortDescending?: boolean;
 }
 
@@ -80,7 +80,7 @@ const chartTooltipFormatter = (props: ChartTooltipFormatterProps) => {
     `;
   }
 
-  // value 可能是数值、拼了单位的字符串("123次")或带千分位("1,234"），排序前统一还原成数值
+  // value may be a number, a string with a unit appended ("123次"), or one with thousands separators ("1,234"); normalize back to a number before sorting
   const toSortValue = (v: unknown): number => {
     if (typeof v === "number") return v;
     if (Array.isArray(v)) return toSortValue(v[v.length - 1]);

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

@@ -2,23 +2,23 @@ import { useCallback, useState } from "react";
 import { DataZoomIndexWindow } from "../_utils/cartesian";
 
 export interface DataZoomWindowOptions {
-  /** 开关：是否按 dataZoom 当前可见窗口重算坐标轴，默认开启 */
+  /** Toggle: whether to recalculate the axis based on the current visible dataZoom window; enabled by default */
   enabled?: boolean;
 }
 
 export interface DataZoomWindowResult {
-  /** 当前可见窗口；开关关闭或尚未收到回调时为 null（表示全量） */
+  /** Current visible window; null when disabled or before any callback has been received (meaning the full range) */
   zoomWindow: DataZoomIndexWindow | null;
-  /** 传给 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged；开关关闭时为 undefined（不绑定事件） */
+  /** onDataZoomWindowChanged to pass to Chart.Bar / Chart.Line; undefined when disabled (event not bound) */
   onDataZoomWindowChanged?: (window: DataZoomIndexWindow) => void;
-  /** 按当前可见窗口裁剪系列数据，配合 calculateAxisConfig 只对展示部分重算坐标轴 */
+  /** Slices series data by the current visible window; used with calculateAxisConfig to recalculate the axis for the displayed portion only */
   sliceByZoomWindow: <T>(values?: T[] | null) => T[];
 }
 
 /**
- * dataZoom 可见窗口管理：配合 Chart.Bar / Chart.Line 的 onDataZoomWindowChanged，
- * 在调用方按"当前可见窗口"裁剪数据后重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现滑块拖动/滚轮/自动滚动时坐标轴跟随展示部分动态重算；可与 useLegendSelection 叠加。
+ * dataZoom visible-window management: works with Chart.Bar / Chart.Line's onDataZoomWindowChanged
+ * so the caller can slice data by the "current visible window" and recalculate the Y-axis min/max/interval (calculateAxisConfig),
+ * making the axis dynamically follow the displayed portion during slider dragging / wheel scrolling / auto-scroll; can be combined with useLegendSelection.
  */
 export function useDataZoomWindow(
   options?: DataZoomWindowOptions,
@@ -29,7 +29,7 @@ export function useDataZoomWindow(
   );
 
   const onDataZoomWindowChanged = useCallback((next: DataZoomIndexWindow) => {
-    // 窗口未变化时保持原引用，避免重渲染 → 同步回调 → 再重渲染的循环
+    // Keep the original reference when the window is unchanged, avoiding a re-render → sync callback → re-render loop
     setZoomWindow((prev) =>
       prev &&
       prev.startIndex === next.startIndex &&

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

@@ -1,18 +1,18 @@
 import { useCallback, useState } from "react";
 
 export interface LegendSelectionResult {
-  /** 传给图表 legend.selected，保证重渲染(setOption notMerge)后隐藏状态不丢 */
+  /** Pass to the chart's legend.selected to keep hidden state from being lost after re-render (setOption notMerge) */
   legendSelected: Record<string, boolean>;
-  /** 传给图表 onLegendSelectChanged */
+  /** Pass to the chart's onLegendSelectChanged */
   onLegendSelectChanged: (selected: Record<string, boolean>) => void;
-  /** 判断某系列当前是否可见（未点过的系列默认可见） */
+  /** Checks whether a series is currently visible (series never toggled are visible by default) */
   isSeriesVisible: (name?: string | null) => boolean;
 }
 
 /**
- * 图例选中状态管理：配合 Chart.Bar / Chart.Line 的 onLegendSelectChanged，
- * 在调用方按"当前可见系列"重算 Y 轴 min/max/interval（calculateAxisConfig），
- * 实现图例隐藏某一项后坐标轴自动重算。
+ * Legend selection state management: works with Chart.Bar / Chart.Line's onLegendSelectChanged
+ * so the caller can recalculate the Y-axis min/max/interval (calculateAxisConfig) based on the "currently visible series",
+ * making the axis automatically recalculate after an item is hidden via the legend.
  */
 export function useLegendSelection(): LegendSelectionResult {
   const [legendSelected, setLegendSelected] = useState<Record<string, boolean>>(

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

@@ -1,6 +1,6 @@
 /**
- * 大屏 Y 轴：按「万 / 亿」或 MB/GB/TB 换算时，要求刻度步长换算后 ≥ 1，
- * 避免出现 0.2 万、0.5GB 等小于 1 的刻度文案。
+ * Dashboard (large-screen) Y-axis: when converting to "万 (10^4) / 亿 (10^8)" or MB/GB/TB units,
+ * the converted tick step must be >= 1, avoiding tick labels smaller than 1 such as "0.2万" or "0.5GB".
  */
 
 export const MB_PER_GB = 1024;
@@ -12,7 +12,7 @@ export function trimAxisNumber(n: number): string {
   return s === "" || s === "-" ? "0" : s;
 }
 
-/** 中文量级：仅当最大值与刻度间隔都达到该量级时才用「万」「亿」缩放 */
+/** Chinese magnitude: scale by "万" (10^4) / "亿" (10^8) only when both the max value and the tick interval reach that magnitude */
 export function chineseMagnitudeDivisor(
   max: number,
   interval: number,
@@ -36,7 +36,7 @@ export function formatChineseMagnitudeTick(
   return trimAxisNumber(v / div);
 }
 
-/** MB 进位：仅当最大值与刻度间隔在该单位下均 ≥ 1 时才升到 GB/TB */
+/** MB tiering: promote to GB/TB only when both the max value and the tick interval are >= 1 in that unit */
 export function mbDisplayTier(
   maxMb: number,
   intervalMb: number,

package/src/components/Chart/index.tsx

@@ -20,7 +20,7 @@ export type CommonObj<T = unknown> = Record<string, T>;
  * ChartTypes
  * ChartOptionsType
  *
- * 关联 Group
+ * Associated with Group
  */
 export type ChartTypes = "Line" | "Bar" | "Pie";
 export type ChartOptionsType = ChartLineProps | ChartBarProps | ChartPieProps;
@@ -51,7 +51,7 @@ export interface ChartCommonProps extends ChartsOption {
   style?: ChartCSSProperties;
   insideDataZoom?: echarts.DataZoomComponentOption;
   sliderDataZoom?: echarts.DataZoomComponentOption;
-  /** 图表实例就绪回调，可用于图例自动滚动等 */
+  /** Callback fired when the chart instance is ready; can be used for legend auto-scroll, etc. */
   onChart?: (chart: echarts.ECharts) => void;
 }
 

package/src/components/Chat/ChatHistory/_components/HistoryGroup/index.module.scss

@@ -8,7 +8,7 @@
 
     font-size: 14px;
     font-weight: bold;
-    color: #b3b3b3;
+    color: var(--cf-text-3);
 
     cursor: default;
   }

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

@@ -26,7 +26,7 @@
   cursor: pointer;
 
   &:hover {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
     .operation {
       display: flex;
@@ -34,9 +34,9 @@
   }
 
   &.active {
-    background: #0000000a;
+    background: var(--cf-row-hover);
 
-    color: #126dff;
+    color: var(--primary-color);
   }
 
   .operation {
@@ -55,10 +55,10 @@
 
     background-color: transparent;
 
-    color: #0a0a0a;
+    color: var(--cf-text);
 
     &:hover {
-      color: #126dff;
+      color: var(--primary-color);
     }
   }
 }
@@ -69,6 +69,6 @@
   column-gap: 8px;
 
   &.delete {
-    color: #ff4d4f;
+    color: var(--cf-error);
   }
 }

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

@@ -24,30 +24,30 @@ const HistoryItem: React.FC<HistoryItemProps> = ({
   deleteHistory,
   onClick,
 }) => {
-  // 重命名相关状态
+  // Rename-related state
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameTitle, setRenameTitle] = useState("");
   const [currentTitle, setCurrentTitle] = useState(formatChatName(item.name));
-  // 用于跟踪是否刚刚完成重命名，避免立即被外部更新覆盖
+  // Tracks whether a rename has just completed, to avoid being immediately overwritten by external updates
   const justRenamedRef = useRef(false);
 
-  // 删除确认弹窗状态
+  // Delete confirmation modal state
   const [deleteModal, setDeleteModal] = useState(false);
 
-  // 初始化重命名标题
+  // Initialize the rename title
   useEffect(() => {
     if (isRenaming) {
       setRenameTitle(currentTitle);
     }
   }, [isRenaming, currentTitle]);
 
-  // 同步 item.name 的变化到 currentTitle（仅在非重命名状态下）
+  // Sync changes of item.name to currentTitle (only when not renaming)
   useEffect(() => {
     if (!isRenaming && !justRenamedRef.current) {
       const formattedName = formatChatName(item.name);
       setCurrentTitle(formattedName);
     }
-    // 重置重命名标记
+    // Reset the rename flag
     if (justRenamedRef.current) {
       justRenamedRef.current = false;
     }
@@ -61,9 +61,9 @@ const HistoryItem: React.FC<HistoryItemProps> = ({
     const newTitle = renameTitle.trim();
     if (newTitle && updateTitle) {
       updateTitle(item.conversationId, newTitle);
-      // 先更新显示的标题，确保立即显示用户输入的名称
+      // Update the displayed title first to immediately show the user-entered name
       setCurrentTitle(newTitle);
-      // 标记刚刚完成重命名，避免立即被外部更新覆盖
+      // Mark that a rename has just completed, to avoid being immediately overwritten by external updates
       justRenamedRef.current = true;
     }
     setIsRenaming(false);

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

@@ -5,7 +5,7 @@
 
   padding: 0px 10px;
 
-  background-color: #f9f9f9;
+  background-color: var(--cf-subtle);
 
   .newChat {
     display: flex;
@@ -18,17 +18,17 @@
 
     font-size: 14px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     border-radius: 6px;
-    border: 1px solid #0d0d0d0d;
+    border: 1px solid var(--cf-border-weak);
 
     cursor: pointer;
 
     transition: box-shadow 0.3s;
 
     &:hover {
-      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: var(--cf-shadow-2);
     }
   }
 }

package/src/components/Chat/ChatHistory/_utils/index.ts

@@ -1,5 +1,5 @@
 /**
- * 格式化聊天名称（截取省略号前的部分）
+ * Format the chat name (take the part before the ellipsis)
  */
 export const formatChatName = (name: string): string => {
   return name.split("…")[0];

package/src/components/Chat/ChatHistory/index.module.scss

@@ -9,9 +9,9 @@
   height: 100%;
   padding: 10px 0px;
 
-  background-color: #f9f9f9;
+  background-color: var(--cf-subtle);
 
-  border-right: 1px solid #0d0d0d0d;
+  border-right: 1px solid var(--cf-border-weak);
 
   .tools {
     display: flex;
@@ -39,7 +39,7 @@
     &::-webkit-scrollbar-thumb {
       width: 10px;
 
-      background-color: #0000001a;
+      background-color: var(--cf-border);
 
       border-radius: 10px;
     }

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

@@ -36,14 +36,14 @@ const ChatHistory: React.FC<ChatHistoryProps> = (props) => {
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
-  // 滚动到底部处理
+  // Handle scrolling to the bottom
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !onScrollEnd) return;
 
     const handleScroll = () => {
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-      // 当滚动到底部时（允许 5px 的误差）
+      // When scrolled to the bottom (with a 5px tolerance)
       if (scrollHeight - scrollTop - clientHeight < 5) {
         onScrollEnd();
       }

package/src/components/Chat/ChatInput/_components/AgentToggleButton/index.module.scss

@@ -4,26 +4,26 @@
   column-gap: 2px;
   padding: 0 11px;
   border-radius: 4px;
-  border: 1px solid #0e59ef;
+  border: 1px solid var(--primary-color);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   height: 100%;
-  background-color: #fff;
+  background-color: var(--cf-surface);
 
   .icon {
     font-size: 22px;
   }
 
   &.active {
-    color: #0e59ef;
-    border-color: #0e59ef;
-    background-color: #0e59ef22;
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+    background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
   }
 
   &:hover {
-    color: #4c4c4c;
-    border-color: rgba(0, 0, 0, 0.12);
-    background-color: #e0e4ed;
+    color: var(--cf-text);
+    border-color: var(--cf-border);
+    background-color: var(--cf-row-hover);
   }
 }

package/src/components/Chat/ChatInput/_components/FileList/index.module.scss

@@ -11,8 +11,8 @@
     column-gap: 5px;
     padding: 4px 10px;
     font-size: 14px;
-    color: #424242;
-    background: #f2f4f7;
+    color: var(--cf-text);
+    background: var(--cf-subtle);
     border-radius: 3px;
     transition: box-shadow 0.3s, color 0.3s;
     cursor: pointer;
@@ -22,7 +22,7 @@
     }
     
     &:hover {
-      color: #0e59ef;
+      color: var(--primary-color);
     }
   }
 }

package/src/components/Chat/ChatInput/_components/UploadButton/index.tsx

@@ -16,7 +16,7 @@ interface UploadButtonProps {
     data?: Record<string, string>;
   };
   onUploadingChange?: (isUploading: boolean) => void;
-  // 拦截点击事件
+  // Intercept the click event
   onInterceptClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
 }
 
@@ -73,7 +73,7 @@ const UploadButton: React.FC<UploadButtonProps> = (props) => {
                     : "heroicons-outline:paper-clip"
                 }
                 fontSize={22}
-                color="#ababab"
+                color="var(--cf-text-3)"
               />
             }
             onClick={

package/src/components/Chat/ChatInput/_utils/index.ts

@@ -2,7 +2,7 @@ import { UploadFile } from "antd";
 import { notification } from "antd";
 
 /**
- * 处理文件上传响应
+ * Handle the file upload response
  */
 export const handleUploadResponse = (
   fileList: UploadFile[],
@@ -45,7 +45,7 @@ export const handleUploadResponse = (
 };
 
 /**
- * 验证文件大小
+ * Validate the file size
  */
 export const validateFileSize = (file: File, maxSize: number): boolean => {
   if (file.size > maxSize * 1024 * 1024) {
@@ -58,7 +58,7 @@ export const validateFileSize = (file: File, maxSize: number): boolean => {
 };
 
 /**
- * 处理文件列表变更
+ * Handle file list changes
  */
 export const processFileList = (fileList: UploadFile[]): UploadFile[] => {
   const processedList: UploadFile[] = [];

package/src/components/Chat/ChatInput/index.module.scss

@@ -17,8 +17,8 @@
   padding: 10px;
 
   border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background: #ffffff;
+  border: 1px solid var(--cf-border);
+  background: var(--cf-surface);
 
   .textArea {
     border: none !important;
@@ -51,7 +51,7 @@
 
         .select {
           font-size: 14px;
-          border: 1px solid #d9d9d9;
+          border: 1px solid var(--cf-border);
           border-radius: 4px;
           box-shadow: none;
           opacity: 0.8;
@@ -66,7 +66,7 @@
           }
 
           &[class*="disabled"] {
-            color: #000;
+            color: var(--cf-text);
             background: transparent;
             border: none;
             box-shadow: none;