You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
9.2 KiB
256 lines
9.2 KiB
<template>
|
|
<div>
|
|
<!-- 列表视图 -->
|
|
<div v-show="view === 'list'">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-slate-800">应用环境配置</h2>
|
|
<p class="text-xs text-slate-400 mt-1">应用自有的 key/value 配置（音乐、OSS 等），直接读写所选应用的业务库。结构同「全局环境配置」但不分区域。</p>
|
|
</div>
|
|
<button class="btn btn-primary btn-sm text-white" :disabled="!curApp" @click="showForm()">+ 新增配置</button>
|
|
</div>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="text-sm text-slate-500">应用</span>
|
|
<select v-model.number="curApp" class="select select-bordered select-sm min-w-48" @change="onAppChange">
|
|
<option :value="0" disabled>请选择应用</option>
|
|
<option v-for="a in apps" :key="a.id" :value="a.id">{{ a.name || a.app_name }}</option>
|
|
</select>
|
|
<input v-model="keyword" class="input input-bordered input-sm w-48" placeholder="按分组/键搜索" />
|
|
</div>
|
|
<div v-if="!curApp" class="bg-white rounded-xl shadow-sm border border-slate-100 text-center text-slate-400 py-16">
|
|
<div class="text-4xl mb-2">🗂️</div>
|
|
<p class="text-sm">请先在上方选择一个应用</p>
|
|
</div>
|
|
<div v-else class="bg-white rounded-xl shadow-sm border border-slate-100">
|
|
<div class="overflow-x-auto">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>键</th><th>值</th><th>描述</th><th class="text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="loading">
|
|
<td colspan="4" class="text-center py-8"><span class="loading loading-spinner loading-sm"></span></td>
|
|
</tr>
|
|
<tr v-else-if="!filteredRows.length">
|
|
<td colspan="4" class="text-center text-slate-400 py-8">暂无配置</td>
|
|
</tr>
|
|
<template v-for="grp in groupedRows" :key="grp.key">
|
|
<tr class="bg-slate-100/80">
|
|
<td colspan="4" class="py-2">
|
|
<span class="font-semibold text-slate-600 text-sm">▸ {{ grp.label }}</span>
|
|
<span class="text-xs text-slate-400 ml-2">{{ grp.items.length }} 项</span>
|
|
</td>
|
|
</tr>
|
|
<tr v-for="c in grp.items" :key="c.id" class="hover">
|
|
<td class="font-mono text-sm font-medium">{{ c.key || '' }}</td>
|
|
<td class="text-sm text-slate-500 max-w-xs truncate" :title="c.value || ''">{{ c.value || '' }}</td>
|
|
<td class="text-sm text-slate-400">{{ c.description || '' }}</td>
|
|
<td class="text-right">
|
|
<div class="inline-flex gap-1">
|
|
<button class="btn btn-ghost btn-xs" @click="showForm(c)">编辑</button>
|
|
<button class="btn btn-ghost btn-xs text-red-500" @click="delCfg(c)">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表单视图 -->
|
|
<div v-show="view === 'form'">
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<button class="btn btn-ghost btn-sm" @click="showList()">← 返回列表</button>
|
|
<h2 class="text-lg font-semibold text-slate-800">{{ isEditing ? '编辑配置' : '新增配置' }}</h2>
|
|
<span class="text-xs text-slate-400">应用：{{ curAppLabel }}</span>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 max-w-2xl">
|
|
<form @submit.prevent="saveCfg">
|
|
<div class="form-control mb-4">
|
|
<label class="label"><span class="label-text font-medium">分组 (group)</span></label>
|
|
<input v-model="form.group" type="text" class="input input-bordered w-full" placeholder="如 music / oss / other" />
|
|
</div>
|
|
<div class="form-control mb-4">
|
|
<label class="label"><span class="label-text font-medium">键 (key) *</span></label>
|
|
<input v-model="form.key" type="text" class="input input-bordered w-full" required placeholder="如 oss_access_key" />
|
|
</div>
|
|
<div class="form-control mb-4">
|
|
<label class="label"><span class="label-text font-medium">值 (value)</span></label>
|
|
<textarea v-model="form.value" class="textarea textarea-bordered w-full font-mono text-sm" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-control mb-6">
|
|
<label class="label"><span class="label-text font-medium">描述</span></label>
|
|
<input v-model="form.description" type="text" class="input input-bordered w-full" />
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button type="button" class="btn btn-ghost" @click="showList()">取消</button>
|
|
<button type="submit" class="btn btn-primary text-white" :disabled="submitting">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { useApi } from '~/composables/useApi'
|
|
import { useToast } from '~/composables/useToast'
|
|
|
|
definePageMeta({ title: '应用环境配置' })
|
|
|
|
// 部署应用（与应用中心 apps/list 同源；id 为部署注册 id，用于连接该应用业务库）
|
|
interface Deployment { id: number; app_name: string; status: string; name: string; region: string }
|
|
|
|
// 应用 config 项（结构同 DBGlobalConfigItem 去掉 region）
|
|
interface AppConfig {
|
|
id: number
|
|
group: string
|
|
key: string
|
|
value: string
|
|
description: string
|
|
}
|
|
|
|
const { consoleApi } = useApi()
|
|
const { success, error } = useToast()
|
|
|
|
const view = ref<'list' | 'form'>('list')
|
|
const apps = ref<Deployment[]>([])
|
|
const curApp = ref(0) // 选中的部署 app_id
|
|
const items = ref<AppConfig[]>([])
|
|
const loading = ref(false)
|
|
const submitting = ref(false)
|
|
const isEditing = ref(false)
|
|
const keyword = ref('')
|
|
|
|
const form = reactive({ id: 0, group: '', key: '', value: '', description: '' })
|
|
|
|
const curAppLabel = computed(() => {
|
|
const a = apps.value.find((x) => x.id === curApp.value)
|
|
return a ? (a.name || a.app_name) : ''
|
|
})
|
|
|
|
// 关键字过滤（按 group + key）
|
|
const filteredRows = computed(() => {
|
|
const kw = keyword.value.trim().toLowerCase()
|
|
if (!kw) return items.value
|
|
return items.value.filter((c) => ((c.group || '') + (c.key || '')).toLowerCase().includes(kw))
|
|
})
|
|
|
|
// 按 group 分组：相同组归在一起（未分组排最前）
|
|
const groupedRows = computed(() => {
|
|
const groups: Record<string, AppConfig[]> = {}
|
|
filteredRows.value.forEach((c) => {
|
|
const g = c.group || ''
|
|
;(groups[g] = groups[g] || []).push(c)
|
|
})
|
|
const names = Object.keys(groups).sort((a, b) => {
|
|
if (a === '') return -1
|
|
if (b === '') return 1
|
|
return a < b ? -1 : 1
|
|
})
|
|
return names.map((g) => ({ key: g, label: g || '未分组', items: groups[g] }))
|
|
})
|
|
|
|
async function loadApps() {
|
|
try {
|
|
const list = await consoleApi<Deployment[]>('apps/list', {})
|
|
apps.value = list ?? []
|
|
// 默认选中第一个应用，直接带出其配置
|
|
if (!curApp.value && apps.value.length) {
|
|
curApp.value = apps.value[0]!.id
|
|
await loadData()
|
|
}
|
|
} catch (e: any) {
|
|
error(e?.message ?? '获取应用列表失败')
|
|
apps.value = []
|
|
}
|
|
}
|
|
|
|
async function loadData() {
|
|
if (!curApp.value) {
|
|
items.value = []
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
const data = await consoleApi<{ items: AppConfig[] }>('appcfg/list', { app_id: curApp.value })
|
|
items.value = data?.items ?? []
|
|
} catch (e: any) {
|
|
error(e?.message ?? '获取配置失败')
|
|
items.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onAppChange() {
|
|
loadData()
|
|
}
|
|
|
|
function showList() {
|
|
view.value = 'list'
|
|
loadData()
|
|
}
|
|
|
|
function showForm(cfg?: AppConfig) {
|
|
if (cfg) {
|
|
isEditing.value = true
|
|
form.id = cfg.id || 0
|
|
form.group = cfg.group || ''
|
|
form.key = cfg.key || ''
|
|
form.value = cfg.value || ''
|
|
form.description = cfg.description || ''
|
|
} else {
|
|
isEditing.value = false
|
|
form.id = 0
|
|
form.group = ''
|
|
form.key = ''
|
|
form.value = ''
|
|
form.description = ''
|
|
}
|
|
view.value = 'form'
|
|
}
|
|
|
|
async function saveCfg() {
|
|
if (!curApp.value) {
|
|
error('请先选择应用')
|
|
return
|
|
}
|
|
submitting.value = true
|
|
try {
|
|
const data: Record<string, unknown> = {
|
|
app_id: curApp.value,
|
|
group: form.group.trim(),
|
|
key: form.key.trim(),
|
|
value: form.value,
|
|
description: form.description.trim(),
|
|
}
|
|
if (isEditing.value) {
|
|
data.id = Number(form.id)
|
|
await consoleApi('appcfg/update', data)
|
|
} else {
|
|
await consoleApi('appcfg/add', data)
|
|
}
|
|
success('保存成功')
|
|
showList()
|
|
} catch (e: any) {
|
|
error(e?.message ?? '保存失败')
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
function delCfg(c: AppConfig) {
|
|
if (!window.confirm('确定删除该配置项吗？')) return
|
|
consoleApi('appcfg/del', { app_id: curApp.value, ids: [c.id] })
|
|
.then(() => { success('删除成功'); loadData() })
|
|
.catch((e: any) => error(e?.message ?? '删除失败'))
|
|
}
|
|
|
|
onMounted(loadApps)
|
|
</script>
|
|
|