mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-26 01:33:05 +00:00
refactor: 优化页面
This commit is contained in:
wxg0103
wxg0103
parent
a32d0983f1
commit
a83a731b7b
|
|
@ -5,6 +5,7 @@
|
|||
<h4>{{ drawerTitle }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-form
|
||||
v-if="dataLoaded"
|
||||
ref="formRef"
|
||||
|
|
@ -14,13 +15,61 @@
|
|||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
>
|
||||
<h4 class="title-decoration-1 mb-16">应用信息</h4>
|
||||
<h4 class="title-decoration-1 mb-16">{{ infoTitle }}</h4>
|
||||
|
||||
<template v-for="(item, key) in configFields[configType]" :key="key">
|
||||
<el-form-item :label="item.label" :prop="key">
|
||||
<el-input v-model="form[configType][key]" :placeholder="item.placeholder" />
|
||||
<el-input
|
||||
v-model="form[configType][key]"
|
||||
:type="isPasswordField(key) ? (passwordVisible[key] ? 'text' : 'password') : 'text'"
|
||||
:placeholder="item.placeholder"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon
|
||||
:class="['eye-icon', { 'is-active': passwordVisible[key] }]"
|
||||
@click="togglePasswordVisibility(key)"
|
||||
>
|
||||
<i class="el-icon-view" v-if="passwordVisible[key]"></i>
|
||||
<i class="el-icon-view-off" v-else></i>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<h4 class="title-decoration-1 mb-16">回调地址</h4>
|
||||
<el-form-item label="URL" prop="callback_url">
|
||||
<el-input v-model="form[configType].callback_url" placeholder="请输入回调地址" />
|
||||
<p class="instruction-text" v-if="configType === 'wechat'">
|
||||
复制链接填入到
|
||||
<a
|
||||
href="https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev"
|
||||
target="_blank"
|
||||
>微信公众平台</a
|
||||
>-设置与开发-基本配置-服务器配置的 "服务器地址URL" 中
|
||||
</p>
|
||||
<p class="instruction-text" v-if="configType === 'dingtalk'">
|
||||
复制链接填入到
|
||||
<a
|
||||
href="https://open-dev.dingtalk.com/fe/app?hash=%23%2Fcorp%2Fapp#/corp/app"
|
||||
target="_blank"
|
||||
>钉钉开放平台</a
|
||||
>-机器人页面，设置 "消息接收模式" 为 HTTP模式 ，并把下面URL填写到"消息接收地址"中
|
||||
</p>
|
||||
<p class="instruction-text" v-if="configType === 'wecom'">
|
||||
复制链接填入到
|
||||
<a href="https://work.weixin.qq.com/wework_admin/frame#apps" target="_blank"
|
||||
>企业微信后台</a
|
||||
>-应用管理-自建-创建的应用-接受消息-设置 API 接收的 "URL" 中
|
||||
</p>
|
||||
<p class="instruction-text" v-if="configType === 'feishu'">
|
||||
复制链接填入到
|
||||
<a href="https://open.feishu.cn/app/" target="_blank">飞书开放平台</a
|
||||
>-事件与回调-事件配置-配置订阅方式的 "请求地址" 中
|
||||
</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<el-button @click="closeDrawer">取消</el-button>
|
||||
|
|
@ -67,27 +116,23 @@ const rules = reactive({
|
|||
app_id: [{ required: true, message: '请输入开发者ID', trigger: 'blur' }],
|
||||
app_secret: [{ required: true, message: '请输入开发者密码', trigger: 'blur' }],
|
||||
token: [{ required: true, message: '请输入令牌', trigger: 'blur' }],
|
||||
encoding_aes_key: [{ required: true, message: '请输入消息加解密密钥', trigger: 'blur' }],
|
||||
callback_url: [{ required: true, message: '请输入回调地址', trigger: 'blur' }]
|
||||
encoding_aes_key: [{ required: true, message: '请输入消息加解密密钥', trigger: 'blur' }]
|
||||
},
|
||||
dingtalk: {
|
||||
client_id: [{ required: true, message: '请输入Client ID', trigger: 'blur' }],
|
||||
client_secret: [{ required: true, message: '请输入Client Secret', trigger: 'blur' }],
|
||||
callback_url: [{ required: true, message: '请输入回调地址', trigger: 'blur' }]
|
||||
client_secret: [{ required: true, message: '请输入Client Secret', trigger: 'blur' }]
|
||||
},
|
||||
wecom: {
|
||||
app_id: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
|
||||
agent_id: [{ required: true, message: '请输入Agent ID', trigger: 'blur' }],
|
||||
secret: [{ required: true, message: '请输入Secret', trigger: 'blur' }],
|
||||
token: [{ required: true, message: '请输入Token', trigger: 'blur' }],
|
||||
encoding_aes_key: [{ required: true, message: '请输入EncodingAESKey', trigger: 'blur' }],
|
||||
callback_url: [{ required: true, message: '请输入回调地址', trigger: 'blur' }]
|
||||
encoding_aes_key: [{ required: true, message: '请输入EncodingAESKey', trigger: 'blur' }]
|
||||
},
|
||||
feishu: {
|
||||
app_id: [{ required: true, message: '请输入App ID', trigger: 'blur' }],
|
||||
app_secret: [{ required: true, message: '请输入App Secret', trigger: 'blur' }],
|
||||
verification_token: [{ required: false, message: '请输入Verification Token', trigger: 'blur' }],
|
||||
callback_url: [{ required: true, message: '请输入回调地址', trigger: 'blur' }]
|
||||
verification_token: [{ required: false, message: '请输入Verification Token', trigger: 'blur' }]
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -96,45 +141,71 @@ const configFields = {
|
|||
app_id: { label: '开发者ID (APP ID)', placeholder: '请输入开发者ID' },
|
||||
app_secret: { label: '开发者密码 (APP Secret)', placeholder: '请输入开发者密码' },
|
||||
token: { label: '令牌 (Token)', placeholder: '请输入令牌' },
|
||||
encoding_aes_key: { label: '消息加解密密钥', placeholder: '请输入消息加解密密钥' },
|
||||
callback_url: { label: '回调地址', placeholder: '请输入回调地址' }
|
||||
encoding_aes_key: { label: '消息加解密密钥', placeholder: '请输入消息加解密密钥' }
|
||||
},
|
||||
dingtalk: {
|
||||
client_id: { label: 'Client ID', placeholder: '' },
|
||||
client_secret: { label: 'Client Secret', placeholder: '' },
|
||||
callback_url: { label: '回调地址', placeholder: '' }
|
||||
client_secret: { label: 'Client Secret', placeholder: '' }
|
||||
},
|
||||
wecom: {
|
||||
app_id: { label: '企业ID', placeholder: '' },
|
||||
agent_id: { label: 'Agent ID', placeholder: '' },
|
||||
secret: { label: 'Secret', placeholder: '' },
|
||||
token: { label: 'Token', placeholder: '' },
|
||||
encoding_aes_key: { label: 'EncodingAESKey', placeholder: '' },
|
||||
callback_url: { label: '回调地址', placeholder: '' }
|
||||
encoding_aes_key: { label: 'EncodingAESKey', placeholder: '' }
|
||||
},
|
||||
feishu: {
|
||||
app_id: { label: 'App ID', placeholder: '' },
|
||||
app_secret: { label: 'App Secret', placeholder: '' },
|
||||
verification_token: { label: 'Verification Token', placeholder: '' },
|
||||
callback_url: { label: '回调地址', placeholder: '' }
|
||||
verification_token: { label: 'Verification Token', placeholder: '' }
|
||||
}
|
||||
}
|
||||
|
||||
const drawerTitle = computed(() => {
|
||||
const titles = {
|
||||
wechat: '公众号配置',
|
||||
dingtalk: '钉钉应用配置',
|
||||
wecom: '企业微信应用配置',
|
||||
feishu: '飞书配置'
|
||||
}
|
||||
return titles[configType.value] || ''
|
||||
})
|
||||
const passwordFields = new Set(['app_secret', 'client_secret', 'secret'])
|
||||
|
||||
const drawerTitle = computed(
|
||||
() =>
|
||||
({
|
||||
wechat: '公众号配置',
|
||||
dingtalk: '钉钉应用配置',
|
||||
wecom: '企业微信应用配置',
|
||||
feishu: '飞书配置'
|
||||
})[configType.value]
|
||||
)
|
||||
|
||||
const infoTitle = computed(
|
||||
() =>
|
||||
({
|
||||
wechat: '微信公众号应用信息',
|
||||
dingtalk: '钉钉应用信息',
|
||||
wecom: '企业微信应用信息',
|
||||
feishu: '飞书应用信息'
|
||||
})[configType.value]
|
||||
)
|
||||
|
||||
const passwordVisible = reactive<Record<string, boolean>>(
|
||||
Object.keys(configFields[configType.value]).reduce(
|
||||
(acc, key) => {
|
||||
if (passwordFields.has(key)) {
|
||||
acc[key] = false
|
||||
}
|
||||
return acc
|
||||
},
|
||||
{} as Record<string, boolean>
|
||||
)
|
||||
)
|
||||
|
||||
const isPasswordField = (key: string) => passwordFields.has(key)
|
||||
|
||||
const togglePasswordVisibility = (key: string) => {
|
||||
passwordVisible[key] = !passwordVisible[key]
|
||||
}
|
||||
|
||||
const closeDrawer = () => {
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
const submit = async () => {
|
||||
if (loading.value) return
|
||||
|
||||
formRef.value?.validate(async (valid) => {
|
||||
|
|
@ -144,7 +215,7 @@ const submit = () => {
|
|||
MsgSuccess('配置保存成功')
|
||||
closeDrawer()
|
||||
emit('refresh')
|
||||
} catch (error) {
|
||||
} catch {
|
||||
MsgError('保存失败，请检查输入或稍后再试')
|
||||
}
|
||||
}
|
||||
|
|
@ -161,12 +232,13 @@ const open = async (id: string, type: 'wechat' | 'dingtalk' | 'wecom' | 'feishu'
|
|||
const res = await applicationApi.getPlatformConfig(id, type)
|
||||
if (res.data) {
|
||||
form[configType.value] = res.data
|
||||
dataLoaded.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
dataLoaded.value = true
|
||||
} catch {
|
||||
MsgError('加载配置失败，请检查输入或稍后再试')
|
||||
} finally {
|
||||
loading.value = false
|
||||
// form[configType.value].callback_url = `${window.location.origin}/${type}/${id}`
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,5 +246,30 @@ defineExpose({ open })
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* 可以在这里添加自定义样式 */
|
||||
.eye-icon {
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.eye-icon.is-active {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.instruction-text {
|
||||
font-family:
|
||||
PingFang SC,
|
||||
sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.instruction-text a {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.instruction-text a:hover {
|
||||
color: #66b1ff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue