chore: update all tab style
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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,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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user