From 41cf9fda4490ddc79310ad538e407acb8f2f79ea Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Wed, 24 Dec 2025 11:48:39 +0800
Subject: [PATCH] fix: opt mobile style

---
 web/src/views/editor/Editor.vue     | 28 ++++++++++++++--------------
 web/src/views/settings/Settings.vue | 12 ++++++------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/web/src/views/editor/Editor.vue b/web/src/views/editor/Editor.vue
index e3f363f..b7bc171 100644
--- a/web/src/views/editor/Editor.vue
+++ b/web/src/views/editor/Editor.vue
@@ -280,9 +280,9 @@ onMounted(initFromUrl)
 </script>
 
 <template>
-  <div class="flex h-[calc(100vh-100px)] gap-2">
+  <div class="flex flex-col lg:flex-row h-[calc(100vh-100px)] gap-2">
     <!-- 文件树 -->
-    <div class="w-56 flex-shrink-0 border rounded-md flex flex-col">
+    <div class="w-full lg:w-56 h-48 lg:h-auto flex-shrink-0 border rounded-md flex flex-col">
       <div class="flex items-center justify-between p-2 border-b">
         <span class="text-xs font-medium">脚本文件</span>
         <div class="flex gap-1">
@@ -321,26 +321,26 @@ onMounted(initFromUrl)
     </div>
 
     <!-- 编辑器 -->
-    <div class="flex-1 border rounded-md flex flex-col overflow-hidden">
-      <div class="flex items-center justify-between p-2 border-b">
-        <span class="text-xs font-medium truncate">
+    <div class="flex-1 min-h-[300px] border rounded-md flex flex-col overflow-hidden">
+      <div class="flex items-center justify-between p-2 border-b gap-2">
+        <span class="text-xs font-medium truncate flex-1 min-w-0">
           {{ selectedFile || '选择文件进行编辑' }}
           <span v-if="hasChanges" class="text-orange-500 ml-1">●</span>
         </span>
-        <div v-if="selectedFile" class="flex gap-1">
-          <Button v-if="!isEditMode" variant="ghost" size="sm" class="h-6 text-xs gap-1" @click="isEditMode = true">
-            <Pencil class="h-3 w-3" /> 编辑
+        <div v-if="selectedFile" class="flex gap-1 shrink-0">
+          <Button v-if="!isEditMode" variant="ghost" size="sm" class="h-6 text-xs gap-1 px-2" @click="isEditMode = true">
+            <Pencil class="h-3 w-3" /> <span class="hidden sm:inline">编辑</span>
           </Button>
           <template v-else>
-            <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" @click="isEditMode = false; fileContent = originalContent">
-              <Eye class="h-3 w-3" /> 查看
+            <Button variant="ghost" size="sm" class="h-6 text-xs gap-1 px-2" @click="isEditMode = false; fileContent = originalContent">
+              <Eye class="h-3 w-3" /> <span class="hidden sm:inline">查看</span>
             </Button>
-            <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" :disabled="!hasChanges" @click="saveFile">
-              <Save class="h-3 w-3" /> 保存
+            <Button variant="ghost" size="sm" class="h-6 text-xs gap-1 px-2" :disabled="!hasChanges" @click="saveFile">
+              <Save class="h-3 w-3" /> <span class="hidden sm:inline">保存</span>
             </Button>
           </template>
-          <Button variant="ghost" size="sm" class="h-6 text-xs gap-1" @click="runScript">
-            <Play class="h-3 w-3" /> 运行
+          <Button variant="ghost" size="sm" class="h-6 text-xs gap-1 px-2" @click="runScript">
+            <Play class="h-3 w-3" /> <span class="hidden sm:inline">运行</span>
           </Button>
         </div>
       </div>
diff --git a/web/src/views/settings/Settings.vue b/web/src/views/settings/Settings.vue
index 8a5d2cc..cc39ae7 100644
--- a/web/src/views/settings/Settings.vue
+++ b/web/src/views/settings/Settings.vue
@@ -19,12 +19,12 @@ const activeTab = ref('password')
     </div>
 
     <Tabs v-model="activeTab" class="w-full">
-      <TabsList class="flex-wrap h-auto gap-1">
-        <TabsTrigger value="password" class="text-xs sm:text-sm">密码修改</TabsTrigger>
-        <TabsTrigger value="site" class="text-xs sm:text-sm">站点设置</TabsTrigger>
-        <TabsTrigger value="scheduler" class="text-xs sm:text-sm">调度设置</TabsTrigger>
-        <TabsTrigger value="backup" class="text-xs sm:text-sm">备份恢复</TabsTrigger>
-        <TabsTrigger value="about" class="text-xs sm:text-sm">关于</TabsTrigger>
+      <TabsList class="w-full sm:w-auto grid grid-cols-5 sm:inline-flex h-auto gap-1 p-1">
+        <TabsTrigger value="password" class="text-xs px-2 sm:px-3 py-1.5">密码修改</TabsTrigger>
+        <TabsTrigger value="site" class="text-xs px-2 sm:px-3 py-1.5">站点设置</TabsTrigger>
+        <TabsTrigger value="scheduler" class="text-xs px-2 sm:px-3 py-1.5">调度设置</TabsTrigger>
+        <TabsTrigger value="backup" class="text-xs px-2 sm:px-3 py-1.5">备份恢复</TabsTrigger>
+        <TabsTrigger value="about" class="text-xs px-2 sm:px-3 py-1.5">关于</TabsTrigger>
       </TabsList>
 
       <TabsContent value="password" class="mt-6">