fix: fill maximized main window
This commit is contained in:
QiuSW
+1
-1
@@ -51,7 +51,7 @@
|
||||
| T-032 | 补充 Windows 打包验证文档 | T-031 | `wails3 package` 前置条件、输出目录和常见失败处理写入 README 或 docs | DONE |
|
||||
| T-033 | 完成一次模板 smoke 清单 | T-023 | 登录、设置、业务样例、日志、统计、组件示例、托盘、热键都按清单验证并记录结果 | DONE |
|
||||
| T-034 | 添加 Windows Wails 快捷脚本 | T-001 | `dev.bat` 一行切到项目根目录、补 Go bin PATH、自动选择空闲端口并运行 `wails3 dev`；`build.bat` 一行切到项目根目录、补 Go bin PATH 并运行 `wails3 build`；README、技术栈、当前状态和执行流水已同步 | DONE |
|
||||
| T-035 | 修复主窗口最大化黑边与布局填充 | T-011 | 点击右上角最大化后窗口占满 Windows 可用区域；主窗口背景、根容器和主布局铺满；侧边导航贴齐左边；内容区填满剩余区域；不出现左右黑边；恢复窗口后布局正常 | TODO |
|
||||
| T-035 | 修复主窗口最大化黑边与布局填充 | T-011 | 点击右上角最大化后窗口占满 Windows 可用区域；主窗口背景、根容器和主布局铺满；侧边导航贴齐左边；内容区填满剩余区域；不出现左右黑边；恢复窗口后布局正常 | DONE |
|
||||
|
||||
## EC 分支 · 电商场景
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
- 当前兼容重定向路由：`/#/business/image-optimizer`、`/#/logs/audit`、`/#/logs/app`。
|
||||
- 当前第二窗口路由：`/#/second`
|
||||
- 已实现主窗口策略：默认不最大化，初始 `1280x800`，最小 `1024x720`，居中，可调整大小；启动后可按 `window.*` 配置恢复尺寸和最大化状态。
|
||||
- 已实现页面布局策略：根容器 `width: 100%`、`height: 100vh`，内部 flex/grid 填满窗口。
|
||||
- 已实现页面布局策略：根容器 `width: 100%`、`height: 100vh`，内部 flex/grid 填满窗口；主窗口最大化后背景、根容器和主布局铺满可用区域，不出现左右黑边。
|
||||
- 已实现内容区策略：阅读型内容保留最大宽度；列表、仪表盘、设置页自适应拉伸。
|
||||
- 已保留第二窗口策略：保持小窗，不参与主窗口最大化和尺寸恢复逻辑。
|
||||
- 已实现 AuthService：`GetAuthProviders`、`GetAuthMode`、`SetAuthMode`、`Login`、`Logout`、`GetCurrentSession`。
|
||||
@@ -89,7 +89,6 @@ wails3 build
|
||||
- OCR 和热键依赖平台实现，跨平台修改需要分别验证。
|
||||
- 当前前端以构建检查为主，暂未引入专门的前端单元测试。
|
||||
- bindings 生成依赖本机安装的 `wails3`。
|
||||
- 待修复：主窗口最大化后不能出现左右黑边，窗口背景、根容器和主布局必须铺满可用区域。
|
||||
- Windows 默认打包路径依赖 NSIS `makensis`；当前本机 PATH 未检测到 `makensis`。
|
||||
- 当前项目未配置 `wails.json`，MSIX 暂不作为可用打包路径。
|
||||
- 托盘菜单点击行为仍建议在真实桌面环境人工复核，本轮已确认初始化代码路径和应用启动 smoke。
|
||||
@@ -251,9 +250,16 @@ wails3 build
|
||||
- 新增 `docs/ecommerce-scenario.md`。
|
||||
- `go test ./...`、`cd frontend && npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。
|
||||
|
||||
同日修复主窗口最大化黑边与布局填充：
|
||||
|
||||
- Go 侧主窗口设置 `BackgroundColour`，避免 WebView 外围区域显示默认黑底。
|
||||
- 前端 `html`、`body`、`#app`、应用根容器和主布局统一填满窗口，并设置明暗主题背景。
|
||||
- `go test ./...`、`cd frontend && npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。
|
||||
- 启动 `bin\cmbone.exe` 后程序化最大化窗口，左右边缘采样 `11264` 个像素，纯黑像素数为 `0`。
|
||||
|
||||
## 下一步
|
||||
|
||||
先领取 [`06-tasks.md`](06-tasks.md) 的 `T-035`：修复主窗口最大化黑边与布局填充；完成后继续 `EC-002` 建立商品后端模型。
|
||||
继续领取 [`06-tasks.md`](06-tasks.md) 的 `EC-002`：建立商品后端模型。
|
||||
|
||||
## 当前 blocker
|
||||
|
||||
|
||||
@@ -29,9 +29,11 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.app-root {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.drag-region {
|
||||
|
||||
@@ -72,7 +72,7 @@ onMounted(async () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-screen w-full min-w-0 overflow-hidden bg-slate-100 font-sans text-slate-950 dark:bg-slate-950 dark:text-white">
|
||||
<div class="flex h-full min-h-screen w-full min-w-0 overflow-hidden bg-slate-100 font-sans text-slate-950 dark:bg-slate-950 dark:text-white">
|
||||
<aside
|
||||
class="flex w-64 shrink-0 flex-col border-r border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900"
|
||||
:class="isMacOS ? 'pt-10' : 'pt-4'"
|
||||
|
||||
+10
-1
@@ -7,8 +7,17 @@ body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: rgb(241 245 249);
|
||||
}
|
||||
|
||||
html.dark,
|
||||
html.dark body,
|
||||
html.dark #app {
|
||||
background: rgb(2 6 23);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -16,7 +25,7 @@ body,
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-black dark:bg-gray-900 dark:text-white;
|
||||
@apply text-slate-950 dark:text-white;
|
||||
}
|
||||
|
||||
.drag-region {
|
||||
|
||||
@@ -49,16 +49,17 @@ func ConfigureAppService(a *AppService, app *application.App, i18nFS embed.FS, s
|
||||
isWindows := runtime.GOOS == "windows"
|
||||
mainWindowState := a.loadMainWindowStateOptions()
|
||||
mainWindow := app.NewWebviewWindowWithOptions(application.WebviewWindowOptions{
|
||||
Title: "main",
|
||||
Name: "main",
|
||||
Width: mainWindowState.Width,
|
||||
Height: mainWindowState.Height,
|
||||
MinWidth: mainWindowMinWidth,
|
||||
MinHeight: mainWindowMinHeight,
|
||||
InitialPosition: application.WindowCentered,
|
||||
StartState: mainWindowState.StartState,
|
||||
DisableResize: false,
|
||||
Frameless: isWindows,
|
||||
Title: "main",
|
||||
Name: "main",
|
||||
Width: mainWindowState.Width,
|
||||
Height: mainWindowState.Height,
|
||||
MinWidth: mainWindowMinWidth,
|
||||
MinHeight: mainWindowMinHeight,
|
||||
InitialPosition: application.WindowCentered,
|
||||
StartState: mainWindowState.StartState,
|
||||
DisableResize: false,
|
||||
Frameless: isWindows,
|
||||
BackgroundColour: application.NewRGB(241, 245, 249),
|
||||
Mac: application.MacWindow{
|
||||
InvisibleTitleBarHeight: 50,
|
||||
Backdrop: application.MacBackdropTranslucent,
|
||||
|
||||
+17
@@ -417,3 +417,20 @@
|
||||
- 不出现左右黑边，恢复窗口后布局正常。
|
||||
- 验证：
|
||||
- `git diff --check` 通过。
|
||||
|
||||
### 完成主窗口最大化黑边修复
|
||||
|
||||
- 任务：完成 `T-035`，修复主窗口最大化黑边与布局填充。
|
||||
- 结果：
|
||||
- Go 侧为主窗口设置浅色背景，避免 WebView 外围区域显示默认黑底。
|
||||
- 前端根节点和应用根容器统一使用 `100%` 宽高、`100vh` 最小高度和明暗主题背景。
|
||||
- 主布局由 `h-screen` 调整为 `h-full min-h-screen`，最大化和恢复窗口时都跟随可用区域填充。
|
||||
- 验证：
|
||||
- `cd frontend && npm run build` 通过。
|
||||
- `go test ./...` 通过。
|
||||
- `go build -o bin\cmbone.exe .` 通过。
|
||||
- `cmd /c build.bat` 通过。
|
||||
- 启动 `bin\cmbone.exe` 后程序化最大化主窗口，左右边缘采样 `11264` 个像素，纯黑像素数为 `0`。
|
||||
- 非阻塞警告：
|
||||
- `cmd /c build.bat` 仍提示 `wails3 build` 是 `wails3 task` 的 alias。
|
||||
- 前端构建仍提示 Browserslist 数据过期和 chunk 大小警告。
|
||||
|
||||
Reference in New Issue
Block a user