chore: update

src/components/layout/AppHeader.tsx

@@ -7,7 +7,6 @@ import { logout } from '@/api/base'
 
 export default function AppHeader({ title = 'AI数据分析实验室' }) {
   const location = useLocation()
-  const defaultSelectedKeys = [location.pathname]
 
   const user = useUserStore((state) => state.info)
   const name = user?.name || user?.username
@@ -25,6 +24,13 @@ export default function AppHeader({ title = 'AI数据分析实验室' }) {
     }
   })
 
+  const matchedKey =
+    items.find((item) => location.pathname === item.key)?.key ||
+    items
+      .filter((item) => location.pathname.startsWith(item.key)) // 过滤所有前缀匹配的项
+      .sort((a, b) => b.key.length - a.key.length)[0]?.key || // 按 key 长度排序，取最长的匹配项
+    '/'
+
   const handleLogout = async () => {
     await logout()
     window.location.href = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(window.location.origin)}`
@@ -44,7 +50,7 @@ export default function AppHeader({ title = 'AI数据分析实验室' }) {
         </h1>
       </div>
       <div className="app-header-nav">
-        <Menu mode="horizontal" items={items} defaultSelectedKeys={defaultSelectedKeys} />
+        <Menu mode="horizontal" items={items} defaultSelectedKeys={[matchedKey]} />
       </div>
       <div className="app-header-right">
         <Popover

src/modules/data/dashboard/styles.scss

+.banner {
+  padding: 30px 40px 50px;
+  h2 {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+  p {
+    margin-top: 20px;
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+.carousel-banner {
+  .slick-dots {
+    li {
+      button {
+        &::after {
+          background-color: #bbb !important;
+        }
+      }
+      &.slick-active {
+        &::after {
+          background: var(--main-color) !important;
+        }
+      }
+    }
+  }
+}
+.card-item {
+  display: flex;
+  &__left {
+    flex: 1;
+    h3 {
+      font-size: 20px;
+    }
+    p {
+      font-size: 16px;
+      margin-top: 10px;
+    }
+  }
+  &__right {
+    font-size: 20px;
+    color: var(--main-color);
+  }
+}

src/modules/data/dashboard/views/Index.tsx

-import { Card, Button, Row, Col } from 'antd'
-
+import { Card, Button, Row, Col, Carousel } from 'antd'
 import { Link } from 'react-router'
+import { Database, SearchCheck, Filter, Bolt, Cone, ChartArea, Wallpaper } from 'lucide-react'
+import '../styles.scss'
+
 type CardItem = {
+  icon: React.ReactNode
   title: string
   description: string
   path: string
@@ -10,36 +13,43 @@ type CardItem = {
 export default function DataDashboard() {
   const items: CardItem[] = [
     {
+      icon: <Database size={40} />,
       title: '数据采集',
       description: '多源数据采集与结构化导入',
       path: '/data/write',
     },
     {
+      icon: <SearchCheck size={40} />,
       title: '数据理解与探索',
       description: '动态化数据理解与深度模式探索',
       path: '/data/read',
     },
     {
+      icon: <Filter size={40} />,
       title: '数据预处理',
       description: '智能化数据预处理范式',
       path: '/data/preprocess',
     },
     {
+      icon: <Bolt size={40} />,
       title: '数据加工',
       description: '‌多模态数据加工架构',
       path: '/data/process',
     },
     {
+      icon: <Cone size={40} />,
       title: '数据挖掘',
       description: '智能数据解析与知识图谱构建‌‌',
       path: '/data/digging',
     },
     {
+      icon: <ChartArea size={40} />,
       title: '可视化组件',
       description: '‌智能可视化组件',
       path: '/data/chart',
     },
     {
+      icon: <Wallpaper size={40} />,
       title: '可视化大屏',
       description: '‌智能可视化大屏',
       path: '/data/screen',
@@ -48,18 +58,40 @@ export default function DataDashboard() {
 
   const CardCardItem = (item: CardItem) => {
     return (
-      <Card title={item.title}>
-        <p>{item.description}</p>
-        <br />
-        <Link to={item.path}>
-          <Button shape="round">点击进入</Button>
-        </Link>
+      <Card>
+        <div className="card-item">
+          <div className="card-item__left">
+            <h3>{item.title}</h3>
+            <p>{item.description}</p>
+            <br />
+            <Link to={item.path}>
+              <Button shape="round">点击进入</Button>
+            </Link>
+          </div>
+          <div className="card-item__right">{item.icon}</div>
+        </div>
       </Card>
     )
   }
 
   return (
     <div style={{ margin: '0 80px' }}>
+      <Card style={{ marginBottom: 40 }}>
+        <Carousel className="carousel-banner">
+          <div className="banner">
+            <h2>AI驱动的数据分析实验室</h2>
+            <p>
+              以AI技术为核心驱动力，深度挖掘数据价值，为各领域提供精准、高效的数据分析解决方案，助力决策智能化与业务创新。
+            </p>
+          </div>
+          <div className="banner">
+            <h2>AI驱动的数据分析实验室</h2>
+            <p>
+              以AI技术为核心驱动力，深度挖掘数据价值，为各领域提供精准、高效的数据分析解决方案，助力决策智能化与业务创新。
+            </p>
+          </div>
+        </Carousel>
+      </Card>
       <Row gutter={[40, 40]}>
         {items.map((item) => (
           <Col span={6} key={item.path}>

src/modules/home/styles.scss

+.home {
+  position: relative;
+  margin: 100px auto;
+  background: url(/images/home_bg.png) no-repeat center center;
+  background-size: contain;
+  width: 1215px;
+  height: 577px;
+  .link1 {
+    position: absolute;
+    top: 160px;
+    width: 250px;
+    height: 250px;
+  }
+  .link2 {
+    position: absolute;
+    left: 400px;
+    bottom: 0;
+    width: 300px;
+    height: 250px;
+  }
+  .link3 {
+    position: absolute;
+    top: 200px;
+    right: 0;
+    width: 300px;
+    height: 300px;
+  }
+}

src/modules/home/views/Index.tsx

+import '../styles.scss'
+import { NavLink } from 'react-router'
+
 function Home() {
   return (
-    <div>
-      <h1>Home</h1>
+    <div className="home">
+      <NavLink to="/data" className="link1"></NavLink>
     </div>
   )
 }