feat: 登录也布局调整

package.json

@@ -30,6 +30,9 @@
     "@electron-forge/plugin-fuses": "^7.10.2",
     "@electron-forge/plugin-vite": "^7.10.2",
     "@electron/fuses": "^1.8.0",
+    "@iconify-json/ri": "^1.2.6",
+    "@iconify-json/tdesign": "^1.2.10",
+    "@iconify/vue": "^5.0.0",
     "@tailwindcss/postcss": "^4.1.14",
     "@tailwindcss/vite": "^4.0.0",
     "@types/electron-squirrel-startup": "^1.0.2",

src/renderer/main.ts

@@ -3,10 +3,16 @@ 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,50 +1,49 @@
 <template>
   <div
-    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4"
+    class="min-h-screen p-[8px] login-bg"
   >
-    <div class="w-full max-w-md">
+    <div class="w-full h-full max-w-md bg-white rounded-2xl shadow-xl p-8">
-      <!-- 登录卡片 -->
+      <div class="flex items-center">
-      <div class="bg-white rounded-lg shadow-xl p-8">
+        <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">
-        <!-- Logo和标题 -->
+          N
-        <div class="text-center mb-8">
+        </span>
-          <h1 class="text-2xl font-bold text-gray-900 mb-2">
+        <span class="ml-auto text-[14px] text-gray-600">没有账号？</span>
-            NIANXX
+        <button class="bg-sky-50 rounded-[8px] text-[14px] text-sky-600 px-[12px] py-[6px]">注册</button>
-          </h1>
+      </div>
-          <div class="text-sm text-gray-600">
-            您的隐私对我们很重要，我们确保您的数据是安全和保密的
-          </div>
-        </div>
 
-        <div class="space-y-6">
+      <div class="space-y-6">
-          <div>
+        <div>
-            <label class="block text-sm font-medium text-gray-700 mb-2">账号</label>
+          <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" />
             <input
-              class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              class="flex-1 px-3 py-2"
               type="text"
               v-model.trim="form.account"
               placeholder="请输入账号"
               @keyup.enter="onSubmit"
             />
-            <p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
           </div>
-          <div>
+          <p v-if="errors.account" class="mt-1 text-xs text-red-500">{{ errors.account }}</p>
-            <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
-            <div class="flex items-center gap-2">
-              <input
-                class="flex-1 px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400"
-                :type="showPwd ? 'text' : 'password'"
-                v-model.trim="form.password"
-                placeholder="请输入密码"
-                @keyup.enter="onSubmit"
-              />
-            </div>
-            <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
-          </div>
-          <button
-            class="w-full py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-indigo-300"
-            @click="onSubmit"
-          >{{ loading ? '登录中…' : '登录' }}</button>
         </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" />
+            <input
+              class="flex-1 px-3 py-2 "
+              :type="showPwd ? 'text' : 'password'"
+              v-model.trim="form.password"
+              placeholder="请输入密码"
+              @keyup.enter="onSubmit"
+            />
+          </div>
+          <p v-if="errors.password" class="mt-1 text-xs text-red-500">{{ errors.password }}</p>
+        </div>
+        <button
+          class="w-full py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 disabled:bg-indigo-300"
+          @click="onSubmit"
+        >{{ loading ? '登录中…' : '登录' }}</button>
       </div>
     </div>
   </div>
@@ -54,6 +53,7 @@
 import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import { login as apiLogin } from "@/renderer/api/login";
+import { Icon } from '@iconify/vue';
 
 const router = useRouter();
 const form = reactive({ account: "", password: "" });
@@ -87,4 +87,11 @@ const onSubmit = async () => {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.login-bg {
+  background: url('@assets/images/login/login_bg.png');
+  background-size: 100% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+}
+</style>

vite.renderer.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     preserveSymlinks: true,
     alias: {
       "@": resolve(__dirname, "./src/renderer"),
+      "@assets": resolve(__dirname, "./src/assets"),
       "@store": resolve(__dirname, "./src/renderer/store"),
       "@utils": resolve(__dirname, "./src/renderer/utils"),
       "@api": resolve(__dirname, "./src/renderer/api"),