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 @@
-
-
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 是 占位符,定位父容器 */
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; /* 聚焦时的颜色 */
}
\ No newline at end of file