Refactor financial chart implementation

js/ui.js

@@ -16,10 +16,9 @@ function button(label, { active = false, onClick, className = '' } = {}) {
 export function createAppShell(root, { onReload }) {
   root.replaceChildren();
 
-  const header = element('header', 'app-header');
-  const brand = element('div', 'app-brand');
-  brand.append(element('h1', '', '财报图表'), element('p', '', '选择公司与分析维度，数据更新后可重新加载。'));
-  header.append(brand, button('重新加载数据', { onClick: onReload, className: 'reload-button' }));
+  const reloadButton = button('↻', { onClick: onReload, className: 'reload-button' });
+  reloadButton.title = '重新加载数据';
+  reloadButton.setAttribute('aria-label', '重新加载数据');
 
   const layout = element('div', 'app-layout');
   const companyNav = element('aside', 'sidebar company-sidebar');
@@ -29,7 +28,7 @@ export function createAppShell(root, { onReload }) {
   content.append(tabs, cards);
   const chartNav = element('aside', 'sidebar chart-sidebar');
   layout.append(companyNav, content, chartNav);
-  root.append(header, layout);
+  root.append(layout, reloadButton);
 
   return { companyNav, tabs, cards, chartNav };
 }
@@ -67,13 +66,13 @@ export function renderCards(container, charts, activeViews, { onExport, onSelect
 
   charts.forEach((chart) => {
     const card = element('section', 'card');
-    card.id = `card-${chart.id}`;
+    card.id = `card-${chart.instanceId}`;
     const bar = element('div', 'card-bar');
     const heading = element('div', 'card-heading');
     heading.append(element('h2', 'card-title', chart.title));
 
     const viewNames = Object.keys(chart.views || {});
-    const activeView = activeViews.get(chart.id) || chart.defaultView || viewNames[0];
+    const activeView = activeViews.get(chart.viewKey) || chart.defaultView || viewNames[0];
     const source = chart.views ? chart.views[activeView] : chart.csv;
     heading.append(element('span', 'src', source));
     bar.append(heading);
@@ -84,7 +83,7 @@ export function renderCards(container, charts, activeViews, { onExport, onSelect
       viewNames.forEach((view) => {
         switcher.append(button(labels[view] || view, {
           active: view === activeView,
-          onClick: () => onSelectView(chart.id, view),
+          onClick: () => onSelectView(chart, view),
           className: 'view-button',
         }));
       });
@@ -92,11 +91,11 @@ export function renderCards(container, charts, activeViews, { onExport, onSelect
     }
 
     bar.append(button('导出 PNG', {
-      onClick: () => onExport(chart.id, chart.filename || chart.title),
+      onClick: () => onExport(chart.instanceId, chart.filename || chart.title),
       className: 'export-button',
     }));
     const chartEl = element('div', 'chart');
-    chartEl.id = `chart-${chart.id}`;
+    chartEl.id = `chart-${chart.instanceId}`;
     chartEl.style.height = `${chart.height || 680}px`;
     card.append(bar, chartEl);
     container.append(card);