fix: 修复 TypeScript 和 ESLint 错误

- 移除 CommandPalette.tsx 中未使用的导入
- 修复 Command.action 类型以支持 route() 返回的 boolean
- 添加 useCurrentPath hook 替代不存在的 useLocation
- 修复 PieChartWidget 的 ChartDataItem 类型兼容性
- 移除 dashboard.ts 中未使用的 computed 导入

Author: h7ml

.env.example

@@ -9,7 +9,7 @@ VITE_API_URL=/api
 VITE_MOCK=true
 
 # 演示账号
-VITE_DEMO_EMAIL=admin@example.com
+VITE_DEMO_EMAIL=admin@halolight.h7ml.cn
 VITE_DEMO_PASSWORD=123456
 VITE_SHOW_DEMO_HINT=true
 

package.json

@@ -28,11 +28,13 @@
   },
   "dependencies": {
     "@preact/signals": "^2.0.0",
+    "@types/recharts": "^2.0.1",
     "clsx": "^2.1.1",
     "lucide-preact": "^0.474.0",
     "mockjs": "^1.1.0",
     "preact": "^10.27.2",
     "preact-router": "^4.1.2",
+    "recharts": "^3.5.1",
     "tailwind-merge": "^3.0.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,4 +1,3 @@
-import { h } from 'preact'
 import { useState, useEffect, useCallback } from 'preact/hooks'
 import { route } from 'preact-router'
 import {
@@ -17,8 +16,7 @@ import {
   LogOut,
   UserCheck
 } from 'lucide-preact'
-import { user as userSignal, accounts, activeAccountId, switchAccount, logout } from '../../stores/auth'
-import { Button } from '../ui/Button'
+import { accounts, activeAccountId, switchAccount, logout } from '../../stores/auth'
 
 interface CommandPaletteProps {
   open: boolean
@@ -29,7 +27,7 @@ interface Command {
   id: string
   label: string
   icon: any
-  action: () => void | Promise<void>
+  action: () => void | boolean | Promise<void>
   keywords?: string[]
   category: string
 }
@@ -296,7 +294,7 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
                   <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
                     {category}
                   </div>
-                  {commands.map((cmd, idx) => {
+                  {commands.map((cmd) => {
                     const globalIndex = filteredCommands.indexOf(cmd)
                     const isSelected = globalIndex === selectedIndex
                     const Icon = cmd.icon

src/components/common/CommandPalette.tsx

@@ -1,7 +1,5 @@
-import { h } from 'preact'
 import { useEffect, useRef, useState, useCallback } from 'preact/hooks'
-import { route } from 'preact-router'
-import { useLocation } from 'preact-iso'
+import { route, getCurrentUrl } from 'preact-router'
 import { ChevronLeft, ChevronRight, X, Home, Users, Settings, FileText } from 'lucide-preact'
 import {
   tabs,
@@ -18,6 +16,21 @@ import {
 } from '../../stores/tabs'
 import { Button } from '../ui/Button'
 
+// 自定义 hook 获取当前路径
+function useCurrentPath() {
+  const [path, setPath] = useState(getCurrentUrl())
+
+  useEffect(() => {
+    const handleRoute = () => {
+      setPath(getCurrentUrl())
+    }
+    window.addEventListener('popstate', handleRoute)
+    return () => window.removeEventListener('popstate', handleRoute)
+  }, [])
+
+  return path
+}
+
 // 路径到标题的映射
 const pathTitles: Record<string, string> = {
   '/': '首页',
@@ -64,7 +77,7 @@ interface ContextMenuState {
 }
 
 export function TabBar() {
-  const location = useLocation()
+  const currentPath = useCurrentPath()
   const tabsContainerRef = useRef<HTMLDivElement>(null)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
@@ -75,8 +88,6 @@ export function TabBar() {
     tab: null,
   })
 
-  const currentPath = location.path
-
   // 检查滚动状态
   const checkScroll = useCallback(() => {
     const container = tabsContainerRef.current

src/components/common/TabBar.tsx

@@ -1,4 +1,3 @@
-import { h } from 'preact'
 import { useMemo } from 'preact/hooks'
 import {
   BarChart,
@@ -12,6 +11,12 @@ import {
 } from 'recharts'
 import { useDashboardData } from '../../../stores/dashboard'
 
+interface SalesDataItem {
+  month: string
+  sales: number
+  orders: number
+}
+
 interface BarChartWidgetProps {
   isMobile?: boolean
 }
@@ -22,10 +27,10 @@ export function BarChartWidget({ isMobile }: BarChartWidgetProps) {
   const chartData = useMemo(() => {
     if (!salesData.value || salesData.value.length === 0) return []
 
-    return salesData.value.map((item) => ({
-      month: item.month.slice(5), // 只显示月份 MM
-      销售���: item.sales,
-      订单数: item.orders * 100 // 缩放以便在同一图表中显示
+    return salesData.value.map((item: SalesDataItem) => ({
+      month: item.month.slice(5),
+      sales: item.sales,
+      orders: item.orders * 100
     }))
   }, [salesData.value])
 
@@ -34,7 +39,7 @@ export function BarChartWidget({ isMobile }: BarChartWidgetProps) {
   if (isLoading.value) {
     return (
       <div class="flex items-center justify-center h-full">
-        <div class="text-sm text-muted-foreground">加载中...</div>
+        <div class="text-sm text-muted-foreground">Loading...</div>
       </div>
     )
   }
@@ -66,12 +71,14 @@ export function BarChartWidget({ isMobile }: BarChartWidgetProps) {
             iconSize={12}
           />
           <Bar
-            dataKey="销售额"
+            dataKey="sales"
+            name="Sales"
             fill="hsl(var(--chart-1))"
             radius={[4, 4, 0, 0]}
           />
           <Bar
-            dataKey="订单数"
+            dataKey="orders"
+            name="Orders"
             fill="hsl(var(--chart-2))"
             radius={[4, 4, 0, 0]}
           />

src/components/dashboard/widgets/BarChartWidget.tsx

@@ -1,4 +1,3 @@
-import { h } from 'preact'
 import { useMemo } from 'preact/hooks'
 
 interface CalendarWidgetProps {

src/components/dashboard/widgets/CalendarWidget.tsx

@@ -1,15 +1,18 @@
-import { h } from 'preact'
 import { useMemo } from 'preact/hooks'
 import {
   PieChart,
   Pie,
   Cell,
   Tooltip,
-  ResponsiveContainer,
-  Legend
+  ResponsiveContainer
 } from 'recharts'
 import { useDashboardData } from '../../../stores/dashboard'
 
+interface TrafficSource {
+  name: string
+  value: number
+}
+
 interface PieChartWidgetProps {
   isMobile?: boolean
 }
@@ -22,12 +25,19 @@ const COLORS = [
   'hsl(var(--chart-5))'
 ]
 
+interface ChartDataItem {
+  name: string
+  value: number
+  fill: string
+  [key: string]: string | number
+}
+
 export function PieChartWidget({ isMobile }: PieChartWidgetProps) {
   const { trafficSources, isLoading } = useDashboardData()
 
-  const chartData = useMemo(() => {
+  const chartData: ChartDataItem[] = useMemo(() => {
     if (!trafficSources.value || trafficSources.value.length === 0) return []
-    return trafficSources.value.map((item, index) => ({
+    return trafficSources.value.map((item: TrafficSource, index: number) => ({
       name: item.name,
       value: item.value,
       fill: COLORS[index % COLORS.length]
@@ -58,7 +68,7 @@ export function PieChartWidget({ isMobile }: PieChartWidgetProps) {
               paddingAngle={5}
               dataKey="value"
             >
-              {chartData.map((entry, index) => (
+              {chartData.map((entry: ChartDataItem, index: number) => (
                 <Cell key={`cell-${index}`} fill={entry.fill} />
               ))}
             </Pie>
@@ -74,7 +84,7 @@ export function PieChartWidget({ isMobile }: PieChartWidgetProps) {
         </ResponsiveContainer>
       </div>
       <div class="flex flex-wrap justify-center gap-3">
-        {chartData.map((item, index) => (
+        {chartData.map((item: ChartDataItem, index: number) => (
           <div key={index} class="flex items-center gap-2">
             <span
               class="h-2.5 w-2.5 rounded-full"

src/components/dashboard/widgets/PieChartWidget.tsx

@@ -1,6 +1,4 @@
-import { h } from 'preact'
 import { useMemo } from 'preact/hooks'
-import { useDashboardData } from '../../../stores/dashboard'
 
 interface TasksWidgetProps {
   isMobile?: boolean

src/components/dashboard/widgets/TasksWidget.tsx

@@ -1,6 +1,11 @@
 import { signal } from '@preact/signals'
 import { useEffect, useCallback } from 'preact/hooks'
-import { useLocation } from 'preact-iso'
+import { getCurrentUrl } from 'preact-router'
+
+// 获取当前路径
+function useCurrentPath() {
+  return getCurrentUrl()
+}
 
 // 页面状态缓存
 interface PageState {
@@ -50,8 +55,7 @@ export function clearAllCache(): void {
  * Hook: 自动保存和恢复滚动位置
  */
 export function useScrollRestore() {
-  const location = useLocation()
-  const pathname = location.path
+  const pathname = useCurrentPath()
 
   useEffect(() => {
     let isRestoring = false
@@ -64,7 +68,7 @@ export function useScrollRestore() {
     }
 
     // 使用节流
-    let timeoutId: NodeJS.Timeout
+    let timeoutId: ReturnType<typeof setTimeout>
     const throttledScroll = () => {
       clearTimeout(timeoutId)
       timeoutId = setTimeout(handleScroll, 100)
@@ -100,8 +104,7 @@ export function useFormCache<T extends Record<string, unknown>>(
   formKey: string,
   initialValues: T
 ): [T, (values: T) => void, () => void] {
-  const location = useLocation()
-  const pathname = location.path
+  const pathname = useCurrentPath()
   const cacheKey = `${pathname}:${formKey}`
 
   // 从缓存获取初始值
@@ -145,8 +148,7 @@ export function useStateCache<T>(
   key: string,
   initialValue: T
 ): [T, (value: T) => void] {
-  const location = useLocation()
-  const pathname = location.path
+  const pathname = useCurrentPath()
   const cacheKey = `${pathname}:${key}`
 
   // 从缓存获取初始值