feat: add search_image and product_list content types with image upload

## 新增功能

### 1. 新增消息类型
- 添加 search_image (17) 和 product_list (18) content_type
- 支持图片搜索和商品列表消息展示

### 2. 图片上传功能
- 添加 ImageUploadButton 组件，支持图片上传到 Mall API
- 上传后发送 search_image 类型消息，图片 URL 存储在 content_attributes
- 支持图片文件验证（类型、大小）

### 3. Webhook 推送优化
- 修改 webhook_listener.rb，允许 search_image 类型即使 content 为空也推送 webhook
- 解决 search_image 消息不触发 webhook 的问题

### 4. 前端组件
- 新增 SearchImage.vue 组件（widget 和 dashboard）
- 新增 ProductList.vue、Logistics.vue、OrderDetail.vue、OrderList.vue 组件
- 更新 Message.vue 路由逻辑支持新的 content_type
- 更新 UserMessage.vue 支持 search_image 消息显示

### 5. API 层修改
- widget/messages_controller.rb: 允许 content_attributes 参数
- widget/base_controller.rb: 使用前端传入的 content_attributes
- widget/conversation API: 支持 contentAttributes 参数传递
- conversation actions 和 helpers: 完整的 content_attributes 数据流

### 6. Widget 测试页面优化
- 重写 /widget_tests 页面，支持游客/用户模式切换
- 登录流程：使用 reset() + setUser()，不刷新页面
- 退出流程：使用 reset() + 刷新页面
- 添加详细的日志输出和状态显示

## 技术细节

### Message Model
```ruby
enum content_type: {
  # ...existing types...
  search_image: 17,
  product_list: 18
}
```

### Webhook Listener
```ruby
# Allow search_image webhook even if content is blank
return if message.content.blank? && message.content_type != 'search_image'
```

### Widget Upload Flow
```
用户选择图片
  → 上传到 Mall API
  → 获取图片 URL
  → 发送消息: { content: '', content_type: 'search_image', content_attributes: { url: '...' } }
```

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/javascript/shared/components/Logistics.vue

@@ -20,12 +20,9 @@
     <!-- 中间：步骤条 -->
     <div class="px-6 py-8 relative">
       <!-- 进度背景线 -->
-      <div class="absolute top-[42px] left-10 right-10 h-0.5 bg-n-slate-4 dark:bg-n-slate-6 z-0"></div>
-      <!-- 激活进度线 -->
       <div
-        v-if="currentStep < steps.length - 1"
-        class="absolute top-[42px] left-10 h-0.5 bg-n-blue-9 z-0"
-        :style="{ width: progressWidth }"
+        class="progress-bar absolute top-[42px] left-10 right-10 h-0.5 bg-n-slate-4 dark:bg-n-slate-6 z-0"
+        :style="{ '--progress-width': progressWidth }"
       ></div>
 
       <div class="relative z-10 flex justify-between">
@@ -70,10 +67,12 @@
         :key="index"
         @click="onActionClick(action)"
         class="flex-1 py-3 text-sm transition-colors"
-        :class="{
-          'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2 border-r border-n-weak': action.style === 'default',
-          'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue': action.style === 'primary'
-        }"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
       >
         {{ action.text }}
       </button>
@@ -112,8 +111,10 @@ const currentStatusText = computed(() => {
 });
 
 const progressWidth = computed(() => {
+  // 限制 currentStep 在有效范围内
+  const validStep = Math.min(props.currentStep, props.steps.length - 1);
   // 计算进度条长度：(当前步骤 / 总步数间隔) * 100%
-  return `${(props.currentStep / (props.steps.length - 1)) * 100}%`;
+  return `${(validStep / (props.steps.length - 1)) * 100}%`;
 });
 
 const statusBadgeClass = computed(() => {
@@ -128,14 +129,23 @@ const copyTrackingNumber = () => {
 };
 
 const onActionClick = (action) => {
-  // 如果有 URL，在父窗口中打开
+  // 如果有 URL，根据 target 属性决定打开方式
   if (action && action.url) {
+    const target = action.target || '_self'; // 默认在当前窗口打开
     if (window.parent !== window) {
-      // 在 iframe 中，直接设置父窗口 location
-      window.parent.location.href = action.url;
+      // 在 iframe 中
+      if (target === '_blank') {
+        window.parent.open(action.url, '_blank');
+      } else {
+        window.parent.location.href = action.url;
+      }
     } else {
-      // 不在 iframe 中，直接使用当前窗口
-      window.location.href = action.url;
+      // 不在 iframe 中
+      if (target === '_blank') {
+        window.open(action.url, '_blank');
+      } else {
+        window.location.href = action.url;
+      }
     }
     return;
   }
@@ -151,5 +161,15 @@ const onActionClick = (action) => {
 </script>
 
 <style scoped>
-/* 如果需要微调 Tailwind 未覆盖的样式，可写在这里 */
+.progress-bar {
+  margin: 0 12px;
+}
+
+.progress-bar::after {
+  content: '';
+  display: block;
+  height: 100%;
+  background-color: #2563eb;
+  width: var(--progress-width, 0%);
+}
 </style>

app/javascript/shared/components/OrderDetail.vue

@@ -61,14 +61,23 @@ export default {
       return color;
     },
     onActionClick(action) {
-      // 如果有 URL，在父窗口中打开
+      // 如果有 URL，根据 target 属性决定打开方式
       if (action && action.url) {
+        const target = action.target || '_self'; // 默认在当前窗口打开
         if (window.parent !== window) {
-          // 在 iframe 中，直接设置父窗口 location
-          window.parent.location.href = action.url;
+          // 在 iframe 中
+          if (target === '_blank') {
+            window.parent.open(action.url, '_blank');
+          } else {
+            window.parent.location.href = action.url;
+          }
         } else {
-          // 不在 iframe 中，直接使用当前窗口
-          window.location.href = action.url;
+          // 不在 iframe 中
+          if (target === '_blank') {
+            window.open(action.url, '_blank');
+          } else {
+            window.location.href = action.url;
+          }
         }
         return;
       }
@@ -141,10 +150,12 @@ export default {
         :key="index"
         @click="onActionClick(action)"
         class="flex-1 py-3 text-sm transition-colors"
-        :class="{
-          'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2 border-r border-n-weak': action.style === 'default' || !action.style,
-          'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue': action.style === 'primary'
-        }"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
       >
         {{ action.text }}
       </button>

app/javascript/shared/components/OrderList.vue

@@ -114,8 +114,8 @@ export default {
 
 .status-badge {
   display: inline-block;
-  background-color: #f0f0f0;
-  color: #888;
+  background-color: #000000;
+  color: #ffffff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 11px;
@@ -124,8 +124,8 @@ export default {
 }
 
 .dark .status-badge {
-  background-color: #374151;
-  color: #d1d5db;
+  background-color: #000000;
+  color: #ffffff;
 }
 
 .product-list {

app/javascript/shared/components/ProductList.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="product-list-wrap bg-white dark:bg-n-solid-1 rounded-xl shadow-md overflow-hidden border border-n-weak">
+    <div v-if="title" class="pt-3 px-3 pb-0 border-b border-n-weak">
+      <h3 class="text-sm font-bold text-n-slate-12">{{ title }}</h3>
+    </div>
+
+    <div class="p-3">
+      <div class="grid grid-cols-2 gap-2">
+        <div
+          v-for="(product, index) in products"
+          :key="index"
+          class="flex flex-col bg-white dark:bg-n-solid-1 rounded-lg shadow-sm overflow-hidden border border-gray-100"
+        >
+          <div class="aspect-[4/5] w-full overflow-hidden bg-gray-50 cursor-pointer" @click="onProductClick(product)">
+            <img
+              :src="product.image"
+              :alt="product.name"
+              class="w-full h-full object-cover"
+            />
+          </div>
+          <div class="p-2">
+            <h3 class="text-xs text-gray-800 font-medium leading-snug line-clamp-2">
+              {{ product.name }}
+            </h3>
+            <div>
+              <span class="text-xs font-semibold text-red-500" style="line-height: 16px;">{{ product.price }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="actions && actions.length > 0" class="flex border-t border-n-weak">
+      <button
+        v-for="(action, index) in actions"
+        :key="index"
+        @click="onActionClick(action)"
+        class="flex-1 py-2.5 text-xs transition-colors"
+        :class="[
+          action.style === 'primary'
+            ? 'text-n-blue-10 font-semibold hover:bg-n-blue-1 dark:hover:bg-n-solid-blue'
+            : 'text-n-slate-11 hover:bg-n-slate-2 dark:hover:bg-n-solid-2',
+          index < actions.length - 1 ? 'border-r border-n-weak' : ''
+        ]"
+      >
+        {{ action.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useStore } from 'vuex';
+
+const store = useStore();
+const { sendMessage } = store;
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  products: {
+    type: Array,
+    default: () => []
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const onProductClick = (product) => {
+  // 如果产品有 URL，进行跳转
+  if (product.url) {
+    const target = product.target || '_self';
+    if (window.parent !== window) {
+      // 在 iframe 中
+      if (target === '_blank') {
+        window.parent.open(product.url, '_blank');
+      } else {
+        window.parent.location.href = product.url;
+      }
+    } else {
+      // 不在 iframe 中
+      if (target === '_blank') {
+        window.open(product.url, '_blank');
+      } else {
+        window.location.href = product.url;
+      }
+    }
+    return;
+  }
+
+  // 如果有点击回复，发送消息
+  if (product.clickReply) {
+    sendMessage({
+      type: 'outgoing',
+      content: product.clickReply,
+    });
+  }
+};
+
+const onActionClick = (action) => {
+  // 如果有 URL，根据 target 属性决定打开方式
+  if (action && action.url) {
+    const target = action.target || '_self';
+    if (window.parent !== window) {
+      if (target === '_blank') {
+        window.parent.open(action.url, '_blank');
+      } else {
+        window.parent.location.href = action.url;
+      }
+    } else {
+      if (target === '_blank') {
+        window.open(action.url, '_blank');
+      } else {
+        window.location.href = action.url;
+      }
+    }
+    return;
+  }
+
+  // 否则发送消息
+  if (action && action.reply) {
+    sendMessage({
+      type: 'outgoing',
+      content: action.reply,
+    });
+  }
+};
+</script>
+
+<style scoped>
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+</style>

app/javascript/shared/components/SearchImage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="search-image-wrap bg-gray-100 inline-block">
+    <div v-if="!imageUrl" class="text-red-500 text-xs p-2">
+      No image URL found. Attributes: {{ JSON.stringify(messageContentAttributes) }}
+    </div>
+    <img
+      v-if="imageUrl"
+      :src="imageUrl"
+      alt="搜索图片"
+      class="h-48 w-auto rounded-lg block"
+      @error="handleImageError"
+      @load="handleImageLoad"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  messageContentAttributes: {
+    type: Object,
+    default: () => {},
+  },
+  message: {
+    type: String,
+    default: '',
+  },
+});
+
+const imageUrl = computed(() => {
+  console.log('[SearchImage] messageContentAttributes:', props.messageContentAttributes);
+  console.log('[SearchImage] message:', props.message);
+  const url = props.messageContentAttributes?.url || props.message || '';
+  console.log('[SearchImage] Computed imageUrl:', url);
+  return url;
+});
+
+const handleImageError = (event) => {
+  console.error('[SearchImage] Image failed to load:', imageUrl.value);
+  console.error('[SearchImage] Error event:', event);
+};
+
+const handleImageLoad = () => {
+  console.log('[SearchImage] Image loaded successfully:', imageUrl.value);
+};
+</script>