# 订单详情页 UI 优化

## 优化内容

### 问题
- 原页面 UI 过长，需要滚动到最底部才能看到"提交交接说明"、"提交结账"、"发起申诉"等操作按钮
- 用户体验差，操作流程不流畅

### 解决方案

#### 1. 布局调整
- 采用**左右分栏布局**：主内容区（左）+ 操作侧边栏（右）
- 侧边栏**固定悬浮**（sticky），始终可见
- 页面最大宽度从 1200px 扩展到 1400px，为侧边栏留出空间

#### 2. 操作侧边栏设计
- **宽度**: 320px
- **位置**: 右侧固定悬浮（sticky top: 24px）
- **样式**: 白色卡片，带阴影和边框，重要操作突出显示

#### 3. 按钮优化

##### 快捷操作（直接执行）
- **提交交接**: 号主在侧边栏直接填写并提交
- **确认收号**: 租客一键确认
- **确认结账**: 号主一键确认
- **同意修正**: 租客一键同意

##### 复杂操作（跳转填写）
- **发起结账**: 点击后平滑滚动到结账表单填写区
- **修改结账**: 点击后平滑滚动到修改表单
- **拒绝修正**: 点击后平滑滚动到拒绝原因填写区
- **发起申诉**: 点击后平滑滚动到申诉表单

#### 4. 响应式设计
- **桌面端**: 左右分栏，侧边栏悬浮
- **移动端**: 单列布局，侧边栏移到顶部（order: -1）

## 核心代码变更

### 布局结构
```vue
<div class="content-layout">
  <div class="main-content">
    <!-- 主要内容：进度、信息、交接记录、详细表单 -->
  </div>
  
  <div class="action-sidebar">
    <!-- 操作卡片：根据订单状态和用户角色显示 -->
  </div>
</div>
```

### 样式关键点
```css
.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

.action-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  padding: 20px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
```

### 平滑滚动函数
```typescript
function scrollToCheckout() {
  const checkoutSection = document.querySelector('.checkout-form-section')
  if (checkoutSection) {
    checkoutSection.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}
```

## 优化效果

### 用户体验提升
1. **无需滚动查找**: 所有核心操作始终可见
2. **快速决策**: 重要信息和操作集中在右侧
3. **减少误操作**: 复杂操作跳转到详细表单，简单操作直接执行
4. **视觉引导**: 申诉等特殊操作用不同颜色背景突出

### 操作流程优化
- **交接**: 侧边栏直接提交 → 提升效率
- **结账**: 侧边栏点击跳转 → 避免误操作
- **申诉**: 侧边栏始终可见 → 降低投诉门槛

### 性能优化
- 使用 CSS `position: sticky` 代替 JavaScript 监听滚动
- 平滑滚动使用原生 `scrollIntoView` API
- 响应式布局使用 CSS Grid，无需 JavaScript

## 兼容性

- **现代浏览器**: 完全支持
- **移动端**: 自动切换为单列布局
- **低分辨率**: 自动调整为堆叠布局

## 文件变更

- `frontend/src/features/orders/views/OrderDetailView.vue`
  - 添加 `.content-layout` 和 `.action-sidebar` 布局
  - 添加侧边栏操作卡片
  - 添加平滑滚动函数
  - 为表单区域添加 class 标识
  - 响应式样式优化