style(order): 优化订单页面移动端布局和显示效果

- 调整描述列表列数根据设备屏幕宽度动态切换
- 优化描述列表标签宽度和字体大小，提升移动端可读性
- 修改订单总结区文案，去除AI标签，改善加载提示信息
- 添加响应式样式确保在不同手机尺寸下UI元素合适排列与字体大小
- 新增计算属性判断是否移动端，动态设置组件样式属性
- 修改订单详情与总结数据加载逻辑，避免接口请求冲突
- 改善加载动画和输入框在小屏幕设备上的体验

src/views/merchant/single/order.vue

@@ -30,7 +30,10 @@
         <a-descriptions
           v-show="renderData.createTime || loading"
           title="订单信息"
-          :column="2"
+          :column="isMobile ? 1 : 2"
+          layout="horizontal"
+          :label-style="{ width: '100px' }"
+          :size="isMobile ? 'small' : 'medium'"
         >
           <a-descriptions-item label="平台订单号">
             <a-skeleton v-if="loading" :animation="true">
@@ -58,12 +61,12 @@
           </a-descriptions-item>
         </a-descriptions>
 
-        <!-- AI 总结区域 -->
+        <!-- 总结区域 -->
         <div v-show="renderData?.list?.length || summaryLoading">
           <a-divider />
           <a-space direction="vertical" fill>
             <a-typography-title :heading="5" style="text-align: center">
-              AI 智能总结
+              订单总结
             </a-typography-title>
 
             <!-- 总结加载状态 -->
@@ -74,9 +77,9 @@
               <a-space direction="vertical" align="center" size="large">
                 <a-spin size="large" />
                 <a-typography-text type="secondary">
-                  AI 正在分析订单数据，请稍候...
+                  正在生成订单总结，请稍候...
                 </a-typography-text>
-                <a-typography-text type="secondary" style="font-size: 12px">
+                <a-typography-text type="secondary" class="loading-hint">
                   此过程可能需要较长时间，感谢您的耐心等待
                 </a-typography-text>
               </a-space>
@@ -88,12 +91,6 @@
               :bordered="false"
               style="background-color: var(--color-fill-2)"
             >
-              <template #extra>
-                <a-tag color="blue" size="small">
-                  <icon-robot />
-                  AI 生成
-                </a-tag>
-              </template>
               <a-typography-paragraph
                 style="margin: 0; line-height: 1.6"
                 :deep="false"
@@ -101,9 +98,6 @@
                 {{ summaryData.message }}
               </a-typography-paragraph>
             </a-card>
-
-            <!-- 总结为空或错误状态 -->
-            <a-empty v-else description="AI 总结暂不可用" :image="null" />
           </a-space>
         </div>
 
@@ -150,7 +144,7 @@ import {
 } from '@/api/generated';
 import useLoading from '@/hooks/loading';
 import { Message } from '@arco-design/web-vue';
-import { reactive, ref } from 'vue';
+import { reactive, ref, computed } from 'vue';
 
 const renderData = ref<KamiApiMerchantV1OrderQueryRes>({});
 const summaryData = ref<KamiApiMerchantV1OrderQuerySummaryRes | null>(null);
@@ -161,6 +155,12 @@ const state = reactive({
   value: ''
 });
 
+// 响应式检测移动端
+const isMobile = computed(() => {
+  if (typeof window === 'undefined') return false;
+  return window.innerWidth <= 768;
+});
+
 const fetchSummary = async (merchantOrderNo: string) => {
   if (!merchantOrderNo) return;
 
@@ -172,8 +172,8 @@ const fetchSummary = async (merchantOrderNo: string) => {
     });
     summaryData.value = summaryResponse.data;
   } catch (error) {
-    console.error('获取 AI 总结失败:', error);
-    Message.warning('AI 总结获取失败，请稍后重试');
+    console.error('获取订单总结失败:', error);
+    Message.warning('订单总结获取失败，请稍后重试');
   } finally {
     setSummaryLoading(false);
   }
@@ -187,19 +187,15 @@ const search = async (value: string) => {
     // 重置总结数据
     summaryData.value = null;
 
-    // 并行查询订单详情和 AI 总结
-    const [data] = await Promise.all([
-      apiClient.apiMerchantOrderQueryGet({
+    // 只查询订单详情
+    const data = await apiClient.apiMerchantOrderQueryGet({
       merchantOrderNo: value
-      }),
-      // 在有订单数据时才获取总结
-      fetchSummary(value).catch(() => null) // 忽略总结接口错误，不影响主查询
-    ]);
+    });
 
     renderData.value = data.data;
 
-    // 如果订单有详情但总结还未获取，再次尝试获取总结
-    if (data.data?.list?.length && !summaryLoading.value) {
+    // 如果有订单数据，异步获取总结
+    if (data.data?.list?.length) {
       fetchSummary(value);
     }
   } catch (error) {
@@ -216,6 +212,151 @@ const search = async (value: string) => {
   padding: 200px 20px;
   margin: 0 auto;
 
+  // 手机端优化
+  @media (width <= 768px) {
+    padding: 120px 16px;
+
+    .body {
+      padding: 16px;
+      margin-top: 16px;
+      min-height: calc(100vh - 400px);
+    }
+
+    // 优化描述列表在手机端的显示
+    :deep(.arco-descriptions) {
+      .arco-descriptions-title {
+        font-size: 16px;
+        margin-bottom: 16px;
+      }
+
+      .arco-descriptions-item {
+        padding: 8px 0;
+
+        &-label {
+          width: 80px !important;
+          font-size: 13px;
+        }
+
+        &-value {
+          font-size: 13px;
+        }
+      }
+
+      // 强制手机端使用单列布局
+      &.arco-descriptions-layout-horizontal {
+        .arco-descriptions-item {
+          display: block;
+          margin-bottom: 12px;
+          width: 100% !important;
+          flex-basis: 100% !important;
+        }
+
+        // 覆盖两列布局的 grid 样式
+        &.arco-descriptions-size-medium .arco-descriptions-item,
+        &.arco-descriptions-size-small .arco-descriptions-item {
+          grid-column: 1 / -1;
+          width: 100% !important;
+        }
+      }
+
+      // 确保手机端始终是一列
+      &.arco-descriptions-column-2 {
+        .arco-descriptions-item {
+          grid-column: 1 / -1;
+          width: 100% !important;
+        }
+      }
+    }
+
+    // 总结区域手机端优化
+    :deep(.arco-card) {
+      .arco-card-body {
+        padding: 16px;
+      }
+
+      .arco-typography {
+        font-size: 14px;
+        line-height: 1.6;
+      }
+    }
+
+    // 分割线间距优化
+    :deep(.arco-divider) {
+      margin: 16px 0;
+    }
+
+    // 标题字体大小优化
+    :deep(.arco-typography) {
+      &.arco-typography-title-h5 {
+        font-size: 16px;
+        margin: 16px 0;
+      }
+
+      &.arco-typography-title {
+        font-size: 20px;
+        margin: 24px 0 16px;
+      }
+    }
+
+    // 记录列表手机端优化
+    :deep(.arco-typography-paragraph) {
+      margin: 8px 0;
+      font-size: 14px;
+      line-height: 1.5;
+      word-break: break-all;
+    }
+
+    // 加载动画区域手机端优化
+    :deep(.arco-spin) {
+      .arco-spin-icon {
+        font-size: 20px;
+      }
+    }
+
+    // 输入框手机端优化
+    :deep(.arco-input-search) {
+      .arco-input-wrapper {
+        height: 44px;
+        font-size: 16px; // iOS 防止缩放
+      }
+
+      .arco-input-search-btn {
+        height: 44px;
+        padding: 0 16px;
+      }
+    }
+
+    // 加载提示文字响应式样式
+    .loading-hint {
+      font-size: 12px;
+      line-height: 1.4;
+    }
+  }
+
+  // 超小屏手机优化
+  @media (width <= 480px) {
+    padding: 100px 12px;
+
+    .body {
+      padding: 12px;
+    }
+
+    :deep(.arco-descriptions) {
+      .arco-descriptions-item-label {
+        width: 70px !important;
+        font-size: 12px;
+      }
+
+      .arco-descriptions-item-value {
+        font-size: 12px;
+      }
+    }
+
+    :deep(.arco-typography-paragraph) {
+      font-size: 13px;
+    }
+  }
+
   :deep(.arco-input-wrapper) {
     background-color: var(--color-white);