mei/goodBaby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 移动端适配

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

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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
mei
2026-07-26 22:57:52 +08:00
co-authored by Claude Fable 5
parent 0d766020bc
commit f8c6115737
10 changed files with 507 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/frontend/src/views/AccountsView.vue
+10 -6
View File
@@ -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>
web/frontend/src/views/DashboardView.vue
+70 -5
View File
@@ -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>
web/frontend/src/views/LoginView.vue
+27 -1
View File
@@ -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>
web/frontend/src/views/LogsView.vue
+47 -9
View File
@@ -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>
web/frontend/src/views/RulesView.vue
+29 -10
View File
@@ -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>
web/frontend/src/views/SettingsView.vue
+5 -2
View File
@@ -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>
web/frontend/src/views/TimersView.vue
+61 -4
View File
@@ -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>