- reset() 清空时一并剥离 share 参数,否则重载后分享代码会被写回 - share() 以去掉 query/share 的地址为基址,避免预设代码在 init 里覆盖分享内容 - 打开分享链接前比对本地已存代码,会覆盖用户改动时先弹窗确认 - SQL 分享带上选中的数据表 id,接收方运行结果与分享者一致 - 分享负载的 code/table 字段补类型校验 - 链接损坏或预设加载失败时给出提示,不再静默吞掉 - 剪贴板写入失败时不再提示"已复制" 组件外的 init 阶段拿不到 useMessage(),新增 composables/notice.ts 用 createDiscreteApi 提供提示与确认框,主题跟随 useDark()。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CWT2cy7mkZevZR4WVVfAVu
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from "@iconify/vue"
|
|
import { useMessage } from "naive-ui"
|
|
import SelectLanguage from "../components/SelectLanguage.vue"
|
|
import SelectSqlTable from "../components/SelectSqlTable.vue"
|
|
import ThemeButton from "../components/ThemeButton.vue"
|
|
import { code, loading, run, share, size } from "../composables/code"
|
|
|
|
const message = useMessage()
|
|
|
|
function handleShare() {
|
|
if (share()) {
|
|
message.success("分享链接已复制")
|
|
} else {
|
|
message.error("复制失败,请检查浏览器剪贴板权限")
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-layout-header bordered class="header">
|
|
<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>
|
|
<n-button @click="handleShare">分享</n-button>
|
|
<ThemeButton />
|
|
<n-input-number
|
|
v-model:value="size"
|
|
class="fontSize"
|
|
placeholder=""
|
|
:min="20"
|
|
:max="40"
|
|
:step="2"
|
|
>
|
|
<template #prefix>字号</template>
|
|
</n-input-number>
|
|
<SelectLanguage />
|
|
<SelectSqlTable v-if="code.language === 'sql'" />
|
|
<n-button type="primary" @click="run" :disabled="loading">
|
|
运行 (F5)
|
|
</n-button>
|
|
</n-flex>
|
|
</n-flex>
|
|
</n-layout-header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header {
|
|
height: 60px;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
font-size: 20px;
|
|
}
|
|
.fontSize {
|
|
width: 110px;
|
|
}
|
|
</style>
|