From ceab08825a8b2a4d9b21a6b548f9c2f68094acc7 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 24 Sep 2025 18:05:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron.vite.config.ts                |   8 +-
 package-lock.json                      |   4 +-
 postcss.config.ts => postcss.config.js |   6 +-
 src/renderer/src/assets/base.css       |  67 -----------
 src/renderer/src/assets/main.css       |  19 +++-
 src/renderer/src/views/login/index.vue | 149 +++++++++++++++----------
 6 files changed, 108 insertions(+), 145 deletions(-)
 rename postcss.config.ts => postcss.config.js (69%)
 delete mode 100644 src/renderer/src/assets/base.css

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index 78c40dc..4490776 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -1,7 +1,6 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin, bytecodePlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
-import tailwindcss from 'tailwindcss'
 
 export default defineConfig({
   main: {
@@ -28,11 +27,6 @@ export default defineConfig({
         }
       }
     },
-    plugins: [vue()],
-    css: {
-      postcss: {
-        plugins: [tailwindcss]
-      }
-    }
+    plugins: [vue()]
   }
 })
diff --git a/package-lock.json b/package-lock.json
index ce6f4bc..e09ebca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2852,7 +2852,7 @@
     },
     "node_modules/@tailwindcss/postcss": {
       "version": "4.1.13",
-      "resolved": "https://registry.npmmirror.com/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
       "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
       "dev": true,
       "license": "MIT",
@@ -4013,7 +4013,7 @@
     },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
-      "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
       "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
       "dev": true,
       "funding": [
diff --git a/postcss.config.ts b/postcss.config.js
similarity index 69%
rename from postcss.config.ts
rename to postcss.config.js
index 15f4d6a..dc655aa 100644
--- a/postcss.config.ts
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     '@tailwindcss/postcss': {},
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+}
\ No newline at end of file
diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css
deleted file mode 100644
index 5ed6406..0000000
--- a/src/renderer/src/assets/base.css
+++ /dev/null
@@ -1,67 +0,0 @@
-:root {
-  --ev-c-white: #ffffff;
-  --ev-c-white-soft: #f8f8f8;
-  --ev-c-white-mute: #f2f2f2;
-
-  --ev-c-black: #1b1b1f;
-  --ev-c-black-soft: #222222;
-  --ev-c-black-mute: #282828;
-
-  --ev-c-gray-1: #515c67;
-  --ev-c-gray-2: #414853;
-  --ev-c-gray-3: #32363f;
-
-  --ev-c-text-1: rgba(255, 255, 245, 0.86);
-  --ev-c-text-2: rgba(235, 235, 245, 0.6);
-  --ev-c-text-3: rgba(235, 235, 245, 0.38);
-
-  --ev-button-alt-border: transparent;
-  --ev-button-alt-text: var(--ev-c-text-1);
-  --ev-button-alt-bg: var(--ev-c-gray-3);
-  --ev-button-alt-hover-border: transparent;
-  --ev-button-alt-hover-text: var(--ev-c-text-1);
-  --ev-button-alt-hover-bg: var(--ev-c-gray-2);
-}
-
-:root {
-  --color-background: var(--ev-c-black);
-  --color-background-soft: var(--ev-c-black-soft);
-  --color-background-mute: var(--ev-c-black-mute);
-
-  --color-text: var(--ev-c-text-1);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-ul {
-  list-style: none;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 495aa99..73c9982 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -1,12 +1,11 @@
-@import './base.css';
-
 body {
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-image: url('./wavy-lines.svg');
-  background-size: cover;
+  background-color: #fff;
+  /* background-image: url('./wavy-lines.svg');
+  background-size: cover; */
   user-select: none;
 }
 
@@ -169,3 +168,15 @@ code {
     display: none;
   }
 }
+
+.fz-14 {
+  font-size: 14px;
+}
+
+.fz-22 {
+  font-size: 22px;
+}
+
+.mb-20 {
+  margin-bottom: 20px;
+}
diff --git a/src/renderer/src/views/login/index.vue b/src/renderer/src/views/login/index.vue
index 6ce2319..9ebd713 100644
--- a/src/renderer/src/views/login/index.vue
+++ b/src/renderer/src/views/login/index.vue
@@ -1,13 +1,13 @@
 <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="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">
-            China Fellou Plus
-          </h1>
+          <h1 class="text-2xl font-bold text-gray-900 mb-2">China Fellou Plus</h1>
           <div class="text-sm text-gray-600">
             您的隐私对我们很重要，我们确保您的数据是安全和保密的
           </div>
@@ -17,7 +17,7 @@
           <!-- 二维码登录 -->
           <div class="left text-center">
             <div class="bg-gray-100 rounded-lg p-8 mb-4">
-              <div class="fz-22">手机扫码登录</div>
+              <div class="fz-22 mb-20">手机扫码登录</div>
               <div class="w-48 h-48 bg-white rounded-lg mx-auto flex items-center justify-center">
                 <div class="qr text-center mt-20">
                   <vue-qrcode value="https://www.1stg.me" width="195" margin="3" />
@@ -30,19 +30,28 @@
                 </div>
               </div>
             </div>
-            <p class="fz-14">
-              打开<el-text type="success">微信</el-text>扫一扫登录
-            </p>
+            <p class="fz-14">打开<el-text type="success">微信</el-text>扫一扫登录</p>
           </div>
 
           <!-- 账号密码登录 -->
           <div class="right text-center">
-            <div class="fz-22">密码登录</div>
+            <div class="fz-22 mb-20">密码登录</div>
 
-            <el-form class="mt-20" ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter="handleLogin">
+            <el-form
+              class="mt-20"
+              ref="loginFormRef"
+              :model="loginForm"
+              :rules="loginRules"
+              @keyup.enter="handleLogin"
+            >
               <!-- 用户名/邮箱/手机号 -->
               <el-form-item prop="username">
-                <el-input v-model="loginForm.username" placeholder="请输入手机号" size="large" clearable>
+                <el-input
+                  v-model="loginForm.username"
+                  placeholder="请输入手机号"
+                  size="large"
+                  clearable
+                >
                   <template #prefix>
                     <el-icon>
                       <User />
@@ -53,8 +62,14 @@
 
               <!-- 密码 -->
               <el-form-item prop="password">
-                <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large" show-password
-                  clearable>
+                <el-input
+                  v-model="loginForm.password"
+                  type="password"
+                  placeholder="请输入密码"
+                  size="large"
+                  show-password
+                  clearable
+                >
                   <template #prefix>
                     <el-icon>
                       <Lock />
@@ -66,15 +81,22 @@
               <!-- 图形验证码 -->
               <el-form-item v-if="showCaptcha" prop="captcha">
                 <div class="flex space-x-2">
-                  <el-input v-model="loginForm.captcha" placeholder="请输入验证码" size="large" clearable>
+                  <el-input
+                    v-model="loginForm.captcha"
+                    placeholder="请输入验证码"
+                    size="large"
+                    clearable
+                  >
                     <template #prefix>
                       <el-icon>
                         <Key />
                       </el-icon>
                     </template>
                   </el-input>
-                  <div class="w-24 h-10 bg-gray-200 rounded flex items-center justify-center cursor-pointer"
-                    @click="refreshCaptcha">
+                  <div
+                    class="w-24 h-10 bg-gray-200 rounded flex items-center justify-center cursor-pointer"
+                    @click="refreshCaptcha"
+                  >
                     <span class="text-sm font-mono">{{ captchaCode }}</span>
                   </div>
                 </div>
@@ -90,7 +112,13 @@
 
               <!-- 登录按钮 -->
               <el-form-item>
-                <el-button type="primary" size="large" class="w-full" :loading="loading" @click="handleLogin">
+                <el-button
+                  type="primary"
+                  size="large"
+                  class="w-full"
+                  :loading="loading"
+                  @click="handleLogin"
+                >
                   登录
                 </el-button>
               </el-form-item>
@@ -113,93 +141,89 @@
 </template>
 
 <script setup ts>
-import { ref, reactive, onMounted } from "vue";
-import { ElMessage } from "element-plus";
-import { User, Lock, Key } from "@element-plus/icons-vue";
-import VueQrcode from "vue-qrcode";
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { User, Lock, Key } from '@element-plus/icons-vue'
+import VueQrcode from 'vue-qrcode'
 
 // 登录表单
-const loginFormRef = ref();
+const loginFormRef = ref()
 const loginForm = reactive({
-  username: "",
-  password: "",
-  captcha: "",
-  remember: false,
-});
+  username: '',
+  password: '',
+  captcha: '',
+  remember: false
+})
 
 // 登录规则（必填验证）
 const loginRules = {
-  username: [
-    { required: true, message: "请输入用户名/邮箱/手机号", trigger: "blur" },
-  ],
+  username: [{ required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur' }],
   password: [
-    { required: true, message: "请输入密码", trigger: "blur" },
-    { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
   ],
-  captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
-};
+  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
+}
 
 // 加载状态
-const loading = ref(false);
+const loading = ref(false)
 
 // 验证码相关
-const showCaptcha = ref(false);
-const captchaCode = ref("8K9M");
-const loginAttempts = ref(0);
+const showCaptcha = ref(false)
+const captchaCode = ref('8K9M')
+const loginAttempts = ref(0)
 
 // 生成二维码
-const qrCodeUrl = ref("");
+const qrCodeUrl = ref('')
 
 // 刷新验证码
 const refreshCaptcha = () => {
-  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-  let code = "";
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  let code = ''
   for (let i = 0; i < 4; i++) {
-    code += chars.charAt(Math.floor(Math.random() * chars.length));
+    code += chars.charAt(Math.floor(Math.random() * chars.length))
   }
-  captchaCode.value = code;
-};
+  captchaCode.value = code
+}
 
 // 处理登录
 const handleLogin = async () => {
   try {
-    await loginFormRef.value.validate();
+    await loginFormRef.value.validate()
 
-    loading.value = true;
+    loading.value = true
 
     // 模拟登录请求
     setTimeout(() => {
-      loading.value = false;
-      loginAttempts.value++;
+      loading.value = false
+      loginAttempts.value++
 
       // 模拟登录失败，显示验证码
       if (loginAttempts.value >= 1) {
-        showCaptcha.value = true;
-        ElMessage.error("用户名或密码错误");
-        refreshCaptcha();
+        showCaptcha.value = true
+        ElMessage.error('用户名或密码错误')
+        refreshCaptcha()
       } else {
-        ElMessage.success("登录成功");
+        ElMessage.success('登录成功')
       }
-    }, 1500);
+    }, 1500)
   } catch (error) {
-    console.error("验证失败:", error);
+    console.error('验证失败:', error)
   }
-};
+}
 
 // 处理忘记密码
 const handleForgotPassword = () => {
-  ElMessage.info("忘记密码功能开发中...");
-};
+  ElMessage.info('忘记密码功能开发中...')
+}
 
 // 页面加载时聚焦到用户名输入框
 onMounted(() => {
-  const usernameInput = document.querySelector(
-    'input[placeholder="请输入用户名/邮箱/手机号"]'
-  );
+  const usernameInput = document.querySelector('input[placeholder="请输入用户名/邮箱/手机号"]')
   if (usernameInput) {
-    usernameInput.focus();
+    usernameInput.focus()
   }
-});
+})
 </script>
 
 <style scoped lang="scss">
@@ -224,6 +248,7 @@ onMounted(() => {
   box-shadow: none;
   background-color: #fff;
   position: relative;
+  overflow: hidden;
 }
 
 .qrcode-error {