@hep-code-runner/vue3 2.3.3 → 2.3.4

package/README.md

@@ -1,185 +1,88 @@
 # @hep-code-runner/vue3
 
-Vue 3 代码运行器组件，支持多种编程语言在线执行。
-
-## 功能特性
-
-- 支持多种编程语言（JavaScript、Python、Go、Java、C、Rust 等）
-- 多版本语言支持（如 Python 2、Python 3）
-- 代码语法高亮（PrismJS）
-- 亮色/暗色主题切换
-- 可拖拽调整编辑器宽度
-- 支持自定义 Piston API 地址
-- 完整的事件回调
+Vue 3 代码运行器组件，基于 Piston API 支持多种编程语言在线执行。
 
 ## 安装
 
 ```bash
 npm install @hep-code-runner/vue3
-# 或
-pnpm add @hep-code-runner/vue3
 ```
 
-## 基础用法
-
-```vue
-<template>
-  <CodeRunner />
-</template>
+## 引入
 
-<script setup>
-  import { CodeRunner } from "@hep-code-runner/vue3";
-  import "@hep-code-runner/vue3/dist/style.css";
-</script>
-```
-
-## Props 属性
-
-| 属性                 | 类型              | 默认值        | 说明                  |
-| -------------------- | ----------------- | ------------- | --------------------- |
-| v-model              | string            | -             | 绑定代码内容（双向）  |
-| v-model:language     | string            | 'javascript'  | 绑定当前语言（双向）  |
-| pistonUrl            | string            | '/api/piston' | Piston API 地址       |
-| language             | string            | 'javascript'  | 当前语言（受控）      |
-| theme                | 'light' \| 'dark' | 'light'       | 主题                  |
-| themeColor           | string            | -             | 自定义主题色         |
-| showLanguageSelector | boolean           | true          | 显示语言选择器        |
-| showEditor           | boolean           | true          | 显示代码编辑器        |
-| editable             | boolean           | true          | 是否可编辑            |
-| executorLabel        | string            | '运行'        | 运行按钮文字         |
-
-## Events 事件
-
-| 事件名             | 参数           | 说明           |
-| ------------------ | -------------- | -------------- |
-| update:modelValue  | value          | 代码内容变化   |
-| update:language     | language       | 语言变化       |
-| execute-start      | -              | 代码开始执行   |
-| execute-end        | result         | 代码执行完成   |
-| language-change    | language, code | 语言切换       |
-| change             | code           | 代码变化（防抖）|
-
-## 主题切换
-
-```vue
-<CodeRunner theme="dark" />
+```js
+import { CodeRunner } from "@hep-code-runner/vue3";
+import "@hep-code-runner/vue3/dist/style.css";
 ```
 
-点击组件右上角的月亮/太阳按钮可切换主题。
-
-## 自定义主题色
+---
 
-支持通过 `themeColor` 属性自定义主题色，组件会自动根据颜色亮度调整文字颜色，确保可读性。
-
-```vue
-<!-- 浅色主题 -->
-<CodeRunner themeColor="#4fc3f7" theme="light" />
-
-<!-- 深色主题 -->
-<CodeRunner themeColor="#9c27b0" theme="dark" />
-
-<!-- 动态切换主题色 -->
-<CodeRunner :themeColor="currentColor" />
-```
+## CodeRunner
 
-## 自定义 Piston API
+### 用法
 
 ```vue
-<CodeRunner pistonUrl="https://your-piston-api.com/api" />
-```
-
-## 示例
-
-### 默认配置
+<template>
+  <CodeRunner />
+</template>
 
-```vue
-<CodeRunner />
+<script setup>
+import { CodeRunner } from "@hep-code-runner/vue3";
+</script>
 ```
 
-### 深色主题
+### Props
 
-```vue
-<CodeRunner theme="dark" language="python" />
-```
-
-### 受控模式（v-model）
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| pistonUrl | string | '/api/piston' | Piston API 地址 |
+| modelValue / v-model | string | '' | 当前代码 |
+| v-model:language | string | 'javascript' | 当前语言 |
+| theme | 'light' \| 'dark' | 'light' | 主题 |
+| themeColor | string | - | 自定义主题色 |
+| showLanguageSelector | boolean | true | 显示语言选择器 |
+| showEditor | boolean | true | 显示代码编辑器 |
+| editable | boolean | true | 是否可编辑 |
+| executorLabel | string | '运行' | 运行按钮文字 |
 
-组件完全受控，父组件控制 language 和 code：
+### 受控模式
 
 ```vue
-<template>
-  <CodeRunner
-    v-model:language="currentLanguage"
-    v-model="currentCode"
-    @language-change="onLanguageChange"
-  />
-</template>
-
 <script setup>
-import { ref } from 'vue'
-const currentLanguage = ref('javascript')
-const currentCode = ref('console.log("hello")')
-</script>
-```
+import { ref } from "vue";
 
-### 监听事件
+const currentLanguage = ref("javascript");
+const currentCode = ref('console.log("hello")');
+</script>
 
-```vue
 <template>
   <CodeRunner
-    @execute-start="handleStart"
-    @execute-end="handleEnd"
-    @language-change="handleLanguageChange"
+    v-model="currentCode"
+    v-model:language="currentLanguage"
   />
 </template>
-
-<script setup>
-  function handleStart() {
-    console.log("开始执行");
-  }
-
-  function handleEnd(result) {
-    console.log("执行完成", result);
-  }
-
-  function handleLanguageChange(language, code) {
-    console.log("语言切换", language);
-  }
-</script>
 ```
 
-## 依赖
-
-- vue: ^3.0.0
-- prismjs: ^1.30.0
+### Events
 
-## CodeRunnerDialog 弹窗组件
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| update:modelValue | code | 代码变化 |
+| update:language | language | 语言变化 |
+| execute-start | - | 代码开始执行 |
+| execute-end | result | 代码执行完成 |
+| language-change | language, code | 语言切换 |
+| change | code | 代码变化（防抖） |
 
-提供弹窗模式的代码执行器，支持受控和非受控模式。
+---
 
-### 引入
-
-```vue
-<script setup>
-import { CodeRunnerDialog } from "@hep-code-runner/vue3";
-import "@hep-code-runner/vue3/dist/style.css";
-</script>
-```
+## CodeRunnerDialog
 
-### 受控模式
+### 用法
 
 ```vue
 <template>
-  <button @click="visible = true">打开弹窗</button>
-
-  <CodeRunnerDialog
-    v-model="visible"
-    v-model:language="currentLang"
-    v-model:code="currentCode"
-    title="代码执行器"
-    width="800"
-    @close="handleClose"
-  >
+  <CodeRunnerDialog ref="dialog" title="代码执行器">
     <template #footer="{ close }">
       <button @click="close">取消</button>
       <button @click="handleSave">保存</button>
@@ -189,67 +92,83 @@ import "@hep-code-runner/vue3/dist/style.css";
 
 <script setup>
 import { ref } from "vue";
+import { CodeRunnerDialog } from "@hep-code-runner/vue3";
 
-const visible = ref(false);
-const currentLang = ref('python');
-const currentCode = ref('print("hello")');
-
-function handleClose() {
-  console.log('language:', currentLang.value, 'code:', currentCode.value);
-}
+const dialog = ref(null);
 
 function handleSave() {
-  console.log('save:', currentCode.value);
-  visible.value = false;
+  dialog.value.close();
 }
 </script>
 ```
 
-### 非受控模式
+### 受控模式
 
 ```vue
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+const currentLanguage = ref("python");
+const currentCode = ref('print("hello")');
+</script>
+
 <template>
-  <button @click="dialogRef?.open()">打开弹窗</button>
+  <button @click="visible = true">打开</button>
 
   <CodeRunnerDialog
-    ref="dialogRef"
+    v-model="visible"
+    v-model:language="currentLanguage"
+    v-model:code="currentCode"
     title="代码执行器"
+    width="800"
+    @close="onClose"
   >
     <template #footer="{ close }">
       <button @click="close">取消</button>
-      <button @click="handleInsert">插入代码</button>
+      <button @click="handleSave(close)">保存</button>
     </template>
   </CodeRunnerDialog>
 </template>
-
-<script setup>
-import { ref } from "vue";
-
-const dialogRef = ref(null);
-</script>
 ```
 
-### Props 属性
+### Props
 
 | 属性 | 类型 | 默认值 | 说明 |
 |------|------|--------|------|
-| v-model | boolean | false | 控制显示隐藏 |
+| v-model | boolean | false | 控制显隐 |
 | v-model:language | string | 'javascript' | 当前语言 |
 | v-model:code | string | '' | 当前代码 |
 | title | string | '代码执行器' | 弹窗标题 |
 | width | string \| number | 800 | 弹窗宽度 |
+| pistonUrl | string | '/api/piston' | Piston API 地址 |
+| theme | 'light' \| 'dark' | 'light' | 主题 |
+| themeColor | string | - | 自定义主题色 |
+| showLanguageSelector | boolean | true | 显示语言选择器 |
+| showEditor | boolean | true | 显示代码编辑器 |
+| editable | boolean | true | 是否可编辑 |
+| executorLabel | string | '运行' | 运行按钮文字 |
 
-其他属性会透传给内部 CodeRunner 组件。
-
-### Slots 插槽
+### Slots
 
-| 插槽名 | 作用域参数 | 说明 |
-|--------|-----------|------|
-| footer | { close } | 底部自定义内容，close 为关闭函数 |
+| 插槽名 | 参数 | 说明 |
+|--------|------|------|
+| footer | { close } | 底部自定义内容 |
 
-### Expose 暴露方法
+### Methods
 
 | 方法 | 说明 |
 |------|------|
 | open() | 打开弹窗 |
 | close() | 关闭弹窗 |
+
+### Events
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| close | - | 弹窗关闭 |
+
+## 依赖
+
+- vue: ^3.0.0
+- prismjs: ^1.30.0

package/dist/index.d.ts

@@ -25,8 +25,8 @@ close: typeof close_2;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => void;
 "update:language": (value: string) => void;
-close: () => void;
 "update:code": (value: string) => void;
+close: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_2<__VLS_TypePropsToRuntimeProps_2<Props_2>, {
 title: string;
 width: number;
@@ -42,8 +42,8 @@ executorLabel: string;
 }>>> & Readonly<{
 "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 "onUpdate:language"?: ((value: string) => any) | undefined;
-onClose?: (() => any) | undefined;
 "onUpdate:code"?: ((value: string) => any) | undefined;
+onClose?: (() => any) | undefined;
 }>, {
 code: string;
 title: string;
@@ -117,6 +117,7 @@ declare function close_2(): void;
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
 pistonUrl: string;
 modelValue: string;
+code: string;
 language: string;
 theme: string;
 themeColor: string;
@@ -130,9 +131,11 @@ executorLabel: string;
 "execute-end": (result: ExecuteResult) => void;
 "language-change": (language: string, code: string) => void;
 "update:language": (language: string) => void;
+"update:code": (code: string) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
 pistonUrl: string;
 modelValue: string;
+code: string;
 language: string;
 theme: string;
 themeColor: string;
@@ -146,7 +149,9 @@ executorLabel: string;
 "onExecute-end"?: ((result: ExecuteResult) => any) | undefined;
 "onLanguage-change"?: ((language: string, code: string) => any) | undefined;
 "onUpdate:language"?: ((language: string) => any) | undefined;
+"onUpdate:code"?: ((code: string) => any) | undefined;
 }>, {
+code: string;
 modelValue: string;
 language: string;
 theme: "light" | "dark";
@@ -174,6 +179,7 @@ declare function open_2(): void;
 declare interface Props {
     pistonUrl?: string;
     modelValue?: string;
+    code?: string;
     language?: string;
     theme?: "light" | "dark";
     themeColor?: string;