# 订单分配阶段样式清理指南

## 📋 概述

子组件已创建完成，现在需要清理主组件SCSS中已移到子组件的样式。

---

## 🗑️ 需要删除的样式块

### 1. 审批状态横幅样式（lines 47-147）

**位置**：`stage-order.component.scss` 第47-147行

**标识**：`.approval-status-banner { ... }`

**原因**：已移到 `approval-status-banner.component.scss`

```scss
// ❌ 需要删除
.approval-status-banner {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  // ... 约100行样式
  
  &.pending { ... }
  &.approved { ... }
  &.rejected { ... }
}
```

---

### 2. 组长审批操作条样式（lines 149-249）

**位置**：`stage-order.component.scss` 第149-249行

**标识**：`.leader-approval-bar { ... }`

**原因**：已移到 `leader-approval-bar.component.scss`

```scss
// ❌ 需要删除
.leader-approval-bar {
  margin: 24px 0;
  padding: 20px;
  // ... 约100行样式
  
  .approval-buttons-container { ... }
  .btn-approve { ... }
  .btn-reject { ... }
}
```

---

### 3. 下滑动画（lines 251-260）

**位置**：`stage-order.component.scss` 第251-260行

**标识**：`@keyframes slideDown { ... }`

**处理**：⚠️ **保留** - 可能被其他组件使用

```scss
// ✅ 保留（公共动画）
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

---

### 4. 组长审批卡片样式（lines 262-450，如果存在）

**位置**：`stage-order.component.scss` 第262行起

**标识**：`.leader-approval-card { ... }`

**原因**：可能是旧版样式，已不使用

```scss
// ❌ 需要删除（如果存在且未使用）
.leader-approval-card {
  background: linear-gradient(...);
  // ...
}
```

---

### 5. 操作按钮样式（lines 2281-2400左右）

**位置**：`stage-order.component.scss` 第2281行起

**标识**：`.action-buttons { ... }` 和 `.action-buttons-horizontal { ... }`

**原因**：已移到 `order-action-buttons.component.scss`

```scss
// ❌ 需要删除
.action-buttons,
.action-buttons-horizontal {
  display: flex;
  align-items: center;
  // ... 约120行样式
  
  .btn { ... }
  .btn-outline { ... }
  .btn-primary { ... }
}
```

---

### 6. 移动端优化中的相关样式

**位置**：`stage-order.component.scss` 移动端媒体查询中

**需要删除的部分**：

#### 6.1 审批状态横幅移动端样式
```scss
// ❌ 删除（约line 2768-2805）
@media (max-width: 480px) {
  .approval-status-banner {
    padding: 12px;
    // ...
  }
}
```

#### 6.2 组长审批栏移动端样式
```scss
// ❌ 删除（约line 2808-2840）
@media (max-width: 480px) {
  .leader-approval-bar {
    padding: 16px 12px;
    // ...
  }
}
```

#### 6.3 操作按钮移动端样式
```scss
// ❌ 删除（约line 2945-3000）
@media (max-width: 480px) {
  .action-buttons,
  .action-buttons-horizontal {
    flex-direction: row;
    // ...
  }
}
```

---

## ✅ 需要保留的样式

### 1. 容器布局
```scss
// ✅ 保留
.stage-order-container {
  padding: 20px;
  // 主容器样式
}
```

### 2. 通用卡片样式
```scss
// ✅ 保留
.card {
  background: white;
  border-radius: 12px;
  // 通用卡片样式
}
```

### 3. 报价卡片专属样式
```scss
// ✅ 保留
.quotation-card {
  // 报价管理的专属样式
}
```

### 4. 加载动画
```scss
// ✅ 保留
.loading-container {
  // 加载状态样式
}

.spinner {
  // 加载动画
}
```

### 5. 公共动画
```scss
// ✅ 保留
@keyframes slideDown { ... }
@keyframes pulse { ... }
@keyframes spin { ... }
```

---

## 🔍 清理前检查清单

在删除样式前，请确认：

- [ ] 子组件已全部创建完成
- [ ] 子组件的样式文件已包含所有必要样式
- [ ] 主组件HTML已更新为使用子组件
- [ ] 主组件TypeScript已导入子组件
- [ ] 进行了基本的功能测试

---

## 📝 清理步骤

### 方案1：逐步清理（推荐）

1. **第一步：删除审批状态横幅样式**
   - 删除 `.approval-status-banner` 及其所有子选择器
   - 保存并测试审批状态显示

2. **第二步：删除组长审批操作条样式**
   - 删除 `.leader-approval-bar` 及其所有子选择器
   - 保存并测试审批操作功能

3. **第三步：删除操作按钮样式**
   - 删除 `.action-buttons` 和 `.action-buttons-horizontal`
   - 保存并测试按钮功能

4. **第四步：清理移动端样式**
   - 删除媒体查询中对应的样式
   - 测试移动端显示

### 方案2：批量清理（快速但风险高）

直接删除所有标记为❌的样式块，然后全面测试。

⚠️ **警告**：建议使用方案1，逐步清理更安全。

---

## 🧪 清理后测试

### 桌面端测试
- [ ] 审批状态横幅显示正常
- [ ] 组长审批按钮样式正常
- [ ] 项目信息表单样式正常
- [ ] 操作按钮样式正常
- [ ] 所有交互正常

### 移动端测试（≤480px）
- [ ] 审批状态横幅布局正常
- [ ] 组长审批按钮布局正常
- [ ] 表单输入框大小正常
- [ ] 操作按钮触摸区域正常
- [ ] 无样式冲突

---

## 📊 预期效果

### Before（清理前）
- 主组件SCSS：~3030行
- 包含大量已移到子组件的样式
- 维护困难

### After（清理后）
- 主组件SCSS：~2000行
- 只保留容器、卡片、报价等样式
- 结构清晰，易于维护

**预计减少**：~1000行代码（33%）

---

## 🔧 自动化清理脚本（可选）

如需批量清理，可以使用以下查找替换模式：

### 删除审批状态横幅
```
查找：^\.approval-status-banner\s*\{[\s\S]*?^\}$
替换：（空）
```

### 删除组长审批操作条
```
查找：^\.leader-approval-bar\s*\{[\s\S]*?^\}$
替换：（空）
```

⚠️ **注意**：正则表达式可能不精确，建议手动删除。

---

## 💡 维护建议

### 清理完成后

1. **提交版本控制**
   ```bash
   git add .
   git commit -m "refactor: 清理订单分配组件样式，移除已拆分到子组件的样式"
   ```

2. **创建清理前的备份**
   ```bash
   cp stage-order.component.scss stage-order.component.scss.backup
   ```

3. **记录清理日志**
   - 删除了哪些样式块
   - 保留了哪些样式块
   - 测试结果

### 未来新增样式的原则

- **子组件样式** → 写在子组件的SCSS文件中
- **公共样式** → 写在主组件或全局样式中
- **容器布局** → 写在主组件中

---

## 🚨 回滚方案

如果清理后出现问题：

1. **从版本控制恢复**
   ```bash
   git checkout stage-order.component.scss
   ```

2. **从备份恢复**
   ```bash
   cp stage-order.component.scss.backup stage-order.component.scss
   ```

3. **重新集成子组件**
   - 保留原有样式
   - 重新审视拆分方案

---

## ✅ 完成标准

样式清理完成的标准：

- [ ] 所有已拆分的样式已删除
- [ ] 保留的样式功能正常
- [ ] 桌面端显示正常
- [ ] 移动端显示正常
- [ ] 无控制台错误
- [ ] 无样式冲突
- [ ] 代码已提交版本控制

---

**创建时间**：2024-12-09

**状态**：待执行清理