✨ 优化 2026 前端无障碍与响应式体验
完善 2026 主题的移动端与桌面端交互体验,修复多项可访问性和信息展示问题。 - 允许浏览器缩放,补充焦点样式、按钮名称、表单标签和对话框键盘焦点管理\n- 支持 reduced-motion,扩大公共页、后台导航、记录列表和分页控件的触控区域\n- 优化系统设置分区导航、密码显示、字段语义和底部粘性保存栏\n- 压缩移动文件列表操作区,改善桌面表格滚动可达性和统计值截断\n- 优化仪表盘指标、趋势摘要、进度条语义及中英文文案
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user