@hsu-react/ui 0.0.1

package/src/components/Checkbox/CheckboxGroup/index.module.less

@@ -0,0 +1,130 @@
+.checkboxGroup {
+  display: flex;
+  row-gap: 8px;
+
+  width: 100%;
+
+  &.hasAll {
+    flex-direction: column;
+
+    height: 100%;
+
+    // 当 hasAll 为 true 时，Group 作为子元素
+    > .ant-checkbox-group {
+      display: flex;
+      flex-direction: column;
+      row-gap: 8px;
+      flex-wrap: nowrap;
+
+      flex: 1;
+      min-height: 0px;
+
+      overflow: auto;
+    }
+  }
+
+  &.vertical {
+    flex-direction: column;
+  }
+
+  &.outline {
+    .ant-checkbox-wrapper {
+      .ant-checkbox {
+        .ant-checkbox-inner {
+          border-color: rgba(204, 204, 204, 1) !important;
+
+          background: transparent !important;
+
+          &::after {
+            border-color: rgba(0, 0, 0, 1);
+            border-width: 1px;
+          }
+        }
+
+        &.ant-checkbox-checked {
+          .ant-checkbox-inner {
+            background: rgba(255, 255, 255, 1) !important;
+          }
+        }
+      }
+
+      &.ant-checkbox-wrapper-disabled {
+        .ant-checkbox {
+          .ant-checkbox-inner {
+            background: rgba(0, 0, 0, 0.04) !important;
+
+            &::after {
+              border-color: rgba(204, 204, 204, 1) !important;
+            }
+          }
+
+          &.ant-checkbox-checked {
+            .ant-checkbox-inner {
+              background: rgba(0, 0, 0, 0.04) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-checkbox-wrapper {
+    align-items: center;
+
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+
+    .ant-checkbox {
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      min-height: 16px;
+
+      border-radius: 2px;
+
+      input[type="checkbox"].ant-checkbox-input {
+        width: 100%;
+        height: 100%;
+      }
+
+      .ant-checkbox-inner {
+        width: 100%;
+        height: 100%;
+
+        border-radius: inherit;
+
+        &::after {
+          inset-inline-start: revert;
+          left: 25%;
+          top: 45%;
+
+          width: 33%;
+          height: 60%;
+        }
+      }
+
+      &-indeterminate {
+        .ant-checkbox-inner {
+          &::after {
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            width: 50%;
+            height: 50%;
+          }
+        }
+      }
+    }
+
+    span {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+      line-height: inherit;
+      color: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,129 @@
+import { Checkbox } from "antd";
+import {
+  CheckboxGroupProps as AntdCheckboxGroupProps,
+  CheckboxOptionType,
+} from "antd/es/checkbox";
+import React, { useMemo, useCallback } from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+const Group = Checkbox.Group;
+
+export interface CheckboxGroupProps extends AntdCheckboxGroupProps {
+  outline?: boolean;
+  hasAll?: boolean;
+  layout?: "vertical" | "horizontal";
+  allMaxHeight?: number;
+}
+
+const CheckboxGroup: React.FC<CheckboxGroupProps> = (props) => {
+  const {
+    className,
+    outline,
+    hasAll,
+    options = [],
+    value,
+    onChange,
+    layout = "horizontal",
+    allMaxHeight,
+    ...rest
+  } = props;
+
+  // 获取所有非"全部"选项的值
+  const normalValues = useMemo(() => {
+    return options?.map((option) => {
+      if (typeof option === "string" || typeof option === "number") {
+        return option;
+      }
+      return (option as CheckboxOptionType).value;
+    });
+  }, [options]);
+
+  // 计算"全部"选项的状态
+  const allChecked = useMemo(() => {
+    if (!hasAll || !value || normalValues.length === 0) return false;
+    const selectedValues = Array.isArray(value) ? value : [];
+    return (
+      normalValues.length > 0 &&
+      normalValues.every((val) => selectedValues.includes(val))
+    );
+  }, [hasAll, value, normalValues]);
+
+  const allIndeterminate = useMemo(() => {
+    if (!hasAll || !value || normalValues.length === 0) return false;
+    const selectedValues = Array.isArray(value) ? value : [];
+    const selectedCount = normalValues.filter((val) =>
+      selectedValues.includes(val)
+    ).length;
+    return selectedCount > 0 && selectedCount < normalValues.length;
+  }, [hasAll, value, normalValues]);
+
+  // 处理"全部"选项的点击
+  const handleAllChange = useCallback(
+    (e: { target: { checked: boolean } }) => {
+      if (!onChange) return;
+
+      if (e.target.checked) {
+        // 选中所有选项
+        onChange(normalValues);
+      } else {
+        // 取消所有选项
+        onChange([]);
+      }
+    },
+    [onChange, normalValues]
+  );
+
+  // 处理普通选项的点击
+  const handleChange = useCallback(
+    (checkedValues: (string | number)[]) => {
+      if (!onChange) return;
+      onChange(checkedValues);
+    },
+    [onChange]
+  );
+
+  if (hasAll) {
+    return (
+      <div
+        className={classNames(styles.checkboxGroup, className, {
+          [styles.outline]: outline,
+          [styles.hasAll]: hasAll,
+        })}
+        style={{ maxHeight: allMaxHeight ? `${allMaxHeight}px` : undefined }}
+      >
+        {!!options.length && (
+          <Checkbox
+            checked={allChecked}
+            indeterminate={allIndeterminate}
+            onChange={handleAllChange}
+            className={styles.allCheckbox}
+          >
+            全选
+          </Checkbox>
+        )}
+        <Group
+          options={options}
+          value={value}
+          onChange={handleChange}
+          {...rest}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <Group
+      className={classNames(styles.checkboxGroup, className, {
+        [styles.outline]: outline,
+        [styles[layout]]: layout,
+      })}
+      options={options}
+      value={value}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+};
+
+export default CheckboxGroup;

package/src/components/Checkbox/index.md

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

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

@@ -0,0 +1,93 @@
+.checkbox {
+  align-items: center;
+
+  &.outline {
+    .ant-checkbox {
+      .ant-checkbox-inner {
+        border-color: rgba(204, 204, 204, 1) !important;
+
+        background: transparent !important;
+
+        &::after {
+          border-color: rgba(0, 0, 0, 1);
+          border-width: 1px;
+        }
+      }
+
+      &.ant-checkbox-checked {
+        .ant-checkbox-inner {
+          background: rgba(255, 255, 255, 1) !important;
+        }
+      }
+    }
+
+    &.ant-checkbox-wrapper-disabled {
+      .ant-checkbox {
+        .ant-checkbox-inner {
+          background: rgba(0, 0, 0, 0.04) !important;
+
+          &::after {
+            border-color: rgba(204, 204, 204, 1) !important;
+          }
+        }
+
+        &.ant-checkbox-checked {
+          .ant-checkbox-inner {
+            background: rgba(0, 0, 0, 0.04) !important;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-checkbox {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    min-height: 16px;
+
+    border-radius: 2px;
+
+    input[type="checkbox"].ant-checkbox-input {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ant-checkbox-inner {
+      width: 100%;
+      height: 100%;
+
+      border-radius: inherit;
+
+      &::after {
+        inset-inline-start: revert;
+        left: 25%;
+        top: 45%;
+
+        width: 33%;
+        height: 60%;
+      }
+    }
+
+    &-indeterminate {
+      .ant-checkbox-inner {
+        &::after {
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+
+          width: 50%;
+          height: 50%;
+        }
+      }
+    }
+  }
+
+  span {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+}

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  Checkbox as AntdCheckbox,
+  CheckboxProps as AntdCheckboxProps,
+} from "antd";
+import styles from "./index.module.less";
+import classNames from "classnames";
+import CheckboxGroup, { CheckboxGroupProps } from "./CheckboxGroup";
+
+export type { CheckboxGroupProps };
+
+export interface CheckboxProps extends AntdCheckboxProps {
+  outline?: boolean;
+}
+
+interface CheckboxFC extends React.FC<CheckboxProps> {
+  Group: React.FC<CheckboxGroupProps>;
+}
+
+const Checkbox: CheckboxFC = (props) => {
+  const { className, outline, ...rest } = props;
+
+  return (
+    <AntdCheckbox
+      className={classNames(styles.checkbox, className, {
+        [styles.outline]: outline,
+      })}
+      {...rest}
+    />
+  );
+};
+
+Checkbox.Group = CheckboxGroup;
+
+export default Checkbox;

package/src/components/CodeMirror/index.md

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

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

@@ -0,0 +1,36 @@
+.CodeMirror {
+  width: 100%;
+  height: 100%;
+
+  border: 1px solid var(--cf-border);
+  border-radius: 6px;
+
+  overflow: hidden;
+
+  .cm-line {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  }
+
+  .cm-focused {
+    outline: none;
+  }
+
+  .cm-lintRange-error {
+    background-size: auto auto;
+  }
+
+  &.hasError {
+    border-color: #ff4d4f;
+
+    &:hover {
+      border-color: #ff4d4f;
+    }
+
+    .cm-focused {
+      border-color: #ff4d4f;
+      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+    }
+  }
+}

package/src/components/CodeMirror/index.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useRef } from "react";
+import ReactCodeMirror, {
+  EditorView,
+  ReactCodeMirrorProps,
+} from "@uiw/react-codemirror";
+import { Extension } from "@codemirror/state";
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { vscodeLight } from "@uiw/codemirror-theme-vscode";
+import { linter, LintSource, Diagnostic } from "@codemirror/lint";
+import { sqlLinter, loadSqlParser } from "./linters/sqlLinter";
+import { jsonLinter, loadJsonParser } from "./linters/jsonLinter";
+
+// 支持的语言类型
+export type CodeMirrorLanguageType = "sql" | "json" | "plain";
+
+export interface CodeMirrorProps extends Omit<
+  ReactCodeMirrorProps,
+  "extensions" | "onError"
+> {
+  /** 语言类型，支持按需引入 */
+  language?: CodeMirrorLanguageType;
+  /** 是否启用语法检查 */
+  enableLint?: boolean;
+  /** 错误信息回调 */
+  onLintError?: (error: string | null) => void;
+  /** 是否有错误，用于显示错误边框 */
+  hasError?: boolean;
+  /** 是否翻译错误信息为中文，默认 false */
+  translateError?: boolean;
+  /**
+   * JSON 校验是否允许根节点为数组 `[...]`，默认 false（仅允许对象 `{...}`）
+   */
+  allowJsonArrayRoot?: boolean;
+}
+
+// 按需引入语言支持
+const getLanguageExtension = async (language: CodeMirrorLanguageType) => {
+  switch (language) {
+    case "sql": {
+      const { sql } = await import("@codemirror/lang-sql");
+      return sql();
+    }
+    case "json": {
+      const { json } = await import("@codemirror/lang-json");
+      return json();
+    }
+    case "plain":
+    default:
+      return null;
+  }
+};
+
+const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
+  const {
+    className,
+    language = "sql",
+    enableLint = true,
+    basicSetup,
+    onLintError,
+    hasError = false,
+    translateError = false,
+    allowJsonArrayRoot = false,
+    ...restProps
+  } = props;
+  const [extensions, setExtensions] = React.useState<Extension[]>([]);
+  const onLintErrorRef = useRef(onLintError);
+  onLintErrorRef.current = onLintError;
+
+  useEffect(() => {
+    const loadExtensions = async () => {
+      const languageExt = await getLanguageExtension(language);
+      const newExtensions: Extension[] = [EditorView.lineWrapping];
+
+      if (languageExt) {
+        newExtensions.push(languageExt);
+      }
+
+      if (enableLint) {
+        let lintSource: LintSource | null = null;
+
+        if (language === "sql") {
+          // 预加载 SQL 解析器
+          await loadSqlParser();
+          lintSource = sqlLinter(translateError);
+          newExtensions.push(linter(lintSource));
+        } else if (language === "json") {
+          // 预加载 JSON 解析器
+          await loadJsonParser();
+          lintSource = jsonLinter({
+            translate: translateError,
+            allowArrayRoot: allowJsonArrayRoot,
+          });
+          newExtensions.push(linter(lintSource));
+        }
+
+        // 添加错误监听扩展
+        if (lintSource) {
+          newExtensions.push(
+            EditorView.updateListener.of((update) => {
+              if (update.docChanged || update.viewportChanged) {
+                // 延迟执行以等待 linter 完成
+                setTimeout(async () => {
+                  try {
+                    const diagnosticsResult = lintSource?.(update.view);
+                    // 处理可能是 Promise 的情况
+                    const diagnostics: readonly Diagnostic[] =
+                      diagnosticsResult instanceof Promise
+                        ? await diagnosticsResult
+                        : diagnosticsResult || [];
+
+                    const errors = diagnostics.filter(
+                      (d: Diagnostic) => d.severity === "error",
+                    );
+                    if (errors && errors.length > 0) {
+                      onLintErrorRef.current?.(errors[0].message);
+                    } else {
+                      onLintErrorRef.current?.(null);
+                    }
+                  } catch (e) {
+                    // 忽略错误
+                    onLintErrorRef.current?.(null);
+                  }
+                }, 150);
+              }
+            }),
+          );
+        }
+      } else {
+        // 如果禁用了 lint，清除错误
+        onLintErrorRef.current?.(null);
+      }
+
+      setExtensions(newExtensions);
+    };
+
+    loadExtensions();
+  }, [language, enableLint, translateError, allowJsonArrayRoot]);
+
+  return (
+    <ReactCodeMirror
+      minHeight="100px"
+      theme={vscodeLight}
+      {...restProps}
+      basicSetup={
+        typeof basicSetup === "boolean"
+          ? basicSetup
+          : {
+              lineNumbers: true,
+              highlightActiveLineGutter: true,
+              foldGutter: true,
+              dropCursor: true,
+              allowMultipleSelections: true,
+              indentOnInput: true,
+              bracketMatching: true,
+              closeBrackets: true,
+              autocompletion: true,
+              highlightActiveLine: true,
+              highlightSelectionMatches: true,
+              ...(basicSetup ?? {}),
+            }
+      }
+      extensions={extensions}
+      className={classNames(styles.CodeMirror, className, {
+        [styles.hasError]: hasError,
+      })}
+    />
+  );
+};
+
+export default CodeMirror;