feat: 优化订单详情页UI，添加右侧悬浮操作栏

## 问题
- 原页面过长，操作按钮在底部，用户需要滚动才能操作
- 部分操作在侧边栏和主内容区重复显示

## 改进
1. **布局重构**
   - 采用左右分栏布局（主内容 + 320px 侧边栏）
   - 侧边栏固定悬浮（sticky），始终可见
   - 页面最大宽度从 1200px 扩展到 1400px

2. **操作整合（避免重复）**
   - 简单操作直接在侧边栏完成：提交交接、确认收号、确认结账
   - 复杂操作提供快捷入口：发起结账、修改结账、拒绝修正、发起申诉
   - 移除主内容区的重复表单

3. **视觉优化**
   - 蓝色高亮卡片：发起结账（重要操作）
   - 红色警告卡片：发起申诉（特殊操作）
   - 添加小分隔线区分主次操作

4. **响应式设计**
   - 桌面端：左右分栏
   - 移动端：单列布局，侧边栏移到顶部

## 用户体验提升
- 所有关键操作始终可见，无需滚动
- 简单操作一键完成，复杂操作跳转到详细表单
- 视觉层次清晰，减少误操作

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

docs/ui-optimization-summary.md

@@ -0,0 +1,74 @@
+# 订单详情页 UI 优化总结
+
+## 问题
+- 原页面 UI 过长，操作按钮在页面底部
+- 用户需要滚动到最底部才能执行"提交交接"、"提交结账"、"发起申诉"等关键操作
+- 部分操作在侧边栏和主内容区重复显示
+
+## 解决方案
+
+### 1. 布局重构
+- **左右分栏布局**：主内容区（左）+ 操作侧边栏（右，320px）
+- **侧边栏悬浮**：`position: sticky; top: 24px;` 始终可见
+- **页面最大宽度**：从 1200px 扩展到 1400px
+
+### 2. 操作整合（避免重复）
+
+#### 简单操作 - 直接在侧边栏完成
+- ✅ **提交交接说明**：侧边栏内直接填写 textarea 并提交（移除主内容区重复表单）
+- ✅ **确认收号**：侧边栏一键确认（移除主内容区重复按钮）
+- ✅ **确认结账**：侧边栏一键确认 + 跳转到修改表单按钮
+- ✅ **同意修正结账**：侧边栏一键同意 + 跳转到拒绝表单按钮
+
+#### 复杂操作 - 侧边栏提供快捷入口，主内容区保留详细表单
+- 📝 **发起结账**：侧边栏可快速提交（使用当前表单值），也可跳转到详细表单修改消耗品、哈夫币等
+- 📝 **修改结账**：侧边栏提供跳转按钮，主内容区保留完整修改表单
+- 📝 **拒绝修正**：侧边栏提供跳转按钮，主内容区填写拒绝原因
+- 📝 **发起申诉**：侧边栏提供跳转按钮，主内容区填写完整申诉信息
+
+### 3. 视觉优化
+- **卡片样式**：白色背景 + 边框 + 阴影
+- **高亮卡片**：发起结账使用蓝色背景（`.highlight-card`）
+- **争议卡片**：发起申诉使用红色背景（`.dispute-card`）
+- **小分隔线**：侧边栏内使用 `.section-divider-mini` 分隔主次操作
+
+### 4. 响应式设计
+- **桌面端**：`grid-template-columns: 1fr 320px`
+- **移动端**：单列布局，侧边栏移到顶部（`order: -1`）
+
+## 主要代码变更
+
+### 新增函数
+```typescript
+function scrollToCheckout()
+function scrollToCounterCheckout()
+function scrollToRejectCheckout()
+function scrollToDispute()
+```
+
+### 新增样式类
+```css
+.content-layout { display: grid; grid-template-columns: 1fr 320px; }
+.action-sidebar { position: sticky; top: 24px; }
+.sidebar-card { ... }
+.sidebar-card.highlight-card { background: #eff6ff; }
+.sidebar-card.dispute-card { background: #fef2f2; }
+.section-divider-mini { ... }
+```
+
+### 移除重复内容
+- ❌ 主内容区的"提交交接说明"表单
+- ❌ 主内容区的"确认收号"表单
+- ❌ "确认结账"部分的重复按钮和分隔线
+
+## 用户体验提升
+
+1. **无需滚动**：所有关键操作始终在右侧可见
+2. **快捷操作**：简单操作直接在侧边栏完成（如提交交接、确认收号）
+3. **灵活选择**：复杂操作既可快速提交，也可跳转到详细表单修改
+4. **视觉引导**：重要操作用颜色区分（蓝色高亮、红色警告）
+5. **减少误操作**：复杂表单保留在主内容区，避免误提交
+
+## 文件变更
+- `frontend/src/features/orders/views/OrderDetailView.vue`
+- `docs/ui-optimization-order-detail.md`（优化文档）