feat: opt message ways style

internal/services/notification_service.go

@@ -20,6 +20,7 @@ type NotifyChannel struct {
 	Name      string            `json:"name"`
 	Type      string            `json:"type"`
 	Enabled   bool              `json:"enabled"`
+	CreatedAt models.LocalTime  `json:"created_at"`
 	Config    map[string]string `json:"config"`
 }
 
@@ -316,6 +317,7 @@ func (s *NotificationService) getChannelsInternal() []NotifyChannel {
 			Name:      nw.Name,
 			Type:      nw.Type,
 			Enabled:   nw.Enabled,
+			CreatedAt: nw.CreatedAt,
 			Config:    config,
 		})
 	}

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,40 +43,60 @@ 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 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
-          v-for="ch in channels"
+            class="absolute -right-2 -top-4 text-6xl font-bold text-primary/5 select-none transition-colors group-hover:text-primary/10">
-          :key="ch.id"
+            {{ index + 1 }}
-          class="flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-accent/30 transition-colors"
+          </div>
-        >
+
-          <div class="flex items-center gap-3 min-w-0 flex-1">
+          <div class="flex items-start justify-between mb-4">
-            <div class="flex flex-col min-w-0">
+            <div class="flex items-center gap-3">
-              <div class="flex items-center gap-2">
+              <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
-                <span class="font-medium text-sm truncate">{{ ch.name }}</span>
+                <Bell class="w-5 h-5" />
-                <Badge variant="secondary" class="text-[10px] shrink-0">{{ getChannelTypeName(ch.type, channelTypes) }}</Badge>
+              </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"
+                    variant="secondary" class="text-[9px] px-1 h-4 font-normal">
-                  class="text-[10px] shrink-0"
-                >
                     {{ ch.enabled ? '启用' : '禁用' }}
                   </Badge>
                 </div>
               </div>
             </div>
-          <div class="flex items-center gap-1 shrink-0">
+          </div>
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="emit('test', ch)" title="测试发送">
+
-              <TestTube class="w-3.5 h-3.5" />
+          <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-7 w-7" @click="emit('edit', ch)" title="编辑">
+              <Button variant="ghost" size="icon"
-              <Pencil class="w-3.5 h-3.5" />
+                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-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 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>
     </CardContent>
   </Card>
 </template>