listpage-next 0.0.213 → 0.0.214
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/components/Card/index.d.ts +8 -0
- package/dist/components/Card/index.js +58 -0
- package/dist/components/PageLayout/components/PageModal/index.d.ts +2 -2
- package/dist/components/PageLayout/components/PageModal/index.js +9 -77
- package/dist/components/PageLayout/components/PageModal/useActions.d.ts +5 -0
- package/dist/components/PageLayout/components/PageModal/useActions.js +86 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -0
- package/dist/features/JsonEditor/LineNumberEditor.js +6 -5
- package/dist/features/JsonEditor/style.js +7 -6
- package/dist/features/JsonEditor/utils.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styled_components from "styled-components";
|
|
3
|
+
const Card = (props)=>{
|
|
4
|
+
const { title, extra, bordered, children } = props;
|
|
5
|
+
return /*#__PURE__*/ jsxs(CardContainer, {
|
|
6
|
+
bordered: bordered,
|
|
7
|
+
children: [
|
|
8
|
+
/*#__PURE__*/ jsxs(CardHeader, {
|
|
9
|
+
children: [
|
|
10
|
+
/*#__PURE__*/ jsx(CardTitle, {
|
|
11
|
+
children: title
|
|
12
|
+
}),
|
|
13
|
+
/*#__PURE__*/ jsx(CardExtra, {
|
|
14
|
+
children: extra
|
|
15
|
+
})
|
|
16
|
+
]
|
|
17
|
+
}),
|
|
18
|
+
/*#__PURE__*/ jsx(CardBody, {
|
|
19
|
+
children: children
|
|
20
|
+
})
|
|
21
|
+
]
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
const CardContainer = styled_components.div`
|
|
25
|
+
background-color: rgb(255 255 255 /1);
|
|
26
|
+
border-color: rgb(229 231 235 / 1);
|
|
27
|
+
border-bottom-width: 1px;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
display: flex;
|
|
30
|
+
min-height: 200px;
|
|
31
|
+
${({ bordered })=>bordered && 'border: 1px solid rgb(229 231 235 / 1);'}
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
const CardHeader = styled_components.div`
|
|
35
|
+
padding: 7px 14px;
|
|
36
|
+
background-color: rgb(243 244 246 /1);
|
|
37
|
+
border-bottom: 1px solid rgb(229 231 235 /1);
|
|
38
|
+
border-bottom-width: 1px;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
align-items: center;
|
|
41
|
+
display: flex;
|
|
42
|
+
`;
|
|
43
|
+
const CardTitle = styled_components.div`
|
|
44
|
+
color: rgb(75 85 99 / 1);
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
line-height: 14px;
|
|
48
|
+
align-items: center;
|
|
49
|
+
display: flex;
|
|
50
|
+
`;
|
|
51
|
+
const CardExtra = styled_components.div`
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
`;
|
|
55
|
+
const CardBody = styled_components.div`
|
|
56
|
+
background-color: rgb(255 255 255 /1);
|
|
57
|
+
`;
|
|
58
|
+
export { Card };
|
|
@@ -9,7 +9,7 @@ export interface PageModalProps extends Omit<ModalProps, 'visible' | 'open' | 'o
|
|
|
9
9
|
icon?: ReactNode;
|
|
10
10
|
title: string;
|
|
11
11
|
children?: ReactNode;
|
|
12
|
-
actionPosition?: 'top' | 'bottom';
|
|
13
|
-
|
|
12
|
+
actionPosition?: 'top' | 'bottom' | 'none';
|
|
13
|
+
extraActions?: ReactNode;
|
|
14
14
|
}
|
|
15
15
|
export declare const PageModal: (props: PageModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,75 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Modal } from "antd";
|
|
3
3
|
import styled_components from "styled-components";
|
|
4
|
-
import {
|
|
4
|
+
import { useActions } from "./useActions.js";
|
|
5
5
|
const PageModal = (props)=>{
|
|
6
|
-
const { icon, visible,
|
|
7
|
-
const footer =
|
|
8
|
-
children: [
|
|
9
|
-
/*#__PURE__*/ jsx(FlexContainer, {
|
|
10
|
-
children: footerExtra
|
|
11
|
-
}),
|
|
12
|
-
/*#__PURE__*/ jsxs("div", {
|
|
13
|
-
children: [
|
|
14
|
-
/*#__PURE__*/ jsx(Button, {
|
|
15
|
-
type: "text",
|
|
16
|
-
onClick: onCancel,
|
|
17
|
-
children: cancelText || '取消'
|
|
18
|
-
}),
|
|
19
|
-
/*#__PURE__*/ jsx(AsyncButton, {
|
|
20
|
-
style: {
|
|
21
|
-
marginLeft: '0.65rem'
|
|
22
|
-
},
|
|
23
|
-
type: "primary",
|
|
24
|
-
onClick: onOk,
|
|
25
|
-
children: okText || '确定'
|
|
26
|
-
})
|
|
27
|
-
]
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
const header = /*#__PURE__*/ jsxs(HeaderContainer, {
|
|
32
|
-
children: [
|
|
33
|
-
/*#__PURE__*/ jsxs(FlexContainer, {
|
|
34
|
-
children: [
|
|
35
|
-
icon,
|
|
36
|
-
title
|
|
37
|
-
]
|
|
38
|
-
}),
|
|
39
|
-
/*#__PURE__*/ jsxs("div", {
|
|
40
|
-
children: [
|
|
41
|
-
footerExtra,
|
|
42
|
-
/*#__PURE__*/ jsx(Button, {
|
|
43
|
-
type: "text",
|
|
44
|
-
onClick: onCancel,
|
|
45
|
-
children: cancelText || '取消'
|
|
46
|
-
}),
|
|
47
|
-
/*#__PURE__*/ jsx(AsyncButton, {
|
|
48
|
-
style: {
|
|
49
|
-
marginLeft: '0.65rem'
|
|
50
|
-
},
|
|
51
|
-
type: "primary",
|
|
52
|
-
onClick: onOk,
|
|
53
|
-
children: okText || '确定'
|
|
54
|
-
})
|
|
55
|
-
]
|
|
56
|
-
})
|
|
57
|
-
]
|
|
58
|
-
});
|
|
6
|
+
const { icon, visible, children, extraActions, actionPosition = 'bottom', ...modalProps } = props;
|
|
7
|
+
const { footer, header } = useActions(props);
|
|
59
8
|
return /*#__PURE__*/ jsx(ModalStyled, {
|
|
60
9
|
...modalProps,
|
|
61
10
|
open: visible,
|
|
62
|
-
title:
|
|
63
|
-
children: [
|
|
64
|
-
icon,
|
|
65
|
-
title
|
|
66
|
-
]
|
|
67
|
-
}),
|
|
11
|
+
title: header,
|
|
68
12
|
closeIcon: null,
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
onCancel: onCancel,
|
|
72
|
-
onOk: onOk,
|
|
13
|
+
footer: footer,
|
|
14
|
+
closable: 'top' !== actionPosition,
|
|
73
15
|
children: children
|
|
74
16
|
});
|
|
75
17
|
};
|
|
@@ -100,17 +42,7 @@ const ModalStyled = styled_components(Modal)`
|
|
|
100
42
|
border-bottom: 1px solid rgb(243 244 246 / 1);
|
|
101
43
|
}
|
|
102
44
|
.ant-modal-body {
|
|
103
|
-
padding:
|
|
45
|
+
padding: 0px;
|
|
104
46
|
}
|
|
105
47
|
`;
|
|
106
|
-
const FlexContainer = styled_components.div`
|
|
107
|
-
flex-grow: 1;
|
|
108
|
-
display: flex;
|
|
109
|
-
align-items: center;
|
|
110
|
-
gap: 4px;
|
|
111
|
-
`;
|
|
112
|
-
const HeaderContainer = styled_components.div`
|
|
113
|
-
display: flex;
|
|
114
|
-
align-items: center;
|
|
115
|
-
`;
|
|
116
48
|
export { PageModal };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "antd";
|
|
3
|
+
import { AsyncButton } from "../../../AsyncButton/index.js";
|
|
4
|
+
import { useMemo } from "react";
|
|
5
|
+
import { styled } from "styled-components";
|
|
6
|
+
function useActions(props) {
|
|
7
|
+
const { actionPosition = 'bottom', okText, cancelText, onOk, icon, title, onCancel, extraActions } = props;
|
|
8
|
+
const actions = 'none' === actionPosition ? null : /*#__PURE__*/ jsxs(Fragment, {
|
|
9
|
+
children: [
|
|
10
|
+
/*#__PURE__*/ jsx(Button, {
|
|
11
|
+
type: "text",
|
|
12
|
+
onClick: onCancel,
|
|
13
|
+
children: cancelText || '取消'
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsx(AsyncButton, {
|
|
16
|
+
style: {
|
|
17
|
+
marginLeft: '0.65rem'
|
|
18
|
+
},
|
|
19
|
+
type: "primary",
|
|
20
|
+
onClick: onOk,
|
|
21
|
+
children: okText || '确定'
|
|
22
|
+
})
|
|
23
|
+
]
|
|
24
|
+
});
|
|
25
|
+
const footer = useMemo(()=>{
|
|
26
|
+
if ('bottom' === actionPosition) return /*#__PURE__*/ jsxs(Fragment, {
|
|
27
|
+
children: [
|
|
28
|
+
/*#__PURE__*/ jsx(FlexContainer, {
|
|
29
|
+
children: extraActions
|
|
30
|
+
}),
|
|
31
|
+
/*#__PURE__*/ jsx("div", {
|
|
32
|
+
children: actions
|
|
33
|
+
})
|
|
34
|
+
]
|
|
35
|
+
});
|
|
36
|
+
return null;
|
|
37
|
+
}, [
|
|
38
|
+
actionPosition,
|
|
39
|
+
actions,
|
|
40
|
+
extraActions
|
|
41
|
+
]);
|
|
42
|
+
const header = useMemo(()=>{
|
|
43
|
+
if ('top' === actionPosition) return /*#__PURE__*/ jsxs(HeaderContainer, {
|
|
44
|
+
children: [
|
|
45
|
+
/*#__PURE__*/ jsxs(FlexContainer, {
|
|
46
|
+
children: [
|
|
47
|
+
icon,
|
|
48
|
+
title
|
|
49
|
+
]
|
|
50
|
+
}),
|
|
51
|
+
/*#__PURE__*/ jsxs("div", {
|
|
52
|
+
children: [
|
|
53
|
+
extraActions,
|
|
54
|
+
actions
|
|
55
|
+
]
|
|
56
|
+
})
|
|
57
|
+
]
|
|
58
|
+
});
|
|
59
|
+
return /*#__PURE__*/ jsxs(FlexContainer, {
|
|
60
|
+
children: [
|
|
61
|
+
icon,
|
|
62
|
+
title
|
|
63
|
+
]
|
|
64
|
+
});
|
|
65
|
+
}, [
|
|
66
|
+
icon,
|
|
67
|
+
title,
|
|
68
|
+
actions,
|
|
69
|
+
extraActions
|
|
70
|
+
]);
|
|
71
|
+
return {
|
|
72
|
+
footer,
|
|
73
|
+
header
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
const FlexContainer = styled.div`
|
|
77
|
+
flex-grow: 1;
|
|
78
|
+
display: flex;
|
|
79
|
+
align-items: center;
|
|
80
|
+
gap: 4px;
|
|
81
|
+
`;
|
|
82
|
+
const HeaderContainer = styled.div`
|
|
83
|
+
display: flex;
|
|
84
|
+
align-items: center;
|
|
85
|
+
`;
|
|
86
|
+
export { useActions };
|
package/dist/components/index.js
CHANGED
|
@@ -5,7 +5,8 @@ import { calculateLineCount, highlightJson } from "./utils.js";
|
|
|
5
5
|
const EditorContainer = styled_components.div`
|
|
6
6
|
display: flex;
|
|
7
7
|
height: 100%;
|
|
8
|
-
font-family:
|
|
8
|
+
font-family:
|
|
9
|
+
'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
9
10
|
font-size: 12px;
|
|
10
11
|
line-height: 1.5;
|
|
11
12
|
overflow: hidden;
|
|
@@ -55,11 +56,11 @@ const StyledTextArea = styled_components.textarea`
|
|
|
55
56
|
${(props)=>props.hasError && `
|
|
56
57
|
box-shadow: inset 0 0 0 1px #ff4d4f;
|
|
57
58
|
`}
|
|
58
|
-
|
|
59
|
+
|
|
59
60
|
&:focus {
|
|
60
61
|
box-shadow: none;
|
|
61
62
|
}
|
|
62
|
-
|
|
63
|
+
|
|
63
64
|
&::-webkit-scrollbar {
|
|
64
65
|
width: 8px;
|
|
65
66
|
height: 8px;
|
|
@@ -73,7 +74,7 @@ const StyledTextArea = styled_components.textarea`
|
|
|
73
74
|
&::-webkit-scrollbar-thumb {
|
|
74
75
|
background: #c1c1c1;
|
|
75
76
|
border-radius: 4px;
|
|
76
|
-
|
|
77
|
+
|
|
77
78
|
&:hover {
|
|
78
79
|
background: #a8a8a8;
|
|
79
80
|
}
|
|
@@ -113,7 +114,7 @@ const HighlightPreview = styled_components.div`
|
|
|
113
114
|
.json-boolean {
|
|
114
115
|
color: #f98280; /* 红色 */
|
|
115
116
|
}
|
|
116
|
-
|
|
117
|
+
|
|
117
118
|
.json-null {
|
|
118
119
|
color: #f18f01; /* 橙色 */
|
|
119
120
|
}
|
|
@@ -33,7 +33,7 @@ const EditorWrapper = styled.div`
|
|
|
33
33
|
overflow: hidden;
|
|
34
34
|
border-radius: 0 0 8px 8px;
|
|
35
35
|
background-color: #fafafa;
|
|
36
|
-
|
|
36
|
+
|
|
37
37
|
// 自定义滚动条样式
|
|
38
38
|
::-webkit-scrollbar {
|
|
39
39
|
width: 8px;
|
|
@@ -48,7 +48,7 @@ const EditorWrapper = styled.div`
|
|
|
48
48
|
::-webkit-scrollbar-thumb {
|
|
49
49
|
background: #c1c1c1;
|
|
50
50
|
border-radius: 4px;
|
|
51
|
-
|
|
51
|
+
|
|
52
52
|
&:hover {
|
|
53
53
|
background: #a8a8a8;
|
|
54
54
|
}
|
|
@@ -69,7 +69,8 @@ const ErrorMessage = styled.div`
|
|
|
69
69
|
const EditorContainer = styled.div`
|
|
70
70
|
display: flex;
|
|
71
71
|
height: 100%;
|
|
72
|
-
font-family:
|
|
72
|
+
font-family:
|
|
73
|
+
'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
|
73
74
|
font-size: 12px;
|
|
74
75
|
line-height: 1.5;
|
|
75
76
|
overflow: hidden;
|
|
@@ -117,11 +118,11 @@ const StyledTextArea = styled.textarea`
|
|
|
117
118
|
${(props)=>props.hasError && `
|
|
118
119
|
box-shadow: inset 0 0 0 1px #ff4d4f;
|
|
119
120
|
`}
|
|
120
|
-
|
|
121
|
+
|
|
121
122
|
&:focus {
|
|
122
123
|
box-shadow: none;
|
|
123
124
|
}
|
|
124
|
-
|
|
125
|
+
|
|
125
126
|
&::-webkit-scrollbar {
|
|
126
127
|
width: 8px;
|
|
127
128
|
height: 8px;
|
|
@@ -135,7 +136,7 @@ const StyledTextArea = styled.textarea`
|
|
|
135
136
|
&::-webkit-scrollbar-thumb {
|
|
136
137
|
background: #c1c1c1;
|
|
137
138
|
border-radius: 4px;
|
|
138
|
-
|
|
139
|
+
|
|
139
140
|
&:hover {
|
|
140
141
|
background: #a8a8a8;
|
|
141
142
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const highlightJson = (jsonString)=>{
|
|
2
|
-
const escapeHtml = (unsafe)=>unsafe.replace(/&/g,
|
|
2
|
+
const escapeHtml = (unsafe)=>unsafe.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
3
3
|
if (!jsonString.trim().startsWith('{') && !jsonString.trim().startsWith('[')) return escapeHtml(jsonString);
|
|
4
4
|
try {
|
|
5
5
|
return escapeHtml(jsonString).replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:))/g, '<span class="json-key">$1</span>').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(?!\s*:))/g, '<span class="json-string">$1</span>').replace(/(?<=:)\s*(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, ' <span class="json-number">$1</span>').replace(/(?<=:)\s*(true|false)/g, ' <span class="json-boolean">$1</span>').replace(/(?<=:)\s*(null)/g, ' <span class="json-null">$1</span>').replace(/([{}[\],:])/g, '<span class="json-punctuation">$1</span>');
|