feat: opt message ways style

internal/services/notification_service.go

@@ -16,11 +16,12 @@ import (
 
 // NotifyChannel 通知渠道配置
 type NotifyChannel struct {
-	ID      string            `json:"id"`
+	ID        string            `json:"id"`
-	Name    string            `json:"name"`
+	Name      string            `json:"name"`
-	Type    string            `json:"type"`
+	Type      string            `json:"type"`
-	Enabled bool              `json:"enabled"`
+	Enabled   bool              `json:"enabled"`
-	Config  map[string]string `json:"config"`
+	CreatedAt models.LocalTime  `json:"created_at"`
+	Config    map[string]string `json:"config"`
 }
 
 // NotifyMessage 通知消息
@@ -312,11 +313,12 @@ func (s *NotificationService) getChannelsInternal() []NotifyChannel {
 			continue
 		}
 		channels = append(channels, NotifyChannel{
-			ID:      nw.ID,
+			ID:        nw.ID,
-			Name:    nw.Name,
+			Name:      nw.Name,
-			Type:    nw.Type,
+			Type:      nw.Type,
-			Enabled: nw.Enabled,
+			Enabled:   nw.Enabled,
-			Config:  config,
+			CreatedAt: nw.CreatedAt,
+			Config:    config,
 		})
 	}
 	return channels

web/src/api/index.ts

@@ -532,6 +532,7 @@ export interface NotifyChannel {
   name: string
   type: string
   enabled: boolean
+  created_at?: string
   config: Record<string, string>
 }
 

web/src/views/notify/components/ChannelList.vue

@@ -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-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div
+        <div v-for="(ch, index) in channels" :key="ch.id"
-          v-for="ch in channels"
+          class="flex flex-col p-4 rounded-xl border bg-card hover:bg-accent/30 hover:shadow-md transition-all group relative overflow-hidden">
-          :key="ch.id"
+          <!-- 装饰性背景序号 -->
-          class="flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-accent/30 transition-colors"
+          <div
-        >
+            class="absolute -right-2 -top-4 text-6xl font-bold text-primary/5 select-none transition-colors group-hover:text-primary/10">
-          <div class="flex items-center gap-3 min-w-0 flex-1">
+            {{ index + 1 }}
-            <div class="flex flex-col min-w-0">
+          </div>
-              <div class="flex items-center gap-2">
+
-                <span class="font-medium text-sm truncate">{{ ch.name }}</span>
+          <div class="flex items-start justify-between mb-4">
-                <Badge variant="secondary" class="text-[10px] shrink-0">{{ getChannelTypeName(ch.type, channelTypes) }}</Badge>
+            <div class="flex items-center gap-3">
-                <Badge
+              <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
-                  :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'"
+                <Bell class="w-5 h-5" />
-                  variant="secondary"
+              </div>
-                  class="text-[10px] shrink-0"
+              <div class="flex flex-col">
-                >
+                <span class="font-bold text-sm truncate max-w-[150px]">{{ ch.name }}</span>
-                  {{ ch.enabled ? '启用' : '禁用' }}
+                <div class="flex items-center gap-1.5 mt-0.5">
-                </Badge>
+                  <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="测试发送">
+          <div class="mt-auto pt-4 border-t flex items-center justify-between">
-              <TestTube class="w-3.5 h-3.5" />
+            <div v-if="ch.created_at" class="flex items-center gap-1 text-[10px] text-muted-foreground opacity-60">
-            </Button>
+              <Calendar class="w-3 h-3" />
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('edit', ch)" title="编辑">
+              <span>{{ ch.created_at.split(' ')[0] }}</span>
-              <Pencil class="w-3.5 h-3.5" />
+            </div>
-            </Button>
+            <div class="flex items-center gap-1">
-            <Button variant="ghost" size="icon" class="h-7 w-7 text-destructive hover:text-destructive" @click="emit('delete', ch.id)" title="删除">
+              <Button variant="ghost" size="icon"
-              <Trash2 class="w-3.5 h-3.5" />
+                class="h-8 w-8 rounded-full hover:bg-primary/10 hover:text-primary transition-colors"
-            </Button>
+                @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>