feat: update TitleBar component for platform-specific styling and integrate into login page

src/components/Layout/TitleBar/index.vue

@@ -1,23 +1,25 @@
 <template>
   <!-- macOS: just drag region -->
-  <div v-if="platform === 'darwin'" class="drag-region h-10 shrink-0 border-b border-b-gray-300" style="background: transparent;" />
+  <div v-if="platform === 'darwin'" class="drag-region h-10 shrink-0 border-b" :class="borderColorClass" style="background: transparent;" />
 
   <!-- Linux: no custom title bar -->
   <template v-else-if="platform !== 'win32'" />
 
   <!-- Windows: custom controls -->
-  <div v-else class="drag-region flex h-10 shrink-0 items-center justify-end border-b" style="background: transparent;">
+  <div v-else class="drag-region flex h-10 shrink-0 items-center justify-end border-b" :class="borderColorClass" style="background: transparent;">
     <div class="no-drag flex h-full">
       <button
         @click="handleMinimize"
-        class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#999] hover:text-white transition-colors"
+        class="flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors"
+        :class="iconColorClass"
         title="Minimize"
       >
         <Minus class="h-4 w-4" />
       </button>
       <button
         @click="handleMaximize"
-        class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#999] hover:text-white transition-colors"
+        class="flex h-full w-11 items-center justify-center hover:bg-[#999] hover:text-white transition-colors"
+        :class="iconColorClass"
         :title="maximized ? 'Restore' : 'Maximize'"
       >
         <Copy v-if="maximized" class="h-3.5 w-3.5" />
@@ -25,7 +27,8 @@
       </button>
       <button
         @click="handleClose"
-        class="flex h-full w-11 items-center justify-center text-[#525866] hover:bg-[#ff0000] hover:text-white transition-colors"
+        class="flex h-full w-11 items-center justify-center hover:bg-[#ff0000] hover:text-white transition-colors"
+        :class="iconColorClass"
         title="Close"
       >
         <X class="h-4 w-4" />
@@ -35,12 +38,24 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { Minus, Square, Copy, X } from '@lucide/vue'
 
+const props = defineProps<{
+  variant?: 'default' | 'light'
+}>()
+
 const platform = (window as any).api?.platform ?? ''
 const maximized = ref(false)
 
+const iconColorClass = computed(() =>
+  props.variant === 'light' ? 'text-white' : 'text-[#525866]'
+)
+
+const borderColorClass = computed(() =>
+  props.variant === 'light' ? 'border-b-white/30' : 'border-b-gray-300'
+)
+
 onMounted(async () => {
   maximized.value = await (window as any).api.windowIsMaximized()
 })

src/pages/login/index.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="h-screen login-bg flex flex-col">
-    <main class="box-border pl-2 pr-2 pb-2 pt-11 flex-auto flex ">
+    <title-bar v-if="platform !== 'linux'" variant="light" />
+    <main class="box-border pl-2 pr-2 pb-2 flex-auto flex" :class="[platform !== 'linux' ? 'pt-2' : 'pt-11']">
       <div class="w-209 box-border bg-white rounded-2xl p-8 flex flex-col">
         <div class="flex items-center">
           <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-6 box-border pt-10">
@@ -45,14 +42,6 @@
             </el-input>
           </el-form-item>
 
-          <!-- 记住密码|忘记密码 -->
-          <!-- <div class="flex items-center justify-between mb-[24px] mt-[24px]">
-            <div class="flex items-center gap-2 cursor-pointer">
-              <input type="checkbox" v-model="showPwd" class="w-[14px] h-[14px] rounded-[4px]" />
-              <span class="text-[14px] text-gray-600">记住密码</span>
-            </div>
-            <span class="text-[14px] text-sky-600 cursor-pointer">忘记密码？</span>
-          </div> -->
 
           <!-- 登录按钮 -->
           <button type="button"
@@ -61,19 +50,11 @@
             {{ t('login.loginButton') }}
           </button>
 
-          <!-- 同意协议 -->
-          <!-- <div class="flex items-center justify-center gap-2 mt-[24px]">
-            <input type="checkbox" v-model="isAgree" class="w-[14px] h-[14px] rounded-[4px]" />
-            <span class="text-[14px] text-gray-600">我已同意</span>
-            <span class="text-[14px] text-sky-600 cursor-pointer">《使用协议》</span>
-            <span class="text-[14px] text-gray-600">和</span>
-            <span class="text-[14px] text-sky-600 cursor-pointer">《隐私协议》</span>
-          </div> -->
         </el-form>
 
         <!-- Copy Right -->
         <!-- <div class="text-[14px] text-gray-500 text-center mt-auto">
-          © 2025 贵州智念科技服务有限公司 版权所有
+          © 2026 贵州智念科技服务有限公司 版权所有
         </div> -->
       </div>
 
@@ -83,14 +64,16 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, onMounted } from "vue"
+import { reactive, ref, onMounted, computed } from "vue"
 import { useUserStore } from "../../store/userinfo"
 import { RiUser3Fill, RiKey2Fill } from '@remixicon/vue'
 import { generateUUID } from "../../utils/generateUUID"
 import { rule } from '../../utils/validate'
 import { useLocale } from '../../composables/useLocale'
+import TitleBar from '@components/Layout/TitleBar/index.vue'
 
 const { t } = useLocale()
+const platform = computed(() => (window as any).api?.platform ?? '')
 
 // form 表单数据类型声明
 interface LoginForm {