feat: add WeCom Bot configuration support in application settings

Author: wxg0103

ui/src/locales/lang/en-US/views/application.ts

@@ -161,6 +161,8 @@ export default {
     title: 'APP Access',
     wecom: 'WeCom',
     wecomTip: 'Create WeCom intelligent APP',
+    wecomBot: 'WeCom Bot',
+    wecomBotTip: 'Create WeCom intelligent Bot',
     dingtalk: 'DingTalk',
     dingtalkTip: 'Create DingTalk intelligent APP',
     wechat: 'WeChat',
@@ -208,6 +210,10 @@ export default {
       urlInfo:
         '-Settings and Development-Basic Configuration-"Server Address URL" in server configuration',
     },
+    wecomBotSetting: {
+      title: 'WeCom Bot Configuration',
+      urlInfo: '-Security and Management-Management Tools-Intelligent Bots-API Mode',
+    },
     larkSetting: {
       title: 'Lark Configuration',
       appIdPlaceholder: 'Please enter APP ID',

ui/src/locales/lang/zh-CN/views/application.ts

@@ -150,6 +150,8 @@ export default {
     title: '应用接入',
     wecom: '企业微信应用',
     wecomTip: '打造企业微信智能应用',
+    wecomBot: '企业微信智能机器人',
+    wecomBotTip: '打造企业微信智能机器人应用',
     dingtalk: '钉钉应用',
     dingtalkTip: '打造钉钉智能应用',
     wechat: '公众号',
@@ -176,6 +178,10 @@ export default {
       authenticationSuccessful: '认证成功',
       urlInfo: '-应用管理-自建-创建的应用-接收消息-设置 API 接收的 "URL" 中',
     },
+    wecomBotSetting: {
+      title: '企业微信应用配置',
+      urlInfo: '-安全与管理-管理工具-智能机器人- API 模式创建的 "URL" 中',
+    },
     dingtalkSetting: {
       title: '钉钉应用配置',
       clientIdPlaceholder: '请输入Client ID',

ui/src/locales/lang/zh-Hant/views/application.ts

@@ -153,6 +153,8 @@ export default {
     wecomTip: '打造企業微信智慧應用',
     dingtalk: '釘釘應用',
     dingtalkTip: '打造釘釘智慧應用',
+    wecomBot: '企業微信智能機器人',
+    wecomBotTip: '打造企業微信智能機器人',
     wechat: '公眾號',
     wechatTip: '打造公眾號智慧應用',
     lark: '飛書應用',
@@ -201,6 +203,10 @@ export default {
       appSecretPlaceholder: '請輸入App Secret',
       verificationTokenPlaceholder: '請輸入Verification Token',
       urlInfo: '-事件與回呼-事件配置-配置訂閱方式的 "請求位址" 中',
+    },
+      wecomBotSetting: {
+      title: '企業微信機器人配置',
+      urlInfo: '-安全與管理-管理工具-智能機器人- API 模式建立的 "URL" 中',
     },
     slackSetting: {
       title: 'Slack 應用配置',

ui/src/views/application/ApplicationAccess.vue

@@ -109,6 +109,14 @@ const platforms = reactive([
     isActive: false,
     exists: false,
   },
+    {
+    key: 'wecomBot',
+    logoSrc: new URL(`../../assets/logo/logo_wechat-work.svg`, import.meta.url).href,
+    name: t('views.application.applicationAccess.wecomBot'),
+    description: t('views.application.applicationAccess.wecomBotTip'),
+    isActive: false,
+    exists: false,
+  },
 ])
 
 const AccessSettingDrawerRef = ref()

ui/src/views/application/component/AccessSettingDrawer.vue

@@ -30,9 +30,9 @@
       </template>
       <div v-if="configType === 'wechat'" class="flex align-center mb-16">
         <span class="lighter mr-8">{{
-          $t('views.application.applicationAccess.wecomSetting.authenticationSuccessful')
-        }}</span>
-        <el-switch v-if="configType === 'wechat'" v-model="form[configType].is_certification" />
+            $t('views.application.applicationAccess.wecomSetting.authenticationSuccessful')
+          }}</span>
+        <el-switch v-if="configType === 'wechat'" v-model="form[configType].is_certification"/>
       </div>
 
       <h4 class="title-decoration-1 mb-16">
@@ -56,7 +56,7 @@
             class="color-primary"
             href="https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev"
             target="_blank"
-            >{{ $t('views.application.applicationAccess.wechatPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.wechatPlatform') }}</a
           >{{ $t('views.application.applicationAccess.wechatSetting.urlInfo') }}
         </el-text>
         <el-text type="info" v-if="configType === 'dingtalk'">
@@ -65,7 +65,7 @@
             class="color-primary"
             href="https://open-dev.dingtalk.com/fe/app?hash=%23%2Fcorp%2Fapp#/corp/app"
             target="_blank"
-            >{{ $t('views.application.applicationAccess.dingtalkPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.dingtalkPlatform') }}</a
           >{{ $t('views.application.applicationAccess.dingtalkSetting.urlInfo') }}
         </el-text>
         <el-text type="info" v-if="configType === 'wecom'">
@@ -74,14 +74,14 @@
             class="color-primary"
             href="https://work.weixin.qq.com/wework_admin/frame#apps"
             target="_blank"
-            >{{ $t('views.application.applicationAccess.wecomPlatform') }}</a
+          >{{ $t('views.application.applicationAccess.wecomPlatform') }}</a
           >{{ $t('views.application.applicationAccess.wecomSetting.urlInfo') }}
         </el-text>
         <el-text type="info" v-if="configType === 'lark'">
           {{ $t('views.application.applicationAccess.copyUrl') }}
           <a class="primary" href="https://open.feishu.cn/app/" target="_blank">{{
-            $t('views.application.applicationAccess.larkPlatform')
-          }}</a
+              $t('views.application.applicationAccess.larkPlatform')
+            }}</a
           >{{ $t('views.application.applicationAccess.larkSetting.urlInfo') }}
         </el-text>
       </el-form-item>
@@ -99,19 +99,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from 'vue'
-import type { FormInstance } from 'element-plus'
-import { useRoute } from 'vue-router'
-import { MsgError, MsgSuccess } from '@/utils/message'
-import { copyClick } from '@/utils/clipboard'
-import { t } from '@/locales'
-import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-type PlatformType = 'wechat' | 'dingtalk' | 'wecom' | 'lark' | 'slack'
+import {ref, reactive, computed} from 'vue'
+import type {FormInstance} from 'element-plus'
+import {useRoute} from 'vue-router'
+import {MsgError, MsgSuccess} from '@/utils/message'
+import {copyClick} from '@/utils/clipboard'
+import {t} from '@/locales'
+import {loadSharedApi} from '@/utils/dynamics-api/shared-api'
+
+type PlatformType = 'wechat' | 'dingtalk' | 'wecom' | 'lark' | 'slack' | 'wecomBot'
 
 const route = useRoute()
 
 const {
-  params: { id },
+  params: {id},
 } = route as any
 const apiType = computed(() => {
   if (route.path.includes('resource-management')) {
@@ -136,7 +137,7 @@ const form = reactive<any>({
     is_certification: false,
     callback_url: '',
   },
-  dingtalk: { client_id: '', client_secret: '', callback_url: '' },
+  dingtalk: {client_id: '', client_secret: '', callback_url: ''},
   wecom: {
     app_id: '',
     agent_id: '',
@@ -145,8 +146,13 @@ const form = reactive<any>({
     encoding_aes_key: '',
     callback_url: '',
   },
-  lark: { app_id: '', app_secret: '', verification_token: '', callback_url: '' },
-  slack: { signing_secret: '', bot_user_token: '', callback_url: '' },
+  lark: {app_id: '', app_secret: '', verification_token: '', callback_url: ''},
+  slack: {signing_secret: '', bot_user_token: '', callback_url: ''},
+  wecomBot: {
+    token: '',
+    encoding_aes_key: '',
+    callback_url: '',
+  }
 })
 
 const rules = reactive<{ [propName: string]: any }>({
@@ -272,6 +278,22 @@ const rules = reactive<{ [propName: string]: any }>({
       },
     ],
   },
+  wecomBot: {
+    token: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.tokenPlaceholder'),
+        trigger: 'blur',
+      },
+    ],
+    encoding_aes_key: [
+      {
+        required: true,
+        message: t('views.application.applicationAccess.wecomSetting.encodingAesKeyPlaceholder'),
+        trigger: 'blur',
+      },
+    ],
+  },
 })
 
 const configFields: { [propName: string]: { [propName: string]: any } } = {
@@ -284,34 +306,38 @@ const configFields: { [propName: string]: { [propName: string]: any } } = {
       label: t('views.application.applicationAccess.wechatSetting.appSecret'),
       placeholder: '',
     },
-    token: { label: t('views.application.applicationAccess.wechatSetting.token'), placeholder: '' },
+    token: {label: t('views.application.applicationAccess.wechatSetting.token'), placeholder: ''},
     encoding_aes_key: {
       label: t('views.application.applicationAccess.wechatSetting.aesKey'),
       placeholder: '',
     },
   },
   dingtalk: {
-    client_id: { label: 'Client ID', placeholder: '' },
-    client_secret: { label: 'Client Secret', placeholder: '' },
+    client_id: {label: 'Client ID', placeholder: ''},
+    client_secret: {label: 'Client Secret', placeholder: ''},
   },
   wecom: {
     app_id: {
       label: t('views.application.applicationAccess.wecomSetting.cropId'),
       placeholder: '',
     },
-    agent_id: { label: 'Agent ID', placeholder: '' },
-    secret: { label: 'Secret', placeholder: '' },
-    token: { label: 'Token', placeholder: '' },
-    encoding_aes_key: { label: 'EncodingAESKey', placeholder: '' },
+    agent_id: {label: 'Agent ID', placeholder: ''},
+    secret: {label: 'Secret', placeholder: ''},
+    token: {label: 'Token', placeholder: ''},
+    encoding_aes_key: {label: 'EncodingAESKey', placeholder: ''},
+  },
+  wecomBot: {
+    token: {label: 'Token', placeholder: ''},
+    encoding_aes_key: {label: 'EncodingAESKey', placeholder: ''},
   },
   lark: {
-    app_id: { label: 'App ID', placeholder: '' },
-    app_secret: { label: 'App Secret', placeholder: '' },
-    verification_token: { label: 'Verification Token', placeholder: '' },
+    app_id: {label: 'App ID', placeholder: ''},
+    app_secret: {label: 'App Secret', placeholder: ''},
+    verification_token: {label: 'Verification Token', placeholder: ''},
   },
   slack: {
-    signing_secret: { label: 'Signing Secret', placeholder: '' },
-    bot_user_token: { label: 'Bot User Token', placeholder: '' },
+    signing_secret: {label: 'Signing Secret', placeholder: ''},
+    bot_user_token: {label: 'Bot User Token', placeholder: ''},
   },
 }
 
@@ -331,6 +357,7 @@ const drawerTitle = computed(
       wecom: t('views.application.applicationAccess.wecomSetting.title'),
       lark: t('views.application.applicationAccess.larkSetting.title'),
       slack: t('views.application.applicationAccess.slackSetting.title'),
+      wecomBot: t('views.application.applicationAccess.wecomBotSetting.title'),
     })[configType.value],
 )
 
@@ -342,6 +369,7 @@ const infoTitle = computed(
       wecom: t('views.applicationOverview.appInfo.header'),
       lark: t('views.applicationOverview.appInfo.header'),
       slack: t('views.applicationOverview.appInfo.header'),
+      wecomBot: t('views.applicationOverview.appInfo.header'),
     })[configType.value],
 )
 
@@ -369,7 +397,7 @@ const submit = async () => {
   formRef.value?.validate(async (valid) => {
     if (valid) {
       try {
-        loadSharedApi({ type: 'application', systemType: apiType.value })
+        loadSharedApi({type: 'application', systemType: apiType.value})
           .updatePlatformConfig(id, configType.value, form[configType.value], loading)
           .then(() => {
             MsgSuccess(t('common.saveSuccess'))
@@ -407,5 +435,5 @@ const open = async (id: string, type: PlatformType) => {
   }
 }
 
-defineExpose({ open })
+defineExpose({open})
 </script>