feat: implement custom window controls and replace header bar with title bar

- Add window handlers for minimize, maximize, close, and check if maximized in ipcMain.
- Update preload script to use new window control IPC events.
- Refactor window service to remove old IPC event handlers and use new handlers.
- Remove old HeaderBar and DragRegion components, replacing them with a new TitleBar component.
- Update Layout component to use TitleBar instead of HeaderBar.
- Remove useWinManager hook as its functionality is now integrated into TitleBar.
- Update login page to remove HeaderBar and adjust layout accordingly.
- Update constants to remove old window IPC events.
- Update package dependencies to replace @iconify/vue with @lucide/vue.
This commit is contained in:
duanshuwen
2026-04-14 23:38:42 +08:00
parent 6fd51d04dd
commit b5a67ff650
20 changed files with 642 additions and 340 deletions

View File

@@ -1,30 +1,26 @@
<template>
<div class="h-screen login-bg flex flex-col">
<header-bar color="#fff">
<drag-region class="w-full" />
</header-bar>
<main class="box-border p-[8px] flex-auto flex ">
<div class="w-[836px] box-border bg-white rounded-2xl p-[32px] flex flex-col">
<main class="box-border pl-2 pr-2 pb-2 pt-11 flex-auto flex ">
<div class="w-209 box-border bg-white rounded-2xl p-8 flex flex-col">
<div class="flex items-center">
<img class="w-[48px] h-[48px]" src="@assets/images/login/blue_logo.png" />
<img class="w-12 h-12" src="@assets/images/login/blue_logo.png" />
<!-- <span class="ml-auto text-[14px] text-gray-600">没有账号</span>
<button
class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none cursor-pointer">注册</button> -->
</div>
<div class="flex flex-col items-center justify-center mb-[24px] box-border pt-[40px]">
<img class="w-[80px] h-[80px] mb-[12px]" src="@assets/images/login/user_icon.png" />
<div class="text-[24px] font-500 text-gray-800 line-height-[32px] mb-[4px]">{{ t('login.title') }}</div>
<div class="flex flex-col items-center justify-center mb-6 box-border pt-10">
<img class="w-20 h-20 mb-3" src="@assets/images/login/user_icon.png" />
<div class="text-[24px] font-500 text-gray-800 line-height-[32px] mb-1">{{ t('login.title') }}</div>
<div class="text-[16px] text-gray-500 line-height-[24px]">{{ t('login.subtitle') }}</div>
</div>
<el-form class="w-[392px] ml-auto mr-auto" ref="formRef" :rules="rules" :model="form" label-position="top"
<el-form class="w-98 ml-auto mr-auto" ref="formRef" :rules="rules" :model="form" label-position="top"
@keyup.enter="onSubmit">
<el-form-item prop="username">
<div class="text-[14px] text-gray-600">{{ t('login.username') }}</div>
<el-input class="h-[40px]" v-model.trim="form.username" :placeholder="t('login.usernamePlaceholder')" clearable autocomplete="off">
<el-input class="h-10" v-model.trim="form.username" :placeholder="t('login.usernamePlaceholder')" clearable autocomplete="off">
<template #prefix>
<RiUser3Fill size="20px" color="#99A0AE" />
</template>
@@ -32,7 +28,7 @@
</el-form-item>
<el-form-item prop="password">
<div class="text-[14px] text-gray-600">{{ t('login.password') }}</div>
<el-input class="h-[40px]" v-model.trim="form.password" type="password" :placeholder="t('login.passwordPlaceholder')" clearable
<el-input class="h-10" v-model.trim="form.password" type="password" :placeholder="t('login.passwordPlaceholder')" clearable
autocomplete="off">
<template #prefix>
<RiKey2Fill size="20px" color="#99A0AE" />
@@ -44,7 +40,7 @@
<span class="text-[14px] text-gray-600">{{ t('login.code') }}</span>
<el-input v-model.trim="form.code" :placeholder="t('login.codePlaceholder')" autocomplete="off">
<template #suffix>
<img class="w-[80px] h-[38px] cursor-pointer" :src="imgSrc" @click="getVerifyCode" />
<img class="w-20 h-9.5 cursor-pointer" :src="imgSrc" @click="getVerifyCode" />
</template>
</el-input>
</el-form-item>
@@ -60,7 +56,7 @@
<!-- 登录按钮 -->
<button type="button"
class="w-full py-2 bg-blue-600 cursor-pointer text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
class="w-full py-2 bg-blue-600 cursor-pointer text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-300"
:loading="loading" @click="onSubmit">
{{ t('login.loginButton') }}
</button>
@@ -81,7 +77,7 @@
</div> -->
</div>
<img class="w-[540px]" src="@assets/images/login/logo.png" />
<img class="w-135" src="@assets/images/login/logo.png" />
</main>
</div>
</template>