chore: update all tab style

This commit is contained in:
duorameng
2026-05-14 18:44:38 +08:00
parent 856cdfc137
commit 3a244fad85
6 changed files with 72 additions and 27 deletions
+8 -4
View File
@@ -279,10 +279,14 @@ onUnmounted(() => {
</Button>
</div>
<TabsList class="h-9 p-1 bg-muted/30 border w-full sm:w-auto">
<TabsTrigger value="agents" class="px-4 h-7 text-sm flex-1 sm:flex-none">Agent 列表</TabsTrigger>
<TabsTrigger value="regcodes" class="px-4 h-7 text-sm flex-1 sm:flex-none">
<Ticket class="h-3.5 w-3.5 mr-1.5" />令牌
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 rounded-lg w-full sm:w-auto">
<TabsTrigger value="agents" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Server class="w-3.5 h-3.5 opacity-70" />
<span>列表</span>
</TabsTrigger>
<TabsTrigger value="regcodes" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Ticket class="w-3.5 h-3.5 opacity-70" />
<span>令牌</span>
</TabsTrigger>
</TabsList>
</div>
+8 -4
View File
@@ -284,10 +284,14 @@ onBeforeUnmount(() => {
</Button>
</div>
<TabsList class="h-9 p-1 bg-muted/30 border w-full sm:w-auto">
<TabsTrigger value="normal" class="px-4 h-7 text-sm flex-1 sm:flex-none">环境变量</TabsTrigger>
<TabsTrigger value="secret" class="px-4 h-7 text-sm flex-1 sm:flex-none">
<Shield class="h-3.5 w-3.5 mr-1.5" />机密
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 rounded-lg w-full sm:w-auto">
<TabsTrigger value="normal" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Terminal class="w-3.5 h-3.5 opacity-70" />
<span>变量</span>
</TabsTrigger>
<TabsTrigger value="secret" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Shield class="w-3.5 h-3.5 opacity-70" />
<span>机密</span>
</TabsTrigger>
</TabsList>
</div>
+10 -4
View File
@@ -10,7 +10,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import {
Plus, Globe, Search, RefreshCw, Loader2, Trash2,
Terminal as TerminalIcon, X, AlertCircle,
Check, ChevronsUpDown, ArrowRight
Check, ChevronsUpDown, ArrowRight, Boxes, Zap
} from 'lucide-vue-next'
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
import { api, type MiseLanguage } from '@/api'
@@ -351,9 +351,15 @@ onMounted(() => {
<Plus class="h-3.5 w-3.5 sm:mr-2" /> <span class="whitespace-nowrap">新增语言</span>
</Button>
<Tabs v-model="activeTab" class="flex-1 sm:w-auto">
<TabsList class="grid w-full sm:w-60 grid-cols-2 h-9">
<TabsTrigger value="runtimes" class="text-sm px-1 sm:px-3">安装列表</TabsTrigger>
<TabsTrigger value="envs" class="text-sm px-1 sm:px-3">镜像加速</TabsTrigger>
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 rounded-lg w-full sm:w-auto flex">
<TabsTrigger value="runtimes" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Boxes class="w-3.5 h-3.5 opacity-70" />
<span>运行时</span>
</TabsTrigger>
<TabsTrigger value="envs" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Zap class="w-3.5 h-3.5 opacity-70" />
<span>加速</span>
</TabsTrigger>
</TabsList>
</Tabs>
</div>
+18 -6
View File
@@ -4,7 +4,7 @@ import { ref, watch } from 'vue'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Search, RefreshCw, Trash2 } from 'lucide-vue-next'
import { Search, RefreshCw, Trash2, Terminal, Cpu, Send, KeyRound } from 'lucide-vue-next'
import LoginLogTab from './tabs/LoginLogTab.vue'
import SystemEventTab from './tabs/SystemEventTab.vue'
import PushLogTab from './tabs/PushLogTab.vue'
@@ -157,11 +157,23 @@ watch(activeTab, () => {
<!-- 桌面端标签切换 -->
<Tabs v-model="activeTab" class="w-auto">
<TabsList class="h-9 p-1 bg-muted/30 border shrink-0 hidden lg:flex">
<TabsTrigger value="system" class="px-4 h-7 text-sm">系统事件</TabsTrigger>
<TabsTrigger value="scheduler" class="px-4 h-7 text-sm">调度日志</TabsTrigger>
<TabsTrigger value="push" class="px-4 h-7 text-sm">推送日志</TabsTrigger>
<TabsTrigger value="login" class="px-4 h-7 text-sm">登录日志</TabsTrigger>
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 shrink-0 hidden lg:flex rounded-lg">
<TabsTrigger value="system" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<Terminal class="w-3.5 h-3.5 opacity-70" />
<span>系统</span>
</TabsTrigger>
<TabsTrigger value="scheduler" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<Cpu class="w-3.5 h-3.5 opacity-70" />
<span>调度</span>
</TabsTrigger>
<TabsTrigger value="push" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<Send class="w-3.5 h-3.5 opacity-70" />
<span>推送</span>
</TabsTrigger>
<TabsTrigger value="login" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<KeyRound class="w-3.5 h-3.5 opacity-70" />
<span>登录</span>
</TabsTrigger>
</TabsList>
</Tabs>
+18 -5
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Send, FileText, Link, Code } from 'lucide-vue-next'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Button } from '@/components/ui/button'
import BaihuDialog from '@/components/ui/BaihuDialog.vue'
@@ -333,11 +334,23 @@ onMounted(() => {
<h2 class="text-xl sm:text-2xl font-bold tracking-tight">消息推送</h2>
<p class="text-muted-foreground text-sm">配置通知渠道绑定系统事件实现自动推送</p>
</div>
<TabsList class="flex w-full sm:w-fit overflow-x-auto overflow-y-hidden justify-start sm:justify-center bg-muted/50 p-1 rounded-xl scrollbar-hide border border-border/50">
<TabsTrigger value="channels" class="flex-1 sm:flex-none whitespace-nowrap px-3 sm:px-6 text-sm">渠道管理</TabsTrigger>
<TabsTrigger value="templates" class="flex-1 sm:flex-none whitespace-nowrap px-3 sm:px-6 text-sm">推送模板</TabsTrigger>
<TabsTrigger value="events" class="flex-1 sm:flex-none whitespace-nowrap px-3 sm:px-6 text-sm">事件绑定</TabsTrigger>
<TabsTrigger value="api" class="flex-1 sm:flex-none whitespace-nowrap px-3 sm:px-6 text-sm">脚本调用</TabsTrigger>
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 rounded-lg w-full sm:w-auto flex">
<TabsTrigger value="channels" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Send class="w-3.5 h-3.5 opacity-70" />
<span>渠道</span>
</TabsTrigger>
<TabsTrigger value="templates" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<FileText class="w-3.5 h-3.5 opacity-70" />
<span>模板</span>
</TabsTrigger>
<TabsTrigger value="events" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Link class="w-3.5 h-3.5 opacity-70" />
<span>事件</span>
</TabsTrigger>
<TabsTrigger value="api" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all flex-1 sm:flex-none">
<Code class="w-3.5 h-3.5 opacity-70" />
<span>脚本</span>
</TabsTrigger>
</TabsList>
</div>
+10 -4
View File
@@ -7,7 +7,7 @@ import Pagination from '@/components/Pagination.vue'
import TaskDialog from './TaskDialog.vue'
import RepoDialog from './RepoDialog.vue'
import LogViewer from '@/views/history/LogViewer.vue'
import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, RefreshCw, Wifi, WifiOff, Zap, ZapOff, Copy, Tag, ChevronDown, Pin, PinOff, MoreHorizontal } from 'lucide-vue-next'
import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, RefreshCw, Wifi, WifiOff, Zap, ZapOff, Copy, Tag, ChevronDown, Pin, PinOff, MoreHorizontal, CalendarClock } from 'lucide-vue-next'
import TagInput from '@/components/TagInput.vue'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
@@ -594,9 +594,15 @@ watch(() => route.query.agent_id, (newVal: any) => {
<!-- 桌面端类型切换 -->
<Tabs :model-value="filterType" @update:model-value="(v: string | number) => { filterType = String(v); handleTypeChange() }" class="shrink-0 hidden xl:block">
<TabsList class="h-9 p-1 bg-muted/30 border">
<TabsTrigger :value="TASK_TYPE.NORMAL" class="px-4 h-7 text-sm">定时任务</TabsTrigger>
<TabsTrigger :value="TASK_TYPE.REPO" class="px-4 h-7 text-sm">仓库同步</TabsTrigger>
<TabsList class="h-9 p-0.5 bg-muted/20 border border-border/40 rounded-lg">
<TabsTrigger :value="TASK_TYPE.NORMAL" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<CalendarClock class="w-3.5 h-3.5 opacity-70" />
<span>任务</span>
</TabsTrigger>
<TabsTrigger :value="TASK_TYPE.REPO" class="px-3 h-8 text-xs gap-1.5 font-medium transition-all">
<GitBranch class="w-3.5 h-3.5 opacity-70" />
<span>仓库</span>
</TabsTrigger>
</TabsList>
</Tabs>
</div>