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

feat: opt message ways style

Browse Source
This commit is contained in:
engigu
2026-03-04 22:02:50 +08:00
parent 81b8d2a93d
commit 78786799bb
3 changed files with 62 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/notify/components/ChannelList.vue
+49 -29
View File
@@ -2,7 +2,7 @@
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 } from 'lucide-vue-next'
import { Plus, Trash2, TestTube, Pencil, Bell, Calendar } from 'lucide-vue-next'
import type { NotifyChannel, ChannelType } from '@/api'
defineProps<{
@@ -43,37 +43,57 @@ function getChannelTypeName(type: string, channelTypes: ChannelType[]): string {
<p class="text-sm">暂无通知渠道</p>
<p class="text-xs mt-1">点击"添加渠道"开始配置</p>
</div>
<div v-else class="space-y-3">
<div
v-for="ch in channels"
:key="ch.id"
class="flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-accent/30 transition-colors"
>
<div class="flex items-center gap-3 min-w-0 flex-1">
<div class="flex flex-col min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium text-sm truncate">{{ ch.name }}</span>
<Badge variant="secondary" class="text-[10px] shrink-0">{{ getChannelTypeName(ch.type, channelTypes) }}</Badge>
<Badge
:class="ch.enabled ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20' : 'bg-zinc-500/10 text-zinc-500 border-zinc-500/20'"
variant="secondary"
class="text-[10px] shrink-0"
>
{{ ch.enabled ? '启用' : '禁用' }}
</Badge>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div v-for="(ch, index) in channels" :key="ch.id"
class="flex flex-col p-4 rounded-xl border bg-card hover:bg-accent/30 hover:shadow-md transition-all group relative overflow-hidden">
<!-- 装饰性背景序号 -->
<div
class="absolute -right-2 -top-4 text-6xl font-bold text-primary/5 select-none transition-colors group-hover:text-primary/10">
{{ index + 1 }}
</div>
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
<Bell class="w-5 h-5" />
</div>
<div class="flex flex-col">
<span class="font-bold text-sm truncate max-w-[150px]">{{ ch.name }}</span>
<div class="flex items-center gap-1.5 mt-0.5">
<Badge variant="outline" class="text-[9px] px-1 h-4 font-normal">{{ getChannelTypeName(ch.type,
channelTypes) }}</Badge>
<Badge
:class="ch.enabled ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20' : 'bg-zinc-500/10 text-zinc-500 border-zinc-500/20'"
variant="secondary" class="text-[9px] px-1 h-4 font-normal">
{{ ch.enabled ? '启用' : '禁用' }}
</Badge>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('test', ch)" title="测试发送">
<TestTube class="w-3.5 h-3.5" />
</Button>
<Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('edit', ch)" title="编辑">
<Pencil class="w-3.5 h-3.5" />
</Button>
<Button variant="ghost" size="icon" class="h-7 w-7 text-destructive hover:text-destructive" @click="emit('delete', ch.id)" title="删除">
<Trash2 class="w-3.5 h-3.5" />
</Button>
<div class="mt-auto pt-4 border-t flex items-center justify-between">
<div v-if="ch.created_at" class="flex items-center gap-1 text-[10px] text-muted-foreground opacity-60">
<Calendar class="w-3 h-3" />
<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-primary/10 hover:text-primary transition-colors"
@click="emit('test', ch)" title="测试发送">
<TestTube class="w-4 h-4" />
</Button>
<Button variant="ghost" size="icon"
class="h-8 w-8 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
@click="emit('edit', ch)" title="编辑">
<Pencil class="w-4 h-4" />
</Button>
<Button variant="ghost" size="icon"
class="h-8 w-8 rounded-full text-destructive hover:bg-destructive/10 transition-colors"
@click="emit('delete', ch.id)" title="删除">
<Trash2 class="w-4 h-4" />
</Button>
</div>
</div>
</div>
</div>