From 37571b8e5b98cbd0663938798c016af1d6479088 Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Tue, 31 Mar 2026 11:59:27 +0800
Subject: [PATCH] chore: fix more pages style

---
 web/src/views/agents/Agents.vue             | 10 ++---
 web/src/views/dependencies/Dependencies.vue | 30 +++++++------
 web/src/views/environments/Environments.vue |  8 ++--
 web/src/views/languages/Languages.vue       | 48 ++++++++++++---------
 4 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/web/src/views/agents/Agents.vue b/web/src/views/agents/Agents.vue
index c3d9b5f..5f69254 100644
--- a/web/src/views/agents/Agents.vue
+++ b/web/src/views/agents/Agents.vue
@@ -204,18 +204,18 @@ onUnmounted(() => {
 
 <template>
   <div class="space-y-4">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
       <div>
         <h2 class="text-xl sm:text-2xl font-bold tracking-tight">Agent 管理</h2>
         <p class="text-muted-foreground text-sm">管理远程执行代理</p>
       </div>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 w-full md:w-auto">
         <div class="relative flex-1 sm:flex-none">
           <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input v-model="searchQuery" placeholder="搜索..." class="h-9 pl-8 w-full sm:w-48 text-sm" />
+          <Input v-model="searchQuery" placeholder="搜索..." class="h-9 pl-8 w-full sm:w-40 md:w-48 text-sm" />
         </div>
-        <Button variant="outline" size="sm" class="h-9" @click="showDownloadDialog = true">
-          <Download class="h-4 w-4 mr-1.5" />下载
+        <Button variant="outline" size="sm" class="h-9 shrink-0" @click="showDownloadDialog = true">
+          <Download class="h-4 w-4 sm:mr-1.5" /> <span class="hidden sm:inline">下载</span>
         </Button>
         <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadAgents" :disabled="loading">
           <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
diff --git a/web/src/views/dependencies/Dependencies.vue b/web/src/views/dependencies/Dependencies.vue
index b1bb470..0f4475a 100644
--- a/web/src/views/dependencies/Dependencies.vue
+++ b/web/src/views/dependencies/Dependencies.vue
@@ -233,26 +233,28 @@ onMounted(async () => {
     <div class="mt-4">
       <div class="rounded-lg border bg-card overflow-x-auto">
         <!-- 工具栏 -->
-        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-3 border-b bg-muted/10">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-3 px-4 py-3 border-b bg-muted/10">
           <div class="flex items-center gap-2">
             <Badge variant="secondary">{{ filteredDeps.length }} 个包</Badge>
           </div>
-          <div class="flex items-center gap-2">
+          <div class="flex flex-wrap items-center gap-2">
             <div class="relative flex-1 sm:flex-none">
               <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input v-model="searchQuery" placeholder="搜索包名..." class="h-9 pl-8 w-full sm:w-48 text-sm" />
+              <Input v-model="searchQuery" placeholder="搜索包名..." class="h-9 pl-8 w-full sm:w-40 md:w-48 text-sm" />
+            </div>
+            <div class="flex items-center gap-2">
+              <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadDeps" :disabled="loading">
+                <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
+              </Button>
+              <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll"
+                :disabled="reinstallingAll || filteredDeps.length === 0">
+                <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span
+                  class="hidden sm:inline">全部重装</span>
+              </Button>
+              <Button size="sm" class="h-9 shrink-0" @click="openInstallDialog">
+                <Download class="h-4 w-4 sm:mr-1.5" /> <span class="hidden sm:inline">安装</span>
+              </Button>
             </div>
-            <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadDeps" :disabled="loading">
-              <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': loading }" />
-            </Button>
-            <Button variant="outline" size="sm" class="h-9 shrink-0" @click="reinstallAll"
-              :disabled="reinstallingAll || filteredDeps.length === 0">
-              <RotateCw class="h-4 w-4 sm:mr-1.5" :class="{ 'animate-spin': reinstallingAll }" /> <span
-                class="hidden sm:inline">全部重装</span>
-            </Button>
-            <Button size="sm" class="h-9 shrink-0" @click="openInstallDialog">
-              <Download class="h-4 w-4 sm:mr-1.5" /> <span class="hidden sm:inline">安装</span>
-            </Button>
           </div>
         </div>
 
diff --git a/web/src/views/environments/Environments.vue b/web/src/views/environments/Environments.vue
index eaea4bf..5a3d73e 100644
--- a/web/src/views/environments/Environments.vue
+++ b/web/src/views/environments/Environments.vue
@@ -247,16 +247,16 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="space-y-6">
-    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
       <div>
         <h2 class="text-xl sm:text-2xl font-bold tracking-tight">环境变量</h2>
         <p class="text-muted-foreground text-sm">管理脚本执行时的环境变量</p>
       </div>
-      <div class="flex flex-col sm:flex-row items-center gap-2">
+      <div class="flex flex-col sm:flex-row items-center gap-3 w-full md:w-auto">
         <div class="flex w-full sm:w-auto items-center gap-2">
           <div class="relative flex-1 sm:flex-none">
             <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-            <Input v-model="filterName" placeholder="搜索名称..." class="h-9 pl-9 w-full sm:w-48 text-sm"
+            <Input v-model="filterName" placeholder="搜索名称..." class="h-9 pl-9 w-full sm:w-40 md:w-48 text-sm"
               @input="handleSearch" />
           </div>
           <Button @click="openCreate" class="shrink-0 h-9" :disabled="activeTab === ENV_TYPE.SECRET && !isSecretSet">
@@ -264,7 +264,7 @@ onBeforeUnmount(() => {
           </Button>
         </div>
         <Tabs v-model="activeTab" class="w-full sm:w-auto shrink-0">
-          <TabsList class="grid w-full grid-cols-2 sm:w-[200px] h-9">
+          <TabsList class="grid w-full grid-cols-2 sm:w-[180px] h-9">
             <TabsTrigger value="normal" class="text-sm">
               <span>环境变量</span>
             </TabsTrigger>
diff --git a/web/src/views/languages/Languages.vue b/web/src/views/languages/Languages.vue
index 25b5448..3f339bf 100644
--- a/web/src/views/languages/Languages.vue
+++ b/web/src/views/languages/Languages.vue
@@ -331,33 +331,41 @@ onMounted(() => {
 
 <template>
     <div class="space-y-4">
-        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-            <div class="flex-1">
+        <!-- 顶栏：标题与操作 -->
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div>
                 <h2 class="text-xl sm:text-2xl font-bold tracking-tight">语言依赖</h2>
-                <div class="mt-1 space-y-1">
-                    <p class="text-muted-foreground text-sm">管理系统环境中的编程语言运行时及相关包依赖 (Mise)</p>
-                    <div class="flex items-start gap-2 text-xs text-amber-600 dark:text-amber-500 bg-amber-500/5 px-3 py-2.5 rounded-lg border border-amber-500/20 leading-relaxed">
-                        <AlertCircle class="h-3.5 w-3.5 mt-0.5 shrink-0" />
-                        <span><b>设为默认</b>：将选定版本设为系统全局默认 (mise use -g)，生效后所有未通过高级配置指定特定环境的任务将默认调用此环境。</span>
-                    </div>
-                </div>
+                <p class="text-muted-foreground text-sm mt-0.5">管理系统环境中的编程语言运行时及相关包依赖 (Mise)</p>
+            </div>
+
+            <div class="flex flex-col sm:flex-row items-center gap-3 shrink-0 w-full md:w-auto">
+                <Button @click="openInstallDialog" class="w-full sm:w-auto h-9">
+                    <Plus class="h-4 w-4 mr-2" /> 新增语言
+                </Button>
+                <!-- 这里使用 Tabs 内部的 TabsList，所以外部需要包裹 Tabs -->
+                <Tabs v-model="activeTab" class="w-full sm:w-auto">
+                    <TabsList class="grid w-full sm:w-64 grid-cols-2 h-9">
+                        <TabsTrigger value="runtimes">安装列表</TabsTrigger>
+                        <TabsTrigger value="envs">镜像加速</TabsTrigger>
+                    </TabsList>
+                </Tabs>
             </div>
-            <Button @click="openInstallDialog">
-                <Plus class="h-4 w-4 mr-2" /> 新增语言
-            </Button>
         </div>
 
-        <div v-if="errorMsg"
-            class="bg-destructive/10 border border-destructive/20 rounded-lg p-4 flex items-center gap-3 text-destructive">
-            <AlertCircle class="h-5 w-5 shrink-0" />
-            <p class="text-sm font-medium">{{ errorMsg }}</p>
+        <!-- 贴士栏：全宽 Banner 增加视觉重心 -->
+        <div class="flex items-center gap-2.5 text-[13px] text-amber-600 dark:text-amber-500 bg-amber-500/10 px-4 py-2.5 rounded-lg border border-amber-500/20 leading-relaxed shadow-sm select-none">
+            <AlertCircle class="h-4 w-4 shrink-0" />
+            <span>
+                <b class="font-bold">设为默认</b>：将选定版本设为系统全局默认 (mise use -g)，生效后所有未通过高级配置指定特定环境的任务将默认调用此环境。
+            </span>
         </div>
 
         <Tabs v-model="activeTab" class="w-full">
-            <TabsList class="grid w-full sm:w-72 grid-cols-2 mb-4">
-                <TabsTrigger value="runtimes">安装列表</TabsTrigger>
-                <TabsTrigger value="envs">镜像加速</TabsTrigger>
-            </TabsList>
+            <div v-if="errorMsg"
+                class="bg-destructive/10 border border-destructive/20 rounded-lg p-4 flex items-center gap-3 text-destructive mb-4">
+                <AlertCircle class="h-5 w-5 shrink-0" />
+                <p class="text-sm font-medium">{{ errorMsg }}</p>
+            </div>
 
             <TabsContent value="runtimes" class="space-y-4 outline-none">
                 <!-- 列表部分 -->