mirrors2/openteam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端: 按 Web Interface Guidelines 全面重做

Browse Source 
组件:
- Button: transition-all→明确属性列表, touch-action, aria-busy
- Input: name/spellcheck/inputmode/aria-invalid/aria-describedby, focus-visible ring,
  label 关联, 暴露 focus() 供错误定位, required 标记
- Modal: Escape 关闭 + focus trap + 焦点归还, overscroll-behavior: contain,
  aria-labelledby, body 滚动锁, touch-action
- 新增 Toast(aria-live polite) + pinia toast store

页面:
- ConsoleLayout: skip link, <main> 语义标签, aside/nav aria-label, aria-current,
  装饰 SVG aria-hidden, Intl 金额, translate=no 品牌/代码
- Dashboard: Intl.NumberFormat, 骨架屏 loading, aria-live 错误
- Keys: 字段级错误+焦点定位, toast 反馈(复制/吊销), name 属性
- Usage: select 加 label, 分页/筛选同步 URL(可深链), Intl 日期/金额, 表格 caption
- Login/Register: 字段级校验+错误定位, spellcheck=false, inputmode, autocomplete
- Landing: router-link 替换 href, aria-hidden, text-balance, scroll-mt
- index.html: theme-color + color-scheme

验证: playwright 22 项断言全过, WCAG AA 对比度 9 组全过, 零控制台错误
This commit is contained in:
Sakurasan
2026-08-15 13:32:18 +08:00
parent 5b67b66611
commit b25e9ec8a7
14 changed files with 646 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/console/ConsoleLayout.vue
+32 -16
View File
@@ -2,6 +2,7 @@
import { useAuthStore } from '../../stores/auth'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import Toast from '../../components/ui/Toast.vue'
const auth = useAuthStore()
const router = useRouter()
@@ -12,31 +13,43 @@ const nav = [
{ to: '/console/usage', label: '用量明细', icon: 'M4 20V10M10 20V4M16 20v-7M22 20H2' },
]
const balanceFmt = computed(() =>
auth.user ? auth.user.balance.toFixed(4) : '—',
)
const balanceFmt = computed(() => {
if (!auth.user) return '—'
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 4 }).format(auth.user.balance)
})
async function logout() {
await auth.logout()
router.push('/')
}
</script>
<template>
<div class="flex min-h-[100dvh] bg-ink-950">
<div class="min-h-[100dvh] bg-ink-950 text-paper-100">
<!-- 无障碍：跳过导航 -->
<a
href="#main-content"
class="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[70] focus:rounded-md focus:bg-signal-400 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-ink-950"
>跳到主内容</a>
<!-- 侧边栏 -->
<aside class="fixed inset-y-0 left-0 z-30 flex w-56 flex-col border-r border-ink-800 bg-ink-900/60">
<aside aria-label="主导航" class="fixed inset-y-0 left-0 z-30 flex w-56 flex-col border-r border-ink-800 bg-ink-900/60">
<div class="flex h-16 items-center gap-2.5 border-b border-ink-800 px-5">
<span class="flex h-7 w-7 items-center justify-center rounded-md bg-signal-400">
<span class="flex h-7 w-7 items-center justify-center rounded-md bg-signal-400" aria-hidden="true">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 8h3l2-5 3 10 2-5h2" stroke="#0c0d0f" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="text-[15px] font-semibold tracking-tight">openteam</span>
<span class="text-[15px] font-semibold tracking-tight" translate="no">openteam</span>
</div>
<nav class="flex-1 space-y-0.5 px-3 py-4">
<nav class="flex-1 space-y-0.5 px-3 py-4" aria-label="控制台">
<router-link
v-for="item in nav"
:key="item.to"
:to="item.to"
class="flex items-center gap-3 rounded-md px-3 py-2 text-[13.5px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-paper-100"
class="flex items-center gap-3 rounded-md px-3 py-2 text-[13.5px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-paper-100 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none"
active-class="bg-ink-800 text-signal-300! font-medium"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path :d="item.icon" /></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="item.icon" /></svg>
{{ item.label }}
</router-link>
</nav>
@@ -47,13 +60,13 @@ const balanceFmt = computed(() =>
<p class="truncate text-[13px] font-medium text-paper-100">{{ auth.user?.username }}</p>
<p class="text-xs text-paper-600">{{ auth.isAdmin ? 'admin' : 'user' }}</p>
</div>
<span class="num text-[13px] font-medium text-mint-400">${{ balanceFmt }}</span>
<span class="num text-[13px] font-medium text-mint-400" translate="no">{{ balanceFmt }}</span>
</div>
<button
class="mt-2 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-ember-300 cursor-pointer"
@click="auth.logout().then(() => router.push('/'))"
class="mt-2 flex w-full touch-manipulation items-center justify-center gap-2 rounded-md px-3 py-2 text-[13px] text-paper-500 transition-colors hover:bg-ink-800 hover:text-ember-300 focus-visible:ring-2 focus-visible:ring-signal-400/60 focus:outline-none cursor-pointer"
@click="logout"
>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" /></svg>
退出登录
</button>
</div>
@@ -61,9 +74,12 @@ const balanceFmt = computed(() =>
<!-- 主区域 -->
<div class="ml-56 flex-1">
<div class="mx-auto max-w-6xl px-8 py-8">
<main id="main-content" class="mx-auto max-w-6xl scroll-mt-4 px-8 py-8" tabindex="-1">
<router-view />
</div>
</main>
</div>
<!-- 全局通知 -->
<Toast />
</div>
</template>