From b38081794083cef1ddabc625a93e6d180a7361d9 Mon Sep 17 00:00:00 2001 From: yml Date: Fri, 5 Jun 2026 11:01:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=AE=A2=E5=8D=95?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5UI=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E6=82=AC=E6=B5=AE=E6=93=8D=E4=BD=9C=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 问题 - 原页面过长，操作按钮在底部，用户需要滚动才能操作 - 部分操作在侧边栏和主内容区重复显示 ## 改进 1. **布局重构** - 采用左右分栏布局（主内容 + 320px 侧边栏） - 侧边栏固定悬浮（sticky），始终可见 - 页面最大宽度从 1200px 扩展到 1400px 2. **操作整合（避免重复）** - 简单操作直接在侧边栏完成：提交交接、确认收号、确认结账 - 复杂操作提供快捷入口：发起结账、修改结账、拒绝修正、发起申诉 - 移除主内容区的重复表单 3. **视觉优化** - 蓝色高亮卡片：发起结账（重要操作） - 红色警告卡片：发起申诉（特殊操作） - 添加小分隔线区分主次操作 4. **响应式设计** - 桌面端：左右分栏 - 移动端：单列布局，侧边栏移到顶部 ## 用户体验提升 - 所有关键操作始终可见，无需滚动 - 简单操作一键完成，复杂操作跳转到详细表单 - 视觉层次清晰，减少误操作 Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/ui-optimization-order-detail.md | 121 +++++++++ docs/ui-optimization-summary.md | 74 ++++++ .../features/orders/views/OrderDetailView.vue | 245 ++++++++++++++---- 3 files changed, 396 insertions(+), 44 deletions(-) create mode 100644 docs/ui-optimization-order-detail.md create mode 100644 docs/ui-optimization-summary.md diff --git a/docs/ui-optimization-order-detail.md b/docs/ui-optimization-order-detail.md new file mode 100644 index 0000000..3fa92fa --- /dev/null +++ b/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 +
+
+ +
+ +
+ +
+
+``` + +### 样式关键点 +```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 标识 + - 响应式样式优化 diff --git a/docs/ui-optimization-summary.md b/docs/ui-optimization-summary.md new file mode 100644 index 0000000..a504bca --- /dev/null +++ b/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`（优化文档） diff --git a/frontend/src/features/orders/views/OrderDetailView.vue b/frontend/src/features/orders/views/OrderDetailView.vue index 24d70e4..2c5a1b3 100644 --- a/frontend/src/features/orders/views/OrderDetailView.vue +++ b/frontend/src/features/orders/views/OrderDetailView.vue @@ -612,6 +612,34 @@ function linesToList(value: string) { .filter(Boolean) } +function scrollToDispute() { + const disputeSection = document.querySelector('.dispute-section') + if (disputeSection) { + disputeSection.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } +} + +function scrollToCheckout() { + const checkoutSection = document.querySelector('.checkout-form-section') + if (checkoutSection) { + checkoutSection.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } +} + +function scrollToCounterCheckout() { + const counterSection = document.querySelector('.counter-checkout-section') + if (counterSection) { + counterSection.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } +} + +function scrollToRejectCheckout() { + const rejectSection = document.querySelector('.reject-checkout-section') + if (rejectSection) { + rejectSection.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } +} + function formatHandoffRecordType(type: string) { const typeMap: Record = { owner_handoff: '卖家交接', @@ -640,6 +668,8 @@ function formatHandoffRecordType(type: string) { +
+
@@ -726,30 +756,8 @@ function formatHandoffRecordType(type: string) {
-
-
-

提交交接说明

-
-
- - 提交交接 -
-
-
-
-

确认收号

-
-
-

确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。

- 确认已收到账号 -
-
- -
+

发起结账

@@ -848,19 +856,12 @@ function formatHandoffRecordType(type: string) {
-
+
-

确认结账

+

修改结账

-

确认账号状态和扣款金额无误后，订单会完成，账号重新上架。

- 确认结账并完成订单 - -
- 或者 -
- -

修改结账

+

修改结账金额

@@ -881,22 +882,88 @@ function formatHandoffRecordType(type: string) {
-
+
-

确认修正结账

+

拒绝修正

-

同意后订单会完成结算；不同意会进入争议，由客服仲裁。

- 同意修正并完成订单 - -
- 或者 -
- -

拒绝修正

+

不同意修正时填写原因，订单会进入争议处理。

拒绝修正并发起争议
+
+
+ + +
+ +
+

提交交接说明

+ + 提交交接 +
+ + +
+

确认收号

+

确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。

+ 确认已收到账号 +
+ + +
+

快捷结账

+ + 立即提交结账 + +

如需修改消耗品、哈夫币等详细信息，请先向下滚动填写完整表单后再提交

+ + 查看详细结账表单 + +
+ + +
+

确认结账

+ + 确认结账并完成订单 + +
+ 或者 +
+ + 需要修改结账金额 + +

如认为金额有误，点击上方按钮修改

+
+ + +
+

确认修正结账

+ + 同意修正并完成订单 + +
+ 或者 +
+ + 不同意，发起争议 + +

不同意修正时需填写原因，将进入争议处理

+
+ + +
+

{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}

+ + {{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }} + +

点击后滚动到申诉表单填写详细信息

+
+
@@ -975,7 +1042,7 @@ function formatHandoffRecordType(type: string) {