update
This commit is contained in:
@@ -1,37 +1,37 @@
|
||||
<template>
|
||||
<n-layout-content class="container">
|
||||
<n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
|
||||
<template #1>
|
||||
<CodeEditor
|
||||
label="代码区"
|
||||
v-model="code.value"
|
||||
:language="code.language"
|
||||
/>
|
||||
</template>
|
||||
<template #2>
|
||||
<n-split
|
||||
direction="vertical"
|
||||
:default-size="1 / 3"
|
||||
:min="1 / 5"
|
||||
:max="3 / 5"
|
||||
>
|
||||
<template #1>
|
||||
<CodeEditor label="输入框" v-model="input" />
|
||||
</template>
|
||||
<template #2>
|
||||
<CodeEditor label="输出框" v-model="output" readonly />
|
||||
</template>
|
||||
</n-split>
|
||||
</template>
|
||||
</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);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<n-layout-content class="container">
|
||||
<n-split direction="horizontal" :min="1 / 3" :max="4 / 5">
|
||||
<template #1>
|
||||
<CodeEditor
|
||||
label="代码区"
|
||||
v-model="code.value"
|
||||
:language="code.language"
|
||||
/>
|
||||
</template>
|
||||
<template #2>
|
||||
<n-split
|
||||
direction="vertical"
|
||||
:default-size="1 / 3"
|
||||
:min="1 / 5"
|
||||
:max="3 / 5"
|
||||
>
|
||||
<template #1>
|
||||
<CodeEditor label="输入框" v-model="input" />
|
||||
</template>
|
||||
<template #2>
|
||||
<CodeEditor label="输出框" v-model="output" readonly />
|
||||
</template>
|
||||
</n-split>
|
||||
</template>
|
||||
</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);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { useMessage, type SelectOption } from "naive-ui"
|
||||
import { useDark, useToggle } from "@vueuse/core"
|
||||
import Play from "../icons/Play.vue"
|
||||
import {
|
||||
code,
|
||||
copy,
|
||||
reset,
|
||||
run,
|
||||
loading,
|
||||
changeLanguage,
|
||||
} from "../composables/code"
|
||||
|
||||
const message = useMessage()
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const languages: SelectOption[] = [
|
||||
{ value: "python", label: "Python" },
|
||||
{ value: "c", label: "C" },
|
||||
]
|
||||
|
||||
function copyAndNotify() {
|
||||
copy()
|
||||
message.success("已经复制好了")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-layout-header bordered class="header">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<div class="title">徐越的自测猫</div>
|
||||
<n-flex>
|
||||
<n-button @click="toggleDark()">
|
||||
{{ isDark ? "浅色" : "深色" }}
|
||||
</n-button>
|
||||
<n-button @click="reset">重置</n-button>
|
||||
<n-button @click="copyAndNotify">复制</n-button>
|
||||
<n-select
|
||||
class="select"
|
||||
:options="languages"
|
||||
v-model:value="code.language"
|
||||
@update:value="changeLanguage"
|
||||
/>
|
||||
<n-button type="primary" @click="run" :loading="loading">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Play />
|
||||
</n-icon>
|
||||
</template>
|
||||
运行 (F5)
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-layout-header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
padding: 12px;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
import { useMessage, type SelectOption } from "naive-ui"
|
||||
import { useDark, useToggle } from "@vueuse/core"
|
||||
import Play from "../icons/Play.vue"
|
||||
import {
|
||||
code,
|
||||
copy,
|
||||
reset,
|
||||
run,
|
||||
loading,
|
||||
changeLanguage,
|
||||
} from "../composables/code"
|
||||
|
||||
const message = useMessage()
|
||||
const isDark = useDark()
|
||||
const toggleDark = useToggle(isDark)
|
||||
|
||||
const languages: SelectOption[] = [
|
||||
{ value: "python", label: "Python" },
|
||||
{ value: "c", label: "C" },
|
||||
]
|
||||
|
||||
function copyAndNotify() {
|
||||
copy()
|
||||
message.success("已经复制好了")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-layout-header bordered class="header">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<div class="title">徐越的自测猫</div>
|
||||
<n-flex>
|
||||
<n-button @click="toggleDark()">
|
||||
{{ isDark ? "浅色" : "深色" }}
|
||||
</n-button>
|
||||
<n-button @click="reset">重置</n-button>
|
||||
<n-button @click="copyAndNotify">复制</n-button>
|
||||
<n-select
|
||||
class="select"
|
||||
:options="languages"
|
||||
v-model:value="code.language"
|
||||
@update:value="changeLanguage"
|
||||
/>
|
||||
<n-button type="primary" @click="run" :loading="loading">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<Play />
|
||||
</n-icon>
|
||||
</template>
|
||||
运行 (F5)
|
||||
</n-button>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-layout-header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
height: 60px;
|
||||
padding: 12px;
|
||||
}
|
||||
.title {
|
||||
font-size: 20px;
|
||||
}
|
||||
.select {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<Header />
|
||||
<Content />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Header from "./Header.vue"
|
||||
import Content from "./Content.vue"
|
||||
</script>
|
||||
<template>
|
||||
<Header />
|
||||
<Content />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Header from "./Header.vue"
|
||||
import Content from "./Content.vue"
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user