@nokecy/qc-ui-components 0.0.0-stage → 2.0.0-beta.0

package/dist/cjs/components/RegexEditor/validation/types.d.ts

@@ -0,0 +1,142 @@
+/**
+ * 正则表达式验证引擎 - 类型定义
+ *
+ * @module RegexEditor/validation/types
+ * @description 定义正则表达式解析、验证、复杂度分析相关的核心类型
+ */
+/**
+ * regexp-tree 的 AST 节点类型
+ *
+ * @remarks
+ * 使用随 QC_UI 一同发布的 regexp-tree AST 类型定义。
+ * 节点包含 type, loc, expression 等属性,支持完整的类型推导。
+ *
+ * 类型通过相对模块引用发布,不依赖消费者的源码目录或全局类型配置。
+ *
+ * @see https://github.com/DmitrySoshnikov/regexp-tree
+ */
+import type { AstNode, AstRegExp as RegExpAstNode } from '../../../types/regexp-tree-ast';
+export type ASTNode = AstNode;
+export type AstRegExp = RegExpAstNode;
+/**
+ * 正则表达式解析结果
+ *
+ * @interface ParseResult
+ * @property {boolean} success - 解析是否成功
+ * @property {ASTNode} [ast] - 抽象语法树节点（成功时存在）
+ * @property {string} pattern - 原始正则表达式字符串
+ * @property {RegexError} [error] - 解析错误信息（失败时存在）
+ *
+ * @example
+ * ```typescript
+ * const result = parseRegex('^LOT\\d{6}$');
+ * if (result.success) {
+ *   console.log(result.ast);
+ * } else {
+ *   console.error(result.error);
+ * }
+ * ```
+ */
+export interface ParseResult {
+    success: boolean;
+    ast?: ASTNode;
+    pattern: string;
+    error?: RegexError;
+}
+/**
+ * 正则表达式验证结果
+ *
+ * @interface ValidationResult
+ * @property {boolean} valid - 验证是否通过（无错误,可能有警告）
+ * @property {RegexError[]} errors - 错误列表（仅包含 severity='error' 的项）
+ * @property {RegexError[]} warnings - 警告列表（仅包含 severity='warning' 的项）
+ * @property {RegexError[]} infos - 信息列表（仅包含 severity='info' 的项）
+ * @property {string} pattern - 被验证的正则表达式字符串
+ *
+ * @example
+ * ```typescript
+ * const result = validateRegex(pattern);
+ *
+ * if (result.errors.length > 0) {
+ *   console.error('验证失败:', result.errors);
+ * } else if (result.warnings.length > 0) {
+ *   console.warn('验证通过但有警告:', result.warnings);
+ * } else {
+ *   console.log('验证完全通过');
+ * }
+ * ```
+ */
+export interface ValidationResult {
+    valid: boolean;
+    errors: RegexError[];
+    warnings: RegexError[];
+    infos: RegexError[];
+    pattern: string;
+}
+/**
+ * 正则表达式错误信息
+ *
+ * @interface RegexError
+ * @property {string} type - 错误类型标识符
+ * @property {string} message - 人类可读的错误描述
+ * @property {Object} position - 错误位置范围
+ * @property {number} position.start - 起始位置（字符索引）
+ * @property {number} position.end - 结束位置（字符索引）
+ * @property {'error' | 'warning' | 'info'} severity - 严重程度
+ * @property {string} [suggestion] - 修复建议（可选）
+ *
+ * @example
+ * ```typescript
+ * const error: RegexError = {
+ *   type: 'empty_group',
+ *   message: '空的捕获组,建议使用非捕获组 (?:)',
+ *   position: { start: 5, end: 7 },
+ *   severity: 'warning',
+ *   suggestion: '使用 (?:) 代替 ()'
+ * };
+ * ```
+ */
+export interface RegexError {
+    type: string;
+    message: string;
+    position: {
+        start: number;
+        end: number;
+    };
+    severity: 'error' | 'warning' | 'info';
+    suggestion?: string;
+}
+/**
+ * 正则表达式复杂度指标
+ *
+ * @interface ComplexityMetrics
+ * @property {number} nodeCount - AST 节点总数
+ * @property {number} depth - 最大嵌套深度
+ * @property {number} alternationCount - 分支数量 (|)
+ * @property {number} quantifierCount - 量词数量 (+, *, {n,m})
+ * @property {number} groupCount - 捕获组数量
+ * @property {number} characterClassCount - 字符类数量 ([...])
+ * @property {'low' | 'medium' | 'high'} backtrackingRisk - 回溯风险等级
+ * @property {number} performanceScore - 性能评分 (0-100)
+ * @property {string[]} suggestions - 优化建议列表
+ *
+ * @example
+ * ```typescript
+ * const metrics = analyzeComplexity(ast);
+ * if (metrics.backtrackingRisk === 'high') {
+ *   console.warn('高回溯风险:', metrics.suggestions);
+ * }
+ * console.log('性能评分:', metrics.performanceScore);
+ * ```
+ */
+export interface ComplexityMetrics {
+    nodeCount: number;
+    depth: number;
+    alternationCount: number;
+    quantifierCount: number;
+    groupCount: number;
+    characterClassCount: number;
+    backtrackingRisk: 'low' | 'medium' | 'high';
+    performanceScore: number;
+    suggestions: string[];
+}

package/dist/cjs/components/RegexEditor/validation/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/components/RegexEditor/validation/validator.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 正则表达式语法验证器
+ *
+ * @module RegexEditor/validation/validator
+ * @description 检测正则表达式的常见语法错误和安全问题
+ *
+ * @remarks
+ * 该模块基于 regexp-tree AST 提供以下验证规则:
+ * 1. 空捕获组检测 - 检测 () 并建议使用 (?:)
+ * 2. 无效量词检测 - 检测 {min,max} 中 min > max
+ * 3. 嵌套量词检测 - 检测 (a+)+ 等导致灾难性回溯的模式
+ * 4. 未闭合组检测 - 通过解析错误自动检测
+ *
+ * @see {@link parseRegex} 用于解析正则表达式
+ */
+import type { ASTNode, RegexError, ValidationResult } from './types';
+/**
+ * 验证正则表达式 AST
+ *
+ * @param ast - 抽象语法树节点
+ * @returns {RegexError[]} 错误和警告列表
+ *
+ * @remarks
+ * 该函数遍历 AST 节点,应用以下验证规则:
+ * - 空捕获组 (警告)
+ * - 无效量词 (错误)
+ * - 嵌套量词/灾难性回溯 (错误)
+ *
+ * @example
+ * ```typescript
+ * const result = parseRegex('()test');
+ * const errors = validateRegex(result.ast!);
+ * console.log(errors); // [{ type: 'empty_group', severity: 'warning', ... }]
+ * ```
+ */
+export declare const validateRegex: (ast: ASTNode) => RegexError[];
+/**
+ * 整合验证流程: 解析 + 语法验证
+ *
+ * @param pattern - 正则表达式字符串
+ * @param flags - 可选的正则表达式标志
+ * @returns {ValidationResult} 完整的验证结果
+ *
+ * @remarks
+ * 该函数整合了以下步骤:
+ * 1. 解析正则表达式 {@link parseRegex}
+ * 2. 语法验证 {@link validateRegex}
+ * 3. 分类错误、警告和信息
+ *
+ * @example
+ * ```typescript
+ * const result = validatePattern('^LOT\\d{6}$');
+ * if (result.valid) {
+ *   console.log('验证通过');
+ * } else {
+ *   console.error('错误:', result.errors);
+ * }
+ * ```
+ */
+export declare const validatePattern: (pattern: string, flags?: string) => ValidationResult;

package/dist/cjs/components/RegexEditor/validation/validator.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateRegex = exports.validatePattern = void 0;
+var _parser = require("./parser");
+/**
+ * 正则表达式语法验证器
+ *
+ * @module RegexEditor/validation/validator
+ * @description 检测正则表达式的常见语法错误和安全问题
+ *
+ * @remarks
+ * 该模块基于 regexp-tree AST 提供以下验证规则:
+ * 1. 空捕获组检测 - 检测 () 并建议使用 (?:)
+ * 2. 无效量词检测 - 检测 {min,max} 中 min > max
+ * 3. 嵌套量词检测 - 检测 (a+)+ 等导致灾难性回溯的模式
+ * 4. 未闭合组检测 - 通过解析错误自动检测
+ *
+ * @see {@link parseRegex} 用于解析正则表达式
+ */
+
+/**
+ * 验证正则表达式 AST
+ *
+ * @param ast - 抽象语法树节点
+ * @returns {RegexError[]} 错误和警告列表
+ *
+ * @remarks
+ * 该函数遍历 AST 节点,应用以下验证规则:
+ * - 空捕获组 (警告)
+ * - 无效量词 (错误)
+ * - 嵌套量词/灾难性回溯 (错误)
+ *
+ * @example
+ * ```typescript
+ * const result = parseRegex('()test');
+ * const errors = validateRegex(result.ast!);
+ * console.log(errors); // [{ type: 'empty_group', severity: 'warning', ... }]
+ * ```
+ */
+var validateRegex = exports.validateRegex = function validateRegex(ast) {
+  var errors = [];
+
+  // 规则1: 检查空捕获组
+  (0, _parser.traverseAST)(ast, {
+    Group: function Group(path) {
+      var node = path.node;
+
+      // 检查是否是捕获组且为空
+      if (node.capturing) {
+        // 空组的判断条件:
+        // - expression 为 undefined/null
+        // - expression.type 为 'Empty'
+        // - expression.type 为 'Alternative' 且 expressions 为空数组
+        var expression = node.expression;
+        var isEmpty = !expression || expression.type === 'Empty' || expression.type === 'Alternative' && Array.isArray(expression.expressions) && expression.expressions.length === 0;
+        if (isEmpty) {
+          var _node$loc, _node$loc2;
+          errors.push({
+            type: 'empty_group',
+            message: '空的捕获组,建议使用非捕获组 (?:)',
+            position: {
+              start: ((_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start) || 0,
+              end: ((_node$loc2 = node.loc) === null || _node$loc2 === void 0 ? void 0 : _node$loc2.end) || 0
+            },
+            severity: 'warning',
+            suggestion: '使用 (?:) 代替 ()'
+          });
+        }
+      }
+    }
+  });
+
+  // 规则2: 检查无效量词
+  (0, _parser.traverseAST)(ast, {
+    Repetition: function Repetition(path) {
+      var node = path.node;
+      var quantifier = node.quantifier;
+
+      // 检查 {min,max} 形式的量词
+      if (quantifier && quantifier.kind === 'Range') {
+        var from = quantifier.from;
+        var to = quantifier.to;
+
+        // 检查最小值是否大于最大值
+        if (typeof from === 'number' && typeof to === 'number' && from > to) {
+          var _node$loc3, _node$loc4;
+          errors.push({
+            type: 'invalid_quantifier',
+            message: "\u65E0\u6548\u7684\u91CF\u8BCD: {".concat(from, ",").concat(to, "} - \u6700\u5C0F\u503C\u4E0D\u80FD\u5927\u4E8E\u6700\u5927\u503C"),
+            position: {
+              start: ((_node$loc3 = node.loc) === null || _node$loc3 === void 0 ? void 0 : _node$loc3.start) || 0,
+              end: ((_node$loc4 = node.loc) === null || _node$loc4 === void 0 ? void 0 : _node$loc4.end) || 0
+            },
+            severity: 'error',
+            suggestion: "\u4F7F\u7528 {".concat(to, ",").concat(from, "} \u6216\u4FEE\u6539\u4E3A\u6B63\u786E\u7684\u8303\u56F4")
+          });
+        }
+      }
+    }
+  });
+
+  // 规则3: 检查嵌套量词（灾难性回溯风险）
+  (0, _parser.traverseAST)(ast, {
+    Repetition: function Repetition(path) {
+      var _node$expression;
+      var node = path.node;
+
+      // 检查量词内部是否包含另一个量词
+      // 模式: (a+)+, (a*)+, (a?)+, (a{n,m})+
+      if (((_node$expression = node.expression) === null || _node$expression === void 0 ? void 0 : _node$expression.type) === 'Group') {
+        var group = node.expression;
+        var innerExpression = group.expression;
+
+        // 检查组内表达式是否是量词
+        if ((innerExpression === null || innerExpression === void 0 ? void 0 : innerExpression.type) === 'Repetition') {
+          var _node$loc5, _node$loc6;
+          errors.push({
+            type: 'catastrophic_backtracking',
+            message: '嵌套的量词可能导致灾难性回溯',
+            position: {
+              start: ((_node$loc5 = node.loc) === null || _node$loc5 === void 0 ? void 0 : _node$loc5.start) || 0,
+              end: ((_node$loc6 = node.loc) === null || _node$loc6 === void 0 ? void 0 : _node$loc6.end) || 0
+            },
+            severity: 'error',
+            suggestion: '考虑使用原子组 (?>...) 或重新设计表达式'
+          });
+        }
+
+        // 检查更复杂的嵌套: (a|b)+c
+        // Alternative 包含 Repetition
+        if ((innerExpression === null || innerExpression === void 0 ? void 0 : innerExpression.type) === 'Alternative') {
+          var expressions = innerExpression.expressions || [];
+          var hasInnerQuantifier = expressions.some(function (expr) {
+            return expr.type === 'Repetition';
+          });
+          if (hasInnerQuantifier) {
+            var _node$loc7, _node$loc8;
+            errors.push({
+              type: 'catastrophic_backtracking',
+              message: '嵌套的量词可能导致灾难性回溯',
+              position: {
+                start: ((_node$loc7 = node.loc) === null || _node$loc7 === void 0 ? void 0 : _node$loc7.start) || 0,
+                end: ((_node$loc8 = node.loc) === null || _node$loc8 === void 0 ? void 0 : _node$loc8.end) || 0
+              },
+              severity: 'error',
+              suggestion: '考虑使用原子组 (?>...) 或重新设计表达式'
+            });
+          }
+        }
+      }
+    }
+  });
+  return errors;
+};
+
+/**
+ * 整合验证流程: 解析 + 语法验证
+ *
+ * @param pattern - 正则表达式字符串
+ * @param flags - 可选的正则表达式标志
+ * @returns {ValidationResult} 完整的验证结果
+ *
+ * @remarks
+ * 该函数整合了以下步骤:
+ * 1. 解析正则表达式 {@link parseRegex}
+ * 2. 语法验证 {@link validateRegex}
+ * 3. 分类错误、警告和信息
+ *
+ * @example
+ * ```typescript
+ * const result = validatePattern('^LOT\\d{6}$');
+ * if (result.valid) {
+ *   console.log('验证通过');
+ * } else {
+ *   console.error('错误:', result.errors);
+ * }
+ * ```
+ */
+var validatePattern = exports.validatePattern = function validatePattern(pattern, flags) {
+  // 1. 解析正则表达式
+  var parseResult = (0, _parser.parseRegex)(pattern, flags);
+
+  // 解析失败,返回解析错误
+  if (!parseResult.success) {
+    return {
+      valid: false,
+      errors: parseResult.error ? [parseResult.error] : [],
+      warnings: [],
+      infos: [],
+      pattern: pattern
+    };
+  }
+
+  // 2. 语法验证
+  var allErrors = validateRegex(parseResult.ast);
+
+  // 3. 分类错误、警告和信息
+  var errors = allErrors.filter(function (e) {
+    return e.severity === 'error';
+  });
+  var warnings = allErrors.filter(function (e) {
+    return e.severity === 'warning';
+  });
+  var infos = allErrors.filter(function (e) {
+    return e.severity === 'info';
+  });
+  return {
+    valid: errors.length === 0,
+    // 只有错误才影响 valid 状态
+    errors: errors,
+    warnings: warnings,
+    infos: infos,
+    pattern: pattern
+  };
+};

package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.d.ts

@@ -0,0 +1,20 @@
+/**
+ * FlagsSelector 组件
+ *
+ * @module RegexEditor/visualizer/FlagsSelector
+ * @description 正则表达式标志选择器组件
+ */
+import React from 'react';
+import type { FlagsSelectorProps } from './types';
+/**
+ * 标志选择器组件
+ *
+ * @example
+ * ```tsx
+ * <FlagsSelector
+ *   value={{ global: true, ignoreCase: true }}
+ *   onChange={(flags) => console.log(flags)}
+ * />
+ * ```
+ */
+export declare const FlagsSelector: React.FC<FlagsSelectorProps>;

package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.js

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlagsSelector = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _antd = require("antd");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
+ * FlagsSelector 组件
+ *
+ * @module RegexEditor/visualizer/FlagsSelector
+ * @description 正则表达式标志选择器组件
+ */
+/**
+ * 标志配置
+ */
+var FLAG_CONFIG = [{
+  key: 'global',
+  label: 'g',
+  tooltip: '全局匹配 (global) - 查找所有匹配项'
+}, {
+  key: 'ignoreCase',
+  label: 'i',
+  tooltip: '忽略大小写 (ignoreCase) - 不区分大小写'
+}, {
+  key: 'multiline',
+  label: 'm',
+  tooltip: '多行模式 (multiline) - ^ 和 $ 匹配行首行尾'
+}, {
+  key: 'dotAll',
+  label: 's',
+  tooltip: 'dotAll 模式 - . 匹配包括换行符在内的所有字符'
+}, {
+  key: 'unicode',
+  label: 'u',
+  tooltip: 'Unicode 模式 - 启用 Unicode 匹配'
+}, {
+  key: 'sticky',
+  label: 'y',
+  tooltip: '粘性匹配 (sticky) - 从 lastIndex 位置开始匹配'
+}];
+
+/**
+ * 标志选择器组件
+ *
+ * @example
+ * ```tsx
+ * <FlagsSelector
+ *   value={{ global: true, ignoreCase: true }}
+ *   onChange={(flags) => console.log(flags)}
+ * />
+ * ```
+ */
+var FlagsSelector = exports.FlagsSelector = function FlagsSelector(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? {} : _ref$value,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  /**
+   * 处理标志变化
+   */
+  var handleChange = function handleChange(key) {
+    return function (e) {
+      if (onChange) {
+        onChange(_objectSpread(_objectSpread({}, value), {}, _defineProperty({}, key, e.target.checked)));
+      }
+    };
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+    size: "small",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        color: '#666'
+      },
+      children: "\u6807\u5FD7:"
+    }), FLAG_CONFIG.map(function (flag) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: flag.tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Checkbox, {
+          checked: value[flag.key],
+          onChange: handleChange(flag.key),
+          disabled: disabled,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
+            style: {
+              fontSize: '13px',
+              fontWeight: 'bold'
+            },
+            children: flag.label
+          })
+        })
+      }, flag.key);
+    })]
+  });
+};

package/dist/cjs/components/RegexEditor/visualizer/MatchItem.d.ts

@@ -0,0 +1,25 @@
+/**
+ * MatchItem 组件
+ *
+ * @module RegexEditor/visualizer/MatchItem
+ * @description 匹配结果项组件
+ */
+import React from 'react';
+import type { MatchItemProps } from './types';
+/**
+ * 匹配项组件
+ *
+ * @example
+ * ```tsx
+ * <MatchItem
+ *   match={{
+ *     index: 0,
+ *     lastIndex: 3,
+ *     fullMatch: 'abc',
+ *     groups: ['abc', 'ab', 'c'],
+ *   }}
+ *   index={0}
+ * />
+ * ```
+ */
+export declare const MatchItem: React.FC<MatchItemProps>;