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