优化 2026 前端无障碍与响应式体验

完善 2026 主题的移动端与桌面端交互体验,修复多项可访问性和信息展示问题。

- 允许浏览器缩放,补充焦点样式、按钮名称、表单标签和对话框键盘焦点管理\n- 支持 reduced-motion,扩大公共页、后台导航、记录列表和分页控件的触控区域\n- 优化系统设置分区导航、密码显示、字段语义和底部粘性保存栏\n- 压缩移动文件列表操作区,改善桌面表格滚动可达性和统计值截断\n- 优化仪表盘指标、趋势摘要、进度条语义及中英文文案
This commit is contained in:
2026-07-21 11:03:13 +08:00
parent 2f020f5d42
commit b60c003ec2
29 changed files with 638 additions and 312 deletions
+12 -4
View File
@@ -1,4 +1,5 @@
import { computed, ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { StatsService } from '@/services'
import type { DashboardData, DashboardHealthSummary, DashboardViewData } from '@/types'
import { formatFileSize, getErrorMessage } from '@/utils/common'
@@ -54,12 +55,12 @@ const clampRatio = (value: number) => Math.max(0, Math.min(100, Math.round(value
const hasOwn = (target: object, key: string) => Object.prototype.hasOwnProperty.call(target, key)
const formatDuration = (startTimestamp: number | null) => {
const formatDuration = (startTimestamp: number | null, dayLabel: string, hourLabel: string) => {
if (!startTimestamp) return '-'
const uptime = Date.now() - startTimestamp
const days = Math.floor(uptime / (24 * 60 * 60 * 1000))
const hours = Math.floor((uptime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
return `${days}${hours}小时`
return `${days}${dayLabel} ${hours}${hourLabel}`
}
const healthSummaryKeys: (keyof DashboardHealthSummary)[] = [
@@ -91,12 +92,15 @@ const normalizeHealthSummary = (detail: DashboardData): DashboardHealthSummary =
})
export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
const { t, locale } = useI18n()
const dashboardData = reactive<DashboardViewData>(emptyDashboardData())
const isLoading = ref(false)
const errorMessage = ref('')
const lastUpdatedAt = ref<Date | null>(null)
const lastUpdatedText = computed(() =>
lastUpdatedAt.value ? lastUpdatedAt.value.toLocaleString() : '-'
lastUpdatedAt.value
? new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeStyle: 'short' }).format(lastUpdatedAt.value)
: '-'
)
const fetchDashboardData = async () => {
@@ -140,7 +144,11 @@ export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
dashboardData.sysUptimeText = formatDuration(
dashboardData.sysUptime,
t('common.dayShort'),
t('common.hourShort')
)
dashboardData.activeRatio = dashboardData.totalFiles
? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
: 0