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-order-detail.md

@@ -0,0 +1,121 @@
+# 订单详情页 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 标识
+  - 响应式样式优化