style: decrease font size of sequence numbers in lists

This commit is contained in:
duorameng
2026-06-09 17:00:28 +08:00
parent 53eca3d51c
commit 77cec68d4d
10 changed files with 21 additions and 23 deletions
@@ -100,7 +100,7 @@ async function forceUpdate(agent: Agent) {
<div v-for="(agent, index) in agents" :key="`large-${agent.id}`"
class="flex items-center gap-2 px-4 py-1.5 hover:bg-muted/30 transition-colors">
<StatusDot :state="isOnline(agent) ? 'online' : 'offline'" :title="isOnline(agent) ? '在线' : '离线'" />
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-sm">#{{ agents.length - index }}</div>
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-[11px]">#{{ agents.length - index }}</div>
<div class="w-48 shrink-0 flex flex-col justify-center gap-0.5 overflow-hidden">
<span class="font-medium truncate cursor-pointer hover:text-primary transition-colors" @click="viewDetail(agent)">{{ agent.name }}</span>
<div v-if="agent.description" class="text-[10px] text-muted-foreground truncate">{{ agent.description }}</div>
@@ -159,7 +159,7 @@ async function forceUpdate(agent: Agent) {
<div v-for="(agent, index) in agents" :key="`medium-${agent.id}`"
class="flex items-center gap-2 px-4 py-2.5 hover:bg-muted/30 transition-colors">
<StatusDot :state="isOnline(agent) ? 'online' : 'offline'" :title="isOnline(agent) ? '在线' : '离线'" />
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-xs">#{{ agents.length - index }}</div>
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-[10px]">#{{ agents.length - index }}</div>
<div class="w-48 shrink-0 flex flex-col justify-center gap-0.5 overflow-hidden">
<span class="font-medium truncate">{{ agent.name }}</span>
<div v-if="agent.description" class="text-[10px] text-muted-foreground truncate">{{ agent.description }}</div>
@@ -203,7 +203,7 @@ async function forceUpdate(agent: Agent) {
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 pr-2">
<StatusDot :state="isOnline(agent) ? 'online' : 'offline'" :title="isOnline(agent) ? '在线' : '离线'" />
<span class="text-xs text-muted-foreground tabular-nums flex-shrink-0">#{{ agents.length - index }}</span>
<span class="text-[10px] text-muted-foreground tabular-nums flex-shrink-0">#{{ agents.length - index }}</span>
<div class="flex items-center gap-1.5 min-w-0 flex-1">
<span class="font-bold text-sm truncate" @click="viewDetail(agent)">{{ agent.name }}</span>
</div>
+1 -1
View File
@@ -448,7 +448,7 @@ onMounted(async () => {
class="appearance-none size-4 shrink-0 rounded-[5px] border border-zinc-300 dark:border-zinc-700/60 bg-zinc-50/50 dark:bg-zinc-900/30 hover:border-primary/60 checked:border-primary checked:bg-gradient-to-br checked:from-primary checked:to-indigo-600 checked:bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E')] checked:bg-[size:10px_10px] checked:bg-center checked:bg-no-repeat focus:outline-none focus:ring-2 focus:ring-primary/20 checked:shadow-[0_2px_8px_rgba(99,102,241,0.35)] checked:scale-[1.05] active:scale-95 transition-all duration-200 cursor-pointer ease-out"
/>
</div>
<div class="w-12 hidden sm:block shrink-0 text-[11px] text-muted-foreground tabular-nums pl-1">#{{ filteredDeps.length - index }}</div>
<div class="w-12 hidden sm:block shrink-0 text-[9px] text-muted-foreground tabular-nums pl-1">#{{ filteredDeps.length - index }}</div>
<span class="flex-1 font-mono text-[12px] sm:text-[13px] truncate font-medium min-w-0">
<TextOverflow :text="dep.name" title="包名" />
</span>
+3 -3
View File
@@ -204,7 +204,7 @@ onMounted(() => {
</div>
<div v-for="(env, index) in envVars" :key="`large-${env.id}`"
class="flex items-center gap-4 px-4 py-1.5 hover:bg-muted/30 transition-colors">
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-[11px]">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-48 shrink-0 flex flex-col gap-1 justify-center overflow-hidden">
<div class="flex items-center gap-1.5 overflow-hidden">
@@ -269,7 +269,7 @@ onMounted(() => {
<div class="divide-y text-sm">
<div v-for="(env, index) in envVars" :key="`med-${env.id}`"
class="flex items-center gap-4 px-4 py-2 hover:bg-muted/30 transition-colors">
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-xs">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-12 shrink-0 pl-1 text-muted-foreground tabular-nums text-[10px]">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-48 shrink-0 flex flex-col gap-1 justify-center overflow-hidden">
<div class="flex items-center gap-1.5 overflow-hidden">
@@ -321,7 +321,7 @@ onMounted(() => {
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex flex-col gap-1 flex-1 min-w-0 pr-2">
<div class="flex items-center gap-2">
<span class="text-xs text-muted-foreground tabular-nums flex-shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="text-[10px] text-muted-foreground tabular-nums flex-shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<code class="font-bold text-xs bg-muted/60 px-2 py-0.5 rounded truncate text-zinc-700 dark:text-zinc-200">{{ env.name }}</code>
<Badge v-if="isNotifyEnv(env.name)" variant="secondary" class="text-[8px] h-3.5 px-1 rounded-sm uppercase font-bold tracking-tighter leading-none shrink-0">内置</Badge>
</div>
+2 -4
View File
@@ -408,8 +408,7 @@ watch(() => route.query, (newQuery) => {
<!-- 小屏行 -->
<div class="flex sm:hidden items-center gap-2 px-3 py-2">
<StatusDot :state="log.status" />
<span class="w-14 shrink-0 text-muted-foreground text-xs tabular-nums">#{{ total - (currentPage - 1) * pageSize - index
}}</span>
<span class="w-14 shrink-0 text-muted-foreground text-[10px] tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
<GitBranch v-if="log.task_type === TASK_TYPE.REPO" class="h-3.5 w-3.5 text-primary" />
<Terminal v-else class="h-3.5 w-3.5 text-primary" />
@@ -428,8 +427,7 @@ watch(() => route.query, (newQuery) => {
<!-- 大屏行 -->
<div class="hidden sm:flex items-center gap-2 px-4 py-2">
<StatusDot :state="log.status" />
<span class="w-16 shrink-0 text-muted-foreground text-sm tabular-nums">#{{ total - (currentPage - 1) * pageSize - index
}}</span>
<span class="w-16 shrink-0 text-muted-foreground text-[11px] tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="w-10 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
<GitBranch v-if="log.task_type === TASK_TYPE.REPO" class="h-4 w-4 text-primary" />
<Terminal v-else class="h-4 w-4 text-primary" />
@@ -87,7 +87,7 @@ const filteredLanguages = computed(() => {
<div class="flex items-center gap-3 overflow-hidden">
<!-- 序号 -->
<div class="flex items-center justify-center w-6 sm:w-7 shrink-0">
<span class="text-[10px] font-mono text-muted-foreground/50 tabular-nums">#{{
<span class="text-[9px] font-mono text-muted-foreground/50 tabular-nums">#{{
filteredLanguages.length - index }}</span>
</div>
<!-- 图标 -->
+2 -2
View File
@@ -139,7 +139,7 @@ defineExpose({
class="sm:hidden p-3 hover:bg-muted/50 transition-colors cursor-pointer group" @click="showIpInfo(log.ip)">
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
<span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="text-[10px] text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="font-bold text-sm truncate">{{ log.username }}</span>
</div>
<span :class="['h-2 w-2 mt-1.5 rounded-full shrink-0 shadow-[0_0_8px]',
@@ -186,7 +186,7 @@ defineExpose({
<!-- ========== 3. 大屏布局 (Large >= 1024px) - 用户调好 ========== -->
<div v-for="(log, index) in logs" :key="`large-${log.id}`"
class="hidden lg:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors">
<span class="w-16 shrink-0 text-muted-foreground text-[13px] pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="w-16 shrink-0 text-muted-foreground text-[11px] pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<div class="w-32 shrink-0 flex items-center gap-2 min-w-0 text-[13px]">
<span :class="['h-2 w-2 rounded-full shrink-0', log.status === 'success' ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.3)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.3)]']"></span>
<span class="truncate">{{ log.username }}</span>
+2 -2
View File
@@ -185,7 +185,7 @@ function onDialogClose(open: boolean) {
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
<span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="text-[10px] text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="font-bold text-sm truncate" :title="log.title">{{ log.title }}</span>
</div>
<span :class="['h-2 w-2 mt-1.5 rounded-full shrink-0 shadow-[0_0_8px]',
@@ -237,7 +237,7 @@ function onDialogClose(open: boolean) {
<div v-for="(log, index) in logs" :key="`large-${log.id}`"
class="hidden lg:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<span class="w-16 shrink-0 text-muted-foreground text-[13px] tabular-nums pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="w-16 shrink-0 text-muted-foreground text-[11px] tabular-nums pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<div class="w-56 shrink-0 flex items-center gap-3 min-w-0 text-[13px]">
<component :is="getLevelIcon(log.level)" :class="['h-4 w-4 shrink-0 opacity-80',
log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
+2 -2
View File
@@ -185,7 +185,7 @@ function onDialogClose(open: boolean) {
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
<span class="text-xs text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="text-[10px] text-muted-foreground shrink-0 tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="font-bold text-sm truncate" :title="log.title">{{ log.title }}</span>
</div>
<span :class="['h-2 w-2 mt-1.5 rounded-full shrink-0 shadow-[0_0_8px]',
@@ -237,7 +237,7 @@ function onDialogClose(open: boolean) {
<div v-for="(log, index) in logs" :key="`large-${log.id}`"
class="hidden lg:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<span class="w-16 shrink-0 text-muted-foreground text-[13px] tabular-nums pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="w-16 shrink-0 text-muted-foreground text-[11px] tabular-nums pl-1">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<div class="w-56 shrink-0 flex items-center gap-3 min-w-0 text-[13px]">
<component :is="getLevelIcon(log.level)" :class="['h-4 w-4 shrink-0 opacity-80',
log.level === LOG_LEVEL.INFO ? 'text-blue-500' :
+2 -2
View File
@@ -196,7 +196,7 @@ function onDialogClose(open: boolean) {
:class="[selectedLogId === log.id && 'bg-accent/50']">
<div class="flex items-start justify-between mb-3 border-b border-border/40 pb-2">
<div class="flex items-center gap-2 flex-1 min-w-0 mr-2">
<span class="text-xs text-muted-foreground shrink-0">#{{ getLogIndex(index) }}</span>
<span class="text-[10px] text-muted-foreground shrink-0">#{{ getLogIndex(index) }}</span>
<span class="font-bold text-sm truncate">{{ log.title }}</span>
</div>
<span
@@ -245,7 +245,7 @@ function onDialogClose(open: boolean) {
<div v-for="(log, index) in logs" :key="`large-${log.id}`"
class="hidden lg:flex items-center gap-4 px-4 py-2 hover:bg-muted/50 transition-colors cursor-pointer group"
:class="[selectedLogId === log.id && 'bg-accent/50']" @click="showDetail(log)">
<span class="w-16 shrink-0 text-muted-foreground text-[13px] tabular-nums pl-1">#{{ getLogIndex(index) }}</span>
<span class="w-16 shrink-0 text-muted-foreground text-[11px] tabular-nums pl-1">#{{ getLogIndex(index) }}</span>
<div class="w-56 shrink-0 flex items-center gap-3 min-w-0 text-[13px]">
<span :class="['h-2 w-2 rounded-full shrink-0', log.status === LOG_STATUS.SUCCESS ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.3)]' : 'bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.3)]']"></span>
<span class="truncate" :title="log.title">
+3 -3
View File
@@ -672,7 +672,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
:state="task.running_status === 'running' ? 'running' : (task.running_status === 'queued' || task.running_status === 'pending' ? 'pending' : 'none')"
:title="task.running_status === 'running' ? '运行中' : (task.running_status === 'queued' || task.running_status === 'pending' ? '排队中' : '')"
/>
<div class="w-12 shrink-0 text-muted-foreground tabular-nums">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-12 shrink-0 text-muted-foreground tabular-nums text-[11px]">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<span class="w-8 shrink-0 flex justify-center" :title="getTaskTypeTitle(task.type || 'task')">
<div class="relative">
<GitBranch v-if="task.type === TASK_TYPE.REPO" class="h-4 w-4 text-primary" />
@@ -773,7 +773,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
<div v-if="task.running_status === 'running'" class="h-1.5 w-1.5 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)] shrink-0" />
<div v-else-if="task.running_status === 'queued' || task.running_status === 'pending'" class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse shrink-0" />
<div v-else class="h-1 w-1 rounded-full bg-muted-foreground/20 shrink-0" />
<div class="w-12 shrink-0 text-muted-foreground tabular-nums text-xs">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-12 shrink-0 text-muted-foreground tabular-nums text-[10px]">#{{ total - (currentPage - 1) * pageSize - index }}</div>
<div class="w-48 shrink-0 flex items-center gap-2 overflow-hidden">
<span class="shrink-0" :title="getTaskTypeTitle(task.type || 'task')">
<div class="relative">
@@ -847,7 +847,7 @@ watch(() => route.query.agent_id, (newVal: any) => {
<div v-if="task.running_status === 'running'" class="h-1.5 w-1.5 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)] shrink-0" />
<div v-else-if="task.running_status === 'queued' || task.running_status === 'pending'" class="h-1.5 w-1.5 rounded-full bg-blue-400 animate-pulse shrink-0" />
<div v-else class="h-1 w-1 rounded-full bg-muted-foreground/20 shrink-0" />
<span class="text-xs text-muted-foreground tabular-nums flex-shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="text-[10px] text-muted-foreground tabular-nums flex-shrink-0">#{{ total - (currentPage - 1) * pageSize - index }}</span>
<span class="shrink-0">
<div class="relative">
<GitBranch v-if="task.type === TASK_TYPE.REPO" class="h-3.5 w-3.5 text-primary" />