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/Logistics.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="max-w-sm mx-auto bg-white dark:bg-n-solid-1 rounded-xl shadow-md overflow-hidden border border-n-weak">
+    <!-- 头部：状态与单号 -->
+    <div class="p-4 border-b border-n-weak">
+      <div class="flex justify-between items-start">
+        <div>
+          <h3 class="text-lg font-bold text-n-slate-12 leading-none">{{ currentStatusText }}</h3>
+          <p class="text-xs text-n-slate-11 mt-2 flex items-center">
+            {{ logisticsName }}: {{ trackingNumber }}
+            <button @click="copyTrackingNumber" class="ml-2 text-n-blue-10 hover:text-n-blue-9">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+              </svg>
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 中间：步骤条 -->
+    <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 }"
+      ></div>
+
+      <div class="relative z-10 flex justify-between">
+        <div
+          v-for="(step, index) in steps"
+          :key="index"
+          class="flex flex-col items-center w-16"
+        >
+          <!-- 节点圆圈 -->
+          <div
+            class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
+            :class="index <= currentStep ? 'bg-n-blue-9 ring-4 ring-n-blue-2' : 'bg-n-slate-4 dark:bg-n-slate-6 ring-4 ring-transparent'"
+          >
+            <svg v-if="index < currentStep" class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+            <div v-else-if="index === currentStep" class="w-2 h-2 bg-white rounded-full"></div>
+          </div>
+          <!-- 节点文字 -->
+          <span
+            class="text-[11px] mt-3 text-center w-full truncate block"
+            :class="index <= currentStep ? 'text-n-blue-10 font-medium' : 'text-n-slate-11'"
+          >
+            {{ step.label }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 详情描述框 -->
+    <div v-if="latestLog" class="mx-4 mb-4 p-3 bg-n-slate-2 dark:bg-n-solid-2 rounded-lg border-l-4 border-n-blue-9">
+      <p class="text-xs text-n-slate-11 leading-relaxed">
+        {{ latestLog }}
+      </p>
+      <p v-if="latestTime" class="text-[10px] text-n-slate-11 mt-1">{{ latestTime }}</p>
+    </div>
+
+    <!-- 底部操作栏 -->
+    <div class="flex border-t border-n-weak" style="border-style: solid;">
+      <button
+        v-for="(action, index) in actions"
+        :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'
+        }"
+      >
+        {{ action.text }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+const { sendMessage } = store;
+
+const props = defineProps({
+  logisticsName: { type: String, default: '顺丰速运' },
+  trackingNumber: { type: String, default: 'SF154228901' },
+  currentStep: { type: Number, default: 2 },
+  isUrgent: { type: Boolean, default: false },
+  latestLog: { type: String, default: '上海市 | 包裹正在由派送员王大力（13800000000）派送中' },
+  latestTime: { type: String, default: '2023-10-24 14:20:05' },
+  steps: {
+    type: Array,
+    default: () => [
+      { label: '已发货' },
+      { label: '运输中' },
+      { label: '派送中' },
+      { label: '已签收' }
+    ]
+  },
+  actions: { type: Array, default: () => [] }
+});
+
+const currentStatusText = computed(() => {
+  return props.steps[props.currentStep]?.label || '状态未知';
+});
+
+const progressWidth = computed(() => {
+  // 计算进度条长度：(当前步骤 / 总步数间隔) * 100%
+  return `${(props.currentStep / (props.steps.length - 1)) * 100}%`;
+});
+
+const statusBadgeClass = computed(() => {
+  return props.isUrgent
+    ? 'bg-n-ruby-2 text-n-ruby-11'
+    : 'bg-n-teal-2 text-n-teal-11';
+});
+
+const copyTrackingNumber = () => {
+  navigator.clipboard.writeText(props.trackingNumber);
+  alert('Tracking number copied');
+};
+
+const onActionClick = (action) => {
+  // 如果有 URL，在父窗口中打开
+  if (action && action.url) {
+    if (window.parent !== window) {
+      // 在 iframe 中，直接设置父窗口 location
+      window.parent.location.href = action.url;
+    } else {
+      // 不在 iframe 中，直接使用当前窗口
+      window.location.href = action.url;
+    }
+    return;
+  }
+
+  // 否则发送消息
+  if (action && action.reply) {
+    sendMessage({
+      type: 'outgoing',
+      content: action.reply,
+    });
+  }
+};
+</script>
+
+<style scoped>
+/* 如果需要微调 Tailwind 未覆盖的样式，可写在这里 */
+</style>