🤖 Fix: 修复在4K屏幕下显示出问题的情况 (Resolves #142)

[github-actions]

AI: Resolves #142

This Pull Request was automatically generated by OpenCode to address Issue #142.

📝 AI Modification Summary & Conclusion:

4K Screen Display Fix - Implementation Summary

Problem

On 4K (3840x2160) and ultrawide (3440x1440, 2560x1080) displays, the plweb2 application exhibited the following issues:

1. Content stretching edge-to-edge: No max-width constraints on the main layout, causing content to span the full 3840px width, making text lines excessively long and hard to read.
2. Insufficient grid columns: The responsive breakpoint system only went up to 1800px (wide), leaving only 4 items per row on a 4K screen. Each item would be ~960px wide, far too large for project cards.
3. Font sizes not optimized: Font sizes capped at 20px (primary) and 16px (secondary), which can appear too small on high-resolution displays without scaling.
4. BiLayout right panel too wide: The right panel (comments/works list) in Profile and ExperimentSummary views was 50% of the viewport, which on 4K is ~1920px wide - far beyond readable line lengths.

Files Modified

1. src/layout/useResponsive.ts

Core responsive logic - Added ultrawide/4K breakpoint support:

• Added a new ultrawide: 2560 breakpoint to the breakpoints object. This threshold covers:
  • 4K displays at 150% scaling (2560 CSS pixels)
  • Native ultrawide monitors (3440x1440, 2560x1080)
• Updated getBlockItemsPerRow() to return 6 items per row for screens >= 2560px (up from 4)
• Updated getFriendItemsPerRow() to return 8 items per row (up from 5)
• Updated getFontSizeM() to return 22px for ultrawide (up from 20px)
• Updated getFontSizeS() to return 18px for ultrawide (up from 16px)
• Added isUltrawide computed property and exported it

2. src/App.vue

Global layout constraint for 4K screens:

• Added a @media (min-width: 2560px) CSS rule that:
  • Sets html background to a dark color (#2c2c2e) for letterboxing effect
  • Constrains #app to max-width: 1920px with margin: 0 auto for centering
  • Adds a subtle box-shadow to visually distinguish the app container
• This prevents content from spanning the full 3840px width and maintains readable line lengths

3. src/layout/startPage.css

Grid container constraint for Home and BlackHole pages:

• Added @media (min-width: 2560px) rule constraining .block-container to max-width: 1800px centered
• Ensures the grid items don't stretch across the entire 4K viewport

4. src/layout/BiLayout.css

BiLayout right panel constraint for Profile and ExperimentSummary pages:

• Added @media (min-width: 2560px) rule constraining .right-bottom-container to max-width: 960px centered
• Ensures the comments/works list in the right panel stays at a readable width

5. src/views/WorkList.vue

Work list page constraint:

• Added @media (min-width: 2560px) CSS rule constraining .list (fixed-position container) to max-width: 1800px centered using left: 50%; transform: translateX(-50%)
• Ensures the work list items don't stretch across the full viewport

Technical Approach

1. Breakpoint-based responsive design: Extended the existing breakpoint system rather than adding device-specific "4K" checks. The threshold of 2560px was chosen because it covers both native ultrawide monitors and 4K displays with common DPI scaling settings (150%).

2. Progressive enhancement: All changes are additive - they only take effect at widths >= 2560px, with zero impact on existing screen sizes. The app behavior for standard desktop (1920px, 1440px) and mobile remains identical.

3. CSS max-width constraints: Applied centered max-width containers at three levels:

   • Global: #app constrained to 1920px
   • Content grid: .block-container constrained to 1800px
   • BiLayout right panel: .right-bottom-container constrained to 960px

   This creates a layered constraint system that prevents any content area from exceeding comfortable reading widths on 4K displays.

4. Row count increase: By increasing grid columns from 4 to 6 (blocks) and 5 to 8 (friends), each item maintains reasonable dimensions on ultrawide screens instead of being stretched to enormous sizes.

Verification

• TypeScript type-check (vue-tsc --noEmit): No errors
• ESLint: 0 errors (only pre-existing warnings, none introduced)
• Production build (vite build): Successful
• All changes are backward-compatible with existing screen sizes