From a9f30e9f5f5e21fe3d9ff5cf51bdecabe2ed74cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Mon, 30 Mar 2026 14:55:05 +0800
Subject: [PATCH] feat: Enhance Bark alert configuration options and visibility
 (#12362)

---
 .../views/cronjob/cronjob/operate/index.vue   |  10 ++
 .../views/setting/alert/dash/task/index.vue   |   3 +-
 .../src/views/setting/alert/setting/index.vue | 116 ++++++++++--------
 .../src/views/toolbox/clam/operate/index.vue  |   2 +
 4 files changed, 77 insertions(+), 54 deletions(-)

diff --git a/frontend/src/views/cronjob/cronjob/operate/index.vue b/frontend/src/views/cronjob/cronjob/operate/index.vue
index 9957823fc..1fc943864 100644
--- a/frontend/src/views/cronjob/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/cronjob/operate/index.vue
@@ -716,6 +716,11 @@
                                             cleanable
                                         >
                                             <el-option value="mail" :label="$t('xpack.alert.mail')" />
+                                            <el-option
+                                                v-if="!isProductPro"
+                                                value="bark"
+                                                :label="$t('xpack.alert.bark')"
+                                            />
                                             <el-option
                                                 value="weCom"
                                                 v-if="!globalStore.isIntl"
@@ -734,6 +739,11 @@
                                                 :disabled="!form.hasAlert || !isProductPro"
                                                 :label="$t('xpack.alert.feiShu')"
                                             />
+                                            <el-option
+                                                v-if="isProductPro"
+                                                value="bark"
+                                                :label="$t('xpack.alert.bark')"
+                                            />
                                             <el-option
                                                 value="sms"
                                                 v-if="!globalStore.isIntl"
diff --git a/frontend/src/views/setting/alert/dash/task/index.vue b/frontend/src/views/setting/alert/dash/task/index.vue
index fe8d7d9af..a1288c76e 100644
--- a/frontend/src/views/setting/alert/dash/task/index.vue
+++ b/frontend/src/views/setting/alert/dash/task/index.vue
@@ -322,7 +322,7 @@
                     <el-form-item :label="$t('xpack.alert.alertMethod')" prop="sendMethod">
                         <el-select class="selectClass" v-model="dialogData.rowData!.sendMethod" multiple cleanable>
                             <el-option value="mail" :label="$t('xpack.alert.mail')" />
-                            <el-option value="bark" :label="$t('xpack.alert.bark')" />
+                            <el-option v-if="!globalStore.isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                             <el-option
                                 value="weCom"
                                 v-if="!globalStore.isIntl"
@@ -341,6 +341,7 @@
                                 :disabled="!globalStore.isProductPro"
                                 :label="$t('xpack.alert.feiShu')"
                             />
+                            <el-option v-if="globalStore.isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                             <el-option
                                 value="sms"
                                 v-if="!globalStore.isIntl"
diff --git a/frontend/src/views/setting/alert/setting/index.vue b/frontend/src/views/setting/alert/setting/index.vue
index 342b2b805..15ba84b60 100644
--- a/frontend/src/views/setting/alert/setting/index.vue
+++ b/frontend/src/views/setting/alert/setting/index.vue
@@ -121,59 +121,6 @@
                             </el-button>
                         </div>
                     </el-card>
-                    <el-card class="rounded-2xl shadow hover:shadow-md transition-all">
-                        <div class="flex items-center justify-between mb-2">
-                            <div class="text-lg font-semibold">{{ $t('xpack.alert.bark') }}</div>
-                            <div>
-                                <el-button
-                                    plain
-                                    round
-                                    size="default"
-                                    :disabled="!barkConfig.id"
-                                    @click="onChangeBark(barkConfig.id)"
-                                >
-                                    {{ $t('commons.button.edit') }}
-                                </el-button>
-                                <el-button
-                                    size="default"
-                                    plain
-                                    round
-                                    :disabled="!barkConfig.id"
-                                    @click="onDelete(barkConfig.id)"
-                                >
-                                    {{ $t('commons.button.delete') }}
-                                </el-button>
-                            </div>
-                        </div>
-                        <div class="text-sm mb-2">{{ $t('xpack.alert.barkConfigHelper') }}</div>
-                        <el-divider class="!mb-2 !mt-3" />
-                        <div class="text-sm config-form" v-if="barkConfig.id">
-                            <el-form
-                                @submit.prevent
-                                ref="alertFormRef"
-                                :label-position="mobile ? 'top' : 'left'"
-                                label-width="110px"
-                            >
-                                <el-form-item :label="$t('xpack.alert.webhookName')" prop="displayName">
-                                    {{ barkConfig.config.displayName }}
-                                </el-form-item>
-                                <el-form-item :label="$t('xpack.alert.webhookUrl')" prop="url">
-                                    <div class="webhook-field">
-                                        <el-tooltip :content="barkConfig.config.url" placement="top" effect="dark">
-                                            <span class="webhook-text">
-                                                {{ barkConfig.config.url }}
-                                            </span>
-                                        </el-tooltip>
-                                    </div>
-                                </el-form-item>
-                            </el-form>
-                        </div>
-                        <div v-else class="flex items-center justify-center" style="height: 257px">
-                            <el-button size="large" round plain type="primary" @click="onChangeBark(0)">
-                                {{ $t('commons.button.create') }}
-                            </el-button>
-                        </div>
-                    </el-card>
                     <el-card
                         class="rounded-2xl shadow hover:shadow-md transition-all"
                         v-if="globalStore.isProductPro && !globalStore.isIntl"
@@ -377,6 +324,68 @@
                             </el-button>
                         </div>
                     </el-card>
+                    <el-card class="rounded-2xl shadow hover:shadow-md transition-all">
+                        <div class="flex items-center justify-between mb-2">
+                            <div class="text-lg font-semibold">{{ $t('xpack.alert.bark') }}</div>
+                            <div>
+                                <el-button
+                                    plain
+                                    round
+                                    size="default"
+                                    :disabled="!barkConfig.id"
+                                    @click="onChangeBark(barkConfig.id)"
+                                >
+                                    {{ $t('commons.button.edit') }}
+                                </el-button>
+                                <el-button
+                                    size="default"
+                                    plain
+                                    round
+                                    :disabled="!barkConfig.id"
+                                    @click="onDelete(barkConfig.id)"
+                                >
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
+                        </div>
+                        <div class="text-sm mb-2">{{ $t('xpack.alert.barkConfigHelper') }}</div>
+                        <el-divider class="!mb-2 !mt-3" />
+                        <div class="text-sm config-form" v-if="barkConfig.id">
+                            <el-form
+                                @submit.prevent
+                                ref="alertFormRef"
+                                :label-position="mobile ? 'top' : 'left'"
+                                label-width="110px"
+                            >
+                                <el-form-item :label="$t('xpack.alert.webhookName')" prop="displayName">
+                                    {{ barkConfig.config.displayName }}
+                                </el-form-item>
+                                <el-form-item :label="$t('xpack.alert.webhookUrl')" prop="url">
+                                    <div class="webhook-field">
+                                        <template v-if="barkUrlVisible">
+                                            <el-tooltip :content="barkConfig.config.url" placement="top" effect="dark">
+                                                <span class="webhook-text">
+                                                    {{ barkConfig.config.url }}
+                                                </span>
+                                            </el-tooltip>
+                                        </template>
+                                        <template v-else>
+                                            <span class="webhook-text">****************</span>
+                                        </template>
+                                        <el-icon class="webhook-icon" @click="barkUrlVisible = !barkUrlVisible">
+                                            <Hide v-if="!barkUrlVisible" />
+                                            <View v-else />
+                                        </el-icon>
+                                    </div>
+                                </el-form-item>
+                            </el-form>
+                        </div>
+                        <div v-else class="flex items-center justify-center" style="height: 257px">
+                            <el-button size="large" round plain type="primary" @click="onChangeBark(0)">
+                                {{ $t('commons.button.create') }}
+                            </el-button>
+                        </div>
+                    </el-card>
                     <el-card
                         class="rounded-2xl shadow hover:shadow-md transition-all"
                         v-if="globalStore.isProductPro && !globalStore.isIntl"
@@ -557,6 +566,7 @@ const feiShuConfig = ref<Alert.WebhookConfig>({ ...defaultFeiShuConfig });
 const weComUrlVisible = ref(false);
 const dingTalkUrlVisible = ref(false);
 const feiShuUrlVisible = ref(false);
+const barkUrlVisible = ref(false);
 
 const config = ref<Alert.AlertConfigInfo>({
     id: 0,
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index 085ee6dbd..d4f7f292a 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -154,6 +154,7 @@
                                 cleanable
                             >
                                 <el-option value="mail" :label="$t('xpack.alert.mail')" />
+                                <el-option v-if="!isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                                 <el-option
                                     value="weCom"
                                     v-if="!globalStore.isIntl"
@@ -172,6 +173,7 @@
                                     :disabled="!dialogData.rowData!.hasAlert || !isProductPro"
                                     :label="$t('xpack.alert.feiShu')"
                                 />
+                                <el-option v-if="isProductPro" value="bark" :label="$t('xpack.alert.bark')" />
                                 <el-option
                                     value="sms"
                                     v-if="!globalStore.isIntl"