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

📋 概述

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

🗑️ 需要删除的样式块

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

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

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

原因：已移到 approval-status-banner.component.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

// ❌ 需要删除
.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 { ... }

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

// ✅ 保留（公共动画）
@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 { ... }

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

// ❌ 需要删除（如果存在且未使用）
.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

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

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

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

需要删除的部分：

6.1 审批状态横幅移动端样式

// ❌ 删除（约line 2768-2805）
@media (max-width: 480px) {
  .approval-status-banner {
    padding: 12px;
    // ...
  }
}

6.2 组长审批栏移动端样式

// ❌ 删除（约line 2808-2840）
@media (max-width: 480px) {
  .leader-approval-bar {
    padding: 16px 12px;
    // ...
  }
}

6.3 操作按钮移动端样式

// ❌ 删除（约line 2945-3000）
@media (max-width: 480px) {
  .action-buttons,
  .action-buttons-horizontal {
    flex-direction: row;
    // ...
  }
}

✅ 需要保留的样式

1. 容器布局

// ✅ 保留
.stage-order-container {
  padding: 20px;
  // 主容器样式
}

2. 通用卡片样式

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

3. 报价卡片专属样式

// ✅ 保留
.quotation-card {
  // 报价管理的专属样式
}

4. 加载动画

// ✅ 保留
.loading-container {
  // 加载状态样式
}

.spinner {
  // 加载动画
}

5. 公共动画

// ✅ 保留
@keyframes slideDown { ... }
@keyframes pulse { ... }
@keyframes spin { ... }

🔍 清理前检查清单

在删除样式前，请确认：

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

📝 清理步骤

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

第一步：删除审批状态横幅样式
- 删除 .approval-status-banner 及其所有子选择器
- 保存并测试审批状态显示
第二步：删除组长审批操作条样式
- 删除 .leader-approval-bar 及其所有子选择器
- 保存并测试审批操作功能
第三步：删除操作按钮样式
- 删除 .action-buttons 和 .action-buttons-horizontal
- 保存并测试按钮功能
第四步：清理移动端样式
- 删除媒体查询中对应的样式
- 测试移动端显示

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

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

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

🧪 清理后测试

桌面端测试

审批状态横幅显示正常
组长审批按钮样式正常
项目信息表单样式正常
操作按钮样式正常
所有交互正常

移动端测试（≤480px）

审批状态横幅布局正常
组长审批按钮布局正常
表单输入框大小正常
操作按钮触摸区域正常
无样式冲突

📊 预期效果

Before（清理前）

主组件SCSS：~3030行
包含大量已移到子组件的样式
维护困难

After（清理后）

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

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

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

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

删除审批状态横幅

查找：^\.approval-status-banner\s*\{[\s\S]*?^\}$
替换：（空）

删除组长审批操作条

查找：^\.leader-approval-bar\s*\{[\s\S]*?^\}$
替换：（空）

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

💡 维护建议

清理完成后

提交版本控制

git add .
git commit -m "refactor: 清理订单分配组件样式，移除已拆分到子组件的样式"

创建清理前的备份

cp stage-order.component.scss stage-order.component.scss.backup

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

未来新增样式的原则

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

🚨 回滚方案

如果清理后出现问题：

从版本控制恢复

git checkout stage-order.component.scss

从备份恢复

cp stage-order.component.scss.backup stage-order.component.scss

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

✅ 完成标准

样式清理完成的标准：

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

创建时间：2024-12-09

状态：待执行清理

stage-order-style-cleanup-guide.md 7.0 KB History Raw