This commit is contained in:
2024-01-22 12:30:30 +08:00
parent 230cf1bdeb
commit 275f49e54e
3 changed files with 66 additions and 11 deletions

View File

@@ -1,31 +1,61 @@
import { ref } from "vue"
import copyTextToClipboard from "copy-text-to-clipboard"
import { Code, LANGUAGE } from "../types"
import { Code, LANGUAGE, Cache } from "../types"
import { sources } from "../templates"
import { submit } from "../api"
import { useStorage } from "@vueuse/core"
const defaultLanguage = "python"
const cache: Cache = {
language: useStorage<LANGUAGE>("code_language", defaultLanguage),
input: useStorage("code_input", ""),
code: {
python: useStorage("code_python", sources["python"]),
c: useStorage("code_c", sources["c"]),
java: useStorage("code_java", sources["java"]),
cpp: useStorage("code_cpp", sources["cpp"]),
},
}
export const code = ref<Code>({
value: sources["python"],
language: "python",
value: cache.code[defaultLanguage].value,
language: cache.language.value,
})
export const input = ref("")
export const input = ref(cache.input.value)
export const output = ref("")
export const loading = ref(false)
export function init() {
code.value.language = cache.language.value
code.value.value = cache.code[code.value.language].value
input.value = cache.input.value
}
export function copy() {
copyTextToClipboard(code.value.value)
}
export function reset() {
code.value.value = sources["python"]
code.value.value = sources[code.value.language]
cache.code[code.value.language].value = sources[code.value.language]
output.value = ""
}
export function changeLanguage(language: LANGUAGE) {
code.value.value = sources[language]
cache.language.value = language
code.value.value = cache.code[language].value
output.value = ""
}
export function changeCode(value: string) {
cache.code[code.value.language].value = value
}
export function changeInput(value: string) {
cache.input.value = value
}
export async function run() {
loading.value = true
const cleanCode = code.value.value.trim()

View File

@@ -1,3 +1,18 @@
<script lang="ts" setup>
import {
code,
init,
input,
output,
changeCode,
changeInput,
} from "../composables/code"
import CodeEditor from "../components/CodeEditor.vue"
import { onMounted } from "vue"
onMounted(init)
</script>
<template>
<n-layout-content class="container">
<n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
@@ -5,6 +20,7 @@
<CodeEditor
label="代码区"
v-model="code.value"
@update:model-value="changeCode"
:language="code.language"
/>
</template>
@@ -16,7 +32,11 @@
:max="3 / 5"
>
<template #1>
<CodeEditor label="输入框" v-model="input" />
<CodeEditor
label="输入框"
v-model="input"
@update:model-value="changeInput"
/>
</template>
<template #2>
<CodeEditor label="输出框" v-model="output" readonly />
@@ -26,10 +46,7 @@
</n-split>
</n-layout-content>
</template>
<script lang="ts" setup>
import { code, input, output } from "../composables/code"
import CodeEditor from "../components/CodeEditor.vue"
</script>
<style scoped>
.container {
height: calc(100vh - 60px);

View File

@@ -1,6 +1,14 @@
import { RemovableRef } from "@vueuse/core"
export type LANGUAGE = "c" | "cpp" | "python" | "java"
export interface Code {
value: string
language: LANGUAGE
}
export interface Cache {
language: RemovableRef<LANGUAGE>
input: RemovableRef<string>
code: { [key in LANGUAGE]: RemovableRef<string> }
}