# 统一组件样式文件使用说明
## 文件位置
`assets/css/components.css`
## 功能概述
该文件统一定义了系统中所有页面通用的组件样式，包括：
- 图片显示尺寸
- 删除按钮样式
- 菜单样式
- 功能按钮样式
## 使用方法
### 1. 引入样式文件
在页面的 `` 标签中添加：
```html
```
### 2. 图片显示样式
#### 标准图片容器
```html
```
#### 图片预览容器
```html
```
#### 不同尺寸选项
- `.image-item` - 标准尺寸 (120px × 90px)
- `.image-item-medium` - 中等尺寸 (150px × 120px)
- `.image-item-large` - 大尺寸 (200px × 150px)
### 3. 删除按钮
#### 使用CSS类（推荐）
```html
```
#### JavaScript动态创建（使用CSS文本）
```javascript
const deleteBtn = document.createElement('button');
deleteBtn.type = 'button';
deleteBtn.innerHTML = '×';
deleteBtn.style.cssText = 'position: absolute; top: 0; right: 0; background: #ff4444; color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 24px; display: flex; align-items: center; justify-content: center; padding: 0;';
```
或者使用内联样式：
```html
```
### 4. 功能按钮
#### 标准按钮
```html
链接按钮
```
#### 操作按钮
```html
查看
编辑
```
#### 小尺寸操作按钮（用于表格）
```html
查看
编辑
```
#### 其他常用按钮
```html
返回
```
#### 彩色按钮变体
```html
```
#### 按钮组
```html
```
### 5. 菜单样式
#### 导航菜单
```html
```
#### 标签页菜单
```html
```
#### 下拉菜单
```html
```
## 样式变量
文件中定义了CSS变量，可以在页面中覆盖：
```css
:root {
--primary-color: #2196F3;
--danger-color: #F44336;
--success-color: #4CAF50;
--delete-btn-color: #ff4444;
--delete-btn-hover-color: #ff0000;
/* ... 更多变量 */
}
```
## 响应式支持
所有组件都已包含响应式样式，在不同屏幕尺寸下会自动调整：
- 桌面端 (>768px): 标准尺寸
- 平板端 (≤768px): 中等尺寸
- 手机端 (≤480px): 小尺寸
## 注意事项
1. 确保在使用前引入了 `components.css` 文件
2. 删除按钮样式已统一为红色圆形按钮（#ff4444）
3. 所有按钮都有悬停和点击动画效果
4. 图片尺寸会根据屏幕大小自动调整
5. 建议优先使用CSS类而不是内联样式，便于统一管理
## 迁移现有页面
要将现有页面迁移到使用统一样式：
1. 在页面头部引入 `components.css`
2. 将内联样式替换为对应的CSS类
3. 统一删除按钮样式为 `.delete-image` 类
4. 统一功能按钮使用标准类名（`.standard-button`, `.action-btn` 等）
5. 移除页面中重复的样式定义
## 示例
完整示例页面：
```html
```