feat: 项目结构调整|新增依赖

src/renderer/views/login/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4"
+  >
+    <div class="w-full max-w-md">
+      <!-- 登录卡片 -->
+      <div class="bg-white rounded-lg shadow-xl p-8">
+        <!-- Logo和标题 -->
+        <div class="text-center mb-8">
+          <h1 class="text-2xl font-bold text-gray-900 mb-2">
+            NIANXX
+          </h1>
+          <div class="text-sm text-gray-600">
+            您的隐私对我们很重要，我们确保您的数据是安全和保密的
+          </div>
+        </div>
+
+        <div class="space-y-6">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-2">账号</label>
+            <input
+              class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              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>
+            <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>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
+import { login as apiLogin } from "@/renderer/api/login";
+
+const router = useRouter();
+const form = reactive({ account: "", password: "" });
+const errors = reactive<{ account?: string; password?: string }>({});
+const loading = ref(false);
+const showPwd = ref(false);
+
+const validate = () => {
+  errors.account = undefined;
+  errors.password = undefined;
+  if (!form.account) errors.account = "请输入账号";
+  else if (form.account.length < 4 || form.account.length > 32) errors.account = "账号长度需在 4-32 之间";
+  if (!form.password) errors.password = "请输入密码";
+  else if (form.password.length < 6) errors.password = "密码长度不少于 6 位";
+  return !errors.account && !errors.password;
+};
+
+const onSubmit = async () => {
+  // if (!validate() || loading.value) return;
+  // loading.value = true;
+  try {
+    localStorage.setItem("token", "dev-token");
+    // const res: any = await apiLogin({ account: form.account, password: form.password });
+    // const token = res && (res.token || res.data?.token || res.access_token);
+    // if (!token) throw new Error("登录失败");
+    // localStorage.setItem("token", token);
+    await (window as any).ipcAPI.app.setFrameless('/browser')
+  } finally {
+    // loading.value = false;
+  }
+};
+</script>
+
+<style scoped></style>