更新

app/src/main/index.ts

@@ -10,17 +10,13 @@ import { setupNativeWorkingDir } from './services/native-path'
 suppressKnownDllStderr()
 import { registerIpcHandlers, handleBeforeQuit } from './ipc/register-handlers'
 import { setPollMainWindow } from './services/poll-manager'
-import {
+import { DESIGN_WIDTH, DESIGN_HEIGHT, contentHeightForWidth } from '@shared/viewport'
-  DESIGN_WIDTH,
-  contentHeightForWidth,
-  CONTENT_VIEWPORT_HEIGHT
-} from '@shared/viewport'
 
 let mainWindow: BrowserWindow | null = null
 
 const MIN_CONTENT_WIDTH = 960
 
-/** 默认内容区：约 85% 工作区宽，高按 720:390 */
+/** 默认内容区：约 85% 工作区宽，高 = 宽×360/720 */
 function getDefaultWindowSize(): { width: number; height: number } {
   const { width: sw, height: sh } = screen.getPrimaryDisplay().workAreaSize
   let w = Math.max(1280, Math.min(Math.floor(sw * 0.85), 1600))
@@ -28,7 +24,7 @@ function getDefaultWindowSize(): { width: number; height: number } {
   const maxH = Math.floor(sh * 0.85)
   if (h > maxH) {
     h = Math.max(contentHeightForWidth(MIN_CONTENT_WIDTH), maxH)
-    w = Math.round((h * DESIGN_WIDTH) / CONTENT_VIEWPORT_HEIGHT)
+    w = Math.round((h * DESIGN_WIDTH) / DESIGN_HEIGHT)
   }
   return { width: w, height: h }
 }
@@ -54,6 +50,10 @@ function createWindow(): void {
   setPollMainWindow(mainWindow)
 
   mainWindow.on('ready-to-show', () => {
+    if (mainWindow) {
+      const [cw] = mainWindow.getContentSize()
+      mainWindow.setContentSize(cw, contentHeightForWidth(cw))
+    }
     mainWindow?.center()
     mainWindow?.show()
     if (!app.isPackaged) {
@@ -67,7 +67,7 @@ function createWindow(): void {
     }
   })
 
-  // 内容区 720:390，画布仍 360 高，按宽缩放后底部可完整显示
+  // 内容区锁定 720:360，与 useScale(scale = innerWidth/720) 一致
   mainWindow.on('resize', () => {
     if (!mainWindow) return
     const [cw, ch] = mainWindow.getContentSize()

app/src/renderer/src/composables/useScale.ts

@@ -3,17 +3,16 @@ import { DESIGN_WIDTH, DESIGN_HEIGHT } from '@shared/viewport'
 
 export { DESIGN_WIDTH, DESIGN_HEIGHT }
 
-/** 按内容区宽度铺满画布，垂直居中；内容区高按 720:390 预留时底部完整可见 */
+/** 按内容区宽度缩放 720×360；内容区高由主进程按同比例设置，顶对齐无底部留白 */
 export function useScale(shellRef: Ref<HTMLElement | null>): void {
   function updateScale(): void {
     const shell = shellRef.value
     if (!shell) return
 
     const scale = window.innerWidth / DESIGN_WIDTH
-    const offsetY = Math.max(0, (window.innerHeight - DESIGN_HEIGHT * scale) / 2)
 
     shell.style.transformOrigin = '0 0'
-    shell.style.transform = `translate(0px, ${offsetY}px) scale(${scale})`
+    shell.style.transform = `translate(0px, 0px) scale(${scale})`
   }
 
   onMounted(() => {

app/src/renderer/src/styles/shell.css

@@ -13,7 +13,7 @@ body,
   position: relative;
 }
 
-/* 720×360 逻辑画布；窗口内容区高 720:390；useScale 按宽 scale */
+/* 720×360 逻辑画布；内容区同比例；useScale 按 innerWidth/720 顶对齐 */
 .app-shell {
   position: absolute;
   left: 0;

app/src/shared/viewport.ts

@@ -1,10 +1,8 @@
-/** 设计稿逻辑画布 720×360 */
+/** 设计稿逻辑画布 */
 export const DESIGN_WIDTH = 720
 export const DESIGN_HEIGHT = 360
 
-/** 内容区高度（720 宽时 390）：比画布多约 30px，避免按宽缩放后底部被裁 */
+/** 内容区高度 = 宽 × (360/720)，与 useScale 按宽缩放后的画布高一致 */
-export const CONTENT_VIEWPORT_HEIGHT = 390
-
 export function contentHeightForWidth(contentWidth: number): number {
-  return Math.round((contentWidth * CONTENT_VIEWPORT_HEIGHT) / DESIGN_WIDTH)
+  return Math.ceil((contentWidth * DESIGN_HEIGHT) / DESIGN_WIDTH)
 }