From f8c611573760744330fd1194cc869d67b0b0f822 Mon Sep 17 00:00:00 2001
From: mei <i@mmeiblog.cn>
Date: Sun, 26 Jul 2026 22:57:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 侧边栏在窄屏改为抽屉：汉堡按钮唤起、遮罩点击关闭、切换路由自动收起
- 页头纵向排列，操作按钮与筛选控件撑满一行
- 对话框改用视口百分比宽度，表单标签改为顶部对齐，内容区限高可滚动
- 表格隐藏次要列并把操作列固定在右侧，仍可横向滚动查看全部
- 仪表盘倒计时环与信息上下排列，统计卡改两列
- 分页器在窄屏收缩为精简布局
- 输入框字号提到 16px，避免 iOS Safari 聚焦时自动缩放
- 新增 useIsMobile composable 处理 CSS 覆盖不到的部分

顺带修复汉堡按钮在桌面端未隐藏：.menu-btn 与后声明的 .icon-btn
特异性相同被覆盖，改用 .icon-btn.menu-btn 复合选择器。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/frontend/src/assets/main.css              | 108 ++++++++++++++++
 web/frontend/src/composables/useBreakpoint.ts |  36 ++++++
 web/frontend/src/layouts/MainLayout.vue       | 119 +++++++++++++++++-
 web/frontend/src/views/AccountsView.vue       |  16 ++-
 web/frontend/src/views/DashboardView.vue      |  75 ++++++++++-
 web/frontend/src/views/LoginView.vue          |  28 ++++-
 web/frontend/src/views/LogsView.vue           |  56 +++++++--
 web/frontend/src/views/RulesView.vue          |  39 ++++--
 web/frontend/src/views/SettingsView.vue       |   7 +-
 web/frontend/src/views/TimersView.vue         |  65 +++++++++-
 10 files changed, 507 insertions(+), 42 deletions(-)
 create mode 100644 web/frontend/src/composables/useBreakpoint.ts

diff --git a/web/frontend/src/assets/main.css b/web/frontend/src/assets/main.css
index d5a6fdd..80f7439 100644
--- a/web/frontend/src/assets/main.css
+++ b/web/frontend/src/assets/main.css
@@ -59,6 +59,7 @@ body,
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   margin-bottom: 20px;
 }
 
@@ -204,3 +205,110 @@ body,
 ::-webkit-scrollbar-track {
   background: transparent;
 }
+
+/* ============================================
+   移动端适配 (<= 768px)
+   ============================================ */
+
+@media (max-width: 768px) {
+  /* 页头改为纵向排列，标题与操作按钮各占一行 */
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+  }
+
+  .page-header h2 {
+    font-size: 19px;
+  }
+
+  /* 页头里的按钮组撑满一行，方便单手点击 */
+  .page-header .el-button,
+  .page-header .el-select,
+  .page-header .el-input {
+    width: 100%;
+  }
+
+  /* 圆形图标按钮不参与拉伸 */
+  .page-header .el-button.is-circle {
+    width: 34px;
+    flex: none;
+  }
+
+  /* 对话框贴合屏幕，避免固定 px 宽度溢出 */
+  .el-dialog {
+    --el-dialog-width: 92vw !important;
+    width: 92vw !important;
+    max-width: 92vw;
+    margin-top: 8vh !important;
+    border-radius: 14px;
+  }
+
+  .el-dialog__body {
+    max-height: 66vh;
+    overflow-y: auto;
+    padding: 16px 18px;
+  }
+
+  .el-dialog__footer .el-button {
+    min-width: 88px;
+  }
+
+  /* 确认弹窗同样收窄 */
+  .el-message-box {
+    width: 90vw !important;
+    max-width: 90vw;
+  }
+
+  /* 消息提示避开顶栏 */
+  .el-message {
+    min-width: 0;
+    width: calc(100vw - 32px);
+  }
+
+  /* 表单标签改为顶部对齐，横向空间太窄放不下 */
+  .el-form--label-top .el-form-item__label {
+    padding-bottom: 4px;
+  }
+
+  /* 卡片内边距收紧 */
+  .el-card__body {
+    padding: 16px;
+  }
+
+  /* 下拉菜单项加大点击区域 */
+  .el-dropdown-menu__item {
+    padding: 10px 18px;
+  }
+
+  /* 输入字号不小于 16px，否则 iOS Safari 聚焦时会自动放大整个页面 */
+  .el-input__inner,
+  .el-textarea__inner,
+  .el-select__input {
+    font-size: 16px;
+  }
+
+  /* 表格横向滚动更顺滑，并收紧内边距塞下更多列 */
+  .el-table__body-wrapper {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .el-table .cell {
+    padding: 0 8px;
+  }
+
+  .el-table .el-button + .el-button {
+    margin-left: 6px;
+  }
+}
+
+/* 超窄屏(<=380px)进一步压缩 */
+@media (max-width: 380px) {
+  .el-card__body {
+    padding: 14px;
+  }
+
+  .page-header h2 {
+    font-size: 18px;
+  }
+}
diff --git a/web/frontend/src/composables/useBreakpoint.ts b/web/frontend/src/composables/useBreakpoint.ts
new file mode 100644
index 0000000..130d79f
--- /dev/null
+++ b/web/frontend/src/composables/useBreakpoint.ts
@@ -0,0 +1,36 @@
+import { onUnmounted, ref } from 'vue'
+
+/** 移动端断点，与 main.css 中的媒体查询保持一致 */
+export const MOBILE_BREAKPOINT = 768
+
+/**
+ * 响应式的移动端判断。
+ *
+ * 用于那些光靠 CSS 改不了的地方，比如表格列的显隐、分页器布局、表单标签位置。
+ *
+ * 除了监听 matchMedia 的 change，额外挂一个 resize 兜底：
+ * 某些环境(内嵌 WebView、开发者工具的设备模拟)改视口时不会派发 change，
+ * 只靠 change 会导致旋转屏幕后布局不跟着变。
+ */
+export function useIsMobile() {
+  const query = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`)
+  const isMobile = ref(query.matches)
+
+  const sync = () => {
+    if (isMobile.value !== query.matches) {
+      isMobile.value = query.matches
+    }
+  }
+
+  query.addEventListener('change', sync)
+  window.addEventListener('resize', sync, { passive: true })
+  window.addEventListener('orientationchange', sync)
+
+  onUnmounted(() => {
+    query.removeEventListener('change', sync)
+    window.removeEventListener('resize', sync)
+    window.removeEventListener('orientationchange', sync)
+  })
+
+  return isMobile
+}
diff --git a/web/frontend/src/layouts/MainLayout.vue b/web/frontend/src/layouts/MainLayout.vue
index 1d9b544..eb8f160 100644
--- a/web/frontend/src/layouts/MainLayout.vue
+++ b/web/frontend/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import {
@@ -12,6 +12,7 @@ import {
   SwitchButton,
   Moon,
   Sunny,
+  Fold,
 } from '@element-plus/icons-vue'
 import { useUserStore } from '@/stores/user'
 import LogoMark from '@/components/LogoMark.vue'
@@ -20,6 +21,17 @@ const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore()
 
+/** 移动端侧边栏抽屉的展开状态 */
+const drawerOpen = ref(false)
+
+// 切换路由后自动收起抽屉
+watch(
+  () => route.path,
+  () => {
+    drawerOpen.value = false
+  },
+)
+
 const menus = [
   { path: '/dashboard', title: '仪表盘', icon: Odometer },
   { path: '/timers', title: '定时器', icon: TimerIcon },
@@ -53,8 +65,13 @@ async function handleLogout() {
 
 <template>
   <div class="layout">
-    <!-- 侧边栏 -->
-    <aside class="aside">
+    <!-- 移动端抽屉遮罩 -->
+    <Transition name="fade">
+      <div v-if="drawerOpen" class="drawer-mask" @click="drawerOpen = false" />
+    </Transition>
+
+    <!-- 侧边栏：桌面端常驻，移动端为抽屉 -->
+    <aside class="aside" :class="{ open: drawerOpen }">
       <div class="logo">
         <div class="logo-mark"><LogoMark :size="22" /></div>
         <div class="logo-name">
@@ -84,7 +101,12 @@ async function handleLogout() {
     <!-- 主区域 -->
     <div class="content">
       <header class="header">
-        <div class="header-title">{{ route.meta.title ?? '' }}</div>
+        <div class="header-left">
+          <button class="icon-btn menu-btn" title="菜单" @click="drawerOpen = true">
+            <el-icon :size="18"><Fold /></el-icon>
+          </button>
+          <div class="header-title">{{ route.meta.title ?? '' }}</div>
+        </div>
         <div class="header-actions">
           <button class="icon-btn" :title="isDark ? '切换到亮色' : '切换到暗色'" @click="toggleDark">
             <el-icon :size="17"><Moon v-if="!isDark" /><Sunny v-else /></el-icon>
@@ -92,7 +114,7 @@ async function handleLogout() {
           <el-dropdown>
             <span class="user-chip">
               <span class="user-avatar">{{ userStore.user?.username?.[0]?.toUpperCase() }}</span>
-              {{ userStore.user?.username }}
+              <span class="user-name">{{ userStore.user?.username }}</span>
             </span>
             <template #dropdown>
               <el-dropdown-menu>
@@ -125,6 +147,38 @@ async function handleLogout() {
   display: flex;
 }
 
+/* 移动端抽屉遮罩 */
+.drawer-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1999;
+  background: rgb(0 0 0 / 0.45);
+  backdrop-filter: blur(2px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s var(--gb-ease);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 汉堡按钮只在移动端出现。
+   用复合选择器压过后面的 .icon-btn { display: flex }，避免受声明顺序影响。 */
+.icon-btn.menu-btn {
+  display: none;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
 /* ---------- 侧边栏：墨色 + 药丸导航 ---------- */
 
 .aside {
@@ -309,5 +363,60 @@ async function handleLogout() {
   flex: 1;
   overflow-y: auto;
   padding: 24px 28px 40px;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ---------- 移动端 ---------- */
+
+@media (max-width: 768px) {
+  /* 侧边栏脱离文档流，变成从左侧滑出的抽屉 */
+  .aside {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 2000;
+    width: 250px;
+    transform: translateX(-100%);
+    transition: transform 0.28s var(--gb-ease);
+    box-shadow: 4px 0 24px rgb(0 0 0 / 0.25);
+  }
+
+  .aside.open {
+    transform: translateX(0);
+  }
+
+  .icon-btn.menu-btn {
+    display: flex;
+  }
+
+  .header {
+    height: 54px;
+    padding: 0 14px;
+  }
+
+  .header-title {
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header-actions {
+    gap: 6px;
+  }
+
+  /* 窄屏只留头像，省出空间给标题 */
+  .user-name {
+    display: none;
+  }
+
+  .user-chip {
+    padding: 4px;
+  }
+
+  .main {
+    padding: 16px 14px 32px;
+  }
 }
 </style>
diff --git a/web/frontend/src/views/AccountsView.vue b/web/frontend/src/views/AccountsView.vue
index 721d8d9..921fecf 100644
--- a/web/frontend/src/views/AccountsView.vue
+++ b/web/frontend/src/views/AccountsView.vue
@@ -8,6 +8,9 @@ import type { Account } from '@/api/types'
 import { useMetaStore } from '@/stores/meta'
 import { formatDateTime } from '@/utils/format'
 import ConfigForm from '@/components/ConfigForm.vue'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const metaStore = useMetaStore()
 
@@ -138,17 +141,18 @@ onMounted(async () => {
     </el-empty>
 
     <el-card v-else class="gb-rise">
-    <el-table :data="accounts">
-      <el-table-column prop="name" label="名称" min-width="140" />
-      <el-table-column label="类型" width="160">
+    <el-table :data="accounts" :size="isMobile ? 'small' : 'default'">
+      <el-table-column prop="name" label="名称" min-width="110" />
+      <el-table-column label="类型" :width="isMobile ? 110 : 160">
         <template #default="{ row }">
           <el-tag>{{ metaStore.accountLabel(row.type) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" width="180">
+      <!-- 窄屏隐藏创建时间，优先保证操作列可见 -->
+      <el-table-column v-if="!isMobile" label="创建时间" width="180">
         <template #default="{ row }">{{ formatDateTime(row.create_at) }}</template>
       </el-table-column>
-      <el-table-column label="操作" width="260">
+      <el-table-column label="操作" :width="isMobile ? 210 : 260" fixed="right">
         <template #default="{ row }">
           <el-button
             v-if="metaStore.accountMeta(row.type)?.testable"
@@ -168,7 +172,7 @@ onMounted(async () => {
 
     <!-- 创建/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px">
-      <el-form label-width="110px">
+      <el-form :label-width="isMobile ? 'auto' : '110px'" :label-position="isMobile ? 'top' : 'right'">
         <el-form-item label="账号名称" required>
           <el-input v-model="form.name" placeholder="给这个账号起个名字" maxlength="64" />
         </el-form-item>
diff --git a/web/frontend/src/views/DashboardView.vue b/web/frontend/src/views/DashboardView.vue
index b554fbf..8967b88 100644
--- a/web/frontend/src/views/DashboardView.vue
+++ b/web/frontend/src/views/DashboardView.vue
@@ -14,6 +14,9 @@ import { dashboardApi, timerApi } from '@/api'
 import { ApiError } from '@/api/client'
 import type { DashboardOverview } from '@/api/types'
 import { formatDateTime, formatDuration } from '@/utils/format'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const router = useRouter()
 
@@ -241,12 +244,14 @@ onUnmounted(() => {
         description="暂无执行记录"
         :image-size="80"
       />
-      <el-table v-else :data="overview.recent_logs" size="default">
-        <el-table-column label="时间" width="175">
-          <template #default="{ row }">{{ formatDateTime(row.create_at) }}</template>
+      <el-table v-else :data="overview.recent_logs" :size="isMobile ? 'small' : 'default'">
+        <el-table-column label="时间" :width="isMobile ? 130 : 175">
+          <template #default="{ row }">
+            {{ isMobile ? formatDateTime(row.create_at).slice(5) : formatDateTime(row.create_at) }}
+          </template>
         </el-table-column>
-        <el-table-column prop="rule_name" label="规则" min-width="120" />
-        <el-table-column label="结果" width="90">
+        <el-table-column prop="rule_name" label="规则" min-width="100" />
+        <el-table-column label="结果" :width="isMobile ? 70 : 90">
           <template #default="{ row }">
             <el-tag :type="row.success ? 'success' : 'danger'" size="small" effect="light">
               {{ row.success ? '成功' : '失败' }}
@@ -386,4 +391,64 @@ onUnmounted(() => {
   color: var(--el-text-color-regular);
   margin: 2px 0 1px;
 }
+
+/* ---------- 移动端 ---------- */
+
+@media (max-width: 768px) {
+  .header-btns {
+    width: 100%;
+  }
+
+  /* 倒计时环与文字改为上下排列并居中 */
+  .hero-body {
+    flex-direction: column;
+    gap: 18px;
+    text-align: center;
+  }
+
+  .hero-info {
+    align-items: center;
+  }
+
+  .hero-name {
+    font-size: 20px;
+  }
+
+  .countdown-num {
+    font-size: 22px;
+  }
+
+  /* 统计卡两列，避免一列太长要滑很久 */
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .stat-body {
+    gap: 12px;
+  }
+
+  .stat-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 11px;
+  }
+
+  .stat-value {
+    font-size: 22px;
+  }
+
+  /* 触屏没有 hover，去掉位移避免点击时抖动 */
+  .stat-card:hover {
+    transform: none;
+    box-shadow: var(--gb-shadow-card);
+  }
+}
+
+/* 只有极窄屏才退回单列，375px 的机型两列仍然放得下 */
+@media (max-width: 340px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/web/frontend/src/views/LoginView.vue b/web/frontend/src/views/LoginView.vue
index b1d77b8..8e0db67 100644
--- a/web/frontend/src/views/LoginView.vue
+++ b/web/frontend/src/views/LoginView.vue
@@ -261,10 +261,36 @@ async function submit() {
   margin-top: 20px;
 }
 
-/* 窄屏时隐藏左侧介绍 */
+/* 窄屏时隐藏左侧介绍，登录框居中占满 */
 @media (max-width: 860px) {
   .intro {
     display: none;
   }
 }
+
+@media (max-width: 768px) {
+  .login-page {
+    /* 移动浏览器地址栏会挤压 100%，用 dvh 保证真实可视高度 */
+    min-height: 100dvh;
+  }
+
+  .panel {
+    padding: 24px 20px;
+    align-items: flex-start;
+    padding-top: 12vh;
+  }
+
+  .panel-card {
+    max-width: none;
+  }
+
+  .panel-title {
+    font-size: 23px;
+  }
+
+  /* 输入框放大到 16px，避免 iOS Safari 聚焦时自动缩放页面 */
+  .panel :deep(.el-input__inner) {
+    font-size: 16px;
+  }
+}
 </style>
diff --git a/web/frontend/src/views/LogsView.vue b/web/frontend/src/views/LogsView.vue
index 6b87ac6..f98c759 100644
--- a/web/frontend/src/views/LogsView.vue
+++ b/web/frontend/src/views/LogsView.vue
@@ -6,6 +6,9 @@ import { logApi } from '@/api'
 import { ApiError } from '@/api/client'
 import type { ExecutionLog } from '@/api/types'
 import { formatDateTime } from '@/utils/format'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const logs = ref<ExecutionLog[]>([])
 const total = ref(0)
@@ -72,7 +75,7 @@ onMounted(refresh)
         <div class="muted">规则执行与提醒的历史记录</div>
       </div>
       <div class="header-tools">
-        <el-select v-model="successFilter" style="width: 140px">
+        <el-select v-model="successFilter" class="filter-select">
           <el-option label="全部" value="all" />
           <el-option label="仅成功" value="true" />
           <el-option label="仅失败" value="false" />
@@ -86,25 +89,33 @@ onMounted(refresh)
 
     <template v-else>
       <el-card class="gb-rise">
-      <el-table :data="logs">
-        <el-table-column label="时间" width="175">
-          <template #default="{ row }">{{ formatDateTime(row.create_at) }}</template>
+      <el-table :data="logs" :size="isMobile ? 'small' : 'default'">
+        <el-table-column label="时间" :width="isMobile ? 130 : 175">
+          <template #default="{ row }">
+            {{ isMobile ? formatDateTime(row.create_at).slice(5) : formatDateTime(row.create_at) }}
+          </template>
         </el-table-column>
         <el-table-column prop="rule_name" label="规则 / 定时器" min-width="130" />
-        <el-table-column prop="rule_type" label="类型" width="150" />
-        <el-table-column label="触发方式" width="110">
+        <!-- 窄屏隐藏次要列，避免横向滚动过长 -->
+        <el-table-column v-if="!isMobile" prop="rule_type" label="类型" width="150" />
+        <el-table-column v-if="!isMobile" label="触发方式" width="110">
           <template #default="{ row }">
             {{ triggerLabels[row.trigger] ?? row.trigger }}
           </template>
         </el-table-column>
-        <el-table-column label="结果" width="90">
+        <el-table-column label="结果" :width="isMobile ? 70 : 90">
           <template #default="{ row }">
             <el-tag :type="row.success ? 'success' : 'danger'" size="small">
               {{ row.success ? '成功' : '失败' }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="message" label="详情" min-width="260" show-overflow-tooltip />
+        <el-table-column
+          prop="message"
+          label="详情"
+          :min-width="isMobile ? 180 : 260"
+          show-overflow-tooltip
+        />
       </el-table>
       </el-card>
 
@@ -114,7 +125,9 @@ onMounted(refresh)
           v-model:page-size="pageSize"
           :total="total"
           :page-sizes="[20, 50, 100]"
-          layout="total, sizes, prev, pager, next"
+          :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next'"
+          :pager-count="isMobile ? 5 : 7"
+          :small="isMobile"
           background
         />
       </div>
@@ -128,9 +141,34 @@ onMounted(refresh)
   gap: 12px;
 }
 
+.filter-select {
+  width: 140px;
+}
+
 .pager {
   margin-top: 16px;
   display: flex;
   justify-content: flex-end;
 }
+
+@media (max-width: 768px) {
+  /* 筛选下拉占一行，两个按钮平分下一行 */
+  .header-tools {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .filter-select {
+    width: 100%;
+  }
+
+  .header-tools .el-button {
+    flex: 1;
+    margin-left: 0;
+  }
+
+  .pager {
+    justify-content: center;
+  }
+}
 </style>
diff --git a/web/frontend/src/views/RulesView.vue b/web/frontend/src/views/RulesView.vue
index 014ec6b..fa1c5d8 100644
--- a/web/frontend/src/views/RulesView.vue
+++ b/web/frontend/src/views/RulesView.vue
@@ -8,6 +8,9 @@ import type { Account, Rule, Timer } from '@/api/types'
 import { useMetaStore } from '@/stores/meta'
 import { formatDateTime } from '@/utils/format'
 import ConfigForm from '@/components/ConfigForm.vue'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const metaStore = useMetaStore()
 
@@ -231,7 +234,7 @@ onMounted(async () => {
           v-model="filterTimerId"
           placeholder="按定时器筛选"
           clearable
-          style="width: 200px"
+          class="filter-select"
         >
           <el-option v-for="t in timers" :key="t.id" :label="t.name" :value="t.id" />
         </el-select>
@@ -244,28 +247,29 @@ onMounted(async () => {
     </el-empty>
 
     <el-card v-else class="table-card gb-rise">
-    <el-table :data="filteredRules">
-      <el-table-column prop="name" label="名称" min-width="130" />
-      <el-table-column label="类型" width="160">
+    <el-table :data="filteredRules" :size="isMobile ? 'small' : 'default'">
+      <el-table-column prop="name" label="名称" min-width="110" />
+      <el-table-column label="类型" :width="isMobile ? 120 : 160">
         <template #default="{ row }">
           <el-tag>{{ metaStore.ruleLabel(row.type) }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="定时器" min-width="120">
+      <!-- 窄屏隐藏定时器/账号/创建时间，保留名称、类型与操作 -->
+      <el-table-column v-if="!isMobile" label="定时器" min-width="120">
         <template #default="{ row }">{{ timerName(row.timer_id) }}</template>
       </el-table-column>
-      <el-table-column label="账号" min-width="120">
+      <el-table-column v-if="!isMobile" label="账号" min-width="120">
         <template #default="{ row }">{{ accountName(row.account_id) }}</template>
       </el-table-column>
-      <el-table-column label="创建时间" width="170">
+      <el-table-column v-if="!isMobile" label="创建时间" width="170">
         <template #default="{ row }">{{ formatDateTime(row.create_at) }}</template>
       </el-table-column>
-      <el-table-column label="启用" width="80">
+      <el-table-column label="启用" :width="isMobile ? 60 : 80">
         <template #default="{ row }">
           <el-switch v-model="row.enabled" size="small" @change="toggleEnabled(row)" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" width="240">
+      <el-table-column label="操作" :width="isMobile ? 200 : 240" fixed="right">
         <template #default="{ row }">
           <el-button
             size="small"
@@ -284,7 +288,7 @@ onMounted(async () => {
 
     <!-- 创建/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px">
-      <el-form label-width="110px">
+      <el-form :label-width="isMobile ? 'auto' : '110px'" :label-position="isMobile ? 'top' : 'right'">
         <el-form-item label="规则名称" required>
           <el-input v-model="form.name" placeholder="给这条规则起个名字" maxlength="64" />
         </el-form-item>
@@ -354,4 +358,19 @@ onMounted(async () => {
   display: flex;
   gap: 12px;
 }
+
+.filter-select {
+  width: 200px;
+}
+
+@media (max-width: 768px) {
+  .header-tools {
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .filter-select {
+    width: 100%;
+  }
+}
 </style>
diff --git a/web/frontend/src/views/SettingsView.vue b/web/frontend/src/views/SettingsView.vue
index b1dd2be..09943df 100644
--- a/web/frontend/src/views/SettingsView.vue
+++ b/web/frontend/src/views/SettingsView.vue
@@ -5,6 +5,9 @@ import { userApi } from '@/api'
 import { ApiError } from '@/api/client'
 import { useUserStore } from '@/stores/user'
 import { formatDateTime } from '@/utils/format'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const userStore = useUserStore()
 
@@ -123,7 +126,7 @@ onMounted(async () => {
         定时器临近到期时，通过钉钉自定义机器人提醒你签到。在钉钉群里添加“自定义机器人”，把
         Webhook 中的 access_token 填到下面；如果机器人开启了“加签”，还需要填写 Secret。
       </p>
-      <el-form label-width="130px" style="max-width: 560px">
+      <el-form :label-width="isMobile ? 'auto' : '130px'" :label-position="isMobile ? 'top' : 'right'" style="max-width: 560px">
         <el-form-item label="启用钉钉提醒">
           <el-switch v-model="dingtalk.enabled" />
         </el-form-item>
@@ -143,7 +146,7 @@ onMounted(async () => {
 
     <el-card class="section">
       <template #header>修改密码</template>
-      <el-form label-width="130px" style="max-width: 560px">
+      <el-form :label-width="isMobile ? 'auto' : '130px'" :label-position="isMobile ? 'top' : 'right'" style="max-width: 560px">
         <el-form-item label="原密码" required>
           <el-input v-model="passwordForm.old" type="password" show-password />
         </el-form-item>
diff --git a/web/frontend/src/views/TimersView.vue b/web/frontend/src/views/TimersView.vue
index 682eb42..1d79fe0 100644
--- a/web/frontend/src/views/TimersView.vue
+++ b/web/frontend/src/views/TimersView.vue
@@ -6,6 +6,9 @@ import { timerApi } from '@/api'
 import { ApiError } from '@/api/client'
 import type { Timer, TimerRequest } from '@/api/types'
 import { durationPresets, formatDateTime, formatDuration } from '@/utils/format'
+import { useIsMobile } from '@/composables/useBreakpoint'
+
+const isMobile = useIsMobile()
 
 const timers = ref<Timer[]>([])
 const loading = ref(false)
@@ -307,7 +310,7 @@ onUnmounted(() => {
 
     <!-- 创建/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="480px">
-      <el-form label-width="90px">
+      <el-form :label-width="isMobile ? 'auto' : '90px'" :label-position="isMobile ? 'top' : 'right'">
         <el-form-item label="名称" required>
           <el-input v-model="form.name" placeholder="例如：每周报平安" maxlength="64" />
         </el-form-item>
@@ -315,7 +318,13 @@ onUnmounted(() => {
           <el-input v-model="form.description" type="textarea" :rows="2" placeholder="备注(可选)" />
         </el-form-item>
         <el-form-item label="签到周期" required>
-          <el-input-number v-model="form.durationDays" :min="0.001" :step="1" style="width: 160px" />
+          <el-input-number
+            v-model="form.durationDays"
+            :min="0.001"
+            :step="1"
+            class="timer-dialog-number"
+            style="width: 160px"
+          />
           <span class="unit">天</span>
           <div class="presets">
             <el-tag
@@ -331,7 +340,13 @@ onUnmounted(() => {
           </div>
         </el-form-item>
         <el-form-item label="提前提醒" required>
-          <el-input-number v-model="form.remindHours" :min="0" :step="1" style="width: 160px" />
+          <el-input-number
+            v-model="form.remindHours"
+            :min="0"
+            :step="1"
+            class="timer-dialog-number"
+            style="width: 160px"
+          />
           <span class="unit">小时</span>
           <div class="muted">到期前会通过提醒渠道(设置页)提醒你签到</div>
         </el-form-item>
@@ -350,7 +365,8 @@ onUnmounted(() => {
 <style scoped>
 .timer-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  /* min() 兜底：窄屏时不会因为 320px 下限撑破容器 */
+  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
   gap: 16px;
 }
 
@@ -434,4 +450,45 @@ onUnmounted(() => {
   cursor: pointer;
   transition: all 0.2s var(--gb-ease);
 }
+
+/* ---------- 移动端 ---------- */
+
+@media (max-width: 768px) {
+  .timer-card:hover {
+    transform: none;
+    box-shadow: var(--gb-shadow-card);
+  }
+
+  .timer-countdown {
+    font-size: 16px;
+  }
+
+  /* 操作按钮换行排列，开关另起一行靠右 */
+  .timer-actions {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .timer-actions .el-button + .el-button {
+    margin-left: 0;
+  }
+
+  .timer-meta {
+    gap: 2px 12px;
+  }
+
+  /* 数字输入框在窄屏撑满，配合下方预设标签 */
+  .timer-dialog-number {
+    width: 100% !important;
+  }
+
+  .unit {
+    display: inline-block;
+    margin: 6px 0 0;
+  }
+
+  .preset-tag {
+    margin: 0 6px 6px 0;
+  }
+}
 </style>