From a40b768f3b12f221b440145ae3ed2ac0f5673c74 Mon Sep 17 00:00:00 2001
From: zhen <2980449010@qq.com>
Date: Mon, 29 Dec 2025 20:37:14 +0800
Subject: [PATCH] style: update App.vue and IconInput.vue for consistent auth
 UI

---
 frontend/web/src/App.vue                  | 22 +++-------------
 frontend/web/src/components/IconInput.vue | 32 ++++++++++++-----------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/frontend/web/src/App.vue b/frontend/web/src/App.vue
index 5d441c5..5668470 100644
--- a/frontend/web/src/App.vue
+++ b/frontend/web/src/App.vue
@@ -1,37 +1,21 @@
-<script setup>
-
-</script>
-
 <template>
   <div id="app">
-    <!--
-    <WindowLayout>
-    -->
-      <RouterView></RouterView>
-      <!---
-    </WindowLayout>
-  -->
+    <RouterView></RouterView>
     <Alert></Alert>
-    
   </div>
 </template>
 
 <script setup>
-import WindowLayout from './components/Window.vue'
 import Alert from '@/components/messages/Alert.vue';
 </script>
 
 <style scoped>
 
   #app {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100vw;
     height: 100vh;
-    padding: 150px;
     margin: 0;
-    box-sizing: border-box;
-    background: radial-gradient(circle at 50% 30%, #eef2ff, #e2e8f0); 
+    padding: 0;
+    overflow: hidden;
   }
 </style>
diff --git a/frontend/web/src/components/IconInput.vue b/frontend/web/src/components/IconInput.vue
index 455e61c..eaffb74 100644
--- a/frontend/web/src/components/IconInput.vue
+++ b/frontend/web/src/components/IconInput.vue
@@ -109,55 +109,57 @@ label {
   text-decoration: none;
 }
 
-/* 输入框样式：现代填充风格 */
+/* 输入框样式：现代线框风格 */
 .field-wrap {
   position: relative;
   display: flex;
   align-items: center;
 }
+
 .field-wrap .icon {
-  /* .icon 是 <i> 占位符，定位父容器 */
   position: absolute;
   left: 12px;
   width: 18px; 
   height: 18px; 
-  color: #94a3b8; /* 默认图标颜色 */
+  color: #94a3b8;
   transition: color 0.2s;
-  /* Feather icons 渲染后，SVG会继承这个颜色 */
+  pointer-events: none; /* Icon shouldn't block input click */
+  z-index: 10;
 }
 
-/* 确保渲染后的 SVG 元素颜色能够正确继承 */
 .field-wrap .icon > svg {
-    /* 确保 SVG 自身不被其他默认样式影响 */
     display: block;
     width: 100%;
     height: 100%;
-    stroke: currentColor; /* 使用父元素的颜色 */
+    stroke: currentColor;
     transition: stroke 0.2s;
 }
 
 .field-wrap input {
   padding: 12px 12px 12px 40px;
-  background: #f1f5f9; /* 浅灰底色 */
-  border: 2px solid transparent;
+  background: #fff;
+  border: 1px solid #e2e8f0;
   border-radius: 8px;
   font-size: 14px;
   color: #1e293b;
   outline: none;
   transition: all 0.2s ease;
+  width: 100%;
 }
 
 /* 聚焦交互 */
 .field-wrap input:focus {
-  background: #fff;
-  border-color: #4f46e5; /* 品牌色 */
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
+  border-color: #6366f1; /* 品牌色 */
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); /* 柔和光晕 */
+}
+
+/* 错误状态 (Optional, if you pass a prop later) */
+.field-wrap input.error {
+  border-color: #ef4444;
 }
 
 /* 🚨 关键：聚焦时图标颜色变化的选择器 */
-/* 当 input 聚焦时，选择它后面的所有兄弟元素 (~)，其中类名为 .icon 的元素，改变它的颜色 */
-/* 由于我们在 .icon 元素上设置了 color，SVG 会自动继承 */
 .field-wrap input:focus ~ .icon { 
-  color: #4f46e5; /* 聚焦时的颜色 */
+  color: #6366f1; /* 聚焦时的颜色 */
 }
 </style>
\ No newline at end of file