优化 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
+4 -4
View File
@@ -38,7 +38,7 @@
{{ t('common.appName') }}
</h1>
</div>
<button @click="toggleSidebar" class="lg:hidden">
<button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="toggleSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</button>
</div>
@@ -49,7 +49,7 @@
<li v-for="item in menuItems" :key="item.id">
<RouterLink
:to="item.redirect"
class="flex h-10 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
class="flex min-h-11 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
:class="[
route.name === item.id
? isDarkMode
@@ -72,7 +72,7 @@
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
<button
@click="handleLogout"
class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
class="flex min-h-11 w-full items-center rounded-lg p-2 transition-colors duration-200"
:class="[
isDarkMode
? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
@@ -93,7 +93,7 @@
:class="[isDarkMode ? 'bg-[#1a2930] border-[#31454d]' : 'bg-[#f2f6f5] border-[#c8d7da]']"
>
<div class="flex h-14 items-center justify-between px-4">
<button @click="toggleSidebar" class="lg:hidden">
<button type="button" :aria-label="t('common.openMenu')" :title="t('common.openMenu')" @click="toggleSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</button>
</div>