📝 docs(stories): update technical selection documentation

- 修改动画库选择为frame motion
- 更新图表实现方式为Recharts

✨ feat(dashboard): implement debt ratio chart with Recharts
- 重构资产负债率图表，使用Recharts替代自定义3D柱状图组件
- 添加三个数据系列：资产负债率(绿色)、分隔线(白色)和剩余部分(蓝色)
- 配置堆叠柱状图(stackId)实现分层显示效果
- 添加坐标轴范围限制(domain)确保图表显示完整
- 优化tooltip显示，仅展示资产负债率数据并添加标签说明

docs/stories/006.002.实现财务数据可视化大屏静态页面.md

@@ -104,8 +104,8 @@ In Progress
 - **样式**: Tailwind CSS 4.1.11
 - **状态管理**: React状态管理本地UI状态
 - **UI组件库**: shadcn/ui (基于Radix UI)
-- **动画库**: 暂不使用，先实现静态页面
-- **图表实现**: **自定义React组件** (基于Figma设计，不使用Recharts)
+- **动画库**: frame motion
+- **图表实现**: Recharts
 
 ### 静态数据定义
 基于Figma设计中的示例数据，定义以下静态数据：

src/client/home/pages/FinancialDashboard/components/DebtRatioMetrics.tsx

@@ -15,47 +15,14 @@ const debtRatioData = [
   { year: '2025年', ratio: 49.82 }
 ];
 
-// Recharts格式的数据
+// Recharts格式的数据 - 包含三个数据系列
 const chartData = debtRatioData.map(item => ({
   year: item.year,
-  '资产负债率': item.ratio
+  '资产负债率': item.ratio, // 绿色柱子，实际负债率
+  '分隔线': 2, // 白色分隔线，固定高度2%
+  '剩余部分': 98 - item.ratio // 蓝色柱子，剩余部分（减去分隔线高度）
 }));
 
-// 自定义 3D 柱状图组件 - 资产负债率
-const DebtRatioBar = (props: any) => {
-  const { x, y, width, height } = props;
-
-  // 将Recharts的坐标系转换为SVG的坐标系
-  const svgWidth = 96;
-  const svgHeight = 240;
-  const scaleX = width / svgWidth;
-  const scaleY = height / svgHeight;
-
-  return (
-    <g transform={`translate(${x},${y}) scale(${scaleX},${scaleY})`}>
-      <rect width="90" height="240" transform="translate(3)" fill="#297AD8"/>
-      <rect width="90" height="175" transform="translate(3 65)" fill="#46BDBD"/>
-      <rect x="3.25" y="65.25" width="89.5" height="1.5" stroke="white" strokeWidth="0.5"/>
-      <g filter="url(#filter0_d_1977_59052)">
-        <rect x="3" y="65" width="90" height="2" fill="white"/>
-        <rect x="2.5" y="64.5" width="91" height="3" stroke="white"/>
-      </g>
-      <defs>
-        <filter id="filter0_d_1977_59052" x="0" y="62" width="96" height="8" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
-          <feFlood floodOpacity="0" result="BackgroundImageFix"/>
-          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-          <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_1977_59052"/>
-          <feOffset/>
-          <feGaussianBlur stdDeviation="0.5"/>
-          <feComposite in2="hardAlpha" operator="out"/>
-          <feColorMatrix type="matrix" values="0 0 0 0 0.116736 0 0 0 0 0.144867 0 0 0 0 0.170833 0 0 0 0.2 0"/>
-          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1977_59052"/>
-          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1977_59052" result="shape"/>
-        </filter>
-      </defs>
-    </g>
-  );
-};
 
 export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
   return (
@@ -110,6 +77,7 @@ export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
                   axisLine={false}
                   tickLine={false}
                   tick={{ fill: 'rgba(255,255,255,0.8)', fontSize: 12 }}
+                  domain={[0, 100]}
                 />
                 <Tooltip
                   contentStyle={{
@@ -117,12 +85,31 @@ export function DebtRatioMetrics({ className }: DebtRatioMetricsProps) {
                     border: '1px solid rgba(255,255,255,0.2)',
                     color: 'white'
                   }}
-                  formatter={(value) => [`${value} %`, '']}
+                  formatter={(value, name) => {
+                    // 只显示资产负债率的tooltip，不显示剩余部分和分隔线
+                    if (name === '资产负债率') {
+                      return [`${value} %`, '资产负债率'];
+                    }
+                    return null;
+                  }}
                 />
                 <Bar
                   dataKey="资产负债率"
-                  shape={<DebtRatioBar />}
+                  fill="#46BDBD"
+                  barSize={60}
+                  stackId="debtRatio"
+                />
+                <Bar
+                  dataKey="分隔线"
+                  fill="white"
+                  barSize={60}
+                  stackId="debtRatio"
+                />
+                <Bar
+                  dataKey="剩余部分"
+                  fill="#297AD8"
                   barSize={60}
+                  stackId="debtRatio"
                 />
               </BarChart>
             </ResponsiveContainer>