update backtest report

anyongjin · anyongjin · commit f0fce66496a8 · 2025-08-23T22:22:15.000+08:00
diff --git a/web/ui/src/lib/Snippets.svelte b/web/ui/src/lib/Snippets.svelte
@@ -1,18 +1,10 @@
 <script lang="ts" module>
   import type {InOutOrder} from "$lib/order";
   import { fmtDateStr } from '$lib/dateutil';
+  import { fmtNumber } from '$lib/common';
   import * as m from '$lib/paraglide/messages.js'
   export {orderCard, pagination}
 
-    
-  function formatNumber(num: number, decimals = 2) {
-    if(!num) return '0';
-    if(decimals >= 6 && num > 1){
-      decimals = 4;
-    }
-    return num.toFixed(decimals);
-  }
-
   function formatPercent(num: number, decimals = 1) {
     if(!num) return '0%';
     return num.toFixed(decimals) + '%';
@@ -44,9 +36,8 @@
 {/snippet}
 
 {#snippet orderCard(order: InOutOrder, isSelected: boolean, onAnalysis: () => void, onDetail: (e: Event) => void)}
-  <div class="w-[15em] mr-2 mb-3 bg-base-200 hover:bg-base-300 cursor-pointer shadow-sm hover:shadow-md transition-all rounded-lg"
+  <div class="w-[15em] mr-2 mb-3 bg-base-200 hover:bg-base-300 cursor-pointer shadow-sm hover:shadow-md transition-all rounded-lg {isSelected ? 'ring-2 ring-primary bg-primary/10' : ''}"
     onclick={onAnalysis}
-    class:bg-slate-200={isSelected}
   >
     <div class="p-3.5">
       <div class="flex mb-2.5 items-center justify-between">
@@ -60,10 +51,7 @@
           {order.enter_tag}
         </div>
         <div class="tooltip font-medium" data-tip={m.enter_price()}>
-          {formatNumber(order.enter?.average||order.enter?.price || 0, 8)}
-        </div>
-        <div class="tooltip opacity-75" data-tip={m.enter_amount()}>
-          {formatNumber(order.enter?.filled ||order.enter?.amount || 0, 8)}
+          {fmtNumber(order.enter?.average||order.enter?.price || 0)}
         </div>
       </div>
 
diff --git a/web/ui/src/lib/common.ts b/web/ui/src/lib/common.ts
@@ -28,4 +28,115 @@ export function getFirstValid(vals: any[]){
 export interface StrVal{
   str: string
   val: any
-}
+}
+
+/**
+ * 格式化价格显示
+ * @param value 要格式化的数字
+ * @param digits 有效数字位数，默认6位
+ * @returns 格式化后的字符串
+ *
+ * 规则：
+ * - < 0.001: 使用科学计数法，保留指定位有效数字（截断）
+ * - 0.001 ~ 1000: 保留指定位有效数字（截断）
+ * - >= 1000: 使用千位分隔符，保留指定位有效数字（截断）
+ */
+export function fmtNumber(value: number, digits: number = 6): string {
+  // 处理特殊值
+  if (value === 0) return '0';
+  if (!isFinite(value) || isNaN(value)) return '0';
+
+  const absValue = Math.abs(value);
+  const sign = value < 0 ? '-' : '';
+
+  // < 0.001: 使用科学计数法
+  if (absValue < 0.001) {
+    return sign + formatScientific(absValue, digits);
+  }
+
+  // 0.001 ~ 1000: 保留有效数字，不使用千位分隔符
+  if (absValue < 1000) {
+    return sign + formatWithDigits(absValue, digits);
+  }
+
+  // >= 1000: 使用千位分隔符
+  // 如果是整数或接近整数，保留整数部分
+  const integerPart = Math.floor(absValue);
+  const decimalPart = absValue - integerPart;
+
+  // 如果小数部分很小或整数部分已经很大，只显示整数
+  if (decimalPart < 0.01 || integerPart >= 1000000) {
+    return sign + addThousandsSeparator(integerPart.toString());
+  }
+
+  // 否则按有效数字格式化
+  const formatted = formatWithDigits(absValue, digits);
+  return sign + addThousandsSeparator(formatted);
+}
+
+/**
+ * 格式化科学计数法（截断）
+ */
+function formatScientific(value: number, digits: number): string {
+  // 获取指数
+  const exponent = Math.floor(Math.log10(value));
+  // 获取尾数
+  const mantissa = value / Math.pow(10, exponent);
+  // 截断尾数到指定位数
+  const factor = Math.pow(10, digits - 1);
+  const truncatedMantissa = Math.floor(mantissa * factor) / factor;
+
+  // 格式化输出，保持固定的小数位数
+  const mantissaStr = truncatedMantissa.toFixed(digits - 1);
+  return `${mantissaStr}e${exponent}`;
+}
+
+/**
+ * 按有效数字格式化数字（截断而非四舍五入）
+ */
+function formatWithDigits(value: number, digits: number): string {
+  if (value === 0) return '0';
+
+  // 计算整数部分的位数
+  const integerDigits = Math.floor(Math.log10(value)) + 1;
+
+  // 如果整数部分位数超过有效数字，优先保留整数
+  if (integerDigits >= digits) {
+    // 对于超大数字，保留整数部分
+    if (integerDigits > digits) {
+      const factor = Math.pow(10, integerDigits - digits);
+      const truncated = Math.floor(value / factor) * factor;
+      return truncated.toString();
+    }
+    // 整数部分刚好等于有效数字，返回整数
+    return Math.floor(value).toString();
+  }
+
+  // 计算需要保留的小数位数
+  const decimalPlaces = digits - integerDigits;
+  const factor = Math.pow(10, decimalPlaces);
+  const truncated = Math.floor(value * factor) / factor;
+
+  // 转换为字符串并移除末尾的零
+  let result = truncated.toFixed(decimalPlaces);
+  if (result.indexOf('.') >= 0) {
+    result = result.replace(/\.?0+$/, '');
+  }
+  return result;
+}
+
+/**
+ * 添加千位分隔符
+ */
+function addThousandsSeparator(value: string): string {
+  const parts = value.split('.');
+  const integerPart = parts[0];
+  const decimalPart = parts[1];
+
+  // 为整数部分添加千位分隔符
+  const withSeparator = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+  // 如果有小数部分，拼接回去
+  return decimalPart !== undefined ? `${withSeparator}.${decimalPart}` : withSeparator;
+}
+
diff --git a/web/ui/src/routes/(dev)/backtest/item/+page.svelte b/web/ui/src/routes/(dev)/backtest/item/+page.svelte
@@ -4,6 +4,7 @@
   import { getApi } from '$lib/netio';
   import { alerts } from "$lib/stores/alerts";
   import CodeMirror from '$lib/dev/CodeMirror.svelte';
+  import Icon from '$lib/Icon.svelte';
   import { oneDark } from '@codemirror/theme-one-dark';
   import type { Extension } from '@codemirror/state';
   import * as m from '$lib/paraglide/messages.js';
@@ -13,7 +14,7 @@
   import type { BacktestDetail, BackTestTask, ExSymbol } from '$lib/dev/common';
   import { InOutOrderDetail, type InOutOrder } from '$lib/order';
   import { TreeView, type Tree, type Node, buildTree } from '$lib/treeview';
-	import { writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import RangeSlider from '$lib/dev/RangeSlider.svelte';
   import { ChartCtx, ChartSave } from '$lib/kline/chart';
   import { persisted } from 'svelte-persisted-store';
@@ -23,7 +24,7 @@
   import type { OverlayCreate } from 'klinecharts';
   import type { TradeInfo } from '$lib/kline/types';
   import { pagination, orderCard } from '$lib/Snippets.svelte';
-  import {getFirstValid} from "$lib/common";
+  import {getFirstValid, fmtNumber} from "$lib/common";
 
   let id = $state('');
   let btPath = $state('');
@@ -448,32 +449,55 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
 
   // 定义导航菜单项
   let navItems = $derived.by(() => {
-    const items = [];
+    const items = []
     
     if (task?.status == 3) {
       if (detail) {
         items.push(
-          { id: 'overview', label: m.overview() },
-          { id: 'assets', label: m.bt_assets() },
-          { id: 'enters', label: m.bt_enters() }
+          { id: 'overview', label: m.overview(), icon: 'home' },
+          { id: 'assets', label: m.bt_assets(), icon: 'chart-bar' },
+          { id: 'enters', label: m.bt_enters(), icon: 'double-right' }
         );
       }
       
-      items.push({ id: 'config', label: m.configuration() });
+      items.push({ id: 'config', label: m.configuration(), icon: 'config' });
       
       if (detail) {
         items.push(
-          { id: 'orders', label: m.orders() },
-          { id: 'analysis', label: m.bt_analysis() },
-          { id: 'strat_code', label: m.bt_strat_code() }
+          { id: 'orders', label: m.orders(), icon: 'number-list' },
+          { id: 'analysis', label: m.bt_analysis(), icon: 'calculate' },
+          { id: 'strat_code', label: m.bt_strat_code(), icon: 'code' }
         );
       }
     }
     
-    items.push({ id: 'logs', label: m.bt_logs() });
+    items.push({ id: 'logs', label: m.bt_logs(), icon: 'document-text' });
     return items;
   });
 
+  // 组织次要统计信息的数据，返回最大3列的二维数组
+  function getInfoColumns() {
+    if (!detail || !task) return [];
+    return [
+      [
+        { label: m.strategy(), value: task?.strats || '-' },
+        { label: m.time_period(), value: task?.periods || '-' },
+        { label: m.start_time(), value: fmtDateStr(detail.startMS), value_tip: curTZ() },
+        { label: m.end_time(), value: fmtDateStr(detail.endMS), value_tip: curTZ() },
+      ],[
+        { label: m.total_invest(), value: task?.walletAmount ? formatNumber(task.walletAmount) : formatNumber(detail.totalInvest) },
+        { label: m.final_balance(), value: formatNumber(detail.finBalance) },
+        { label: m.total_withdraw(), value: formatNumber(detail.finWithdraw) },
+        { label: m.tot_fee(), value: `${formatNumber(detail.totFee)} (${formatPercent(detail.totFee/detail.totProfit*100)})` },
+      ],[
+        { label: m.max_drawdown(), value: `${formatPercent(detail.maxDrawDownPct)} (${formatNumber(detail.maxDrawDownVal)} USD)`},
+        { label: m.bar_num(), value: detail.barNum.toString() },
+        { label: m.symbol(), value: task?.pairs ? showPairs(task.pairs) : '-' },
+        { label: m.max_open_orders(), value: detail.maxOpenOrders.toString() }
+      ]
+    ];
+  }
+
   function setActiveTab(tab: string) {
     activeTab = tab;
     if(activeTab === 'orders') {
@@ -499,8 +523,14 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
 
 <div class="px-4 py-6 flex-1 flex flex-col">
   <div class="flex justify-between items-center mb-6">
-    <h1 class="text-2xl font-bold">{m.bt_report()}: {id}</h1>
-    <div class="text-sm opacity-75">{btPath}</div>
+    <div class="flex items-center gap-4">
+      <h1 class="text-2xl font-bold">{m.bt_report()}: {id}</h1>
+      <div class="text-sm opacity-75">{btPath}</div>
+    </div>
+    <button class="btn btn-sm btn-ghost gap-2" onclick={() => history.back()}>
+      <Icon name="double-left" class="size-4" />
+      {m.back()}
+    </button>
   </div>
 
   <div class="flex gap-4 flex-1">
@@ -510,6 +540,7 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
         {#each navItems as item}
           <li>
             <button class:menu-active={activeTab === item.id} onclick={() => setActiveTab(item.id)}>
+              <Icon name={item.icon} class="size-4" />
               {item.label}
             </button>
           </li>
@@ -582,16 +613,9 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
             formatPercent(detail.winRatePct),
             `${m.order_num()} ${detail.orderNum}`
           )}
-
-          {@render statCard(
-            m.max_drawdown(),
-            'text-warning',
-            formatPercent(detail.maxDrawDownPct),
-            `${formatNumber(detail.maxDrawDownVal)} USD`
-          )}
           
           {@render statCard(
-            m.show_drawdown(),
+            m.max_drawdown(),
             'text-warning',
             formatPercent(detail.showDrawDownPct),
             `${formatNumber(detail.showDrawDownVal)} USD`
@@ -605,16 +629,22 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
         </div>
 
         <!-- 次要统计信息 -->
-        <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
-          {@render infoCard(m.bt_range() + ` (${curTZ()})`, `${fmtDateStr(detail.startMS)} ~ ${fmtDateStr(detail.endMS)}`)}
-          {@render infoCard(
-            `${m.total_invest()}/${m.final_balance()}/${m.total_withdraw()}`,
-            `${task?.walletAmount ? formatNumber(task.walletAmount) : formatNumber(detail.totalInvest)} / ${formatNumber(detail.finBalance)} / ${formatNumber(detail.finWithdraw)}`
-          )}
-          {@render infoCard(m.tot_fee(), `${formatNumber(detail.totFee)} (${formatPercent(detail.totFee/detail.totProfit*100)})`)}
-          {@render infoCard(m.strategy(), task?.strats || '-')}
-          {@render infoCard(`${m.time_period()}/${m.bar_num()}`, `${task?.periods || '-'} / ${detail.barNum}`)}
-          {@render infoCard(m.symbol() + '/' + m.max_open_orders(), `${task?.pairs ? showPairs(task.pairs) : '-'} / ${detail.maxOpenOrders}`)}
+        {@const infoColumns = getInfoColumns()}
+        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-6">
+          {#each infoColumns as column, idx}
+            <!-- 使用响应式类控制显示 -->
+            <div class="bg-base-200 rounded-box p-4 
+                        {idx === 2 ? 'lg:col-span-2 xl:col-span-1' : ''}">
+              <div class="space-y-3">
+                {#each column as item}
+                  <div class="flex justify-between items-center">
+                    <span class="text-sm opacity-75">{item.label}</span>
+                    <span class="text-sm font-medium" title="{item.value_tip}">{item.value}</span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/each}
         </div>
 
         <!-- 分组统计 -->
@@ -625,30 +655,35 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
                 class="tab" 
                 class:tab-active={activeGroupTab === 'pairs'}
                 onclick={() => activeGroupTab = 'pairs'}>
+                <Icon name="chart-bar" class="size-4 mr-2" />
                 {m.stat_by_pairs()}
               </button>
               <button role="tab" 
                 class="tab"
                 class:tab-active={activeGroupTab === 'dates'}
                 onclick={() => activeGroupTab = 'dates'}>
+                <Icon name="calender" class="size-4 mr-2" />
                 {m.stat_by_dates()}
               </button>
               <button role="tab" 
                 class="tab"
                 class:tab-active={activeGroupTab === 'profits'}
                 onclick={() => activeGroupTab = 'profits'}>
+                <Icon name="dollar" class="size-4 mr-2" />
                 {m.stat_by_profits()}
               </button>
               <button role="tab" 
                 class="tab"
                 class:tab-active={activeGroupTab === 'enters'}
                 onclick={() => activeGroupTab = 'enters'}>
+                <Icon name="chevron-right" class="size-4 mr-2" />
                 {m.stat_by_enters()}
               </button>
               <button role="tab" 
                 class="tab"
                 class:tab-active={activeGroupTab === 'exits'}
                 onclick={() => activeGroupTab = 'exits'}>
+                <Icon name="chevron-down" class="size-4 mr-2" />
                 {m.stat_by_exits()}
               </button>
             </div>
@@ -915,12 +950,12 @@ ${m.holding()}: ${fmtDuration((td.exit_at - td.enter_at) / 1000)}`;
                     <td>{order.leverage}x</td>
                     <td>{fmtDateStr(order.enter_at)}</td>
                     <td>{order.enter_tag}</td>
-                    <td>{formatNumber(order.enter?.average||order.enter?.price || 0, 8)}</td>
-                    <td>{formatNumber(order.enter?.filled ||order.enter?.amount || 0, 8)}</td>
+                    <td>{fmtNumber(order.enter?.average||order.enter?.price || 0)}</td>
+                    <td>{fmtNumber(order.enter?.filled ||order.enter?.amount || 0)}</td>
                     <td>{fmtDateStr(order.exit_at)}</td>
                     <td>{order.exit_tag}</td>
-                    <td>{formatNumber(order.exit?.average||order.exit?.price || 0, 8)}</td>
-                    <td>{formatNumber(order.exit?.filled ||order.exit?.amount || 0, 8)}</td>
+                    <td>{fmtNumber(order.exit?.average||order.exit?.price || 0)}</td>
+                    <td>{fmtNumber(order.exit?.filled ||order.exit?.amount || 0)}</td>
                     <td>{formatNumber(order.profit)}</td>
                   </tr>
                 {/each}
