Skip to content

Commit

Permalink
refactor: 优化页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@wxg0103
wxg0103 committed Sep 12, 2024
1 parent 82b7e8d commit 7454b51
Showing 1 changed file with 129 additions and 32 deletions.
161 changes: 129 additions & 32 deletions ui/src/views/application/component/AccessSettingDrawer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<h4>{{ drawerTitle }}</h4>
</div>
</template>

<el-form
v-if="dataLoaded"
ref="formRef"
Expand All @@ -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>
Expand Down Expand Up @@ -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' }]
}
})
Expand All @@ -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) => {
Expand All @@ -144,7 +215,7 @@ const submit = () => {
MsgSuccess('配置保存成功')
closeDrawer()
emit('refresh')
} catch (error) {
} catch {
MsgError('保存失败，请检查输入或稍后再试')
}
}
Expand All @@ -161,18 +232,44 @@ 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}`
}
}
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>

0 comments on commit 7454b51

Please sign in to comment.