@hep-code-runner/react 3.0.0 → 3.1.0
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/README.md +30 -13
- package/dist/index.d.ts +2 -0
- package/dist/index.js +29 -28
- package/dist/index.mjs +804 -778
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,19 +32,21 @@ function App() {
|
|
|
32
32
|
|
|
33
33
|
## Props 属性
|
|
34
34
|
|
|
35
|
-
| 属性 | 类型 | 默认值 | 说明
|
|
36
|
-
| -------------------- | ------------------------ | ------------- |
|
|
37
|
-
| pistonUrl | string | '/api/piston' | Piston API 地址
|
|
38
|
-
| language | string | 'javascript' | 默认语言
|
|
39
|
-
| theme | 'light' \| 'dark' | 'light' | 主题
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
35
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
36
|
+
| -------------------- | ------------------------ | ------------- | ------------------- |
|
|
37
|
+
| pistonUrl | string | '/api/piston' | Piston API 地址 |
|
|
38
|
+
| language | string | 'javascript' | 默认语言 |
|
|
39
|
+
| theme | 'light' \| 'dark' | 'light' | 主题 |
|
|
40
|
+
| themeColor | string | - | 自定义主题色 |
|
|
41
|
+
| showLanguageSelector | boolean | true | 显示语言选择器 |
|
|
42
|
+
| showEditor | boolean | true | 显示代码编辑器 |
|
|
43
|
+
| editable | boolean | true | 是否可编辑 |
|
|
44
|
+
| defaultCode | string | '' | 默认代码 |
|
|
45
|
+
| executorLabel | string | '运行' | 运行按钮文字 |
|
|
46
|
+
| onExecuteStart | () => void | - | 代码开始执行回调 |
|
|
47
|
+
| onExecuteEnd | (result) => void | - | 代码执行完成回调 |
|
|
48
|
+
| onLanguageChange | (language, code) => void | - | 语言切换回调 |
|
|
49
|
+
| onChange | (code: string) => void | - | 代码变化回调（防抖）|
|
|
48
50
|
|
|
49
51
|
## 主题切换
|
|
50
52
|
|
|
@@ -54,6 +56,21 @@ function App() {
|
|
|
54
56
|
|
|
55
57
|
点击组件右上角的月亮/太阳按钮可切换主题。
|
|
56
58
|
|
|
59
|
+
## 自定义主题色
|
|
60
|
+
|
|
61
|
+
支持通过 `themeColor` 属性自定义主题色，组件会自动根据颜色亮度调整文字颜色，确保可读性。
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
// 浅色主题
|
|
65
|
+
<CodeRunner themeColor="#4fc3f7" theme="light" />
|
|
66
|
+
|
|
67
|
+
// 深色主题
|
|
68
|
+
<CodeRunner themeColor="#9c27b0" theme="dark" />
|
|
69
|
+
|
|
70
|
+
// 动态切换主题色
|
|
71
|
+
<CodeRunner themeColor={currentColor} />
|
|
72
|
+
```
|
|
73
|
+
|
|
57
74
|
## 自定义 Piston API
|
|
58
75
|
|
|
59
76
|
```jsx
|
package/dist/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ export declare interface CodeRunnerProps {
|
|
|
26
26
|
pistonUrl?: string;
|
|
27
27
|
language?: string;
|
|
28
28
|
theme?: "light" | "dark";
|
|
29
|
+
themeColor?: string;
|
|
29
30
|
showLanguageSelector?: boolean;
|
|
30
31
|
showEditor?: boolean;
|
|
31
32
|
editable?: boolean;
|
|
@@ -34,6 +35,7 @@ export declare interface CodeRunnerProps {
|
|
|
34
35
|
onExecuteStart?: () => void;
|
|
35
36
|
onExecuteEnd?: (result: ExecuteResult) => void;
|
|
36
37
|
onLanguageChange?: (language: string, code: string) => void;
|
|
38
|
+
onChange?: (code: string) => void;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
export { }
|