@vlian/framework 1.2.1 → 1.2.16

package/dist/core/dev/DevTools.js

@@ -1,355 +1,202 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * 开发工具模块
- * 提供开发模式下的调试工具
- */ import { useState, useEffect, useMemo } from "react";
-import { Button, Drawer, Space, Typography, Divider, Tag, Tabs, Collapse, Badge } from "antd";
-// import { getRouterManager } from '../router/RouterManager';
+ * 开发工具模块（无 UI 框架依赖）
+ */ import { useState, useEffect } from "react";
 import { useStateManager } from "../app";
-const { Title, Text, Paragraph } = Typography;
-const { Panel } = Collapse;
-/**
- * 开发工具组件
- * 
- * 优化：增强功能，添加状态管理器调试面板、路由调试面板等
- */ export function DevTools({ appInstance, visible, onClose }) {
+function toPrettyJson(value) {
+    try {
+        return JSON.stringify(value, null, 2);
+    } catch  {
+        return String(value);
+    }
+}
+export function DevTools({ appInstance, visible, onClose }) {
     const [performanceMetrics, setPerformanceMetrics] = useState({});
-    const [activeTab, setActiveTab] = useState('overview');
     const stateManager = useStateManager();
     useEffect(()=>{
         if (!visible) {
             return;
         }
         const tracker = appInstance.getPerformanceTracker();
-        if (tracker) {
-            const metrics = tracker.getMetrics();
-            setPerformanceMetrics({
-                '服务初始化': metrics.serviceInitDuration || 0,
-                '初始化': metrics.initializationDuration || 0,
-                '首次渲染': metrics.firstRenderDuration || 0,
-                '总启动时间': metrics.totalStartupDuration || 0,
-                'FCP': metrics.fcp || 0,
-                'LCP': metrics.lcp || 0,
-                'FID': metrics.fid || 0,
-                'CLS': metrics.cls || 0
-            });
+        if (!tracker) {
+            return;
         }
+        const metrics = tracker.getMetrics();
+        setPerformanceMetrics({
+            serviceInitDuration: metrics.serviceInitDuration || 0,
+            initializationDuration: metrics.initializationDuration || 0,
+            firstRenderDuration: metrics.firstRenderDuration || 0,
+            totalStartupDuration: metrics.totalStartupDuration || 0,
+            fcp: metrics.fcp || 0,
+            lcp: metrics.lcp || 0,
+            fid: metrics.fid || 0,
+            cls: metrics.cls || 0
+        });
     }, [
         visible,
         appInstance
     ]);
+    if (!visible) {
+        return null;
+    }
     const options = appInstance.getOptions();
-    // const routerManager = getRouterManager();
-    // const isRouterEnabled = routerManager.isRouterEnabled();
-    // 获取状态管理器信息
-    const stateManagerInfo = useMemo(()=>{
-        if (!stateManager) {
-            return null;
-        }
-        try {
-            // 尝试获取所有状态（如果支持）
-            const allStates = stateManager.getAllStates?.() || [];
-            return {
-                stateCount: allStates.length,
-                states: allStates.slice(0, 10)
-            };
-        } catch  {
-            return {
-                stateCount: 0,
-                states: []
-            };
-        }
-    }, [
-        stateManager
-    ]);
-    // 获取路由信息
-    // const routerInfo = useMemo(() => {
-    //   if (!isRouterEnabled) {
-    //     return null;
-    //   }
-    //   try {
-    //     const routes = (routerManager as any).getRoutes?.() || [];
-    //     return {
-    //       routeCount: routes.length,
-    //       mode: (routerManager as any).getRouterMode?.() || 'unknown',
-    //       routes: routes.slice(0, 10), // 只显示前10个
-    //     };
-    //   } catch {
-    //     return {
-    //       routeCount: 0,
-    //       mode: 'unknown',
-    //       routes: [],
-    //     };
-    //   }
-    // }, [routerManager, isRouterEnabled]);
-    const tabItems = [
-        {
-            key: 'overview',
-            label: '概览',
-            children: /*#__PURE__*/ _jsxs(Space, {
-                direction: "vertical",
+    const allStates = stateManager?.getAllStates?.() || [];
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            width: 'min(680px, 95vw)',
+            height: '100vh',
+            zIndex: 9999,
+            background: '#fff',
+            borderLeft: '1px solid #d9e2ec',
+            padding: 16,
+            overflowY: 'auto',
+            boxShadow: '-8px 0 20px rgba(0, 0, 0, 0.08)'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        style: {
+                            margin: 0
+                        },
+                        children: "DevTools"
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        onClick: onClose,
+                        style: {
+                            border: 'none',
+                            background: 'transparent',
+                            cursor: 'pointer'
+                        },
+                        children: "关闭"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
                 style: {
-                    width: '100%'
+                    marginTop: 12
                 },
-                size: "large",
                 children: [
+                    /*#__PURE__*/ _jsx("h4", {
+                        children: "实例"
+                    }),
                     /*#__PURE__*/ _jsxs("div", {
                         children: [
-                            /*#__PURE__*/ _jsx(Title, {
-                                level: 5,
-                                children: "应用实例"
-                            }),
-                            /*#__PURE__*/ _jsxs(Space, {
-                                direction: "vertical",
-                                size: "small",
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            "实例ID: ",
-                                            /*#__PURE__*/ _jsx(Tag, {
-                                                children: appInstance.id
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            "状态: ",
-                                            /*#__PURE__*/ _jsx(Tag, {
-                                                color: appInstance.isInitialized() ? 'green' : 'orange',
-                                                children: appInstance.isInitialized() ? '已初始化' : '未初始化'
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
+                            "id: ",
+                            appInstance.id
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Divider, {}),
                     /*#__PURE__*/ _jsxs("div", {
                         children: [
-                            /*#__PURE__*/ _jsx(Title, {
-                                level: 5,
-                                children: "服务状态"
-                            }),
-                            /*#__PURE__*/ _jsxs(Space, {
-                                direction: "vertical",
-                                size: "small",
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            "监控服务: ",
-                                            /*#__PURE__*/ _jsx(Tag, {
-                                                color: "green",
-                                                children: "已启用"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            "性能监控: ",
-                                            /*#__PURE__*/ _jsx(Tag, {
-                                                color: "green",
-                                                children: "已启用"
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            "状态管理器: ",
-                                            /*#__PURE__*/ _jsx(Tag, {
-                                                color: "green",
-                                                children: "已启用"
-                                            })
-                                        ]
-                                    })
-                                ]
-                            })
+                            "initialized: ",
+                            String(appInstance.isInitialized())
                         ]
                     })
                 ]
-            })
-        },
-        {
-            key: 'performance',
-            label: '性能',
-            children: /*#__PURE__*/ _jsxs("div", {
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    marginTop: 12
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(Title, {
-                        level: 5,
-                        children: "性能指标"
+                    /*#__PURE__*/ _jsx("h4", {
+                        children: "性能"
                     }),
-                    /*#__PURE__*/ _jsx(Space, {
-                        direction: "vertical",
-                        size: "small",
+                    /*#__PURE__*/ _jsx("pre", {
                         style: {
-                            width: '100%'
+                            background: '#f7fafc',
+                            padding: 10,
+                            borderRadius: 8
                         },
-                        children: Object.entries(performanceMetrics).map(([key, value])=>/*#__PURE__*/ _jsxs("div", {
-                                style: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between'
-                                },
-                                children: [
-                                    /*#__PURE__*/ _jsxs(Text, {
-                                        children: [
-                                            key,
-                                            ":"
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsx(Text, {
-                                        strong: true,
-                                        children: value > 0 ? `${value.toFixed(2)}ms` : '-'
-                                    })
-                                ]
-                            }, key))
-                    })
-                ]
-            })
-        },
-        {
-            key: 'state',
-            label: /*#__PURE__*/ _jsxs("span", {
-                children: [
-                    "状态管理",
-                    stateManagerInfo && stateManagerInfo.stateCount > 0 && /*#__PURE__*/ _jsx(Badge, {
-                        count: stateManagerInfo.stateCount,
-                        style: {
-                            marginLeft: 8
-                        }
+                        children: toPrettyJson(performanceMetrics)
                     })
                 ]
             }),
-            children: stateManagerInfo ? /*#__PURE__*/ _jsxs("div", {
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    marginTop: 12
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(Title, {
-                        level: 5,
-                        children: "状态管理器"
+                    /*#__PURE__*/ _jsx("h4", {
+                        children: "状态管理"
                     }),
-                    /*#__PURE__*/ _jsxs(Space, {
-                        direction: "vertical",
-                        size: "small",
-                        style: {
-                            width: '100%'
-                        },
+                    /*#__PURE__*/ _jsxs("div", {
                         children: [
-                            /*#__PURE__*/ _jsxs(Text, {
-                                children: [
-                                    "状态总数: ",
-                                    /*#__PURE__*/ _jsx(Tag, {
-                                        children: stateManagerInfo.stateCount
-                                    })
-                                ]
-                            }),
-                            stateManagerInfo.states.length > 0 && /*#__PURE__*/ _jsx(Collapse, {
-                                children: /*#__PURE__*/ _jsx(Panel, {
-                                    header: "状态列表",
-                                    children: /*#__PURE__*/ _jsx(Space, {
-                                        direction: "vertical",
-                                        size: "small",
-                                        style: {
-                                            width: '100%'
-                                        },
-                                        children: stateManagerInfo.states.map((state, index)=>/*#__PURE__*/ _jsx("div", {
-                                                style: {
-                                                    fontSize: '12px'
-                                                },
-                                                children: /*#__PURE__*/ _jsx(Text, {
-                                                    code: true,
-                                                    children: state.id || `State ${index + 1}`
-                                                })
-                                            }, index))
-                                    })
-                                }, "states")
-                            })
+                            "stateCount: ",
+                            allStates.length
                         ]
+                    }),
+                    /*#__PURE__*/ _jsx("pre", {
+                        style: {
+                            background: '#f7fafc',
+                            padding: 10,
+                            borderRadius: 8
+                        },
+                        children: toPrettyJson(allStates.slice(0, 10))
                     })
                 ]
-            }) : /*#__PURE__*/ _jsx(Text, {
-                type: "secondary",
-                children: "状态管理器未初始化"
-            })
-        },
-        {
-            key: 'config',
-            label: '配置',
-            children: /*#__PURE__*/ _jsxs("div", {
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    marginTop: 12
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(Title, {
-                        level: 5,
-                        children: "配置信息"
+                    /*#__PURE__*/ _jsx("h4", {
+                        children: "配置"
                     }),
-                    /*#__PURE__*/ _jsx(Paragraph, {
-                        children: /*#__PURE__*/ _jsx(Text, {
-                            code: true,
-                            style: {
-                                fontSize: '12px',
-                                whiteSpace: 'pre-wrap'
-                            },
-                            children: JSON.stringify(options, null, 2)
-                        })
+                    /*#__PURE__*/ _jsx("pre", {
+                        style: {
+                            background: '#f7fafc',
+                            padding: 10,
+                            borderRadius: 8,
+                            whiteSpace: 'pre-wrap'
+                        },
+                        children: toPrettyJson(options)
                     })
                 ]
             })
-        }
-    ];
-    return /*#__PURE__*/ _jsx(Drawer, {
-        title: /*#__PURE__*/ _jsx(Space, {
-            children: /*#__PURE__*/ _jsx("span", {
-                children: "🐛 开发工具"
-            })
-        }),
-        placement: "right",
-        width: 500,
-        open: visible,
-        onClose: onClose,
-        extra: /*#__PURE__*/ _jsx(Button, {
-            type: "text",
-            onClick: onClose,
-            children: "✕"
-        }),
-        children: /*#__PURE__*/ _jsx(Tabs, {
-            activeKey: activeTab,
-            onChange: setActiveTab,
-            items: tabItems
-        })
+        ]
     });
 }
-/**
- * 开发工具触发器
- */ export function DevToolsTrigger({ appInstance, position = 'bottom-right' }) {
-    const [visible, setVisible] = useState(false);
-    const positionStyle = {
+function resolvePosition(position) {
+    const style = {
         position: 'fixed',
-        zIndex: 9999,
-        ...position === 'bottom-right' && {
-            bottom: 20,
-            right: 20
-        },
-        ...position === 'bottom-left' && {
-            bottom: 20,
-            left: 20
-        },
-        ...position === 'top-right' && {
-            top: 20,
-            right: 20
-        },
-        ...position === 'top-left' && {
-            top: 20,
-            left: 20
-        }
+        zIndex: 9998
     };
-    // 只在开发环境显示
+    const pos = position || 'bottom-right';
+    if (pos.includes('bottom')) style.bottom = 16;
+    if (pos.includes('top')) style.top = 16;
+    if (pos.includes('right')) style.right = 16;
+    if (pos.includes('left')) style.left = 16;
+    return style;
+}
+export function DevToolsTrigger({ appInstance, position = 'bottom-right' }) {
+    const [visible, setVisible] = useState(false);
     if (process.env.NODE_ENV !== 'development') {
         return null;
     }
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(Button, {
-                type: "primary",
-                shape: "circle",
-                style: positionStyle,
+            /*#__PURE__*/ _jsx("button", {
                 onClick: ()=>setVisible(true),
-                children: "🐛"
+                style: {
+                    ...resolvePosition(position),
+                    border: 'none',
+                    background: '#2f80ed',
+                    color: '#fff',
+                    borderRadius: 999,
+                    padding: '8px 14px',
+                    cursor: 'pointer'
+                },
+                children: "DevTools"
             }),
             /*#__PURE__*/ _jsx(DevTools, {
                 appInstance: appInstance,

package/dist/core/dev/DevTools.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/core/dev/DevTools.tsx"],"sourcesContent":["/**\n * 开发工具模块\n * 提供开发模式下的调试工具\n */\n\nimport { useState, useEffect, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { Button, Drawer, Space, Typography, Divider, Tag, Tabs, Collapse, Badge } from 'antd';\nimport type { AppInstance } from '../startup/AppInstance';\n// import { getRouterManager } from '../router/RouterManager';\nimport { useStateManager } from '../app';\n\nconst { Title, Text, Paragraph } = Typography;\nconst { Panel } = Collapse;\n\n/**\n * 开发工具组件属性\n */\nexport interface DevToolsProps {\n  /**\n   * 应用实例\n   */\n  appInstance: AppInstance;\n\n  /**\n   * 是否显示\n   */\n  visible?: boolean;\n\n  /**\n   * 关闭回调\n   */\n  onClose?: () => void;\n}\n\n/**\n * 开发工具组件\n * \n * 优化：增强功能，添加状态管理器调试面板、路由调试面板等\n */\nexport function DevTools({ appInstance, visible, onClose }: DevToolsProps): ReactNode {\n  const [performanceMetrics, setPerformanceMetrics] = useState<Record<string, number>>({});\n  const [activeTab, setActiveTab] = useState<string>('overview');\n  const stateManager = useStateManager();\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const tracker = appInstance.getPerformanceTracker();\n    if (tracker) {\n      const metrics = tracker.getMetrics();\n      setPerformanceMetrics({\n        '服务初始化': metrics.serviceInitDuration || 0,\n        '初始化': metrics.initializationDuration || 0,\n        '首次渲染': metrics.firstRenderDuration || 0,\n        '总启动时间': metrics.totalStartupDuration || 0,\n        'FCP': metrics.fcp || 0,\n        'LCP': metrics.lcp || 0,\n        'FID': metrics.fid || 0,\n        'CLS': metrics.cls || 0,\n      });\n    }\n  }, [visible, appInstance]);\n\n  const options = appInstance.getOptions();\n  // const routerManager = getRouterManager();\n  // const isRouterEnabled = routerManager.isRouterEnabled();\n\n  // 获取状态管理器信息\n  const stateManagerInfo = useMemo(() => {\n    if (!stateManager) {\n      return null;\n    }\n\n    try {\n      // 尝试获取所有状态（如果支持）\n      const allStates = (stateManager as any).getAllStates?.() || [];\n      return {\n        stateCount: allStates.length,\n        states: allStates.slice(0, 10), // 只显示前10个\n      };\n    } catch {\n      return {\n        stateCount: 0,\n        states: [],\n      };\n    }\n  }, [stateManager]);\n\n  // 获取路由信息\n  // const routerInfo = useMemo(() => {\n  //   if (!isRouterEnabled) {\n  //     return null;\n  //   }\n\n  //   try {\n  //     const routes = (routerManager as any).getRoutes?.() || [];\n  //     return {\n  //       routeCount: routes.length,\n  //       mode: (routerManager as any).getRouterMode?.() || 'unknown',\n  //       routes: routes.slice(0, 10), // 只显示前10个\n  //     };\n  //   } catch {\n  //     return {\n  //       routeCount: 0,\n  //       mode: 'unknown',\n  //       routes: [],\n  //     };\n  //   }\n  // }, [routerManager, isRouterEnabled]);\n\n  const tabItems = [\n    {\n      key: 'overview',\n      label: '概览',\n      children: (\n        <Space direction=\"vertical\" style={{ width: '100%' }} size=\"large\">\n          <div>\n            <Title level={5}>应用实例</Title>\n            <Space direction=\"vertical\" size=\"small\">\n              <Text>实例ID: <Tag>{appInstance.id}</Tag></Text>\n              <Text>状态: <Tag color={appInstance.isInitialized() ? 'green' : 'orange'}>\n                {appInstance.isInitialized() ? '已初始化' : '未初始化'}\n              </Tag></Text>\n            </Space>\n          </div>\n\n          <Divider />\n\n          <div>\n            <Title level={5}>服务状态</Title>\n            <Space direction=\"vertical\" size=\"small\">\n              <Text>监控服务: <Tag color=\"green\">已启用</Tag></Text>\n              <Text>性能监控: <Tag color=\"green\">已启用</Tag></Text>\n              <Text>状态管理器: <Tag color=\"green\">已启用</Tag></Text>\n              {/* <Text>路由系统: <Tag color={isRouterEnabled ? 'green' : 'gray'}>\n                {isRouterEnabled ? '已启用' : '未启用'}\n              </Tag></Text> */}\n            </Space>\n          </div>\n        </Space>\n      ),\n    },\n    {\n      key: 'performance',\n      label: '性能',\n      children: (\n        <div>\n          <Title level={5}>性能指标</Title>\n          <Space direction=\"vertical\" size=\"small\" style={{ width: '100%' }}>\n            {Object.entries(performanceMetrics).map(([key, value]) => (\n              <div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>\n                <Text>{key}:</Text>\n                <Text strong>{value > 0 ? `${value.toFixed(2)}ms` : '-'}</Text>\n              </div>\n            ))}\n          </Space>\n        </div>\n      ),\n    },\n    {\n      key: 'state',\n      label: (\n        <span>\n          状态管理\n          {stateManagerInfo && stateManagerInfo.stateCount > 0 && (\n            <Badge count={stateManagerInfo.stateCount} style={{ marginLeft: 8 }} />\n          )}\n        </span>\n      ),\n      children: stateManagerInfo ? (\n        <div>\n          <Title level={5}>状态管理器</Title>\n          <Space direction=\"vertical\" size=\"small\" style={{ width: '100%' }}>\n            <Text>状态总数: <Tag>{stateManagerInfo.stateCount}</Tag></Text>\n            {stateManagerInfo.states.length > 0 && (\n              <Collapse>\n                <Panel header=\"状态列表\" key=\"states\">\n                  <Space direction=\"vertical\" size=\"small\" style={{ width: '100%' }}>\n                    {stateManagerInfo.states.map((state: any, index: number) => (\n                      <div key={index} style={{ fontSize: '12px' }}>\n                        <Text code>\n                          {state.id || `State ${index + 1}`}\n                        </Text>\n                      </div>\n                    ))}\n                  </Space>\n                </Panel>\n              </Collapse>\n            )}\n          </Space>\n        </div>\n      ) : (\n        <Text type=\"secondary\">状态管理器未初始化</Text>\n      ),\n    },\n    \n    {\n      key: 'config',\n      label: '配置',\n      children: (\n        <div>\n          <Title level={5}>配置信息</Title>\n          <Paragraph>\n            <Text code style={{ fontSize: '12px', whiteSpace: 'pre-wrap' }}>\n              {JSON.stringify(options, null, 2)}\n            </Text>\n          </Paragraph>\n        </div>\n      ),\n    },\n  ];\n\n  return (\n    <Drawer\n      title={\n        <Space>\n          <span>🐛 开发工具</span>\n        </Space>\n      }\n      placement=\"right\"\n      width={500}\n      open={visible}\n      onClose={onClose}\n      extra={\n        <Button\n          type=\"text\"\n          onClick={onClose}\n        >\n          ✕\n        </Button>\n      }\n    >\n      <Tabs\n        activeKey={activeTab}\n        onChange={setActiveTab}\n        items={tabItems}\n      />\n    </Drawer>\n  );\n}\n\n/**\n * 开发工具触发器组件\n */\nexport interface DevToolsTriggerProps {\n  /**\n   * 应用实例\n   */\n  appInstance: AppInstance;\n\n  /**\n   * 触发按钮位置\n   */\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n}\n\n/**\n * 开发工具触发器\n */\nexport function DevToolsTrigger({ appInstance, position = 'bottom-right' }: DevToolsTriggerProps): ReactNode {\n  const [visible, setVisible] = useState(false);\n\n  const positionStyle: React.CSSProperties = {\n    position: 'fixed',\n    zIndex: 9999,\n    ...(position === 'bottom-right' && { bottom: 20, right: 20 }),\n    ...(position === 'bottom-left' && { bottom: 20, left: 20 }),\n    ...(position === 'top-right' && { top: 20, right: 20 }),\n    ...(position === 'top-left' && { top: 20, left: 20 }),\n  };\n\n  // 只在开发环境显示\n  if (process.env.NODE_ENV !== 'development') {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        type=\"primary\"\n        shape=\"circle\"\n        style={positionStyle}\n        onClick={() => setVisible(true)}\n      >\n        🐛\n      </Button>\n      <DevTools\n        appInstance={appInstance}\n        visible={visible}\n        onClose={() => setVisible(false)}\n      />\n    </>\n  );\n}\n"],"names":["useState","useEffect","useMemo","Button","Drawer","Space","Typography","Divider","Tag","Tabs","Collapse","Badge","useStateManager","Title","Text","Paragraph","Panel","DevTools","appInstance","visible","onClose","performanceMetrics","setPerformanceMetrics","activeTab","setActiveTab","stateManager","tracker","getPerformanceTracker","metrics","getMetrics","serviceInitDuration","initializationDuration","firstRenderDuration","totalStartupDuration","fcp","lcp","fid","cls","options","getOptions","stateManagerInfo","allStates","getAllStates","stateCount","length","states","slice","tabItems","key","label","children","direction","style","width","size","div","level","id","color","isInitialized","Object","entries","map","value","display","justifyContent","strong","toFixed","span","count","marginLeft","header","state","index","fontSize","code","type","whiteSpace","JSON","stringify","title","placement","open","extra","onClick","activeKey","onChange","items","DevToolsTrigger","position","setVisible","positionStyle","zIndex","bottom","right","left","top","process","env","NODE_ENV","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/core/dev/DevTools.tsx"],"sourcesContent":["/**\n * 开发工具模块（无 UI 框架依赖）\n */\n\nimport { useState, useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport type { AppInstance } from '../startup/AppInstance';\nimport { useStateManager } from '../app';\n\nexport interface DevToolsProps {\n  appInstance: AppInstance;\n  visible?: boolean;\n  onClose?: () => void;\n}\n\nfunction toPrettyJson(value: unknown): string {\n  try {\n    return JSON.stringify(value, null, 2);\n  } catch {\n    return String(value);\n  }\n}\n\nexport function DevTools({ appInstance, visible, onClose }: DevToolsProps): ReactNode {\n  const [performanceMetrics, setPerformanceMetrics] = useState<Record<string, number>>({});\n  const stateManager = useStateManager();\n\n  useEffect(() => {\n    if (!visible) {\n      return;\n    }\n    const tracker = appInstance.getPerformanceTracker();\n    if (!tracker) {\n      return;\n    }\n    const metrics = tracker.getMetrics();\n    setPerformanceMetrics({\n      serviceInitDuration: metrics.serviceInitDuration || 0,\n      initializationDuration: metrics.initializationDuration || 0,\n      firstRenderDuration: metrics.firstRenderDuration || 0,\n      totalStartupDuration: metrics.totalStartupDuration || 0,\n      fcp: metrics.fcp || 0,\n      lcp: metrics.lcp || 0,\n      fid: metrics.fid || 0,\n      cls: metrics.cls || 0,\n    });\n  }, [visible, appInstance]);\n\n  if (!visible) {\n    return null;\n  }\n\n  const options = appInstance.getOptions();\n  const allStates = (stateManager as any)?.getAllStates?.() || [];\n\n  return (\n    <div\n      style={{\n        position: 'fixed',\n        top: 0,\n        right: 0,\n        width: 'min(680px, 95vw)',\n        height: '100vh',\n        zIndex: 9999,\n        background: '#fff',\n        borderLeft: '1px solid #d9e2ec',\n        padding: 16,\n        overflowY: 'auto',\n        boxShadow: '-8px 0 20px rgba(0, 0, 0, 0.08)',\n      }}\n    >\n      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>\n        <h3 style={{ margin: 0 }}>DevTools</h3>\n        <button onClick={onClose} style={{ border: 'none', background: 'transparent', cursor: 'pointer' }}>\n          关闭\n        </button>\n      </div>\n\n      <section style={{ marginTop: 12 }}>\n        <h4>实例</h4>\n        <div>id: {appInstance.id}</div>\n        <div>initialized: {String(appInstance.isInitialized())}</div>\n      </section>\n\n      <section style={{ marginTop: 12 }}>\n        <h4>性能</h4>\n        <pre style={{ background: '#f7fafc', padding: 10, borderRadius: 8 }}>{toPrettyJson(performanceMetrics)}</pre>\n      </section>\n\n      <section style={{ marginTop: 12 }}>\n        <h4>状态管理</h4>\n        <div>stateCount: {allStates.length}</div>\n        <pre style={{ background: '#f7fafc', padding: 10, borderRadius: 8 }}>{toPrettyJson(allStates.slice(0, 10))}</pre>\n      </section>\n\n      <section style={{ marginTop: 12 }}>\n        <h4>配置</h4>\n        <pre style={{ background: '#f7fafc', padding: 10, borderRadius: 8, whiteSpace: 'pre-wrap' }}>{toPrettyJson(options)}</pre>\n      </section>\n    </div>\n  );\n}\n\nexport interface DevToolsTriggerProps {\n  appInstance: AppInstance;\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n}\n\nfunction resolvePosition(position: DevToolsTriggerProps['position']): React.CSSProperties {\n  const style: React.CSSProperties = { position: 'fixed', zIndex: 9998 };\n  const pos = position || 'bottom-right';\n\n  if (pos.includes('bottom')) style.bottom = 16;\n  if (pos.includes('top')) style.top = 16;\n  if (pos.includes('right')) style.right = 16;\n  if (pos.includes('left')) style.left = 16;\n\n  return style;\n}\n\nexport function DevToolsTrigger({ appInstance, position = 'bottom-right' }: DevToolsTriggerProps): ReactNode {\n  const [visible, setVisible] = useState(false);\n\n  if (process.env.NODE_ENV !== 'development') {\n    return null;\n  }\n\n  return (\n    <>\n      <button\n        onClick={() => setVisible(true)}\n        style={{\n          ...resolvePosition(position),\n          border: 'none',\n          background: '#2f80ed',\n          color: '#fff',\n          borderRadius: 999,\n          padding: '8px 14px',\n          cursor: 'pointer',\n        }}\n      >\n        DevTools\n      </button>\n      <DevTools appInstance={appInstance} visible={visible} onClose={() => setVisible(false)} />\n    </>\n  );\n}\n"],"names":["useState","useEffect","useStateManager","toPrettyJson","value","JSON","stringify","String","DevTools","appInstance","visible","onClose","performanceMetrics","setPerformanceMetrics","stateManager","tracker","getPerformanceTracker","metrics","getMetrics","serviceInitDuration","initializationDuration","firstRenderDuration","totalStartupDuration","fcp","lcp","fid","cls","options","getOptions","allStates","getAllStates","div","style","position","top","right","width","height","zIndex","background","borderLeft","padding","overflowY","boxShadow","display","justifyContent","alignItems","h3","margin","button","onClick","border","cursor","section","marginTop","h4","id","isInitialized","pre","borderRadius","length","slice","whiteSpace","resolvePosition","pos","includes","bottom","left","DevToolsTrigger","setVisible","process","env","NODE_ENV","color"],"mappings":"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"}