Add Chinese side label and click-to-zoom review charts.

Crop thumbnails around entry/exit so short trades are visible; lightbox uses a tighter window.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/templates/record_detail.html

@@ -1,13 +1,19 @@
 {% extends "base.html" %}
 {% block title %}复盘 #{{ trade.id }} · {{ app_name }}{% endblock %}
 {% block content %}
+{% set side_cn = '买入（多）' if trade.side == 'buy' else ('卖出（空）' if trade.side == 'sell' else (trade.side or '—')) %}
+{% set side_cls = 'green' if trade.side == 'buy' else ('red' if trade.side == 'sell' else 'gray') %}
 <p><a href="{{ url_for('records_page') }}">← 返回列表</a></p>
-<h2 style="margin:8px 0 14px">复盘 #{{ trade.id }} · {{ trade.symbol }} · {{ trade.side }}</h2>
+<h2 style="margin:8px 0 14px">
+  复盘 #{{ trade.id }} · {{ trade.symbol }} ·
+  <span class="tag {{ side_cls }}" style="font-size:15px;vertical-align:middle">{{ side_cn }}</span>
+</h2>
 
 <div class="grid cols-2">
   <div class="card">
     <h3>成交信息</h3>
     <table>
+      <tr><th>方向</th><td><span class="tag {{ side_cls }}">{{ side_cn }}</span></td></tr>
       <tr><th>账户</th><td>{{ trade.account_name or '—' }}</td></tr>
       <tr><th>机器</th><td>{{ trade.machine_name or '—' }}</td></tr>
       <tr><th>手数</th><td>{{ trade.volume }}</td></tr>
@@ -63,7 +69,8 @@
 <div class="card" style="margin-top:14px">
   <h3>四周期 K 线（M1 / M5 / M15 / H1）</h3>
   <p class="muted">
-    显示根数：M1 500 · M5 200 · M15 100 · H1 50。入/出落在<strong>包含成交时刻</strong>的那根 K 线（北京时间）。
+    方向 <span class="tag {{ side_cls }}">{{ side_cn }}</span> ·
+    入/出落在<strong>包含成交时刻</strong>的 K 线 · <strong>点击图可放大</strong>（放大时围绕进出场收紧）。
     <span style="color:#4cc2ff">● 入场 {{ trade.open_price|fmt_price }}{% if trade.open_time_fmt %} · {{ trade.open_time_fmt }}{% endif %}</span>
     {% if trade.close_price is not none %}
     · <span style="color:#f0b429">● 出场 {{ trade.close_price|fmt_price }}{% if trade.close_time_fmt %} · {{ trade.close_time_fmt }}{% endif %}</span>
@@ -72,9 +79,12 @@
   <div class="chart-grid" style="margin-top:10px">
     {% for tf in ['M1','M5','M15','H1'] %}
     <div class="chart-box">
-      <h4>{{ tf }} <span class="chart-meta muted" style="font-weight:400"></span></h4>
+      <h4>{{ tf }} <span class="chart-meta muted" style="font-weight:400"></span>
+        {% if charts[tf] %}<span class="chart-zoom-hint muted">点击放大</span>{% endif %}
+      </h4>
       {% if charts[tf] %}
       <canvas class="chart-canvas" id="chart-{{ tf }}"
+              title="点击放大"
               data-tf="{{ tf }}"
               data-bars='{{ charts[tf]|tojson }}'
               data-open-ts="{{ trade.open_time or '' }}"

app/templates/records.html

@@ -54,7 +54,7 @@
       <tr>
         <td>{{ t.id }}</td>
         <td>{{ t.symbol }}</td>
-        <td><span class="tag {% if t.side=='buy' %}green{% else %}red{% endif %}">{{ t.side }}</span></td>
+        <td><span class="tag {% if t.side=='buy' %}green{% else %}red{% endif %}">{% if t.side=='buy' %}买入{% elif t.side=='sell' %}卖出{% else %}{{ t.side }}{% endif %}</span></td>
         <td>{{ t.volume }}</td>
         <td>{{ t.open_price|fmt_price }}</td>
         <td>{{ t.close_price|fmt_price }}</td>