76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
|
|
<template>
|
|
<div class="example-container">
|
|
<NButton
|
|
text
|
|
type="primary"
|
|
size="small"
|
|
@click="toggleExample"
|
|
>
|
|
<template #icon>
|
|
<!-- <NIcon :component="Delete24Regular" />-->
|
|
</template>
|
|
查看{{ typeLabel }}示例
|
|
</NButton>
|
|
|
|
<NCard
|
|
v-if="show"
|
|
embedded
|
|
size="small"
|
|
class="example-card"
|
|
>
|
|
<pre class="example-code">{{ exampleText }}</pre>
|
|
</NCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
const props = defineProps({
|
|
type: {
|
|
type: Number,
|
|
// required: true,
|
|
validator: (val: number) => [1, 2, 3].includes(val),
|
|
default:4
|
|
}
|
|
})
|
|
|
|
const show = ref(false)
|
|
const typeMap = {
|
|
1: 'SQEL',
|
|
2: 'Aviator',
|
|
3: 'QL',
|
|
4: '表达式'
|
|
}
|
|
|
|
const examples = {
|
|
1: `# SQEL条件表达式示例\nuser.age > 18 \nAND department == 'IT' \nOR (vipLevel >= 3 AND creditScore > 800)`,
|
|
3: `// 查询语言示例\nfrom Employee e\nwhere e.salary > 10000\nand e.joinDate > '2020-01-01'\nselect e.name, e.position`,
|
|
2: `## Aviator脚本示例\nlet user = {\n name: '张三',\n vip: true,\n credit: 1500\n};\n\nif(user.vip&&user.credit>1000){\n "尊享VIP服务"\n} else {\n "标准服务"\n}`,
|
|
4: `// 状态判断\n"#status == 'SUCCESS'"\n"#taskStatus != 'FAILED'" `
|
|
}
|
|
|
|
const typeLabel = computed(() => typeMap[props.type])
|
|
const exampleText = computed(() => examples[props.type])
|
|
|
|
const toggleExample = () => {
|
|
show.value = !show.value
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.example-container {
|
|
margin-top: 8px;
|
|
}
|
|
.example-card {
|
|
background: #f8f9fa;
|
|
border-left: 3px solid #2080f0;
|
|
max-width: 99%;
|
|
}
|
|
.example-code {
|
|
font-family: 'Courier New', monospace;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
</style>
|