feat: 登录页面布局

src/electron/main/main.ts

@@ -24,8 +24,8 @@ class AppMain {
   private createWindow(options?: { frameless?: boolean; route?: string }): BrowserWindow {
     const frameless = !!options?.frameless
     const win = new BrowserWindow({
-      width: 900,
-      height: 670,
+      width: 1440,
+      height: 900,
       autoHideMenuBar: true,
       frame: frameless ? false : true,
       // @ts-ignore

src/renderer/main.ts

@@ -3,16 +3,10 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import router from "./router";
 import App from "./App.vue";
-import { addCollection } from '@iconify/vue'
-import { icons as tdesignIcons } from '@iconify-json/tdesign'
-import { icons as riIcons } from '@iconify-json/ri'
 
 // 创建 Vue 应用实例
 const app = createApp(App);
 
-addCollection(tdesignIcons)
-addCollection(riIcons)
-
 // 使用 Pinia 状态管理
 app.use(createPinia());
 

src/renderer/views/login/index.vue

@@ -1,23 +1,27 @@
 <template>
   <div
-    class="min-h-screen p-[8px] login-bg"
+    class="h-screen box-border p-[8px] login-bg flex items-center justify-center"
   >
-    <div class="w-full h-full max-w-md bg-white rounded-2xl shadow-xl p-8">
+    <div class="w-[836px] h-full bg-white rounded-2xl p-[32px] flex flex-col">
       <div class="flex items-center">
-        <span class="w-[48px] h-[48px] rounded-2xl bg-blue-500 box-border p-[12px] text-white flex items-center justify-items-center text-[24px] font-bold">
-          N
-        </span>
+        <img class="w-[48px] h-[48px]" 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]">注册</button>
+        <button class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px] focus-visible:outline-none">注册</button>
       </div>
 
-      <div class="space-y-6">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">账号</label>
-          <div class="border rounded flex items-center focus:outline-none focus:ring-2 focus:ring-indigo-400 gap-2">
-            <Icon icon="tdesign:user-1-filled" :width="20" :height="20" />
+      <div class="flex flex-col items-center justify-center mb-[24px] box-border pt-[108px]">
+        <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]">登录</div>
+        <div class="text-[16px] text-gray-500 line-height-[24px]">24小时在岗，从不打烊的数字员工</div>
+      </div>
+
+      <div class="w-[392px] ml-auto mr-auto">
+        <div class="font-[14px] text-gray-700 mb-2">账号</div>
+          <div class="border rounded-[10px] flex items-center gap-2 box-border px-[12px] py-[10px]">
+            <RiUser3Fill size="20px" color="#99A0AE"  />
             <input
-              class="flex-1 px-3 py-2"
+              class="flex-1 focus-visible:outline-none"
               type="text"
               v-model.trim="form.account"
               placeholder="请输入账号"
@@ -25,27 +29,61 @@
             />
           </div>
           <p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
+        <div class="font-[14px] text-gray-700 mb-[8px] mt-[12px]">密码</div>
+        <div class="flex items-center gap-2 border rounded-[10px] box-border px-[12px] py-[10px]">
+          <RiKey2Fill size="20px" color="#99A0AE" />
+          <input
+            class="flex-1 focus-visible:outline-none"
+            :type="showPwd ? 'text' : 'password'"
+            v-model.trim="form.password"
+            placeholder="请输入密码"
+            @keyup.enter="onSubmit"
+          />
         </div>
-        <div>
-          <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
-          <div class="flex items-center gap-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400">
-            <Icon icon="ri:key-2-fill" :width="20" :height="20" />
+        <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
+
+        <!-- 记住密码|忘记密码 -->
+        <div class="flex items-center justify-between mb-[24px] mt-[24px]">
+          <div class="flex items-center gap-2">
             <input
-              class="flex-1 px-3 py-2 "
-              :type="showPwd ? 'text' : 'password'"
-              v-model.trim="form.password"
-              placeholder="请输入密码"
-              @keyup.enter="onSubmit"
+              type="checkbox"
+              v-model="showPwd"
+              class="w-[14px] h-[14px] rounded-[4px]"
             />
+            <span class="text-[14px] text-gray-600">记住密码</span>
           </div>
-          <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
+          <span class="text-[14px] text-sky-600">忘记密码？</span>
         </div>
+
+        <!-- 登录按钮 -->
         <button
-          class="w-full py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-indigo-300"
+          class="w-full py-2 bg-blue-600 text-white rounded-[8px] hover:bg-blue-700 disabled:bg-blue-300"
           @click="onSubmit"
-        >{{ loading ? '登录中…' : '登录' }}</button>
+        >
+          {{ loading ? '登录中…' : '登录' }}
+        </button>
+
+        <!-- 同意协议 -->
+        <div class="flex items-center justify-center gap-2 mt-[24px]">
+          <input
+            type="checkbox"
+            v-model="form.agreement"
+            class="w-[14px] h-[14px] rounded-[4px]"
+          />
+          <span class="text-[14px] text-gray-600">我已同意</span>
+          <span class="text-[14px] text-sky-600">《使用协议》</span>
+          <span class="text-[14px] text-gray-600">和</span>
+          <span class="text-[14px] text-sky-600">《隐私协议》</span>
+        </div>
+      </div>
+
+      <!-- Copy Right -->
+      <div class="text-[14px] text-gray-500 text-center mt-[24px] mt-auto">
+        © 2025 智能体智能科技有限公司 版权所有
       </div>
     </div>
+
+    <img class="w-[570px]" src="@assets/images/login/logo.png" />
   </div>
 </template>
 
@@ -53,10 +91,10 @@
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { login as apiLogin } from "@/renderer/api/login";
-import { Icon } from '@iconify/vue';
+import { RiUser3Fill , RiKey2Fill} from '@remixicon/vue'
 
 const router = useRouter();
-const form = reactive({ account: "", password: "" });
+const form = reactive({ account: "", password: "", agreement: "" });
 const errors = reactive<{ account?: string; password?: string }>({});
 const loading = ref(false);
 const showPwd = ref(false);