@easyv/biz-components 0.0.4 → 0.0.6
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/AiMessageRender/AiMessageRender.d.ts +1 -0
- package/dist/components/AiMessageRender/AiMessageRender.es.js +28 -29
- package/dist/components/AiMessageRender/AiMessageRender.es.js.map +1 -1
- package/dist/components/AiMessageRender/index.less.es.js +27 -26
- package/dist/components/AiMessageRender/index.less.es.js.map +1 -1
- package/dist/components/AiMessageRender/types.d.ts +1 -0
- package/dist/components/ShadowDom/ShadowDom.d.ts +1 -0
- package/dist/components/ShadowDom/ShadowDom.es.js +18 -16
- package/dist/components/ShadowDom/ShadowDom.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,37 +1,46 @@
|
|
|
1
1
|
import { j as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
|
-
import { CopyCircleOutlined as
|
|
2
|
+
import { CopyCircleOutlined as F } from "../../node_modules/.pnpm/@easyv_react-icons@6.3.0/node_modules/@easyv/react-icons/dist/index.esm.es.js";
|
|
3
3
|
import C from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
|
|
4
|
-
import
|
|
5
|
-
import { ShadowDom as
|
|
6
|
-
import { Markdown as
|
|
7
|
-
import
|
|
4
|
+
import g from "./index.less.es.js";
|
|
5
|
+
import { ShadowDom as y } from "../ShadowDom/ShadowDom.es.js";
|
|
6
|
+
import { Markdown as k } from "../../node_modules/.pnpm/react-markdown@10.1.0_@types_react@18.2.0_react@18.2.0/node_modules/react-markdown/lib/index.es.js";
|
|
7
|
+
import b from "../../node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
|
|
8
8
|
const B = (c) => {
|
|
9
9
|
const {
|
|
10
10
|
className: m = "",
|
|
11
11
|
onCopy: s,
|
|
12
12
|
renderDashboardContent: n,
|
|
13
13
|
showFooterButtons: f = !1,
|
|
14
|
-
contents:
|
|
15
|
-
markdownClassName:
|
|
16
|
-
|
|
14
|
+
contents: h,
|
|
15
|
+
markdownClassName: p = "",
|
|
16
|
+
rootFontSize: x,
|
|
17
|
+
hideDefaultStyle: u,
|
|
17
18
|
markdownStyle: o
|
|
18
19
|
} = c;
|
|
19
|
-
let
|
|
20
|
-
o && (
|
|
20
|
+
let i = u ? "" : g;
|
|
21
|
+
o && (i += `
|
|
21
22
|
${o}`);
|
|
22
|
-
const
|
|
23
|
-
|
|
23
|
+
const j = (r) => /* @__PURE__ */ e.jsx(
|
|
24
|
+
y,
|
|
25
|
+
{
|
|
26
|
+
style: i,
|
|
27
|
+
shadowRootDivClassName: p + " markdown-container",
|
|
28
|
+
rootFontSize: x,
|
|
29
|
+
children: /* @__PURE__ */ e.jsx(k, { remarkPlugins: [b], children: r })
|
|
30
|
+
}
|
|
31
|
+
), w = (r) => {
|
|
32
|
+
const { data: t, filterCode: a, plotModuleName: N, plotVersion: v } = r;
|
|
24
33
|
if (n)
|
|
25
34
|
return n(r);
|
|
26
35
|
let l = t;
|
|
27
|
-
return
|
|
36
|
+
return a && (l = new Function("data", a)(t)), /* @__PURE__ */ e.jsxs("div", { children: [
|
|
28
37
|
/* @__PURE__ */ e.jsxs("div", { children: [
|
|
29
38
|
"组件名称：",
|
|
30
|
-
|
|
39
|
+
N
|
|
31
40
|
] }),
|
|
32
41
|
/* @__PURE__ */ e.jsxs("div", { children: [
|
|
33
42
|
"组件版本：",
|
|
34
|
-
|
|
43
|
+
v
|
|
35
44
|
] }),
|
|
36
45
|
/* @__PURE__ */ e.jsxs("div", { children: [
|
|
37
46
|
"组件数据：",
|
|
@@ -39,20 +48,10 @@ ${o}`);
|
|
|
39
48
|
] })
|
|
40
49
|
] });
|
|
41
50
|
};
|
|
42
|
-
return /* @__PURE__ */ e.jsxs(
|
|
43
|
-
"div",
|
|
44
|
-
{
|
|
45
|
-
|
|
46
|
-
"px-4 py-3 flex flex-col gap-3 rounded-lg max-w-[516px]",
|
|
47
|
-
"bg-[#FFFFFF14] select-auto",
|
|
48
|
-
m
|
|
49
|
-
),
|
|
50
|
-
children: [
|
|
51
|
-
p.map((r, t) => typeof r == "string" ? /* @__PURE__ */ e.jsx("div", { className: "contents", children: u(r) }, t) : /* @__PURE__ */ e.jsx("div", { className: "contents", children: j(r) }, t)),
|
|
52
|
-
f && /* @__PURE__ */ e.jsx("div", { className: "flex gap-1", children: /* @__PURE__ */ e.jsx("div", { className: "copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer", children: /* @__PURE__ */ e.jsx(v, { className: "w-3.5 h-3.5 text-text-2", onClick: () => s == null ? void 0 : s() }) }) })
|
|
53
|
-
]
|
|
54
|
-
}
|
|
55
|
-
);
|
|
51
|
+
return /* @__PURE__ */ e.jsxs("div", { className: C("px-4 py-3 flex flex-col gap-3 rounded-lg", "bg-[#FFFFFF14] select-text", m), children: [
|
|
52
|
+
h.map((r, t) => typeof r == "string" ? /* @__PURE__ */ e.jsx("div", { className: "contents", children: j(r) }, t) : /* @__PURE__ */ e.jsx("div", { className: "contents", children: w(r) }, t)),
|
|
53
|
+
f && /* @__PURE__ */ e.jsx("div", { className: "flex gap-1", children: /* @__PURE__ */ e.jsx("div", { className: "copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer", children: /* @__PURE__ */ e.jsx(F, { className: "w-3.5 h-3.5 text-text-2", onClick: () => s == null ? void 0 : s() }) }) })
|
|
54
|
+
] });
|
|
56
55
|
};
|
|
57
56
|
export {
|
|
58
57
|
B as AiMessageRender
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AiMessageRender.es.js","sources":["../../../src/components/AiMessageRender/AiMessageRender.tsx"],"sourcesContent":["import { CopyCircleOutlined } from '@easyv/react-icons';\nimport classNames from 'classnames';\nimport Markdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { ShadowDom } from '../ShadowDom';\n// @ts-expect-error\nimport messageRenderCss from './index.less?raw';\nimport { DashboardContext } from './types';\n\nexport interface AiMessageRenderProps {\n className?: string;\n contents: (string | DashboardContext)[];\n renderDashboardContent?: (msg: DashboardContext) => React.ReactNode;\n showFooterButtons?: boolean;\n onCopy?: () => void;\n onRedo?: () => void;\n markdownClassName?: string;\n /**隐藏默认样式 */\n hideDefaultStyle?: boolean;\n markdownStyle?: string;\n}\n\nexport const AiMessageRender = (props: AiMessageRenderProps) => {\n const {\n className = '',\n onCopy,\n renderDashboardContent: propsRenderDashboardContent,\n showFooterButtons = false,\n contents,\n markdownClassName = '',\n hideDefaultStyle,\n markdownStyle,\n } = props;\n\n let finalMarkdownStyle = hideDefaultStyle ? '' : messageRenderCss;\n if (markdownStyle) {\n finalMarkdownStyle += `\\n${markdownStyle}`;\n }\n const renderStringContent = (msg: string) => {\n return (\n <ShadowDom
|
|
1
|
+
{"version":3,"file":"AiMessageRender.es.js","sources":["../../../src/components/AiMessageRender/AiMessageRender.tsx"],"sourcesContent":["import { CopyCircleOutlined } from '@easyv/react-icons';\nimport classNames from 'classnames';\nimport Markdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\nimport { ShadowDom } from '../ShadowDom';\n// @ts-expect-error\nimport messageRenderCss from './index.less?raw';\nimport { DashboardContext } from './types';\n\nexport interface AiMessageRenderProps {\n className?: string;\n contents: (string | DashboardContext)[];\n renderDashboardContent?: (msg: DashboardContext) => React.ReactNode;\n showFooterButtons?: boolean;\n onCopy?: () => void;\n onRedo?: () => void;\n markdownClassName?: string;\n rootFontSize?: number;\n /**隐藏默认样式 */\n hideDefaultStyle?: boolean;\n markdownStyle?: string;\n}\n\nexport const AiMessageRender = (props: AiMessageRenderProps) => {\n const {\n className = '',\n onCopy,\n renderDashboardContent: propsRenderDashboardContent,\n showFooterButtons = false,\n contents,\n markdownClassName = '',\n rootFontSize,\n hideDefaultStyle,\n markdownStyle,\n } = props;\n\n let finalMarkdownStyle = hideDefaultStyle ? '' : messageRenderCss;\n if (markdownStyle) {\n finalMarkdownStyle += `\\n${markdownStyle}`;\n }\n const renderStringContent = (msg: string) => {\n return (\n <ShadowDom\n style={finalMarkdownStyle}\n shadowRootDivClassName={markdownClassName + ' markdown-container'}\n rootFontSize={rootFontSize}\n >\n <Markdown remarkPlugins={[remarkGfm]}>{msg}</Markdown>\n </ShadowDom>\n );\n };\n const renderDashboardContent = (msg: DashboardContext) => {\n const { data, filterCode, plotModuleName, plotVersion } = msg;\n if (propsRenderDashboardContent) {\n return propsRenderDashboardContent(msg);\n }\n let finalData = data;\n if (filterCode) {\n const filterFunc = new Function('data', filterCode);\n finalData = filterFunc(data) as unknown[];\n }\n return (\n <div>\n <div>组件名称：{plotModuleName}</div>\n <div>组件版本：{plotVersion}</div>\n <div>组件数据：{finalData.slice(0, 5).map((i: unknown) => JSON.stringify(i))}</div>\n </div>\n );\n };\n\n return (\n <div className={classNames('px-4 py-3 flex flex-col gap-3 rounded-lg', 'bg-[#FFFFFF14] select-text', className)}>\n {contents.map((msg, index) => {\n if (typeof msg === 'string') {\n return (\n <div key={index} className='contents'>\n {renderStringContent(msg)}\n </div>\n );\n } else {\n return (\n <div key={index} className='contents'>\n {renderDashboardContent(msg)}\n </div>\n );\n }\n })}\n {showFooterButtons && (\n <div className='flex gap-1'>\n <div className='copy-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n <CopyCircleOutlined className='w-3.5 h-3.5 text-text-2' onClick={() => onCopy?.()} />\n </div>\n {/* <div className='redo-btn w-6 h-6 rounded-md flex justify-center items-center hover:bg-bg-white cursor-pointer'>\n <RedoOutlined className='w-3.5 h-3.5 text-text-2' />\n </div> */}\n </div>\n )}\n </div>\n );\n};\n"],"names":["AiMessageRender","props","className","onCopy","propsRenderDashboardContent","showFooterButtons","contents","markdownClassName","rootFontSize","hideDefaultStyle","markdownStyle","finalMarkdownStyle","messageRenderCss","renderStringContent","msg","jsx","ShadowDom","Markdown","remarkGfm","renderDashboardContent","data","filterCode","plotModuleName","plotVersion","finalData","jsxs","i","classNames","index","CopyCircleOutlined"],"mappings":";;;;;;;AAuBa,MAAAA,IAAkB,CAACC,MAAgC;AACxD,QAAA;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,wBAAwBC;AAAA,IACxB,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,cAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,EAAA,IACET;AAEA,MAAAU,IAAqBF,IAAmB,KAAKG;AACjD,EAAIF,MACoBC,KAAA;AAAA,EAAKD,CAAa;AAEpC,QAAAG,IAAsB,CAACC,MAEzBC,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOL;AAAA,MACP,wBAAwBJ,IAAoB;AAAA,MAC5C,cAAAC;AAAA,MAEA,gCAACS,GAAS,EAAA,eAAe,CAACC,CAAS,GAAI,UAAIJ,EAAA,CAAA;AAAA,IAAA;AAAA,EAC7C,GAGEK,IAAyB,CAACL,MAA0B;AACxD,UAAM,EAAE,MAAAM,GAAM,YAAAC,GAAY,gBAAAC,GAAgB,aAAAC,EAAgB,IAAAT;AAC1D,QAAIV;AACF,aAAOA,EAA4BU,CAAG;AAExC,QAAIU,IAAYJ;AAChB,WAAIC,MAEFG,IADmB,IAAI,SAAS,QAAQH,CAAU,EAC3BD,CAAI,2BAG1B,OACC,EAAA,UAAA;AAAA,MAAAK,gBAAAA,OAAC,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMH;AAAA,MAAA,GAAe;AAAA,6BACzB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMC;AAAA,MAAA,GAAY;AAAA,6BACtB,OAAI,EAAA,UAAA;AAAA,QAAA;AAAA,QAAMC,EAAU,MAAM,GAAG,CAAC,EAAE,IAAI,CAACE,MAAe,KAAK,UAAUA,CAAC,CAAC;AAAA,MAAA,EAAE,CAAA;AAAA,IAAA,GAC1E;AAAA,EAEJ;AAEA,gCACG,OAAI,EAAA,WAAWC,EAAW,4CAA4C,8BAA8BzB,CAAS,GAC3G,UAAA;AAAA,IAASI,EAAA,IAAI,CAACQ,GAAKc,MACd,OAAOd,KAAQ,iCAEd,OAAgB,EAAA,WAAU,YACxB,UAAoBD,EAAAC,CAAG,KADhBc,CAEV,0BAIC,OAAgB,EAAA,WAAU,YACxB,UAAuBT,EAAAL,CAAG,KADnBc,CAEV,CAGL;AAAA,IACAvB,KACEU,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,cACb,UAAAA,gBAAAA,EAAA,IAAC,SAAI,WAAU,iGACb,UAACA,gBAAAA,EAAA,IAAAc,GAAA,EAAmB,WAAU,2BAA0B,SAAS,MAAM1B,KAAA,gBAAAA,KAAY,GACrF,EAIF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
const n = `.markdown-container {
|
|
2
|
+
--base-font: 16px;
|
|
2
3
|
/* // 基础文本样式 */
|
|
3
4
|
color: #fff;
|
|
4
5
|
font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
@@ -18,7 +19,7 @@ const n = `.markdown-container {
|
|
|
18
19
|
|
|
19
20
|
img {
|
|
20
21
|
max-width: 50%;
|
|
21
|
-
border-radius: 0.
|
|
22
|
+
border-radius: calc(0.5 * var(--base-font));
|
|
22
23
|
}
|
|
23
24
|
|
|
24
25
|
/* // 标题样式 */
|
|
@@ -28,7 +29,7 @@ h3,
|
|
|
28
29
|
h4,
|
|
29
30
|
h5,
|
|
30
31
|
h6 {
|
|
31
|
-
margin: 1.
|
|
32
|
+
margin: calc(1.5 * var(--base-font)) var(--base-font);
|
|
32
33
|
font-weight: 600;
|
|
33
34
|
line-height: 1.25;
|
|
34
35
|
color: #fff;
|
|
@@ -39,34 +40,34 @@ h6 {
|
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
h1 {
|
|
42
|
-
font-size:
|
|
43
|
+
font-size: calc(2 * var(--base-font));
|
|
43
44
|
border-bottom: 1px solid #eaecef;
|
|
44
|
-
padding-bottom: 0.
|
|
45
|
+
padding-bottom: calc(0.3 * var(--base-font));
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
h2 {
|
|
48
|
-
font-size: 1.
|
|
49
|
+
font-size: calc(1.5 * var(--base-font));
|
|
49
50
|
border-bottom: 1px solid #eaecef;
|
|
50
|
-
padding-bottom: 0.
|
|
51
|
+
padding-bottom: calc(0.3 * var(--base-font));
|
|
51
52
|
}
|
|
52
53
|
|
|
53
54
|
h3 {
|
|
54
|
-
font-size: 1.
|
|
55
|
+
font-size: calc(1.25 * var(--base-font));
|
|
55
56
|
}
|
|
56
57
|
h4 {
|
|
57
|
-
font-size:
|
|
58
|
+
font-size: var(--base-font);
|
|
58
59
|
}
|
|
59
60
|
h5 {
|
|
60
|
-
font-size: 0.
|
|
61
|
+
font-size: calc(0.875 * var(--base-font));
|
|
61
62
|
}
|
|
62
63
|
h6 {
|
|
63
|
-
font-size: 0.
|
|
64
|
+
font-size: calc(0.85 * var(--base-font));
|
|
64
65
|
color: #6a737d;
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
/* // 段落和文本 */
|
|
68
69
|
p {
|
|
69
|
-
margin: 0 0
|
|
70
|
+
margin: 0 0 var(--base-font);
|
|
70
71
|
}
|
|
71
72
|
|
|
72
73
|
strong {
|
|
@@ -90,12 +91,12 @@ a {
|
|
|
90
91
|
/* // 列表 */
|
|
91
92
|
ul,
|
|
92
93
|
ol {
|
|
93
|
-
margin-bottom:
|
|
94
|
-
padding-left:
|
|
94
|
+
margin-bottom: var(--base-font);
|
|
95
|
+
padding-left: calc(2 * var(--base-font));
|
|
95
96
|
}
|
|
96
97
|
|
|
97
98
|
li {
|
|
98
|
-
margin-bottom: 0.
|
|
99
|
+
margin-bottom: calc(0.25 * var(--base-font));
|
|
99
100
|
|
|
100
101
|
> p {
|
|
101
102
|
margin: 0;
|
|
@@ -105,10 +106,10 @@ li {
|
|
|
105
106
|
/* // 代码块和内联代码 */
|
|
106
107
|
pre {
|
|
107
108
|
background-color: #fafafa;
|
|
108
|
-
border-radius: 0.
|
|
109
|
-
padding:
|
|
109
|
+
border-radius: calc(0.3 * var(--base-font));
|
|
110
|
+
padding: var(--base-font);
|
|
110
111
|
overflow: auto;
|
|
111
|
-
margin-bottom:
|
|
112
|
+
margin-bottom: var(--base-font);
|
|
112
113
|
line-height: 1.45;
|
|
113
114
|
overflow-x: auto;
|
|
114
115
|
|
|
@@ -125,8 +126,8 @@ code {
|
|
|
125
126
|
font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
|
126
127
|
background-color: #ececec;
|
|
127
128
|
color: #404040;
|
|
128
|
-
border-radius: 0.
|
|
129
|
-
padding: 0.
|
|
129
|
+
border-radius: calc(0.25 * var(--base-font));
|
|
130
|
+
padding: 0calc (2 * var(--base-font)) calc(0.4 * var(--base-font));
|
|
130
131
|
font-size: 85%;
|
|
131
132
|
}
|
|
132
133
|
|
|
@@ -134,14 +135,14 @@ code {
|
|
|
134
135
|
table {
|
|
135
136
|
border-collapse: collapse;
|
|
136
137
|
width: 100%;
|
|
137
|
-
margin-bottom:
|
|
138
|
+
margin-bottom: var(--base-font);
|
|
138
139
|
display: block;
|
|
139
140
|
overflow-x: auto;
|
|
140
141
|
color: #4a4e55;
|
|
141
142
|
}
|
|
142
143
|
table th,
|
|
143
144
|
table td {
|
|
144
|
-
padding: 0.
|
|
145
|
+
padding: calc(0.75 * var(--base-font)) var(--base-font);
|
|
145
146
|
border: 1px solid #dfe2e5;
|
|
146
147
|
}
|
|
147
148
|
|
|
@@ -162,10 +163,10 @@ table tr {
|
|
|
162
163
|
|
|
163
164
|
/* // 引用块 */
|
|
164
165
|
blockquote {
|
|
165
|
-
border-left: 0.
|
|
166
|
+
border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;
|
|
166
167
|
color: #fff;
|
|
167
|
-
padding: 0
|
|
168
|
-
margin: 0 0
|
|
168
|
+
padding: 0 var(--base-font);
|
|
169
|
+
margin: 0 0 var(--base-font) 0;
|
|
169
170
|
|
|
170
171
|
p {
|
|
171
172
|
margin: 0;
|
|
@@ -177,7 +178,7 @@ hr {
|
|
|
177
178
|
height: 1px;
|
|
178
179
|
background-color: #e1e4e8;
|
|
179
180
|
border: 0;
|
|
180
|
-
margin: 1.
|
|
181
|
+
margin: calc(1.5 * var(--base-font)) 0;
|
|
181
182
|
}
|
|
182
183
|
|
|
183
184
|
/* // 任务列表 */
|
|
@@ -185,7 +186,7 @@ hr {
|
|
|
185
186
|
list-style-type: none;
|
|
186
187
|
|
|
187
188
|
input[type='checkbox'] {
|
|
188
|
-
margin: 0
|
|
189
|
+
margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;
|
|
189
190
|
vertical-align: middle;
|
|
190
191
|
}
|
|
191
192
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.less.es.js","sources":["../../../src/components/AiMessageRender/index.less?raw"],"sourcesContent":["export default \".markdown-container {\\n /* // 基础文本样式 */\\n color: #fff;\\n font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\\n line-height: 1.6;\\n font-size: 16px;\\n font-style: normal;\\n font-weight: 400;\\n user-select: text;\\n}\\n\\n/* // 重置一些元素的默认样式 */\\n* {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nimg {\\n max-width: 50%;\\n border-radius: 0.
|
|
1
|
+
{"version":3,"file":"index.less.es.js","sources":["../../../src/components/AiMessageRender/index.less?raw"],"sourcesContent":["export default \".markdown-container {\\n --base-font: 16px;\\n /* // 基础文本样式 */\\n color: #fff;\\n font-family: 'PingFang SC', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\\n line-height: 1.6;\\n font-size: 16px;\\n font-style: normal;\\n font-weight: 400;\\n user-select: text;\\n}\\n\\n/* // 重置一些元素的默认样式 */\\n* {\\n box-sizing: border-box;\\n margin: 0;\\n padding: 0;\\n}\\n\\nimg {\\n max-width: 50%;\\n border-radius: calc(0.5 * var(--base-font));\\n}\\n\\n/* // 标题样式 */\\nh1,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6 {\\n margin: calc(1.5 * var(--base-font)) var(--base-font);\\n font-weight: 600;\\n line-height: 1.25;\\n color: #fff;\\n\\n &:first-child {\\n margin-top: 0;\\n }\\n}\\n\\nh1 {\\n font-size: calc(2 * var(--base-font));\\n border-bottom: 1px solid #eaecef;\\n padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh2 {\\n font-size: calc(1.5 * var(--base-font));\\n border-bottom: 1px solid #eaecef;\\n padding-bottom: calc(0.3 * var(--base-font));\\n}\\n\\nh3 {\\n font-size: calc(1.25 * var(--base-font));\\n}\\nh4 {\\n font-size: var(--base-font);\\n}\\nh5 {\\n font-size: calc(0.875 * var(--base-font));\\n}\\nh6 {\\n font-size: calc(0.85 * var(--base-font));\\n color: #6a737d;\\n}\\n\\n/* // 段落和文本 */\\np {\\n margin: 0 0 var(--base-font);\\n}\\n\\nstrong {\\n font-weight: 600;\\n}\\n\\nem {\\n font-style: italic;\\n}\\n\\n/* // 链接 */\\na {\\n color: #0366d6;\\n text-decoration: none;\\n\\n &:hover {\\n text-decoration: underline;\\n }\\n}\\n\\n/* // 列表 */\\nul,\\nol {\\n margin-bottom: var(--base-font);\\n padding-left: calc(2 * var(--base-font));\\n}\\n\\nli {\\n margin-bottom: calc(0.25 * var(--base-font));\\n\\n > p {\\n margin: 0;\\n }\\n}\\n\\n/* // 代码块和内联代码 */\\npre {\\n background-color: #fafafa;\\n border-radius: calc(0.3 * var(--base-font));\\n padding: var(--base-font);\\n overflow: auto;\\n margin-bottom: var(--base-font);\\n line-height: 1.45;\\n overflow-x: auto;\\n\\n code {\\n color: #494949;\\n background-color: transparent;\\n padding: 0;\\n border-radius: 0;\\n border: none;\\n }\\n}\\n\\ncode {\\n font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;\\n background-color: #ececec;\\n color: #404040;\\n border-radius: calc(0.25 * var(--base-font));\\n padding: 0calc (2 * var(--base-font)) calc(0.4 * var(--base-font));\\n font-size: 85%;\\n}\\n\\n/* // 表格样式 */\\ntable {\\n border-collapse: collapse;\\n width: 100%;\\n margin-bottom: var(--base-font);\\n display: block;\\n overflow-x: auto;\\n color: #4a4e55;\\n}\\ntable th,\\ntable td {\\n padding: calc(0.75 * var(--base-font)) var(--base-font);\\n border: 1px solid #dfe2e5;\\n}\\n\\ntable th {\\n background-color: #f6f8fa;\\n font-weight: 600;\\n text-align: left;\\n}\\n\\ntable tr {\\n background-color: #fff;\\n border-top: 1px solid #c6cbd1;\\n\\n &:nth-child(2n) {\\n background-color: #f6f8fa;\\n }\\n}\\n\\n/* // 引用块 */\\nblockquote {\\n border-left: calc(0.25 * var(--base-font)) solid #dfe2e5;\\n color: #fff;\\n padding: 0 var(--base-font);\\n margin: 0 0 var(--base-font) 0;\\n\\n p {\\n margin: 0;\\n }\\n}\\n\\n/* // 水平线 */\\nhr {\\n height: 1px;\\n background-color: #e1e4e8;\\n border: 0;\\n margin: calc(1.5 * var(--base-font)) 0;\\n}\\n\\n/* // 任务列表 */\\n.task-list-item {\\n list-style-type: none;\\n\\n input[type='checkbox'] {\\n margin: 0 0calc (2 * var(--base-font)) calc(0.25 * var(--base-font)) -1.6em;\\n vertical-align: middle;\\n }\\n}\\n\""],"names":["messageRenderCss"],"mappings":"AAAA,MAAeA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
|
|
@@ -1,25 +1,27 @@
|
|
|
1
|
-
import { j as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { j as s } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
|
+
import { useRef as f, useState as m, useEffect as d } from "react";
|
|
3
3
|
import { createPortal as u } from "react-dom";
|
|
4
|
-
const
|
|
5
|
-
const { children:
|
|
6
|
-
return
|
|
7
|
-
if (
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
<style>${
|
|
11
|
-
<div data-shadow-container class="${
|
|
4
|
+
const y = (c) => {
|
|
5
|
+
const { children: r, style: n, shadowRootDivClassName: a = "", rootFontSize: e = 16 } = c, t = f(null), [o, h] = m();
|
|
6
|
+
return d(() => {
|
|
7
|
+
if (t.current && !t.current.shadowRoot) {
|
|
8
|
+
const i = t.current.shadowRoot || t.current.attachShadow({ mode: "open" });
|
|
9
|
+
i.innerHTML = `
|
|
10
|
+
<style>${n}</style>
|
|
11
|
+
<div data-shadow-container class="${a}"></div>
|
|
12
12
|
`, setTimeout(() => {
|
|
13
|
-
const
|
|
14
|
-
|
|
13
|
+
const l = i.querySelector("[data-shadow-container]");
|
|
14
|
+
h(l);
|
|
15
15
|
}, 0);
|
|
16
16
|
}
|
|
17
|
-
}, [
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
}, [r, n, a]), d(() => {
|
|
18
|
+
o && (o.style.fontSize = `${e}px`, o.style.setProperty("--base-font", `${e}px`));
|
|
19
|
+
}, [e, o]), /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
|
|
20
|
+
o && u(r, o),
|
|
21
|
+
/* @__PURE__ */ s.jsx("div", { ref: t })
|
|
20
22
|
] });
|
|
21
23
|
};
|
|
22
24
|
export {
|
|
23
|
-
|
|
25
|
+
y as ShadowDom
|
|
24
26
|
};
|
|
25
27
|
//# sourceMappingURL=ShadowDom.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShadowDom.es.js","sources":["../../../src/components/ShadowDom/ShadowDom.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface ShadowDomProps {\n style: string;\n shadowRootDivClassName?: string;\n}\nexport const ShadowDom = (props: PropsWithChildren<ShadowDomProps>) => {\n const { children, style, shadowRootDivClassName = '' } = props;\n const shadowRef = useRef<HTMLDivElement>(null);\n const [shadowContainer, setShadowContainer] = useState<HTMLDivElement>(); // shadowRef.current?.shadowRoot?.querySelector('[data-shadow-container]');\n\n useEffect(() => {\n if (shadowRef.current && !shadowRef.current.shadowRoot) {\n const shadowRoot = shadowRef.current.attachShadow({ mode: 'open' });\n shadowRoot.innerHTML = `\n <style>${style}</style>\n <div data-shadow-container class=\"${shadowRootDivClassName}\"></div>\n `;\n setTimeout(() => {\n const shadowContainerInner = shadowRoot.querySelector('[data-shadow-container]');\n setShadowContainer(shadowContainerInner as HTMLDivElement);\n }, 0);\n }\n }, [children, style, shadowRootDivClassName]);\n\n return (\n <>\n {shadowContainer && createPortal(children, shadowContainer)}\n <div ref={shadowRef} />\n </>\n );\n};\n"],"names":["ShadowDom","props","children","style","shadowRootDivClassName","shadowRef","useRef","shadowContainer","setShadowContainer","useState","useEffect","shadowRoot","shadowContainerInner","jsxs","Fragment","createPortal","jsx"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"ShadowDom.es.js","sources":["../../../src/components/ShadowDom/ShadowDom.tsx"],"sourcesContent":["import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\ninterface ShadowDomProps {\n style: string;\n shadowRootDivClassName?: string;\n rootFontSize?: number;\n}\nexport const ShadowDom = (props: PropsWithChildren<ShadowDomProps>) => {\n const { children, style, shadowRootDivClassName = '', rootFontSize = 16 } = props;\n const shadowRef = useRef<HTMLDivElement>(null);\n const [shadowContainer, setShadowContainer] = useState<HTMLDivElement>(); // shadowRef.current?.shadowRoot?.querySelector('[data-shadow-container]');\n\n useEffect(() => {\n if (shadowRef.current && !shadowRef.current.shadowRoot) {\n const shadowRoot = shadowRef.current.shadowRoot || shadowRef.current.attachShadow({ mode: 'open' });\n shadowRoot.innerHTML = `\n <style>${style}</style>\n <div data-shadow-container class=\"${shadowRootDivClassName}\"></div>\n `;\n setTimeout(() => {\n const shadowContainerInner = shadowRoot.querySelector('[data-shadow-container]') as HTMLDivElement;\n setShadowContainer(shadowContainerInner as HTMLDivElement);\n }, 0);\n }\n }, [children, style, shadowRootDivClassName]);\n\n useEffect(() => {\n if (shadowContainer) {\n shadowContainer.style.fontSize = `${rootFontSize}px`;\n shadowContainer.style.setProperty('--base-font', `${rootFontSize}px`);\n }\n }, [rootFontSize, shadowContainer]);\n\n return (\n <>\n {shadowContainer && createPortal(children, shadowContainer)}\n <div ref={shadowRef} />\n </>\n );\n};\n"],"names":["ShadowDom","props","children","style","shadowRootDivClassName","rootFontSize","shadowRef","useRef","shadowContainer","setShadowContainer","useState","useEffect","shadowRoot","shadowContainerInner","jsxs","Fragment","createPortal","jsx"],"mappings":";;;AAQa,MAAAA,IAAY,CAACC,MAA6C;AACrE,QAAM,EAAE,UAAAC,GAAU,OAAAC,GAAO,wBAAAC,IAAyB,IAAI,cAAAC,IAAe,OAAOJ,GACtEK,IAAYC,EAAuB,IAAI,GACvC,CAACC,GAAiBC,CAAkB,IAAIC,EAAyB;AAEvE,SAAAC,EAAU,MAAM;AACd,QAAIL,EAAU,WAAW,CAACA,EAAU,QAAQ,YAAY;AAChD,YAAAM,IAAaN,EAAU,QAAQ,cAAcA,EAAU,QAAQ,aAAa,EAAE,MAAM,QAAQ;AAClG,MAAAM,EAAW,YAAY;AAAA,iBACZT,CAAK;AAAA,4CACsBC,CAAsB;AAAA,SAE5D,WAAW,MAAM;AACT,cAAAS,IAAuBD,EAAW,cAAc,yBAAyB;AAC/E,QAAAH,EAAmBI,CAAsC;AAAA,SACxD,CAAC;AAAA,IAAA;AAAA,EAEL,GAAA,CAACX,GAAUC,GAAOC,CAAsB,CAAC,GAE5CO,EAAU,MAAM;AACd,IAAIH,MACcA,EAAA,MAAM,WAAW,GAAGH,CAAY,MAChDG,EAAgB,MAAM,YAAY,eAAe,GAAGH,CAAY,IAAI;AAAA,EACtE,GACC,CAACA,GAAcG,CAAe,CAAC,GAI7BM,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAmBP,KAAAQ,EAAad,GAAUM,CAAe;AAAA,IAC1DS,gBAAAA,EAAAA,IAAC,OAAI,EAAA,KAAKX,EAAW,CAAA;AAAA,EAAA,GACvB;AAEJ;"}
|