document the single UI stack and strengthen resize focus coverage
This commit is contained in:
1 parent
5c2342d4c5
commit
ec918674ee
5 files changed
+20
-4
No files matched your search
@@ -29,6 +29,11 @@
|
|||||||
| 源码 | JavaScript、Vue 单文件组件、CSS,Nuxt 配置使用 TypeScript |
|
| 源码 | JavaScript、Vue 单文件组件、CSS,Nuxt 配置使用 TypeScript |
|
||||||
| 验证工具 | Node.js `node:test`、Playwright、源码检查脚本、ESLint、Prettier |
|
| 验证工具 | Node.js `node:test`、Playwright、源码检查脚本、ESLint、Prettier |
|
||||||
|
|
||||||
|
界面基础统一为 `openvue`、`@openvue/forms`、`@openvue/themes` 1.1.1,不使用 npm alias 或并行 PrimeVue 依赖。
|
||||||
|
后台布局移植自 Deni,保留本项目 Nuxt 路由、鉴权、权限菜单、维护条和三态主题;
|
||||||
|
不导入模板的演示业务、分析上报或额外图表/图标库。来源与 MIT 许可见 [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)。
|
||||||
|
主题入口为 `app/config/openvue.js`;OpenVue 上游保留的 `.p-*` 类和 `--p-*` 令牌不是遗留包依赖。
|
||||||
|
|
||||||
依赖的精确版本以 `package-lock.json` 为准。
|
依赖的精确版本以 `package-lock.json` 为准。
|
||||||
|
|
||||||
## 快速开始
|
## 快速开始
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
/** 复用 PrimeVue 的密码/反馈状态,只统一原生输入语义与可键盘访问的显隐操作。 */
|
/** 复用 OpenVue 的密码/反馈状态,只统一原生输入语义与可键盘访问的显隐操作。 */
|
||||||
import { computed, nextTick, ref, useSlots } from "vue";
|
import { computed, nextTick, ref, useSlots } from "vue";
|
||||||
import Password from "openvue/password";
|
import Password from "openvue/password";
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ const nativeProps = computed(() => ({
|
|||||||
const toggleButton = ref(null);
|
const toggleButton = ref(null);
|
||||||
async function togglePassword(callback) {
|
async function togglePassword(callback) {
|
||||||
callback();
|
callback();
|
||||||
// PrimeVue切换两个显隐slot时会替换按钮;把焦点交回新按钮,键盘才能连续显示/隐藏。
|
// OpenVue切换两个显隐slot时会替换按钮;把焦点交回新按钮,键盘才能连续显示/隐藏。
|
||||||
await nextTick();
|
await nextTick();
|
||||||
toggleButton.value?.focus();
|
toggleButton.value?.focus();
|
||||||
}
|
}
|
||||||
@@ -71,7 +71,7 @@ async function togglePassword(callback) {
|
|||||||
.password-field {
|
.password-field {
|
||||||
--password-toggle-size: 44px;
|
--password-toggle-size: 44px;
|
||||||
}
|
}
|
||||||
/* PrimeVue公开的输入样式类位于子组件内;操作宽度与逻辑末端留白必须同源,避免文字被按钮截获。 */
|
/* OpenVue公开的输入样式类位于子组件内;操作宽度与逻辑末端留白必须同源,避免文字被按钮截获。 */
|
||||||
.password-field:has(.password-toggle) :deep(.p-password-input) {
|
.password-field:has(.password-toggle) :deep(.p-password-input) {
|
||||||
padding-inline-end: calc(
|
padding-inline-end: calc(
|
||||||
var(--password-toggle-size) + var(--p-form-field-padding-x)
|
var(--password-toggle-size) + var(--p-form-field-padding-x)
|
||||||
|
|||||||
@@ -169,7 +169,7 @@ var m = {
|
|||||||
!S.disabled && S.removable && C(`remove`);
|
!S.disabled && S.removable && C(`remove`);
|
||||||
}
|
}
|
||||||
async function I(t) {
|
async function I(t) {
|
||||||
// PrimeVue 完成内部输入更新后再同步合法值与 aria 状态,避免显示值和实际容量不一致。
|
// OpenVue 完成内部输入更新后再同步合法值与 aria 状态,避免显示值和实际容量不一致。
|
||||||
(await Promise.resolve(), await nextTick());
|
(await Promise.resolve(), await nextTick());
|
||||||
let n = t.originalEvent.target;
|
let n = t.originalEvent.target;
|
||||||
((n.value = String(O.value)),
|
((n.value = String(O.value)),
|
||||||
|
|||||||
@@ -39,6 +39,7 @@ CHROME_PATH=/absolute/path/to/chrome npm test
|
|||||||
- `review-purchase.e2e.test.mjs`:镜像订单未付复用、取消后重建、已付授权延迟不重复收费;级联候选与默认、结算、购物车恢复一致。
|
- `review-purchase.e2e.test.mjs`:镜像订单未付复用、取消后重建、已付授权延迟不重复收费;级联候选与默认、结算、购物车恢复一致。
|
||||||
- `review-fields.e2e.test.mjs`:常见 ASCII 规则本地拦截、PCRE 专有规则交后端校验;实例随机密码实际提交及安全源失效、无偏采样边界。
|
- `review-fields.e2e.test.mjs`:常见 ASCII 规则本地拦截、PCRE 专有规则交后端校验;实例随机密码实际提交及安全源失效、无偏采样边界。
|
||||||
- `review-theme.e2e.test.mjs`:认证页三态主题文案、持久化与跟随系统变化。
|
- `review-theme.e2e.test.mjs`:认证页三态主题文案、持久化与跟随系统变化。
|
||||||
|
- `review-ui-foundation.e2e.test.mjs`:OpenVue/Deni 的手机导航焦点约束、Escape/离页关闭、1024/1025 断点与桌面恢复、手机表格字段标签和可操作的窄屏编辑弹窗。
|
||||||
- `review-style-layout.e2e.test.mjs`:维护条随内容与视口变化、超长通知内部滚动、帮助/购物车/机型/配置摘要吸顶避让,退出布局后的偏移清理与导航单一键盘焦点;首页用户 ID 复制按钮在各宽度下不拆行(该问题只在 Firefox 出现,场景额外启动 Playwright Firefox,需先执行 `npx playwright install firefox`)。
|
- `review-style-layout.e2e.test.mjs`:维护条随内容与视口变化、超长通知内部滚动、帮助/购物车/机型/配置摘要吸顶避让,退出布局后的偏移清理与导航单一键盘焦点;首页用户 ID 复制按钮在各宽度下不拆行(该问题只在 Firefox 出现,场景额外启动 Playwright Firefox,需先执行 `npx playwright install firefox`)。
|
||||||
- `review-style-fields.e2e.test.mjs`:深色商品说明对比度、提现样式隔离、实名认证与转账凭证上传名称;实际升级弹窗的窄屏网格。
|
- `review-style-fields.e2e.test.mjs`:深色商品说明对比度、提现样式隔离、实名认证与转账凭证上传名称;实际升级弹窗的窄屏网格。
|
||||||
- `review-style-motion.e2e.test.mjs`:实例监控 Canvas 初始/刷新/加载反馈跟随系统减动偏好,并验证偏好切换及离页后无运行时错误。
|
- `review-style-motion.e2e.test.mjs`:实例监控 Canvas 初始/刷新/加载反馈跟随系统减动偏好,并验证偏好切换及离页后无运行时错误。
|
||||||
|
|||||||
@@ -133,6 +133,16 @@ test(
|
|||||||
await page.getByRole("dialog", { name: "主导航", exact: true }).count(),
|
await page.getByRole("dialog", { name: "主导航", exact: true }).count(),
|
||||||
0,
|
0,
|
||||||
);
|
);
|
||||||
|
const link = navigation(page).getByRole("link", {
|
||||||
|
name: "SSH 密钥",
|
||||||
|
exact: true,
|
||||||
|
});
|
||||||
|
await link.focus();
|
||||||
|
assert.equal(
|
||||||
|
await link.evaluate((element) => element === document.activeElement),
|
||||||
|
true,
|
||||||
|
"Desktop navigation is focusable after the overlay closes",
|
||||||
|
);
|
||||||
return {
|
return {
|
||||||
desktopAt1025: true,
|
desktopAt1025: true,
|
||||||
overlayAt1024: true,
|
overlayAt1024: true,
|
||||||
|
|||||||
Reference in new issue
Block a user