@hsu-react/ui 0.0.4 → 0.0.7

package/lib/styles/utils.scss

@@ -0,0 +1,81 @@
+/* =========================================================
+ * utils.scss
+ * Design: 1366 x 768
+ * Rule:   x/width -> vw, y/height -> vh
+ * Mode:   function (return calc() expressions)
+ *
+ * Usage:
+ *   .banner {
+ *     background-size: 100% vh(239);
+ *   }
+ *
+ *   .box {
+ *     width: vw(600);
+ *     height: vh(300);
+ *   }
+ * ========================================================= */
+
+$design-w: 1366;
+$design-h: 768;
+
+/* -------------------------
+ * vw (width/x-axis)
+ * ------------------------- */
+@function vw($px) {
+  @return calc((#{$px} / #{$design-w}) * 100vw);
+}
+
+@function vw2($a, $b) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw);
+}
+
+@function vw3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw)
+    calc((#{$c} / #{$design-w}) * 100vw);
+}
+
+@function vw4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-w}) * 100vw) calc((#{$r} / #{$design-w}) * 100vw)
+    calc((#{$b} / #{$design-w}) * 100vw) calc((#{$l} / #{$design-w}) * 100vw);
+}
+
+/* -------------------------
+ * vh (height/y-axis)
+ * ------------------------- */
+@function vh($px) {
+  @return calc((#{$px} / #{$design-h}) * 100vh);
+}
+
+@function vh2($a, $b) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh);
+}
+
+@function vh3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh)
+    calc((#{$c} / #{$design-h}) * 100vh);
+}
+
+@function vh4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-h}) * 100vh) calc((#{$r} / #{$design-h}) * 100vh)
+    calc((#{$b} / #{$design-h}) * 100vh) calc((#{$l} / #{$design-h}) * 100vh);
+}
+
+/* =========================================================
+ * Examples (delete if you want)
+ * ========================================================= */
+/*
+.banner {
+  background-size: 100% vh(239);
+}
+
+.card {
+  padding: vw4(24, 32, 24, 32);
+  border-radius: vh(16);
+}
+
+.modal {
+  width: vw(600);
+  height: vh(400);
+  transform: translateY(vh(50));
+}
+*/

package/lib/typings.d.ts

@@ -1,8 +1,8 @@
 // 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
 // 仅提供类型，不影响运行时行为。
 
-// CSS / Less Modules
-declare module "*.module.less" {
+// CSS / Sass Modules
+declare module "*.module.scss" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
@@ -10,7 +10,7 @@ declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
-declare module "*.less" {
+declare module "*.scss" {
   const content: string;
   export default content;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -32,7 +32,7 @@
     "src"
   ],
   "sideEffects": [
-    "*.less",
+    "*.scss",
     "*.css",
     "*.png",
     "*.svg"
@@ -129,11 +129,11 @@
     "antd": "5.24.3",
     "dumi": "^2.4.0",
     "father": "^4.5.0",
-    "less": "^4.2.0",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sass": "^1.101.0",
     "typescript": "^5.4.5"
   }
 }

package/src/components/Button/ChakraButton/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import { Button, ButtonProps } from "@chakra-ui/react";
 import usePermissions from "../../../hooks/usePermissions";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 
 export interface ChakraButtonProps extends ButtonProps {

package/src/components/Button/index.tsx

@@ -3,7 +3,7 @@ import { Button as AntdButton, ButtonProps as AntdButtonProps } from "antd";
 import React from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import ChakraButton, { ChakraButtonProps } from "./ChakraButton";
 
 export type { ChakraButtonProps };

package/src/components/ChainGraph/_components/ExpandButtons/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Button from "../../../Button";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface ExpandButtonsProps {
   onExpand: () => void;

package/src/components/ChainGraph/_components/SearchSelect/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Select from "../../../Select";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface SearchSelectProps {
   onChange: (value: string) => void;

package/src/components/ChainGraph/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import {
   TreeGraphData as G6TreeGraphData,
   IGroup,

package/src/components/Chart/Bar/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { autoScrollLegend } from "../_utils/autoScrollLegend";
 import { autoScrollByItem } from "../_utils/autoSmooth";
 import {

package/src/components/Chart/Bubble/index.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
 import {

package/src/components/Chart/Common/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
 

package/src/components/Chart/Gauge/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 
 export interface ChartGaugeProps extends ChartCommonProps {
   color?: string[] | string;

package/src/components/Chart/Group/index.tsx

@@ -7,7 +7,7 @@ import Chart, {
 import React, { useEffect, useState } from "react";
 
 import FlexFill from "../../FlexFill";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface GroupType {
   type: ChartTypes;

package/src/components/Chart/Heatmap/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
 import {

package/src/components/Chart/Line/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { autoScrollLegend } from "../_utils/autoScrollLegend";
 import { autoScrollByItem } from "../_utils/autoSmooth";
 import {

package/src/components/Chart/Pie/Pie3D/index.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "../..";
 import { useMouseOverHandler, useGlobalOutHandler } from "./_hooks";
 import { getPie3DOption } from "./_utils/option";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 export interface Pie3DDataItem {
   name: string;

package/src/components/Chart/Pie/index.tsx

@@ -10,7 +10,7 @@ import {
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { autoScrollLegend } from "../chartUtils";
 
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import ChartPie3D, { ChartPie3DProps } from "./Pie3D";
 
 export interface ChartPieProps extends ChartCommonProps {

package/src/components/Chart/Polar/index.tsx

@@ -6,7 +6,7 @@ import {
   SeriesData,
 } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 
 export interface ChartPolarProps extends ChartCommonProps {
   title1?: string;

package/src/components/Chart/Radar/index.tsx

@@ -1,7 +1,7 @@
 import * as echarts from "echarts";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 
 export interface RadarIndicator {
   name: string;

package/src/components/Chart/Sankey/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { ChartCommonProps, ChartOptionType, ChartsOption } from "..";
 import * as echarts from "echarts";
 

package/src/components/Chart/Tree/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import {
   ChartCommonProps,
   ChartOptionType,

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

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { ChatHistoryData } from "../..";
 import HistoryItem from "../HistoryItem";
 

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

@@ -4,7 +4,7 @@ import { Dropdown } from "antd";
 import Icon from "../../../../Icon";
 import Input from "../../../../Input";
 import SecondConf from "../../../../SecondConf";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { ChatHistoryData } from "../..";
 import { formatChatName } from "../../_utils";
 import TextEllipsis from "../../../../TextEllipsis";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import Icon from "../../../../Icon";
 
 interface NewChatButtonProps {

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

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, ReactNode } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { NewChatButton, HistoryGroup } from "./_components";
 
 export interface ChatHistoryData {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import Icon from "../../../../Icon";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface AgentToggleConfig {
   key: string;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { UploadFile } from "antd";
 import Icon from "../../../../Icon";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface FileListProps {
   fileList: UploadFile[];

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

@@ -2,7 +2,7 @@ import React from "react";
 import { Tooltip } from "antd";
 import Button from "../../../../Button";
 import Icon from "../../../../Icon";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface SendButtonProps {
   value: string;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import Icon from "../../../../Icon";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface StopButtonProps {
   onStop: () => void;

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Tooltip, UploadFile } from "antd";
 import Icon from "../../../../Icon";
 import Upload from "../../../../Upload";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { validateFileSize, processFileList } from "../../_utils";
 import Button from "../../../../Button";
 

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 
 import Input from "../../Input";
 import { Select, Tooltip, UploadFile } from "antd";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { useFileList } from "./_hooks";
 import {
   FileList,

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import Icon from "../../../../../../../Icon";
 import classNames from "classnames";
 import { message } from "antd";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import clipboard from "copy-to-clipboard";
 import MarkdownIt from "markdown-it";
 import markdownLink from "markdown-it-link-attributes";

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Icon from "../../../../../../../Icon";
 import Form from "../../../../../../../Form";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface LikeDislikeProps {
   messageId?: string;

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/QuoteList/index.tsx

@@ -4,7 +4,7 @@ import Icon from "../../../../../../../Icon";
 import { useCalculateRowIndex, Quote } from "../../../../../_hooks";
 import FilePreview, { FilePreviewType } from "../../../../../../../FilePreview";
 import { deepCopy, Equal } from "hsu-utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface QuoteListProps {
   retrieverResources?: Quote[];

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import Markdown from "../../../../../Markdown";
 import { AnswerMessage } from "../../..";

package/src/components/Chat/ChatList/_components/Assistant/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import AssistantItem from "./AssistantItem";
 import Icon from "../../../../Icon";
 import classNames from "classnames";

package/src/components/Chat/ChatList/_components/User/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 import Markdown from "../../../../Markdown";
 import { Tooltip } from "antd";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import Copy from "../../../../Copy";
 import { QueryMessage } from "../..";
 import classNames from "classnames";

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import User from "./_components/User";
 import classNames from "classnames";
 import Assistant from "./_components/Assistant";

package/{es/components/Checkbox/CheckboxGroup/index.module.less → src/components/Checkbox/CheckboxGroup/index.module.scss}

@@ -104,17 +104,17 @@
           height: 60%;
         }
       }
+    }
 
-      &-indeterminate {
-        :global(.ant-checkbox-inner) {
-          &::after {
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
+    :global(.ant-checkbox-indeterminate) {
+      :global(.ant-checkbox-inner) {
+        &::after {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
 
-            width: 50%;
-            height: 50%;
-          }
+          width: 50%;
+          height: 50%;
         }
       }
     }

package/src/components/Checkbox/CheckboxGroup/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "antd/es/checkbox";
 import React, { useMemo, useCallback } from "react";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 const Group = Checkbox.Group;
 

package/{es/components/Checkbox/index.module.less → src/components/Checkbox/index.module.scss}

@@ -68,17 +68,17 @@
         height: 60%;
       }
     }
+  }
 
-    &-indeterminate {
-      :global(.ant-checkbox-inner) {
-        &::after {
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
+  :global(.ant-checkbox-indeterminate) {
+    :global(.ant-checkbox-inner) {
+      &::after {
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
 
-          width: 50%;
-          height: 50%;
-        }
+        width: 50%;
+        height: 50%;
       }
     }
   }

package/src/components/Checkbox/index.tsx

@@ -3,7 +3,7 @@ import {
   Checkbox as AntdCheckbox,
   CheckboxProps as AntdCheckboxProps,
 } from "antd";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import CheckboxGroup, { CheckboxGroupProps } from "./CheckboxGroup";
 

package/src/components/CodeMirror/index.tsx

@@ -5,7 +5,7 @@ import ReactCodeMirror, {
 } from "@uiw/react-codemirror";
 import { Extension } from "@codemirror/state";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { vscodeLight } from "@uiw/codemirror-theme-vscode";
 import { linter, LintSource, Diagnostic } from "@codemirror/lint";
 import { sqlLinter, loadSqlParser } from "./linters/sqlLinter";

package/src/components/Copy/index.tsx

@@ -4,7 +4,7 @@ import Icon from "../Icon";
 import TurndownService from "turndown";
 import classNames from "classnames";
 import { message } from "antd";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface CopyProps {
   id: string;

package/src/components/DatePicker/RangePicker/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DatePicker } from "antd";
 import { RangePickerProps as AntdRangePickerProps } from "antd/es/date-picker";
 import dayjs from "dayjs";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import { PickerRef } from "rc-picker";
 import Select, { SelectOption, SelectProps } from "../../Select";

package/src/components/DatePicker/StepPicker/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import dayjs from "dayjs";
 import Button from "../../Button";
 import classNames from "classnames";

package/src/components/DatePicker/index.tsx

@@ -7,7 +7,7 @@ import Select, { SelectOption, SelectProps } from "../Select";
 import { PickerRef } from "rc-picker";
 
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import dayjs from "dayjs";
 import RangePicker, { RangePickerProps } from "./RangePicker";
 import StepPicker, { StepPickerProps } from "./StepPicker";

package/src/components/Descriptions/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "antd";
 import { get_string_size } from "hsu-utils";
 import usePermissions from "../../hooks/usePermissions";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface ColumnsType {
   title: string;

package/src/components/Editor/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Editor as WangEditor, Toolbar } from "@wangeditor/editor-for-react";
 import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
 import "@wangeditor/editor/dist/css/style.css";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface EditorContentProps {
   value?: string;

package/src/components/FileCol/index.tsx

@@ -4,7 +4,7 @@ import FilePreview, {
 } from "../FilePreview";
 import { Tooltip, UploadFile } from "antd";
 import React, { useState } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 interface UrlItemProps {
   item?: UploadFile[];

package/src/components/FilePreview/_components/MarkdownPreview/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Icon from "../../../Icon";
 import Markdown from "../../../Markdown";
 import classNames from "classnames";
-import styles from "../BasePreview/index.module.less";
+import styles from "../BasePreview/index.module.scss";
 
 interface MarkdownPreviewProps {
   text?: string;