@hsu-react/ui 0.0.1

package/src/components/CodeMirror/linters/errorTranslator.ts

@@ -0,0 +1,166 @@
+/**
+ * 将英文错误信息翻译成中文
+ */
+export function translateError(message: string): string {
+  if (!message) return message;
+
+  let translated = message;
+
+  // 先处理完整的 JSON 错误模式（优先级最高）
+  const jsonPatterns: Array<[RegExp, string]> = [
+    [
+      /Unexpected token (.+) in JSON at position (\d+)/gi,
+      "JSON 中位置 $2 处意外的标记: $1",
+    ],
+    [/Unexpected end of JSON input/gi, "JSON 输入意外结束"],
+    [
+      /Expected property name or '}' in JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处期望属性名或 '}'",
+    ],
+    [
+      /Expected double-quoted property name in JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处期望双引号属性名",
+    ],
+    [
+      /Expected ':' after property name in JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处属性名后期望 ':'",
+    ],
+    [
+      /Expected ',' or '}' after property value in JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处属性值后期望 ',' 或 '}'",
+    ],
+    [
+      /Expected ',' or ']' after array element in JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处数组元素后期望 ',' 或 ']'",
+    ],
+    [
+      /Unexpected non-whitespace character after JSON at position (\d+)/gi,
+      "JSON 中位置 $1 处意外的非空白字符",
+    ],
+    [/Unexpected end of JSON input/gi, "JSON 输入意外结束"],
+  ];
+
+  // 应用 JSON 完整模式
+  jsonPatterns?.forEach(([pattern, replacement]) => {
+    translated = translated.replace(pattern, replacement);
+  });
+
+  // 处理位置信息（如果还没有被上面的模式处理）
+  if (translated.includes("at position")) {
+    const positionMatch = translated.match(/at position (\d+)/);
+    if (positionMatch) {
+      translated = translated.replace(
+        /at position \d+/,
+        `位置 ${positionMatch[1]}`
+      );
+    }
+  }
+
+  // 处理常见的单词翻译（按长度从长到短排序，优先匹配长短语）
+  const wordTranslations: Array<[string, string]> = [
+    ["but found", "但找到"],
+    ["in JSON", "在 JSON 中"],
+    ["at position", "位置"],
+    ["after property", "属性后"],
+    ["after array", "数组后"],
+    ["property name", "属性名"],
+    ["property value", "属性值"],
+    ["array element", "数组元素"],
+    ["non-whitespace character", "非空白字符"],
+    ["double-quoted", "双引号"],
+    ["Unexpected", "意外的"],
+    ["Expected", "期望"],
+    ["Invalid", "无效的"],
+    ["Missing", "缺少"],
+    ["Unknown", "未知的"],
+    ["SyntaxError", "语法错误"],
+    ["token", "标记"],
+    ["column", "列"],
+    ["table", "表"],
+    ["keyword", "关键字"],
+    ["operator", "操作符"],
+    ["function", "函数"],
+    ["syntax", "语法"],
+    ["parse", "解析"],
+    ["error", "错误"],
+    ["end", "结束"],
+    ["input", "输入"],
+    ["character", "字符"],
+    ["found", "找到"],
+    ["but", "但是"],
+  ];
+
+  // 应用单词翻译（按顺序，长短语优先）
+  wordTranslations?.forEach(([en, zh]) => {
+    // 对于短语，直接替换
+    if (en.includes(" ")) {
+      const regex = new RegExp(en.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+      translated = translated.replace(regex, zh);
+    } else {
+      // 对于单词，使用单词边界
+      const regex = new RegExp(
+        `\\b${en.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`,
+        "gi"
+      );
+      translated = translated.replace(regex, zh);
+    }
+  });
+
+  // 处理常见的 SQL 错误模式
+  const sqlPatterns: Array<[RegExp, string]> = [
+    [/SyntaxError: (.+)/gi, "语法错误: $1"],
+    [/Expected (.+) but found (.+)/gi, "期望 $1 但找到 $2"],
+    [/Invalid (.+)/gi, "无效的 $1"],
+    [/Missing (.+)/gi, "缺少 $1"],
+    [/Unknown (.+)/gi, "未知的 $1"],
+  ];
+
+  sqlPatterns?.forEach(([pattern, replacement]) => {
+    translated = translated.replace(pattern, replacement);
+  });
+
+  // 清理多余的空白字符和标点
+  translated = translated
+    .replace(/\s+/g, " ") // 多个空格合并为一个
+    .replace(/\s*,\s*/g, "，") // 英文逗号改为中文逗号
+    .replace(/\s*:\s*/g, "：") // 英文冒号改为中文冒号
+    .replace(/\s*\.\s*/g, "。") // 英文句号改为中文句号
+    .trim();
+
+  // 最后检查：如果还有明显的英文单词残留，尝试翻译常见单词
+  // 注意：这些单词可能已经在前面的翻译中被处理，这里作为兜底
+  const commonEnglishWords: Array<[string, string]> = [
+    ["or", "或"],
+    ["and", "和"],
+    ["of", "的"],
+    ["with", "使用"],
+    ["without", "没有"],
+    ["for", "为"],
+    ["from", "从"],
+    ["by", "通过"],
+    ["the", "该"],
+    ["a", "一个"],
+    ["an", "一个"],
+    ["is", "是"],
+    ["are", "是"],
+    ["was", "是"],
+    ["were", "是"],
+    ["has", "有"],
+    ["have", "有"],
+    ["in", "在"],
+    ["at", "在"],
+    ["to", "到"],
+  ];
+
+  // 直接替换，不需要先检查（避免正则状态问题）
+  commonEnglishWords?.forEach(([en, zh]) => {
+    // 使用单词边界，确保只替换完整的单词
+    const regex = new RegExp(`\\b${en}\\b`, "gi");
+    translated = translated.replace(regex, zh);
+  });
+
+  // 最终清理：移除多余的空格
+  translated = translated.replace(/\s+/g, " ").trim();
+
+  return translated;
+}

package/src/components/CodeMirror/linters/jsonLinter.ts

@@ -0,0 +1,122 @@
+import { EditorView } from "@codemirror/view";
+import { Diagnostic } from "@codemirror/lint";
+import { translateError } from "./errorTranslator";
+
+// 全局 JSON 解析器实例
+let jsonParser: { parse: (text: string) => unknown } | null = null;
+
+// 预加载 JSON 解析器
+const loadJsonParser = async () => {
+  if (!jsonParser) {
+    try {
+      const { parse } = await import("comment-json");
+      jsonParser = { parse };
+    } catch {
+      void 0;
+    }
+  }
+  return jsonParser;
+};
+
+export interface JsonLinterOptions {
+  /** 是否翻译错误信息为中文 */
+  translate?: boolean;
+  /**
+   * 是否允许根节点为 JSON 数组 `[...]`（仅影响顶层字符校验，默认 false 仅允许 `{...}`）
+   */
+  allowArrayRoot?: boolean;
+}
+
+function resolveJsonLinterOptions(
+  options: JsonLinterOptions | boolean = false,
+): { translate: boolean; allowArrayRoot: boolean } {
+  if (typeof options === "boolean") {
+    return { translate: options, allowArrayRoot: false };
+  }
+  return {
+    translate: options.translate ?? false,
+    allowArrayRoot: options.allowArrayRoot ?? false,
+  };
+}
+
+// JSON 语法检查器（可传 `boolean` 表示仅开启 translate，兼容旧用法）
+export function jsonLinter(options: JsonLinterOptions | boolean = false) {
+  const { translate, allowArrayRoot } = resolveJsonLinterOptions(options);
+
+  return (view: EditorView) => {
+    const diagnostics: Diagnostic[] = [];
+    const text = view.state.doc.toString();
+
+    if (!text.trim()) {
+      return diagnostics;
+    }
+
+    // 默认必须以 `{` 开头；开启 allowArrayRoot 时亦允许 `[`
+    const trimmedStart = text.trimStart();
+    const rootOk =
+      trimmedStart.startsWith("{") ||
+      (allowArrayRoot && trimmedStart.startsWith("["));
+
+    if (!rootOk) {
+      const firstNonSpaceIndex = text.search(/\S/);
+      const from = firstNonSpaceIndex === -1 ? 0 : firstNonSpaceIndex;
+      const to = Math.min(from + 1, text.length);
+
+      diagnostics.push({
+        from,
+        to,
+        severity: "error",
+        message: "请输入 JSON 格式",
+      });
+
+      return diagnostics;
+    }
+
+    if (jsonParser) {
+      try {
+        jsonParser.parse(text);
+      } catch (e: unknown) {
+        const error = e as Error;
+        const message = error.message;
+
+        // 尝试从错误消息中提取位置信息
+        let from = 0;
+        let to = text.length;
+
+        // 解析位置信息，例如 "Unexpected token } in JSON at position 10"
+        const positionMatch = message.match(/at position (\d+)/);
+        if (positionMatch) {
+          const position = parseInt(positionMatch[1], 10);
+          from = Math.max(0, position - 1);
+          to = Math.min(text.length, position + 1);
+        }
+
+        // 根据 translate 参数决定是否翻译错误信息
+        const finalMessage = translate ? translateError(message) : message;
+
+        diagnostics.push({
+          from,
+          to,
+          severity: "error",
+          message: finalMessage,
+        });
+      }
+    } else {
+      // 如果解析器还未加载，尝试加载
+      loadJsonParser().then((parser) => {
+        if (parser) {
+          try {
+            parser.parse(text);
+          } catch {
+            void 0;
+          }
+        }
+      });
+    }
+
+    return diagnostics;
+  };
+}
+
+// 导出预加载函数，供外部使用
+export { loadJsonParser };

package/src/components/CodeMirror/linters/sqlLinter.ts

@@ -0,0 +1,226 @@
+import { EditorView } from "@codemirror/view";
+import { Diagnostic } from "@codemirror/lint";
+import { translateError } from "./errorTranslator";
+
+// 全局 SQL 解析器实例
+let sqlParser: { astify: (sql: string) => unknown } | null = null;
+
+// MongoDB 解析器函数类型
+type MongoParser = (query: string) => unknown;
+
+let mongoParser: MongoParser | null = null;
+
+// 预加载 SQL 解析器
+const loadSqlParser = async () => {
+  if (!sqlParser) {
+    try {
+      const { Parser } = await import("node-sql-parser");
+      sqlParser = new Parser();
+    } catch {
+      void 0;
+    }
+  }
+  return sqlParser;
+};
+
+// 预加载 MongoDB 解析器
+const loadMongoParser = async () => {
+  if (!mongoParser) {
+    try {
+      const mongoQueryParser = await import("mongodb-query-parser");
+      mongoParser = mongoQueryParser.default;
+    } catch {
+      void 0;
+    }
+  }
+  return mongoParser;
+};
+
+// 检测是否为 MongoDB use 语句
+function isMongoUseStatement(text: string): boolean {
+  const trimmed = text.trim();
+  // MongoDB use 语句格式：use database_name
+  // 数据库名可以包含字母、数字、下划线、连字符等
+  const usePattern = /^use\s+[a-zA-Z0-9_-]+(\s*;?\s*)$/i;
+  return usePattern.test(trimmed);
+}
+
+// 校验 MongoDB use 语句
+function validateMongoUseStatement(text: string): {
+  valid: boolean;
+  error?: string;
+} {
+  const trimmed = text.trim();
+
+  if (!trimmed) {
+    return { valid: false, error: "use 语句不能为空" };
+  }
+
+  // 检查格式：use database_name
+  const usePattern = /^use\s+([a-zA-Z0-9_-]+)(\s*;?\s*)$/i;
+  const match = trimmed.match(usePattern);
+
+  if (!match) {
+    return { valid: false, error: "use 语句格式错误，应为：use database_name" };
+  }
+
+  const dbName = match[1];
+  if (!dbName) {
+    return { valid: false, error: "数据库名称不能为空" };
+  }
+
+  // 数据库名不能以数字开头
+  if (/^\d/.test(dbName)) {
+    return { valid: false, error: "数据库名称不能以数字开头" };
+  }
+
+  return { valid: true };
+}
+
+// 检测查询类型：SQL 或 MongoDB
+function detectQueryType(text: string): "sql" | "mongodb" {
+  const trimmed = text.trim();
+
+  // 优先判断是否可能为 MongoDB 查询（MongoDB shell 命令格式）
+  const isMongo =
+    trimmed.startsWith("db.") ||
+    trimmed.includes(".find(") ||
+    trimmed.includes(".aggregate(") ||
+    trimmed.includes(".insert(") ||
+    trimmed.includes(".update(") ||
+    trimmed.includes(".delete(") ||
+    trimmed.includes(".remove(") ||
+    trimmed.startsWith("use ");
+
+  if (isMongo) {
+    return "mongodb";
+  }
+
+  // 默认尝试 SQL
+  return "sql";
+}
+
+// SQL 和 MongoDB 语法检查器（自动识别）
+export function sqlLinter(translate: boolean = false) {
+  return (view: EditorView) => {
+    const diagnostics: Diagnostic[] = [];
+    const text = view.state.doc.toString();
+
+    if (!text.trim()) {
+      return diagnostics;
+    }
+
+    // 按行分割文本
+    const lines = text.split("\n");
+    let currentOffset = 0;
+    const nonUseLines: Array<{ line: string; start: number; end: number }> = [];
+
+    // 第一遍遍历：单独判断 use 行，收集非 use 行
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const lineStart = currentOffset;
+      const lineEnd = currentOffset + line.length;
+      const trimmedLine = line.trim();
+
+      // 跳过空行
+      if (!trimmedLine) {
+        currentOffset = lineEnd + 1; // +1 是换行符
+        continue;
+      }
+
+      // 单独判断 use 行
+      if (isMongoUseStatement(trimmedLine)) {
+        const validation = validateMongoUseStatement(trimmedLine);
+        if (!validation.valid) {
+          diagnostics.push({
+            from: lineStart,
+            to: lineEnd,
+            severity: "error",
+            message: translate
+              ? translateError(validation.error || "use 语句格式错误")
+              : validation.error || "use 语句格式错误",
+          });
+        }
+      } else {
+        // 收集非 use 行
+        nonUseLines.push({
+          line: line,
+          start: lineStart,
+          end: lineEnd,
+        });
+      }
+
+      currentOffset = lineEnd + 1; // +1 是换行符
+    }
+
+    // 第二遍：统一判断所有非 use 行
+    if (nonUseLines.length > 0) {
+      // 合并所有非 use 行
+      const nonUseText = nonUseLines?.map((item) => item.line).join("\n");
+      const nonUseStart = nonUseLines[0].start;
+      const nonUseEnd = nonUseLines[nonUseLines.length - 1].end;
+
+      // 判断查询类型
+      const queryType = detectQueryType(nonUseText);
+
+      if (queryType === "mongodb") {
+        // MongoDB 语句使用 mongoParser 校验
+        if (mongoParser) {
+          try {
+            mongoParser(nonUseText);
+          } catch (e: unknown) {
+            const errorMessage = (e as Error).message;
+            diagnostics.push({
+              from: nonUseStart,
+              to: nonUseEnd,
+              severity: "error",
+              message: translate ? translateError(errorMessage) : errorMessage,
+            });
+          }
+        } else {
+          // 如果解析器还未加载，尝试加载
+          loadMongoParser().then((parser) => {
+            if (parser) {
+              try {
+                parser(nonUseText);
+              } catch {
+                void 0;
+              }
+            }
+          });
+        }
+      } else {
+        // SQL 语句使用 SQL 解析器
+        if (sqlParser) {
+          try {
+            sqlParser.astify(nonUseText);
+          } catch (e: unknown) {
+            const errorMessage = (e as Error).message;
+            diagnostics.push({
+              from: nonUseStart,
+              to: nonUseEnd,
+              severity: "error",
+              message: translate ? translateError(errorMessage) : errorMessage,
+            });
+          }
+        } else {
+          // 如果解析器还未加载，尝试加载
+          loadSqlParser().then((parser) => {
+            if (parser) {
+              try {
+                parser.astify(nonUseText);
+              } catch {
+                void 0;
+              }
+            }
+          });
+        }
+      }
+    }
+
+    return diagnostics;
+  };
+}
+
+// 导出预加载函数，供外部使用
+export { loadSqlParser, loadMongoParser };

package/src/components/Copy/index.md

@@ -0,0 +1,42 @@
+---
+nav: 组件
+group:
+  title: 通用
+  order: 1
+title: Copy 复制
+---
+
+# Copy 复制
+
+一键复制指定 DOM 节点（通过 `id` 定位）的内容，支持转 Markdown。
+
+## 引入
+
+```ts
+import { Copy } from "@hsu-react/ui";
+```
+
+## 基础用法
+
+```tsx
+import React from "react";
+import { Copy } from "@hsu-react/ui";
+
+export default () => (
+  <div>
+    <p id="copy-demo-text">这是一段可被复制的文本，点击右侧按钮试试。</p>
+    <Copy id="copy-demo-text" md={false} text="复制文本" />
+  </div>
+);
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| id | 待复制内容所在元素的 DOM id | `string` | - |
+| text | 按钮文案 | `string` | `复制` |
+| md | 是否将内容转为 Markdown 再复制 | `boolean` | `true` |
+| isMessage | 复制成功是否弹 message 提示 | `boolean` | `true` |
+| hideIcon | 是否隐藏图标 | `boolean` | `false` |
+| copyIcon / copyedIcon | 自定义复制前/后图标 | `ReactNode` | - |

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

@@ -0,0 +1,44 @@
+.Copy {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  width: max-content;
+  padding: 2px 4px;
+
+  font-size: 14px;
+  line-height: 18px;
+  color: #5e6772;
+
+  cursor: pointer;
+
+  transition: color 0.3s, background-color 0.3s;
+
+  &:hover {
+    color: #060607;
+
+    background-color: #f3f5fc;
+
+    border-radius: 4px;
+  }
+
+  .icon {
+    font-size: 18px;
+  }
+}
+
+.Copyed {
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--text-color);
+
+  cursor: default;
+
+  .icon {
+    font-size: 18px;
+  }
+}