Feat/aurora theme 0302

packages/vchart-arco-theme/package.json

@@ -77,8 +77,8 @@
     "react-router-dom": "^5.2.0",
     "react-device-detect": "^2.2.2",
     "redux": "^4.1.2",
-    "@visactor/vchart": "1.12.1",
-    "@visactor/react-vchart": "1.12.1",
+    "@visactor/vchart": "2.0.19",
+    "@visactor/react-vchart": "2.0.19",
     "@arco-design/webpack-plugin": "^1.6.0",
     "@arco-plugins/vite-plugin-svgr": "^0.7.2",
     "@svgr/webpack": "^5.5.0",

packages/vchart-aurora-theme/.trae/AI_DEVELOPMENT_GUIDE.md

@@ -0,0 +1,52 @@
+# VChart Aurora Theme 开发指南 (AI Development Guide)
+
+本文档旨在为 AI 助手提供一套标准的开发、修改与验证流程，确保 VChart 主题包开发的规范性和高效性。
+
+## 1. 项目环境 (Environment)
+
+- **项目根目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme`
+- **Demo 目录**: `/Users/bytedance/rep/vchart-theme/packages/vchart-aurora-theme/demo`
+- **启动项目**: 在 `packages/vchart-aurora-theme` 目录下执行 `npm run start`。
+- **运行状态**: 开发服务器启动后 (Vite)，请根据终端输出的 Local 地址访问 Demo 页面（通常为 `http://localhost:5173/` 或 `http://localhost:5174/` 等）。
+
+## 2. 核心文件映射 (File Mapping)
+
+在执行修改任务时，请根据需求类型定位到以下核心文件：
+
+| 模块 (Module) | 文件路径 (Path)                                            | 关键内容 (Content)                                                                                                                                                                                                                           |
+| :------------ | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **全局色板**  | [`src/common/color-scheme.ts`](src/common/color-scheme.ts) | `colorList` (数据色板), `palette` (背景色/字体色/轴线色)                                                                                                                                                                                     |
+| **设计变量**  | [`src/common/token.ts`](src/common/token.ts)               | `fontFamily`, `fontSize`, `borderRadius`, `padding` 等基础 Token                                                                                                                                                                             |
+| **组件样式**  | `src/common/component/*.ts`                                | - [`axis.ts`](src/common/component/axis.ts): 坐标轴<br>- [`legend.ts`](src/common/component/legend.ts): 图例<br>- [`tooltip.ts`](src/common/component/tooltip.ts): 提示框<br>- [`crosshair.ts`](src/common/component/crosshair.ts): 十字准星 |
+| **图表系列**  | `src/common/series/*.ts`                                   | - [`bar.ts`](src/common/series/bar.ts): 柱状图<br>- [`line.ts`](src/common/series/line.ts): 折线图<br>- [`pie.ts`](src/common/series/pie.ts): 饼图<br>- 其他: `area.ts`, `scatter.ts`, `radar.ts` 等                                         |
+| **测试用例**  | [`demo/src/chartSpec.ts`](demo/src/chartSpec.ts)           | 包含 `barSpec`, `lineSpec`, `pieSpec` 等测试配置，用于 Demo 展示                                                                                                                                                                             |
+
+## 3. 开发流程 (Workflow)
+
+### Step 1: 需求分析
+
+阅读 `TASKS.md` 或用户指令，明确修改点（例如：“修改背景色”或“调整坐标轴字号”）。
+
+### Step 2: 代码修改
+
+1. **定位**: 根据映射表找到对应源码文件。
+2. **修改**: 保持代码风格一致，进行最小必要修改。
+   - _Tip_: 修改 `color-scheme.ts` 影响全局颜色。
+   - _Tip_: 修改 `token.ts` 影响全局尺寸/字体。
+   - _Tip_: 修改 `component/series` 文件进行特定组件/图表的精细调整。
+
+### Step 3: 验证闭环
+
+1.  **检查 Demo**: 修改保存后，Vite 会热更新。
+2.  **更新用例 (可选)**: 如果现有 Demo 图表无法展示修改效果（例如缺少特定类型的图表），请在 `demo/src/chartSpec.ts` 中添加新的 Spec。 并在 `demo/src/chart-list.ts` 中注册。
+3.  **确认**: 启动项目并通过内置浏览器访问 Demo 页面（URL 见启动日志）查看效果，确认是否符合需求。
+
+## 4. 辅助工具 (Tools)
+
+- **VChart 专家助手**: 遇到 VChart 配置问题、需要创建复杂 Demo 或诊断图表问题时，可以使用 `vchart-development-assistant` skill 获取帮助。
+
+## 5. 注意事项
+
+- **只修改必要文件**: 避免改动构建配置或无关逻辑。
+- **保持类型安全**: 确保 TypeScript 类型检查通过。
+- **实时反馈**: 修改完成后，简要描述改动点并提示用户查看 Demo。

packages/vchart-aurora-theme/.trae/TASKS.md

@@ -0,0 +1,72 @@
+# 任务列表 (Tasks)
+
+请在此文档中添加开发需求。AI 将会读取此文档，按顺序执行任务并更新状态。
+
+## 📝 提需示例 (Request Examples)
+
+如果你需要提出新需求，请复制以下格式添加到 **[待办任务]** 区域：
+
+### 示例 1：修改样式
+
+```markdown
+- [ ] **Task: 调整柱状图默认宽度**
+  - **描述**: 将柱状图（Bar Chart）的默认 `barMaxWidth` 设置为 20px。
+  - **文件**: `src/common/series/bar.ts`
+  - **验证**: 检查 Demo 中的柱状图是否变宽/变窄。
+```
+
+### 示例 2：新增图表配置
+
+```markdown
+- [ ] **Task: 添加漏斗图测试用例**
+  - **描述**: 在 Demo 中新增一个漏斗图（Funnel Chart）的 Spec，用于测试漏斗图主题样式。
+  - **文件**: `demo/src/chartSpec.ts`
+  - **验证**: Demo 页面出现漏斗图。
+```
+
+---
+
+## 🚀 待办任务 (Pending Tasks)
+
+<!-- 请在下方添加你的新任务 -->
+
+## 🔄 进行中 (In Progress)
+
+<!-- AI 正在执行的任务 -->
+
+---
+
+## ✅ 已完成 (Completed)
+
+<!-- 已完成的任务历史 -->
+
+- [x] **Task: 修复 Line/Area 图例和 Tooltip 颜色渐变问题**
+  - **描述**: 在 Line 和 Area 图表中，由于 Series 样式使用了渐变色，导致 Legends 和 Tooltip 的图形也呈现渐变。需修改主题配置，使其显示为纯色。
+  - **文件**: `src/common/series/line.ts`, `src/common/series/area.ts`
+  - **优先级**: 高
+
+- [x] **Task: 新增柱状图双Y轴Demo**
+  - **描述**: 新增一个柱状图的demo，包含两个y轴，左边单位金额，右边单位百分比，比如退款金额、退款率。spec参考benchmarkSpec。
+  - **文件**: `demo/src/chartSpec.ts`, `demo/src/chart-list.ts`
+  - **验证**: Demo 页面出现双Y轴柱状图。
+
+- [x] **Task: legend取消选中时，shape有border**
+  - **描述**: legend取消选中时，shape有border，填充色变为白色，边框颜色保持原色。
+  - **文件**: `src/common/component/legend.ts`
+  - **优先级**: 中
+
+- [x] **Task: 禁用迷你面积图 Hover 效果 (Demo Only)**
+
+  - **描述**: 修改 Demo 配置，禁用迷你面积图 (`areaSimpleSpec`) 的 Hover 交互。注意：只改 Demo，不改主题。
+  - **文件**: `demo/src/chartSpec.ts`
+  - **优先级**: 中
+
+- [x] **Task: 基础折线图增加背景色和圆角 (Demo Only)**
+
+  - **描述**: 修改 Demo 配置，为基础折线图 (`lineSpec`) 添加渐变背景 `linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 97.6%)` 和圆角 `12px`, 只包含图表区域，不包含 xy 轴。注意：只改 Demo，不改主题。
+  - **文件**: `demo/src/chartSpec.ts`
+  - **优先级**: 中
+
+- [x] **Task: tooltip 的每项的图形形状改成圆形**
+  - **描述**: tooltip 的每项的图形形状改成圆形，和 legends 的形状保持一致。在面积图 demo 中完成验证
+  - **优先级**: 高

packages/vchart-aurora-theme/demo/src/chart-list.ts

@@ -1,56 +1,159 @@
 import type { IChartInfo } from '@internal/chart-demo';
 import {
+  barSpec,
   areaSpec,
+  areaSimpleSpec,
+  multiAreaSpec,
   barGroupHorizontalSpec,
   barGroupSpec,
-  barStackedHorizontalSpec,
-  barStackedPercentSpec,
+  benchmarkSpec,
+  dualAxisBarSpec,
   barStackedSpec,
   funnelSpec,
   lineSpec,
   pieSpec,
+  nestPieSpec,
+  metricPieSpec,
   radarSpec
 } from './chartSpec';
 
-export const charts: IChartInfo[] = [
+export interface IChartCategory {
+  key: string;
+  title: string;
+  charts: IChartInfo[];
+}
+
+// 柱状图系列
+export const barCharts: IChartInfo[] = [
+  {
+    title: '基础柱状图',
+    spec: barSpec
+  },
   {
-    title: 'Grouped Bar Chart',
+    title: '基础柱状图',
     spec: barGroupSpec
   },
   {
-    title: 'Stacked Bar Chart',
+    title: '堆叠柱状图&Hover总量',
     spec: barStackedSpec
   },
   {
-    title: 'Horizontal Grouped Bar Chart',
-    spec: barGroupHorizontalSpec
+    title: '带同行标杆柱状图',
+    spec: benchmarkSpec
   },
   {
-    title: 'Horizontal Stacked Bar Chart',
-    spec: barStackedHorizontalSpec
+    title: '双轴图（金额/比率）',
+    spec: dualAxisBarSpec
   },
   {
-    title: 'Stacked Percentage Bar Chart',
-    spec: barStackedPercentSpec
-  },
+    title: '水平分组柱状图',
+    spec: barGroupHorizontalSpec
+  }
+];
+
+// 折线图系列
+export const lineCharts: IChartInfo[] = [
   {
-    title: 'Line Chart',
+    title: '基础折线图',
     spec: lineSpec
-  },
+  }
+];
+
+// 面积图系列
+export const areaCharts: IChartInfo[] = [
   {
-    title: 'Area Chart',
+    title: '基础面积图',
     spec: areaSpec
   },
   {
-    title: 'Pie Chart',
+    title: '迷你面积图',
+    spec: areaSimpleSpec
+  },
+  {
+    title: '多项面积图',
+    spec: multiAreaSpec
+  }
+];
+
+// 饼图系列
+export const pieCharts: IChartInfo[] = [
+  {
+    title: '基础饼图',
     spec: pieSpec
   },
   {
-    title: 'Radar Chart',
-    spec: radarSpec
+    title: '定制标签的饼图',
+    spec: nestPieSpec
   },
   {
-    title: 'Funnel Chart',
+    title: '中心指标饼图',
+    spec: metricPieSpec
+  }
+];
+
+// 雷达图系列
+export const radarCharts: IChartInfo[] = [
+  {
+    title: '基础雷达图',
+    spec: radarSpec
+  }
+];
+
+// 漏斗图系列
+export const funnelCharts: IChartInfo[] = [
+  {
+    title: '基础漏斗图',
     spec: funnelSpec
   }
 ];
+
+// 所有图表分类
+export const chartCategories: IChartCategory[] = [
+  {
+    key: 'pie',
+    title: '饼图',
+    charts: pieCharts
+  },
+  {
+    key: 'bar',
+    title: '柱状图',
+    charts: barCharts
+  },
+  {
+    key: 'line',
+    title: '折线图',
+    charts: lineCharts
+  },
+  {
+    key: 'area',
+    title: '面积图',
+    charts: areaCharts
+  }
+
+  // {
+  //   key: 'radar',
+  //   title: '雷达图',
+  //   charts: radarCharts
+  // },
+  // {
+  //   key: 'funnel',
+  //   title: '漏斗图',
+  //   charts: funnelCharts
+  // }
+];
+
+// 所有图表（向后兼容）
+export const charts: IChartInfo[] = [
+  ...barCharts,
+  ...lineCharts,
+  ...areaCharts,
+  ...pieCharts,
+  ...radarCharts,
+  ...funnelCharts
+];
+
+// 根据分类 key 获取图表列表
+export function getChartsByCategory(key: string): IChartInfo[] {
+  const category = chartCategories.find(c => c.key === key);
+  return category ? category.charts : charts;
+}