@nokecy/qc-ui 1.0.66 → 1.0.67
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/RegexEditor/core/RegexEditor.d.ts +34 -0
- package/dist/cjs/components/RegexEditor/core/RegexEditor.js +223 -0
- package/dist/cjs/components/RegexEditor/core/RegexEditor.less +119 -0
- package/dist/cjs/components/RegexEditor/core/extensions/errorMarker.d.ts +49 -0
- package/dist/cjs/components/RegexEditor/core/extensions/errorMarker.js +158 -0
- package/dist/cjs/components/RegexEditor/core/types.d.ts +79 -0
- package/dist/cjs/components/RegexEditor/core/types.js +5 -0
- package/dist/cjs/components/RegexEditor/hooks/index.d.ts +9 -0
- package/dist/cjs/components/RegexEditor/hooks/index.js +19 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexTester.d.ts +95 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexTester.js +234 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexValidation.d.ts +71 -0
- package/dist/cjs/components/RegexEditor/hooks/useRegexValidation.js +215 -0
- package/dist/cjs/components/RegexEditor/hooks/useTemplateManager.d.ts +64 -0
- package/dist/cjs/components/RegexEditor/hooks/useTemplateManager.js +438 -0
- package/dist/cjs/components/RegexEditor/index.d.ts +16 -0
- package/dist/cjs/components/RegexEditor/index.js +232 -0
- package/dist/cjs/components/RegexEditor/templates/TemplateSelector.d.ts +36 -0
- package/dist/cjs/components/RegexEditor/templates/TemplateSelector.js +322 -0
- package/dist/cjs/components/RegexEditor/templates/builtinTemplates.d.ts +36 -0
- package/dist/cjs/components/RegexEditor/templates/builtinTemplates.js +340 -0
- package/dist/cjs/components/RegexEditor/templates/index.d.ts +10 -0
- package/dist/cjs/components/RegexEditor/templates/index.js +184 -0
- package/dist/cjs/components/RegexEditor/templates/storage.d.ts +74 -0
- package/dist/cjs/components/RegexEditor/templates/storage.js +337 -0
- package/dist/cjs/components/RegexEditor/templates/templateManager.d.ts +67 -0
- package/dist/cjs/components/RegexEditor/templates/templateManager.js +277 -0
- package/dist/cjs/components/RegexEditor/templates/types.d.ts +111 -0
- package/dist/cjs/components/RegexEditor/templates/types.js +94 -0
- package/dist/cjs/components/RegexEditor/testing/types.d.ts +55 -0
- package/dist/cjs/components/RegexEditor/testing/types.js +5 -0
- package/dist/cjs/components/RegexEditor/validation/complexity.d.ts +22 -0
- package/dist/cjs/components/RegexEditor/validation/complexity.js +196 -0
- package/dist/cjs/components/RegexEditor/validation/parser.d.ts +53 -0
- package/dist/cjs/components/RegexEditor/validation/parser.js +129 -0
- package/dist/cjs/components/RegexEditor/validation/types.d.ts +146 -0
- package/dist/cjs/components/RegexEditor/validation/types.js +5 -0
- package/dist/cjs/components/RegexEditor/validation/validator.d.ts +60 -0
- package/dist/cjs/components/RegexEditor/validation/validator.js +218 -0
- package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.d.ts +20 -0
- package/dist/cjs/components/RegexEditor/visualizer/FlagsSelector.js +98 -0
- package/dist/cjs/components/RegexEditor/visualizer/MatchItem.d.ts +25 -0
- package/dist/cjs/components/RegexEditor/visualizer/MatchItem.js +201 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexRailroadDiagram.d.ts +32 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexRailroadDiagram.js +192 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexTester.d.ts +22 -0
- package/dist/cjs/components/RegexEditor/visualizer/RegexTester.js +255 -0
- package/dist/cjs/components/RegexEditor/visualizer/astToRailroad.d.ts +19 -0
- package/dist/cjs/components/RegexEditor/visualizer/astToRailroad.js +155 -0
- package/dist/cjs/components/RegexEditor/visualizer/index.d.ts +12 -0
- package/dist/cjs/components/RegexEditor/visualizer/index.js +76 -0
- package/dist/cjs/components/RegexEditor/visualizer/types.d.ts +131 -0
- package/dist/cjs/components/RegexEditor/visualizer/types.js +5 -0
- package/dist/cjs/components/RegexEditor/visualizer/utils.d.ts +106 -0
- package/dist/cjs/components/RegexEditor/visualizer/utils.js +268 -0
- package/dist/cjs/index.d.ts +3 -1
- package/dist/cjs/index.js +55 -0
- package/dist/cjs/standardFormDialog/useStandardFormSchema.d.ts +1 -1
- package/dist/cjs/standardFormDialog/withStandardForm.d.ts +2 -2
- package/dist/cjs/types/railroad-diagrams.d.ts +59 -0
- package/dist/cjs/types/regexp-tree.d.ts +175 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.d.ts +34 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.js +214 -0
- package/dist/esm/components/RegexEditor/core/RegexEditor.less +119 -0
- package/dist/esm/components/RegexEditor/core/extensions/errorMarker.d.ts +49 -0
- package/dist/esm/components/RegexEditor/core/extensions/errorMarker.js +154 -0
- package/dist/esm/components/RegexEditor/core/types.d.ts +79 -0
- package/dist/esm/components/RegexEditor/core/types.js +1 -0
- package/dist/esm/components/RegexEditor/hooks/index.d.ts +9 -0
- package/dist/esm/components/RegexEditor/hooks/index.js +8 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexTester.d.ts +95 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexTester.js +230 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexValidation.d.ts +71 -0
- package/dist/esm/components/RegexEditor/hooks/useRegexValidation.js +211 -0
- package/dist/esm/components/RegexEditor/hooks/useTemplateManager.d.ts +64 -0
- package/dist/esm/components/RegexEditor/hooks/useTemplateManager.js +430 -0
- package/dist/esm/components/RegexEditor/index.d.ts +16 -0
- package/dist/esm/components/RegexEditor/index.js +27 -0
- package/dist/esm/components/RegexEditor/templates/TemplateSelector.d.ts +36 -0
- package/dist/esm/components/RegexEditor/templates/TemplateSelector.js +316 -0
- package/dist/esm/components/RegexEditor/templates/builtinTemplates.d.ts +36 -0
- package/dist/esm/components/RegexEditor/templates/builtinTemplates.js +335 -0
- package/dist/esm/components/RegexEditor/templates/index.d.ts +10 -0
- package/dist/esm/components/RegexEditor/templates/index.js +19 -0
- package/dist/esm/components/RegexEditor/templates/storage.d.ts +74 -0
- package/dist/esm/components/RegexEditor/templates/storage.js +335 -0
- package/dist/esm/components/RegexEditor/templates/templateManager.d.ts +67 -0
- package/dist/esm/components/RegexEditor/templates/templateManager.js +274 -0
- package/dist/esm/components/RegexEditor/templates/types.d.ts +111 -0
- package/dist/esm/components/RegexEditor/templates/types.js +90 -0
- package/dist/esm/components/RegexEditor/testing/types.d.ts +55 -0
- package/dist/esm/components/RegexEditor/testing/types.js +1 -0
- package/dist/esm/components/RegexEditor/validation/complexity.d.ts +22 -0
- package/dist/esm/components/RegexEditor/validation/complexity.js +190 -0
- package/dist/esm/components/RegexEditor/validation/parser.d.ts +53 -0
- package/dist/esm/components/RegexEditor/validation/parser.js +123 -0
- package/dist/esm/components/RegexEditor/validation/types.d.ts +145 -0
- package/dist/esm/components/RegexEditor/validation/types.js +1 -0
- package/dist/esm/components/RegexEditor/validation/validator.d.ts +60 -0
- package/dist/esm/components/RegexEditor/validation/validator.js +213 -0
- package/dist/esm/components/RegexEditor/visualizer/FlagsSelector.d.ts +20 -0
- package/dist/esm/components/RegexEditor/visualizer/FlagsSelector.js +93 -0
- package/dist/esm/components/RegexEditor/visualizer/MatchItem.d.ts +25 -0
- package/dist/esm/components/RegexEditor/visualizer/MatchItem.js +194 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexRailroadDiagram.d.ts +32 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexRailroadDiagram.js +186 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexTester.d.ts +22 -0
- package/dist/esm/components/RegexEditor/visualizer/RegexTester.js +248 -0
- package/dist/esm/components/RegexEditor/visualizer/astToRailroad.d.ts +18 -0
- package/dist/esm/components/RegexEditor/visualizer/astToRailroad.js +150 -0
- package/dist/esm/components/RegexEditor/visualizer/index.d.ts +12 -0
- package/dist/esm/components/RegexEditor/visualizer/index.js +17 -0
- package/dist/esm/components/RegexEditor/visualizer/types.d.ts +131 -0
- package/dist/esm/components/RegexEditor/visualizer/types.js +1 -0
- package/dist/esm/components/RegexEditor/visualizer/utils.d.ts +106 -0
- package/dist/esm/components/RegexEditor/visualizer/utils.js +256 -0
- package/dist/esm/index.d.ts +3 -1
- package/dist/esm/index.js +5 -2
- package/dist/esm/types/railroad-diagrams.d.ts +59 -0
- package/dist/esm/types/regexp-tree.d.ts +175 -0
- package/dist/umd/qc-ui.min.css +1 -1
- package/dist/umd/qc-ui.min.js +1 -1
- package/package.json +23 -7
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RegexEditor 组件
|
|
3
|
+
*
|
|
4
|
+
* @description
|
|
5
|
+
* CodeMirror 6 包装器组件,集成正则表达式验证和错误标注功能。
|
|
6
|
+
* 提供实时语法验证、错误高亮、复杂度分析等功能。
|
|
7
|
+
*
|
|
8
|
+
* @module RegexEditor/core/RegexEditor
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <RegexEditor
|
|
13
|
+
* value={pattern}
|
|
14
|
+
* onChange={setPattern}
|
|
15
|
+
* placeholder="请输入正则表达式"
|
|
16
|
+
* showComplexity={true}
|
|
17
|
+
* onValidate={(result) => {
|
|
18
|
+
* if (!result.valid) {
|
|
19
|
+
* console.error('验证失败:', result.errors);
|
|
20
|
+
* }
|
|
21
|
+
* }}
|
|
22
|
+
* />
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
import React from 'react';
|
|
26
|
+
import type { RegexEditorProps } from './types';
|
|
27
|
+
import './RegexEditor.less';
|
|
28
|
+
/**
|
|
29
|
+
* RegexEditor 组件
|
|
30
|
+
*
|
|
31
|
+
* @param props - 组件属性
|
|
32
|
+
* @returns React 组件
|
|
33
|
+
*/
|
|
34
|
+
export declare const RegexEditor: React.FC<RegexEditorProps>;
|
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
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); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.RegexEditor = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactCodemirror = _interopRequireDefault(require("@uiw/react-codemirror"));
|
|
10
|
+
var _langJavascript = require("@codemirror/lang-javascript");
|
|
11
|
+
var _view = require("@codemirror/view");
|
|
12
|
+
var _useRegexValidation2 = require("../hooks/useRegexValidation");
|
|
13
|
+
var _errorMarker = require("./extensions/errorMarker");
|
|
14
|
+
var _RegexRailroadDiagram = require("../visualizer/RegexRailroadDiagram");
|
|
15
|
+
require("./RegexEditor.less");
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
+
/**
|
|
20
|
+
* RegexEditor 组件
|
|
21
|
+
*
|
|
22
|
+
* @description
|
|
23
|
+
* CodeMirror 6 包装器组件,集成正则表达式验证和错误标注功能。
|
|
24
|
+
* 提供实时语法验证、错误高亮、复杂度分析等功能。
|
|
25
|
+
*
|
|
26
|
+
* @module RegexEditor/core/RegexEditor
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* <RegexEditor
|
|
31
|
+
* value={pattern}
|
|
32
|
+
* onChange={setPattern}
|
|
33
|
+
* placeholder="请输入正则表达式"
|
|
34
|
+
* showComplexity={true}
|
|
35
|
+
* onValidate={(result) => {
|
|
36
|
+
* if (!result.valid) {
|
|
37
|
+
* console.error('验证失败:', result.errors);
|
|
38
|
+
* }
|
|
39
|
+
* }}
|
|
40
|
+
* />
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* RegexEditor 组件
|
|
46
|
+
*
|
|
47
|
+
* @param props - 组件属性
|
|
48
|
+
* @returns React 组件
|
|
49
|
+
*/
|
|
50
|
+
var RegexEditor = exports.RegexEditor = function RegexEditor(_ref) {
|
|
51
|
+
var _ref$value = _ref.value,
|
|
52
|
+
value = _ref$value === void 0 ? '' : _ref$value,
|
|
53
|
+
onChange = _ref.onChange,
|
|
54
|
+
_ref$placeholder = _ref.placeholder,
|
|
55
|
+
placeholder = _ref$placeholder === void 0 ? '请输入正则表达式' : _ref$placeholder,
|
|
56
|
+
_ref$readOnly = _ref.readOnly,
|
|
57
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
58
|
+
_ref$disabled = _ref.disabled,
|
|
59
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
60
|
+
_ref$showComplexity = _ref.showComplexity,
|
|
61
|
+
showComplexity = _ref$showComplexity === void 0 ? false : _ref$showComplexity,
|
|
62
|
+
_ref$showRailroadDiag = _ref.showRailroadDiagram,
|
|
63
|
+
showRailroadDiagram = _ref$showRailroadDiag === void 0 ? false : _ref$showRailroadDiag,
|
|
64
|
+
onValidate = _ref.onValidate,
|
|
65
|
+
_ref$height = _ref.height,
|
|
66
|
+
height = _ref$height === void 0 ? '120px' : _ref$height;
|
|
67
|
+
// 编辑器引用
|
|
68
|
+
var editorRef = (0, _react.useRef)(null);
|
|
69
|
+
|
|
70
|
+
// 验证 Hook
|
|
71
|
+
var _useRegexValidation = (0, _useRegexValidation2.useRegexValidation)(value),
|
|
72
|
+
validationResult = _useRegexValidation.validationResult,
|
|
73
|
+
complexity = _useRegexValidation.complexity,
|
|
74
|
+
isValidating = _useRegexValidation.isValidating;
|
|
75
|
+
|
|
76
|
+
// 通知验证结果
|
|
77
|
+
(0, _react.useEffect)(function () {
|
|
78
|
+
if (validationResult && onValidate) {
|
|
79
|
+
onValidate(validationResult);
|
|
80
|
+
}
|
|
81
|
+
}, [validationResult, onValidate]);
|
|
82
|
+
|
|
83
|
+
// 更新错误标注
|
|
84
|
+
(0, _react.useEffect)(function () {
|
|
85
|
+
var _editorRef$current;
|
|
86
|
+
if ((_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && _editorRef$current.view && validationResult) {
|
|
87
|
+
var errors = validationResult.errors || [];
|
|
88
|
+
(0, _errorMarker.updateErrorMarkers)(editorRef.current.view, errors);
|
|
89
|
+
}
|
|
90
|
+
}, [validationResult]);
|
|
91
|
+
|
|
92
|
+
// 构建扩展
|
|
93
|
+
var extensions = (0, _react.useMemo)(function () {
|
|
94
|
+
var exts = [
|
|
95
|
+
// JavaScript 语法高亮(支持正则表达式)
|
|
96
|
+
(0, _langJavascript.javascript)(),
|
|
97
|
+
// 自动换行
|
|
98
|
+
_view.EditorView.lineWrapping,
|
|
99
|
+
// 错误标注
|
|
100
|
+
(0, _errorMarker.createErrorMarkers)([]),
|
|
101
|
+
// 自定义主题
|
|
102
|
+
_view.EditorView.theme({
|
|
103
|
+
'&': {
|
|
104
|
+
fontSize: '14px',
|
|
105
|
+
border: '1px solid #d9d9d9',
|
|
106
|
+
borderRadius: '2px',
|
|
107
|
+
backgroundColor: '#fff'
|
|
108
|
+
},
|
|
109
|
+
'&.cm-focused': {
|
|
110
|
+
outline: 'none',
|
|
111
|
+
borderColor: '#40a9ff',
|
|
112
|
+
boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)'
|
|
113
|
+
},
|
|
114
|
+
'.cm-content': {
|
|
115
|
+
padding: '8px 0',
|
|
116
|
+
fontFamily: '"Monaco", "Menlo", "Ubuntu Mono", "Consolas", monospace',
|
|
117
|
+
caretColor: '#000'
|
|
118
|
+
},
|
|
119
|
+
'.cm-line': {
|
|
120
|
+
padding: '0 12px'
|
|
121
|
+
},
|
|
122
|
+
'.cm-scroller': {
|
|
123
|
+
overflow: 'auto',
|
|
124
|
+
maxHeight: '400px'
|
|
125
|
+
},
|
|
126
|
+
'&.cm-editor.cm-focused': {
|
|
127
|
+
outline: 'none'
|
|
128
|
+
},
|
|
129
|
+
// 占位符样式
|
|
130
|
+
'.cm-placeholder': {
|
|
131
|
+
color: '#bfbfbf',
|
|
132
|
+
fontStyle: 'italic'
|
|
133
|
+
}
|
|
134
|
+
})];
|
|
135
|
+
|
|
136
|
+
// 只读模式
|
|
137
|
+
if (readOnly || disabled) {
|
|
138
|
+
exts.push(_view.EditorView.editable.of(false));
|
|
139
|
+
}
|
|
140
|
+
return exts;
|
|
141
|
+
}, [readOnly, disabled]);
|
|
142
|
+
|
|
143
|
+
// 处理值变化
|
|
144
|
+
var handleChange = function handleChange(newValue) {
|
|
145
|
+
if (onChange && !readOnly && !disabled) {
|
|
146
|
+
onChange(newValue);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
150
|
+
className: "regex-editor"
|
|
151
|
+
}, /*#__PURE__*/_react.default.createElement(_reactCodemirror.default, {
|
|
152
|
+
ref: editorRef,
|
|
153
|
+
value: value,
|
|
154
|
+
height: height,
|
|
155
|
+
placeholder: placeholder,
|
|
156
|
+
editable: !readOnly && !disabled,
|
|
157
|
+
extensions: extensions,
|
|
158
|
+
onChange: handleChange,
|
|
159
|
+
basicSetup: {
|
|
160
|
+
lineNumbers: false,
|
|
161
|
+
foldGutter: false,
|
|
162
|
+
highlightActiveLine: false,
|
|
163
|
+
highlightActiveLineGutter: false,
|
|
164
|
+
syntaxHighlighting: true,
|
|
165
|
+
bracketMatching: true,
|
|
166
|
+
autocompletion: false,
|
|
167
|
+
closeBrackets: true,
|
|
168
|
+
highlightSelectionMatches: true
|
|
169
|
+
},
|
|
170
|
+
className: readOnly || disabled ? 'cm-readonly' : ''
|
|
171
|
+
}), showComplexity && complexity && /*#__PURE__*/_react.default.createElement("div", {
|
|
172
|
+
className: "regex-complexity"
|
|
173
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
174
|
+
className: "complexity-item"
|
|
175
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
176
|
+
className: "label"
|
|
177
|
+
}, "\u6027\u80FD\u8BC4\u5206:"), /*#__PURE__*/_react.default.createElement("span", {
|
|
178
|
+
className: "score score-".concat(getScoreLevel(complexity.performanceScore))
|
|
179
|
+
}, complexity.performanceScore)), /*#__PURE__*/_react.default.createElement("div", {
|
|
180
|
+
className: "complexity-item"
|
|
181
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
182
|
+
className: "label"
|
|
183
|
+
}, "\u56DE\u6EAF\u98CE\u9669:"), /*#__PURE__*/_react.default.createElement("span", {
|
|
184
|
+
className: "risk risk-".concat(complexity.backtrackingRisk)
|
|
185
|
+
}, getRiskLabel(complexity.backtrackingRisk))), complexity.suggestions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
186
|
+
className: "complexity-suggestions"
|
|
187
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
188
|
+
className: "suggestions-title"
|
|
189
|
+
}, "\u4F18\u5316\u5EFA\u8BAE:"), /*#__PURE__*/_react.default.createElement("ul", null, complexity.suggestions.map(function (suggestion, index) {
|
|
190
|
+
return /*#__PURE__*/_react.default.createElement("li", {
|
|
191
|
+
key: index
|
|
192
|
+
}, suggestion);
|
|
193
|
+
})))), showRailroadDiagram && /*#__PURE__*/_react.default.createElement("div", {
|
|
194
|
+
style: {
|
|
195
|
+
marginTop: '16px'
|
|
196
|
+
}
|
|
197
|
+
}, /*#__PURE__*/_react.default.createElement(_RegexRailroadDiagram.RegexRailroadDiagram, {
|
|
198
|
+
pattern: value,
|
|
199
|
+
showTitle: true,
|
|
200
|
+
size: "default"
|
|
201
|
+
})));
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
/**
|
|
205
|
+
* 获取评分等级
|
|
206
|
+
*/
|
|
207
|
+
var getScoreLevel = function getScoreLevel(score) {
|
|
208
|
+
if (score >= 80) return 'high';
|
|
209
|
+
if (score >= 60) return 'medium';
|
|
210
|
+
return 'low';
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
/**
|
|
214
|
+
* 获取风险标签
|
|
215
|
+
*/
|
|
216
|
+
var getRiskLabel = function getRiskLabel(risk) {
|
|
217
|
+
var labels = {
|
|
218
|
+
low: '低',
|
|
219
|
+
medium: '中',
|
|
220
|
+
high: '高'
|
|
221
|
+
};
|
|
222
|
+
return labels[risk];
|
|
223
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* RegexEditor 组件样式
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
.regex-editor {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: 12px;
|
|
9
|
+
|
|
10
|
+
// 复杂度信息区域
|
|
11
|
+
.regex-complexity {
|
|
12
|
+
padding: 12px;
|
|
13
|
+
background-color: #fafafa;
|
|
14
|
+
border: 1px solid #d9d9d9;
|
|
15
|
+
border-radius: 2px;
|
|
16
|
+
font-size: 13px;
|
|
17
|
+
|
|
18
|
+
.complexity-item {
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
margin-bottom: 8px;
|
|
22
|
+
|
|
23
|
+
&:last-child {
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.label {
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
color: #595959;
|
|
30
|
+
margin-right: 8px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.score {
|
|
34
|
+
padding: 2px 8px;
|
|
35
|
+
border-radius: 2px;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
|
|
38
|
+
&.score-high {
|
|
39
|
+
background-color: #f6ffed;
|
|
40
|
+
color: #52c41a;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&.score-medium {
|
|
44
|
+
background-color: #fffbe6;
|
|
45
|
+
color: #faad14;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.score-low {
|
|
49
|
+
background-color: #fff2f0;
|
|
50
|
+
color: #ff4d4f;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.risk {
|
|
55
|
+
padding: 2px 8px;
|
|
56
|
+
border-radius: 2px;
|
|
57
|
+
font-weight: 600;
|
|
58
|
+
|
|
59
|
+
&.risk-low {
|
|
60
|
+
background-color: #f6ffed;
|
|
61
|
+
color: #52c41a;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.risk-medium {
|
|
65
|
+
background-color: #fffbe6;
|
|
66
|
+
color: #faad14;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&.risk-high {
|
|
70
|
+
background-color: #fff2f0;
|
|
71
|
+
color: #ff4d4f;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.complexity-suggestions {
|
|
77
|
+
margin-top: 12px;
|
|
78
|
+
padding-top: 12px;
|
|
79
|
+
border-top: 1px solid #e8e8e8;
|
|
80
|
+
|
|
81
|
+
.suggestions-title {
|
|
82
|
+
font-weight: 500;
|
|
83
|
+
color: #595959;
|
|
84
|
+
margin-bottom: 8px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
ul {
|
|
88
|
+
margin: 0;
|
|
89
|
+
padding-left: 20px;
|
|
90
|
+
|
|
91
|
+
li {
|
|
92
|
+
color: #8c8c8c;
|
|
93
|
+
line-height: 1.6;
|
|
94
|
+
margin-bottom: 4px;
|
|
95
|
+
|
|
96
|
+
&:last-child {
|
|
97
|
+
margin-bottom: 0;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// 错误标注样式
|
|
105
|
+
.cm-regex-error {
|
|
106
|
+
text-decoration: wavy underline red;
|
|
107
|
+
text-decoration-skip-ink: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cm-regex-warning {
|
|
111
|
+
text-decoration: wavy underline orange;
|
|
112
|
+
text-decoration-skip-ink: none;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.cm-regex-info {
|
|
116
|
+
text-decoration: wavy underline blue;
|
|
117
|
+
text-decoration-skip-ink: none;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CodeMirror 错误标注扩展
|
|
3
|
+
*
|
|
4
|
+
* @description
|
|
5
|
+
* 为 CodeMirror 编辑器添加错误标注功能,支持波浪下划线高亮显示错误位置。
|
|
6
|
+
*
|
|
7
|
+
* @module RegexEditor/core/extensions/errorMarker
|
|
8
|
+
*/
|
|
9
|
+
import { DecorationSet, EditorView } from '@codemirror/view';
|
|
10
|
+
import { StateField } from '@codemirror/state';
|
|
11
|
+
import type { RegexError } from '../../validation/types';
|
|
12
|
+
/**
|
|
13
|
+
* 设置错误的 StateEffect
|
|
14
|
+
*/
|
|
15
|
+
export declare const setErrorsEffect: import("@codemirror/state").StateEffectType<RegexError[]>;
|
|
16
|
+
/**
|
|
17
|
+
* 错误装饰状态字段
|
|
18
|
+
*
|
|
19
|
+
* @description
|
|
20
|
+
* 管理错误标注的 DecorationSet
|
|
21
|
+
*/
|
|
22
|
+
export declare const errorDecorationsField: StateField<DecorationSet>;
|
|
23
|
+
/**
|
|
24
|
+
* 创建错误标注扩展
|
|
25
|
+
*
|
|
26
|
+
* @param errors - 错误列表
|
|
27
|
+
* @returns CodeMirror 扩展数组
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```typescript
|
|
31
|
+
* const extensions = [
|
|
32
|
+
* javascript(),
|
|
33
|
+
* createErrorMarkers(errors)
|
|
34
|
+
* ];
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export declare const createErrorMarkers: (errors: RegexError[]) => StateField<DecorationSet>[];
|
|
38
|
+
/**
|
|
39
|
+
* 更新错误标注的辅助函数
|
|
40
|
+
*
|
|
41
|
+
* @param view - EditorView 实例
|
|
42
|
+
* @param errors - 新的错误列表
|
|
43
|
+
*
|
|
44
|
+
* @example
|
|
45
|
+
* ```typescript
|
|
46
|
+
* updateErrorMarkers(editorView, validationErrors);
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
export declare const updateErrorMarkers: (view: EditorView, errors: RegexError[]) => void;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.updateErrorMarkers = exports.setErrorsEffect = exports.errorDecorationsField = exports.createErrorMarkers = void 0;
|
|
7
|
+
var _view = require("@codemirror/view");
|
|
8
|
+
var _state = require("@codemirror/state");
|
|
9
|
+
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; } } }; }
|
|
10
|
+
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); }
|
|
11
|
+
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; } /**
|
|
12
|
+
* CodeMirror 错误标注扩展
|
|
13
|
+
*
|
|
14
|
+
* @description
|
|
15
|
+
* 为 CodeMirror 编辑器添加错误标注功能,支持波浪下划线高亮显示错误位置。
|
|
16
|
+
*
|
|
17
|
+
* @module RegexEditor/core/extensions/errorMarker
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* 设置错误的 StateEffect
|
|
21
|
+
*/
|
|
22
|
+
var setErrorsEffect = exports.setErrorsEffect = _state.StateEffect.define();
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* 错误标注装饰
|
|
26
|
+
*
|
|
27
|
+
* @description
|
|
28
|
+
* 使用红色波浪下划线标注错误位置
|
|
29
|
+
*/
|
|
30
|
+
var errorMark = _view.Decoration.mark({
|
|
31
|
+
attributes: {
|
|
32
|
+
class: 'cm-regex-error',
|
|
33
|
+
style: 'text-decoration: wavy underline red; text-decoration-skip-ink: none;'
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* 警告标注装饰
|
|
39
|
+
*
|
|
40
|
+
* @description
|
|
41
|
+
* 使用橙色波浪下划线标注警告位置
|
|
42
|
+
*/
|
|
43
|
+
var warningMark = _view.Decoration.mark({
|
|
44
|
+
attributes: {
|
|
45
|
+
class: 'cm-regex-warning',
|
|
46
|
+
style: 'text-decoration: wavy underline orange; text-decoration-skip-ink: none;'
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* 信息标注装饰
|
|
52
|
+
*
|
|
53
|
+
* @description
|
|
54
|
+
* 使用蓝色波浪下划线标注信息位置
|
|
55
|
+
*/
|
|
56
|
+
var infoMark = _view.Decoration.mark({
|
|
57
|
+
attributes: {
|
|
58
|
+
class: 'cm-regex-info',
|
|
59
|
+
style: 'text-decoration: wavy underline blue; text-decoration-skip-ink: none;'
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* 错误装饰状态字段
|
|
65
|
+
*
|
|
66
|
+
* @description
|
|
67
|
+
* 管理错误标注的 DecorationSet
|
|
68
|
+
*/
|
|
69
|
+
var errorDecorationsField = exports.errorDecorationsField = _state.StateField.define({
|
|
70
|
+
create: function create() {
|
|
71
|
+
return _view.Decoration.none;
|
|
72
|
+
},
|
|
73
|
+
update: function update(decorations, tr) {
|
|
74
|
+
// 遍历事务中的所有 effect
|
|
75
|
+
var _iterator = _createForOfIteratorHelper(tr.effects),
|
|
76
|
+
_step;
|
|
77
|
+
try {
|
|
78
|
+
var _loop = function _loop() {
|
|
79
|
+
var effect = _step.value;
|
|
80
|
+
if (effect.is(setErrorsEffect)) {
|
|
81
|
+
// 更新错误标注
|
|
82
|
+
var errors = effect.value;
|
|
83
|
+
var newDecorations = [];
|
|
84
|
+
errors.forEach(function (error) {
|
|
85
|
+
var _error$position = error.position,
|
|
86
|
+
start = _error$position.start,
|
|
87
|
+
end = _error$position.end;
|
|
88
|
+
|
|
89
|
+
// 确保位置有效
|
|
90
|
+
if (start >= 0 && end <= tr.newDoc.length && start < end) {
|
|
91
|
+
// 根据严重程度选择装饰
|
|
92
|
+
var mark = errorMark;
|
|
93
|
+
if (error.severity === 'warning') {
|
|
94
|
+
mark = warningMark;
|
|
95
|
+
} else if (error.severity === 'info') {
|
|
96
|
+
mark = infoMark;
|
|
97
|
+
}
|
|
98
|
+
newDecorations.push(mark.range(start, end));
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
return {
|
|
102
|
+
v: _view.Decoration.set(newDecorations, true)
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
_ret;
|
|
107
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
108
|
+
_ret = _loop();
|
|
109
|
+
if (_ret) return _ret.v;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// 如果文档改变,需要映射装饰位置
|
|
113
|
+
} catch (err) {
|
|
114
|
+
_iterator.e(err);
|
|
115
|
+
} finally {
|
|
116
|
+
_iterator.f();
|
|
117
|
+
}
|
|
118
|
+
return decorations.map(tr.changes);
|
|
119
|
+
},
|
|
120
|
+
provide: function provide(f) {
|
|
121
|
+
return _view.EditorView.decorations.from(f);
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* 创建错误标注扩展
|
|
127
|
+
*
|
|
128
|
+
* @param errors - 错误列表
|
|
129
|
+
* @returns CodeMirror 扩展数组
|
|
130
|
+
*
|
|
131
|
+
* @example
|
|
132
|
+
* ```typescript
|
|
133
|
+
* const extensions = [
|
|
134
|
+
* javascript(),
|
|
135
|
+
* createErrorMarkers(errors)
|
|
136
|
+
* ];
|
|
137
|
+
* ```
|
|
138
|
+
*/
|
|
139
|
+
var createErrorMarkers = exports.createErrorMarkers = function createErrorMarkers(errors) {
|
|
140
|
+
return [errorDecorationsField];
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* 更新错误标注的辅助函数
|
|
145
|
+
*
|
|
146
|
+
* @param view - EditorView 实例
|
|
147
|
+
* @param errors - 新的错误列表
|
|
148
|
+
*
|
|
149
|
+
* @example
|
|
150
|
+
* ```typescript
|
|
151
|
+
* updateErrorMarkers(editorView, validationErrors);
|
|
152
|
+
* ```
|
|
153
|
+
*/
|
|
154
|
+
var updateErrorMarkers = exports.updateErrorMarkers = function updateErrorMarkers(view, errors) {
|
|
155
|
+
view.dispatch({
|
|
156
|
+
effects: setErrorsEffect.of(errors)
|
|
157
|
+
});
|
|
158
|
+
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 正则表达式编辑器核心组件 - 类型定义
|
|
3
|
+
*
|
|
4
|
+
* @module RegexEditor/core/types
|
|
5
|
+
* @description 定义编辑器核心组件的 Props 和相关类型
|
|
6
|
+
*/
|
|
7
|
+
import type { RegexError, ValidationResult } from '../validation/types';
|
|
8
|
+
/**
|
|
9
|
+
* CodeMirror 包装器组件属性
|
|
10
|
+
*
|
|
11
|
+
* @interface CodeMirrorWrapperProps
|
|
12
|
+
* @property {string} value - 编辑器内容
|
|
13
|
+
* @property {(value: string) => void} onChange - 内容变更回调
|
|
14
|
+
* @property {string} [placeholder] - 占位符文本
|
|
15
|
+
* @property {boolean} [readOnly] - 是否只读模式
|
|
16
|
+
* @property {boolean} [disabled] - 是否禁用编辑
|
|
17
|
+
* @property {RegexError[]} [errors] - 错误列表(用于标注)
|
|
18
|
+
* @property {string} [height] - 编辑器高度(CSS 值)
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```tsx
|
|
22
|
+
* <CodeMirrorWrapper
|
|
23
|
+
* value={pattern}
|
|
24
|
+
* onChange={setPattern}
|
|
25
|
+
* placeholder="请输入正则表达式"
|
|
26
|
+
* errors={validationErrors}
|
|
27
|
+
* height="120px"
|
|
28
|
+
* />
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export interface CodeMirrorWrapperProps {
|
|
32
|
+
value: string;
|
|
33
|
+
onChange: (value: string) => void;
|
|
34
|
+
placeholder?: string;
|
|
35
|
+
readOnly?: boolean;
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
errors?: RegexError[];
|
|
38
|
+
height?: string;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* 正则表达式编辑器组件属性
|
|
42
|
+
*
|
|
43
|
+
* @interface RegexEditorProps
|
|
44
|
+
* @property {string} [value] - 正则表达式字符串
|
|
45
|
+
* @property {(value: string) => void} [onChange] - 值变更回调
|
|
46
|
+
* @property {string} [placeholder] - 占位符文本
|
|
47
|
+
* @property {boolean} [readOnly] - 是否只读模式
|
|
48
|
+
* @property {boolean} [disabled] - 是否禁用编辑
|
|
49
|
+
* @property {boolean} [showComplexity] - 是否显示复杂度分析
|
|
50
|
+
* @property {boolean} [showRailroadDiagram] - 是否显示 Railroad Diagram 可视化
|
|
51
|
+
* @property {(result: ValidationResult) => void} [onValidate] - 验证结果回调
|
|
52
|
+
* @property {string} [height] - 编辑器高度(CSS 值)
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <RegexEditor
|
|
57
|
+
* value={pattern}
|
|
58
|
+
* onChange={setPattern}
|
|
59
|
+
* showComplexity={true}
|
|
60
|
+
* height="200px"
|
|
61
|
+
* onValidate={(result) => {
|
|
62
|
+
* if (!result.valid) {
|
|
63
|
+
* console.error('验证失败:', result.errors);
|
|
64
|
+
* }
|
|
65
|
+
* }}
|
|
66
|
+
* />
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export interface RegexEditorProps {
|
|
70
|
+
value?: string;
|
|
71
|
+
onChange?: (value: string) => void;
|
|
72
|
+
placeholder?: string;
|
|
73
|
+
readOnly?: boolean;
|
|
74
|
+
disabled?: boolean;
|
|
75
|
+
showComplexity?: boolean;
|
|
76
|
+
showRailroadDiagram?: boolean;
|
|
77
|
+
onValidate?: (result: ValidationResult) => void;
|
|
78
|
+
height?: string;
|
|
79
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* React Hooks for RegexEditor
|
|
3
|
+
*
|
|
4
|
+
* @module RegexEditor/hooks
|
|
5
|
+
*/
|
|
6
|
+
export { useRegexValidation } from './useRegexValidation';
|
|
7
|
+
export type { UseRegexValidationResult } from './useRegexValidation';
|
|
8
|
+
export { useTemplateManager } from './useTemplateManager';
|
|
9
|
+
export type { UseTemplateManagerOptions, UseTemplateManagerReturn, } from './useTemplateManager';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "useRegexValidation", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _useRegexValidation.useRegexValidation;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "useTemplateManager", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _useTemplateManager.useTemplateManager;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _useRegexValidation = require("./useRegexValidation");
|
|
19
|
+
var _useTemplateManager = require("./useTemplateManager");
|