Initial commit: Add logistics and order_detail message types

- Add Logistics component with progress tracking
- Add OrderDetail component for order information
- Support data-driven steps and actions
- Add blue color scale to widget SCSS
- Fix node overflow and progress bar rendering issues
- Add English translations for dashboard components

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

app/javascript/shared/components/OrderList.vue

@@ -0,0 +1,232 @@
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  props: {
+    orders: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    ...mapActions('conversation', ['sendMessage']),
+    onActionClick(order, action) {
+      if (action && action.reply) {
+        this.sendMessage({ content: action.reply });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="order-list-wrapper">
+    <div v-for="(order, index) in orders" :key="'order-' + index" class="order-card">
+      <!-- 头部信息：订单号和时间 -->
+      <div class="order-header">
+        <span class="order-number">Order number: {{ order.orderNumber }}</span>
+        <span class="order-date">{{ order.date }}</span>
+      </div>
+
+      <!-- 状态标签 -->
+      <div v-if="order.status" class="status-badge">
+        {{ order.status }}
+      </div>
+
+      <!-- 商品图片列表 -->
+      <div class="product-list">
+        <div v-for="(item, itemIndex) in order.items" :key="'item-' + index + '-' + itemIndex" class="product-item">
+          <img :src="item.image" :alt="item.name || 'Product'" />
+        </div>
+      </div>
+
+      <!-- 底部操作按钮 -->
+      <div class="order-actions">
+        <a
+          v-for="(action, actionIndex) in order.actions"
+          :key="'action-' + index + '-' + actionIndex"
+          href="#"
+          class="action-link"
+          @click.prevent="onActionClick(order, action)"
+        >
+          {{ action.text }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.order-list-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 100%;
+}
+
+.order-card {
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 12px;
+  background-color: #fff;
+  font-family: Arial, sans-serif;
+  position: relative;
+  max-width: 100%;
+}
+
+.dark .order-card {
+  background-color: #1e293b;
+  border-color: #374151;
+}
+
+.order-header {
+  margin-bottom: 8px;
+  color: #333;
+  font-size: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dark .order-header {
+  color: #f3f4f6;
+}
+
+.order-number {
+  font-weight: 500;
+  color: #333;
+  font-size: 12px;
+}
+
+.dark .order-number {
+  color: #f9fafb;
+}
+
+.order-date {
+  color: #666;
+  font-size: 11px;
+}
+
+.dark .order-date {
+  color: #9ca3af;
+}
+
+.status-badge {
+  display: inline-block;
+  background-color: #f0f0f0;
+  color: #888;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.dark .status-badge {
+  background-color: #374151;
+  color: #d1d5db;
+}
+
+.product-list {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  min-height: 60px;
+  align-items: center;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  padding-bottom: 4px;
+}
+
+.product-list::-webkit-scrollbar {
+  height: 4px;
+}
+
+.product-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 2px;
+}
+
+.product-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 2px;
+}
+
+.product-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.product-item {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.product-item img {
+  height: 60px;
+  width: 48px;
+  object-fit: cover;
+  border-radius: 4px;
+  background-color: #e5e7eb;
+}
+
+.dark .product-item img {
+  background-color: #374151;
+}
+
+.order-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+.action-link {
+  color: #333;
+  text-decoration: underline;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.dark .action-link {
+  color: #e5e7eb;
+}
+
+.action-link:hover {
+  color: #000;
+}
+
+.dark .action-link:hover {
+  color: #fff;
+}
+
+/* 响应式设计 */
+@media (max-width: 480px) {
+  .order-card {
+    padding: 10px;
+  }
+
+  .order-header {
+    font-size: 11px;
+  }
+
+  .product-list {
+    gap: 10px;
+  }
+
+  .product-item img {
+    height: 50px;
+    width: 40px;
+  }
+
+  .order-actions {
+    gap: 12px;
+  }
+
+  .action-link {
+    font-size: 11px;
+  }
+}
+</style>