fix
Some checks failed
Deploy / build-and-deploy (push) Has been cancelled

This commit is contained in:
2025-10-22 12:29:27 +08:00
parent bc2db54575
commit 9470614588

View File

@@ -13,12 +13,8 @@ import { LANGUAGE } from "../types"
interface Props { interface Props {
modelValue: string modelValue: string
label?: string
icon?: string
language?: LANGUAGE language?: LANGUAGE
fontSize?: number fontSize?: number
readonly?: boolean
placeholder?: string
currentLine?: number currentLine?: number
nextLine?: number nextLine?: number
currentLineText?: string currentLineText?: string
@@ -26,11 +22,8 @@ interface Props {
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
label: "",
language: "python", language: "python",
fontSize: 24, fontSize: 24,
readonly: false,
placeholder: "",
}) })
const code = ref(props.modelValue) const code = ref(props.modelValue)
@@ -58,7 +51,7 @@ const highlightField = StateField.define<DecorationSet>({
if (effect.value.currentLine || effect.value.nextLine) { if (effect.value.currentLine || effect.value.nextLine) {
const decorations_array: any[] = [] const decorations_array: any[] = []
// 当前行高亮(绿色) // 当前行高亮(绿色)
if (effect.value.currentLine) { if (effect.value.currentLine) {
try { try {
const line = tr.state.doc.line(effect.value.currentLine) const line = tr.state.doc.line(effect.value.currentLine)
@@ -74,13 +67,16 @@ const highlightField = StateField.define<DecorationSet>({
Decoration.line({ Decoration.line({
class: "cm-current-line-with-text", class: "cm-current-line-with-text",
attributes: { attributes: {
"data-text": effect.value.currentLineText "data-text": effect.value.currentLineText,
} },
}).range(line.from), }).range(line.from),
) )
} }
} catch (e) { } catch (e) {
console.warn("Invalid line number for current line:", effect.value.currentLine) console.warn(
"Invalid line number for current line:",
effect.value.currentLine,
)
} }
} }
@@ -94,19 +90,22 @@ const highlightField = StateField.define<DecorationSet>({
}).range(line.from), }).range(line.from),
) )
// 在下一步行添加文字 - 使用行装饰而不是Widget // 在下一步行添加文字
if (effect.value.nextLineText) { if (effect.value.nextLineText) {
decorations_array.push( decorations_array.push(
Decoration.line({ Decoration.line({
class: "cm-next-line-with-text", class: "cm-next-line-with-text",
attributes: { attributes: {
"data-text": effect.value.nextLineText "data-text": effect.value.nextLineText,
} },
}).range(line.from), }).range(line.from),
) )
} }
} catch (e) { } catch (e) {
console.warn("Invalid line number for next line:", effect.value.nextLine) console.warn(
"Invalid line number for next line:",
effect.value.nextLine,
)
} }
} }
@@ -124,6 +123,7 @@ const highlightField = StateField.define<DecorationSet>({
const styleTheme = EditorView.baseTheme({ const styleTheme = EditorView.baseTheme({
"& .cm-scroller": { "& .cm-scroller": {
"font-family": "Monaco", "font-family": "Monaco",
height: "calc(100vh - 120px)",
}, },
"&.cm-editor.cm-focused": { "&.cm-editor.cm-focused": {
outline: "none", outline: "none",
@@ -239,7 +239,12 @@ function updateHighlight() {
// 监听 props 变化并更新高亮 // 监听 props 变化并更新高亮
watch( watch(
() => [props.currentLine, props.nextLine, props.currentLineText, props.nextLineText], () => [
props.currentLine,
props.nextLine,
props.currentLineText,
props.nextLineText,
],
() => { () => {
updateHighlight() updateHighlight()
}, },
@@ -250,11 +255,8 @@ watch(
v-model="code" v-model="code"
indentWithTab indentWithTab
:extensions="[styleTheme, lang, highlightField, isDark ? oneDark : smoothy]" :extensions="[styleTheme, lang, highlightField, isDark ? oneDark : smoothy]"
:disabled="props.readonly"
:tabSize="4" :tabSize="4"
:placeholder="props.placeholder"
:style="{ :style="{
height: 'calc(100% - 60px)',
fontSize: props.fontSize + 'px', fontSize: props.fontSize + 'px',
}" }"
@change="onChange" @change="onChange"