openclaw-openagent 1.0.0

package/src/plugin-ui/modules/agent-book/travelcard/travel-cards.js

@@ -0,0 +1,500 @@
+console.log('[openagent] ✅ Trip card CSS injected');
+
+// ── 2. 辅助函数 ──
+
+// _el / _text 已提升到文件顶部工具函数区（全局共用）
+
+function _formatTime(s) {
+  if (!s) return '';
+  const p = s.split(' ');
+  return p.length >= 2 ? p[1].slice(0, 5) : '';
+}
+
+// Traffic icon unicode map
+const _TRAFFIC_ICONS = {
+  FLIGHT: String.fromCodePoint(0xF11C9),
+  TRAIN: String.fromCodePoint(0xF11CA),
+  DRIVE: String.fromCodePoint(0xF1BBE),
+  BUS: String.fromCodePoint(0xF1BBD),
+};
+
+// ── 3. convertTrafficPlanInfo (translated from commons.js _m.OC) ──
+
+function _convertTPI(tpi) {
+  if (!tpi) return null;
+  const summary = tpi.summary || {};
+  const dep = tpi.departure || {};
+  const arr = tpi.arrival || {};
+  const detailList = tpi.detailList || [];
+  const mainDetail = detailList.find(d => d.type && d.type !== 'DRIVE') || detailList[0];
+  const getStation = ep => ep?.trafficHub?.name || '';
+  const getDistrict = ep => ep?.trafficHub?.districtInfo?.districtName || '';
+  return {
+    startStationName: getStation(dep),
+    endStationName: getStation(arr),
+    startDistrictName: getDistrict(dep),
+    endDistrictName: getDistrict(arr),
+    startCode: dep?.trafficHub?.terminalCode,
+    endCode: arr?.trafficHub?.terminalCode,
+    startId: dep?.trafficHub?.districtInfo?.districtId,
+    endId: arr?.trafficHub?.districtInfo?.districtId,
+    travelTime: summary.transportTime,
+    startDateTime: summary.startDateTime,
+    endDateTime: summary.endDateTime,
+    endDateTimeSuperscript: summary.endDateTimeSuperscript,
+    startDateTimeFormatted: summary.startDateTimeFormatted,
+    shiftNumber: mainDetail?.basicInfo?.transportNumber,
+    nearbyText: summary.description,
+    isRecommended: summary.isRecommended,
+    isTransfer: summary.isTransfer,
+    trafficType: mainDetail?.type,
+    transferCount: summary.transferCount || 0,
+    description: mainDetail?.basicInfo?.description,
+    tagList: summary.tagList,
+  };
+}
+
+// ── 4. Card Renderers ──
+
+/** TransportCard — 1:1 from TransportCard.jsx */
+function _renderTransportCard(uc) {
+  if (!uc || uc.type !== 'transportCard') return null;
+  const units = uc.unitList || [];
+  if (units.length === 0) return null;
+  const unit = units[0];
+  if (!unit.trafficPlanInfo) return null;
+  const X = _convertTPI(unit.trafficPlanInfo);
+  if (!X) return null;
+
+  const url = unit.trafficPlanInfo.summary?.url;
+
+  const card = _el('div', 'trip-transport-card');
+  if (url?.type === 'NORMAL_URL' && url.url) {
+    card.style.cursor = 'pointer';
+    card.onclick = () => window.open(url.url, '_blank');
+  }
+
+  const inner = _el('div', 'trip-tc-inner');
+  card.appendChild(inner);
+
+  // StationAndTime
+  const w = X.startDateTime ? _formatTime(X.startDateTime) : '';
+  const b = X.endDateTime ? _formatTime(X.endDateTime) : '';
+  let H = w, z = b;
+  const U = !!(w && b);
+  if (!U) { H = X.startDistrictName; z = X.endDistrictName; }
+  const Y = !!(H && z);
+  if (!Y) { H = X.startStationName; z = X.endStationName; }
+
+  const stationRow = _el('div', 'trip-tc-station-row');
+  inner.appendChild(stationRow);
+
+  // Left side
+  const left = _el('div', 'trip-tc-left');
+  stationRow.appendChild(left);
+
+  const leftTop = _el('div', 'trip-tc-left-top');
+  left.appendChild(leftTop);
+
+  // Start time/city
+  leftTop.appendChild(_text('span', 'trip-tc-time', H));
+
+  // Arrow area
+  const arrowArea = _el('div', 'trip-tc-arrow-area');
+  leftTop.appendChild(arrowArea);
+
+  // SVG arrow
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('width', '100%');
+  svg.setAttribute('height', '20');
+  svg.setAttribute('viewBox', '0 0 100 20');
+  svg.setAttribute('preserveAspectRatio', 'none');
+  svg.style.display = 'block';
+  svg.style.flex = '1';
+  svg.style.minWidth = '40px';
+  const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+  line.setAttribute('x1', '0'); line.setAttribute('y1', '10');
+  line.setAttribute('x2', '90'); line.setAttribute('y2', '10');
+  line.setAttribute('stroke', '#C9CDD4'); line.setAttribute('stroke-width', '1');
+  svg.appendChild(line);
+  const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+  polygon.setAttribute('points', '90,6 98,10 90,14');
+  polygon.setAttribute('fill', '#C9CDD4');
+  svg.appendChild(polygon);
+  arrowArea.appendChild(svg);
+
+  // Duration label
+  const dur = _el('div', 'trip-tc-duration');
+  if (X.travelTime) dur.appendChild(_text('span', '', X.travelTime));
+  if (X.transferCount > 0) dur.appendChild(_text('span', '', ` ${X.transferCount}次中转`));
+  arrowArea.appendChild(dur);
+
+  // Start station name
+  const startCode = (X.startId === X.startCode) ? undefined : X.startCode;
+  if (Y) {
+    left.appendChild(_text('span', 'trip-tc-station',
+      X.startStationName + (startCode ? ` ${startCode}` : '')));
+  }
+
+  // Right side
+  const right = _el('div', 'trip-tc-right');
+  stationRow.appendChild(right);
+
+  const endTime = _text('span', 'trip-tc-time', z);
+  right.appendChild(endTime);
+  if (X.endDateTimeSuperscript) {
+    endTime.appendChild(_text('span', 'trip-tc-superscript', X.endDateTimeSuperscript));
+  }
+
+  const endCode = (X.endId === X.endCode) ? undefined : X.endCode;
+  if (Y) {
+    right.appendChild(_text('span', 'trip-tc-station',
+      X.endStationName + (endCode ? ` ${endCode}` : '')));
+  }
+
+  // DescBox
+  const desc = _el('div', 'trip-tc-desc');
+  inner.appendChild(desc);
+  const descParts = [];
+
+  // Recommend tag
+  const recTag = (X.tagList || []).find(t => t.tagType === 'recommend' || t.tagType === 'book' || t.tagType === 'TRAFFIC_PLAN');
+  if (recTag?.tagValue) {
+    descParts.push(_text('span', 'trip-tc-desc-tag trip-tc-desc-tag-positive', recTag.tagValue));
+  }
+
+  // Flight number — 始终显示"参考班次："前缀
+  if (!X.isTransfer && X.shiftNumber) {
+    descParts.push(_text('span', 'trip-tc-desc-tag', '参考班次：' + X.shiftNumber));
+  }
+
+  // Date — 不显示日期（参考图一）
+
+  // Join with dividers
+  descParts.forEach((part, i) => {
+    if (i > 0) desc.appendChild(_text('span', 'trip-tc-desc-divider', '|'));
+    desc.appendChild(part);
+  });
+
+  return card;
+}
+
+/** ImageCard — POI 图片横向滚动 */
+function _renderImageCard(uc) {
+  if (!uc || uc.type !== 'imageCard') return null;
+  const units = (uc.unitList || []).filter(u => u.unitType === 'poi' && u.poiInfo);
+  if (units.length === 0) return null;
+
+  const container = _el('div', 'trip-img-card');
+
+  units.forEach(u => {
+    const poi = u.poiInfo;
+    const imgs = poi.imgs || [];
+    const name = poi.name || poi.poiName || '';
+    const score = poi.hotScore;
+    const desc = poi.description
+      || poi.summary
+      || poi.basicInfo?.description
+      || poi.basicInfo?.summary
+      || poi.rankName
+      || '';
+
+    // Only create items for POIs with images
+    imgs.slice(0, 3).forEach(imgUrl => {
+      const item = _el('div', 'trip-img-item');
+
+      const img = document.createElement('img');
+      img.src = imgUrl;
+      img.alt = name;
+      img.loading = 'lazy';
+      item.appendChild(img);
+
+      // Overlay with name
+      const overlay = _el('div', 'trip-img-overlay');
+      overlay.appendChild(_text('span', 'trip-img-name', name));
+      item.appendChild(overlay);
+
+      // Score badge
+      if (score) {
+        const scoreBadge = _el('div', 'trip-img-score');
+        scoreBadge.appendChild(_text('span', 'trip-img-score-icon', '🔥'));
+        scoreBadge.appendChild(_text('span', 'trip-img-score-text', String(score)));
+        item.appendChild(scoreBadge);
+      }
+
+      container.appendChild(item);
+    });
+
+    // If only markdown fallback data is available, still render the useful text
+    // instead of collapsing to an empty-looking image placeholder.
+    if (imgs.length === 0 && name) {
+      const item = _el('div', 'trip-img-item trip-img-fallback-item');
+      item.appendChild(_text('span', 'trip-img-fallback-title', name));
+      if (desc) {
+        item.appendChild(_text('span', 'trip-img-fallback-desc', desc));
+      }
+      if (score) {
+        item.appendChild(_text('span', 'trip-img-fallback-score', String(score)));
+      }
+      container.appendChild(item);
+    }
+  });
+
+  return container.children.length > 0 ? container : null;
+}
+
+/** TimeDataCard — Day 分隔符 */
+function _renderTimeDataCard(content) {
+  // 蓝色第N天 badge 已移除，参考图二不需要此组件
+  return null;
+}
+
+/** ShoppingCard — 线路概览表格 */
+function _renderShoppingCard(dayList) {
+  if (!dayList || dayList.length === 0) return null;
+
+  const card = _el('div', 'trip-sh-card');
+  card.appendChild(_text('span', 'trip-sh-title', '线路概览'));
+
+  const table = _el('div', 'trip-sh-table');
+  card.appendChild(table);
+
+  dayList.forEach((day, idx) => {
+    const row = _el('div', 'trip-sh-row');
+    table.appendChild(row);
+
+    // Day cell
+    const dayCell = _el('div', 'trip-sh-day-cell');
+    dayCell.appendChild(_text('span', 'trip-sh-day-title', 'DAY'));
+    dayCell.appendChild(_text('span', 'trip-sh-day-num', String(idx + 1).padStart(2, '0')));
+    row.appendChild(dayCell);
+
+    // Detail cell
+    const detail = _el('div', 'trip-sh-detail');
+    row.appendChild(detail);
+
+    const wrapper = _el('div', '');
+    detail.appendChild(wrapper);
+
+    // Districts
+    const districts = day.districtInfos || [];
+    if (districts.length > 0) {
+      const dv = _el('div', 'trip-sh-districts');
+      wrapper.appendChild(dv);
+      districts.forEach((d, di) => {
+        if (di > 0) dv.appendChild(_text('span', 'trip-sh-district-arrow', '→'));
+        dv.appendChild(_text('span', 'trip-sh-district', d.districtName || ''));
+      });
+    }
+
+    // POIs
+    const units = day.itineraryUnitList || [];
+    const poiNames = units.map(u => u.poiInfo?.basicInfo?.poiName || u.poiInfo?.name || '').filter(Boolean);
+    if (poiNames.length > 0) {
+      const pv = _el('div', 'trip-sh-pois');
+      wrapper.appendChild(pv);
+      poiNames.forEach((name, pi) => {
+        if (pi > 0) pv.appendChild(_text('span', 'trip-sh-poi-arrow', '→'));
+        pv.appendChild(_text('span', 'trip-sh-poi', name));
+      });
+    }
+  });
+
+  return card;
+}
+
+/** HotelAreaCard */
+function _renderHotelCard(uc) {
+  if (!uc || uc.type !== 'hotelAreaCard') return null;
+  const unit = (uc.unitList || [])[0];
+  const areaList = unit?.hotelAreaList || [];
+  const area = unit?.hotelArea || areaList.find(a => a && a.recommendArea) || areaList[0];
+  if (!area) return null;
+
+  const card = _el('div', 'trip-hotel-card');
+  const header = _el('div', 'trip-hotel-header');
+  card.appendChild(header);
+
+  // Hotel icon (using emoji as fallback for icon font)
+  header.appendChild(_text('span', 'trip-hotel-icon', String.fromCodePoint(0xF178F)));
+  header.appendChild(_text('span', 'trip-hotel-title', `推荐住在 · ${area.name || ''}`));
+  const desc = area.description
+    || area.recommendation
+    || (area.chosenRate ? `${Math.round(Number(area.chosenRate) * 100)}%的游客选择住在这里` : '');
+  if (desc) {
+    card.appendChild(_text('div', 'trip-hotel-desc', desc));
+  }
+
+  return card;
+}
+
+/** FoodCard */
+function _renderFoodCard(foodData) {
+  if (!foodData) return null;
+  const mt = foodData.mustTasteResult || foodData;
+  const foods = (mt.hotFoodInfos || []).slice(0, 4);
+  const rests = (mt.hotRestInfos || []).filter(r => r.name || r.restName).slice(0, 3);
+  if (foods.length === 0 && rests.length === 0) return null;
+
+  const card = _el('div', '', { margin: '16px 0' });
+
+  // 标题
+  var title = document.createElement('h3');
+  title.textContent = '美食推荐';
+  title.style.cssText = 'font-size:18px;font-weight:600;color:#111;margin:0 0 8px 0;line-height:26px;';
+  card.appendChild(title);
+
+  // 介绍段落："当地特色美食有寿司、鳗鱼饭、天妇罗等，推荐口碑榜餐厅作为参考："
+  if (foods.length > 0) {
+    var foodNames = foods.map(function(f) { return f.name || ''; }).filter(Boolean).join('、');
+    var intro = document.createElement('p');
+    intro.textContent = '当地特色美食有' + foodNames + '等，推荐口碑榜餐厅作为参考：';
+    intro.style.cssText = 'font-size:15px;color:#333;line-height:1.7;margin:0 0 12px 0;';
+    card.appendChild(intro);
+  }
+
+  // 餐厅列表（bullet list 样式，匹配图一）
+  if (rests.length > 0) {
+    var ul = document.createElement('ul');
+    ul.style.cssText = 'list-style:disc;padding-left:20px;margin:0;';
+    rests.forEach(function(r) {
+      var li = document.createElement('li');
+      li.style.cssText = 'margin-bottom:10px;font-size:15px;line-height:1.7;color:#333;';
+
+      var nameEl = document.createElement('strong');
+      nameEl.textContent = r.name || r.restName || '';
+      li.appendChild(nameEl);
+
+      if (r.rankTitle) {
+        var desc = document.createTextNode('：' + r.rankTitle);
+        li.appendChild(desc);
+      }
+      ul.appendChild(li);
+    });
+    card.appendChild(ul);
+  }
+
+  return card;
+}
+
+/** BudgetCard */
+function _renderBudgetCard(budgetData) {
+  if (!budgetData) return null;
+  const result = budgetData.result || budgetData;
+  const budget = result.budget || result.budgetData || result;
+  if (!budget) return null;
+
+  function _readBudgetNumber(obj, fields) {
+    for (var i = 0; i < fields.length; i++) {
+      var value = obj && obj[fields[i]];
+      if (typeof value === 'number' && Number.isFinite(value)) return value;
+      if (typeof value === 'string') {
+        var parsed = Number(value.replace(/[^\d.-]/g, ''));
+        if (Number.isFinite(parsed)) return parsed;
+      }
+    }
+    return 0;
+  }
+
+  function _readBudgetText(obj, fields) {
+    for (var i = 0; i < fields.length; i++) {
+      var value = obj && obj[fields[i]];
+      if (typeof value === 'string' && value.trim()) return value.trim();
+    }
+    return '';
+  }
+
+  const totalPrice = _readBudgetNumber(budget, [
+    'totalPrice', 'totalAmount', 'totalCost', 'total', 'amount', 'price', 'cost', 'value'
+  ]);
+  const totalFormatted = _readBudgetText(budget, [
+    'totalPriceFormatted', 'totalAmountFormatted', 'totalCostFormatted',
+    'totalFormatted', 'amountFormatted', 'priceFormatted', 'formattedPrice', 'formatted'
+  ]);
+
+  const rawParts = budget.budgetParts || budget.parts || budget.items || budget.categories || budget.detailList || [];
+  const description = budget.description || budget.desc || budget.summary || budget.remark || '';
+
+  if (!totalPrice && !totalFormatted && (!rawParts || rawParts.length === 0) && !description) return null;
+
+  const PART_COLORS = {
+    TRAFFIC: { color: '#7585F8', bg: 'rgba(117,133,248,0.08)', title: '交通', icon: '✈️' },
+    TICKETS: { color: '#1FC496', bg: 'rgba(31,196,150,0.08)', title: '景点', icon: '🎫' },
+    STAY: { color: '#3290FA', bg: 'rgba(50,144,250,0.08)', title: '住宿', icon: '🏨' },
+  };
+
+  const card = _el('div', 'trip-budget-card');
+  card.appendChild(_text('div', 'trip-budget-title', '费用预估'));
+  if (description) {
+    // 描述用 bullet list 格式（匹配图一）
+    const descUl = document.createElement('ul');
+    descUl.style.cssText = 'list-style:disc;padding-left:20px;margin:6px 0 0 0;';
+    const descLi = document.createElement('li');
+    descLi.className = 'trip-budget-desc';
+    descLi.textContent = description;
+    descUl.appendChild(descLi);
+    card.appendChild(descUl);
+  }
+
+  const chart = _el('div', 'trip-budget-chart');
+  card.appendChild(chart);
+
+  // Header
+  const header = _el('div', 'trip-budget-header');
+  chart.appendChild(header);
+  const person = (budget.person || 1) > 1 ? `${budget.person}人总价` : '1人总价';
+  header.appendChild(_text('span', 'trip-budget-person', person));
+  header.appendChild(_text('span', 'trip-budget-total',
+    totalFormatted || (totalPrice ? `≈ ¥${totalPrice.toLocaleString()}` : '费用待估算')));
+
+  // Parts
+  const parts = (rawParts || []).map(p => {
+    const type = p.type || p.category || p.key || p.name || p.title || 'OTHER';
+    const price = _readBudgetNumber(p, [
+      'totalPrice', 'totalAmount', 'totalCost', 'total', 'amount', 'price', 'cost', 'value'
+    ]);
+    const formatted = _readBudgetText(p, [
+      'totalPriceFormatted', 'totalAmountFormatted', 'totalCostFormatted',
+      'totalFormatted', 'amountFormatted', 'priceFormatted', 'formattedPrice', 'formatted'
+    ]);
+    return {
+      raw: p,
+      type: String(type || 'OTHER').toUpperCase(),
+      label: p.title || p.name || p.label || p.categoryName || '',
+      totalPrice: price,
+      totalPriceFormatted: formatted,
+    };
+  }).sort((a, b) => {
+    const order = { TRAFFIC: 0, STAY: 1, TICKETS: 2 };
+    return (order[a.type] ?? 99) - (order[b.type] ?? 99);
+  });
+
+  if (parts.length > 0) {
+    const partsDiv = _el('div', 'trip-budget-parts');
+    chart.appendChild(partsDiv);
+
+    parts.forEach(p => {
+      const cfg = PART_COLORS[p.type] || { color: '#ccc', bg: '#f5f5f5', title: p.label || p.type, icon: '📦' };
+      const ratio = totalPrice > 0 ? (p.totalPrice || 0) / totalPrice : 0;
+
+      const part = _el('div', 'trip-budget-part');
+      partsDiv.appendChild(part);
+
+      part.appendChild(_text('span', 'trip-budget-part-icon', cfg.icon));
+      part.appendChild(_text('span', 'trip-budget-part-name', cfg.title));
+
+      const bar = _el('div', 'trip-budget-bar', { backgroundColor: cfg.bg });
+      const fill = _el('div', 'trip-budget-bar-fill', {
+        width: `${Math.max(100 * ratio, 4)}%`,
+        backgroundColor: cfg.color,
+      });
+      bar.appendChild(fill);
+      part.appendChild(bar);
+
+      part.appendChild(_text('span', 'trip-budget-part-price',
+        p.totalPriceFormatted || (p.totalPrice ? `¥${p.totalPrice.toLocaleString()}` : '待估算')));
+    });
+  }
+
+  return card;
+}