@wil-works/evoke-charts 0.2.0 → 0.3.0

package/README.md

@@ -10,6 +10,8 @@
 - **零运行时依赖**：仅 peer 依赖 Vue 3，全部绘制自研 Canvas 2D
 - **主题跟随**：从 `--ev-*` CSS 令牌实时读取颜色，宿主换主题 / 暗色即跟随；无令牌时使用内置色板兜底
 - **交互完备**：tooltip、图例点选 / 悬停高亮、十字准线、dataZoom（滑块 / 滚轮 / 触摸平移）、框选刷选、工具箱（导出 PNG / 还原）、多图 connect 联动
+- **叙述与编排**：`annotations[]` 图内旁白（峰值标注 / 区间强调 / 涨跌结论）、`emphasis` 焦点弱化、`scenes` 分幕 reveal / 自动播报
+- **AI 生成**：`generateChartSpec` 数据直生（CSV / 表格 → Spec，列推断与选型全自动）、`buildChartPrompt` 提示词契约（喂给任意大模型）、`lintChartSpec` 渲染自检；Spec 即 `options`，`getSpec / setSpec` 往返
 - **导出**：`toDataURL`（PNG）、`exportSVG`（真矢量，渲染指令录制重放）
 - **无障碍**：`role="img"` + aria-label、hover 信息 aria-live 播报
 
@@ -61,7 +63,7 @@ const options = {
 图表颜色按以下 `--ev-*` 令牌实时读取（`document.documentElement` 上取值），未定义的槽位逐槽回落到内置成套色板：
 
 - 系列色：`--ev-color-series-1` … `--ev-color-series-8`（数据系列专用色板，与状态语义色解耦；槽 1 未定义时回读 `--ev-color-primary`，主题跟随不受影响）
-- 表面：`--ev-bg-color`、`--ev-bg-color-overlay`、`--ev-app-card-border`
+- 表面：`--ev-bg-color`、`--ev-bg-color-overlay`
 - 文字：`--ev-text-color-primary / -secondary / -danger`
 - 边线：`--ev-border-color / -light / -dark`
 - 填充：`--ev-fill-color-light / -dark`

package/dist/evoke-charts.css

@@ -1,24 +1,36 @@
 
-.ev-chart[data-v-a07b68e8] {
+.ev-chart[data-v-ce034a2a] {
   position: relative;
-  overflow: hidden;
+  /* 容器不带边框：是否加框、加多粗由宿主决定，图表只负责内容；
+     圆角裁剪下沉到 canvas 与浮层自身（border-radius: inherit） */
+  overflow: visible;
   border-radius: 8px;
   background: var(--ev-bg-color, #ffffff);
-  border: 1px solid var(--ev-app-card-border, #e2e8f0);
 }
 
 /* 关键：canvas 必须能接收鼠标事件 */
-.ev-chart__canvas[data-v-a07b68e8] {
+.ev-chart__canvas[data-v-ce034a2a] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: block;
+  border-radius: inherit;
   /* 触摸：纵向留给页面滚动，横向拖拽由图表接管（dataZoom 平移） */
   touch-action: pan-y;
 }
-.ev-chart__tooltip[data-v-a07b68e8] {
+
+/* HTML 覆盖层：只在内容层，不与 canvas 抢交互（子元素可自行 pointer-events:auto），
+   也不压过 tooltip（z-index 100） */
+.ev-chart__overlay[data-v-ce034a2a] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+}
+.ev-chart__tooltip[data-v-ce034a2a] {
   position: absolute;
   pointer-events: none;
   z-index: 100;
@@ -39,47 +51,47 @@
 }
 
 /* tooltip 淡入淡出（仅 opacity，位置由 left/top transition 负责） */
-.ev-chart-tooltip-enter-active[data-v-a07b68e8],
-.ev-chart-tooltip-leave-active[data-v-a07b68e8] {
+.ev-chart-tooltip-enter-active[data-v-ce034a2a],
+.ev-chart-tooltip-leave-active[data-v-ce034a2a] {
   transition: opacity 0.18s ease;
 }
 
 /* 进入期间禁用位置 transition，避免首次出现时从旧位置滑入 */
-.ev-chart-tooltip-enter-active[data-v-a07b68e8] {
+.ev-chart-tooltip-enter-active[data-v-ce034a2a] {
   transition:
     opacity 0.18s ease,
     left 0s,
     top 0s;
 }
-.ev-chart-tooltip-enter-from[data-v-a07b68e8],
-.ev-chart-tooltip-leave-to[data-v-a07b68e8] {
+.ev-chart-tooltip-enter-from[data-v-ce034a2a],
+.ev-chart-tooltip-leave-to[data-v-ce034a2a] {
   opacity: 0;
 }
 
 /* v-html 注入的内容不带 scoped 属性，需用 :deep() 穿透 */
-[data-v-a07b68e8] .ev-chart__tooltip-title {
+[data-v-ce034a2a] .ev-chart__tooltip-title {
   color: var(--ev-text-color-secondary, #6b7280);
   font-size: 12px;
   margin-bottom: 6px;
   font-weight: 500;
 }
-[data-v-a07b68e8] .ev-chart__tooltip-item {
+[data-v-ce034a2a] .ev-chart__tooltip-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 2px 0;
 }
-[data-v-a07b68e8] .ev-chart__tooltip-dot {
+[data-v-ce034a2a] .ev-chart__tooltip-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
   display: inline-block;
 }
-[data-v-a07b68e8] .ev-chart__tooltip-name {
+[data-v-ce034a2a] .ev-chart__tooltip-name {
   color: var(--ev-text-color-primary, #111827);
 }
-[data-v-a07b68e8] .ev-chart__tooltip-value {
+[data-v-ce034a2a] .ev-chart__tooltip-value {
   color: var(--ev-text-color-primary, #111827);
   font-weight: 600;
   margin-left: auto;
@@ -88,9 +100,10 @@
 }
 
 /* ══════ 空数据占位 ══════ */
-.ev-chart__empty[data-v-a07b68e8] {
+.ev-chart__empty[data-v-ce034a2a] {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -100,7 +113,7 @@
   gap: 14px;
   user-select: none;
 }
-.ev-chart__empty-icon-wrap[data-v-a07b68e8] {
+.ev-chart__empty-icon-wrap[data-v-ce034a2a] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -109,40 +122,41 @@
   border-radius: 16px;
   background: var(--ev-fill-color-light, #f5f7fa);
 }
-.ev-chart__empty-img[data-v-a07b68e8] {
+.ev-chart__empty-img[data-v-ce034a2a] {
   width: 32px;
   height: 32px;
   opacity: 0.4;
 }
-.ev-chart__empty-text[data-v-a07b68e8] {
+.ev-chart__empty-text[data-v-ce034a2a] {
   letter-spacing: 0.04em;
   font-weight: 500;
   font-size: 13px;
 }
 
 /* ══════ 加载中骨架 ══════ */
-.ev-chart__loading[data-v-a07b68e8] {
+.ev-chart__loading[data-v-ce034a2a] {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--ev-bg-color, #ffffff);
 }
-.ev-chart__loading-bars[data-v-a07b68e8] {
+.ev-chart__loading-bars[data-v-ce034a2a] {
   display: flex;
   align-items: flex-end;
   gap: 6px;
   height: 60px;
 }
-.ev-chart__loading-bar[data-v-a07b68e8] {
+.ev-chart__loading-bar[data-v-ce034a2a] {
   width: 10px;
   height: 40px;
   border-radius: 4px;
   background: var(--ev-border-color, #e2e8f0);
-  animation: ev-chart-shimmer-a07b68e8 1.2s ease-in-out infinite;
+  animation: ev-chart-shimmer-ce034a2a 1.2s ease-in-out infinite;
 }
-@keyframes ev-chart-shimmer-a07b68e8 {
+@keyframes ev-chart-shimmer-ce034a2a {
 0%,
   100% {
     transform: scaleY(0.4);
@@ -155,9 +169,10 @@
 }
 
 /* ══════ 错误边界 ══════ */
-.ev-chart__error[data-v-a07b68e8] {
+.ev-chart__error[data-v-ce034a2a] {
   position: absolute;
   inset: 0;
+  border-radius: inherit;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -168,13 +183,13 @@
   padding: 20px;
   text-align: center;
 }
-.ev-chart__error-icon[data-v-a07b68e8] {
+.ev-chart__error-icon[data-v-ce034a2a] {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
 }
-.ev-chart__error-text[data-v-a07b68e8] {
+.ev-chart__error-text[data-v-ce034a2a] {
   font-size: 12px;
   line-height: 1.5;
   max-width: 80%;
@@ -182,17 +197,17 @@
 }
 
 /* ══════ 进入/离开淡入淡出 ══════ */
-.ev-chart-fade-enter-active[data-v-a07b68e8],
-.ev-chart-fade-leave-active[data-v-a07b68e8] {
+.ev-chart-fade-enter-active[data-v-ce034a2a],
+.ev-chart-fade-leave-active[data-v-ce034a2a] {
   transition: opacity 0.2s ease;
 }
-.ev-chart-fade-enter-from[data-v-a07b68e8],
-.ev-chart-fade-leave-to[data-v-a07b68e8] {
+.ev-chart-fade-enter-from[data-v-ce034a2a],
+.ev-chart-fade-leave-to[data-v-ce034a2a] {
   opacity: 0;
 }
 
 /* ══════ 无障碍：sr-only ══════ */
-.ev-chart__sr-only[data-v-a07b68e8] {
+.ev-chart__sr-only[data-v-ce034a2a] {
   position: absolute;
   width: 1px;
   height: 1px;