237c7802e5
Some checks failed
Deploy / deploy (push) Has been cancelled
Full-stack web application for Telegram management - Frontend: Vue 3 + Vben Admin - Backend: NestJS - Features: User management, group broadcast, statistics 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<template>
|
|
<div class="variable-help">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item
|
|
v-for="category in variableCategories"
|
|
:key="category.category"
|
|
:title="category.category"
|
|
:name="category.category"
|
|
>
|
|
<el-table :data="category.variables" stripe>
|
|
<el-table-column prop="name" label="Variable" width="200">
|
|
<template #default="{ row }">
|
|
<code>{{ '{{' + row.name + '}}' }}</code>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="type" label="Type" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag size="small">{{ row.type }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="description" label="Description" />
|
|
</el-table>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import api from '@/api'
|
|
|
|
const activeNames = ref([])
|
|
const variableCategories = ref([])
|
|
|
|
const loadVariables = async () => {
|
|
try {
|
|
const response = await api.get('/api/v1/template-variables/available')
|
|
variableCategories.value = response.data.variables
|
|
activeNames.value = [variableCategories.value[0]?.category]
|
|
} catch (error) {
|
|
console.error('Failed to load variables:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadVariables()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.variable-help {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
code {
|
|
background: #f5f7fa;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 13px;
|
|
color: #409eff;
|
|
}
|
|
</style> |