From 2e69c815206e6d37ce25b136c1cd868f050696f6 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Thu, 8 Jan 2026 13:42:43 +0800
Subject: [PATCH] perf: Platform card page

---
 frontend/src/i18n/en.json                     |   3 +-
 frontend/src/i18n/ko-KR.json                  |   3 +-
 frontend/src/i18n/zh-CN.json                  |   3 +-
 frontend/src/views/login/xpack/QrTab.vue      |  10 +-
 .../{wecom/WecomEdit.vue => PlatformForm.vue} | 189 ++++++------
 .../{wecom/WecomInfo.vue => PlatformInfo.vue} | 125 ++++----
 .../system/platform/common/SettingTemplate.ts | 138 +++++++++
 .../system/platform/dingtalk/DingtalkEdit.vue | 280 ------------------
 .../system/platform/dingtalk/DingtalkInfo.vue | 246 ---------------
 frontend/src/views/system/platform/index.vue  |  44 ++-
 .../views/system/platform/lark/LarkEdit.vue   | 262 ----------------
 .../views/system/platform/lark/LarkInfo.vue   | 240 ---------------
 .../platform/larksuite/LarksuiteEdit.vue      | 262 ----------------
 .../platform/larksuite/LarksuiteInfo.vue      | 241 ---------------
 14 files changed, 333 insertions(+), 1713 deletions(-)
 rename frontend/src/views/system/platform/{wecom/WecomEdit.vue => PlatformForm.vue} (60%)
 rename frontend/src/views/system/platform/{wecom/WecomInfo.vue => PlatformInfo.vue} (69%)
 delete mode 100644 frontend/src/views/system/platform/dingtalk/DingtalkEdit.vue
 delete mode 100644 frontend/src/views/system/platform/dingtalk/DingtalkInfo.vue
 delete mode 100644 frontend/src/views/system/platform/lark/LarkEdit.vue
 delete mode 100644 frontend/src/views/system/platform/lark/LarkInfo.vue
 delete mode 100644 frontend/src/views/system/platform/larksuite/LarksuiteEdit.vue
 delete mode 100644 frontend/src/views/system/platform/larksuite/LarksuiteInfo.vue

diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 1abf829a..7c15bae5 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -447,7 +447,8 @@
     "enable": "Enabled",
     "disable": "Disabled",
     "local_creation": "Local",
-    "feishu": "Feishu",
+    "lark": "Lark",
+    "larksuite": "Larksuite",
     "dingtalk": "DingTalk",
     "wechat_for_business": "WeChat for business",
     "1240_results": "{msg} results",
diff --git a/frontend/src/i18n/ko-KR.json b/frontend/src/i18n/ko-KR.json
index 81df893a..9d389ead 100644
--- a/frontend/src/i18n/ko-KR.json
+++ b/frontend/src/i18n/ko-KR.json
@@ -447,7 +447,8 @@
     "enable": "활성화",
     "disable": "비활성화",
     "local_creation": "로컬 생성",
-    "feishu": "페이슈",
+    "lark": "페이슈",
+    "larksuite": "페이수 (Pei-su)",
     "dingtalk": "딩톡",
     "wechat_for_business": "기업용 위챗",
     "1240_results": "{msg}개 결과 ",
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 48f0567b..d3a9b69f 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -447,7 +447,8 @@
     "enable": "启用",
     "disable": "禁用",
     "local_creation": "本地创建",
-    "feishu": "飞书",
+    "lark": "飞书",
+    "larksuite": "国际飞书",
     "dingtalk": "钉钉",
     "wechat_for_business": "企业微信",
     "1240_results": "{msg} 个结果 ",
diff --git a/frontend/src/views/login/xpack/QrTab.vue b/frontend/src/views/login/xpack/QrTab.vue
index 261d5343..77e3a9c0 100644
--- a/frontend/src/views/login/xpack/QrTab.vue
+++ b/frontend/src/views/login/xpack/QrTab.vue
@@ -6,12 +6,8 @@
       name="wecom"
     ></el-tab-pane>
     <el-tab-pane v-if="props.dingtalk" :label="t('user.dingtalk')" name="dingtalk"></el-tab-pane>
-    <el-tab-pane v-if="props.lark" :label="t('user.feishu')" name="lark"></el-tab-pane>
-    <el-tab-pane
-      v-if="props.larksuite"
-      :label="t('system.international_feishu')"
-      name="larksuite"
-    ></el-tab-pane>
+    <el-tab-pane v-if="props.lark" :label="t('user.lark')" name="lark"></el-tab-pane>
+    <el-tab-pane v-if="props.larksuite" :label="t('user.larksuite')" name="larksuite"></el-tab-pane>
   </el-tabs>
   <div v-if="activeName === 'wecom'" class="login-qrcode">
     <div class="title">
@@ -51,7 +47,7 @@
       <el-icon>
         <Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
       </el-icon>
-      {{ t('system.international_feishu') }}
+      {{ t('user.larksuite') }}
     </div>
     <div class="qrcode">
       <larksuite-qr v-if="activeName === 'larksuite'" />
diff --git a/frontend/src/views/system/platform/wecom/WecomEdit.vue b/frontend/src/views/system/platform/PlatformForm.vue
similarity index 60%
rename from frontend/src/views/system/platform/wecom/WecomEdit.vue
rename to frontend/src/views/system/platform/PlatformForm.vue
index b93488ee..74de4849 100644
--- a/frontend/src/views/system/platform/wecom/WecomEdit.vue
+++ b/frontend/src/views/system/platform/PlatformForm.vue
@@ -4,72 +4,50 @@ import { ElMessage, ElLoading } from 'element-plus-secondary'
 import { request } from '@/utils/request'
 import { useI18n } from 'vue-i18n'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
+import { settingMapping } from './common/SettingTemplate'
 const { t } = useI18n()
 const dialogVisible = ref(false)
 const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
-const wecomForm = ref<FormInstance>()
-interface WecomkForm {
-  corpid?: string
-  agent_id?: string
-  corpsecret?: string
-}
+const platformForm = ref<FormInstance>()
+
 const state = reactive({
-  form: reactive<WecomkForm>({
-    agent_id: '',
-    corpid: '',
-    corpsecret: '',
-  }),
+  form: reactive<any>({}),
+  settingList: [] as any[],
 })
 const origin = ref(6)
 const id = ref()
-const rule = reactive<FormRules>({
-  agent_id: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  corpid: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  corpsecret: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 100,
-      message: t('common.input_limit', [5, 100]),
-      trigger: 'blur',
-    },
-  ],
-})
-
+const rule = reactive<FormRules>({})
+const formTitle = ref('')
+const busiMapping = {
+  6: 'wecom',
+  7: 'dingtalk',
+  8: 'lark',
+  9: 'larksuite',
+} as any
+const initForm = (row: any) => {
+  state.settingList.forEach((item: any) => {
+    const key = item.realKey
+    rule[key] = [
+      {
+        required: true,
+        message: t('common.require'),
+        trigger: 'blur',
+      },
+      {
+        min: 5,
+        max: 255,
+        message: t('common.input_limit', [5, 255]),
+        trigger: 'blur',
+      },
+    ]
+    state.form[key] = row[key]
+  })
+}
 const edit = (row: any) => {
-  state.form = {
-    agent_id: row.agent_id,
-    corpid: row.corpid,
-    corpsecret: row.corpsecret,
-  }
+  state.settingList = settingMapping[row.type]
+  initForm(row)
+  origin.value = row.type
+  formTitle.value = row.title
   if (row?.id) {
     id.value = row.id
   }
@@ -86,7 +64,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       const data = {
         id: origin.value,
         type: origin.value,
-        name: 'wecom',
+        name: busiMapping[origin.value],
         config: JSON.stringify(param),
       }
       const method = id.value
@@ -122,10 +100,15 @@ const resetForm = (formEl: FormInstance | undefined) => {
   formEl.resetFields()
   dialogVisible.value = false
   id.value = null
+  origin.value = 6
+  formTitle.value = ''
+  state.settingList = []
+  const keys = Object.keys(rule)
+  keys.forEach((key: string) => delete rule[key])
 }
 
 const reset = () => {
-  resetForm(wecomForm.value)
+  resetForm(platformForm.value)
 }
 
 const showLoading = () => {
@@ -137,28 +120,34 @@ const closeLoading = () => {
   loadingInstance.value?.close()
 }
 
-const validate = () => {
-  const url = '/system/authentication/status'
-  const config_data = state.form
-  const data = {
-    type: origin.value,
-    name: 'wecom',
-    config: JSON.stringify(config_data),
-  }
-  showLoading()
-  request
-    .patch(url, data)
-    .then((res) => {
-      if (res) {
-        ElMessage.success(t('ds.connection_success'))
-      } else {
-        ElMessage.error(t('ds.connection_failed'))
-      }
-    })
-    .finally(() => {
-      closeLoading()
-      emits('saved')
-    })
+const validate = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (!valid) {
+      return
+    }
+    const url = '/system/authentication/status'
+    const config_data = state.form
+    const data = {
+      type: origin.value,
+      name: busiMapping[origin.value],
+      config: JSON.stringify(config_data),
+    }
+    showLoading()
+    request
+      .patch(url, data)
+      .then((res) => {
+        if (res) {
+          ElMessage.success(t('ds.connection_success'))
+        } else {
+          ElMessage.error(t('ds.connection_failed'))
+        }
+      })
+      .finally(() => {
+        closeLoading()
+        emits('saved')
+      })
+  })
 }
 
 defineExpose({
@@ -169,46 +158,46 @@ defineExpose({
 <template>
   <el-drawer
     v-model="dialogVisible"
-    :title="t('user.wechat_for_business')"
+    :title="formTitle"
     modal-class="platform-info-drawer"
     size="600px"
     direction="rtl"
   >
     <el-form
-      ref="wecomForm"
+      ref="platformForm"
       require-asterisk-position="right"
       :model="state.form"
       :rules="rule"
       label-width="80px"
       label-position="top"
     >
-      <el-form-item label="Corpid" prop="corpid">
-        <el-input v-model="state.form.corpid" :placeholder="t('common.please_input')" />
-      </el-form-item>
-
-      <el-form-item label="AgentId" prop="agent_id">
-        <el-input v-model="state.form.agent_id" :placeholder="t('common.please_input')" />
-      </el-form-item>
-
-      <el-form-item label="APP Secret" prop="corpsecret">
+      <el-form-item
+        v-for="setting in state.settingList"
+        :key="setting.realKey"
+        :label="setting.pkey"
+        :prop="setting.realKey"
+      >
         <el-input
-          v-model="state.form.corpsecret"
+          v-if="setting.type === 'password'"
+          v-model="state.form[setting.realKey]"
           type="password"
           show-password
           :placeholder="t('common.please_input')"
         />
+        <el-input
+          v-else
+          v-model="state.form[setting.realKey]"
+          :placeholder="t('common.please_input')"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="resetForm(wecomForm)">{{ t('common.cancel') }}</el-button>
-        <el-button
-          :disabled="!state.form.corpid || !state.form.corpsecret || !state.form.agent_id"
-          @click="validate"
-        >
+        <el-button @click="resetForm(platformForm)">{{ t('common.cancel') }}</el-button>
+        <el-button @click="validate(platformForm)">
           {{ t('ds.check') }}
         </el-button>
-        <el-button type="primary" @click="submitForm(wecomForm)">
+        <el-button type="primary" @click="submitForm(platformForm)">
           {{ t('common.save') }}
         </el-button>
       </span>
diff --git a/frontend/src/views/system/platform/wecom/WecomInfo.vue b/frontend/src/views/system/platform/PlatformInfo.vue
similarity index 69%
rename from frontend/src/views/system/platform/wecom/WecomInfo.vue
rename to frontend/src/views/system/platform/PlatformInfo.vue
index f53ed258..ecefe258 100644
--- a/frontend/src/views/system/platform/wecom/WecomInfo.vue
+++ b/frontend/src/views/system/platform/PlatformInfo.vue
@@ -4,9 +4,9 @@
       <div class="platform-setting-head-left">
         <div class="lead-left-icon">
           <el-icon>
-            <Icon name="logo_wechat-work"><logo_wechatWork class="svg-icon" /></Icon>
+            <Icon name="logo_wechat-work"><component :is="state.cardIcon" class="svg-icon" /></Icon>
           </el-icon>
-          <span>{{ t('user.wechat_for_business') }}</span>
+          <span>{{ cardTitle }}</span>
         </div>
         <div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
           <span>{{
@@ -45,79 +45,89 @@
   <InfoTemplate
     v-if="existInfo"
     class="platform-setting-main"
-    :copy-list="copyList"
-    setting-key="wecom"
-    setting-title=""
+    :copy-list="state.copyList"
     :hide-head="true"
-    :setting-data="settingList"
+    :setting-data="state.settingList"
     @edit="edit"
   />
   <div v-if="existInfo" class="platform-foot-container">
     <el-button type="primary" @click="edit">
       {{ t('datasource.edit') }}
     </el-button>
-    <el-button secondary :disabled="!info.corpid || !info.corpsecret" @click="validate">{{
-      t('ds.check')
-    }}</el-button>
+    <el-button secondary :disabled="!formValid" @click="validate">{{ t('ds.check') }}</el-button>
   </div>
-  <wecom-edit ref="editor" @saved="search" />
+  <platform-form ref="editor" @saved="search" />
 </template>
 
 <script lang="ts" setup>
-import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
-import { ref, reactive } from 'vue'
-import InfoTemplate from '../common/InfoTemplate.vue'
-import WecomEdit from './WecomEdit.vue'
+import { ref, type PropType, watch, reactive } from 'vue'
+import InfoTemplate from './common/InfoTemplate.vue'
+import PlatformForm from './PlatformForm.vue'
 import { request } from '@/utils/request'
 import { useI18n } from 'vue-i18n'
 import { ElMessage } from 'element-plus-secondary'
+import { getPlatformCardConfig, type PlatformCard } from './common/SettingTemplate'
 const { t } = useI18n()
+
+const props = defineProps({
+  cardInfo: {
+    type: Object as PropType<PlatformCard>,
+    required: true,
+    default: () =>
+      ({
+        type: 6,
+        name: 'wecom',
+        config: {},
+        enable: false,
+        valid: false,
+      }) as PlatformCard,
+  },
+})
+
+const info = ref({}) as any
+const state = reactive({
+  settingList: [] as any[],
+  copyList: [] as string[],
+  cardIcon: null,
+})
+
 const existInfo = ref(false)
 const editor = ref()
 const origin = ref(6)
-const copyList = ['CorpId', 'APP Secret']
-const settingList = reactive([
-  {
-    pkey: 'CorpId',
-    pval: '',
-    type: 'text',
-    sort: 1,
-  },
-  {
-    pkey: 'AgentId',
-    pval: '',
-    type: 'text',
-    sort: 2,
-  },
-  {
-    pkey: 'APP Secret',
-    pval: '',
-    type: 'pwd',
-    sort: 3,
+
+const cardTitle = ref('')
+const formValid = ref(false)
+watch(
+  () => props.cardInfo,
+  () => {
+    const configData: any = props.cardInfo.config
+    configData['id'] = props.cardInfo.id
+    configData['enable'] = !!props.cardInfo.enable
+    configData['valid'] = !!props.cardInfo.valid
+    info.value = configData
+    origin.value = props.cardInfo.type
+
+    const platformConfig = getPlatformCardConfig(props.cardInfo.type)
+    const list = [...platformConfig.settingList]
+    list.forEach((item) => {
+      item['pval'] = info.value[item.realKey] || '-'
+      // delete item.realKey
+    })
+    state.settingList = list
+
+    existInfo.value = !!props.cardInfo.id
+    cardTitle.value = t(platformConfig.title)
+
+    state.copyList = platformConfig.copyField
+    state.cardIcon = platformConfig.icon
+
+    formValid.value = list.every((item: any) => !!info.value[item.realKey])
   },
-])
-const info = ref({}) as any
-const mappingArray = ['corpid', 'agent_id', 'corpsecret', 'enable']
+  { immediate: true }
+)
+const emits = defineEmits(['saved'])
 const search = () => {
-  const url = `system/authentication/${origin.value}`
-  request.get(url).then((res) => {
-    const config = res?.config
-    let configData = { enable: res?.enable, valid: res?.valid } as any
-    if (config) {
-      const configObj = JSON.parse(config)
-      Object.assign(configData, configObj)
-    }
-    info.value = configData
-    if (res?.id) {
-      info.value['id'] = res.id
-    }
-    existInfo.value = info.value['agent_id']
-    for (let index = 0; index < settingList.length; index++) {
-      const element = settingList[index]
-      const key = mappingArray[index]
-      element['pval'] = configData[key] || '-'
-    }
-  })
+  emits('saved')
 }
 
 const switchEnableApi = (enable: any) => {
@@ -128,7 +138,8 @@ const switchEnableApi = (enable: any) => {
   })
 }
 const edit = () => {
-  editor?.value.edit(info.value)
+  const data = { ...{ type: origin.value, title: cardTitle.value }, ...info.value }
+  editor?.value.edit(data)
 }
 const validate = () => {
   if (info.value?.agent_id && info.value?.corpsecret) {
@@ -153,7 +164,7 @@ const validateHandler = () => {
       info.value.valid = false
     })
 }
-search()
+// search()
 </script>
 
 <style lang="less" scoped>
diff --git a/frontend/src/views/system/platform/common/SettingTemplate.ts b/frontend/src/views/system/platform/common/SettingTemplate.ts
index 00eae0f7..a6487b0b 100644
--- a/frontend/src/views/system/platform/common/SettingTemplate.ts
+++ b/frontend/src/views/system/platform/common/SettingTemplate.ts
@@ -1,3 +1,6 @@
+import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
+import logo_lark from '@/assets/svg/logo_lark.svg'
+import logo_wechatWork from '@/assets/svg/logo_wechat-work.svg'
 export interface SettingRecord {
   pkey: string
   pval: string
@@ -9,3 +12,138 @@ export interface ToolTipRecord {
   key: string
   val: string
 }
+
+export interface PlatformCard {
+  id?: number
+  type: number
+  name: string
+  config: object
+  enable: boolean
+  valid: boolean
+}
+
+export const settingMapping = {
+  6: [
+    {
+      realKey: 'corpid',
+      pkey: 'CorpId',
+      pval: '',
+      type: 'text',
+      sort: 1,
+    },
+    {
+      realKey: 'agent_id',
+      pkey: 'AgentId',
+      pval: '',
+      type: 'text',
+      sort: 2,
+    },
+    {
+      realKey: 'corpsecret',
+      pkey: 'APP Secret',
+      pval: '',
+      type: 'pwd',
+      sort: 3,
+    },
+  ],
+  7: [
+    {
+      realKey: 'corpid',
+      pkey: 'CorpId',
+      pval: '',
+      type: 'text',
+      sort: 1,
+    },
+    {
+      realKey: 'client_id',
+      pkey: 'APP Key',
+      pval: '',
+      type: 'text',
+      sort: 2,
+    },
+    {
+      realKey: 'client_secret',
+      pkey: 'APP Secret',
+      pval: '',
+      type: 'pwd',
+      sort: 3,
+    },
+  ],
+  8: [
+    {
+      realKey: 'corpid',
+      pkey: 'CorpId',
+      pval: '',
+      type: 'text',
+      sort: 1,
+    },
+    {
+      realKey: 'client_id',
+      pkey: 'APP Key',
+      pval: '',
+      type: 'text',
+      sort: 2,
+    },
+    {
+      realKey: 'client_secret',
+      pkey: 'APP Secret',
+      pval: '',
+      type: 'pwd',
+      sort: 3,
+    },
+  ],
+  9: [
+    {
+      realKey: 'corpid',
+      pkey: 'CorpId',
+      pval: '',
+      type: 'text',
+      sort: 1,
+    },
+    {
+      realKey: 'client_id',
+      pkey: 'APP Key',
+      pval: '',
+      type: 'text',
+      sort: 2,
+    },
+    {
+      realKey: 'client_secret',
+      pkey: 'APP Secret',
+      pval: '',
+      type: 'pwd',
+      sort: 3,
+    },
+  ],
+} as any
+
+export const cardMapping = {
+  6: {
+    title: 'user.wechat_for_business',
+    icon: logo_dingtalk,
+    settingList: settingMapping[6],
+    copyField: ['CorpId', 'APP Secret'],
+  },
+  7: {
+    title: 'user.dingtalk',
+    icon: logo_wechatWork,
+    settingList: settingMapping[7],
+    copyField: ['CorpId', 'APP Secret'],
+  },
+  8: {
+    title: 'user.lark',
+    icon: logo_lark,
+    settingList: settingMapping[8],
+    copyField: ['CorpId', 'APP Secret'],
+  },
+  9: {
+    title: 'user.larksuite',
+    icon: logo_lark,
+    settingList: settingMapping[9],
+    copyField: ['CorpId', 'APP Secret'],
+  },
+} as any
+
+export const getPlatformCardConfig = (origin: number) => {
+  return cardMapping[origin]
+}
diff --git a/frontend/src/views/system/platform/dingtalk/DingtalkEdit.vue b/frontend/src/views/system/platform/dingtalk/DingtalkEdit.vue
deleted file mode 100644
index 2507265e..00000000
--- a/frontend/src/views/system/platform/dingtalk/DingtalkEdit.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { ElMessage, ElLoading } from 'element-plus-secondary'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import type { FormInstance, FormRules } from 'element-plus-secondary'
-const { t } = useI18n()
-const dialogVisible = ref(false)
-const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
-const dingtalkForm = ref<FormInstance>()
-interface DingtalkForm {
-  agentId?: string
-  appKey?: string
-  appSecret?: string
-  callBack?: string
-  enable?: string
-  valid?: string
-}
-const state = reactive({
-  form: reactive<DingtalkForm>({
-    agentId: '',
-    appKey: '',
-    appSecret: '',
-    callBack: '',
-    enable: 'false',
-    valid: 'false',
-  }),
-})
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const validateUrl = (rule, value, callback) => {
-  const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
-  if (!reg.test(value)) {
-    callback(new Error(t('system.incorrect_please_re_enter')))
-  } else {
-    callback()
-  }
-}
-const rule = reactive<FormRules>({
-  agentId: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  appKey: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  appSecret: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 100,
-      message: t('common.input_limit', [5, 100]),
-      trigger: 'blur',
-    },
-  ],
-  callBack: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 10,
-      max: 100,
-      message: t('common.input_limit', [10, 100]),
-      trigger: 'blur',
-    },
-    { required: true, validator: validateUrl, trigger: 'blur' },
-  ],
-  enable: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-  valid: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-})
-
-const edit = (row: any) => {
-  state.form = {
-    agentId: row.agentId,
-    appKey: row.appKey,
-    appSecret: row.appSecret,
-    callBack: row.callBack,
-    enable: row.enable,
-    valid: row.valid,
-  }
-  dialogVisible.value = true
-}
-
-const emits = defineEmits(['saved'])
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      const param = { ...state.form }
-      const method = request.post('/dingtalk/create', param)
-      showLoading()
-      method
-        .then((res) => {
-          if (!res.msg) {
-            ElMessage.success(t('common.save_success'))
-            emits('saved')
-            reset()
-          }
-          closeLoading()
-        })
-        .catch(() => {
-          closeLoading()
-        })
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  dialogVisible.value = false
-}
-
-const reset = () => {
-  resetForm(dingtalkForm.value)
-}
-
-const showLoading = () => {
-  loadingInstance.value = ElLoading.service({
-    target: '.platform-info-drawer',
-  })
-}
-const closeLoading = () => {
-  loadingInstance.value?.close()
-}
-
-const validate = () => {
-  const url = '/dingtalk/validate'
-  const data = state.form
-  showLoading()
-  request
-    .post(url, data)
-    .then(() => {
-      state.form.valid = 'true'
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      state.form.enable = 'false'
-      state.form.valid = 'false'
-    })
-    .finally(() => {
-      closeLoading()
-      emits('saved')
-    })
-}
-
-defineExpose({
-  edit,
-})
-</script>
-
-<template>
-  <el-drawer
-    v-model="dialogVisible"
-    :title="t('system.dingtalk_settings')"
-    modal-class="platform-info-drawer"
-    size="600px"
-    direction="rtl"
-  >
-    <el-form
-      ref="dingtalkForm"
-      require-asterisk-position="right"
-      :model="state.form"
-      :rules="rule"
-      label-width="80px"
-      label-position="top"
-    >
-      <el-form-item label="AgentId" prop="agentId">
-        <el-input v-model="state.form.agentId" :placeholder="t('common.please_input')" />
-      </el-form-item>
-      <el-form-item label="APP Key" prop="appKey">
-        <el-input v-model="state.form.appKey" :placeholder="t('common.please_input')" />
-      </el-form-item>
-
-      <el-form-item label="APP Secret" prop="appSecret">
-        <el-input
-          v-model="state.form.appSecret"
-          type="password"
-          show-password
-          :placeholder="t('common.please_input')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('system.callback_domain_name')" prop="callBack">
-        <el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="resetForm(dingtalkForm)">{{ t('common.cancel') }}</el-button>
-        <el-button
-          :disabled="!state.form.appKey || !state.form.appSecret || !state.form.callBack"
-          @click="validate"
-        >
-          {{ t('commons.validate') }}
-        </el-button>
-        <el-button type="primary" @click="submitForm(dingtalkForm)">
-          {{ t('commons.save') }}
-        </el-button>
-      </span>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less">
-.platform-info-drawer {
-  .ed-drawer__footer {
-    height: 64px !important;
-    padding: 16px 24px !important;
-    .dialog-footer {
-      height: 32px;
-      line-height: 32px;
-    }
-  }
-  .ed-form-item__label {
-    line-height: 22px !important;
-    height: 22px !important;
-  }
-}
-</style>
-<style lang="less" scoped>
-.platform-info-drawer {
-  .ed-form-item {
-    margin-bottom: 16px;
-  }
-  .is-error {
-    margin-bottom: 40px !important;
-  }
-  .input-with-select {
-    .ed-input-group__prepend {
-      width: 72px;
-      background-color: #fff;
-      padding: 0 20px;
-      color: #1f2329;
-      text-align: center;
-      font-family: var(--de-custom_font, 'PingFang');
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px;
-    }
-  }
-}
-</style>
diff --git a/frontend/src/views/system/platform/dingtalk/DingtalkInfo.vue b/frontend/src/views/system/platform/dingtalk/DingtalkInfo.vue
deleted file mode 100644
index 8fde4eb7..00000000
--- a/frontend/src/views/system/platform/dingtalk/DingtalkInfo.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div class="platform-head-container" :class="{ 'just-head': !existInfo }">
-    <div class="platform-setting-head">
-      <div class="platform-setting-head-left">
-        <div class="lead-left-icon">
-          <el-icon>
-            <Icon name="logo_dingtalk"><logo_dingtalk class="svg-icon" /></Icon>
-          </el-icon>
-          <span>{{ t('user.dingtalk') }}</span>
-        </div>
-        <div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
-          <span>{{
-            info.valid ? t('datasource.valid') : info.appKey ? t('datasource.invalid') : ''
-          }}</span>
-        </div>
-      </div>
-      <div v-if="existInfo" class="platform-setting-head-right">
-        <span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
-        <el-switch
-          v-if="info.valid"
-          v-model="info.enable"
-          class="status-switch"
-          @change="switchEnableApi"
-        />
-        <el-tooltip
-          v-else
-          class="box-item"
-          effect="dark"
-          :content="t('platform.can_enable_it')"
-          placement="top"
-        >
-          <el-switch
-            v-model="info.enable"
-            disabled=""
-            class="status-switch"
-            @change="switchEnableApi"
-          />
-        </el-tooltip>
-      </div>
-      <div v-else class="platform-setting-head-right-btn">
-        <el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
-      </div>
-    </div>
-  </div>
-  <InfoTemplate
-    v-if="existInfo"
-    class="platform-setting-main"
-    :copy-list="copyList"
-    setting-key="dingtalk"
-    setting-title=""
-    :hide-head="true"
-    :setting-data="settingList"
-    @edit="edit"
-  />
-  <div v-if="existInfo" class="platform-foot-container">
-    <el-button type="primary" @click="edit">
-      {{ t('commons.edit') }}
-    </el-button>
-    <el-button
-      secondary
-      :disabled="!info.appKey || !info.appSecret || !info.callBack"
-      @click="validate"
-      >{{ t('commons.validate') }}</el-button
-    >
-  </div>
-  <dingtalk-edit ref="editor" @saved="search" />
-</template>
-
-<script lang="ts" setup>
-import logo_dingtalk from '@/assets/svg/logo_dingtalk.svg'
-import { ref, reactive } from 'vue'
-import InfoTemplate from '../common/InfoTemplate.vue'
-import DingtalkEdit from './DingtalkEdit.vue'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import { ElMessage } from 'element-plus-secondary'
-const existInfo = ref(false)
-const { t } = useI18n()
-const editor = ref()
-const copyList = ['APP Key', 'APP Secret']
-const settingList = reactive([
-  {
-    pkey: 'AgentId',
-    pval: 'smtp.exmail.qq.com',
-    type: 'text',
-    sort: 2,
-  },
-  {
-    pkey: 'APP Key',
-    pval: 'smtp.exmail.qq.com',
-    type: 'text',
-    sort: 3,
-  },
-  {
-    pkey: 'APP Secret',
-    pval: 'smtp.exmail.qq.com',
-    type: 'pwd',
-    sort: 4,
-  },
-  {
-    pkey: t('system.callback_domain_name'),
-    pval: 'https://de.fit2cloud.com',
-    type: 'text',
-    sort: 5,
-  },
-])
-const info = ref({}) as any
-const mappingArray = ['agentId', 'appKey', 'appSecret', 'callBack', 'enable']
-const search = () => {
-  const url = '/dingtalk/info'
-  request.get(url).then((res) => {
-    info.value = res.data
-    existInfo.value = info.value['agentId']
-    for (let index = 0; index < settingList.length; index++) {
-      const element = settingList[index]
-      const key = mappingArray[index]
-      if (index === 4) {
-        element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
-      } else {
-        element['pval'] = res.data[key] || '-'
-      }
-    }
-  })
-}
-
-const switchEnableApi = (enable: any) => {
-  const url = '/dingtalk/switchEnable'
-  const data = { enable }
-  request.post(url, data).catch(() => {
-    info.value.enable = false
-  })
-}
-const edit = () => {
-  editor?.value.edit(info.value)
-}
-const validate = () => {
-  if (info.value?.appKey && info.value?.appSecret && info.value?.callBack) {
-    validateHandler()
-  }
-}
-const validateHandler = () => {
-  const url = '/dingtalk/validate'
-  const data = info.value
-  request
-    .post(url, data)
-    .then(() => {
-      info.value.valid = true
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      info.value.enable = false
-      info.value.valid = false
-    })
-}
-search()
-</script>
-
-<style lang="less" scoped>
-.platform-head-container {
-  height: 41px;
-  border-bottom: 1px solid #1f232926;
-}
-.just-head {
-  height: auto !important;
-  border: none !important;
-}
-.platform-setting-head {
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .platform-setting-head-left {
-    display: flex;
-    .lead-left-icon {
-      display: flex;
-      line-height: 24px;
-      align-items: center;
-      i {
-        width: 24px;
-        height: 24px;
-        font-size: 20px;
-      }
-      span {
-        margin-left: 4px;
-        font-family: var(--de-custom_font, 'PingFang');
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 24px;
-      }
-    }
-    .lead-left-status {
-      margin-left: 4px;
-      height: 24px;
-      background: #34c72433;
-      padding: 0 6px;
-      font-size: 14px;
-      border-radius: 2px;
-      overflow: hidden;
-      span {
-        line-height: 24px;
-        color: #2ca91f;
-      }
-    }
-    .invalid {
-      background: #f54a4533 !important;
-      span {
-        color: #d03f3b !important;
-      }
-    }
-  }
-  .platform-setting-head-right-btn {
-    height: 32px;
-    line-height: 32px;
-  }
-  .platform-setting-head-right {
-    height: 22px;
-    line-height: 24px;
-    display: flex;
-    span {
-      margin-right: 8px;
-      font-size: 14px;
-      height: 22px;
-      line-height: 22px;
-    }
-    .status-switch {
-      line-height: 22px !important;
-      height: 22px !important;
-    }
-  }
-}
-
-.platform-setting-main {
-  display: inline-block;
-  width: 100%;
-  padding: 16px 0 0 0 !important;
-  ::v-deep(.info-template-content) {
-    display: contents !important;
-  }
-}
-.platform-foot-container {
-  height: 32px;
-  margin-top: -7px;
-}
-</style>
diff --git a/frontend/src/views/system/platform/index.vue b/frontend/src/views/system/platform/index.vue
index 66262576..6b25f7aa 100644
--- a/frontend/src/views/system/platform/index.vue
+++ b/frontend/src/views/system/platform/index.vue
@@ -2,28 +2,39 @@
   <p class="router-title">{{ t('platform.title') }}</p>
 
   <div class="sys-setting-p">
-    <div class="container-sys-platform">
-      <wecom-info />
+    <div v-for="card in state.cardList" :key="card.type" class="container-sys-platform">
+      <platform-info :card-info="card" @saved="loadData" />
     </div>
-    <!-- <div class="container-sys-platform not-first">
-      <dingtalk-info />
-    </div> -->
-    <!-- <div class="container-sys-platform not-first">
-      <lark-info />
-    </div>
-    <div class="container-sys-platform not-first">
-      <larksuite-info />
-    </div> -->
   </div>
 </template>
 
 <script lang="ts" setup>
-import WecomInfo from './wecom/WecomInfo.vue'
-/* import DingtalkInfo from './dingtalk/DingtalkInfo.vue' */
-/* import LarkInfo from './lark/LarkInfo.vue'
-import LarksuiteInfo from './larksuite/LarksuiteInfo.vue' */
+import PlatformInfo from './PlatformInfo.vue'
+
 import { useI18n } from 'vue-i18n'
+import { request } from '@/utils/request'
+import { onMounted, reactive } from 'vue'
+import type { PlatformCard } from './common/SettingTemplate'
 const { t } = useI18n()
+
+const state = reactive({
+  cardList: [] as PlatformCard[],
+})
+
+const loadData = () => {
+  const url = '/system/platform'
+  request.get(url).then((res: any) => {
+    state.cardList = res
+      .map((item: any) => {
+        item.config = JSON.parse(item.config)
+        return item
+      })
+      .filter((card: any) => card.type < 7)
+  })
+}
+onMounted(() => {
+  loadData()
+})
 </script>
 <style lang="less" scoped>
 .router-title {
@@ -43,6 +54,9 @@ const { t } = useI18n()
   height: calc(100vh - 136px);
   box-sizing: border-box;
   margin-top: 16px;
+  row-gap: 16px;
+  display: flex;
+  flex-direction: column;
 }
 .container-sys-platform {
   padding: 24px;
diff --git a/frontend/src/views/system/platform/lark/LarkEdit.vue b/frontend/src/views/system/platform/lark/LarkEdit.vue
deleted file mode 100644
index 33708167..00000000
--- a/frontend/src/views/system/platform/lark/LarkEdit.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { ElMessage, ElLoading } from 'element-plus-secondary'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import type { FormInstance, FormRules } from 'element-plus-secondary'
-const { t } = useI18n()
-const dialogVisible = ref(false)
-const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
-const larkForm = ref<FormInstance>()
-interface LarkForm {
-  appId?: string
-  appSecret?: string
-  callBack?: string
-  enable?: string
-  valid?: string
-}
-const state = reactive({
-  form: reactive<LarkForm>({
-    appId: '',
-    appSecret: '',
-    callBack: '',
-    enable: 'false',
-    valid: 'false',
-  }),
-})
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const validateUrl = (rule, value, callback) => {
-  const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
-  if (!reg.test(value)) {
-    callback(new Error(t('system.incorrect_please_re_enter')))
-  } else {
-    callback()
-  }
-}
-const rule = reactive<FormRules>({
-  appId: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  appSecret: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 50,
-      message: t('common.input_limit', [5, 50]),
-      trigger: 'blur',
-    },
-  ],
-  callBack: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 10,
-      max: 100,
-      message: t('common.input_limit', [10, 100]),
-      trigger: 'blur',
-    },
-    { required: true, validator: validateUrl, trigger: 'blur' },
-  ],
-  enable: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-  valid: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-})
-
-const edit = (row: any) => {
-  state.form = {
-    appId: row.appId,
-    appSecret: row.appSecret,
-    callBack: row.callBack,
-    enable: row.enable,
-    valid: row.valid,
-  }
-  dialogVisible.value = true
-}
-
-const emits = defineEmits(['saved'])
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      const param = { ...state.form }
-      const method = request.post('/lark/create', param)
-      showLoading()
-      method
-        .then((res) => {
-          if (!res.msg) {
-            ElMessage.success(t('common.save_success'))
-            emits('saved')
-            reset()
-          }
-          closeLoading()
-        })
-        .catch(() => {
-          closeLoading()
-        })
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  dialogVisible.value = false
-}
-
-const reset = () => {
-  resetForm(larkForm.value)
-}
-
-const showLoading = () => {
-  loadingInstance.value = ElLoading.service({
-    target: '.platform-info-drawer',
-  })
-}
-const closeLoading = () => {
-  loadingInstance.value?.close()
-}
-
-const validate = () => {
-  const url = '/lark/validate'
-  const data = state.form
-  showLoading()
-  request
-    .post(url, data)
-    .then(() => {
-      state.form.valid = 'true'
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      state.form.enable = 'false'
-      state.form.valid = 'false'
-    })
-    .finally(() => {
-      closeLoading()
-      emits('saved')
-    })
-}
-
-defineExpose({
-  edit,
-})
-</script>
-
-<template>
-  <el-drawer
-    v-model="dialogVisible"
-    :title="t('system.feishu_settings')"
-    modal-class="platform-info-drawer"
-    size="600px"
-    direction="rtl"
-  >
-    <el-form
-      ref="larkForm"
-      require-asterisk-position="right"
-      :model="state.form"
-      :rules="rule"
-      label-width="80px"
-      label-position="top"
-    >
-      <el-form-item label="APP Key" prop="appId">
-        <el-input v-model="state.form.appId" :placeholder="t('common.please_input')" />
-      </el-form-item>
-
-      <el-form-item label="APP Secret" prop="appSecret">
-        <el-input
-          v-model="state.form.appSecret"
-          type="password"
-          show-password
-          :placeholder="t('common.please_input')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('system.callback_domain_name')" prop="callBack">
-        <el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button secondary @click="resetForm(larkForm)">{{ t('common.cancel') }}</el-button>
-        <el-button
-          secondary
-          :disabled="!state.form.appId || !state.form.appSecret || !state.form.callBack"
-          @click="validate"
-        >
-          {{ t('commons.validate') }}
-        </el-button>
-        <el-button type="primary" @click="submitForm(larkForm)">
-          {{ t('commons.save') }}
-        </el-button>
-      </span>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less">
-.platform-info-drawer {
-  .ed-drawer__footer {
-    height: 64px !important;
-    padding: 16px 24px !important;
-    .dialog-footer {
-      height: 32px;
-      line-height: 32px;
-    }
-  }
-  .ed-form-item__label {
-    line-height: 22px !important;
-    height: 22px !important;
-  }
-}
-</style>
-<style lang="less" scoped>
-.platform-info-drawer {
-  .ed-form-item {
-    margin-bottom: 16px;
-  }
-  .is-error {
-    margin-bottom: 40px !important;
-  }
-  .input-with-select {
-    .ed-input-group__prepend {
-      width: 72px;
-      background-color: #fff;
-      padding: 0 20px;
-      color: #1f2329;
-      text-align: center;
-      font-family: var(--de-custom_font, 'PingFang');
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px;
-    }
-  }
-}
-</style>
diff --git a/frontend/src/views/system/platform/lark/LarkInfo.vue b/frontend/src/views/system/platform/lark/LarkInfo.vue
deleted file mode 100644
index 76d8974a..00000000
--- a/frontend/src/views/system/platform/lark/LarkInfo.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <div class="platform-head-container" :class="{ 'just-head': !existInfo }">
-    <div class="platform-setting-head">
-      <div class="platform-setting-head-left">
-        <div class="lead-left-icon">
-          <el-icon>
-            <Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
-          </el-icon>
-          <span>{{ t('user.feishu') }}</span>
-        </div>
-        <div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
-          <span>{{
-            info.valid ? t('datasource.valid') : info.appId ? t('datasource.invalid') : ''
-          }}</span>
-        </div>
-      </div>
-      <div v-if="existInfo" class="platform-setting-head-right">
-        <span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
-        <el-switch
-          v-if="info.valid"
-          v-model="info.enable"
-          class="status-switch"
-          @change="switchEnableApi"
-        />
-        <el-tooltip
-          v-else
-          class="box-item"
-          effect="dark"
-          :content="t('platform.can_enable_it')"
-          placement="top"
-        >
-          <el-switch
-            v-model="info.enable"
-            disabled=""
-            class="status-switch"
-            @change="switchEnableApi"
-          />
-        </el-tooltip>
-      </div>
-      <div v-else class="platform-setting-head-right-btn">
-        <el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
-      </div>
-    </div>
-  </div>
-  <InfoTemplate
-    v-if="existInfo"
-    class="platform-setting-main"
-    :copy-list="copyList"
-    setting-key="lark"
-    setting-title=""
-    :hide-head="true"
-    :setting-data="settingList"
-    @edit="edit"
-  />
-  <div v-if="existInfo" class="platform-foot-container">
-    <el-button type="primary" @click="edit">
-      {{ t('commons.edit') }}
-    </el-button>
-    <el-button
-      secondary
-      :disabled="!info.appId || !info.appSecret || !info.callBack"
-      @click="validate"
-      >{{ t('commons.validate') }}</el-button
-    >
-  </div>
-  <lark-edit ref="editor" @saved="search" />
-</template>
-
-<script lang="ts" setup>
-import logo_lark from '@/assets/svg/logo_lark.svg'
-import { ref, reactive } from 'vue'
-import InfoTemplate from '../common/InfoTemplate.vue'
-import LarkEdit from './LarkEdit.vue'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import { ElMessage } from 'element-plus-secondary'
-const existInfo = ref(false)
-const { t } = useI18n()
-const editor = ref()
-const copyList = ['APP Key', 'APP Secret']
-const settingList = reactive([
-  {
-    pkey: 'APP Key',
-    pval: 'smtp.exmail.qq.com',
-    type: 'text',
-    sort: 1,
-  },
-  {
-    pkey: 'APP Secret',
-    pval: 'smtp.exmail.qq.com',
-    type: 'pwd',
-    sort: 2,
-  },
-  {
-    pkey: t('system.callback_domain_name'),
-    pval: 'https://de.fit2cloud.com',
-    type: 'text',
-    sort: 3,
-  },
-])
-const info = ref({}) as any
-const mappingArray = ['appId', 'appSecret', 'callBack', 'enable']
-const search = () => {
-  const url = '/lark/info'
-  request.get(url).then((res) => {
-    info.value = res.data
-    existInfo.value = info.value['appId']
-    for (let index = 0; index < settingList.length; index++) {
-      const element = settingList[index]
-      const key = mappingArray[index]
-      if (index === 3) {
-        element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
-      } else {
-        element['pval'] = res.data[key] || '-'
-      }
-    }
-  })
-}
-
-const switchEnableApi = (enable: any) => {
-  const url = '/lark/switchEnable'
-  const data = { enable }
-  request.post(url, data).catch(() => {
-    info.value.enable = false
-  })
-}
-const edit = () => {
-  editor?.value.edit(info.value)
-}
-const validate = () => {
-  if (info.value?.appId && info.value?.appSecret && info.value?.callBack) {
-    validateHandler()
-  }
-}
-const validateHandler = () => {
-  const url = '/lark/validate'
-  const data = info.value
-  request
-    .post(url, data)
-    .then(() => {
-      info.value.valid = true
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      info.value.enable = false
-      info.value.valid = false
-    })
-}
-search()
-</script>
-
-<style lang="less" scoped>
-.platform-head-container {
-  height: 41px;
-  border-bottom: 1px solid #1f232926;
-}
-.just-head {
-  height: auto !important;
-  border: none !important;
-}
-.platform-setting-head {
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .platform-setting-head-left {
-    display: flex;
-    .lead-left-icon {
-      display: flex;
-      line-height: 24px;
-      align-items: center;
-      i {
-        width: 24px;
-        height: 24px;
-        font-size: 20px;
-      }
-      span {
-        margin-left: 4px;
-        font-family: var(--de-custom_font, 'PingFang');
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 24px;
-      }
-    }
-    .lead-left-status {
-      margin-left: 4px;
-      height: 24px;
-      background: #34c72433;
-      padding: 0 6px;
-      font-size: 14px;
-      border-radius: 2px;
-      overflow: hidden;
-      span {
-        line-height: 24px;
-        color: #2ca91f;
-      }
-    }
-    .invalid {
-      background: #f54a4533 !important;
-      span {
-        color: #d03f3b !important;
-      }
-    }
-  }
-  .platform-setting-head-right-btn {
-    height: 32px;
-    line-height: 32px;
-  }
-  .platform-setting-head-right {
-    height: 22px;
-    line-height: 24px;
-    display: flex;
-    span {
-      margin-right: 8px;
-      font-size: 14px;
-      height: 22px;
-      line-height: 22px;
-    }
-    .status-switch {
-      line-height: 22px !important;
-      height: 22px !important;
-    }
-  }
-}
-
-.platform-setting-main {
-  display: inline-block;
-  width: 100%;
-  padding: 16px 0 0 0 !important;
-  ::v-deep(.info-template-content) {
-    display: contents !important;
-  }
-}
-.platform-foot-container {
-  height: 32px;
-  margin-top: -7px;
-}
-</style>
diff --git a/frontend/src/views/system/platform/larksuite/LarksuiteEdit.vue b/frontend/src/views/system/platform/larksuite/LarksuiteEdit.vue
deleted file mode 100644
index 043b92e4..00000000
--- a/frontend/src/views/system/platform/larksuite/LarksuiteEdit.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { ElMessage, ElLoading } from 'element-plus-secondary'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import type { FormInstance, FormRules } from 'element-plus-secondary'
-const { t } = useI18n()
-const dialogVisible = ref(false)
-const loadingInstance = ref<ReturnType<typeof ElLoading.service> | null>(null)
-const larksuiteForm = ref<FormInstance>()
-interface LarksuiteForm {
-  appId?: string
-  appSecret?: string
-  callBack?: string
-  enable?: string
-  valid?: string
-}
-const state = reactive({
-  form: reactive<LarksuiteForm>({
-    appId: '',
-    appSecret: '',
-    callBack: '',
-    enable: 'false',
-    valid: 'false',
-  }),
-})
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const validateUrl = (rule, value, callback) => {
-  const reg = new RegExp(/(http|https):\/\/([\w.]+\/?)\S*/)
-  if (!reg.test(value)) {
-    callback(new Error(t('system.incorrect_please_re_enter')))
-  } else {
-    callback()
-  }
-}
-const rule = reactive<FormRules>({
-  appId: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 20,
-      message: t('common.input_limit', [5, 20]),
-      trigger: 'blur',
-    },
-  ],
-  appSecret: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 5,
-      max: 50,
-      message: t('common.input_limit', [5, 50]),
-      trigger: 'blur',
-    },
-  ],
-  callBack: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'blur',
-    },
-    {
-      min: 10,
-      max: 100,
-      message: t('common.input_limit', [10, 100]),
-      trigger: 'blur',
-    },
-    { required: true, validator: validateUrl, trigger: 'blur' },
-  ],
-  enable: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-  valid: [
-    {
-      required: true,
-      message: t('common.require'),
-      trigger: 'change',
-    },
-  ],
-})
-
-const edit = (row: any) => {
-  state.form = {
-    appId: row.appId,
-    appSecret: row.appSecret,
-    callBack: row.callBack,
-    enable: row.enable,
-    valid: row.valid,
-  }
-  dialogVisible.value = true
-}
-
-const emits = defineEmits(['saved'])
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid) => {
-    if (valid) {
-      const param = { ...state.form }
-      const method = request.post('/larksuite/create', param)
-      showLoading()
-      method
-        .then((res) => {
-          if (!res.msg) {
-            ElMessage.success(t('common.save_success'))
-            emits('saved')
-            reset()
-          }
-          closeLoading()
-        })
-        .catch(() => {
-          closeLoading()
-        })
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  formEl.resetFields()
-  dialogVisible.value = false
-}
-
-const reset = () => {
-  resetForm(larksuiteForm.value)
-}
-
-const showLoading = () => {
-  loadingInstance.value = ElLoading.service({
-    target: '.platform-info-drawer',
-  })
-}
-const closeLoading = () => {
-  loadingInstance.value?.close()
-}
-
-const validate = () => {
-  const url = '/larksuite/validate'
-  const data = state.form
-  showLoading()
-  request
-    .post(url, data)
-    .then(() => {
-      state.form.valid = 'true'
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      state.form.enable = 'false'
-      state.form.valid = 'false'
-    })
-    .finally(() => {
-      closeLoading()
-      emits('saved')
-    })
-}
-
-defineExpose({
-  edit,
-})
-</script>
-
-<template>
-  <el-drawer
-    v-model="dialogVisible"
-    :title="t('system.international_feishu_settings')"
-    modal-class="platform-info-drawer"
-    size="600px"
-    direction="rtl"
-  >
-    <el-form
-      ref="larksuiteForm"
-      require-asterisk-position="right"
-      :model="state.form"
-      :rules="rule"
-      label-width="80px"
-      label-position="top"
-    >
-      <el-form-item label="APP Key" prop="appId">
-        <el-input v-model="state.form.appId" :placeholder="t('common.please_input')" />
-      </el-form-item>
-
-      <el-form-item label="APP Secret" prop="appSecret">
-        <el-input
-          v-model="state.form.appSecret"
-          type="password"
-          show-password
-          :placeholder="t('common.please_input')"
-        />
-      </el-form-item>
-      <el-form-item :label="t('system.callback_domain_name')" prop="callBack">
-        <el-input v-model="state.form.callBack" :placeholder="t('common.please_input')" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button secondary @click="resetForm(larksuiteForm)">{{ t('common.cancel') }}</el-button>
-        <el-button
-          secondary
-          :disabled="!state.form.appId || !state.form.appSecret || !state.form.callBack"
-          @click="validate"
-        >
-          {{ t('commons.validate') }}
-        </el-button>
-        <el-button type="primary" @click="submitForm(larksuiteForm)">
-          {{ t('commons.save') }}
-        </el-button>
-      </span>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less">
-.platform-info-drawer {
-  .ed-drawer__footer {
-    height: 64px !important;
-    padding: 16px 24px !important;
-    .dialog-footer {
-      height: 32px;
-      line-height: 32px;
-    }
-  }
-  .ed-form-item__label {
-    line-height: 22px !important;
-    height: 22px !important;
-  }
-}
-</style>
-<style lang="less" scoped>
-.platform-info-drawer {
-  .ed-form-item {
-    margin-bottom: 16px;
-  }
-  .is-error {
-    margin-bottom: 40px !important;
-  }
-  .input-with-select {
-    .ed-input-group__prepend {
-      width: 72px;
-      background-color: #fff;
-      padding: 0 20px;
-      color: #1f2329;
-      text-align: center;
-      font-family: var(--de-custom_font, 'PingFang');
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 22px;
-    }
-  }
-}
-</style>
diff --git a/frontend/src/views/system/platform/larksuite/LarksuiteInfo.vue b/frontend/src/views/system/platform/larksuite/LarksuiteInfo.vue
deleted file mode 100644
index 4e95763a..00000000
--- a/frontend/src/views/system/platform/larksuite/LarksuiteInfo.vue
+++ /dev/null
@@ -1,241 +0,0 @@
-<template>
-  <div class="platform-head-container" :class="{ 'just-head': !existInfo }">
-    <div class="platform-setting-head">
-      <div class="platform-setting-head-left">
-        <div class="lead-left-icon">
-          <el-icon>
-            <Icon name="logo_lark"><logo_lark class="svg-icon" /></Icon>
-          </el-icon>
-          <span>{{ t('system.international_feishu') }}</span>
-        </div>
-        <div v-if="existInfo" class="lead-left-status" :class="{ invalid: !info.valid }">
-          <span>{{
-            info.valid ? t('datasource.valid') : info.appId ? t('datasource.invalid') : ''
-          }}</span>
-        </div>
-      </div>
-      <div v-if="existInfo" class="platform-setting-head-right">
-        <span>{{ info.enable ? t('system.enabled') : t('system.close') }}</span>
-        <el-switch
-          v-if="info.valid"
-          v-model="info.enable"
-          class="status-switch"
-          @change="switchEnableApi"
-        />
-        <el-tooltip
-          v-else
-          class="box-item"
-          effect="dark"
-          :content="t('platform.can_enable_it')"
-          placement="top"
-        >
-          <el-switch
-            v-model="info.enable"
-            disabled=""
-            class="status-switch"
-            @change="switchEnableApi"
-          />
-        </el-tooltip>
-      </div>
-      <div v-else class="platform-setting-head-right-btn">
-        <el-button type="primary" @click="edit">{{ t('system.access') }}</el-button>
-      </div>
-    </div>
-  </div>
-  <InfoTemplate
-    v-if="existInfo"
-    class="platform-setting-main"
-    :copy-list="copyList"
-    setting-key="larksuite"
-    setting-title=""
-    :hide-head="true"
-    :setting-data="settingList"
-    @edit="edit"
-  />
-  <div v-if="existInfo" class="platform-foot-container">
-    <el-button type="primary" @click="edit">
-      {{ t('commons.edit') }}
-    </el-button>
-    <el-button
-      secondary
-      :disabled="!info.appId || !info.appSecret || !info.callBack"
-      @click="validate"
-      >{{ t('commons.validate') }}</el-button
-    >
-  </div>
-  <larksuite-edit ref="editor" @saved="search" />
-</template>
-
-<script lang="ts" setup>
-import logo_lark from '@/assets/svg/logo_lark.svg'
-import { ref, reactive } from 'vue'
-import InfoTemplate from '../common/InfoTemplate.vue'
-import LarksuiteEdit from './LarksuiteEdit.vue'
-import { request } from '@/utils/request'
-import { useI18n } from 'vue-i18n'
-import { ElMessage } from 'element-plus-secondary'
-const { t } = useI18n()
-
-const existInfo = ref(false)
-const editor = ref()
-const copyList = ['APP Key', 'APP Secret']
-const settingList = reactive([
-  {
-    pkey: 'APP Key',
-    pval: 'smtp.exmail.qq.com',
-    type: 'text',
-    sort: 1,
-  },
-  {
-    pkey: 'APP Secret',
-    pval: 'smtp.exmail.qq.com',
-    type: 'pwd',
-    sort: 2,
-  },
-  {
-    pkey: t('system.callback_domain_name'),
-    pval: 'https://de.fit2cloud.com',
-    type: 'text',
-    sort: 3,
-  },
-])
-const info = ref({}) as any
-const mappingArray = ['appId', 'appSecret', 'callBack', 'enable']
-const search = () => {
-  const url = '/larksuite/info'
-  request.get(url).then((res) => {
-    info.value = res.data
-    existInfo.value = info.value['appId']
-    for (let index = 0; index < settingList.length; index++) {
-      const element = settingList[index]
-      const key = mappingArray[index]
-      if (index === 3) {
-        element['pval'] = res.data[key] ? t('chart.open') : t('chart.close')
-      } else {
-        element['pval'] = res.data[key] || '-'
-      }
-    }
-  })
-}
-
-const switchEnableApi = (enable: any) => {
-  const url = '/larksuite/switchEnable'
-  const data = { enable }
-  request.post(url, data).catch(() => {
-    info.value.enable = false
-  })
-}
-const edit = () => {
-  editor?.value.edit(info.value)
-}
-const validate = () => {
-  if (info.value?.appId && info.value?.appSecret && info.value?.callBack) {
-    validateHandler()
-  }
-}
-const validateHandler = () => {
-  const url = '/larksuite/validate'
-  const data = info.value
-  request
-    .post(url, data)
-    .then(() => {
-      info.value.valid = true
-      ElMessage.success(t('datasource.validate_success'))
-    })
-    .catch(() => {
-      info.value.enable = false
-      info.value.valid = false
-    })
-}
-search()
-</script>
-
-<style lang="less" scoped>
-.platform-head-container {
-  height: 41px;
-  border-bottom: 1px solid #1f232926;
-}
-.just-head {
-  height: auto !important;
-  border: none !important;
-}
-.platform-setting-head {
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .platform-setting-head-left {
-    display: flex;
-    .lead-left-icon {
-      display: flex;
-      line-height: 24px;
-      align-items: center;
-      i {
-        width: 24px;
-        height: 24px;
-        font-size: 20px;
-      }
-      span {
-        margin-left: 4px;
-        font-family: var(--de-custom_font, 'PingFang');
-        font-size: 16px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 24px;
-      }
-    }
-    .lead-left-status {
-      margin-left: 4px;
-      height: 24px;
-      background: #34c72433;
-      padding: 0 6px;
-      font-size: 14px;
-      border-radius: 2px;
-      overflow: hidden;
-      span {
-        line-height: 24px;
-        color: #2ca91f;
-      }
-    }
-    .invalid {
-      background: #f54a4533 !important;
-      span {
-        color: #d03f3b !important;
-      }
-    }
-  }
-  .platform-setting-head-right-btn {
-    height: 32px;
-    line-height: 32px;
-  }
-  .platform-setting-head-right {
-    height: 22px;
-    line-height: 24px;
-    display: flex;
-    span {
-      margin-right: 8px;
-      font-size: 14px;
-      height: 22px;
-      line-height: 22px;
-    }
-    .status-switch {
-      line-height: 22px !important;
-      height: 22px !important;
-    }
-  }
-}
-
-.platform-setting-main {
-  display: inline-block;
-  width: 100%;
-  padding: 16px 0 0 0 !important;
-  ::v-deep(.info-template-content) {
-    display: contents !important;
-  }
-}
-.platform-foot-container {
-  height: 32px;
-  margin-top: -7px;
-}
-</style>