美化ui

Author: CzNd

frontend/src/components/Common/Sidebar.tsx

@@ -82,7 +82,7 @@ const Sidebar = () => {
         position="sticky"
         bg="bg.subtle"
         top={0}
-        minW="xs"
+        minW="60"
         h="100vh"
         p={4}
       >

frontend/src/components/Common/SidebarItems.tsx

@@ -1,8 +1,9 @@
 import { Box, Flex, Icon, Text } from "@chakra-ui/react"
 import { useQueryClient } from "@tanstack/react-query"
-import { Link as RouterLink } from "@tanstack/react-router"
-import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
+import { Link as RouterLink, useRouter } from "@tanstack/react-router"
+import { FiBriefcase, FiHome, FiSettings, FiUsers, FiChevronDown, FiChevronRight } from "react-icons/fi"
 import type { IconType } from "react-icons/lib"
+import React, { useState } from "react"
 
 import type { UserPublic } from "@/client"
 
@@ -25,31 +26,89 @@ interface Item {
   path: string
 }
 
+const trafficAnalysisSubItems = [
+  { title: "上客点密度分析", tab: "pickup-density" },
+  { title: "车辆轨迹可视化", tab: "vehicle-trajectory" },
+  { title: "统计数据", tab: "statistics" },
+]
+
 const SidebarItems = ({ onClose }: SidebarItemsProps) => {
   const queryClient = useQueryClient()
   const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
+  const router = useRouter()
+  const currentPath = router.state.location.pathname
+  const currentTab = router.state.location.search?.tab
+  const [expandedMenu, setExpandedMenu] = useState<string | null>(null)
 
   const finalItems: Item[] = currentUser?.is_superuser
     ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
     : items
 
-  const listItems = finalItems.map(({ icon, title, path }) => (
-    <RouterLink key={title} to={path} onClick={onClose}>
-      <Flex
-        gap={4}
-        px={4}
-        py={2}
-        _hover={{
-          background: "gray.subtle",
-        }}
-        alignItems="center"
-        fontSize="sm"
-      >
-        <Icon as={icon} alignSelf="center" />
-        <Text ml={2}>{title}</Text>
-      </Flex>
-    </RouterLink>
-  ))
+  const handleExpand = (title: string) => {
+    setExpandedMenu(prev => (prev === title ? null : title))
+  }
+
+  const listItems = finalItems.map(({ icon, title, path }) => {
+    if (title === "交通数据分析") {
+      return (
+        <Box key={title}>
+          <Flex
+            gap={4}
+            px={4}
+            py={2}
+            alignItems="center"
+            fontSize="sm"
+            cursor="pointer"
+            _hover={{ background: "gray.subtle" }}
+            onClick={() => handleExpand(title)}
+          >
+            <Icon as={icon} alignSelf="center" />
+            <Text ml={2} userSelect="none">{title}</Text>
+            <Icon as={expandedMenu === title ? FiChevronDown : FiChevronRight} ml="auto" />
+          </Flex>
+          {expandedMenu === title && (
+            <Box pl={12} mt={1}>
+              {trafficAnalysisSubItems.map((sub, idx) => (
+                <RouterLink
+                  key={sub.tab}
+                  to={`/traffic-analysis?tab=${sub.tab}`}
+                  onClick={onClose}
+                  style={{ display: "block" }}
+                >
+                  <Text
+                    py={1}
+                    mb={idx !== trafficAnalysisSubItems.length - 1 ? 2 : 0}
+                    color={currentTab === sub.tab ? "blue.500" : "gray.700"}
+                    fontWeight={currentTab === sub.tab ? "bold" : "normal"}
+                    fontSize="sm"
+                    _hover={{ color: "blue.600" }}
+                    userSelect="none"
+                  >
+                    {sub.title}
+                  </Text>
+                </RouterLink>
+              ))}
+            </Box>
+          )}
+        </Box>
+      )
+    }
+    return (
+      <RouterLink key={title} to={path} onClick={onClose}>
+        <Flex
+          gap={4}
+          px={4}
+          py={2}
+          _hover={{ background: "gray.subtle" }}
+          alignItems="center"
+          fontSize="sm"
+        >
+          <Icon as={icon} alignSelf="center" />
+          <Text ml={2}>{title}</Text>
+        </Flex>
+      </RouterLink>
+    )
+  })
 
   return (
     <>

frontend/src/components/Traffic_analysis/PassengerCountChart.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react"
 import ReactECharts from 'echarts-for-react'
-import { Text, Flex } from "@chakra-ui/react"
+import { Text, Flex, Input } from "@chakra-ui/react"
 import { Field } from '../ui/field'
-import { RadioGroup } from '../ui/radio'
+import { RadioGroup, Radio } from '../ui/radio'
+import { Button } from '../ui/button'
 
 function formatDate(date: Date) {
   const y = date.getFullYear()
@@ -57,21 +58,21 @@ export default function PassengerCountChart() {
     <>
       <Flex align="center" gap={4} mb={2}>
         <Field label="选择日期">
-          <input
+          <Input
             type="date"
             value={date}
             onChange={e => setDate(e.target.value)}
-            style={{ height: 32, borderRadius: 4, border: '1px solid #ccc', padding: '0 8px' }}
+            height={8}
+            borderRadius={4}
+            border="1px solid #ccc"
+            px={2}
+            w={40}
           />
         </Field>
         <Field label="时间间隔">
-          <RadioGroup value={interval}>
-            <label style={{marginRight: 12}}>
-              <input type="radio" value="15min" checked={interval === '15min'} onChange={() => setInterval('15min')} /> 15分钟
-            </label>
-            <label>
-              <input type="radio" value="1h" checked={interval === '1h'} onChange={() => setInterval('1h')} /> 1小时
-            </label>
+          <RadioGroup value={interval} onValueChange={e => setInterval(e.value as '15min' | '1h')} direction="row">
+            <Radio value="15min">15分钟</Radio>
+            <Radio value="1h">1小时</Radio>
           </RadioGroup>
         </Field>
       </Flex>