admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix message page style

Browse Source
This commit is contained in:
engigu
2026-03-04 23:00:45 +08:00
parent 78786799bb
commit 36ab8ec93f
5 changed files with 175 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+18 -7
View File
@@ -13,6 +13,7 @@
### 最近更新
**2026.03.04** - 新增内置消息推送系统：全新原生支持企业微信、钉钉、飞书、Telegram、Bark、邮件等十余种主流渠道的推送，接入系统级事件通知自动捕获，告别原有必配外部推送服务的繁琐历史
**2026.02.13** - 重构任务执行引擎：深度集成 Mise 运行时管理，支持 Python, Node.js, Go, Rust, PHP 等几乎所有主流语言的动态安装与多版本切换，同步上线跨语言统一依赖管理系统
**2026.02.11** - 增强安全性：首次启动使用随机密码并打印在日志中，登录接口增加防暴力破解，文件系统操作增加路径穿越锁定
**2026.02.10** - 重构任务调度系统，完善并发控制，优化文件树交互体验，支持任务执行实时日志流
@@ -42,6 +43,7 @@
- **任务调度：** 支持标准 Cron 表达式，常用时间规则快捷选择。日志不落文件，没有磁盘频繁io的问题
- **脚本管理：** 在线代码编辑器，支持文件上传、压缩包解压
- **在线终端：** WebSocket 实时终端，命令执行结果实时输出
- **消息推送：** 内置强大消息推送与通知引擎，无缝兼容主流渠道，支持系统级事件告警
- **环境变量：** 安全存储敏感配置，任务执行时自动注入
- **现代UI：** 响应式设计，深色/浅色主题切换
- **移动端：** 适配移动小屏样式
@@ -79,6 +81,11 @@
- 日志内容压缩存储
- 日志自动清理
### 消息推送与系统通知
- 原生内置各大主流平台渠道（钉钉、企业微信、Telegram、Server酱等）
- 支持系统级事件条件触发通知（例如任务失败报警、服务下线提醒）
- 自动生成跨语言调用 API 示例代码供脚本集成
### 环境变量
- 安全存储敏感配置
- 变量值脱敏显示
@@ -334,9 +341,13 @@ table_prefix = baihu_
</details>
<details>
<summary><b>方式三：一键部署（白虎 + 消息推送）（推荐）</b></summary>
<summary><b>方式三：配合独立中心化消息服务部署（非必需/仅供参考）</b></summary>
白虎面板本身不内置推送功能，但可以与消息聚合服务配合使用。推荐使用 [Message-Push-Nest](https://github.com/engigu/Message-Push-Nest) 作为统一的消息推送中心。
> 🎉 **好消息**：自白虎面板最新版本起，系统已**原生内置**了完整强大的消息推送功能！您可直接在面板「消息推送」菜单内绑定十余种主流渠道和系统通知事件，原配合外置的 `Message-Push-Nest` 部署方式已不再是使用面板的基础要求。您可随时直接使用上方的第一种简单命令开箱即用体验。
>
> 以下「白虎 + 消息聚合服务」的联合部署内容被予以保留，专为仍然需要「中心化通知网关」的重度企业解耦用户作为参考：
白虎面板通过系统集成也可轻松连接独立的消息聚合服务。这里推荐使用 [Message-Push-Nest](https://github.com/engigu/Message-Push-Nest) 作为分布式的统一消息推送中心。
**使用 SQLite**
@@ -464,12 +475,12 @@ docker-compose up -d
**在任务中使用推送**
Message-Push-Nest 提供了便捷的推送代码生成功能：
如今你无需依赖任何外部服务，可以通过面板自身完成：
1. 进入白虎面板「消息推送」模块，新建你需要通知的渠道。
2. 可以在「事件绑定」中直接设定**自动化系统通知**（如监控任务失败或脚本异常中止时进行自动提醒）。
3. 如需在自己的脚本逻辑内动态推送，可以点击「脚本调用」页面，立刻获取一键调用的 Shell / API 代码，内嵌进你的业务逻辑中即可完成推信！
1. 在 Message-Push-Nest 管理界面中配置推送渠道（如企业微信、钉钉、邮件等）
2. 在「消息模板」或「任务」页面，点击「复制推送代码」按钮
3. 选择对应的编程语言（Python、Bash、Node.js 等）
4. 将生成的代码粘贴到白虎面板的任务脚本中需要推送的位置
*(如继续使用 `Message-Push-Nest`，你可以通过其管理界面中「消息模板」的「复制推送代码」提取旧有版集成样例。)*
![1768143124572.png](https://f.pz.al/pzal/2026/01/11/1360cd334ff20.png)
internal/middleware/notify_token.go
+4 -2
View File
@@ -1,6 +1,8 @@
package middleware
import (
"strings"
"github.com/engigu/baihu-panel/internal/constant"
"github.com/engigu/baihu-panel/internal/services"
"github.com/engigu/baihu-panel/internal/utils"
@@ -20,14 +22,14 @@ func NotifyTokenAuth() gin.HandlerFunc {
// 从 settings 表读取配置的通知 Token
settingsService := services.NewSettingsService()
savedToken := settingsService.Get(constant.SectionNotify, constant.KeyNotifyToken)
if savedToken == "" {
utils.Unauthorized(c, "通知 Token 未配置")
c.Abort()
return
}
if token != savedToken {
if strings.ToLower(token) != strings.ToLower(savedToken) {
utils.Unauthorized(c, "通知 Token 无效")
c.Abort()
return
web/src/views/notify/Notify.vue
+12 -37
View File
@@ -11,7 +11,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { api, type NotifyChannel, type ChannelType, type EventType, type NotifyBinding } from '@/api'
import { api, type NotifyChannel, type ChannelType, type EventType, type NotifyBinding, type Task } from '@/api'
import { toast } from 'vue-sonner'
import ChannelList from './components/ChannelList.vue'
import EventBinding from './components/EventBinding.vue'
@@ -172,13 +172,13 @@ async function saveChannel() {
toast.error('请填写渠道名称和类型')
return
}
// 确保 enabled 字段有值
const channelData = {
...editingChannel.value,
enabled: editingChannel.value.enabled ?? true
}
try {
await api.notify.saveChannel(channelData)
toast.success('保存成功')
@@ -321,52 +321,27 @@ onMounted(() => {
<!-- 渠道管理 -->
<TabsContent value="channels">
<ChannelList
:channels="channels"
:channel-types="channelTypes"
@add="openNewChannel"
@edit="openEditChannel"
@delete="confirmDelete"
@test="testChannel"
/>
<ChannelList :channels="channels" :channel-types="channelTypes" @add="openNewChannel" @edit="openEditChannel"
@delete="confirmDelete" @test="testChannel" />
</TabsContent>
<!-- 事件绑定 -->
<TabsContent value="events">
<EventBinding
:channels="channels"
:channel-types="channelTypes"
:event-types="eventTypes"
:bindings="bindings"
:tasks="allTasks"
@save="saveBindings"
@delete="deleteBinding"
/>
<EventBinding :channels="channels" :channel-types="channelTypes" :event-types="eventTypes" :bindings="bindings"
:tasks="allTasks" @save="saveBindings" @delete="deleteBinding" />
</TabsContent>
<!-- 脚本调用 -->
<TabsContent value="api">
<ApiUsage
:channels="channels"
:channel-types="channelTypes"
:api-token="apiToken"
@generate-token="generateApiToken"
@copy-token="copyApiToken"
@copy-example="copyApiExample"
/>
<ApiUsage :channels="channels" :channel-types="channelTypes" :api-token="apiToken"
@generate-token="generateApiToken" @copy-token="copyApiToken" @copy-example="copyApiExample" />
</TabsContent>
</Tabs>
<!-- 添加/编辑渠道弹窗 -->
<ChannelDialog
v-model:open="showDialog"
:is-editing="isEditing"
v-model:channel="editingChannel"
:channel-types="channelTypes"
:config-fields="channelConfigFields"
@type-change="onTypeChange"
@save="saveChannel"
/>
<ChannelDialog v-model:open="showDialog" :is-editing="isEditing" v-model:channel="editingChannel"
:channel-types="channelTypes" :config-fields="channelConfigFields" @type-change="onTypeChange"
@save="saveChannel" />
<!-- 删除确认 -->
<AlertDialog :open="showDeleteConfirm" @update:open="showDeleteConfirm = $event">
web/src/views/notify/components/ApiUsage.vue
+120 -54
View File
@@ -65,28 +65,23 @@ const shellExample = computed(() => `curl -s -X POST "http://${host.value}/api/v
<CardContent class="space-y-4">
<div class="flex items-center gap-3">
<div class="relative flex-1 group">
<Input
:model-value="apiToken"
readonly
placeholder="尚未生成 Token"
class="h-10 pr-10 bg-muted/30 border-muted-foreground/20 focus-visible:ring-primary/30 font-code text-sm tracking-tight"
/>
<div
v-if="apiToken"
@click="copyToClipboard(apiToken, 'token')"
<Input :model-value="apiToken" readonly placeholder="尚未生成 Token"
class="h-10 pr-10 bg-muted/30 border-muted-foreground/20 focus-visible:ring-primary/30 font-code text-sm tracking-tight" />
<div v-if="apiToken" @click="copyToClipboard(apiToken, 'token')"
class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-primary cursor-pointer transition-colors p-1 rounded-md hover:bg-muted"
title="复制 Token"
>
title="复制 Token">
<Check v-if="copiedBlock === 'token'" class="w-4 h-4 text-emerald-500 animate-in zoom-in" />
<Copy v-else class="w-4 h-4" />
</div>
</div>
<Button variant="default" @click="emit('generateToken')" class="h-10 px-4 shrink-0 transition-all active:scale-95">
<Button variant="default" @click="emit('generateToken')"
class="h-10 px-4 shrink-0 transition-all active:scale-95">
<RefreshCw class="w-3.5 h-3.5 mr-2" />
{{ apiToken ? '重新生成' : '生成 Token' }}
</Button>
</div>
<div class="flex items-start gap-2 p-3 rounded-lg bg-amber-500/5 border border-amber-500/10 text-[13px] text-amber-700 dark:text-amber-400">
<div
class="flex items-start gap-2 p-3 rounded-lg bg-amber-500/5 border border-amber-500/10 text-[13px] text-amber-700 dark:text-amber-400">
<Info class="w-4 h-4 mt-0.5 shrink-0" />
<p>请妥善保管您的 Token，一旦丢失需通过上方按钮重新生成。令牌将作为请求头中的 <code>notify-token</code> 字段发送。</p>
</div>
@@ -107,40 +102,63 @@ const shellExample = computed(() => `curl -s -X POST "http://${host.value}/api/v
</div>
</CardHeader>
<CardContent class="p-0 flex-1">
<div class="bg-zinc-950 dark:bg-black/40 p-5 font-code text-xs sm:text-sm leading-relaxed text-zinc-300 relative group h-full">
<div class="flex items-center justify-between mb-4 border-b border-zinc-700/50 pb-2">
<div
class="bg-zinc-50 dark:bg-zinc-950/50 p-5 font-code text-xs sm:text-sm leading-relaxed text-zinc-800 dark:text-zinc-300 relative group h-full">
<div class="flex items-center justify-between mb-6 border-b border-zinc-200 dark:border-zinc-800/50 pb-3">
<div class="flex items-center gap-2">
<Badge class="bg-emerald-600 text-white border-none py-0 px-2 text-[10px]">POST</Badge>
<code class="text-zinc-400">/api/v1/notify/send</code>
<code
class="px-2 py-0.5 bg-zinc-200/50 dark:bg-zinc-800/60 border border-zinc-300/50 dark:border-zinc-700/50 rounded-md text-[13px] text-zinc-700 dark:text-zinc-300 font-mono shadow-sm tracking-tight">/api/v1/notify/send</code>
</div>
<Button
variant="ghost"
size="icon"
class="h-7 w-7 text-zinc-500 hover:text-white hover:bg-zinc-800 transition-all"
@click="copyToClipboard(apiExample, 'api')"
>
<Button variant="ghost" size="icon"
class="h-7 w-7 text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-all rounded-md"
@click="copyToClipboard(apiExample, 'api')">
<Check v-if="copiedBlock === 'api'" class="w-3.5 h-3.5 text-emerald-500" />
<Copy v-else class="w-3.5 h-3.5" />
</Button>
</div>
<div class="space-y-4">
<div class="space-y-6">
<div>
<span class="text-zinc-500 block mb-1 uppercase text-[10px] font-bold tracking-widest">Headers</span>
<div class="pl-2 space-y-1">
<p><span class="text-zinc-500">Content-Type:</span> application/json</p>
<p><span class="text-zinc-500">notify-token:</span> <span class="text-primary">&lt;TOKEN&gt;</span></p>
<span class="block mb-2 text-zinc-500 uppercase text-[10px] font-bold tracking-widest">Headers</span>
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="text-zinc-500">Content-Type:</span>
<span>application/json</span>
</div>
<div class="flex items-center gap-2">
<span class="text-zinc-500">notify-token:</span>
<span class="text-primary">&lt;TOKEN&gt;</span>
</div>
</div>
</div>
<div>
<span class="text-zinc-500 block mb-1 uppercase text-[10px] font-bold tracking-widest">Body (JSON)</span>
<div class="pl-2">
<p class="text-zinc-400">{</p>
<p class="pl-4">"channel_id": <span class="text-orange-400">"ID"</span>, <span class="text-zinc-500 font-sans italic text-[11px]">// 渠道唯一标识</span></p>
<p class="pl-4">"title": <span class="text-orange-400">"标题"</span>, <span class="text-zinc-500 font-sans italic text-[11px]">// 可选</span></p>
<p class="pl-4">"text": <span class="text-orange-400">"内容"</span> <span class="text-zinc-500 font-sans italic text-[11px]">// 必填</span></p>
<p class="text-zinc-400">}</p>
<span class="block mb-2 text-zinc-500 uppercase text-[10px] font-bold tracking-widest">Body
(JSON)</span>
<div class="pl-2 font-mono">
<p class="text-zinc-600 dark:text-zinc-400 mb-1">{</p>
<div class="pl-4 space-y-2">
<div class="flex flex-wrap items-center gap-x-2">
<span class="text-orange-600 dark:text-orange-400">"channel_id":</span>
<span class="text-emerald-600 dark:text-emerald-400">"ID"</span><span
class="text-zinc-600 dark:text-zinc-400">,</span>
<span class="text-zinc-500 font-sans italic ml-auto whitespace-nowrap">//
渠道唯一标识</span>
</div>
<div class="flex flex-wrap items-center gap-x-2">
<span class="text-orange-600 dark:text-orange-400">"title":</span>
<span class="text-emerald-600 dark:text-emerald-400">"标题"</span><span
class="text-zinc-600 dark:text-zinc-400">,</span>
<span class="text-zinc-500 font-sans italic ml-auto whitespace-nowrap">// 可选</span>
</div>
<div class="flex flex-wrap items-center gap-x-2">
<span class="text-orange-600 dark:text-orange-400">"text":</span>
<span class="text-emerald-600 dark:text-emerald-400">"内容"</span>
<span class="text-zinc-500 font-sans italic ml-auto whitespace-nowrap">// 必填</span>
</div>
</div>
<p class="text-zinc-600 dark:text-zinc-400 mt-1">}</p>
</div>
</div>
</div>
@@ -158,12 +176,9 @@ const shellExample = computed(() => `curl -s -X POST "http://${host.value}/api/v
</div>
<CardTitle class="text-sm font-bold uppercase tracking-wider">Shell 脚本示例</CardTitle>
</div>
<Button
variant="outline"
size="sm"
<Button variant="outline" size="sm"
class="h-7 px-2 text-[10px] border-muted-foreground/30 hover:bg-muted transition-all"
@click="copyToClipboard(shellExample, 'shell')"
>
@click="copyToClipboard(shellExample, 'shell')">
<Check v-if="copiedBlock === 'shell'" class="w-3 h-3 text-emerald-500 mr-1.5" />
<Copy v-else class="w-3 h-3 mr-1.5" />
一键复制
@@ -171,24 +186,40 @@ const shellExample = computed(() => `curl -s -X POST "http://${host.value}/api/v
</div>
</CardHeader>
<CardContent class="p-0 flex-1">
<div class="bg-zinc-950 dark:bg-black/40 p-5 font-code text-[12px] sm:text-[13px] leading-relaxed text-zinc-300 h-full">
<div
class="bg-zinc-50 dark:bg-zinc-950/50 p-5 font-code text-[12px] sm:text-[13px] leading-relaxed text-zinc-800 dark:text-zinc-300 h-full">
<div class="space-y-1">
<p><span class="text-zinc-600"># 使用 CURL 调用推送接口</span></p>
<p>curl -s -X POST <span class="text-emerald-400">"http://{{ host }}/api/v1/notify/send"</span> \</p>
<p class="pl-4"> -H <span class="text-orange-400">"Content-Type: application/json"</span> \</p>
<p class="pl-4"> -H <span class="text-orange-400">"notify-token: {{ apiToken || 'YOUR_TOKEN' }}"</span> \</p>
<p class="pl-4"> -d <span class="text-orange-400">'{"channel_id":"ID","title":"任务完成","text":"脚本执行完毕"}'</span></p>
<p><span class="text-zinc-500"># 使用 CURL 调用推送接口</span></p>
<p>curl -s -X POST <span class="text-emerald-600 dark:text-emerald-400">"http://{{ host
}}/api/v1/notify/send"</span> \</p>
<p class="pl-4"> -H <span class="text-orange-600 dark:text-orange-400">"Content-Type:
application/json"</span> \</p>
<p class="pl-4"> -H <span class="text-orange-600 dark:text-orange-400">"notify-token: {{ apiToken ||
'YOUR_TOKEN' }}"</span> \
</p>
<p class="pl-4"> -d <span
class="text-orange-600 dark:text-orange-400">'{"channel_id":"ID","title":"任务完成","text":"脚本执行完毕"}'</span>
</p>
</div>
<div class="mt-8 pt-4 border-t border-zinc-800">
<span class="text-zinc-500 block mb-2 uppercase text-[10px] font-bold tracking-widest flex items-center gap-1.5">
<div class="mt-8 pt-4 border-t border-zinc-200 dark:border-zinc-800">
<span
class="text-zinc-500 block mb-2 uppercase text-[10px] font-bold tracking-widest flex items-center gap-1.5">
<Hash class="w-3 h-3" /> 渠道 ID 快速查找
</span>
<div v-if="channels.length === 0" class="text-xs text-zinc-600 italic">暂无活跃渠道</div>
<div v-if="channels.length === 0" class="text-xs text-zinc-500 italic">暂无活跃渠道</div>
<div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-2">
<div v-for="ch in channels" :key="ch.id" class="flex items-center gap-2 text-xs bg-zinc-900 px-2 py-1.5 rounded border border-zinc-800 hover:border-zinc-700 transition-colors group">
<code class="text-primary font-bold tracking-tighter font-code">{{ ch.id.slice(0, 8) }}</code>
<span class="text-zinc-500 truncate max-w-[100px]">{{ ch.name }}</span>
<div v-for="ch in channels" :key="ch.id"
class="flex items-center gap-2 text-xs bg-zinc-100/80 dark:bg-zinc-900 px-2 py-1.5 rounded border border-zinc-200 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors group">
<code class="text-primary font-bold tracking-tighter font-code"
:title="ch.id">{{ ch.id.slice(0, 8) }}</code>
<span class="text-zinc-600 dark:text-zinc-500 truncate max-w-[100px]">{{ ch.name }}</span>
<Button variant="ghost" size="icon"
class="h-5 w-5 ml-auto text-zinc-400 hover:text-zinc-800 dark:hover:text-zinc-200 hover:bg-zinc-200 dark:hover:bg-zinc-800 opacity-0 group-hover:opacity-100 transition-all rounded"
@click="copyToClipboard(ch.id, 'channel-' + ch.id)">
<Check v-if="copiedBlock === 'channel-' + ch.id" class="w-2.5 h-2.5 text-emerald-500" />
<Copy v-else class="w-2.5 h-2.5" />
</Button>
</div>
</div>
</div>
@@ -198,3 +229,38 @@ const shellExample = computed(() => `curl -s -X POST "http://${host.value}/api/v
</div>
</div>
</template>
<style scoped>
.font-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
position: relative;
}
.font-code ::selection {
background-color: rgba(59, 130, 246, 0.4);
/* 鲜亮的蓝色选中背景 */
color: #fff;
/* 选中时文字为白色 */
}
/* 兼容 Safari */
.font-code ::-moz-selection {
background-color: rgba(59, 130, 246, 0.4);
color: #fff;
}
/* 优化滚动条样式 if needed */
.font-code::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.font-code::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.font-code::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
</style>
web/src/views/notify/components/ChannelList.vue
+21 -1
View File
@@ -2,8 +2,10 @@
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Plus, Trash2, TestTube, Pencil, Bell, Calendar } from 'lucide-vue-next'
import { Plus, Trash2, TestTube, Pencil, Bell, Calendar, Copy, Check } from 'lucide-vue-next'
import type { NotifyChannel, ChannelType } from '@/api'
import { ref } from 'vue'
import { toast } from 'vue-sonner'
defineProps<{
channels: NotifyChannel[]
@@ -21,6 +23,18 @@ function getChannelTypeName(type: string, channelTypes: ChannelType[]): string {
const found = channelTypes.find(t => t.type === type)
return found ? found.label : type
}
const copiedBlock = ref<string | null>(null)
function copyToClipboard(text: string, blockId: string) {
navigator.clipboard.writeText(text).then(() => {
copiedBlock.value = blockId
toast.success('已复制长 ID')
setTimeout(() => {
copiedBlock.value = null
}, 2000)
})
}
</script>
<template>
@@ -78,6 +92,12 @@ function getChannelTypeName(type: string, channelTypes: ChannelType[]): string {
<span>{{ ch.created_at.split(' ')[0] }}</span>
</div>
<div class="flex items-center gap-1">
<Button variant="ghost" size="icon"
class="h-8 w-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
@click="copyToClipboard(ch.id, 'channel-' + ch.id)" title="复制 ID">
<Check v-if="copiedBlock === 'channel-' + ch.id" class="w-4 h-4 text-emerald-500" />
<Copy v-else class="w-4 h-4" />
</Button>
<Button variant="ghost" size="icon"
class="h-8 w-8 rounded-full hover:bg-primary/10 hover:text-primary transition-colors"
@click="emit('test', ch)" title="测试发送">