@nokecy/qc-ui 1.0.66 → 1.0.67

package/dist/cjs/types/regexp-tree.d.ts

@@ -0,0 +1,175 @@
+/**
+ * regexp-tree 库的类型定义
+ *
+ * @description
+ * 为 regexp-tree 库提供完整的 TypeScript 类型支持,包括 AST 节点类型和主要 API。
+ *
+ * @see https://github.com/DmitrySoshnikov/regexp-tree
+ */
+
+declare module 'regexp-tree/ast' {
+  export interface AstClassMap {
+    'RegExp': AstRegExp;
+    'Disjunction': Disjunction;
+    'Alternative': Alternative;
+    'Assertion': Assertion;
+    'Char': Char;
+    'CharacterClass': CharacterClass;
+    'ClassRange': ClassRange;
+    'Backreference': Backreference;
+    'Group': Group;
+    'Repetition': Repetition;
+    'Quantifier': Quantifier;
+  }
+
+  export type AstClass = keyof AstClassMap;
+  export type AstNode = AstClassMap[AstClass];
+  export type AstNodeLocation = {
+    line: number;
+    column: number;
+    offset: number;
+  };
+
+  export interface Base<T extends AstClass> {
+    type: T;
+    loc?: {
+      source: string;
+      start: AstNodeLocation;
+      end: AstNodeLocation;
+    };
+  }
+
+  export interface SimpleChar extends Base<'Char'> {
+    value: string;
+    kind: 'simple';
+    escaped?: true;
+    codePoint: number;
+  }
+
+  export interface SpecialChar extends Base<'Char'> {
+    value: string;
+    kind: 'meta' | 'control' | 'hex' | 'decimal' | 'oct' | 'unicode';
+    codePoint: number;
+  }
+
+  export type Char =
+    | SimpleChar
+    | SpecialChar;
+
+  export interface ClassRange extends Base<'ClassRange'> {
+    from: Char;
+    to: Char;
+  }
+
+  export interface CharacterClass extends Base<'CharacterClass'> {
+    negative?: true;
+    expressions: (Char | ClassRange)[];
+  }
+
+  export interface Alternative extends Base<'Alternative'> {
+    expressions: Expression[];
+  }
+
+  export interface Disjunction extends Base<'Disjunction'> {
+    left: Expression | null;
+    right: Expression | null;
+  }
+
+  export interface CapturingGroup extends Base<'Group'> {
+    capturing: true;
+    number: number;
+    name?: string;
+    nameRaw?: string;
+    expression: Expression | null;
+  }
+
+  export interface NoncapturingGroup extends Base<'Group'> {
+    capturing: false;
+    expression: Expression | null;
+  }
+
+  export type Group =
+    | CapturingGroup
+    | NoncapturingGroup;
+
+  export interface NumericBackreference extends Base<'Backreference'> {
+    kind: 'number';
+    number: number;
+    reference: number;
+  }
+
+  export interface NamedBackreference extends Base<'Backreference'> {
+    kind: 'name';
+    number: number;
+    reference: string;
+    referenceRaw: string;
+  }
+
+  export type Backreference =
+    | NumericBackreference
+    | NamedBackreference;
+
+  export interface Repetition extends Base<'Repetition'> {
+    expression: Expression;
+    quantifier: Quantifier;
+  }
+
+  export interface SimpleQuantifier extends Base<'Quantifier'> {
+    kind: '+' | '*' | '?';
+    greedy: boolean;
+  }
+
+  export interface RangeQuantifier extends Base<'Quantifier'> {
+    kind: 'Range';
+    from: number;
+    to?: number;
+    greedy: boolean;
+  }
+
+  export type Quantifier =
+    | SimpleQuantifier
+    | RangeQuantifier;
+
+  export interface SimpleAssertion extends Base<'Assertion'> {
+    kind: '^' | '$' | '\\b' | '\\B';
+  }
+
+  export interface LookaroundAssertion extends Base<'Assertion'> {
+    kind: 'Lookahead' | 'Lookbehind';
+    negative?: true;
+    assertion: Expression | null;
+  }
+
+  export type Assertion =
+    | SimpleAssertion
+    | LookaroundAssertion;
+
+  export type Expression =
+    | Char
+    | CharacterClass
+    | Alternative
+    | Disjunction
+    | Group
+    | Backreference
+    | Repetition
+    | Assertion;
+
+  export interface AstRegExp extends Base<'RegExp'> {
+    body: Expression | null;
+    flags: string;
+  }
+}
+
+declare module 'regexp-tree' {
+  import type { AstNode, AstRegExp } from 'regexp-tree/ast';
+
+  export type { AstNode, AstRegExp };
+
+  export interface ParserOptions {
+    captureLocations?: boolean;
+    allowGroupNameDuplicates?: boolean;
+  }
+
+  export function parse(pattern: string, options?: ParserOptions): AstRegExp;
+  export function traverse(ast: AstNode, handlers: Record<string, (path: any) => void>): void;
+}

package/dist/esm/components/RegexEditor/core/RegexEditor.d.ts

@@ -0,0 +1,34 @@
+/**
+ * RegexEditor 组件
+ *
+ * @description
+ * CodeMirror 6 包装器组件,集成正则表达式验证和错误标注功能。
+ * 提供实时语法验证、错误高亮、复杂度分析等功能。
+ *
+ * @module RegexEditor/core/RegexEditor
+ *
+ * @example
+ * ```tsx
+ * <RegexEditor
+ *   value={pattern}
+ *   onChange={setPattern}
+ *   placeholder="请输入正则表达式"
+ *   showComplexity={true}
+ *   onValidate={(result) => {
+ *     if (!result.valid) {
+ *       console.error('验证失败:', result.errors);
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+import React from 'react';
+import type { RegexEditorProps } from './types';
+import './RegexEditor.less';
+/**
+ * RegexEditor 组件
+ *
+ * @param props - 组件属性
+ * @returns React 组件
+ */
+export declare const RegexEditor: React.FC<RegexEditorProps>;

package/dist/esm/components/RegexEditor/core/RegexEditor.js

@@ -0,0 +1,214 @@
+/**
+ * RegexEditor 组件
+ *
+ * @description
+ * CodeMirror 6 包装器组件,集成正则表达式验证和错误标注功能。
+ * 提供实时语法验证、错误高亮、复杂度分析等功能。
+ *
+ * @module RegexEditor/core/RegexEditor
+ *
+ * @example
+ * ```tsx
+ * <RegexEditor
+ *   value={pattern}
+ *   onChange={setPattern}
+ *   placeholder="请输入正则表达式"
+ *   showComplexity={true}
+ *   onValidate={(result) => {
+ *     if (!result.valid) {
+ *       console.error('验证失败:', result.errors);
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+
+import React, { useMemo, useEffect, useRef } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorView } from '@codemirror/view';
+import { useRegexValidation } from "../hooks/useRegexValidation";
+import { createErrorMarkers, updateErrorMarkers } from "./extensions/errorMarker";
+import { RegexRailroadDiagram } from "../visualizer/RegexRailroadDiagram";
+import "./RegexEditor.less";
+
+/**
+ * RegexEditor 组件
+ *
+ * @param props - 组件属性
+ * @returns React 组件
+ */
+export var RegexEditor = function RegexEditor(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请输入正则表达式' : _ref$placeholder,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showComplexity = _ref.showComplexity,
+    showComplexity = _ref$showComplexity === void 0 ? false : _ref$showComplexity,
+    _ref$showRailroadDiag = _ref.showRailroadDiagram,
+    showRailroadDiagram = _ref$showRailroadDiag === void 0 ? false : _ref$showRailroadDiag,
+    onValidate = _ref.onValidate,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '120px' : _ref$height;
+  // 编辑器引用
+  var editorRef = useRef(null);
+
+  // 验证 Hook
+  var _useRegexValidation = useRegexValidation(value),
+    validationResult = _useRegexValidation.validationResult,
+    complexity = _useRegexValidation.complexity,
+    isValidating = _useRegexValidation.isValidating;
+
+  // 通知验证结果
+  useEffect(function () {
+    if (validationResult && onValidate) {
+      onValidate(validationResult);
+    }
+  }, [validationResult, onValidate]);
+
+  // 更新错误标注
+  useEffect(function () {
+    var _editorRef$current;
+    if ((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.view && validationResult) {
+      var errors = validationResult.errors || [];
+      updateErrorMarkers(editorRef.current.view, errors);
+    }
+  }, [validationResult]);
+
+  // 构建扩展
+  var extensions = useMemo(function () {
+    var exts = [
+    // JavaScript 语法高亮(支持正则表达式)
+    javascript(),
+    // 自动换行
+    EditorView.lineWrapping,
+    // 错误标注
+    createErrorMarkers([]),
+    // 自定义主题
+    EditorView.theme({
+      '&': {
+        fontSize: '14px',
+        border: '1px solid #d9d9d9',
+        borderRadius: '2px',
+        backgroundColor: '#fff'
+      },
+      '&.cm-focused': {
+        outline: 'none',
+        borderColor: '#40a9ff',
+        boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)'
+      },
+      '.cm-content': {
+        padding: '8px 0',
+        fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace',
+        caretColor: '#000'
+      },
+      '.cm-line': {
+        padding: '0 12px'
+      },
+      '.cm-scroller': {
+        overflow: 'auto',
+        maxHeight: '400px'
+      },
+      '&.cm-editor.cm-focused': {
+        outline: 'none'
+      },
+      // 占位符样式
+      '.cm-placeholder': {
+        color: '#bfbfbf',
+        fontStyle: 'italic'
+      }
+    })];
+
+    // 只读模式
+    if (readOnly || disabled) {
+      exts.push(EditorView.editable.of(false));
+    }
+    return exts;
+  }, [readOnly, disabled]);
+
+  // 处理值变化
+  var handleChange = function handleChange(newValue) {
+    if (onChange && !readOnly && !disabled) {
+      onChange(newValue);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "regex-editor"
+  }, /*#__PURE__*/React.createElement(CodeMirror, {
+    ref: editorRef,
+    value: value,
+    height: height,
+    placeholder: placeholder,
+    editable: !readOnly && !disabled,
+    extensions: extensions,
+    onChange: handleChange,
+    basicSetup: {
+      lineNumbers: false,
+      foldGutter: false,
+      highlightActiveLine: false,
+      highlightActiveLineGutter: false,
+      syntaxHighlighting: true,
+      bracketMatching: true,
+      autocompletion: false,
+      closeBrackets: true,
+      highlightSelectionMatches: true
+    },
+    className: readOnly || disabled ? 'cm-readonly' : ''
+  }), showComplexity && complexity && /*#__PURE__*/React.createElement("div", {
+    className: "regex-complexity"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "complexity-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "label"
+  }, "\u6027\u80FD\u8BC4\u5206:"), /*#__PURE__*/React.createElement("span", {
+    className: "score score-".concat(getScoreLevel(complexity.performanceScore))
+  }, complexity.performanceScore)), /*#__PURE__*/React.createElement("div", {
+    className: "complexity-item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "label"
+  }, "\u56DE\u6EAF\u98CE\u9669:"), /*#__PURE__*/React.createElement("span", {
+    className: "risk risk-".concat(complexity.backtrackingRisk)
+  }, getRiskLabel(complexity.backtrackingRisk))), complexity.suggestions.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "complexity-suggestions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "suggestions-title"
+  }, "\u4F18\u5316\u5EFA\u8BAE:"), /*#__PURE__*/React.createElement("ul", null, complexity.suggestions.map(function (suggestion, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, suggestion);
+  })))), showRailroadDiagram && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, /*#__PURE__*/React.createElement(RegexRailroadDiagram, {
+    pattern: value,
+    showTitle: true,
+    size: "default"
+  })));
+};
+
+/**
+ * 获取评分等级
+ */
+var getScoreLevel = function getScoreLevel(score) {
+  if (score >= 80) return 'high';
+  if (score >= 60) return 'medium';
+  return 'low';
+};
+
+/**
+ * 获取风险标签
+ */
+var getRiskLabel = function getRiskLabel(risk) {
+  var labels = {
+    low: '低',
+    medium: '中',
+    high: '高'
+  };
+  return labels[risk];
+};

package/dist/esm/components/RegexEditor/core/RegexEditor.less

@@ -0,0 +1,119 @@
+/**
+ * RegexEditor 组件样式
+ */
+
+.regex-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  // 复杂度信息区域
+  .regex-complexity {
+    padding: 12px;
+    background-color: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    font-size: 13px;
+
+    .complexity-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label {
+        font-weight: 500;
+        color: #595959;
+        margin-right: 8px;
+      }
+
+      .score {
+        padding: 2px 8px;
+        border-radius: 2px;
+        font-weight: 600;
+
+        &.score-high {
+          background-color: #f6ffed;
+          color: #52c41a;
+        }
+
+        &.score-medium {
+          background-color: #fffbe6;
+          color: #faad14;
+        }
+
+        &.score-low {
+          background-color: #fff2f0;
+          color: #ff4d4f;
+        }
+      }
+
+      .risk {
+        padding: 2px 8px;
+        border-radius: 2px;
+        font-weight: 600;
+
+        &.risk-low {
+          background-color: #f6ffed;
+          color: #52c41a;
+        }
+
+        &.risk-medium {
+          background-color: #fffbe6;
+          color: #faad14;
+        }
+
+        &.risk-high {
+          background-color: #fff2f0;
+          color: #ff4d4f;
+        }
+      }
+    }
+
+    .complexity-suggestions {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #e8e8e8;
+
+      .suggestions-title {
+        font-weight: 500;
+        color: #595959;
+        margin-bottom: 8px;
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 20px;
+
+        li {
+          color: #8c8c8c;
+          line-height: 1.6;
+          margin-bottom: 4px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // 错误标注样式
+  .cm-regex-error {
+    text-decoration: wavy underline red;
+    text-decoration-skip-ink: none;
+  }
+
+  .cm-regex-warning {
+    text-decoration: wavy underline orange;
+    text-decoration-skip-ink: none;
+  }
+
+  .cm-regex-info {
+    text-decoration: wavy underline blue;
+    text-decoration-skip-ink: none;
+  }
+}

package/dist/esm/components/RegexEditor/core/extensions/errorMarker.d.ts

@@ -0,0 +1,49 @@
+/**
+ * CodeMirror 错误标注扩展
+ *
+ * @description
+ * 为 CodeMirror 编辑器添加错误标注功能,支持波浪下划线高亮显示错误位置。
+ *
+ * @module RegexEditor/core/extensions/errorMarker
+ */
+import { DecorationSet, EditorView } from '@codemirror/view';
+import { StateField } from '@codemirror/state';
+import type { RegexError } from '../../validation/types';
+/**
+ * 设置错误的 StateEffect
+ */
+export declare const setErrorsEffect: import("@codemirror/state").StateEffectType<RegexError[]>;
+/**
+ * 错误装饰状态字段
+ *
+ * @description
+ * 管理错误标注的 DecorationSet
+ */
+export declare const errorDecorationsField: StateField<DecorationSet>;
+/**
+ * 创建错误标注扩展
+ *
+ * @param errors - 错误列表
+ * @returns CodeMirror 扩展数组
+ *
+ * @example
+ * ```typescript
+ * const extensions = [
+ *   javascript(),
+ *   createErrorMarkers(errors)
+ * ];
+ * ```
+ */
+export declare const createErrorMarkers: (errors: RegexError[]) => StateField<DecorationSet>[];
+/**
+ * 更新错误标注的辅助函数
+ *
+ * @param view - EditorView 实例
+ * @param errors - 新的错误列表
+ *
+ * @example
+ * ```typescript
+ * updateErrorMarkers(editorView, validationErrors);
+ * ```
+ */
+export declare const updateErrorMarkers: (view: EditorView, errors: RegexError[]) => void;