@nokecy/qc-ui 1.0.66 → 1.0.68

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;

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

@@ -0,0 +1,154 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * CodeMirror 错误标注扩展
+ *
+ * @description
+ * 为 CodeMirror 编辑器添加错误标注功能,支持波浪下划线高亮显示错误位置。
+ *
+ * @module RegexEditor/core/extensions/errorMarker
+ */
+
+import { Decoration, EditorView } from '@codemirror/view';
+import { StateField, StateEffect } from '@codemirror/state';
+/**
+ * 设置错误的 StateEffect
+ */
+export var setErrorsEffect = StateEffect.define();
+
+/**
+ * 错误标注装饰
+ *
+ * @description
+ * 使用红色波浪下划线标注错误位置
+ */
+var errorMark = Decoration.mark({
+  attributes: {
+    class: 'cm-regex-error',
+    style: 'text-decoration: wavy underline red; text-decoration-skip-ink: none;'
+  }
+});
+
+/**
+ * 警告标注装饰
+ *
+ * @description
+ * 使用橙色波浪下划线标注警告位置
+ */
+var warningMark = Decoration.mark({
+  attributes: {
+    class: 'cm-regex-warning',
+    style: 'text-decoration: wavy underline orange; text-decoration-skip-ink: none;'
+  }
+});
+
+/**
+ * 信息标注装饰
+ *
+ * @description
+ * 使用蓝色波浪下划线标注信息位置
+ */
+var infoMark = Decoration.mark({
+  attributes: {
+    class: 'cm-regex-info',
+    style: 'text-decoration: wavy underline blue; text-decoration-skip-ink: none;'
+  }
+});
+
+/**
+ * 错误装饰状态字段
+ *
+ * @description
+ * 管理错误标注的 DecorationSet
+ */
+export var errorDecorationsField = StateField.define({
+  create: function create() {
+    return Decoration.none;
+  },
+  update: function update(decorations, tr) {
+    // 遍历事务中的所有 effect
+    var _iterator = _createForOfIteratorHelper(tr.effects),
+      _step;
+    try {
+      var _loop = function _loop() {
+          var effect = _step.value;
+          if (effect.is(setErrorsEffect)) {
+            // 更新错误标注
+            var errors = effect.value;
+            var newDecorations = [];
+            errors.forEach(function (error) {
+              var _error$position = error.position,
+                start = _error$position.start,
+                end = _error$position.end;
+
+              // 确保位置有效
+              if (start >= 0 && end <= tr.newDoc.length && start < end) {
+                // 根据严重程度选择装饰
+                var mark = errorMark;
+                if (error.severity === 'warning') {
+                  mark = warningMark;
+                } else if (error.severity === 'info') {
+                  mark = infoMark;
+                }
+                newDecorations.push(mark.range(start, end));
+              }
+            });
+            return {
+              v: Decoration.set(newDecorations, true)
+            };
+          }
+        },
+        _ret;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _ret = _loop();
+        if (_ret) return _ret.v;
+      }
+
+      // 如果文档改变,需要映射装饰位置
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return decorations.map(tr.changes);
+  },
+  provide: function provide(f) {
+    return EditorView.decorations.from(f);
+  }
+});
+
+/**
+ * 创建错误标注扩展
+ *
+ * @param errors - 错误列表
+ * @returns CodeMirror 扩展数组
+ *
+ * @example
+ * ```typescript
+ * const extensions = [
+ *   javascript(),
+ *   createErrorMarkers(errors)
+ * ];
+ * ```
+ */
+export var createErrorMarkers = function createErrorMarkers(errors) {
+  return [errorDecorationsField];
+};
+
+/**
+ * 更新错误标注的辅助函数
+ *
+ * @param view - EditorView 实例
+ * @param errors - 新的错误列表
+ *
+ * @example
+ * ```typescript
+ * updateErrorMarkers(editorView, validationErrors);
+ * ```
+ */
+export var updateErrorMarkers = function updateErrorMarkers(view, errors) {
+  view.dispatch({
+    effects: setErrorsEffect.of(errors)
+  });
+};

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

@@ -0,0 +1,79 @@
+/**
+ * 正则表达式编辑器核心组件 - 类型定义
+ *
+ * @module RegexEditor/core/types
+ * @description 定义编辑器核心组件的 Props 和相关类型
+ */
+import type { RegexError, ValidationResult } from '../validation/types';
+/**
+ * CodeMirror 包装器组件属性
+ *
+ * @interface CodeMirrorWrapperProps
+ * @property {string} value - 编辑器内容
+ * @property {(value: string) => void} onChange - 内容变更回调
+ * @property {string} [placeholder] - 占位符文本
+ * @property {boolean} [readOnly] - 是否只读模式
+ * @property {boolean} [disabled] - 是否禁用编辑
+ * @property {RegexError[]} [errors] - 错误列表（用于标注）
+ * @property {string} [height] - 编辑器高度（CSS 值）
+ *
+ * @example
+ * ```tsx
+ * <CodeMirrorWrapper
+ *   value={pattern}
+ *   onChange={setPattern}
+ *   placeholder="请输入正则表达式"
+ *   errors={validationErrors}
+ *   height="120px"
+ * />
+ * ```
+ */
+export interface CodeMirrorWrapperProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    errors?: RegexError[];
+    height?: string;
+}
+/**
+ * 正则表达式编辑器组件属性
+ *
+ * @interface RegexEditorProps
+ * @property {string} [value] - 正则表达式字符串
+ * @property {(value: string) => void} [onChange] - 值变更回调
+ * @property {string} [placeholder] - 占位符文本
+ * @property {boolean} [readOnly] - 是否只读模式
+ * @property {boolean} [disabled] - 是否禁用编辑
+ * @property {boolean} [showComplexity] - 是否显示复杂度分析
+ * @property {boolean} [showRailroadDiagram] - 是否显示 Railroad Diagram 可视化
+ * @property {(result: ValidationResult) => void} [onValidate] - 验证结果回调
+ * @property {string} [height] - 编辑器高度（CSS 值）
+ *
+ * @example
+ * ```tsx
+ * <RegexEditor
+ *   value={pattern}
+ *   onChange={setPattern}
+ *   showComplexity={true}
+ *   height="200px"
+ *   onValidate={(result) => {
+ *     if (!result.valid) {
+ *       console.error('验证失败:', result.errors);
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export interface RegexEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    showComplexity?: boolean;
+    showRailroadDiagram?: boolean;
+    onValidate?: (result: ValidationResult) => void;
+    height?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/RegexEditor/hooks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * React Hooks for RegexEditor
+ *
+ * @module RegexEditor/hooks
+ */
+export { useRegexValidation } from './useRegexValidation';
+export type { UseRegexValidationResult } from './useRegexValidation';
+export { useTemplateManager } from './useTemplateManager';
+export type { UseTemplateManagerOptions, UseTemplateManagerReturn, } from './useTemplateManager';

package/dist/esm/components/RegexEditor/hooks/index.js

@@ -0,0 +1,8 @@
+/**
+ * React Hooks for RegexEditor
+ *
+ * @module RegexEditor/hooks
+ */
+
+export { useRegexValidation } from "./useRegexValidation";
+export { useTemplateManager } from "./useTemplateManager";