fix: support titlebar double click maximize
This commit is contained in:
QiuSW
+1
-1
@@ -52,7 +52,7 @@
|
||||
| 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 可用区域；主窗口背景、根容器和主布局铺满；侧边导航贴齐左边；内容区填满剩余区域；不出现左右黑边；恢复窗口后布局正常 | DONE |
|
||||
| T-036 | 支持 Windows 主窗口标题栏双击最大化 | T-035 | Windows 无边框主窗口顶部拖拽区域双击可切换最大化/还原；右上角按钮区、登录入口和打开第二窗口入口双击不误触发；第二窗口不受影响；窗口状态持久化继续生效 | TODO |
|
||||
| T-036 | 支持 Windows 主窗口标题栏双击最大化 | T-035 | Windows 无边框主窗口顶部拖拽区域双击可切换最大化/还原；右上角按钮区、登录入口和打开第二窗口入口双击不误触发；第二窗口不受影响；窗口状态持久化继续生效 | DONE |
|
||||
|
||||
## EC 分支 · 电商场景
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
- 当前主应用模块路由：`/#/login`、`/#/dashboard`、`/#/products`、`/#/image-optimizer`、`/#/logs`、`/#/statistics`、`/#/settings`、`/#/components`。
|
||||
- 当前兼容重定向路由：`/#/business/image-optimizer`、`/#/logs/audit`、`/#/logs/app`。
|
||||
- 当前第二窗口路由：`/#/second`
|
||||
- 已实现主窗口策略：默认不最大化，初始 `1280x800`，最小 `1024x720`，居中，可调整大小；启动后可按 `window.*` 配置恢复尺寸和最大化状态。
|
||||
- 已实现主窗口策略：默认不最大化，初始 `1280x800`，最小 `1024x720`，居中，可调整大小；启动后可按 `window.*` 配置恢复尺寸和最大化状态；Windows 无边框主窗口顶部拖拽区域双击可切换最大化/还原。
|
||||
- 已实现页面布局策略：根容器 `width: 100%`、`height: 100vh`，内部 flex/grid 填满窗口；主窗口最大化后背景、根容器和主布局铺满可用区域，不出现左右黑边。
|
||||
- 已实现内容区策略：阅读型内容保留最大宽度；列表、仪表盘、设置页自适应拉伸。
|
||||
- 已保留第二窗口策略：保持小窗，不参与主窗口最大化和尺寸恢复逻辑。
|
||||
@@ -89,7 +89,6 @@ wails3 build
|
||||
- OCR 和热键依赖平台实现，跨平台修改需要分别验证。
|
||||
- 当前前端以构建检查为主，暂未引入专门的前端单元测试。
|
||||
- bindings 生成依赖本机安装的 `wails3`。
|
||||
- 待修复：Windows 无边框主窗口顶部拖拽区域双击不能像原生标题栏一样切换最大化/还原。
|
||||
- Windows 默认打包路径依赖 NSIS `makensis`；当前本机 PATH 未检测到 `makensis`。
|
||||
- 当前项目未配置 `wails.json`，MSIX 暂不作为可用打包路径。
|
||||
- 托盘菜单点击行为仍建议在真实桌面环境人工复核，本轮已确认初始化代码路径和应用启动 smoke。
|
||||
@@ -258,9 +257,16 @@ wails3 build
|
||||
- `go test ./...`、`cd frontend && npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。
|
||||
- 启动 `bin\cmbone.exe` 后程序化最大化窗口，左右边缘采样 `11264` 个像素，纯黑像素数为 `0`。
|
||||
|
||||
同日完成 Windows 主窗口标题栏双击最大化：
|
||||
|
||||
- 主窗口标题栏使用短时间、小距离的双击检测，不依赖 WebView 是否合成 `dblclick` 事件。
|
||||
- 右上角控件区继续保持 `no-drag`，双击不误触发标题栏最大化逻辑。
|
||||
- `go test ./...`、`cd frontend && npm run build`、`go build -o bin\cmbone.exe .` 和 `cmd /c build.bat` 通过。
|
||||
- 启动 `bin\cmbone.exe` 后自动化双击顶部中间区域，窗口从普通状态进入最大化；双击右侧 `no-drag` 控件区后窗口未最大化。
|
||||
|
||||
## 下一步
|
||||
|
||||
先领取 [`06-tasks.md`](06-tasks.md) 的 `T-036`：支持 Windows 主窗口标题栏双击最大化；完成后继续 `EC-002` 建立商品后端模型。
|
||||
继续领取 [`06-tasks.md`](06-tasks.md) 的 `EC-002`：建立商品后端模型。
|
||||
|
||||
## 当前 blocker
|
||||
|
||||
|
||||
@@ -33,6 +33,11 @@ const isMacOS = ref(false)
|
||||
const isMaximized = ref(false)
|
||||
const sessionUsername = ref('未登录')
|
||||
const sessionProvider = ref('Auth Provider')
|
||||
const titlebarDoubleClickMaxDelayMs = 500
|
||||
const titlebarDoubleClickMaxDistancePx = 8
|
||||
let lastTitlebarClickAt = 0
|
||||
let lastTitlebarClickX = 0
|
||||
let lastTitlebarClickY = 0
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/dashboard', label: '工作台', detail: '指标与近期任务', icon: DashboardOutlined },
|
||||
@@ -55,6 +60,35 @@ async function toggleMaximize() {
|
||||
isMaximized.value = await Window.IsMaximised()
|
||||
}
|
||||
|
||||
function isNoDragTarget(target: EventTarget | null) {
|
||||
return target instanceof Element && target.closest('.no-drag')
|
||||
}
|
||||
|
||||
async function handleTitlebarMouseDown(event: MouseEvent) {
|
||||
if (!isWindows.value || event.button !== 0 || isNoDragTarget(event.target)) {
|
||||
return
|
||||
}
|
||||
|
||||
const now = window.performance.now()
|
||||
const isDoubleClick =
|
||||
now - lastTitlebarClickAt <= titlebarDoubleClickMaxDelayMs &&
|
||||
Math.abs(event.clientX - lastTitlebarClickX) <= titlebarDoubleClickMaxDistancePx &&
|
||||
Math.abs(event.clientY - lastTitlebarClickY) <= titlebarDoubleClickMaxDistancePx
|
||||
|
||||
lastTitlebarClickAt = now
|
||||
lastTitlebarClickX = event.clientX
|
||||
lastTitlebarClickY = event.clientY
|
||||
|
||||
if (!isDoubleClick) {
|
||||
return
|
||||
}
|
||||
|
||||
lastTitlebarClickAt = 0
|
||||
|
||||
event.preventDefault()
|
||||
await toggleMaximize()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await OS_READY
|
||||
const osName = getOS()
|
||||
@@ -123,8 +157,9 @@ onMounted(async () => {
|
||||
|
||||
<section class="flex min-w-0 flex-1 flex-col">
|
||||
<header
|
||||
class="flex h-12 shrink-0 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-900"
|
||||
class="flex h-12 shrink-0 select-none items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-900"
|
||||
:class="isWindows ? 'drag-region' : ''"
|
||||
@mousedown="handleTitlebarMouseDown"
|
||||
>
|
||||
<div class="drag-area min-w-0">
|
||||
<p class="mb-0 truncate text-sm font-medium text-slate-700 dark:text-slate-200">
|
||||
@@ -132,7 +167,7 @@ onMounted(async () => {
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="no-drag flex items-center gap-1">
|
||||
<div class="no-drag flex items-center gap-1" @dblclick.stop>
|
||||
<button class="toolbar-button" title="打开第二窗口" @click="OpenSecondWindow">
|
||||
<ExceptionOutlined />
|
||||
</button>
|
||||
@@ -163,12 +198,12 @@ onMounted(async () => {
|
||||
|
||||
<style scoped>
|
||||
.drag-region {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-app-region: no-drag;
|
||||
--wails-draggable: drag;
|
||||
}
|
||||
|
||||
.drag-area {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-app-region: no-drag;
|
||||
--wails-draggable: drag;
|
||||
}
|
||||
|
||||
|
||||
+19
@@ -447,3 +447,22 @@
|
||||
- 第二窗口不受影响，主窗口状态持久化继续生效。
|
||||
- 验证：
|
||||
- `git diff --check` 通过。
|
||||
|
||||
### 完成 Windows 主窗口标题栏双击最大化
|
||||
|
||||
- 任务：完成 `T-036`，支持 Windows 主窗口标题栏双击最大化。
|
||||
- 结果：
|
||||
- 主窗口标题栏监听 `mousedown`，用 `500ms` 和 `8px` 位移阈值识别双击，避免依赖 WebView 是否合成 `dblclick`。
|
||||
- 双击顶部拖拽区域调用现有 `Window.ToggleMaximise()`，继续复用窗口状态持久化逻辑。
|
||||
- 右上角控件区保留 `no-drag`，双击不会误触发标题栏最大化。
|
||||
- 主布局拖拽区域保留 Wails 的 `--wails-draggable: drag`，并覆盖 Electron 风格 `-webkit-app-region`，避免它吞掉鼠标事件。
|
||||
- 验证：
|
||||
- `cd frontend && npm run build` 通过。
|
||||
- `go test ./...` 通过。
|
||||
- `go build -o bin\cmbone.exe .` 通过。
|
||||
- `cmd /c build.bat` 通过。
|
||||
- 启动 `bin\cmbone.exe` 后自动化双击顶部中间区域，窗口从普通状态进入最大化。
|
||||
- 启动 `bin\cmbone.exe` 后自动化双击右侧 `no-drag` 控件区，窗口未进入最大化。
|
||||
- 非阻塞警告：
|
||||
- `cmd /c build.bat` 仍提示 `wails3 build` 是 `wails3 task` 的 alias。
|
||||
- 前端构建仍提示 Browserslist 数据过期和 chunk 大小警告。
|
||||
|
||||
Reference in New Issue
Block a user