1.8 KiB
1.8 KiB
修复表单元素主题色适配问题
问题分析
当前界面中的表单元素背景颜色显示为白色，没有正确适配深色主题。具体表现为：
-
PostForm.vue 存在硬编码的浅色主题样式：
- 表单容器背景色：
background-color: white; - 文字颜色：
color: #111827; - 输入框背景色：
background-color: white; - 输入框文字颜色：继承黑色
- 表单容器背景色：
-
UserForm.vue 已正确使用深色主题样式：
- 表单容器背景色：
background: rgba(255, 255, 255, 0.05); - 文字颜色：
color: rgba(255, 255, 255, 0.8); - 输入框背景色：
background: rgba(255, 255, 255, 0.05); - 输入框文字颜色：
color: white;
- 表单容器背景色：
-
需要检查的其他表单组件：
- WorkForm.vue
- SnippetForm.vue
- RoleForm.vue
- TagForm.vue
解决方案
将所有表单组件的样式统一为深色主题，与整体界面风格保持一致。
修复步骤
-
修复PostForm.vue：
- 更新表单容器背景色
- 更新文字颜色
- 更新输入框和textarea样式
- 更新按钮样式
-
检查并修复其他表单组件：
- WorkForm.vue
- SnippetForm.vue
- RoleForm.vue
- TagForm.vue
- 确保所有表单组件使用统一的深色主题样式
-
样式统一标准：
- 表单容器：半透明黑色背景，浅色边框
- 文字：白色或浅色
- 输入框/textarea：半透明黑色背景，白色文字，浅色边框
- 按钮：使用主题色
#d4b383或半透明黑色 - 保持与其他组件一致的视觉风格
预期效果
- 所有表单组件背景色、文本色和边框色自动适配深色主题
- 与整体界面风格统一和协调
- 保持良好的视觉层次和可读性
- 交互元素（按钮、输入框）具有适当的悬停和焦点效果