feat: 问题修复

2025-09-24 18:05:39 +08:00
parent bf83e95b7b
commit ceab08825a
6 changed files with 108 additions and 145 deletions
--- 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()]
  }
 })
--- 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": [
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }
--- a/src/renderer/src/assets/base.css
+++ b/src/renderer/src/assets/base.css
@@ -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;
-}
--- 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;
+}
--- 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 {