58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from "@iconify/vue"
|
|
import copyTextToClipboard from "copy-text-to-clipboard"
|
|
import { useMessage, type DropdownOption } from "naive-ui"
|
|
import { code, loading, reset, run, share } from "../composables/code"
|
|
import { tab } from "../composables/tab"
|
|
|
|
const message = useMessage()
|
|
function switchAndRun() {
|
|
tab.value = "output"
|
|
run()
|
|
}
|
|
|
|
function copy() {
|
|
copyTextToClipboard(code.value)
|
|
message.success("已经复制好了")
|
|
}
|
|
|
|
function handleShare() {
|
|
share()
|
|
message.success("分享链接已复制")
|
|
}
|
|
|
|
const menu: DropdownOption[] = [
|
|
{ label: "复制", key: "copy", props: { onClick: copy } },
|
|
{ label: "重置", key: "reset", props: { onClick: reset } },
|
|
{ label: "分享", key: "share", props: { onClick: handleShare } },
|
|
]
|
|
</script>
|
|
<template>
|
|
<n-layout-header class="container" bordered>
|
|
<n-flex justify="space-between" align="center">
|
|
<n-flex align="center">
|
|
<Icon icon="streamline-emojis:cat" :width="30" :height="30"></Icon>
|
|
<div class="title">徐越的自测猫</div>
|
|
</n-flex>
|
|
<n-flex align="center">
|
|
<n-dropdown :options="menu" size="large">
|
|
<n-button>操作</n-button>
|
|
</n-dropdown>
|
|
<n-button type="primary" :disabled="loading" @click="switchAndRun">
|
|
运行
|
|
</n-button>
|
|
</n-flex>
|
|
</n-flex>
|
|
</n-layout-header>
|
|
</template>
|
|
<style scoped>
|
|
.container {
|
|
height: 60px;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
font-size: 18px;
|
|
}
|
|
</style>
|