feat(backend): Add cable graph service and data collectors

## Changelog

### New Features

#### Cable Graph Service
- Add cable_graph.py for finding shortest path between landing points
- Implement haversine distance calculation for great circle distances
- Support for dateline crossing (longitude normalization)
- NetworkX-based graph for optimal path finding

#### Data Collectors
- Add ArcGISCableCollector for fetching submarine cable data from ArcGIS GeoJSON API
- Add FAOLandingPointCollector for fetching landing point data from FAO CSV API

### Backend Changes

#### API Updates
- auth.py: Update authentication logic
- datasources.py: Add datasource endpoints and management
- visualization.py: Add visualization API endpoints
- config.py: Update configuration settings
- security.py: Improve security settings

#### Models & Schemas
- task.py: Update task model with new fields
- token.py: Update token schema

#### Services
- collectors/base.py: Improve base collector with better error handling
- collectors/__init__.py: Register new collectors
- scheduler.py: Update scheduler logic
- tasks/scheduler.py: Add task scheduling

### Frontend Changes
- AppLayout.tsx: Improve layout component
- index.css: Add global styles
- DataSources.tsx: Enhance data sources management page
- vite.config.ts: Add Vite configuration for earth module

frontend/src/components/AppLayout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { Layout, Menu, Typography, Button } from 'antd'
 import {
   DashboardOutlined,
@@ -7,6 +7,7 @@ import {
   SettingOutlined,
   BarChartOutlined,
   MenuUnfoldOutlined,
+  MenuFoldOutlined,
 } from '@ant-design/icons'
 import { Link, useLocation } from 'react-router-dom'
 import { useAuthStore } from '../../stores/auth'
@@ -21,6 +22,7 @@ interface AppLayoutProps {
 function AppLayout({ children }: AppLayoutProps) {
   const location = useLocation()
   const { user, logout } = useAuthStore()
+  const [collapsed, setCollapsed] = useState(false)
 
   const menuItems = [
     { key: '/', icon: <DashboardOutlined />, label: <Link to="/">仪表盘</Link> },
@@ -34,30 +36,18 @@ function AppLayout({ children }: AppLayoutProps) {
     <Layout className="dashboard-layout">
       <Sider 
         width={240} 
+        collapsedWidth={80}
         collapsible 
-        collapsed={false} 
-        onCollapse={(collapsed) => {
-          const sider = document.querySelector('.dashboard-sider') as HTMLElement
-          if (sider) {
-            sider.style.width = collapsed ? '80px' : '240px'
-            sider.style.minWidth = collapsed ? '80px' : '240px'
-            sider.style.maxWidth = collapsed ? '80px' : '240px'
-          }
-        }}
+        collapsed={collapsed} 
+        onCollapse={setCollapsed}
         className="dashboard-sider"
-        trigger={null}
-        breakpoint="lg"
-        onBreakpoint={(broken) => {
-          const sider = document.querySelector('.dashboard-sider') as HTMLElement
-          if (sider) {
-            sider.style.width = broken ? '80px' : '240px'
-            sider.style.minWidth = broken ? '80px' : '240px'
-            sider.style.maxWidth = broken ? '80px' : '240px'
-          }
-        }}
       >
         <div style={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <Text strong style={{ color: 'white', fontSize: 18 }}>智能星球</Text>
+          {collapsed ? (
+            <Text strong style={{ color: 'white', fontSize: 20 }}>🌏</Text>
+          ) : (
+            <Text strong style={{ color: 'white', fontSize: 18 }}>智能星球</Text>
+          )}
         </div>
         <Menu 
           theme="dark" 
@@ -70,17 +60,8 @@ function AppLayout({ children }: AppLayoutProps) {
         <Header className="dashboard-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px' }}>
           <Button 
             type="text" 
-            icon={<MenuUnfoldOutlined />} 
-            onClick={() => {
-              const sider = document.querySelector('.ant-layout-sider') as HTMLElement
-              if (sider) {
-                const currentWidth = sider.style.width || '240px'
-                const isCollapsed = currentWidth === '80px'
-                sider.style.width = isCollapsed ? '240px' : '80px'
-                sider.style.minWidth = isCollapsed ? '240px' : '80px'
-                sider.style.maxWidth = isCollapsed ? '240px' : '80px'
-              }
-            }}
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} 
+            onClick={() => setCollapsed(!collapsed)}
             style={{ fontSize: 16 }}
           />
           <Text strong>欢迎, {user?.username}</Text>