From 77416f635a96d60e5637c20c29f6c475db436edd Mon Sep 17 00:00:00 2001
From: tsuki <tsuki@keitsuki.top>
Date: Tue, 19 Aug 2025 22:49:28 +0800
Subject: [PATCH] remove log && increate motion

---
 app/admin/blogs/blog-table.tsx          | 28 +++----
 app/admin/categories/category-table.tsx | 26 +++----
 app/admin/common/control.tsx            |  2 +-
 app/admin/tags/tag-table.tsx            | 26 +++----
 app/blog/[slug]/page.tsx                |  2 +-
 app/map-context.tsx                     |  4 +-
 app/me/layout.tsx                       |  2 +-
 app/me/page.tsx                         |  6 +-
 app/tl.tsx                              | 11 ++-
 app/user-context.tsx                    |  2 +-
 components/map-component.tsx            | 26 +++----
 hooks/use-radartile.ts                  |  2 +-
 lib/timeline.ts                         | 98 ++++++++++++++-----------
 13 files changed, 129 insertions(+), 106 deletions(-)

diff --git a/app/admin/blogs/blog-table.tsx b/app/admin/blogs/blog-table.tsx
index 5e2bf22..a5b2af6 100644
--- a/app/admin/blogs/blog-table.tsx
+++ b/app/admin/blogs/blog-table.tsx
@@ -183,9 +183,9 @@ const columns: ColumnDef<z.infer<typeof blogSchema>>[] = [
                 published: { label: "已发布", variant: "default" },
                 archived: { label: "已归档", variant: "outline" },
             };
-            
+
             const statusInfo = statusMap[status] || { label: status, variant: "outline" };
-            
+
             return (
                 <div className="w-20">
                     <Badge variant={statusInfo.variant} className="text-xs">
@@ -349,7 +349,7 @@ const columns: ColumnDef<z.infer<typeof blogSchema>>[] = [
         cell: ({ row, table }) => {
             const updateBlogMutation = (table.options.meta as any)?.updateBlog
             const deleteBlogMutation = (table.options.meta as any)?.deleteBlog
-            
+
             return (
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -424,7 +424,7 @@ const columns: ColumnDef<z.infer<typeof blogSchema>>[] = [
                             {row.original.isActive ? "停用" : "启用"}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem 
+                        <DropdownMenuItem
                             variant="destructive"
                             onClick={() => {
                                 if (confirm('确定要删除这篇博客吗？此操作不可撤销。')) {
@@ -604,7 +604,7 @@ export function BlogTable() {
         const { active, over } = event
         if (active && over && active.id !== over.id) {
             // Handle drag end for reordering
-            console.log('Reordering blogs:', active.id, 'to', over.id)
+            // console.log('Reordering blogs:', active.id, 'to', over.id)
             // You can implement actual reordering API call here
         }
     }
@@ -657,11 +657,11 @@ export function BlogTable() {
     )
 }
 
-function BlogTabs({ 
-    blogs, 
-    loading, 
-    info, 
-    handleDragEnd, 
+function BlogTabs({
+    blogs,
+    loading,
+    info,
+    handleDragEnd,
     refetch,
     pagination,
     setPagination,
@@ -672,7 +672,7 @@ function BlogTabs({
     totalCount,
     updateBlog,
     deleteBlog
-}: { 
+}: {
     blogs: any[]
     loading: boolean
     info: any
@@ -766,8 +766,8 @@ function BlogTabs({
                         <TabsTrigger value="archived_blogs">已归档 <Badge variant="secondary">{info?.totalArchived}</Badge></TabsTrigger>
                     </TabsList>
                     <div className="flex items-center gap-2">
-                        <Button 
-                            variant="outline" 
+                        <Button
+                            variant="outline"
                             size="sm"
                             onClick={() => window.location.href = '/admin/editor'}
                         >
@@ -1149,7 +1149,7 @@ function BlogCellViewer({ item }: { item: z.infer<typeof blogSchema> }) {
                     </form>
                 </div>
                 <DrawerFooter>
-                    <Button 
+                    <Button
                         onClick={() => {
                             window.location.href = `/admin/editor?id=${item.id}`
                         }}
diff --git a/app/admin/categories/category-table.tsx b/app/admin/categories/category-table.tsx
index 736b9f2..d368bb8 100644
--- a/app/admin/categories/category-table.tsx
+++ b/app/admin/categories/category-table.tsx
@@ -271,7 +271,7 @@ const columns: ColumnDef<z.infer<typeof categorySchema>>[] = [
         cell: ({ row, table }) => {
             const updateCategoryMutation = (table.options.meta as any)?.updateCategory
             const deleteCategoryMutation = (table.options.meta as any)?.deleteCategory
-            
+
             return (
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -299,7 +299,7 @@ const columns: ColumnDef<z.infer<typeof categorySchema>>[] = [
                             {row.original.isActive ? "禁用" : "启用"}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem 
+                        <DropdownMenuItem
                             variant="destructive"
                             onClick={() => {
                                 if (confirm('确定要删除这个分类吗？此操作不可撤销。')) {
@@ -451,7 +451,7 @@ export function CategoryTable() {
     function handleDragEnd(event: DragEndEvent) {
         const { active, over } = event
         if (active && over && active.id !== over.id) {
-            console.log('Reordering categories:', active.id, 'to', over.id)
+            // console.log('Reordering categories:', active.id, 'to', over.id)
         }
     }
 
@@ -495,11 +495,11 @@ export function CategoryTable() {
     )
 }
 
-function CategoryTabs({ 
-    categories, 
-    loading, 
-    info, 
-    handleDragEnd, 
+function CategoryTabs({
+    categories,
+    loading,
+    info,
+    handleDragEnd,
     refetch,
     pagination,
     setPagination,
@@ -510,7 +510,7 @@ function CategoryTabs({
     totalCount,
     updateCategory,
     deleteCategory
-}: { 
+}: {
     categories: any[]
     loading: boolean
     info: any
@@ -584,8 +584,8 @@ function CategoryTabs({
                         </TabsTrigger>
                     </TabsList>
                     <div className="flex items-center gap-2">
-                        <Button 
-                            variant="outline" 
+                        <Button
+                            variant="outline"
                             size="sm"
                             onClick={() => window.location.href = '/admin/categories/create'}
                         >
@@ -873,8 +873,8 @@ function CategoryCellViewer({ item }: { item: z.infer<typeof categorySchema> })
                     <Button variant="link" className="text-foreground w-fit px-0 text-left justify-start">
                         <div className="flex items-center gap-2">
                             {item.color && (
-                                <div 
-                                    className="w-3 h-3 rounded-full" 
+                                <div
+                                    className="w-3 h-3 rounded-full"
                                     style={{ backgroundColor: item.color }}
                                 />
                             )}
diff --git a/app/admin/common/control.tsx b/app/admin/common/control.tsx
index 0a48546..b1c338a 100644
--- a/app/admin/common/control.tsx
+++ b/app/admin/common/control.tsx
@@ -559,7 +559,7 @@ export default function Control() {
                         <CardContent>
                             <div className="flex flex-wrap gap-3">
                                 <Button className="flex items-center gap-2" onClick={() => {
-                                    console.log('Applying configuration:', config)
+                                    // console.log('Applying configuration:', config)
                                     alert('配置应用成功!')
                                 }}>
                                     <Zap className="h-4 w-4" />
diff --git a/app/admin/tags/tag-table.tsx b/app/admin/tags/tag-table.tsx
index 8bf6e05..05a29bf 100644
--- a/app/admin/tags/tag-table.tsx
+++ b/app/admin/tags/tag-table.tsx
@@ -269,7 +269,7 @@ const columns: ColumnDef<z.infer<typeof tagSchema>>[] = [
         cell: ({ row, table }) => {
             const updateTagMutation = (table.options.meta as any)?.updateTag
             const deleteTagMutation = (table.options.meta as any)?.deleteTag
-            
+
             return (
                 <DropdownMenu>
                     <DropdownMenuTrigger asChild>
@@ -297,7 +297,7 @@ const columns: ColumnDef<z.infer<typeof tagSchema>>[] = [
                             {row.original.isActive ? "禁用" : "启用"}
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem 
+                        <DropdownMenuItem
                             variant="destructive"
                             onClick={() => {
                                 if (confirm('确定要删除这个标签吗？此操作不可撤销。')) {
@@ -447,7 +447,7 @@ export function TagTable() {
     function handleDragEnd(event: DragEndEvent) {
         const { active, over } = event
         if (active && over && active.id !== over.id) {
-            console.log('Reordering tags:', active.id, 'to', over.id)
+            // console.log('Reordering tags:', active.id, 'to', over.id)
         }
     }
 
@@ -491,11 +491,11 @@ export function TagTable() {
     )
 }
 
-function TagTabs({ 
-    tags, 
-    loading, 
-    info, 
-    handleDragEnd, 
+function TagTabs({
+    tags,
+    loading,
+    info,
+    handleDragEnd,
     refetch,
     pagination,
     setPagination,
@@ -506,7 +506,7 @@ function TagTabs({
     totalCount,
     updateTag,
     deleteTag
-}: { 
+}: {
     tags: any[]
     loading: boolean
     info: any
@@ -580,8 +580,8 @@ function TagTabs({
                         </TabsTrigger>
                     </TabsList>
                     <div className="flex items-center gap-2">
-                        <Button 
-                            variant="outline" 
+                        <Button
+                            variant="outline"
                             size="sm"
                             onClick={() => window.location.href = '/admin/tags/create'}
                         >
@@ -869,8 +869,8 @@ function TagCellViewer({ item }: { item: z.infer<typeof tagSchema> }) {
                     <Button variant="link" className="text-foreground w-fit px-0 text-left justify-start">
                         <div className="flex items-center gap-2">
                             {item.color ? (
-                                <div 
-                                    className="w-3 h-3 rounded-full" 
+                                <div
+                                    className="w-3 h-3 rounded-full"
                                     style={{ backgroundColor: item.color }}
                                 />
                             ) : (
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 229032d..746e20d 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -31,7 +31,7 @@ export default function Page({ params }: { params: Promise<{ slug: string }> })
     if (!data?.blogBySlug) return <div className="flex items-center justify-center min-h-[400px]">Blog not found</div>;
 
     const content = data.blogBySlug.content;
-    console.log('Blog content:', content);
+    // console.log('Blog content:', content);
 
     return (
         <div className="relative">
diff --git a/app/map-context.tsx b/app/map-context.tsx
index 8b2608e..05d4d4a 100644
--- a/app/map-context.tsx
+++ b/app/map-context.tsx
@@ -51,7 +51,7 @@ export function MapProvider({ children }: MapProviderProps) {
     const setMap = (map: Map, layers: any[]) => {
         // 如果已经有地图实例，先清理旧的
         if (mapRef.current) {
-            console.log('Cleaning up previous map instance...');
+            // console.log('Cleaning up previous map instance...');
             mapRef.current = null;
         }
 
@@ -122,7 +122,7 @@ export function MapProvider({ children }: MapProviderProps) {
 
     const clearMap = () => {
         if (mapRef.current) {
-            console.log('Clearing map instance...');
+            // console.log('Clearing map instance...');
             mapRef.current.remove();
             mapRef.current = null;
             layersRef.current = [];
diff --git a/app/me/layout.tsx b/app/me/layout.tsx
index 7dc531f..7a36dad 100644
--- a/app/me/layout.tsx
+++ b/app/me/layout.tsx
@@ -13,7 +13,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
 
     const isLoggedIn = (await cookies()).get('jwt')?.value
 
-    console.log(isLoggedIn)
+    // console.log(isLoggedIn)
 
     if (!isLoggedIn) {
         redirect('/login')
diff --git a/app/me/page.tsx b/app/me/page.tsx
index 209fc90..8dc8cad 100644
--- a/app/me/page.tsx
+++ b/app/me/page.tsx
@@ -401,9 +401,9 @@ export default function MePage() {
   };
 
   const handleSave = () => {
-    console.log("Settings saved:", settings);
-    console.log("Profile saved:", profile);
-    console.log("Tags saved:", tags);
+    // console.log("Settings saved:", settings);
+    // console.log("Profile saved:", profile);
+    // console.log("Tags saved:", tags);
     // TODO: 实际保存到后端
   };
 
diff --git a/app/tl.tsx b/app/tl.tsx
index 41182bf..45f72df 100644
--- a/app/tl.tsx
+++ b/app/tl.tsx
@@ -26,6 +26,7 @@ import { Separator } from "@/components/ui/separator";
 import { useWS } from "./ws-context";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { Label } from "@/components/ui/label";
 
 
 interface Uniforms {
@@ -154,7 +155,6 @@ export const Timeline: React.FC<Props> = React.memo(({
         // 合并配置
         const config: TimelineConfig = {
             initialCenterTime: defaultCenterTime,
-            initialTimeRange: (defaultEndTime - defaultStartTime) / 2, // 使用时间范围的一半作为初始范围
             highlightWeekends: false,
             zoomMode: ZoomMode.MousePosition,
             zoomSensitivity: 0.001,
@@ -174,6 +174,15 @@ export const Timeline: React.FC<Props> = React.memo(({
                 primaryFontSize: 10,
                 secondaryFontSize: 10
             },
+            discreteZoomLevels: [
+                604123.3009862272,
+                383869.5109421124,
+                167314.88060646105,
+                64314.3439546868,
+                24625.670894409748,
+                4964.7447283082365,
+            ],
+            initialZoomLevel: 4964.7447283082365,
             onDateChange: async (date: Date) => {
                 const datestr = formatInTimeZone(date, 'UTC', 'yyyyMMddHHmmss')
                 const url_base = process.env.NEXT_PUBLIC_GRAPHQL_BACKEND_URL?.replace('/graphql', '') || 'http://localhost:3050'
diff --git a/app/user-context.tsx b/app/user-context.tsx
index 3ee994c..000f73e 100644
--- a/app/user-context.tsx
+++ b/app/user-context.tsx
@@ -356,7 +356,7 @@ export function UserProvider({ children }: UserProviderProps) {
   // 监听用户数据变化，定期更新用户信息
   useEffect(() => {
     if (userData && authState.isAuthenticated) {
-      console.log('userData', userData)
+      // console.log('userData', userData)
       updateUserInfo(userData)
     }
   }, [userData, authState.isAuthenticated])
diff --git a/components/map-component.tsx b/components/map-component.tsx
index becd3c0..e72dbe8 100644
--- a/components/map-component.tsx
+++ b/components/map-component.tsx
@@ -72,7 +72,7 @@ export function MapComponent({
             op: "ui.component.load",
             name: "Map Component Initialization",
         });
-        
+
         span.setAttribute("map.style", style);
         span.setAttribute("map.center", `${location.center[0]},${location.center[1]}`);
         span.setAttribute("map.zoom", location.zoom);
@@ -92,10 +92,10 @@ export function MapComponent({
 
 
         map.on('style.load', () => {
-            logMapEvent('style.load', { 
+            logMapEvent('style.load', {
                 style: style,
                 center: location.center,
-                zoom: location.zoom 
+                zoom: location.zoom
             });
 
             logger.info('Map style loaded successfully', {
@@ -285,9 +285,9 @@ export function MapComponent({
                     // 只在缩放级别变化时更新网格数据
                     const currentZoom = Math.floor(map.getZoom());
                     if (currentZoom !== this.lastZoom) {
-                        logMapEvent('zoom_change', { 
-                            previousZoom: this.lastZoom, 
-                            currentZoom: currentZoom 
+                        logMapEvent('zoom_change', {
+                            previousZoom: this.lastZoom,
+                            currentZoom: currentZoom
                         });
 
                         // 智能计算最佳细分数量
@@ -300,20 +300,20 @@ export function MapComponent({
 
                         // 获取细分建议信息
                         const recommendation = getSubdivisionRecommendation(currentZoom, performanceLevel);
-                        
+
                         logger.debug(logger.fmt`Zoom level: ${currentZoom}, Performance level: ${performanceLevel}`, {
                             currentZoom,
                             performanceLevel,
                             component: 'MapComponent'
                         });
-                        
+
                         logger.debug(logger.fmt`Subdivision recommendation: ${recommendation.subdivisions} (${recommendation.description})`, {
                             subdivisions: recommendation.subdivisions,
                             description: recommendation.description,
                             triangleCount: recommendation.triangleCount,
                             estimatedMemoryMB: recommendation.estimatedMemoryMB
                         });
-                        
+
                         logPerformanceMetric('triangles', recommendation.triangleCount, 'count');
                         logPerformanceMetric('memory_estimate', recommendation.estimatedMemoryMB, 'MB');
 
@@ -463,7 +463,7 @@ export function MapComponent({
 
         // 清理函数：当组件卸载或重新初始化时清理资源
         return () => {
-            console.log('Cleaning up map resources...');
+            // console.log('Cleaning up map resources...');
 
             // 清理自定义图层引用
             customLayerRef.current = null;
@@ -480,7 +480,7 @@ export function MapComponent({
             if (map) {
                 map.remove();
             }
-            
+
             // 结束Sentry span
             span.end();
         }
@@ -492,7 +492,7 @@ export function MapComponent({
             const gl = glRef.current
             if (!gl) return;
 
-            console.log('Updating texture with imgBitmap:', imgBitmap);
+            // console.log('Updating texture with imgBitmap:', imgBitmap);
 
             gl.bindTexture(gl.TEXTURE_2D, texRef.current)
 
@@ -557,7 +557,7 @@ export function MapComponent({
             (span) => {
                 span.setAttribute("colorbar.position.x", colorbarPosition.x);
                 span.setAttribute("colorbar.position.y", colorbarPosition.y);
-                
+
                 e.preventDefault()
                 setIsDragging(true)
 
diff --git a/hooks/use-radartile.ts b/hooks/use-radartile.ts
index a282cf5..51a7218 100644
--- a/hooks/use-radartile.ts
+++ b/hooks/use-radartile.ts
@@ -39,7 +39,7 @@ export function useRadarTile({
             radarTileRef.current.url = url
             const blob = await resp.blob()
             const newImgBitmap = await createImageBitmap(blob)
-            console.log('Created new ImageBitmap:', newImgBitmap);
+            // console.log('Created new ImageBitmap:', newImgBitmap);
             setImgBitmap(newImgBitmap) // 使用 setState 更新状态
         }).catch((err) => {
             radarTileRef.current.isError = true
diff --git a/lib/timeline.ts b/lib/timeline.ts
index f166a64..211c8e1 100644
--- a/lib/timeline.ts
+++ b/lib/timeline.ts
@@ -75,6 +75,8 @@ interface TimelineConfig {
     initialCenterTime?: number;
     /** 初始显示范围（毫秒，默认1小时） */
     initialTimeRange?: number;
+    /** Initial Zoom Level */
+    initialZoomLevel?: number | null;
     /** 缩放模式 */
     zoomMode?: ZoomMode;
     /** 缩放灵敏度 */
@@ -226,7 +228,7 @@ class Viewport {
 
     /** 获取缩放级别（像素/毫秒） */
     getZoomLevel(): number {
-        return this.width / this.timeRange;
+        return this.timeRange / this.width;
     }
 
     /** 将时间转换为屏幕坐标 */
@@ -291,11 +293,12 @@ class Viewport {
         const newTimeAtMouse = this.screenToTime(screenX);
         const timeCorrection = timeAtMouse - newTimeAtMouse;
         this.centerTime += timeCorrection;
+        console.log(this.getZoomLevel())
     }
 
     /** 动画缩放到指定时间范围 */
     animateToTimeRange(
-        targetRange: number, 
+        targetRange: number,
         duration: number = 300,
         targetCenterTime?: number,
         onComplete?: () => void
@@ -308,10 +311,10 @@ class Viewport {
         const startTime = Date.now();
         const startTimeRange = this.timeRange;
         const startCenterTime = this.centerTime;
-        
+
         // 限制目标范围
         targetRange = Math.max(this.MIN_RANGE, Math.min(this.MAX_RANGE, targetRange));
-        
+
         this.animationState = {
             isAnimating: true,
             startTime,
@@ -328,16 +331,16 @@ class Viewport {
 
             const elapsed = Date.now() - this.animationState.startTime;
             const progress = Math.min(elapsed / this.animationState.duration, 1);
-            
+
             // 使用缓动函数 (easeInOutCubic)
-            const easedProgress = progress < 0.5 
+            const easedProgress = progress < 0.5
                 ? 4 * progress * progress * progress
                 : 1 - Math.pow(-2 * progress + 2, 3) / 2;
 
             // 插值计算当前值
-            this.timeRange = this.animationState.startTimeRange + 
+            this.timeRange = this.animationState.startTimeRange +
                 (this.animationState.targetTimeRange - this.animationState.startTimeRange) * easedProgress;
-            
+
             this.centerTime = this.animationState.startCenterTime +
                 (this.animationState.targetCenterTime - this.animationState.startCenterTime) * easedProgress;
 
@@ -365,11 +368,11 @@ class Viewport {
         onComplete?: () => void
     ): void {
         const timeAtMouse = this.screenToTime(screenX);
-        
+
         // 计算缩放后的中心时间，保持鼠标位置下的时间不变
         const currentRatio = (screenX - this.width / 2) / this.width;
         const targetCenterTime = timeAtMouse - currentRatio * targetRange;
-        
+
         this.animateToTimeRange(targetRange, duration, targetCenterTime, onComplete);
     }
 
@@ -429,8 +432,8 @@ class ScaleManager {
             },
             {
                 level: TimeFormatLevel.FiveMinutes,
-                majorInterval: 5 * 60 * 1000,  // 5分钟
-                minorTicks: 5,  // 每分钟一个次刻度
+                majorInterval: 6 * 60 * 1000,  // 5分钟
+                minorTicks: 6,  // 每分钟一个次刻度
                 minPixelDistance: 60,
                 maxPixelDistance: 150,
                 formatter: (date: Date) => ({
@@ -440,8 +443,8 @@ class ScaleManager {
             },
             {
                 level: TimeFormatLevel.TenMinutes,
-                majorInterval: 10 * 60 * 1000,  // 10分钟
-                minorTicks: 2,  // 每5分钟一个次刻度
+                majorInterval: 12 * 60 * 1000,  // 12分钟
+                minorTicks: 2,  // 每6分钟一个次刻度
                 minPixelDistance: 50,
                 maxPixelDistance: 120,
                 formatter: (date: Date) => ({
@@ -501,7 +504,7 @@ class ScaleManager {
             {
                 level: TimeFormatLevel.Day,
                 majorInterval: 24 * 60 * 60 * 1000,  // 1天
-                minorTicks: 4,  // 每6小时一个次刻度
+                minorTicks: 12,  // 每6小时一个次刻度
                 minPixelDistance: 80,
                 maxPixelDistance: 200,
                 formatter: (date: Date) => ({
@@ -523,7 +526,7 @@ class ScaleManager {
         const zoomLevel = viewport.getZoomLevel();
 
         for (const level of this.scaleLevels) {
-            const pixelDistance = level.majorInterval * zoomLevel;
+            const pixelDistance = level.majorInterval / zoomLevel;
             if (pixelDistance >= level.minPixelDistance && pixelDistance <= level.maxPixelDistance) {
                 this.currentLevel = level;
                 return level;
@@ -531,7 +534,7 @@ class ScaleManager {
         }
 
         // 如果没有找到合适的级别，选择最接近的
-        const pixelDistances = this.scaleLevels.map(level => level.majorInterval * zoomLevel);
+        const pixelDistances = this.scaleLevels.map(level => level.majorInterval / zoomLevel);
         const targetDistance = 100; // 目标像素距离
         const closestIndex = pixelDistances.reduce((bestIdx, dist, idx) => {
             const bestDist = pixelDistances[bestIdx];
@@ -610,14 +613,14 @@ class InteractionHandler {
     private discreteZoomLevels: number[];
     private enableSmoothZoom: boolean;
     private zoomAnimationDuration: number;
-    
+
     // 触摸相关状态
     private lastTouchDistance: number | null = null;
     private lastTouchCenter: { x: number; y: number } | null = null;
     private isTouchZooming: boolean = false;
 
     constructor(
-        zoomMode: ZoomMode = ZoomMode.MousePosition, 
+        zoomMode: ZoomMode = ZoomMode.MousePosition,
         sensitivity: number = 0.001,
         discreteZoomLevels: number[] = [],
         enableSmoothZoom: boolean = true,
@@ -705,14 +708,14 @@ class InteractionHandler {
 
     /** 处理离散缩放 */
     private handleDiscreteZoom(deltaY: number, mouseX: number, viewport: Viewport, markX?: number): void {
-        const currentRange = viewport.getTimeRange();
-        
+        const currentLevel = viewport.getZoomLevel();
+
         // 找到当前最接近的缩放级别
         let currentLevelIndex = 0;
-        let minDiff = Math.abs(this.discreteZoomLevels[0] - currentRange);
-        
+        let minDiff = Math.abs(this.discreteZoomLevels[0] - currentLevel);
+
         for (let i = 1; i < this.discreteZoomLevels.length; i++) {
-            const diff = Math.abs(this.discreteZoomLevels[i] - currentRange);
+            const diff = Math.abs(this.discreteZoomLevels[i] - currentLevel);
             if (diff < minDiff) {
                 minDiff = diff;
                 currentLevelIndex = i;
@@ -721,7 +724,7 @@ class InteractionHandler {
 
         // 根据滚轮方向确定目标级别
         let targetLevelIndex: number;
-        if (deltaY > 0) {
+        if (deltaY < 0) {
             // 向上滚动，缩小（增加时间范围）
             targetLevelIndex = Math.min(currentLevelIndex + 1, this.discreteZoomLevels.length - 1);
         } else {
@@ -734,7 +737,7 @@ class InteractionHandler {
             return;
         }
 
-        const targetRange = this.discreteZoomLevels[targetLevelIndex];
+        const targetRange = viewport.getWidth() * this.discreteZoomLevels[targetLevelIndex];
         const zoomX = (this.zoomMode === ZoomMode.MarkMode && markX) ? markX : mouseX;
 
         if (this.enableSmoothZoom) {
@@ -764,15 +767,15 @@ class InteractionHandler {
             // 双指触摸，准备缩放
             this.isTouchZooming = true;
             this.isDragging = false;
-            
+
             const touch1 = touches[0];
             const touch2 = touches[1];
-            
+
             this.lastTouchDistance = Math.sqrt(
-                Math.pow(touch2.clientX - touch1.clientX, 2) + 
+                Math.pow(touch2.clientX - touch1.clientX, 2) +
                 Math.pow(touch2.clientY - touch1.clientY, 2)
             );
-            
+
             this.lastTouchCenter = {
                 x: (touch1.clientX + touch2.clientX) / 2,
                 y: (touch1.clientY + touch2.clientY) / 2
@@ -790,24 +793,24 @@ class InteractionHandler {
             // 双指缩放
             const touch1 = touches[0];
             const touch2 = touches[1];
-            
+
             const currentDistance = Math.sqrt(
-                Math.pow(touch2.clientX - touch1.clientX, 2) + 
+                Math.pow(touch2.clientX - touch1.clientX, 2) +
                 Math.pow(touch2.clientY - touch1.clientY, 2)
             );
-            
+
             const currentCenter = {
                 x: (touch1.clientX + touch2.clientX) / 2,
                 y: (touch1.clientY + touch2.clientY) / 2
             };
-            
+
             if (this.lastTouchDistance && this.lastTouchCenter) {
                 const scaleChange = currentDistance / this.lastTouchDistance;
-                
+
                 // 转换为画布坐标
                 const canvasRect = canvas.getBoundingClientRect();
                 const canvasX = currentCenter.x - canvasRect.left;
-                
+
                 if (this.discreteZoomLevels.length > 0) {
                     // 对于离散缩放，当缩放变化超过阈值时触发
                     const threshold = 1.1; // 10% 的变化阈值
@@ -824,9 +827,9 @@ class InteractionHandler {
                     this.lastTouchDistance = currentDistance;
                 }
             }
-            
+
             this.lastTouchCenter = currentCenter;
-            
+
         } else if (touches.length === 1 && !this.isTouchZooming) {
             // 单指拖拽 - 转换为画布坐标
             const touch = touches[0];
@@ -882,10 +885,14 @@ class RealTimeTimeline {
         // 初始化组件
         this.viewport = new Viewport(canvas.width, canvas.height);
         this.viewport.goToTime(this.config.initialCenterTime);
-        if (this.config.initialTimeRange) {
+        if (this.config.initialTimeRange && !this.config.initialZoomLevel) {
             this.viewport.setTimeRange(this.config.initialTimeRange);
         }
 
+        if (this.config.initialZoomLevel && !this.config.initialTimeRange) {
+            this.viewport.setTimeRange(this.viewport.getWidth() * this.config.initialZoomLevel);
+        }
+
         this.scaleManager = new ScaleManager();
         this.interaction = new InteractionHandler(
             this.config.zoomMode,
@@ -931,6 +938,7 @@ class RealTimeTimeline {
         const defaultConfig: Required<TimelineConfig> = {
             initialCenterTime: Date.now(),
             initialTimeRange: 60 * 60 * 1000, // 1小时
+            initialZoomLevel: null,
             zoomMode: ZoomMode.MousePosition,
             zoomSensitivity: 0.001,
             discreteZoomLevels: defaultDiscreteZoomLevels,
@@ -969,6 +977,7 @@ class RealTimeTimeline {
         return {
             initialCenterTime: config.initialCenterTime ?? defaultConfig.initialCenterTime,
             initialTimeRange: config.initialTimeRange ?? defaultConfig.initialTimeRange,
+            initialZoomLevel: config.initialZoomLevel ?? defaultConfig.initialZoomLevel,
             zoomMode: config.zoomMode ?? defaultConfig.zoomMode,
             zoomSensitivity: config.zoomSensitivity ?? defaultConfig.zoomSensitivity,
             discreteZoomLevels: config.discreteZoomLevels ?? defaultConfig.discreteZoomLevels,
@@ -1037,7 +1046,7 @@ class RealTimeTimeline {
         // 统一的结束拖拽处理（鼠标）
         const handleMouseEnd = (e: MouseEvent) => {
             const { x, y } = getEventCoordinates(e);
-            
+
             // 检查是否为点击（而非拖拽）
             if (this.interaction.isClick()) {
                 // 获取当前刻度信息用于吸附
@@ -1059,14 +1068,14 @@ class RealTimeTimeline {
 
         const handleTouchMove = (e: TouchEvent) => {
             e.preventDefault();
-            
+
             // 对于单指触摸，更新显示位置
             if (e.touches.length === 1 && !this.interaction.getIsDragging()) {
                 const { x, y } = getEventCoordinates(e);
                 this.mousePosition = { x, y };
                 this.showMouseIndicator = true;
             }
-            
+
             this.interaction.handleTouchMove(e.touches, this.viewport, this.canvas);
             this.requestRender();
         };
@@ -1485,6 +1494,11 @@ class RealTimeTimeline {
 
 
 
+    currentLevel(): number {
+        return this.viewport.getZoomLevel()
+    }
+
+
     /** 获取当前视口信息 */
     getViewportInfo(): {
         centerTime: number;