diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
new file mode 100644
index 0000000..82d2c0c
--- /dev/null
+++ b/DEVELOPMENT.md
@@ -0,0 +1,126 @@
+# 仪表盘环形图功能开发文档
+
+## 新增功能
+
+在仪表盘页面添加了一个环形图，展示不同产品类别的销售额占比。
+
+## 实现细节
+
+### 1. 依赖库
+
+项目使用了以下依赖库：
+- React 18.3.1
+- Recharts 2.12.7（用于创建图表）
+- Lucide React 0.441.0（用于图标）
+
+### 2. 新增代码
+
+修改了 `src/components/Dashboard.js` 文件，添加了以下内容：
+
+1. **导入必要的组件**：
+ - 从 Recharts 库中导入 `PieChart`, `Pie`, `Cell`, `Legend` 组件
+ - 从 lucide-react 库中导入 `RefreshCw` 图标
+
+2. **数据生成函数**：
+ - 添加了 `generateProductCategoryData()` 函数，生成产品类别数据
+ - 添加了 `generateRandomProductCategoryData()` 函数，生成随机的产品类别数据
+ - 数据包括：电子产品、服装、书籍、其他，占比总和为 100%
+
+3. **状态管理**：
+ - 使用 `useState` 钩子管理产品类别数据，实现数据的动态更新
+
+4. **事件处理函数**：
+ - 添加了 `handlePieClick()` 函数，处理环形图扇形的点击事件
+ - 添加了 `handleRefreshData()` 函数，处理刷新数据按钮的点击事件
+
+5. **颜色配置**：
+ - 添加了 `COLORS` 数组，为环形图提供不同颜色
+
+6. **环形图组件**：
+ - 在仪表盘布局中添加了环形图卡片
+ - 在卡片顶部添加了"刷新数据"按钮
+ - 使用 `PieChart` 和 `Pie` 组件创建环形图
+ - 设置了 `innerRadius` 属性创建环形效果
+ - 添加了图例和悬停提示
+ - 为环形图添加了点击事件处理
+
+### 3. 代码结构
+
+```jsx
+// 数据生成函数
+const generateProductCategoryData = () => {
+ return [
+ { name: '电子产品', value: 40 },
+ { name: '服装', value: 30 },
+ { name: '书籍', value: 20 },
+ { name: '其他', value: 10 },
+ ];
+};
+
+// 组件中使用
+const Dashboard = () => {
+ // ... 其他代码 ...
+ const productCategoryData = generateProductCategoryData();
+ const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
+
+ return (
+ // ... 其他代码 ...
+ {/* Product Category Chart */}
+
+
Product Category Distribution
+
+
+
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ >
+ {productCategoryData.map((entry, index) => (
+ |
+ ))}
+
+ `${value}%`} />
+
+
+
+
+
@@ -78,6 +120,44 @@ const Dashboard = () => {
+ {/* Product Category Chart */}
+
+
+
Product Category Distribution
+
+
+
+
+
+ `${name} ${(percent * 100).toFixed(0)}%`}
+ onClick={handlePieClick}
+ >
+ {productCategoryData.map((entry, index) => (
+ |
+ ))}
+
+ `${value}%`} />
+
+
+
+
+
Recent Transactions