318 lines
16 KiB
TypeScript
318 lines
16 KiB
TypeScript
// 独立预览入口：一次性纵向渲染 6 个含搜索区的列表页，用于核对 .search-wrap 视觉规范。
|
||
//
|
||
// 存在的理由：业务 dev 端口（8081/8078/8079）挂在平台 CAS 下，无登录态会被重定向到
|
||
// SSO，自动化浏览器截不到真实页面；且各页面分散在 6 条路由上，逐一截图低效。
|
||
// 这里直接把 6 个组件竖排挂载到同一页，一次滚动即可比对「搜索区是否风格统一」。
|
||
//
|
||
// 用法（无需 mock 服务、无需登录，任意端口都可）：
|
||
// npx vite --config preview.vite.config.ts --port 8099 → http://localhost:8099/preview-list.html
|
||
// 业务 dev 端口同样可访问（页面在项目根目录）：http://localhost:8081/preview-list.html
|
||
// 加 ?probe=1 跑交互断言并把结果写入 document.title
|
||
//
|
||
// 接口由 ./mock-api 在页内以 fetch 拦截提供，不经网络。
|
||
import { createApp, h, defineComponent, ref, onMounted, nextTick } from "vue";
|
||
import { createRouter, createMemoryHistory, RouterView } from "vue-router";
|
||
import { createPinia } from "pinia";
|
||
import ViewUIPlus from "view-ui-plus";
|
||
import "view-ui-plus/dist/styles/viewuiplus.css";
|
||
import "@/assets/styles/main.scss";
|
||
import "@/assets/styles/layout.css";
|
||
import "@/assets/styles/icons.css";
|
||
import "virtual:uno.css";
|
||
import "virtual:svg-icons-register";
|
||
|
||
import utils from "@/utils";
|
||
import config from "@/assets/config/host.config";
|
||
import { installApiStub } from "./mock-api";
|
||
import MyLeave from "@/views/leave/MyLeave.vue";
|
||
import AllLeave from "@/views/leave/AllLeave.vue";
|
||
import LeaveCc from "@/views/leave/LeaveCc.vue";
|
||
import LeaveAudit from "@/views/leave/LeaveAudit.vue";
|
||
import TimeLog from "@/views/leave/TimeLog.vue";
|
||
import LeaveStats from "@/views/leave/LeaveStats.vue";
|
||
|
||
// 必须在任何组件挂载（即任何请求发出）之前接管 fetch：
|
||
// 否则 dev 端口下 /api 会代理到受 CAS 保护的后端，返回 code:302 触发整页跳转 SSO
|
||
installApiStub();
|
||
|
||
const PAGES = [
|
||
{ key: "myleave", name: "我的请假", path: "/myleave", comp: MyLeave },
|
||
{ key: "allleave", name: "全部请假", path: "/allleave", comp: AllLeave },
|
||
{ key: "cc", name: "抄送列表", path: "/cc", comp: LeaveCc },
|
||
{ key: "audit", name: "审批列表", path: "/audit", comp: LeaveAudit },
|
||
{ key: "timelog", name: "时长日志", path: "/timelog", comp: TimeLog },
|
||
{ key: "stats", name: "统计分析", path: "/stats", comp: LeaveStats },
|
||
];
|
||
|
||
/** 运行期错误收集：探针把条数写进 title，避免「页面看着正常但控制台在报错」被漏掉 */
|
||
const RUNTIME_ERRORS: string[] = [];
|
||
window.addEventListener("error", (e) => RUNTIME_ERRORS.push(String(e.message || e)));
|
||
window.addEventListener("unhandledrejection", (e) => RUNTIME_ERRORS.push(`reject:${e.reason}`));
|
||
|
||
const router = createRouter({
|
||
history: createMemoryHistory(),
|
||
routes: [{ path: "/", component: { render: () => h("div") } }, ...PAGES.map((p) => ({ path: p.path, component: p.comp }))],
|
||
});
|
||
router.push("/");
|
||
|
||
// 每页一个独立挂载点：与业务里「一页一路由」等价（page-wrapper 是绝对定位上下文，
|
||
// 直接平铺会重叠，因此各自套一个高度受控的容器）
|
||
const Section = defineComponent({
|
||
props: { page: { type: Object, required: true } },
|
||
setup(props) {
|
||
const host = ref<HTMLElement>();
|
||
onMounted(async () => {
|
||
await nextTick();
|
||
const inner = document.createElement("div");
|
||
host.value!.appendChild(inner);
|
||
const sub = createApp({ render: () => h(props.page.comp) });
|
||
sub.use(createPinia());
|
||
sub.use(ViewUIPlus);
|
||
sub.config.globalProperties.$conf = config;
|
||
sub.config.globalProperties.$utils = utils;
|
||
sub.mount(inner);
|
||
});
|
||
return () =>
|
||
h("div", { style: "margin-bottom:18px" }, [
|
||
h(
|
||
"div",
|
||
{
|
||
style:
|
||
"font:600 13px -apple-system,'Microsoft YaHei',sans-serif;color:#17233d;" +
|
||
"padding:8px 14px;background:#eef3ff;border-left:3px solid #577afb;border-radius:0 6px 6px 0;margin-bottom:10px",
|
||
},
|
||
`${props.page.name} · ${props.page.path}`
|
||
),
|
||
h("div", { ref: host, style: "position:relative;height:520px;overflow:hidden;border:1px solid #e6ebf4;border-radius:8px;background:#fff" }),
|
||
]);
|
||
},
|
||
});
|
||
|
||
const app = createApp({
|
||
render: () =>
|
||
h(
|
||
"div",
|
||
{ style: "padding:16px 20px 60px;background:#f5f7fa;min-height:100vh;box-sizing:border-box" },
|
||
PAGES.map((p) => h(Section, { page: p, key: p.key }))
|
||
),
|
||
});
|
||
app.use(createPinia());
|
||
app.use(router);
|
||
app.use(ViewUIPlus);
|
||
app.config.globalProperties.$conf = config;
|
||
app.config.globalProperties.$utils = utils;
|
||
app.mount("#app");
|
||
|
||
// 探针：核对 6 页搜索区的实测盒模型 + 关键子控件的计算样式是否与规范一致
|
||
if (new URLSearchParams(location.search).has("probe")) {
|
||
setTimeout(() => {
|
||
const out: string[] = [];
|
||
let bad = 0;
|
||
const say = (ok: boolean, msg: string) => {
|
||
if (!ok) bad++;
|
||
out.push(`${msg}${ok ? "=ok" : "=FAIL"}`);
|
||
};
|
||
|
||
const wraps = document.querySelectorAll<HTMLElement>(".search-wrap");
|
||
say(wraps.length === 6, `wraps(${wraps.length})`);
|
||
|
||
wraps.forEach((el, i) => {
|
||
const cs = getComputedStyle(el);
|
||
const h = Math.round(el.getBoundingClientRect().height);
|
||
const radius = Math.round(parseFloat(cs.borderTopLeftRadius) || 0);
|
||
// 容器不得出现横向溢出（flex 换行会把高度顶破 56px）
|
||
const overflow = el.scrollWidth > el.clientWidth + 1;
|
||
say(h === 56 && radius === 10 && !overflow, `#${i + 1}[h${h},r${radius}${overflow ? ",OVF" : ""}]`);
|
||
});
|
||
|
||
// 控件高度统一 32px + 圆角 8px
|
||
const ctrl = document.querySelector<HTMLElement>(".search-wrap .ivu-input");
|
||
if (ctrl) {
|
||
const cs = getComputedStyle(ctrl);
|
||
say(Math.round(parseFloat(cs.height)) === 32 && Math.round(parseFloat(cs.borderTopLeftRadius)) === 8, `input`);
|
||
}
|
||
|
||
// 缩放按钮：幽灵态（白底 + 灰字），非 disabled
|
||
const btn = document.querySelector<HTMLElement>(".search-wrap_reset .ivu-btn");
|
||
if (btn) {
|
||
const cs = getComputedStyle(btn);
|
||
say(!btn.classList.contains("ivu-btn-disabled") && Math.round(parseFloat(cs.height)) === 32, `reset`);
|
||
}
|
||
|
||
// 列表真的渲染出行（接口 mock 是否接上）
|
||
const rows = document.querySelectorAll(".search-wrap ~ .ivu-table-wrapper .ivu-table-row").length;
|
||
say(rows > 0, `rows(${rows})`);
|
||
|
||
// 关键词搜索图标存在（搜索框右侧放大镜）；统计分析页用「查询」按钮，故为 5 个
|
||
const icon = document.querySelectorAll(".search-wrap_kw .ivu-input-search-icon").length;
|
||
say(icon === 5, `searchIcon(${icon})`);
|
||
|
||
// 重置按钮 6 页齐全 + 查询按钮 1 个（统计分析）
|
||
say(document.querySelectorAll(".search-wrap_reset").length === 5, "resetBtns");
|
||
say(document.querySelectorAll(".search-wrap .ivu-btn-primary").length === 1, "queryBtn");
|
||
|
||
// ===== 起止两个日期输入框：等宽、等高、垂直对齐（本次核心诉求）=====
|
||
const pairs = Array.from(document.querySelectorAll<HTMLElement>(".search-wrap_dates"));
|
||
say(pairs.length === 5, `datePairs(${pairs.length})`);
|
||
|
||
let pairBad = 0;
|
||
let tilde = 0;
|
||
pairs.forEach((pair) => {
|
||
const inputs = Array.from(pair.querySelectorAll<HTMLElement>(".ivu-input"));
|
||
const r = inputs.map((el) => el.getBoundingClientRect());
|
||
const two = r.length === 2;
|
||
const sameW = two && Math.abs(r[0].width - r[1].width) < 0.5;
|
||
const sameH = two && Math.abs(r[0].height - r[1].height) < 0.5;
|
||
// 顶边对齐 + 垂直中心线一致，避免两框错行
|
||
const aligned = two && Math.abs(r[0].top - r[1].top) < 0.5 &&
|
||
Math.abs(r[0].top + r[0].height / 2 - (r[1].top + r[1].height / 2)) < 0.5;
|
||
if (!(sameW && sameH && aligned)) pairBad++;
|
||
tilde += pair.querySelectorAll(".search-wrap_tilde").length;
|
||
});
|
||
say(pairBad === 0, `pairsAligned(${pairs.length - pairBad}/${pairs.length})`);
|
||
say(tilde === 5, `tilde(${tilde})`);
|
||
|
||
// 同一对内两个框的计算样式必须逐项一致（边框/圆角/字号/内边距）
|
||
const p0 = pairs[0];
|
||
if (p0) {
|
||
const cs = Array.from(p0.querySelectorAll<HTMLElement>(".ivu-input")).map((el) => getComputedStyle(el));
|
||
const keys = ["height", "borderTopWidth", "borderTopColor", "borderTopLeftRadius", "fontSize", "color"] as const;
|
||
say(cs.length === 2 && keys.every((k) => cs[0][k] === cs[1][k]), "pairStyleSame");
|
||
}
|
||
|
||
// 日期输入框：确认样式命中（32 高 / 8 圆角 / 140 宽）
|
||
const dateInput = document.querySelector<HTMLElement>(".search-wrap_dates .ivu-input");
|
||
if (dateInput) {
|
||
const c = getComputedStyle(dateInput);
|
||
const w = Math.round(dateInput.getBoundingClientRect().width);
|
||
say(Math.round(parseFloat(c.height)) === 32 && Math.round(parseFloat(c.borderTopLeftRadius)) === 8 && w === 140, `dateBox(${w}x${Math.round(parseFloat(c.height))})`);
|
||
}
|
||
|
||
// 交互：点击日期输入框本体应弹出单月历（可编辑态，走 handleFocus）
|
||
const dateInput2 = document.querySelector<HTMLElement>(".search-wrap_dates .ivu-input");
|
||
if (dateInput2) {
|
||
dateInput2.click();
|
||
setTimeout(() => {
|
||
// 面板根类名是 ivu-picker-panel-body-wrapper；transfer 会把所有页面板挂到 body，需按可见性过滤
|
||
const all = Array.from(document.querySelectorAll<HTMLElement>(".ivu-picker-panel-body-wrapper"));
|
||
const open = all.filter((p) => p.offsetParent !== null);
|
||
const cells = open.reduce((n, p) => n + p.querySelectorAll(".ivu-date-picker-cells").length, 0);
|
||
say(open.length === 1 && cells === 1, `datePanel(${open.length}p/${cells}c)`);
|
||
|
||
// 组件内部状态：点击输入框即置为打开
|
||
const rootEl = document.querySelector<HTMLElement>(".search-wrap_dates .ivu-date-picker");
|
||
const vm: any = rootEl && (rootEl as any).__vueParentComponent;
|
||
const p = vm?.proxy || vm?.ctx;
|
||
say(!!p && p.opened === true, "pickerOpens");
|
||
|
||
// 搜索图标：确认样式命中（iView 用 .ivu-input-search-icon，无 suffix 包裹层）
|
||
const si = document.querySelector<HTMLElement>(".search-wrap_kw .ivu-input-search-icon");
|
||
if (si) {
|
||
const c = getComputedStyle(si);
|
||
say(Math.round(parseFloat(c.width)) === 34 && Math.round(parseFloat(c.height)) === 32, "searchIconBox");
|
||
say(c.color === "rgb(153, 162, 181)", "searchIconColor");
|
||
}
|
||
|
||
// 重置按钮：幽灵态 —— 32px 高、白底
|
||
const rb = document.querySelector<HTMLElement>(".search-wrap_reset.ivu-btn");
|
||
if (rb) {
|
||
const c = getComputedStyle(rb);
|
||
say(Math.round(parseFloat(c.height)) === 32 && c.backgroundColor === "rgb(255, 255, 255)", "resetGhost");
|
||
}
|
||
|
||
// 搜索区卡片：白底 + 1px 边框 + 圆角 + 极淡投影
|
||
const sw = wraps[0];
|
||
if (sw) {
|
||
const c = getComputedStyle(sw);
|
||
say(c.backgroundColor === "rgb(255, 255, 255)" && c.borderTopWidth === "1px" && c.boxShadow !== "none", "card");
|
||
}
|
||
|
||
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
|
||
document.body.click();
|
||
finish();
|
||
}, 800);
|
||
return;
|
||
}
|
||
|
||
// 交互：往关键词框输入内容 → 点「重置」，输入应被清空且期间不抛错
|
||
function finish() {
|
||
const resetBtn = document.querySelector<HTMLElement>(".search-wrap_reset.ivu-btn");
|
||
const kwInput = document.querySelector<HTMLInputElement>(".search-wrap_kw .ivu-input");
|
||
if (resetBtn && kwInput) {
|
||
kwInput.value = "事假";
|
||
kwInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||
setTimeout(() => {
|
||
kwInput.dispatchEvent(new Event("input", { bubbles: true }));
|
||
resetBtn.click();
|
||
setTimeout(() => {
|
||
say(!document.querySelector<HTMLInputElement>(".search-wrap_kw .ivu-input")!.value, "resetClears");
|
||
say(RUNTIME_ERRORS.length === 0, `errs(${RUNTIME_ERRORS.length})`);
|
||
report();
|
||
}, 600);
|
||
}, 300);
|
||
return;
|
||
}
|
||
say(RUNTIME_ERRORS.length === 0, `errs(${RUNTIME_ERRORS.length})`);
|
||
report();
|
||
}
|
||
|
||
function report() {
|
||
document.title = `LIST|bad=${bad}|` + out.join("|") + (RUNTIME_ERRORS.length ? "|" + RUNTIME_ERRORS.slice(0, 2).join("~") : "");
|
||
}
|
||
}, 2600);
|
||
}
|
||
|
||
// 对齐诊断（?align=1）：逐控件量出盒模型 + 文字基线相对容器的偏移，
|
||
// 用于定位「哪个元素没对齐」——无头环境下肉眼截图不可靠，直接量数值最准。
|
||
if (new URLSearchParams(location.search).has("align")) {
|
||
setTimeout(() => {
|
||
const n1 = (v: number) => Math.round(v * 10) / 10;
|
||
const bars = Array.from(document.querySelectorAll<HTMLElement>(".search-wrap"));
|
||
const lines: string[] = [];
|
||
|
||
bars.forEach((bar, bi) => {
|
||
const br = bar.getBoundingClientRect();
|
||
const cy = br.top + br.height / 2;
|
||
lines.push(`=bar${bi + 1}(h${n1(br.height)},cy${n1(cy)})`);
|
||
|
||
// 逐个「控件级」元素：取到盒模型中心与容器中心的偏差
|
||
const nodes = Array.from(
|
||
bar.querySelectorAll<HTMLElement>(
|
||
".search-wrap_dates .ivu-date-picker, .search-wrap_tilde, .search-wrap_sel, .search-wrap_reset.ivu-btn, .search-wrap_kw, .search-wrap .ivu-btn-primary, .stats-tip"
|
||
)
|
||
);
|
||
nodes.forEach((el) => {
|
||
const r = el.getBoundingClientRect();
|
||
const off = r.top + r.height / 2 - cy;
|
||
// 文字行盒（用 Range 量文本本身，能反映真实基线差异）
|
||
let textOff = "";
|
||
const txt = el.querySelector<HTMLElement>("span, .ivu-select-selected-value, .ivu-select-placeholder");
|
||
const target = txt || el;
|
||
if (target && target.firstChild && target.firstChild.nodeType === 3) {
|
||
const rg = document.createRange();
|
||
rg.selectNodeContents(target);
|
||
const tr = rg.getBoundingClientRect();
|
||
if (tr.height) textOff = `,txt${n1(tr.top + tr.height / 2 - cy)}`;
|
||
}
|
||
const cls = (el.className || "").toString().split(" ").filter((c) => /search-wrap|stats-tip|ivu-btn/.test(c)).join(".");
|
||
lines.push(`${cls}(t${n1(r.top - br.top)},h${n1(r.height)},off${n1(off)}${textOff})`);
|
||
});
|
||
|
||
// 日期输入框的「内容区」中心（input 无法用 Range 取文字，用内容盒中心代替）
|
||
bar.querySelectorAll<HTMLElement>(".search-wrap_dates .ivu-input").forEach((el, i) => {
|
||
const r = el.getBoundingClientRect();
|
||
const cs = getComputedStyle(el);
|
||
const bt = parseFloat(cs.borderTopWidth);
|
||
const pt = parseFloat(cs.paddingTop);
|
||
const pb = parseFloat(cs.paddingBottom);
|
||
const bb = parseFloat(cs.borderBottomWidth);
|
||
const contentTop = r.top + bt + pt;
|
||
const contentH = r.height - bt - bb - pt - pb;
|
||
lines.push(`dateInput${i + 1}(t${n1(r.top - br.top)},h${n1(r.height)},contentC${n1(contentTop + contentH / 2 - cy)})`);
|
||
});
|
||
});
|
||
|
||
document.title = "ALIGN|" + lines.join("|");
|
||
}, 2800);
|
||
}
|