From d1a90a8313ce61cb54ce715c90f6c5023c36c209 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Thu, 29 May 2025 23:34:46 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |   5 +-
 src/pages/login/index.vue      | 131 +++++++++++++++++++++++++++++----
 src/static/images/login-bg.svg |  54 ++++++++++----
 src/styles/dark-mode-fix.scss  |  46 ++++++++++++
 4 files changed, 205 insertions(+), 31 deletions(-)
 create mode 100644 src/styles/dark-mode-fix.scss

diff --git a/src/App.vue b/src/App.vue
index fbac276..bf99123 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,4 +20,7 @@ onHide(() => {
 });
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+/* 导入暗黑模式修复样式 */
+@import "./styles/dark-mode-fix';";
+</style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index e442e8c..bebcf98 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -4,10 +4,8 @@
     <image src="/static/images/login-bg.svg" mode="aspectFill" class="login-bg" />
 
     <!-- Logo和标题区域 -->
-    <view class="header">
-      <image src="/static/logo.png" class="logo" />
-      <text class="title">有来开源</text>
-      <text class="subtitle">专注于构建高效开发的应用解决方案</text>
+    <view class="header">    <view class="header">
+
     </view>
 
     <view class="login-card">
@@ -16,10 +14,15 @@
         <wd-form v-if="loginType === 'account'" ref="loginFormRef" :model="loginFormData">
           <!-- 用户名输入框 -->
           <view class="form-item">
-            <wd-icon name="user" size="22" class="input-icon" />
+            <wd-icon
+              name="user"
+              size="22"
+              :color="isDarkMode ? '#7AC5FF' : '#333'"
+              class="input-icon"
+            />
             <input
               v-model="loginFormData.username"
-              class="form-input"
+              class="form-input input-transparent"
               placeholder="请输入用户名"
               placeholder-class="input-placeholder"
             />
@@ -28,10 +31,15 @@
 
           <!-- 密码输入框 -->
           <view class="form-item">
-            <wd-icon name="lock-on" size="22" class="input-icon" />
+            <wd-icon
+              name="lock-on"
+              size="22"
+              :color="isDarkMode ? '#7AC5FF' : '#333'"
+              class="input-icon"
+            />
             <input
               v-model="loginFormData.password"
-              class="form-input"
+              class="form-input input-transparent"
               :type="showPassword ? 'text' : 'password'"
               placeholder="请输入密码"
               placeholder-class="input-placeholder"
@@ -39,7 +47,7 @@
             <wd-icon
               :name="showPassword ? 'eye-open' : 'eye-close'"
               size="18"
-              color="#9ca3af"
+              :color="isDarkMode ? '#7AC5FF' : '#9ca3af'"
               class="eye-icon"
               @click="showPassword = !showPassword"
             />
@@ -120,6 +128,8 @@ import { type LoginData } from "@/api/auth";
 import { useUserStore } from "@/store/modules/user.store";
 import { useToast } from "wot-design-uni";
 import { useWechat } from "@/composables/useWechat";
+import { useTheme } from "@/composables/useTheme";
+import { computed, onMounted } from "vue";
 
 const loginFormRef = ref();
 const toast = useToast();
@@ -128,6 +138,10 @@ const userStore = useUserStore();
 const showPassword = ref(false);
 const loginType = ref<"account" | "phone">("account");
 const { authState, getLoginCode, getPhoneNumber } = useWechat();
+const { theme } = useTheme();
+
+// 是否暗黑模式
+const isDarkMode = computed(() => theme.value === "dark");
 
 // 登录表单数据
 const loginFormData = ref<LoginData>({
@@ -143,6 +157,17 @@ onLoad((options) => {
   }
 });
 
+// 强制清除输入框背景色
+onMounted(() => {
+  setTimeout(() => {
+    const inputs = document.querySelectorAll("input");
+    inputs.forEach((input) => {
+      input.style.backgroundColor = "transparent";
+      input.style.boxShadow = "none";
+    });
+  }, 100);
+});
+
 // 账号密码登录处理
 const handleAccountLogin = () => {
   if (loading.value) return;
@@ -345,8 +370,8 @@ const navigateToPrivacy = () => {
   box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
 
   .wot-theme-dark & {
-    background-color: rgba(31, 31, 31, 0.9);
-    box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.3);
+    background-color: rgba(31, 31, 31, 0.95);
+    box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.5);
   }
 }
 
@@ -359,24 +384,64 @@ const navigateToPrivacy = () => {
   display: flex;
   align-items: center;
   padding: 24rpx 0;
+  background-color: transparent;
+
+  .wot-theme-dark & {
+    background-color: transparent;
+  }
 }
 
 .input-icon {
   margin-right: 20rpx;
 }
 
-.form-input {
+/* 强制所有输入元素为透明背景 */
+input,
+.form-input,
+.input-transparent {
   flex: 1;
   height: 60rpx;
   font-size: 28rpx;
   line-height: 60rpx;
   color: #333;
+  background-color: transparent !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
 
   .wot-theme-dark & {
     color: #f5f5f5;
+    background-color: transparent !important;
   }
 }
 
+/* 修复webkit浏览器自动填充问题 */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  caret-color: var(--wot-color-text);
+  background-color: transparent !important;
+  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+  transition: background-color 5000s;
+  -webkit-text-fill-color: var(--wot-color-text) !important;
+
+  .wot-theme-dark & {
+    -webkit-text-fill-color: #f5f5f5 !important;
+    background-color: transparent !important;
+    -webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0) inset !important;
+  }
+}
+
+/* 尝试通过更强的选择器覆盖自动填充 */
+.form-item input,
+input.form-input,
+input.input-transparent {
+  -webkit-appearance: none;
+  background: none !important;
+  background-color: transparent !important;
+  border: none !important;
+}
+
 .clear-icon,
 .eye-icon {
   padding: 10rpx;
@@ -388,7 +453,7 @@ const navigateToPrivacy = () => {
   background-color: rgba(0, 0, 0, 0.06);
 
   .wot-theme-dark & {
-    background-color: rgba(255, 255, 255, 0.06);
+    background-color: rgba(255, 255, 255, 0.15);
   }
 }
 
@@ -439,7 +504,7 @@ const navigateToPrivacy = () => {
   color: #666;
 
   .wot-theme-dark & {
-    color: #aaaaaa;
+    color: #c0c0c0;
   }
 }
 
@@ -475,6 +540,10 @@ const navigateToPrivacy = () => {
   width: 80rpx;
   height: 1rpx;
   background-color: rgba(0, 0, 0, 0.1);
+
+  .wot-theme-dark & {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
 }
 
 .text {
@@ -483,7 +552,7 @@ const navigateToPrivacy = () => {
   color: rgba(0, 0, 0, 0.4);
 
   .wot-theme-dark & {
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.6);
   }
 }
 
@@ -500,6 +569,10 @@ const navigateToPrivacy = () => {
   height: 80rpx;
   background-color: #07c160;
   border-radius: 50%;
+
+  .wot-theme-dark & {
+    box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+  }
 }
 
 .wechat-icon {
@@ -522,7 +595,33 @@ const navigateToPrivacy = () => {
   color: rgba(0, 0, 0, 0.3);
 
   .wot-theme-dark & {
-    color: rgba(255, 255, 255, 0.3);
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+/* 加强输入框透明度 - 暗黑模式特别处理 */
+.wot-theme-dark {
+  :deep(input) {
+    background: none !important;
+    background-color: transparent !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  .form-input,
+  input {
+    background: none !important;
+    background-color: transparent !important;
+    background-image: none !important;
+  }
+}
+
+/* 修复Android Chrome输入框背景色问题 */
+@supports (-webkit-appearance: none) {
+  input {
+    -webkit-appearance: none;
+    background: transparent !important;
+    background-color: transparent !important;
   }
 }
 </style>
diff --git a/src/static/images/login-bg.svg b/src/static/images/login-bg.svg
index 2cac2fb..eedc1f4 100644
--- a/src/static/images/login-bg.svg
+++ b/src/static/images/login-bg.svg
@@ -1,28 +1,54 @@
 <svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
   <!-- 背景渐变 -->
   <defs>
+    <!-- 主背景渐变 - 蓝色系 -->
     <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#7AC5FF" />
-      <stop offset="100%" stop-color="#0062E8" />
+      <stop offset="0%" stop-color="#94BFFF" />
+      <stop offset="100%" stop-color="#165DFF" />
     </linearGradient>
     
-    <!-- 图形渐变 -->
+    <!-- 图形渐变 - 白色半透明 -->
     <linearGradient id="shapeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.2" />
-      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.08" />
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.3" />
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.15" />
     </linearGradient>
+    
+    <!-- 底部波浪渐变 -->
+    <linearGradient id="waveGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.05" />
+      <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0.1" />
+    </linearGradient>
+
+    <!-- 为暗黑模式提供的额外效果 -->
+    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="15" result="blur" />
+      <feComposite in="SourceGraphic" in2="blur" operator="over" />
+    </filter>
   </defs>
   
-  <!-- 透明背景，不完全填充 -->
+  <!-- 顶部背景 -->
+  <rect width="100%" height="100%" fill="#1A1A1A" opacity="0" class="dark-mode-bg" />
   <rect width="100%" height="50%" fill="url(#bgGradient)" />
   
-  <!-- 左侧方块装饰 - 向上移动，避开文字区域 -->
-  <rect x="100" y="100" width="120" height="120" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 160, 160)" opacity="0.5" />
-  <rect x="190" y="40" width="80" height="80" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 230, 80)" opacity="0.4" />
-  <rect x="60" y="180" width="100" height="100" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 110, 230)" opacity="0.3" />
+  <!-- 左侧装饰图形 -->
+  <rect x="100" y="150" width="120" height="120" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 160, 210)" opacity="0.7" />
+  <rect x="190" y="90" width="80" height="80" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 230, 130)" opacity="0.6" />
+  <rect x="60" y="250" width="100" height="100" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 110, 300)" opacity="0.5" />
   
-  <!-- 右侧圆形装饰 - 向上并向右移动，避开中央区域 -->
-  <circle cx="800" cy="100" r="60" fill="url(#shapeGradient)" opacity="0.5" />
-  <circle cx="870" cy="180" r="90" fill="url(#shapeGradient)" opacity="0.3" />
-  <circle cx="740" cy="200" r="40" fill="url(#shapeGradient)" opacity="0.4" />
+  <!-- 右侧装饰图形 -->
+  <circle cx="750" cy="150" r="60" fill="url(#shapeGradient)" opacity="0.7" />
+  <circle cx="820" cy="230" r="90" fill="url(#shapeGradient)" opacity="0.5" />
+  <circle cx="690" cy="250" r="40" fill="url(#shapeGradient)" opacity="0.6" />
+  
+  <!-- 底部波浪形状，适配深色和浅色模式 -->
+  <path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="url(#waveGradient)" class="wave-light" />
+  <path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="#1A1A1A" opacity="0" class="wave-dark" />
+
+  <style>
+    @media (prefers-color-scheme: dark) {
+      .dark-mode-bg { opacity: 1; }
+      .wave-light { opacity: 0; }
+      .wave-dark { opacity: 0.7; }
+    }
+  </style>
 </svg> 
\ No newline at end of file
diff --git a/src/styles/dark-mode-fix.scss b/src/styles/dark-mode-fix.scss
new file mode 100644
index 0000000..83ed7d9
--- /dev/null
+++ b/src/styles/dark-mode-fix.scss
@@ -0,0 +1,46 @@
+/**
+ * 暗黑模式输入框修复
+ * 强制所有输入框在暗黑模式下保持透明背景
+ */
+
+/* 暗黑模式下的输入框 */
+.wot-theme-dark {
+  /* 通用输入框 */
+  input,
+  textarea,
+  [contenteditable="true"] {
+    color: var(--wot-color-text, #f5f5f5) !important;
+    background-color: transparent !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+  }
+
+  /* 自动填充覆盖 */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  input:-webkit-autofill:active {
+    background: none !important;
+    background-color: transparent !important;
+    -webkit-box-shadow: 0 0 0 1000px rgba(31, 31, 31, 0.95) inset !important;
+    transition: background-color 5000s;
+    -webkit-text-fill-color: var(--wot-color-text, #f5f5f5) !important;
+  }
+
+  /* 登录页特殊处理 */
+  .login-card {
+    input,
+    .form-input {
+      background-color: transparent !important;
+    }
+  }
+}
+
+/* 登录页面特别修复 */
+.login-container {
+  input,
+  .form-input {
+    background-color: transparent !important;
+    border: none !important;
+  }
+}