feat: 应用配置项定义功能
All checks were successful
continuous-integration/drone/push Build is passing

- 后端: App 模型添加 config_schema 字段,支持配置项定义
- 后端: apps API 支持 config_schema 的增删改查
- 前端: 应用管理页面支持定义配置项(text/radio/select/switch类型)
- 前端: 租户订阅页面根据应用 schema 动态渲染对应表单控件
- 支持设置选项、默认值、必填等属性
This commit is contained in:
2026-01-27 17:26:49 +08:00
parent e37466a7cc
commit cf4d6afbc8
4 changed files with 443 additions and 47 deletions

View File

@@ -24,6 +24,7 @@ const tenantList = ref([])
const appList = ref([])
const appRequireJssdk = ref({}) // app_code -> require_jssdk
const appBaseUrl = ref({}) // app_code -> base_url
const appConfigSchema = ref({}) // app_code -> config_schema
// 企微应用列表(按租户)
const wechatAppList = ref([])
@@ -46,6 +47,44 @@ const currentAppRequireJssdk = computed(() => {
return appRequireJssdk.value[form.app_code] || false
})
// 当前应用的配置项定义
const currentConfigSchema = computed(() => {
return appConfigSchema.value[form.app_code] || []
})
// 配置值映射(方便读写)
const configValues = computed(() => {
const map = {}
form.custom_configs.forEach(c => {
map[c.key] = c
})
return map
})
// 获取配置值
function getConfigValue(key) {
return configValues.value[key]?.value || ''
}
// 设置配置值
function setConfigValue(key, value, remark = '') {
const existing = form.custom_configs.find(c => c.key === key)
if (existing) {
existing.value = value
if (remark) existing.remark = remark
} else {
form.custom_configs.push({ key, value, remark })
}
}
// 获取选项显示名称
function getOptionLabel(schema, optionValue) {
if (schema.option_labels && schema.option_labels[optionValue]) {
return schema.option_labels[optionValue]
}
return optionValue
}
// 验证 app_code 必须是有效的应用
const validateAppCode = (rule, value, callback) => {
if (!value) {
@@ -72,6 +111,14 @@ watch(() => form.tenant_id, async (newVal) => {
form.wechat_app_id = null
})
// 监听应用选择变化,初始化配置默认值
watch(() => form.app_code, (newVal) => {
if (newVal && !editingId.value) {
// 新建时,根据 schema 初始化默认值
initConfigDefaults()
}
})
// 查看 Token 对话框
const tokenDialogVisible = ref(false)
const currentToken = ref('')
@@ -95,12 +142,25 @@ async function fetchApps() {
for (const app of apps) {
appRequireJssdk.value[app.app_code] = app.require_jssdk || false
appBaseUrl.value[app.app_code] = app.base_url || ''
appConfigSchema.value[app.app_code] = app.config_schema || []
}
} catch (e) {
console.error('获取应用列表失败:', e)
}
}
// 根据 schema 初始化配置默认值
function initConfigDefaults() {
const schema = currentConfigSchema.value
if (!schema.length) return
form.custom_configs = schema.map(s => ({
key: s.key,
value: s.default || '',
remark: ''
}))
}
async function fetchWechatApps(tenantId) {
if (!tenantId) {
wechatAppList.value = []
@@ -154,18 +214,41 @@ function handleCreate() {
async function handleEdit(row) {
editingId.value = row.id
dialogTitle.value = '编辑应用订阅'
// 先获取 schema
const schema = appConfigSchema.value[row.app_code] || []
// 合并已有配置和 schema 默认值
const existingConfigs = row.custom_configs || []
const existingMap = {}
existingConfigs.forEach(c => { existingMap[c.key] = c })
// 构建完整的配置列表(包含 schema 中的所有配置项)
const mergedConfigs = schema.map(s => ({
key: s.key,
value: existingMap[s.key]?.value ?? s.default ?? '',
remark: existingMap[s.key]?.remark ?? ''
}))
// 添加 schema 中没有但已存在的配置(兼容旧数据)
existingConfigs.forEach(c => {
if (!schema.find(s => s.key === c.key)) {
mergedConfigs.push({ ...c })
}
})
Object.assign(form, {
tenant_id: row.tenant_id,
app_code: row.app_code,
app_name: row.app_name || '',
wechat_app_id: row.wechat_app_id || null,
custom_configs: row.custom_configs ? [...row.custom_configs] : []
custom_configs: mergedConfigs
})
await fetchWechatApps(row.tenant_id)
dialogVisible.value = true
}
// 自定义配置管理
// 自定义配置管理(用于没有 schema 定义时的手动添加)
function addCustomConfig() {
form.custom_configs.push({ key: '', value: '', remark: '' })
}
@@ -402,49 +485,117 @@ onMounted(() => {
</template>
<!-- 自定义配置 -->
<el-divider content-position="left">自定义配置</el-divider>
<div class="custom-configs-section">
<div v-for="(config, index) in form.custom_configs" :key="index" class="config-item">
<div class="config-row">
<el-input
v-model="config.key"
placeholder="配置键 (如: industry)"
style="width: 150px"
/>
<el-input
v-model="config.remark"
placeholder="备注说明"
style="width: 180px; margin-left: 8px"
/>
<el-button
type="danger"
:icon="Delete"
circle
size="small"
style="margin-left: 8px"
@click="removeCustomConfig(index)"
/>
</div>
<el-input
v-model="config.value"
type="textarea"
:rows="3"
:autosize="{ minRows: 2, maxRows: 10 }"
placeholder="配置值(支持超长文本,如提示词等)"
style="margin-top: 8px"
/>
</div>
<template v-if="currentConfigSchema.length > 0 || form.custom_configs.length > 0">
<el-divider content-position="left">应用配置</el-divider>
<el-button type="primary" plain @click="addCustomConfig" style="margin-top: 8px">
<el-icon><Plus /></el-icon>
添加配置项
</el-button>
<div v-if="form.custom_configs.length === 0" class="config-empty-tip">
暂无自定义配置点击上方按钮添加
<div class="custom-configs-section">
<!-- 根据 schema 渲染表单 -->
<template v-for="(schema, index) in currentConfigSchema" :key="schema.key">
<div class="config-item-schema">
<div class="config-label">
{{ schema.label }}
<span v-if="schema.required" class="required-star">*</span>
</div>
<!-- text 类型 -->
<template v-if="schema.type === 'text'">
<el-input
v-model="form.custom_configs[index].value"
type="textarea"
:rows="2"
:autosize="{ minRows: 2, maxRows: 12 }"
:placeholder="schema.placeholder || '请输入'"
/>
</template>
<!-- radio 类型 -->
<template v-else-if="schema.type === 'radio'">
<el-radio-group v-model="form.custom_configs[index].value">
<el-radio
v-for="opt in schema.options"
:key="opt"
:value="opt"
>
{{ getOptionLabel(schema, opt) }}
</el-radio>
</el-radio-group>
</template>
<!-- select 类型 -->
<template v-else-if="schema.type === 'select'">
<el-select v-model="form.custom_configs[index].value" placeholder="请选择" style="width: 100%">
<el-option
v-for="opt in schema.options"
:key="opt"
:label="getOptionLabel(schema, opt)"
:value="opt"
/>
</el-select>
</template>
<!-- switch 类型 -->
<template v-else-if="schema.type === 'switch'">
<el-switch
v-model="form.custom_configs[index].value"
active-value="true"
inactive-value="false"
/>
</template>
<!-- 备注输入 -->
<el-input
v-model="form.custom_configs[index].remark"
placeholder="备注(可选)"
style="margin-top: 8px; width: 300px"
size="small"
/>
</div>
</template>
<!-- 没有 schema 定义时显示手动配置 -->
<template v-if="currentConfigSchema.length === 0">
<div v-for="(config, index) in form.custom_configs" :key="index" class="config-item">
<div class="config-row">
<el-input
v-model="config.key"
placeholder="配置键 (如: industry)"
style="width: 150px"
/>
<el-input
v-model="config.remark"
placeholder="备注说明"
style="width: 180px; margin-left: 8px"
/>
<el-button
type="danger"
:icon="Delete"
circle
size="small"
style="margin-left: 8px"
@click="removeCustomConfig(index)"
/>
</div>
<el-input
v-model="config.value"
type="textarea"
:rows="3"
:autosize="{ minRows: 2, maxRows: 10 }"
placeholder="配置值(支持超长文本,如提示词等)"
style="margin-top: 8px"
/>
</div>
<el-button type="primary" plain @click="addCustomConfig" style="margin-top: 8px">
<el-icon><Plus /></el-icon>
添加配置项
</el-button>
<div v-if="form.custom_configs.length === 0" class="config-empty-tip">
该应用暂无配置项定义
</div>
</template>
</div>
</div>
</template>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
@@ -528,6 +679,25 @@ onMounted(() => {
margin-bottom: 12px;
}
.config-item-schema {
background: #f5f7fa;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
}
.config-label {
font-weight: 500;
color: #303133;
margin-bottom: 10px;
font-size: 14px;
}
.required-star {
color: #f56c6c;
margin-left: 4px;
}
.config-row {
display: flex;
align-items: center;