Prechádzať zdrojové kódy

✨ feat(home): 添加财务数据可视化大屏功能

- 在首页添加财务数据可视化大屏入口卡片
- 配置财务数据可视化大屏路由
- 实现点击卡片导航至财务数据可视化页面功能
yourname 2 mesiacov pred
rodič
commit
9ef48a33d0

+ 14 - 0
src/client/home/pages/HomePage.tsx

@@ -138,6 +138,20 @@ const HomePage: React.FC = () => {
             <h3 className="font-semibold text-lg mb-2">供应链可视化</h3>
             <p className="text-gray-600 text-sm">粮食油脂供应链大屏展示,实时监控产业链运行状态</p>
           </div>
+
+          {/* 财务数据可视化大屏 */}
+          <div
+            className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow cursor-pointer"
+            onClick={() => navigate('/financial-dashboard')}
+          >
+            <div className="w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+            </div>
+            <h3 className="font-semibold text-lg mb-2">财务数据可视化</h3>
+            <p className="text-gray-600 text-sm">财务指标大屏展示,直观查看资产、利润、收入等关键数据</p>
+          </div>
         </div>
 
         {/* 技术架构 */}

+ 5 - 0
src/client/home/routes.tsx

@@ -8,6 +8,7 @@ import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import MemberPage from './pages/MemberPage';
 import GrainOilDashboard from './pages/SupplyChainDashboards/GrainOilDashboard';
+import { FinancialDashboard } from './pages/FinancialDashboard/FinancialDashboard';
 
 export const router = createBrowserRouter([
   {
@@ -26,6 +27,10 @@ export const router = createBrowserRouter([
     path: '/supply-chain/grain-oil',
     element: <GrainOilDashboard />
   },
+  {
+    path: '/financial-dashboard',
+    element: <FinancialDashboard />
+  },
   {
     path: '/member',
     element: (