diff --git a/front/components/ui/select.test.tsx b/front/components/ui/select.test.tsx
new file mode 100644
index 0000000..3f15a82
--- /dev/null
+++ b/front/components/ui/select.test.tsx
@@ -0,0 +1,38 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+import { Select } from './select'
+
+afterEach(() => vi.unstubAllGlobals())
+
+it('底部菜单向上展开，并随窗口变化重新定位；选择选项后关闭', () => {
+ vi.stubGlobal('innerHeight', 600)
+ vi.stubGlobal('innerWidth', 800)
+ const onChange = vi.fn()
+ render(
)
+ const trigger = screen.getByRole('button')
+ vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({ top: 540, bottom: 580, left: 20, width: 500 } as DOMRect)
+ fireEvent.click(trigger)
+ const panel = screen.getByRole('listbox').parentElement!
+ expect(Number.parseFloat(panel.style.top) + Number.parseFloat(panel.style.maxHeight)).toBeLessThanOrEqual(540)
+ vi.stubGlobal('innerHeight', 900)
+ fireEvent.resize(window)
+ expect(panel.style.top).toBe('588px')
+ fireEvent.click(screen.getByRole('option', { name: '25' }))
+ expect(onChange).toHaveBeenCalledWith({ target: { value: '25' } })
+ expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+})
+
+it('小窗口菜单限制高度和宽度，并支持 Escape 关闭', () => {
+ vi.stubGlobal('innerHeight', 180)
+ vi.stubGlobal('innerWidth', 300)
+ render(
)
+ const trigger = screen.getByRole('button')
+ vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({ top: 50, bottom: 90, left: 260, width: 500 } as DOMRect)
+ fireEvent.click(trigger)
+ const panel = screen.getByRole('listbox').parentElement!
+ expect(panel.style.maxHeight).toBe('74px')
+ expect(panel.style.width).toBe('284px')
+ expect(panel.style.left).toBe('8px')
+ fireEvent.keyDown(document, { key: 'Escape' })
+ expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+})
diff --git a/front/components/ui/select.tsx b/front/components/ui/select.tsx
index cd20f36..9b2aa2a 100644
--- a/front/components/ui/select.tsx
+++ b/front/components/ui/select.tsx
@@ -21,7 +21,7 @@ const Select = React.forwardRef
(
const wrapperRef = React.useRef(null)
const buttonRef = React.useRef(null)
const dropdownRef = React.useRef(null)
- const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0, left: 0, width: 0 })
+ const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0, left: 0, width: 0, maxHeight: 224 })
// 确保组件已挂载（解决 SSR 问题）
React.useEffect(() => {
@@ -42,25 +42,43 @@ const Select = React.forwardRef(
const updatePosition = React.useCallback(() => {
if (buttonRef.current) {
const rect = buttonRef.current.getBoundingClientRect()
+ const margin = 8
+ const viewport = window.visualViewport
+ const viewportTop = viewport?.offsetTop ?? 0
+ const viewportLeft = viewport?.offsetLeft ?? 0
+ const viewportHeight = viewport?.height ?? window.innerHeight
+ const viewportWidth = viewport?.width ?? window.innerWidth
+ const below = Math.max(0, viewportTop + viewportHeight - rect.bottom - margin * 2)
+ const above = Math.max(0, rect.top - viewportTop - margin * 2)
+ const preferredHeight = Math.min(224, dropdownRef.current?.scrollHeight || 224)
+ const openAbove = below < preferredHeight && above > below
+ const maxHeight = Math.min(224, openAbove ? above : below)
+ const height = Math.min(preferredHeight, maxHeight)
+ const width = Math.min(rect.width, Math.max(0, viewportWidth - margin * 2))
setDropdownPosition({
- top: rect.bottom + 8,
- left: rect.left,
- width: rect.width,
+ top: Math.max(viewportTop + margin, Math.min(openAbove ? rect.top - margin - height : rect.bottom + margin, viewportTop + viewportHeight - margin - height)),
+ left: Math.max(viewportLeft + margin, Math.min(rect.left, viewportLeft + viewportWidth - width - margin)),
+ width,
+ maxHeight,
})
}
}, [])
// 打开时计算位置
- React.useEffect(() => {
+ React.useLayoutEffect(() => {
if (open) {
updatePosition()
// 监听滚动和窗口大小变化，更新位置
const handleUpdate = () => updatePosition()
window.addEventListener('scroll', handleUpdate, true)
window.addEventListener('resize', handleUpdate)
+ window.visualViewport?.addEventListener('resize', handleUpdate)
+ window.visualViewport?.addEventListener('scroll', handleUpdate)
return () => {
window.removeEventListener('scroll', handleUpdate, true)
window.removeEventListener('resize', handleUpdate)
+ window.visualViewport?.removeEventListener('resize', handleUpdate)
+ window.visualViewport?.removeEventListener('scroll', handleUpdate)
}
}
}, [open, updatePosition])
@@ -85,11 +103,8 @@ const Select = React.forwardRef(
}
if (open) {
- // 使用 setTimeout 确保 DOM 已更新
- setTimeout(() => {
- document.addEventListener('mousedown', handleClickOutside)
- document.addEventListener('keydown', handleEscape)
- }, 0)
+ document.addEventListener('mousedown', handleClickOutside)
+ document.addEventListener('keydown', handleEscape)
}
return () => {
@@ -106,6 +121,8 @@ const Select = React.forwardRef(
id={id as string}
type="button"
disabled={disabled}
+ aria-haspopup="listbox"
+ aria-expanded={open}
onClick={() => setOpen((v) => !v)}
className={cn(
"flex h-10 w-full rounded-lg border border-slate-200 bg-white/90 px-4 py-2 pr-8 text-sm text-slate-800 shadow-[0_1px_2px_rgba(15,23,42,0.03)] transition-all duration-200 hover:border-blue-200 hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-slate-100",
@@ -126,14 +143,17 @@ const Select = React.forwardRef(
top: `${dropdownPosition.top}px`,
left: `${dropdownPosition.left}px`,
width: `${dropdownPosition.width}px`,
+ maxHeight: `${dropdownPosition.maxHeight}px`,
}}
>
-
+
{options.map((o) => {
const active = String(value ?? '') === String(o.value)
return (
- {
}
}
-async function checkLogin(platform: "boss" | "zhilian"): Promise {
+async function checkLogin(platform: "boss" | "zhilian", openIfMissing = false): Promise {
const title = platform === "boss" ? "Boss登录状态" : "智联登录状态"
const href = platform === "boss" ? "/boss" : "/zhilian"
@@ -170,7 +171,7 @@ async function checkLogin(platform: "boss" | "zhilian"): Promise
}
}
- const status = await getZhilianPageStatus()
+ const status = await getZhilianPageStatus({ openIfMissing })
return item("zhilianLogin", title, status.ready, status.message, "检查智联页面", href, !status.connected)
}
@@ -197,7 +198,7 @@ export async function validateSetupForPlatform(platform: "boss" | "zhilian", opt
checkResume(),
]
if (requirePlatformLogin) {
- checkers.push(checkLogin(platform))
+ checkers.push(checkLogin(platform, options.openPlatformPageIfMissing === true))
}
const items = await Promise.all(checkers)
const requiredKeys: SetupCheckKey[] = ["backend", "chromeBridge", "aiConfig", "resume"]
diff --git a/front/lib/zhilian-page-status.test.ts b/front/lib/zhilian-page-status.test.ts
index 954f75f..fb92b19 100644
--- a/front/lib/zhilian-page-status.test.ts
+++ b/front/lib/zhilian-page-status.test.ts
@@ -12,6 +12,11 @@ beforeEach(() => {
})
describe('智联 Chrome 状态', () => {
+ it('主动启动允许自动开页，并留出加载时间；登录和安全验证仍阻止扫描', async () => {
+ vi.mocked(sendChromeBridgeMessage).mockResolvedValue({ success: true, chromePageReady: true, hasLoginPrompt: true })
+ expect((await getZhilianPageStatus({ openIfMissing: true })).ready).toBe(false)
+ expect(sendChromeBridgeMessage).toHaveBeenCalledWith({ type: 'ZHILIAN_PAGE_STATUS', platform: 'zhilian', openIfMissing: true }, 35000)
+ })
it('Chrome 可用时不再读取后端浏览器登录状态', async () => {
const fetcher = vi.fn(async (url: string) => ({ ok: true, json: async () => url.endsWith('/api/ready')
? { ready: true, status: "UP" } : { success: true, data: { introduce: '简介', prompt: '分析', resumeText: '简历' } } }))
diff --git a/front/lib/zhilian-page-status.ts b/front/lib/zhilian-page-status.ts
index a040859..ca5f76c 100644
--- a/front/lib/zhilian-page-status.ts
+++ b/front/lib/zhilian-page-status.ts
@@ -6,11 +6,14 @@ export type ZhilianPageStatus = {
message: string
}
-export async function getZhilianPageStatus(): Promise {
+export async function getZhilianPageStatus(options: { openIfMissing?: boolean } = {}): Promise {
try {
const bridge = await getChromeBridgeStatus()
if (!bridge.success) return { connected: false, ready: false, message: bridge.message || 'Chrome扩展未连接，请加载或重新加载扩展。' }
- const status = await sendChromeBridgeMessage({ type: 'ZHILIAN_PAGE_STATUS', platform: 'zhilian' }, 8000)
+ const status = await sendChromeBridgeMessage({
+ type: 'ZHILIAN_PAGE_STATUS', platform: 'zhilian',
+ ...(options.openIfMissing ? { openIfMissing: true } : {}),
+ }, options.openIfMissing ? 35000 : 8000)
const ready = status.success === true && status.chromePageReady === true
&& !status.hasLoginPrompt && !status.hasSecurityPrompt
return {