diff --git a/.env b/.env
index a018793..e170176 100644
--- a/.env
+++ b/.env
@@ -1 +1 @@
-VUE_APP_API_URL=http://localhost:8000
+VUE_APP_API_URL=""
diff --git a/.env.development b/.env.development
index 0bcb566..cbf6553 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VUE_APP_API_URL=http://175.178.49.104:8000
+VUE_APP_API_URL="http://10.86.32.70:8000"
diff --git a/openapi.yaml b/openapi.yaml
index c3dcec4..c904635 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -122,17 +122,17 @@ paths:
                         application/json:
                             schema:
                                 $ref: '#/components/schemas/filemanager.v1.DownloadFileReply'
-    /api/runtime/call-stats:
+    /api/runtime/function/analysis:
         post:
             tags:
                 - Analysis
-            description: GetFunctionCallStats 获取函数调用统计分析
-            operationId: Analysis_GetFunctionCallStats
+            description: GetFunctionAnalysis 获取函数调用关系分析
+            operationId: Analysis_GetFunctionAnalysis
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetFunctionCallStatsReq'
+                            $ref: '#/components/schemas/analysis.v1.GetFunctionAnalysisReq'
                 required: true
             responses:
                 "200":
@@ -140,18 +140,18 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetFunctionCallStatsReply'
-    /api/runtime/function/analysis:
+                                $ref: '#/components/schemas/analysis.v1.GetFunctionAnalysisReply'
+    /api/runtime/function/anomalies:
         post:
             tags:
                 - Analysis
-            description: GetFunctionAnalysis 获取函数调用关系分析
-            operationId: Analysis_GetFunctionAnalysis
+            description: GetPerformanceAnomalies 获取性能异常检测结果
+            operationId: Analysis_GetPerformanceAnomalies
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetFunctionAnalysisReq'
+                            $ref: '#/components/schemas/analysis.v1.GetPerformanceAnomaliesReq'
                 required: true
             responses:
                 "200":
@@ -159,18 +159,18 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetFunctionAnalysisReply'
-    /api/runtime/function/graph:
+                                $ref: '#/components/schemas/analysis.v1.GetPerformanceAnomaliesReply'
+    /api/runtime/function/stats:
         post:
             tags:
                 - Analysis
-            description: GetFunctionCallGraph 获取函数调用关系图
-            operationId: Analysis_GetFunctionCallGraph
+            description: GetFunctionCallStats 获取函数调用统计分析
+            operationId: Analysis_GetFunctionCallStats
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReq'
+                            $ref: '#/components/schemas/analysis.v1.GetFunctionCallStatsReq'
                 required: true
             responses:
                 "200":
@@ -178,24 +178,17 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReply'
-    /api/runtime/function/{functionName}/graph:
+                                $ref: '#/components/schemas/analysis.v1.GetFunctionCallStatsReply'
+    /api/runtime/functions:
         post:
             tags:
                 - Analysis
-            description: GetFunctionCallGraph 获取函数调用关系图
-            operationId: Analysis_GetFunctionCallGraph
-            parameters:
-                - name: functionName
-                  in: path
-                  required: true
-                  schema:
-                    type: string
+            operationId: Analysis_GetAllFunctionName
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReq'
+                            $ref: '#/components/schemas/analysis.v1.GetAllFunctionNameReq'
                 required: true
             responses:
                 "200":
@@ -203,17 +196,18 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReply'
-    /api/runtime/functions:
+                                $ref: '#/components/schemas/analysis.v1.GetAllFunctionNameReply'
+    /api/runtime/functions/children:
         post:
             tags:
                 - Analysis
-            operationId: Analysis_GetAllFunctionName
+            description: GetChildFunctions 获取函数的子函数
+            operationId: Analysis_GetChildFunctions
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetAllFunctionNameReq'
+                            $ref: '#/components/schemas/analysis.v1.GetChildFunctionsReq'
                 required: true
             responses:
                 "200":
@@ -221,18 +215,18 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetAllFunctionNameReply'
-    /api/runtime/functions/parent-ids:
+                                $ref: '#/components/schemas/analysis.v1.GetChildFunctionsReply'
+    /api/runtime/functions/parents:
         post:
             tags:
                 - Analysis
-            description: GetAllParentIds 获取所有的父函数ID
-            operationId: Analysis_GetAllParentIds
+            description: GetParentFunctions 获取所有的父函数
+            operationId: Analysis_GetParentFunctions
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetAllParentIdsReq'
+                            $ref: '#/components/schemas/analysis.v1.GetParentFunctionsReq'
                 required: true
             responses:
                 "200":
@@ -240,24 +234,18 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetAllParentIdsReply'
-    /api/runtime/functions/{parentId}/children:
+                                $ref: '#/components/schemas/analysis.v1.GetParentFunctionsReply'
+    /api/runtime/functions/search:
         post:
             tags:
                 - Analysis
-            description: GetChildFunctions 获取函数的子函数
-            operationId: Analysis_GetChildFunctions
-            parameters:
-                - name: parentId
-                  in: path
-                  required: true
-                  schema:
-                    type: string
+            description: SearchFunctions 搜索函数
+            operationId: Analysis_SearchFunctions
             requestBody:
                 content:
                     application/json:
                         schema:
-                            $ref: '#/components/schemas/analysis.v1.GetChildFunctionsReq'
+                            $ref: '#/components/schemas/analysis.v1.SearchFunctionsReq'
                 required: true
             responses:
                 "200":
@@ -265,7 +253,7 @@ paths:
                     content:
                         application/json:
                             schema:
-                                $ref: '#/components/schemas/analysis.v1.GetChildFunctionsReply'
+                                $ref: '#/components/schemas/analysis.v1.SearchFunctionsReply'
     /api/runtime/gids:
         post:
             tags:
@@ -340,25 +328,6 @@ paths:
                         application/json:
                             schema:
                                 $ref: '#/components/schemas/analysis.v1.GetHotFunctionsReply'
-    /api/runtime/hot-paths:
-        post:
-            tags:
-                - Analysis
-            description: GetFunctionHotPaths 获取函数热点路径分析
-            operationId: Analysis_GetFunctionHotPaths
-            requestBody:
-                content:
-                    application/json:
-                        schema:
-                            $ref: '#/components/schemas/analysis.v1.GetFunctionHotPathsReq'
-                required: true
-            responses:
-                "200":
-                    description: OK
-                    content:
-                        application/json:
-                            schema:
-                                $ref: '#/components/schemas/analysis.v1.GetFunctionHotPathsReply'
     /api/runtime/instrument:
         post:
             tags:
@@ -403,43 +372,6 @@ paths:
                         application/json:
                             schema:
                                 $ref: '#/components/schemas/analysis.v1.GetParamsByIDReply'
-    /api/runtime/performance-anomalies:
-        post:
-            tags:
-                - Analysis
-            description: GetPerformanceAnomalies 获取性能异常检测结果
-            operationId: Analysis_GetPerformanceAnomalies
-            requestBody:
-                content:
-                    application/json:
-                        schema:
-                            $ref: '#/components/schemas/analysis.v1.GetPerformanceAnomaliesReq'
-                required: true
-            responses:
-                "200":
-                    description: OK
-                    content:
-                        application/json:
-                            schema:
-                                $ref: '#/components/schemas/analysis.v1.GetPerformanceAnomaliesReply'
-    /api/runtime/traces/graph:
-        post:
-            tags:
-                - Analysis
-            operationId: Analysis_GetTraceGraph
-            requestBody:
-                content:
-                    application/json:
-                        schema:
-                            $ref: '#/components/schemas/analysis.v1.GetTraceGraphReq'
-                required: true
-            responses:
-                "200":
-                    description: OK
-                    content:
-                        application/json:
-                            schema:
-                                $ref: '#/components/schemas/analysis.v1.GetTraceGraphReply'
     /api/runtime/traces/parent/{parentId}:
         post:
             tags:
@@ -954,6 +886,20 @@ components:
                     type: number
                     format: double
             description: 函数调用统计信息
+        analysis.v1.FunctionNode:
+            type: object
+            properties:
+                id:
+                    type: string
+                name:
+                    type: string
+                package:
+                    type: string
+                callCount:
+                    type: integer
+                    format: int32
+                avgTime:
+                    type: string
         analysis.v1.GetAllFunctionNameReply:
             type: object
             properties:
@@ -1003,27 +949,13 @@ components:
                     type: boolean
                 dbpath:
                     type: string
-        analysis.v1.GetAllParentIdsReply:
-            type: object
-            properties:
-                parentIds:
-                    type: array
-                    items:
-                        type: string
-            description: GetAllParentIdsReply 获取所有的父函数ID的响应
-        analysis.v1.GetAllParentIdsReq:
-            type: object
-            properties:
-                dbpath:
-                    type: string
-            description: GetAllParentIdsReq 获取所有的父函数ID的请求
         analysis.v1.GetChildFunctionsReply:
             type: object
             properties:
-                childFunctions:
+                functions:
                     type: array
                     items:
-                        type: string
+                        $ref: '#/components/schemas/analysis.v1.FunctionNode'
             description: GetChildFunctionsReply 获取函数的子函数的响应
         analysis.v1.GetChildFunctionsReq:
             type: object
@@ -1066,61 +998,9 @@ components:
                     type: string
                 type:
                     type: string
-                path:
-                    type: string
-            description: GetFunctionAnalysisReq 获取函数调用关系分析的请求
-        analysis.v1.GetFunctionCallGraphReply:
-            type: object
-            properties:
-                nodes:
-                    type: array
-                    items:
-                        $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReply_GraphNode'
-                edges:
-                    type: array
-                    items:
-                        $ref: '#/components/schemas/analysis.v1.GetFunctionCallGraphReply_GraphEdge'
-            description: GetFunctionCallGraphReply 获取函数调用关系图的响应
-        analysis.v1.GetFunctionCallGraphReply_GraphEdge:
-            type: object
-            properties:
-                source:
-                    type: string
-                target:
-                    type: string
-                label:
-                    type: string
-                edgeType:
-                    type: string
-        analysis.v1.GetFunctionCallGraphReply_GraphNode:
-            type: object
-            properties:
-                id:
-                    type: string
-                name:
-                    type: string
-                package:
-                    type: string
-                callCount:
-                    type: integer
-                    format: int32
-                avgTime:
-                    type: string
-                nodeType:
-                    type: string
-        analysis.v1.GetFunctionCallGraphReq:
-            type: object
-            properties:
-                functionName:
-                    type: string
-                depth:
-                    type: integer
-                    format: int32
-                direction:
-                    type: string
                 dbpath:
                     type: string
-            description: GetFunctionCallGraphReq 获取函数调用关系图的请求
+            description: GetFunctionAnalysisReq 获取函数调用关系分析的请求
         analysis.v1.GetFunctionCallStatsReply:
             type: object
             properties:
@@ -1137,25 +1017,6 @@ components:
                 functionName:
                     type: string
             description: 获取函数调用统计请求
-        analysis.v1.GetFunctionHotPathsReply:
-            type: object
-            properties:
-                paths:
-                    type: array
-                    items:
-                        $ref: '#/components/schemas/analysis.v1.HotPathInfo'
-            description: 获取函数热点路径响应
-        analysis.v1.GetFunctionHotPathsReq:
-            type: object
-            properties:
-                dbPath:
-                    type: string
-                functionName:
-                    type: string
-                limit:
-                    type: integer
-                    format: int32
-            description: 获取函数热点路径请求
         analysis.v1.GetGidsByFunctionNameReply:
             type: object
             properties:
@@ -1252,6 +1113,20 @@ components:
                     format: int32
                 dbpath:
                     type: string
+        analysis.v1.GetParentFunctionsReply:
+            type: object
+            properties:
+                functions:
+                    type: array
+                    items:
+                        $ref: '#/components/schemas/analysis.v1.FunctionNode'
+        analysis.v1.GetParentFunctionsReq:
+            type: object
+            properties:
+                dbpath:
+                    type: string
+                functionName:
+                    type: string
         analysis.v1.GetPerformanceAnomaliesReply:
             type: object
             properties:
@@ -1271,24 +1146,6 @@ components:
                     type: number
                     format: double
             description: 获取性能异常检测请求
-        analysis.v1.GetTraceGraphReply:
-            type: object
-            properties:
-                nodes:
-                    type: array
-                    items:
-                        $ref: '#/components/schemas/analysis.v1.GraphNode'
-                edges:
-                    type: array
-                    items:
-                        $ref: '#/components/schemas/analysis.v1.GraphEdge'
-        analysis.v1.GetTraceGraphReq:
-            type: object
-            properties:
-                gid:
-                    type: string
-                dbpath:
-                    type: string
         analysis.v1.GetTracesByParentFuncReply:
             type: object
             properties:
@@ -1349,8 +1206,10 @@ components:
         analysis.v1.GetTreeGraphReply:
             type: object
             properties:
-                root:
-                    $ref: '#/components/schemas/analysis.v1.TreeNode'
+                trees:
+                    type: array
+                    items:
+                        $ref: '#/components/schemas/analysis.v1.TreeNode'
             description: 获取树状图响应
         analysis.v1.GetTreeGraphReq:
             type: object
@@ -1361,6 +1220,9 @@ components:
                     type: string
                 chainType:
                     type: string
+                depth:
+                    type: integer
+                    format: int32
             description: 获取树状图请求
         analysis.v1.GetUnfinishedFunctionsReply:
             type: object
@@ -1400,47 +1262,6 @@ components:
                     type: integer
                     format: int32
             description: GetUnfinishedFunctions 请求
-        analysis.v1.GraphEdge:
-            type: object
-            properties:
-                source:
-                    type: string
-                target:
-                    type: string
-                label:
-                    type: string
-                count:
-                    type: integer
-                    format: int32
-        analysis.v1.GraphNode:
-            type: object
-            properties:
-                id:
-                    type: string
-                name:
-                    type: string
-                callCount:
-                    type: integer
-                    format: int32
-                package:
-                    type: string
-                timeCost:
-                    type: string
-        analysis.v1.HotPathInfo:
-            type: object
-            properties:
-                path:
-                    type: array
-                    items:
-                        type: string
-                callCount:
-                    type: integer
-                    format: int32
-                totalTime:
-                    type: string
-                avgTime:
-                    type: string
-            description: 热点路径信息
         analysis.v1.InstrumentProjectReply:
             type: object
             properties:
@@ -1474,6 +1295,40 @@ components:
                     additionalProperties:
                         type: string
             description: 性能异常信息
+        analysis.v1.SearchFunctionsReply:
+            type: object
+            properties:
+                functions:
+                    type: array
+                    items:
+                        $ref: '#/components/schemas/analysis.v1.SearchFunctionsReply_FunctionInfo'
+                total:
+                    type: integer
+                    format: int32
+            description: 函数搜索结果
+        analysis.v1.SearchFunctionsReply_FunctionInfo:
+            type: object
+            properties:
+                name:
+                    type: string
+                package:
+                    type: string
+                callCount:
+                    type: integer
+                    format: int32
+                avgTime:
+                    type: string
+        analysis.v1.SearchFunctionsReq:
+            type: object
+            properties:
+                dbpath:
+                    type: string
+                query:
+                    type: string
+                limit:
+                    type: integer
+                    format: int32
+            description: 搜索函数请求
         analysis.v1.TraceParams:
             type: object
             properties:
diff --git a/src/App.vue b/src/App.vue
index 23e1470..81377ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,53 +1,49 @@
 <template>
-  <div id="app">
-    <div>
-      <nav class="navbar navbar-expand-lg navbar-dark">
-        <div class="container-fluid">
-          <router-link to="/" class="navbar-brand">
-            <i class="bi bi-code-square me-2"></i>{{ $t('nav.title', 'Go代码分析平台') }}
-          </router-link>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
-            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <router-link to="/" class="nav-link" exact-active-class="active">
-                  <i class="bi bi-house-door me-1"></i>{{ $t('nav.home') }}
-                </router-link>
-              </li>
-              <li class="nav-item">
-                <router-link to="/allgids" class="nav-link" active-class="active">
-                  <i class="bi bi-activity me-1"></i>{{ $t('nav.runtimeAnalysis') }}
-                </router-link>
-              </li>
-              <li class="nav-item">
-                <router-link to="/static-analysis" class="nav-link" active-class="active">
-                  <i class="bi bi-diagram-3 me-1"></i>{{ $t('nav.staticAnalysis') }}
-                </router-link>
-              </li>
-            </ul>
-            
-            <!-- 语言切换按钮 - 靠右显示 -->
-            <ul class="navbar-nav ms-auto">
-              <router-link to="/language" class="nav-link" active-class="active">
-                  <i class="bi bi-diagram-3 me-1"></i>{{ $t('welcome.setlanguage.button') }}
-                </router-link>
-             
-            </ul>
-          </div>
+  <div id="app" class="modern-theme">
+    <nav class="navbar navbar-expand-lg navbar-glass">
+      <div class="container-fluid">
+        <router-link to="/" class="navbar-brand glow-text">
+          <i class="bi bi-code-square me-2"></i>{{ $t('nav.title', 'Go代码分析平台') }}
+        </router-link>
+        <button class="navbar-toggler custom-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+          aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <router-link to="/" class="nav-link nav-button" exact-active-class="active">
+                <i class="bi bi-house-door me-1"></i>{{ $t('nav.home') }}
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link to="/allgids" class="nav-link nav-button" active-class="active">
+                <i class="bi bi-activity me-1"></i>{{ $t('nav.runtimeAnalysis') }}
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link to="/static-analysis" class="nav-link nav-button" active-class="active">
+                <i class="bi bi-diagram-3 me-1"></i>{{ $t('nav.staticAnalysis') }}
+              </router-link>
+            </li>
+          </ul>
+          
+          <ul class="navbar-nav ms-auto">
+            <router-link to="/language" class="nav-link nav-button" active-class="active">
+              <i class="bi bi-globe2 me-1"></i>{{ $t('welcome.setlanguage.button') }}
+            </router-link>
+          </ul>
         </div>
-      </nav>
-      <main class="container mt-4 fade-in">
-        <router-view></router-view> <!-- 动态内容区域 -->
-      </main>
-      <footer class="footer mt-5 py-3 bg-light">
-        <div class="container text-center">
-          <span class="text-muted">{{ $t('nav.title', 'Go代码分析平台') }} &copy; 2024</span>
-        </div>
-      </footer>
-    </div>
+      </div>
+    </nav>
+    <main class="container mt-4 fade-in">
+      <router-view></router-view>
+    </main>
+    <footer class="footer mt-5 py-3">
+      <div class="container text-center">
+        <span class="footer-text">{{ $t('nav.title', 'Go代码分析平台') }} &copy; 2024</span>
+      </div>
+    </footer>
   </div>
 </template>
 
@@ -107,20 +103,181 @@ export default {
 </script>
 
 <style>
+:root {
+  --primary-color: #4785ff;
+  --secondary-color: #2684ff;
+  --accent-color: #4c9aff;
+  --background-color: #f8f9fa;
+  --text-color: #2c3e50;
+  --hover-color: #0052cc;
+  --success-color: #0065ff;
+  --success-hover: #0052cc;
+  --gray-color: #42526e;
+  --gray-hover: #505f79;
+  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+}
+
 #app {
-  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: var(--text-color);
+  background-color: var(--background-color);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modern-theme {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9f2ff 100%);
+}
+
+.navbar-glass {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid rgba(0, 82, 204, 0.08);
+  padding: 0.8rem 0;
+}
+
+.glow-text {
+  color: var(--primary-color) !important;
+  text-shadow: 0 0 10px rgba(0, 82, 204, 0.15);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  letter-spacing: -0.5px;
+}
+
+.glow-text:hover {
+  color: var(--hover-color) !important;
+  text-shadow: 0 0 15px rgba(0, 82, 204, 0.3);
+}
+
+.nav-button {
+  position: relative;
+  color: var(--text-color) !important;
+  padding: 0.5rem 1rem;
+  margin: 0 0.25rem;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  font-weight: 500;
+}
+
+.nav-button:hover, .nav-button.active {
+  color: var(--primary-color) !important;
+  background: rgba(0, 82, 204, 0.08);
+}
+
+.nav-button::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 2px;
+  background: var(--primary-color);
+  transition: all 0.3s ease;
+  transform: translateX(-50%);
+}
+
+.nav-button:hover::after, .nav-button.active::after {
+  width: 70%;
+}
+
+.custom-toggler {
+  border: none;
+  padding: 0.5rem;
+  border-radius: 6px;
+  background: rgba(0, 82, 204, 0.08);
+}
+
+main {
+  flex: 1;
+}
+
+.card {
+  border: none;
+  border-radius: 8px;
+  box-shadow: var(--card-shadow);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  overflow: hidden;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  background-color: rgba(255, 255, 255, 0.8);
+  font-weight: 600;
+}
+
+.btn {
+  border-radius: 6px;
+  font-weight: 500;
+  padding: 0.5rem 1.25rem;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.btn-primary {
+  background: var(--primary-color);
+  box-shadow: 0 2px 10px rgba(71, 133, 255, 0.2);
+}
+
+.btn-primary:hover {
+  background: var(--hover-color);
+  box-shadow: 0 4px 12px rgba(71, 133, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .footer {
-  margin-top: 60px;
-  border-top: 1px solid #eaeaea;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-top: 1px solid rgba(0, 82, 204, 0.08);
+  position: relative;
+  margin-top: auto;
+}
+
+.footer-text {
+  color: var(--text-color);
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+/* 全局样式优化 */
+input.form-control, select.form-select {
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.6rem 1rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
+}
+
+input.form-control:focus, select.form-select:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(71, 133, 255, 0.15);
+}
+
+.alert {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
-.dropdown-item.active {
-  background-color: #f8f9fa;
-  color: #212529;
+.table {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--card-shadow);
 }
 </style>
diff --git a/src/components/Language.vue b/src/components/Language.vue
index 26f4c6b..40379e2 100644
--- a/src/components/Language.vue
+++ b/src/components/Language.vue
@@ -1,17 +1,45 @@
 <template>
   <div class="set-language">
-    <div class="card">
-      <div class="card-header">
-        <h5>{{ $t('common.language') }} </h5>
-      </div>
-      <div class="card-body">
-        <p>当前语言: <strong>{{ currentLanguage }}</strong></p>
-        <p>{{ $t('nav.title') }}</p>
-        <p>{{ $t('staticAnalysis.title') }}</p>
+    <div class="language-container">
+      <div class="language-card">
+        <div class="language-header">
+          <h3 class="gradient-text">{{ $t('common.language') }}</h3>
+          <div class="current-language">
+            <i class="bi bi-globe2 me-2"></i>
+            <span>{{ currentLanguage }}</span>
+          </div>
+        </div>
         
-        <div class="btn-group mt-3">
-          <button class="btn btn-primary" @click="changeLanguage('zh')">切换到中文</button>
-          <button class="btn btn-secondary" @click="changeLanguage('en')">Switch to English</button>
+        <div class="language-body">
+          <div class="language-preview">
+            <div class="preview-item">
+              <i class="bi bi-translate me-2"></i>
+              <span>{{ $t('nav.title') }}</span>
+            </div>
+            <div class="preview-item">
+              <i class="bi bi-code-square me-2"></i>
+              <span>{{ $t('staticAnalysis.title') }}</span>
+            </div>
+          </div>
+          
+          <div class="language-buttons">
+            <button 
+              class="lang-btn zh-btn" 
+              :class="{ 'active': currentLanguage === '中文' }"
+              @click="changeLanguage('zh')"
+            >
+              <i class="bi bi-check-circle-fill me-2"></i>
+              切换到中文
+            </button>
+            <button 
+              class="lang-btn en-btn" 
+              :class="{ 'active': currentLanguage === 'English' }"
+              @click="changeLanguage('en')"
+            >
+              <i class="bi bi-check-circle-fill me-2"></i>
+              Switch to English
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -46,8 +74,171 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .set-language {
-  margin: 20px;
+  min-height: calc(100vh - 200px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--background-color) 0%, #deebff 100%);
+  padding: 2rem;
+}
+
+.language-container {
+  width: 100%;
+  max-width: 600px;
+  animation: fadeIn 0.5s ease-out;
+}
+
+.language-card {
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.language-card:hover {
+  transform: translateY(-5px);
+}
+
+.language-header {
+  background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
+  padding: 2rem;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gradient-text {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.75rem;
+}
+
+.current-language {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.5rem 1rem;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+
+.language-body {
+  padding: 2rem;
+}
+
+.language-preview {
+  background: rgba(0, 0, 0, 0.03);
+  border-radius: 16px;
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.preview-item {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 12px;
+  transition: background-color 0.3s ease;
+  color: var(--text-color);
+}
+
+.preview-item:hover {
+  background: rgba(0, 82, 204, 0.05);
+}
+
+.preview-item + .preview-item {
+  margin-top: 0.5rem;
+}
+
+.language-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.lang-btn {
+  border: none;
+  padding: 1rem;
+  border-radius: 12px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.lang-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.lang-btn:hover::before {
+  transform: translateX(0);
+}
+
+.zh-btn {
+  background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
+  color: white;
+}
+
+.en-btn {
+  background: linear-gradient(120deg, var(--gray-color), var(--gray-hover));
+  color: white;
+}
+
+.lang-btn.active {
+  transform: scale(0.98);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.lang-btn i {
+  opacity: 0;
+  transform: scale(0);
+  transition: all 0.3s ease;
+}
+
+.lang-btn.active i {
+  opacity: 1;
+  transform: scale(1);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 576px) {
+  .language-buttons {
+    grid-template-columns: 1fr;
+  }
+  
+  .language-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .current-language {
+    margin-top: 1rem;
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index f1ba6f3..9e67025 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="welcome-page">
-    <div class="container py-5">
-      <div class="text-center mb-5">
-        <h1 class="display-4 fw-bold text-primary">{{ $t('welcome.title') }}</h1>
-        <p class="lead">{{ $t('welcome.subtitle') }}</p>
+    <div class="container py-4">
+      <div class="text-center mb-4">
+        <h1 class="display-5 fw-bold title-gradient mb-2">{{ $t('welcome.title') }}</h1>
+        <p class="lead mb-0">{{ $t('welcome.subtitle') }}</p>
       </div>
 
-      <div class="row justify-content-center mb-5">
+      <div class="row justify-content-center mb-4">
         <div class="col-md-8">
-          <div class="card shadow-lg border-0">
-            <div class="card-body p-5">
-              <h2 class="card-title text-center mb-4"><i class="bi bi-info-circle me-2"></i>{{ $t('welcome.about.title') }}</h2>
+          <div class="card shadow-sm border-0 hover-card">
+            <div class="card-body p-4">
+              <h2 class="card-title fs-4 mb-3"><i class="bi bi-info-circle text-primary me-2"></i>{{ $t('welcome.about.title') }}</h2>
               <p class="card-text">
                 {{ $t('welcome.about.content') }}
               </p>
@@ -19,31 +19,31 @@
         </div>
       </div>
 
-      <h2 class="text-center mb-4"><i class="bi bi-tools me-2"></i>{{ $t('welcome.features') }}</h2>
+      <h2 class="text-center fs-4 mb-4"><i class="bi bi-tools text-primary me-2"></i>{{ $t('welcome.features') }}</h2>
       
       <!-- 程序运行分析功能区 -->
-      <div class="card mb-5">
-        <div class="card-header bg-primary text-white">
-          <h3 class="h5 mb-0"><i class="bi bi-activity me-2"></i>{{ $t('welcome.runtime.title') }}</h3>
+      <div class="card mb-4 feature-card">
+        <div class="card-header bg-primary text-white py-3">
+          <h3 class="h5 mb-0 d-flex align-items-center"><i class="bi bi-activity me-2"></i>{{ $t('welcome.runtime.title') }}</h3>
         </div>
-        <div class="card-body">
-          <div class="row">
+        <div class="card-body p-4">
+          <div class="row g-4">
             <div class="col-md-7">
               <p class="card-text">
                 {{ $t('welcome.runtime.description') }}
               </p>
               
               <!-- 项目插桩区域 -->
-              <div class="card mt-3 mb-3">
-                <div class="card-header bg-gray text-white">
-                  <h5 class="mb-0"><i class="bi bi-code-square me-2"></i>{{ $t('welcome.runtime.instrumentation.title') }}</h5>
+              <div class="card mt-3 mb-3 inner-card">
+                <div class="card-header bg-gray text-white py-2">
+                  <h5 class="mb-0 fs-5"><i class="bi bi-code-square me-2"></i>{{ $t('welcome.runtime.instrumentation.title') }}</h5>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-3">
                   <div class="input-group mb-3">
-                    <span class="input-group-text"><i class="bi bi-folder"></i></span>
+                    <span class="input-group-text bg-light"><i class="bi bi-folder"></i></span>
                     <input 
                       type="text" 
-                      class="form-control" 
+                      class="form-control"
                       :placeholder="$t('welcome.runtime.instrumentation.placeholder')" 
                       v-model="projectPath"
                       :disabled="isInstrumenting"
@@ -57,13 +57,13 @@
                       <i class="bi bi-code-square me-1" v-else></i>{{ isInstrumenting ? $t('welcome.runtime.instrumentation.processing') : $t('welcome.runtime.instrumentation.button') }}
                     </button>
                   </div>
-                  <small class="text-muted">{{ $t('welcome.runtime.instrumentation.hint') }}</small>
+                  <small class="text-muted fst-italic">{{ $t('welcome.runtime.instrumentation.hint') }}</small>
                   
                   <!-- 插桩结果提示 -->
-                  <div v-if="instrumentError" class="alert alert-danger mt-3">
+                  <div v-if="instrumentError" class="alert alert-danger mt-3 mb-0">
                     <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ instrumentError }}
                   </div>
-                  <div v-if="instrumentSuccess" class="alert alert-success mt-3">
+                  <div v-if="instrumentSuccess" class="alert alert-success mt-3 mb-0">
                     <i class="bi bi-check-circle-fill me-2"></i>{{ instrumentSuccess }}
                     <div class="mt-2">
                       <button class="btn btn-sm btn-info ms-2" @click="showUserManual = true">
@@ -75,10 +75,10 @@
               </div>
             </div>
             <div class="col-md-5 d-flex align-items-center justify-content-center">
-              <div class="text-center">
-                <i class="bi bi-activity display-1 text-primary mb-3"></i>
+              <div class="text-center action-box p-4">
+                <i class="bi bi-activity display-1 text-primary mb-3 action-icon"></i>
                 <div>
-                  <router-link to="/allgids" class="btn btn-primary btn-lg">
+                  <router-link to="/allgids" class="btn btn-primary btn-lg action-btn">
                     <i class="bi bi-arrow-right me-1"></i>{{ $t('welcome.runtime.viewAnalysis') }}
                   </router-link>
                 </div>
@@ -91,7 +91,7 @@
       <!-- 使用手册弹窗 -->
       <div v-if="showUserManual" class="modal fade show" tabindex="-1" style="display: block;">
         <div class="modal-dialog modal-lg modal-dialog-scrollable">
-          <div class="modal-content">
+          <div class="modal-content border-0 shadow-lg">
             <div class="modal-header bg-primary text-white">
               <h5 class="modal-title"><i class="bi bi-book me-2"></i>插桩后使用手册</h5>
               <button type="button" class="btn-close btn-close-white" @click="showUserManual = false"></button>
@@ -100,13 +100,13 @@
               <div class="user-manual">
                 <h4 class="mb-3 text-primary fw-bold"><i class="bi bi-book-half me-2"></i>插桩后如何使用</h4>
                 
-                <div class="alert alert-info border-left">
+                <div class="alert alert-info border-left mb-4">
                   <div class="d-flex align-items-center">
                     <div class="me-3">
                       <i class="bi bi-info-circle-fill text-primary" style="font-size: 2rem;"></i>
                     </div>
                     <div>
-                      <h5 class="mb-1">插桩已完成！</h5>
+                      <h5 class="mb-1 fw-bold">插桩已完成！</h5>
                       <p class="mb-0">现在您需要按照以下步骤运行您的程序以收集运行时数据。</p>
                     </div>
                   </div>
@@ -301,103 +301,116 @@ export default {
 
 <style scoped>
 .welcome-page {
-  padding-top: 2rem;
-  padding-bottom: 4rem;
+  padding-bottom: 2rem;
 }
 
-.feature-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  font-size: 1.5rem;
+.title-gradient {
+  background: linear-gradient(45deg, var(--primary-color), #36b9cc);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  display: inline-block;
 }
 
-.card {
+.hover-card {
   transition: all 0.3s ease;
-  border-radius: 0.5rem;
-  overflow: hidden;
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
 
-.card:hover {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+.hover-card:hover {
   transform: translateY(-5px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
 }
 
-.card-header {
-  padding: 1rem 1.5rem;
+.feature-card {
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: none;
 }
 
-.card-body {
-  padding: 1.5rem;
+.feature-card:hover {
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 
-.display-1 {
-  font-size: 4rem;
-  opacity: 0.8;
+.feature-card .card-header {
+  border-radius: 0;
 }
 
-/* 使用手册样式 */
-.user-manual .card {
+.inner-card {
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
   border: none;
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
 }
 
-.user-manual .card-header {
-  font-weight: 600;
+.bg-gray {
+  background-color: var(--gray-color);
+}
+
+.action-box {
+  background: rgba(71, 133, 255, 0.03);
+  border-radius: 12px;
+  border: 1px dashed rgba(71, 133, 255, 0.3);
+  transition: all 0.3s ease;
 }
 
-.user-manual .steps-list {
-  padding-left: 1.5rem;
+.action-box:hover {
+  background: rgba(71, 133, 255, 0.06);
+  border-color: rgba(71, 133, 255, 0.5);
 }
 
-.user-manual .steps-list li {
-  padding: 0.5rem 0;
+.action-icon {
+  animation: pulse 2s infinite;
 }
 
-.user-manual .features-list {
-  padding-left: 1.2rem;
+.action-btn {
+  box-shadow: 0 5px 15px rgba(71, 133, 255, 0.3);
+  transition: all 0.3s ease;
 }
 
-.user-manual .features-list li {
-  padding: 0.3rem 0;
-  list-style-type: none;
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(71, 133, 255, 0.4);
 }
 
-.user-manual .code-block {
+.border-left {
+  border-left: 4px solid var(--primary-color);
+}
+
+.code-block {
   background-color: #f8f9fa;
+  border-radius: 6px;
+  padding: 1rem;
   color: #212529;
-  border-radius: 0.25rem;
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.875rem;
-  padding: 0.5rem;
-  margin-bottom: 0;
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
 
-.user-manual .accordion-button:not(.collapsed) {
-  background-color: rgba(13, 110, 253, 0.1);
-  color: #0d6efd;
+.steps-list li {
+  margin-bottom: 0.75rem;
 }
 
-.user-manual .accordion-button:focus {
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+.features-list {
+  list-style: none;
+  padding-left: 0.5rem;
 }
 
-.user-manual .alert-info {
-  background-color: #e8f4fd;
-  border-color: #b8daff;
+.features-list li {
+  margin-bottom: 0.5rem;
 }
 
-.user-manual .border-left {
-  border-left: 4px solid #0d6efd !important;
-  border-radius: 0.25rem;
+.modal-content {
+  border-radius: 12px;
 }
 
-.modal-content {
-  border-radius: 0.5rem;
-  overflow: hidden;
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 </style> 
\ No newline at end of file
diff --git a/src/components/charts/FunctionCallGraph.vue b/src/components/charts/FunctionCallGraph.vue
deleted file mode 100644
index e4465a2..0000000
--- a/src/components/charts/FunctionCallGraph.vue
+++ /dev/null
@@ -1,1977 +0,0 @@
-<template>
-  <div class="function-call-graph">
-    <div v-if="visible" class="modal-backdrop" @click="closeModal"></div>
-    <div v-if="visible" class="modal-container">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title">
-            <i class="bi bi-diagram-3 me-2"></i>函数调用关系图 (GID: {{ gid }})
-          </h5>
-          <button type="button" class="btn-close" @click="closeModal"></button>
-        </div>
-        <div class="modal-body">
-          <div v-if="loading" class="text-center py-5">
-            <div class="spinner-border text-primary" role="status">
-              <span class="visually-hidden">加载中...</span>
-            </div>
-            <p class="mt-3">正在加载函数调用图数据...</p>
-          </div>
-          <div v-else-if="error" class="alert alert-danger">
-            <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ error }}
-            <div v-if="showDebugInfo" class="mt-2">
-              <button class="btn btn-sm btn-outline-danger" @click="retryWithMockData">
-                使用模拟数据
-              </button>
-              <button class="btn btn-sm btn-outline-secondary ms-2" @click="retryFetch">
-                重试
-              </button>
-            </div>
-          </div>
-          <div v-else-if="!hasData" class="alert alert-warning">
-            <i class="bi bi-info-circle-fill me-2"></i>没有找到调用图数据
-            <div v-if="showDebugInfo" class="mt-2">
-              <button class="btn btn-sm btn-outline-primary" @click="useMockDataAndRefresh">
-                使用模拟数据
-              </button>
-            </div>
-          </div>
-          <!-- 始终保持图表容器存在，但根据条件控制显示 -->
-          <div class="chart-container" ref="chartContainer" :style="{ display: (!loading && !error && hasData) ? 'block' : 'none' }"></div>
-        </div>
-        <div class="modal-footer">
-          <div class="chart-controls">
-            <div class="btn-group me-2">
-              <button class="btn btn-sm btn-outline-secondary" @click="zoomIn">
-                <i class="bi bi-zoom-in"></i>
-              </button>
-              <button class="btn btn-sm btn-outline-secondary" @click="zoomOut">
-                <i class="bi bi-zoom-out"></i>
-              </button>
-              <button class="btn btn-sm btn-outline-secondary" @click="resetZoom">
-                <i class="bi bi-arrows-fullscreen"></i>
-              </button>
-            </div>
-            <div class="btn-group">
-              <button class="btn btn-sm btn-outline-primary" @click="changeLayout('force')" :class="{ active: currentLayout === 'force' }">
-                力导向图
-              </button>
-              <button class="btn btn-sm btn-outline-primary" @click="changeLayout('circular')" :class="{ active: currentLayout === 'circular' }">
-                环形布局
-              </button>
-              <button class="btn btn-sm btn-outline-primary" @click="changeLayout('tree')" :class="{ active: currentLayout === 'tree' }">
-                树形布局
-              </button>
-            </div>
-          </div>
-          <div>
-            <button type="button" class="btn btn-sm btn-outline-info me-2" @click="toggleDebugInfo" v-if="!showDebugInfo">
-              <i class="bi bi-bug"></i>
-            </button>
-            <button type="button" class="btn btn-secondary" @click="closeModal">关闭</button>
-          </div>
-        </div>
-        
-        <!-- 调试信息面板 -->
-        <div v-if="showDebugInfo" class="debug-panel">
-          <div class="debug-header">
-            <h6 class="mb-0">调试信息</h6>
-            <button type="button" class="btn-close btn-sm" @click="showDebugInfo = false"></button>
-          </div>
-          <div class="debug-body">
-            <div class="mb-2">
-              <strong>GID:</strong> {{ gid }}
-            </div>
-            <div class="mb-2">
-              <strong>数据库路径:</strong> {{ dbpath }}
-            </div>
-            <div class="mb-2">
-              <strong>当前布局:</strong> {{ currentLayout }}
-            </div>
-            <div class="mb-2">
-              <strong>节点数量:</strong> {{ graphData && graphData.nodes ? graphData.nodes.length : 0 }}
-            </div>
-            <div class="mb-2">
-              <strong>边数量:</strong> {{ graphData && graphData.edges ? graphData.edges.length : 0 }}
-            </div>
-            <div class="mb-3">
-              <button class="btn btn-sm btn-outline-primary" @click="refreshChart">
-                刷新图表
-              </button>
-              <button class="btn btn-sm btn-outline-warning ms-2" @click="useMockDataAndRefresh">
-                使用模拟数据
-              </button>
-              <button class="btn btn-sm btn-outline-info ms-2" @click="viewRawApiData">
-                查看原始数据
-              </button>
-              <button class="btn btn-sm btn-outline-danger ms-2" @click="tryAlternativeFormat">
-                尝试替代格式
-              </button>
-            </div>
-            <div class="small text-muted">
-              <strong>API URL:</strong> /api/runtime/traces/graph
-            </div>
-            <div class="mt-2">
-              <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" id="autoFixData" v-model="autoFixData">
-                <label class="form-check-label" for="autoFixData">自动修复数据</label>
-              </div>
-            </div>
-            <div v-if="dataFormatInfo" class="mt-2 alert alert-info small">
-              {{ dataFormatInfo }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from '../../axios';
-import * as echarts from 'echarts';
-
-export default {
-  name: 'FunctionCallGraph',
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    gid: {
-      type: String,
-      required: true
-    },
-    dbpath: {
-      type: String,
-      required: true
-    },
-    useMockData: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      loading: true,
-      error: null,
-      chartInstance: null,
-      graphData: null,
-      currentLayout: 'force',
-      zoomLevel: 1,
-      hasData: false,
-      showDebugInfo: false,
-      autoFixData: true,
-      originalApiData: null,
-      dataFormatInfo: '',
-      alternativeFormatIndex: 0,
-      resizeTimer: null,
-      timers: []
-    };
-  },
-  watch: {
-    visible(newVal) {
-      if (newVal) {
-        // 延迟初始化图表，确保模态框已完全显示
-        this.createTimer(() => {
-          this.initChart();
-        }, 300);
-      } else {
-        this.disposeChart();
-      }
-    },
-    gid(newVal) {
-      if (this.visible && newVal) {
-        // 延迟初始化图表，确保模态框已完全显示
-        this.createTimer(() => {
-          this.initChart();
-        }, 300);
-      }
-    }
-  },
-  mounted() {
-    if (this.visible) {
-      // 延迟初始化图表，确保模态框已完全显示
-      this.createTimer(() => {
-        this.initChart();
-      }, 300);
-    }
-    
-    window.addEventListener('resize', this.handleResize);
-  },
-  beforeUnmount() {
-    this.disposeChart();
-    window.removeEventListener('resize', this.handleResize);
-  },
-  methods: {
-    // 辅助方法：创建并跟踪定时器
-    createTimer(callback, delay) {
-      const timer = setTimeout(callback, delay);
-      this.timers.push(timer);
-      return timer;
-    },
-    
-    async initChart() {
-      console.log('开始初始化图表');
-      this.loading = true;
-      this.error = null;
-      this.hasData = false;
-      
-      try {
-        // 加载数据
-        await this.fetchGraphData();
-        
-        // 检查数据是否有效
-        if (!this.graphData || !this.graphData.nodes || this.graphData.nodes.length === 0) {
-          console.warn('图表数据无效或为空');
-          this.hasData = false;
-          this.loading = false;
-          return;
-        }
-        
-        // 尝试转换数据格式
-        this.tryConvertGraphData();
-        
-        // 标记数据已加载
-        this.hasData = true;
-        
-        // 确保 DOM 已更新
-        this.$nextTick(() => {
-          // 使用更长的延迟，确保模态框完全显示并且 DOM 已渲染
-          this.createTimer(() => {
-            console.log('DOM 已更新，开始创建图表');
-            
-            // 确保图表容器可见
-            const chartContainer = this.$refs.chartContainer;
-            if (chartContainer) {
-              chartContainer.style.display = 'block';
-              
-              // 延迟一小段时间，确保样式已应用
-              this.createTimer(() => {
-                this.createChart();
-              }, 100);
-            } else {
-              console.error('图表容器不存在');
-              this.error = '图表容器不存在';
-              this.loading = false;
-            }
-          }, 200);
-        });
-      } catch (err) {
-        console.error('加载调用图数据失败:', err);
-        this.error = `加载调用图数据失败: ${err.message}`;
-        this.loading = false;
-        this.$emit('error', this.error);
-      }
-    },
-    
-    async fetchGraphData() {
-      if (this.useMockData) {
-        console.log('使用模拟数据');
-        this.graphData = this.getMockGraphData();
-        return;
-      }
-      
-      try {
-        console.log(`获取GID ${this.gid}的调用图数据，数据库路径: ${this.dbpath}`);
-        
-        let response;
-        
-        // 使用正确的树状图API
-        if (this.currentLayout === 'tree') {
-          console.log('使用树状图接口获取数据');
-          response = await axios.post('/api/runtime/tree-graph/gid', {
-            gid: this.gid,
-            dbPath: this.dbpath
-          });
-          
-          // 检查响应数据格式
-          if (!response.data || !response.data.trees) {
-            throw new Error('树状图API返回数据格式不正确');
-          }
-          
-          // 保存原始响应数据，用于调试
-          this.originalApiData = JSON.parse(JSON.stringify(response.data));
-          console.log('树状图API原始响应数据:', JSON.stringify(this.originalApiData));
-          
-          // 将树状图数据转换为图形数据格式
-          const graphData = this.convertTreeToGraphData(response.data.trees);
-          this.graphData = graphData;
-          return;
-        } else {
-          // 使用原有的图形数据API
-          response = await axios.post('/api/runtime/traces/graph', {
-            gid: this.gid,
-            dbpath: this.dbpath
-          });
-        }
-        
-        // 检查响应数据格式
-        if (!response.data) {
-          throw new Error('API返回数据为空');
-        }
-        
-        // 保存原始响应数据，用于调试
-        this.originalApiData = JSON.parse(JSON.stringify(response.data));
-        console.log('API原始响应数据:', JSON.stringify(this.originalApiData));
-        
-        // 尝试解析和转换数据
-        let data = this.parseResponseData(response.data);
-        
-        // 确保数据格式正确
-        if (!data.nodes || !Array.isArray(data.nodes)) {
-          console.error('API返回的节点数据格式不正确:', data);
-          data.nodes = [];
-        }
-        
-        if (!data.edges || !Array.isArray(data.edges)) {
-          console.error('API返回的边数据格式不正确:', data);
-          data.edges = [];
-        }
-        
-        // 确保节点和边的ID匹配
-        if (this.autoFixData) {
-          this.validateAndFixGraphData(data);
-        }
-        
-        this.graphData = data;
-        
-        // 记录数据格式信息
-        this.updateDataFormatInfo();
-        
-        console.log('处理后的图表数据:', this.graphData);
-      } catch (error) {
-        console.error('获取调用图数据失败:', error);
-        // 不自动使用模拟数据，而是显示错误
-        throw error;
-      }
-    },
-    
-    parseResponseData(responseData) {
-      // 创建一个深拷贝，避免修改原始数据
-      const data = JSON.parse(JSON.stringify(responseData));
-      
-      // 如果已经是正确的格式，直接返回
-      if (data.nodes && Array.isArray(data.nodes) && data.edges && Array.isArray(data.edges)) {
-        return data;
-      }
-      
-      console.log('尝试解析响应数据格式');
-      
-      // 检查是否是特定的API格式
-      if (data.nodes === undefined && data.edges === undefined) {
-        // 尝试解析特定的API格式
-        return this.parseSpecificApiFormat(data);
-      }
-      
-      // 检查常见的数据结构
-      const possibleDataPaths = [
-        'data', 'graph', 'result', 'body', 'response', 'content', 'value'
-      ];
-      
-      // 遍历可能的路径
-      for (const path of possibleDataPaths) {
-        if (data[path]) {
-          if (data[path].nodes && Array.isArray(data[path].nodes) && 
-              data[path].edges && Array.isArray(data[path].edges)) {
-            console.log(`从 ${path} 字段中提取节点和边`);
-            return data[path];
-          }
-        }
-      }
-      
-      // 检查是否有特殊格式的数据
-      if (data.nodes && typeof data.nodes === 'object' && !Array.isArray(data.nodes)) {
-        // 可能是对象形式的节点集合，转换为数组
-        const nodesArray = Object.keys(data.nodes).map(key => {
-          const node = data.nodes[key];
-          return {
-            id: key,
-            ...node
-          };
-        });
-        data.nodes = nodesArray;
-      }
-      
-      if (data.edges && typeof data.edges === 'object' && !Array.isArray(data.edges)) {
-        // 可能是对象形式的边集合，转换为数组
-        const edgesArray = Object.keys(data.edges).map(key => {
-          const edge = data.edges[key];
-          return {
-            id: key,
-            ...edge
-          };
-        });
-        data.edges = edgesArray;
-      }
-      
-      // 检查是否有其他格式的数据结构
-      if (Array.isArray(data)) {
-        // 可能是节点数组，尝试构建边
-        console.log('检测到数组格式的数据，尝试构建图结构');
-        const nodes = data.map((item, index) => ({
-          id: item.id || `node_${index}`,
-          name: item.name || item.label || item.id || `Node ${index}`,
-          ...item
-        }));
-        
-        // 尝试从节点中提取边信息
-        const edges = [];
-        nodes.forEach(node => {
-          if (node.children && Array.isArray(node.children)) {
-            node.children.forEach(childId => {
-              edges.push({
-                source: node.id,
-                target: childId,
-                value: 1
-              });
-            });
-          }
-          
-          if (node.parents && Array.isArray(node.parents)) {
-            node.parents.forEach(parentId => {
-              edges.push({
-                source: parentId,
-                target: node.id,
-                value: 1
-              });
-            });
-          }
-          
-          if (node.calls && Array.isArray(node.calls)) {
-            node.calls.forEach(call => {
-              const targetId = typeof call === 'string' ? call : call.id || call.target;
-              if (targetId) {
-                edges.push({
-                  source: node.id,
-                  target: targetId,
-                  value: call.value || call.count || 1
-                });
-              }
-            });
-          }
-        });
-        
-        return { nodes, edges };
-      }
-      
-      // 如果没有找到合适的数据结构，创建空的数据结构
-      return { 
-        nodes: data.nodes || [], 
-        edges: data.edges || [] 
-      };
-    },
-    
-    parseSpecificApiFormat(data) {
-      console.log('尝试解析特定API格式的数据');
-      
-      // 检查是否有函数调用关系数据
-      if (Array.isArray(data)) {
-        console.log('检测到数组格式的API数据');
-        
-        // 创建节点和边的集合
-        const nodesMap = new Map();
-        const edges = [];
-        
-        // 遍历数据，提取节点和边
-        data.forEach((item) => {
-          // 检查是否有函数名
-          if (item.func || item.function || item.name) {
-            const funcName = item.func || item.function || item.name;
-            
-            // 如果节点不存在，创建节点
-            if (!nodesMap.has(funcName)) {
-              nodesMap.set(funcName, {
-                id: funcName,
-                name: funcName,
-                callCount: 0,
-                executionTime: '0ms',
-                category: 0
-              });
-            }
-            
-            // 更新节点信息
-            const node = nodesMap.get(funcName);
-            node.callCount = (node.callCount || 0) + 1;
-            
-            if (item.time || item.executionTime) {
-              node.executionTime = item.time || item.executionTime;
-            }
-            
-            // 检查是否有调用关系
-            if (item.calls && Array.isArray(item.calls)) {
-              item.calls.forEach(call => {
-                const targetFunc = call.func || call.function || call.name || call;
-                
-                // 如果目标节点不存在，创建节点
-                if (!nodesMap.has(targetFunc)) {
-                  nodesMap.set(targetFunc, {
-                    id: targetFunc,
-                    name: targetFunc,
-                    callCount: 0,
-                    executionTime: '0ms',
-                    category: 0
-                  });
-                }
-                
-                // 创建边
-                edges.push({
-                  source: funcName,
-                  target: targetFunc,
-                  value: call.count || 1,
-                  callCount: call.count || 1
-                });
-              });
-            }
-            
-            // 检查是否有调用者
-            if (item.calledBy && Array.isArray(item.calledBy)) {
-              item.calledBy.forEach(caller => {
-                const callerFunc = caller.func || caller.function || caller.name || caller;
-                
-                // 如果调用者节点不存在，创建节点
-                if (!nodesMap.has(callerFunc)) {
-                  nodesMap.set(callerFunc, {
-                    id: callerFunc,
-                    name: callerFunc,
-                    callCount: 0,
-                    executionTime: '0ms',
-                    category: 0
-                  });
-                }
-                
-                // 创建边
-                edges.push({
-                  source: callerFunc,
-                  target: funcName,
-                  value: caller.count || 1,
-                  callCount: caller.count || 1
-                });
-              });
-            }
-          }
-        });
-        
-        // 将节点集合转换为数组
-        const nodes = Array.from(nodesMap.values());
-        
-        console.log(`从API数据中提取了 ${nodes.length} 个节点和 ${edges.length} 条边`);
-        return { nodes, edges };
-      }
-      
-      // 检查是否有特定格式的对象
-      if (typeof data === 'object' && data !== null) {
-        // 检查是否有函数调用图数据
-        if (data.functions || data.calls || data.trace) {
-          const traceData = data.functions || data.calls || data.trace;
-          
-          if (Array.isArray(traceData)) {
-            return this.parseSpecificApiFormat(traceData);
-          }
-        }
-      }
-      
-      // 如果无法解析，返回空数据
-      return { nodes: [], edges: [] };
-    },
-    
-    validateAndFixGraphData(data) {
-      // 确保所有节点都有唯一ID
-      const nodeIds = new Set();
-      data.nodes.forEach((node, index) => {
-        if (!node.id) {
-          node.id = `node_${index}`;
-        }
-        
-        // 确保ID是字符串类型
-        node.id = String(node.id);
-        nodeIds.add(node.id);
-        
-        // 确保节点有名称
-        if (!node.name) {
-          node.name = node.label || node.id || `Node ${index}`;
-        }
-        
-        // 尝试解析包路径
-        if (!node.package && node.name) {
-          node.package = this.extractPackagePath(node.name);
-        }
-        
-        // 确保有执行时间
-        if (!node.executionTime && !node.timeCost) {
-          node.timeCost = '0ms';
-        }
-      });
-      
-      // 确保所有边的source和target都存在于节点中，并且是字符串类型
-      const validEdges = data.edges.filter(edge => {
-        // 确保source和target是字符串类型
-        if (edge.source) edge.source = String(edge.source);
-        if (edge.target) edge.target = String(edge.target);
-        
-        // 检查source和target是否存在
-        const sourceExists = edge.source && nodeIds.has(edge.source);
-        const targetExists = edge.target && nodeIds.has(edge.target);
-        
-        if (!sourceExists || !targetExists) {
-          console.warn(`边 ${edge.source} -> ${edge.target} 的节点不存在，将被过滤`);
-        }
-        
-        return sourceExists && targetExists;
-      });
-      
-      // 更新边数据
-      data.edges = validEdges;
-      
-      // 如果没有边，但有节点，尝试创建一些边以便显示
-      if (data.edges.length === 0 && data.nodes.length > 0) {
-        console.warn('没有有效的边数据，尝试创建一些边以便显示');
-        
-        // 创建一个简单的链式结构
-        for (let i = 1; i < data.nodes.length; i++) {
-          data.edges.push({
-            source: data.nodes[i-1].id,
-            target: data.nodes[i].id,
-            value: 1
-          });
-        }
-      }
-      
-      return data;
-    },
-    
-    extractPackagePath(fullName) {
-      if (!fullName || typeof fullName !== 'string') {
-        return '';
-      }
-      
-      // 尝试从完整函数名中提取包路径
-      const lastDotIndex = fullName.lastIndexOf('.');
-      if (lastDotIndex > 0) {
-        return fullName.substring(0, lastDotIndex);
-      }
-      
-      return '';
-    },
-    
-    createChart() {
-      // 清理旧的图表实例
-      if (this.chartInstance) {
-        try {
-          console.log('清理旧图表实例');
-          this.chartInstance.dispose();
-        } catch (e) {
-          console.warn('清理旧图表实例时出错:', e);
-        }
-        this.chartInstance = null;
-      }
-      
-      // 确保数据有效
-      if (!this.graphData || !this.graphData.nodes || this.graphData.nodes.length === 0) {
-        console.warn('图表数据无效或为空');
-        this.hasData = false;
-        this.error = '没有有效的图表数据';
-        this.loading = false;
-        return;
-      }
-      
-      console.log(`准备创建${this.currentLayout}布局图表，节点数: ${this.graphData.nodes.length}, 边数: ${this.graphData.edges.length}`);
-      
-      // 获取图表容器
-      const chartContainer = this.$refs.chartContainer;
-      if (!chartContainer) {
-        console.error('图表容器不存在');
-        this.error = '无法创建图表：容器元素不存在';
-        this.loading = false;
-        
-        // 延迟重试，等待样式应用
-        this.createTimer(() => {
-          console.log('容器尺寸已调整，重试创建图表...');
-          this.createChart();
-        }, 500);
-        return;
-      }
-      
-      // 确保容器尺寸合适
-      const width = chartContainer.clientWidth;
-      const height = chartContainer.clientHeight;
-      
-      if (width <= 0 || height <= 0) {
-        console.warn(`图表容器尺寸异常: 宽度=${width}, 高度=${height}`);
-        
-        // 设置最小尺寸
-        chartContainer.style.width = '100%';
-        chartContainer.style.height = '600px';
-        chartContainer.style.display = 'block';
-        
-        // 延迟重试，等待样式应用
-        this.createTimer(() => {
-          console.log('容器尺寸已调整，重试创建图表...');
-          this.createChart();
-        }, 500);
-        return;
-      }
-      
-      try {
-        console.log(`创建图表，容器尺寸: 宽度=${width}, 高度=${height}, 布局: ${this.currentLayout}`);
-        
-        // 创建图表实例
-        this.chartInstance = echarts.init(chartContainer);
-        
-        // 设置图表选项
-        const option = this.getChartOption();
-        console.log('图表配置:', JSON.stringify(option.series[0].force));
-        this.chartInstance.setOption(option);
-        
-        // 添加点击事件
-        this.chartInstance.on('click', 'series.graph.nodes', (params) => {
-          console.log('点击节点:', params.data);
-        });
-        
-        // 添加拖拽结束事件
-        this.chartInstance.on('dragend', 'series.graph.nodes', this.handleDragEnd);
-        
-        // 设置图表加载完成
-        this.hasData = true;
-        this.loading = false;
-        
-        console.log('图表创建成功');
-      } catch (error) {
-        console.error('创建图表失败:', error);
-        this.error = `创建图表失败: ${error.message}`;
-        this.loading = false;
-        
-        // 如果是因为容器问题，尝试延迟重试
-        if (error.message.includes('container') || error.message.includes('DOM')) {
-          this.createTimer(() => {
-            console.log('因容器问题创建失败，延迟重试...');
-            this.createChart();
-          }, 1000);
-        }
-      }
-    },
-    
-    getChartOption() {
-      // 处理节点和边的数据
-      const nodes = this.graphData.nodes.map(node => ({
-        id: node.id,
-        name: this.formatFunctionName(node.name || node.id),
-        value: node.value || 1,
-        symbolSize: this.calculateNodeSize(node),
-        category: node.category || 0,
-        // 如果节点有保存的位置，则使用该位置
-        x: node.x,
-        y: node.y,
-        label: {
-          show: true
-        },
-        itemStyle: {
-          color: this.getNodeColor(node)
-        },
-        tooltip: {
-          formatter: () => {
-            return `<div>
-              <div><strong>函数:</strong> ${node.name || node.id}</div>
-              <div><strong>包路径:</strong> ${node.package || '未知'}</div>
-              <div><strong>调用次数:</strong> ${node.callCount || 1}</div>
-              <div><strong>执行时间:</strong> ${node.executionTime || node.timeCost || '未知'}</div>
-            </div>`;
-          }
-        },
-        // 原始数据
-        rawData: node
-      }));
-      
-      const edges = this.graphData.edges.map(edge => ({
-        source: edge.source,
-        target: edge.target,
-        value: edge.value || 1,
-        lineStyle: {
-          width: Math.max(1, Math.min(5, edge.value || 1)),
-          curveness: 0.2
-        },
-        // 添加箭头
-        symbol: ['none', 'arrow'],
-        symbolSize: [5, 10],
-        tooltip: {
-          formatter: () => {
-            return `<div>
-              <div><strong>调用次数:</strong> ${edge.callCount || 1}</div>
-              <div><strong>执行时间:</strong> ${edge.timeCost || '未知'}</div>
-            </div>`;
-          }
-        }
-      }));
-      
-      // 根据不同布局返回不同的配置
-      switch (this.currentLayout) {
-        case 'circular':
-          return this.getCircularLayoutOption(nodes, edges);
-        case 'tree':
-          return this.getTreeLayoutOption(nodes, edges);
-        case 'force':
-        default:
-          return this.getForceLayoutOption(nodes, edges);
-      }
-    },
-    
-    getForceLayoutOption(nodes, edges) {
-      // 确保有节点数据
-      if (!nodes || nodes.length === 0) {
-        return {
-          title: {
-            text: '函数调用关系图 - 无数据',
-            subtext: `GID: ${this.gid}`,
-            left: 'center'
-          }
-        };
-      }
-      
-      console.log('创建力导向图配置，节点数:', nodes.length, '边数:', edges.length);
-      
-      // 使用更简单的力导向图配置
-      return {
-        title: {
-          text: '函数调用关系图',
-          subtext: `GID: ${this.gid} - 节点数: ${nodes.length}, 边数: ${edges.length}`,
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          confine: true
-        },
-        // 添加图表右上角的提示信息
-        graphic: [
-          {
-            type: 'text',
-            right: 20,
-            top: 20,
-            style: {
-              text: '提示: 可拖拽节点调整位置',
-              fontSize: 12,
-              fill: '#999'
-            }
-          }
-        ],
-        series: [{
-          name: '函数调用',
-          type: 'graph',
-          layout: 'force',
-          data: nodes,
-          links: edges,
-          roam: true,
-          draggable: true,  // 允许节点拖拽
-          label: {
-            show: true,
-            position: 'right',
-            formatter: '{b}'
-          },
-          // 确保边有箭头
-          edgeSymbol: ['none', 'arrow'],
-          edgeSymbolSize: [0, 8],
-          lineStyle: {
-            color: '#bbb',
-            curveness: 0.3,
-            width: 1.5
-          },
-          force: {
-            repulsion: 100,
-            edgeLength: 80
-          }
-        }]
-      };
-    },
-    
-    getCircularLayoutOption(nodes, edges) {
-      // 确保有节点数据
-      if (!nodes || nodes.length === 0) {
-        return {
-          title: {
-            text: '函数调用关系图 (环形布局) - 无数据',
-            subtext: `GID: ${this.gid}`,
-            left: 'center'
-          }
-        };
-      }
-      
-      return {
-        title: {
-          text: '函数调用关系图 (环形布局)',
-          subtext: `GID: ${this.gid} - 节点数: ${nodes.length}, 边数: ${edges.length}`,
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          confine: true
-        },
-        // 添加图表右上角的提示信息
-        graphic: [
-          {
-            type: 'text',
-            right: 20,
-            top: 20,
-            style: {
-              text: '提示: 可拖拽节点调整位置',
-              fontSize: 12,
-              fill: '#999'
-            }
-          }
-        ],
-        animationDuration: 1500,
-        animationEasingUpdate: 'quinticInOut',
-        series: [{
-          name: '函数调用',
-          type: 'graph',
-          layout: 'circular',
-          circular: {
-            rotateLabel: true
-          },
-          data: nodes,
-          links: edges,
-          roam: true,
-          draggable: true,  // 允许节点拖拽
-          label: {
-            show: true,
-            position: 'right',
-            formatter: '{b}'
-          },
-          // 确保边有箭头
-          edgeSymbol: ['none', 'arrow'],
-          edgeSymbolSize: [0, 8],
-          lineStyle: {
-            color: '#bbb',
-            curveness: 0.1,
-            width: 1.5
-          },
-          emphasis: {
-            focus: 'adjacency',
-            lineStyle: {
-              width: 4
-            }
-          }
-        }]
-      };
-    },
-    
-    getTreeLayoutOption(nodes, edges) {
-      // 确保有节点数据
-      if (!nodes || nodes.length === 0) {
-        return {
-          title: {
-            text: '函数调用关系图 (树形布局) - 无数据',
-            subtext: `GID: ${this.gid}`,
-            left: 'center'
-          }
-        };
-      }
-      
-      // 获取原始树状图数据
-      if (!this.originalApiData || !this.originalApiData.trees) {
-        console.warn('没有找到原始树状图数据，使用转换后的数据');
-        return this.getFallbackTreeLayoutOption(nodes, edges);
-      }
-      
-      console.log('使用原始树数据创建树状图', this.originalApiData.trees);
-      
-      return {
-        title: {
-          text: '函数调用关系图 (树形布局)',
-          subtext: `GID: ${this.gid}`,
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: (params) => {
-            return `<div style="font-size:12px;">
-              <div><strong>函数:</strong> ${params.data.name || '未命名'}</div>
-              <div><strong>ID:</strong> ${params.data.value || '未知'}</div>
-              ${params.data.timeCost ? `<div><strong>执行时间:</strong> ${params.data.timeCost}</div>` : ''}
-              ${params.data.callCount ? `<div><strong>调用次数:</strong> ${params.data.callCount}</div>` : ''}
-            </div>`;
-          }
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            saveAsImage: {
-              show: true,
-              title: '下载图片',
-              name: `函数调用树_GID${this.gid}_${new Date().getTime()}`,
-              pixelRatio: 2
-            },
-            restore: {
-              show: true,
-              title: '重置视图'
-            },
-            dataZoom: {
-              show: true,
-              title: {
-                zoom: '区域缩放',
-                back: '还原缩放'
-              }
-            }
-          },
-          right: 20,
-          top: 20
-        },
-        series: [{
-          type: 'tree',
-          name: '函数调用',
-          data: this.processTreeData(this.originalApiData.trees),
-          top: '8%',
-          bottom: '8%',
-          left: '8%',
-          right: '20%',
-          symbolSize: 12,
-          orient: 'LR', // 从左到右布局
-          initialTreeDepth: 3, // 初始展开层级
-          
-          label: {
-            position: 'right',
-            verticalAlign: 'middle',
-            align: 'left',
-            fontSize: 12,
-            formatter: (params) => {
-              return this.formatFunctionName(params.data.name) || '未命名';
-            },
-            backgroundColor: 'rgba(255,255,255,0.7)',
-            padding: [4, 7],
-            borderRadius: 3
-          },
-          
-          leaves: {
-            label: {
-              position: 'right',
-              verticalAlign: 'middle',
-              align: 'left'
-            }
-          },
-          
-          emphasis: {
-            focus: 'descendant',
-            itemStyle: {
-              shadowBlur: 10,
-              shadowColor: 'rgba(0,0,0,0.3)'
-            }
-          },
-          
-          expandAndCollapse: true,
-          animationDuration: 550,
-          animationDurationUpdate: 750,
-          
-          lineStyle: {
-            width: 1.5,
-            curveness: 0.2,
-            color: '#91cc75',
-            opacity: 0.8
-          },
-          
-          itemStyle: {
-            borderWidth: 1,
-            color: (params) => {
-              // 根据节点深度或其他属性设置颜色
-              const colors = [
-                '#5470c6', '#91cc75', '#fac858', '#ee6666',
-                '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
-              ];
-              const depth = params.data.depth || 0;
-              return colors[depth % colors.length];
-            }
-          },
-          
-          // 启用漫游
-          roam: true,
-        }]
-      };
-    },
-    
-    // 处理树状图数据，添加深度信息等
-    processTreeData(trees) {
-      if (!trees || !Array.isArray(trees)) return [];
-      
-      const processNode = (node, depth = 0) => {
-        if (!node) return null;
-        
-        // 添加深度信息
-        node.depth = depth;
-        
-        // 处理子节点
-        if (node.children && Array.isArray(node.children)) {
-          node.children = node.children.map(child => processNode(child, depth + 1));
-        }
-        
-        return node;
-      };
-      
-      return trees.map(tree => processNode(tree));
-    },
-    
-    // 添加备用的树布局方法，当没有原始树数据时使用
-    getFallbackTreeLayoutOption(nodes, edges) {
-      // 为树形布局找到根节点
-      const rootNode = this.findRootNode(nodes, edges);
-      
-      // 将节点和边转换为树状结构
-      const treeData = this.convertGraphToTree(nodes, edges, rootNode ? rootNode.id : nodes[0].id);
-      
-      return {
-        title: {
-          text: '函数调用关系图 (树形布局 - 转换)',
-          subtext: `GID: ${this.gid} - 根节点: ${rootNode ? rootNode.name : '未知'} - 节点数: ${nodes.length}`,
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: (params) => {
-            return `<div style="font-size:12px;">
-              <div><strong>函数:</strong> ${params.data.name || '未命名'}</div>
-              <div><strong>ID:</strong> ${params.data.id || '未知'}</div>
-              ${params.data.timeCost ? `<div><strong>执行时间:</strong> ${params.data.timeCost}</div>` : ''}
-              ${params.data.callCount ? `<div><strong>调用次数:</strong> ${params.data.callCount}</div>` : ''}
-            </div>`;
-          }
-        },
-        toolbox: {
-          show: true,
-          feature: {
-            saveAsImage: {
-              show: true,
-              title: '下载图片',
-              name: `函数调用树_GID${this.gid}_${new Date().getTime()}`,
-              pixelRatio: 2
-            },
-            restore: {
-              show: true,
-              title: '重置视图'
-            },
-            dataZoom: {
-              show: true,
-              title: {
-                zoom: '区域缩放',
-                back: '还原缩放'
-              }
-            }
-          },
-          right: 20,
-          top: 20
-        },
-        series: [{
-          type: 'tree',
-          name: '函数调用',
-          data: [treeData],
-          top: '8%',
-          bottom: '8%',
-          left: '8%',
-          right: '20%',
-          symbolSize: 12,
-          orient: 'LR', // 从左到右布局
-          initialTreeDepth: 3, // 初始展开层级
-          
-          label: {
-            position: 'right',
-            verticalAlign: 'middle',
-            align: 'left',
-            fontSize: 12,
-            formatter: (params) => {
-              return this.formatFunctionName(params.data.name) || '未命名';
-            },
-            backgroundColor: 'rgba(255,255,255,0.7)',
-            padding: [4, 7],
-            borderRadius: 3
-          },
-          
-          leaves: {
-            label: {
-              position: 'right',
-              verticalAlign: 'middle',
-              align: 'left'
-            }
-          },
-          
-          emphasis: {
-            focus: 'descendant',
-            itemStyle: {
-              shadowBlur: 10,
-              shadowColor: 'rgba(0,0,0,0.3)'
-            }
-          },
-          
-          expandAndCollapse: true,
-          animationDuration: 550,
-          animationDurationUpdate: 750,
-          
-          lineStyle: {
-            width: 1.5,
-            curveness: 0.2,
-            color: '#91cc75',
-            opacity: 0.8
-          },
-          
-          itemStyle: {
-            borderWidth: 1,
-            color: (params) => {
-              // 根据节点深度设置颜色
-              const colors = [
-                '#5470c6', '#91cc75', '#fac858', '#ee6666',
-                '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
-              ];
-              
-              // 获取节点深度，如果没有则默认为0
-              let depth = 0;
-              if (params.data && params.data.depth !== undefined) {
-                depth = params.data.depth;
-              } else {
-                // 尝试计算深度
-                const name = params.data.name || '';
-                depth = name.split('.').length - 1;
-                depth = Math.max(0, Math.min(colors.length - 1, depth));
-              }
-              
-              return colors[depth % colors.length];
-            }
-          },
-          
-          // 启用漫游
-          roam: true,
-        }]
-      };
-    },
-    
-    // 将图结构转换为树结构
-    convertGraphToTree(nodes, edges, rootId) {
-      // 创建节点索引
-      const nodeMap = {};
-      nodes.forEach(node => {
-        nodeMap[node.id] = {
-          ...node,
-          children: []
-        };
-      });
-      
-      // 构建树结构
-      edges.forEach(edge => {
-        const source = nodeMap[edge.source];
-        const target = nodeMap[edge.target];
-        
-        if (source && target) {
-          source.children.push(target);
-        }
-      });
-      
-      // 返回根节点
-      return nodeMap[rootId] || nodeMap[nodes[0].id];
-    },
-    
-    findRootNode(nodes, edges) {
-      // 找出入度为0的节点作为根节点
-      const targetIds = new Set(edges.map(edge => edge.target));
-      const rootNodes = nodes.filter(node => !targetIds.has(node.id));
-      
-      return rootNodes.length > 0 ? rootNodes[0] : nodes[0];
-    },
-    
-    formatFunctionName(name) {
-      if (!name) return 'unknown';
-      
-      // 从完整路径中提取包名和函数名
-      // 例如：github.com/nsqio/nsq/nsqd.(*Topic).PutMessage -> nsqd.(*Topic).PutMessage
-      // 例如：github.com/nsqio/nsq/internal/http_api.RespondV1 -> http_api.RespondV1
-      
-      // 查找最后一个斜杠位置
-      const lastSlashIndex = name.lastIndexOf('/');
-      if (lastSlashIndex >= 0) {
-        // 从斜杠后开始截取
-        const packageAndFunc = name.substring(lastSlashIndex + 1);
-        return packageAndFunc;
-      }
-      
-      // 如果没有斜杠，直接返回原名称
-      return name;
-    },
-    
-    calculateNodeSize(node) {
-      // 根据调用次数计算节点大小
-      const baseSize = 10;
-      const callCount = node.callCount || 1;
-      
-      return Math.max(baseSize, Math.min(baseSize * 3, baseSize + Math.log2(callCount) * 5));
-    },
-    
-    getNodeColor(node) {
-      // 根据节点类型或其他属性设置颜色
-      const colors = [
-        '#5470c6', '#91cc75', '#fac858', '#ee6666',
-        '#73c0de', '#3ba272', '#fc8452', '#9a60b4'
-      ];
-      
-      const category = node.category || 0;
-      return colors[category % colors.length];
-    },
-    
-    resizeChart() {
-      if (this.chartInstance) {
-        try {
-          console.log('调整图表大小');
-          this.chartInstance.resize();
-        } catch (e) {
-          console.warn('调整图表大小时出错:', e);
-        }
-      }
-    },
-    
-    handleResize() {
-      // 使用防抖，避免频繁调整大小
-      if (this.resizeTimer) {
-        clearTimeout(this.resizeTimer);
-      }
-      
-      this.resizeTimer = this.createTimer(() => {
-        if (this.visible && this.chartInstance) {
-          this.resizeChart();
-        }
-      }, 200);
-    },
-    
-    disposeChart() {
-      // 清理图表实例
-      if (this.chartInstance) {
-        try {
-          console.log('销毁图表实例');
-          this.chartInstance.dispose();
-        } catch (e) {
-          console.warn('销毁图表实例时出错:', e);
-        }
-        this.chartInstance = null;
-      }
-      
-      // 清理定时器
-      if (this.resizeTimer) {
-        clearTimeout(this.resizeTimer);
-        this.resizeTimer = null;
-      }
-      
-      // 清理其他可能的定时器和异步操作
-      if (this.dataTimer) {
-        clearTimeout(this.dataTimer);
-        this.dataTimer = null;
-      }
-      
-      // 清理所有跟踪的定时器
-      this.timers.forEach(timer => {
-        clearTimeout(timer);
-      });
-      this.timers = [];
-      
-      // 重置状态
-      this.loading = false;
-      this.error = null;
-      this.hasData = false;
-    },
-    
-    closeModal() {
-      this.$emit('update:visible', false);
-    },
-    
-    zoomIn() {
-      this.zoomLevel *= 1.2;
-      this.applyZoom();
-    },
-    
-    zoomOut() {
-      this.zoomLevel /= 1.2;
-      this.applyZoom();
-    },
-    
-    resetZoom() {
-      this.zoomLevel = 1;
-      this.applyZoom();
-    },
-    
-    applyZoom() {
-      if (this.chartInstance) {
-        const option = this.chartInstance.getOption();
-        
-        // 应用缩放级别
-        if (option.series && option.series[0]) {
-          // 更新缩放相关配置
-          this.chartInstance.setOption({
-            series: [{
-              zoom: this.zoomLevel,
-              roam: true
-            }]
-          });
-        }
-      }
-    },
-    
-    changeLayout(layout) {
-      console.log(`切换布局: ${this.currentLayout} -> ${layout}`);
-      const oldLayout = this.currentLayout;
-      this.currentLayout = layout;
-      
-      if (this.chartInstance) {
-        // 先销毁当前图表实例
-        try {
-          this.chartInstance.dispose();
-          this.chartInstance = null;
-        } catch (e) {
-          console.warn('切换布局时销毁图表实例出错:', e);
-        }
-        
-        // 如果是切换到树状图或者从树状图切换出来，需要重新请求API
-        if ((layout === 'tree' && oldLayout !== 'tree') || (layout !== 'tree' && oldLayout === 'tree')) {
-          console.log('布局变更需要重新获取数据');
-          // 重新初始化图表，会重新获取数据
-          this.$nextTick(() => {
-            this.loading = true;
-            this.createTimer(() => {
-              this.initChart();
-            }, 300);
-          });
-        } else {
-          // 只是普通的布局切换，使用现有数据重新创建图表
-          this.$nextTick(() => {
-            this.createTimer(() => {
-              this.createChart();
-            }, 300);
-          });
-        }
-      }
-    },
-    
-    getMockGraphData() {
-      console.log('生成模拟数据');
-      // 生成简单的模拟数据
-      const nodes = [];
-      const edges = [];
-      
-      // 创建一些简单的节点
-      for (let i = 0; i < 10; i++) {
-        nodes.push({
-          id: `node${i}`,
-          name: `github.com/toheart/goanalysis/pkg/module${i}.Function_${i}`,
-          package: `github.com/toheart/goanalysis/pkg/module${i}`,
-          value: 1,
-          symbolSize: 20,
-          callCount: Math.floor(Math.random() * 100) + 1,
-          timeCost: `${Math.floor(Math.random() * 100)}ms`,
-          category: Math.floor(i / 3)
-        });
-      }
-      
-      // 创建一些简单的边
-      for (let i = 1; i < 10; i++) {
-        edges.push({
-          source: `node0`,
-          target: `node${i}`,
-          value: 1,
-          callCount: Math.floor(Math.random() * 50) + 1,
-          timeCost: `${Math.floor(Math.random() * 50)}ms`
-        });
-      }
-      
-      // 添加一些额外的连接
-      for (let i = 1; i < 5; i++) {
-        edges.push({
-          source: `node${i}`,
-          target: `node${i+5}`,
-          value: 1,
-          callCount: Math.floor(Math.random() * 30) + 1,
-          timeCost: `${Math.floor(Math.random() * 30)}ms`
-        });
-      }
-      
-      console.log('生成的模拟数据:', { nodes, edges });
-      return { nodes, edges };
-    },
-    
-    tryConvertGraphData() {
-      // 如果数据格式不是预期的格式，尝试转换
-      if (this.graphData) {
-        console.log('尝试转换数据格式，当前数据:', this.graphData);
-        
-        // 检查是否有其他格式的数据
-        if (!this.graphData.nodes && !this.graphData.edges) {
-          // 尝试解析数据
-          const parsedData = this.parseResponseData(this.graphData);
-          if (parsedData.nodes || parsedData.edges) {
-            console.log('成功解析数据格式:', parsedData);
-            this.graphData = parsedData;
-          }
-        }
-        
-        // 确保有节点和边数组
-        if (!this.graphData.nodes) {
-          this.graphData.nodes = [];
-        }
-        
-        if (!this.graphData.edges) {
-          this.graphData.edges = [];
-        }
-        
-        // 再次验证和修复数据
-        this.validateAndFixGraphData(this.graphData);
-      }
-    },
-    
-    toggleDebugInfo() {
-      this.showDebugInfo = !this.showDebugInfo;
-    },
-    
-    retryFetch() {
-      this.initChart();
-    },
-    
-    retryWithMockData() {
-      this.useMockDataAndRefresh();
-    },
-    
-    useMockDataAndRefresh() {
-      console.log('使用模拟数据并刷新图表');
-      this.graphData = this.getMockGraphData();
-      this.error = null;
-      this.hasData = true;
-      this.loading = false;
-      
-      // 确保图表容器可见
-      const chartContainer = this.$refs.chartContainer;
-      if (chartContainer) {
-        chartContainer.style.display = 'block';
-      }
-      
-      // 使用 nextTick 确保 DOM 已更新
-      this.$nextTick(() => {
-        // 添加延迟，确保模态框完全显示并且 DOM 已渲染
-        this.createTimer(() => {
-          console.log('使用模拟数据创建图表');
-          this.createChart();
-        }, 500);
-      });
-    },
-    
-    refreshChart() {
-      if (this.chartInstance) {
-        this.chartInstance.dispose();
-      }
-      this.createChart();
-    },
-    
-    viewRawApiData() {
-      if (this.showDebugInfo) {
-        // 简单地在控制台输出数据，避免HTML生成的问题
-        console.log('原始API数据:', this.originalApiData);
-        console.log('处理后的图表数据:', this.graphData);
-        
-        // 显示一个简单的提示
-        alert('数据已输出到控制台，请按F12查看');
-      }
-    },
-    
-    updateDataFormatInfo() {
-      if (!this.graphData) {
-        this.dataFormatInfo = '无数据';
-        return;
-      }
-      
-      const nodeCount = this.graphData.nodes ? this.graphData.nodes.length : 0;
-      const edgeCount = this.graphData.edges ? this.graphData.edges.length : 0;
-      
-      let info = `数据格式: 节点数=${nodeCount}, 边数=${edgeCount}`;
-      
-      // 检查节点格式
-      if (nodeCount > 0) {
-        const sampleNode = this.graphData.nodes[0];
-        const nodeKeys = Object.keys(sampleNode).join(', ');
-        info += `\n节点字段: ${nodeKeys}`;
-      }
-      
-      // 检查边格式
-      if (edgeCount > 0) {
-        const sampleEdge = this.graphData.edges[0];
-        const edgeKeys = Object.keys(sampleEdge).join(', ');
-        info += `\n边字段: ${edgeKeys}`;
-      }
-      
-      this.dataFormatInfo = info;
-    },
-    
-    tryAlternativeFormat() {
-      if (!this.originalApiData) {
-        alert('没有原始API数据可供尝试');
-        return;
-      }
-      
-      this.alternativeFormatIndex = (this.alternativeFormatIndex + 1) % 4;
-      
-      let data;
-      switch (this.alternativeFormatIndex) {
-        case 0:
-          // 尝试直接使用原始数据
-          data = this.parseResponseData(this.originalApiData);
-          break;
-        case 1:
-          // 尝试将原始数据视为节点数组
-          if (Array.isArray(this.originalApiData)) {
-            data = this.convertArrayToGraph(this.originalApiData);
-          } else {
-            data = { nodes: [], edges: [] };
-          }
-          break;
-        case 2:
-          // 尝试从原始数据中提取特定字段
-          data = this.extractGraphFromObject(this.originalApiData);
-          break;
-        case 3:
-          // 尝试使用特定的API格式解析
-          data = this.parseSpecificApiFormat(this.originalApiData);
-          break;
-      }
-      
-      // 确保数据格式正确
-      if (!data.nodes || !Array.isArray(data.nodes)) {
-        data.nodes = [];
-      }
-      
-      if (!data.edges || !Array.isArray(data.edges)) {
-        data.edges = [];
-      }
-      
-      // 确保节点和边的ID匹配
-      if (this.autoFixData) {
-        this.validateAndFixGraphData(data);
-      }
-      
-      this.graphData = data;
-      
-      // 更新数据格式信息
-      this.updateDataFormatInfo();
-      
-      // 刷新图表
-      this.refreshChart();
-    },
-    
-    convertArrayToGraph(array) {
-      if (!Array.isArray(array)) {
-        return { nodes: [], edges: [] };
-      }
-      
-      // 创建节点
-      const nodes = array.map((item, index) => {
-        return {
-          id: item.id || item.name || `node_${index}`,
-          name: item.name || item.id || `Node ${index}`,
-          category: 0,
-          value: 1,
-          ...item
-        };
-      });
-      
-      // 创建边
-      const edges = [];
-      for (let i = 1; i < nodes.length; i++) {
-        edges.push({
-          source: nodes[i-1].id,
-          target: nodes[i].id,
-          value: 1
-        });
-      }
-      
-      return { nodes, edges };
-    },
-    
-    extractGraphFromObject(obj) {
-      if (!obj || typeof obj !== 'object') {
-        return { nodes: [], edges: [] };
-      }
-      
-      // 尝试从对象中提取节点和边
-      let nodes = [];
-      let edges = [];
-      
-      // 检查常见的字段名
-      const nodeFields = ['nodes', 'vertices', 'points', 'functions', 'calls'];
-      const edgeFields = ['edges', 'links', 'connections', 'relations', 'calls'];
-      
-      // 尝试提取节点
-      for (const field of nodeFields) {
-        if (obj[field] && (Array.isArray(obj[field]) || typeof obj[field] === 'object')) {
-          if (Array.isArray(obj[field])) {
-            nodes = obj[field].map((node, index) => {
-              return {
-                id: node.id || `node_${index}`,
-                name: node.name || node.label || node.id || `Node ${index}`,
-                category: 0,
-                value: 1,
-                ...node
-              };
-            });
-          } else {
-            // 对象形式的节点集合
-            nodes = Object.keys(obj[field]).map((key) => {
-              const node = obj[field][key];
-              return {
-                id: key,
-                name: node.name || node.label || key,
-                category: 0,
-                value: 1,
-                ...node
-              };
-            });
-          }
-          break;
-        }
-      }
-      
-      // 尝试提取边
-      for (const field of edgeFields) {
-        if (obj[field] && (Array.isArray(obj[field]) || typeof obj[field] === 'object')) {
-          if (Array.isArray(obj[field])) {
-            edges = obj[field].map(edge => {
-              return {
-                source: edge.source || edge.from || edge.start,
-                target: edge.target || edge.to || edge.end,
-                value: edge.value || edge.weight || 1,
-                ...edge
-              };
-            });
-          } else {
-            // 对象形式的边集合
-            edges = Object.keys(obj[field]).map(key => {
-              const edge = obj[field][key];
-              return {
-                source: edge.source || edge.from || edge.start,
-                target: edge.target || edge.to || edge.end,
-                value: edge.value || edge.weight || 1,
-                ...edge
-              };
-            });
-          }
-          break;
-        }
-      }
-      
-      return { nodes, edges };
-    },
-    
-    checkChartContainer() {
-      // 检查图表容器是否存在
-      if (!this.$refs.chartContainer) {
-        console.warn('图表容器不存在，可能是DOM还未渲染完成');
-        return false;
-      }
-      
-      // 检查容器尺寸
-      const container = this.$refs.chartContainer;
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      
-      if (width === 0 || height === 0) {
-        console.warn(`图表容器尺寸异常: 宽度=${width}, 高度=${height}`);
-        return false;
-      }
-      
-      return true;
-    },
-    
-    // 添加拖拽结束事件处理
-    handleDragEnd(params) {
-      console.log('节点拖拽结束:', params.dataIndex, params.data);
-      
-      // 获取被拖拽的节点
-      const nodeIndex = params.dataIndex;
-      const nodeData = params.data;
-      
-      // 更新原始数据中的节点位置，但不固定节点
-      if (this.graphData && this.graphData.nodes && this.graphData.nodes[nodeIndex]) {
-        // 保存节点的新位置
-        this.graphData.nodes[nodeIndex].x = nodeData.x;
-        this.graphData.nodes[nodeIndex].y = nodeData.y;
-        // 不再固定节点位置，让节点可以继续参与力导向布局
-        // this.graphData.nodes[nodeIndex].fixed = true;
-        
-        console.log(`节点 ${nodeData.name} 位置已保存: x=${nodeData.x}, y=${nodeData.y}`);
-      }
-    },
-    
-    // 新增方法：将树状图数据转换为图形数据格式
-    convertTreeToGraphData(trees) {
-      if (!trees || !Array.isArray(trees) || trees.length === 0) {
-        console.error('无效的树状图数据');
-        return { nodes: [], edges: [] };
-      }
-      
-      const nodes = [];
-      const edges = [];
-      let nodeId = 1;
-      
-      // 递归处理树节点
-      const processNode = (node, parentId = null) => {
-        if (!node) return null;
-        
-        // 为节点分配唯一ID
-        const id = `node_${nodeId++}`;
-        
-        // 保存节点数据
-        nodes.push({
-          id: id,
-          name: node.name || '未命名',
-          value: node.value || '',
-          callCount: 1,
-          timeCost: node.value || '未知',
-          nodeType: 'function'
-        });
-        
-        // 添加与父节点的边
-        if (parentId) {
-          edges.push({
-            source: parentId,
-            target: id,
-            value: 1
-          });
-        }
-        
-        // 处理子节点
-        if (node.children && Array.isArray(node.children)) {
-          node.children.forEach(child => {
-            processNode(child, id);
-          });
-        }
-        
-        return id;
-      };
-      
-      // 处理多棵树
-      trees.forEach(tree => {
-        processNode(tree);
-      });
-      
-      return { nodes, edges };
-    }
-  }
-};
-</script>
-
-<style scoped>
-.function-call-graph {
-  position: relative;
-}
-
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1050;
-}
-
-.modal-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1051;
-  padding: 20px;
-}
-
-.modal-content {
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  width: 90%;
-  max-width: 1200px;
-  max-height: 90vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.modal-body {
-  flex: 1;
-  overflow: auto;
-  padding: 1rem;
-  min-height: 400px;
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  border-top: 1px solid #dee2e6;
-}
-
-.chart-container {
-  width: 100%;
-  height: 600px;
-}
-
-.chart-controls {
-  display: flex;
-  align-items: center;
-}
-
-.debug-panel {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #f8f9fa;
-  border-top: 1px solid #dee2e6;
-  z-index: 1060;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.debug-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid #dee2e6;
-  background-color: #e9ecef;
-}
-
-.debug-body {
-  padding: 1rem;
-}
-
-.btn-group .btn.active {
-  background-color: #0d6efd;
-  color: white;
-}
-
-@media (max-width: 768px) {
-  .modal-content {
-    width: 95%;
-    max-height: 95vh;
-  }
-  
-  .chart-container {
-    height: 400px;
-  }
-  
-  .modal-footer {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .chart-controls {
-    width: 100%;
-    justify-content: center;
-    margin-bottom: 10px;
-  }
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/FunctionAnalysis.vue b/src/components/runtime/FunctionAnalysis.vue
deleted file mode 100644
index b1f386b..0000000
--- a/src/components/runtime/FunctionAnalysis.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <div class="function-analysis">
-    <!-- 函数搜索组件 -->
-    <FunctionSearch
-      :db-path="dbPath"
-      @search="handleSearch"
-    />
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="text-center py-5">
-      <div class="spinner-border text-primary" role="status">
-        <span class="visually-hidden">{{ $t('runtimeAnalysis.functionAnalysis.loading') }}</span>
-      </div>
-      <p class="mt-3">{{ $t('runtimeAnalysis.functionAnalysis.analyzing') }}</p>
-    </div>
-
-    <!-- 无数据提示 -->
-    <div v-else-if="functionName && !loading && !functionCallData.length" class="card mb-4">
-      <div class="card-body text-center py-5">
-        <i class="bi bi-search text-muted display-1"></i>
-        <h4 class="mt-3">{{ $t('runtimeAnalysis.functionAnalysis.noRelatedFunction') }}</h4>
-        <p>{{ $t('runtimeAnalysis.functionAnalysis.tryOtherFunctionName') }}</p>
-      </div>
-    </div>
-
-    <div v-else-if="functionCallData.length > 0">
-      <!-- 分析选项卡 -->
-      <div class="card mb-4">
-        <div class="card-header">
-          <ul class="nav nav-tabs card-header-tabs">
-            <li class="nav-item">
-              <a class="nav-link" :class="{ active: activeTab === 'callchain' }" href="#" @click.prevent="activeTab = 'callchain'">
-                <i class="bi bi-diagram-3 me-1"></i> 调用链分析
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" :class="{ active: activeTab === 'hotpath' }" href="#" @click.prevent="activeTab = 'hotpath'">
-                <i class="bi bi-fire me-1"></i> 热点路径分析
-              </a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" :class="{ active: activeTab === 'performance' }" href="#" @click.prevent="activeTab = 'performance'">
-                <i class="bi bi-speedometer2 me-1"></i> 性能分析
-              </a>
-            </li>
-          </ul>
-        </div>
-        
-        <div class="card-body p-0">
-          <!-- 调用链分析 -->
-          <div v-if="activeTab === 'callchain'" class="p-3">
-            <CallChainAnalysis
-              :function-name="functionName"
-              :call-data="functionCallData"
-              @search="handleSearch"
-            />
-          </div>
-          
-          <!-- 热点路径分析 -->
-          <div v-if="activeTab === 'hotpath'" class="p-3">
-            <HotPathAnalysis
-              :db-path="dbPath || projectPath"
-              :function-name="functionName"
-            />
-          </div>
-          
-          <!-- 性能分析 -->
-          <div v-if="activeTab === 'performance'" class="p-3">
-            <PerformanceAnalysis
-              :db-path="dbPath || projectPath"
-              :function-name="functionName"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-import axios from '../../axios';
-import FunctionSearch from './function-analysis/components/FunctionSearch.vue';
-import CallChainAnalysis from './function-analysis/components/CallChainAnalysis.vue';
-import HotPathAnalysis from './analysis/components/HotPathAnalysis.vue';
-import PerformanceAnalysis from './analysis/components/PerformanceAnalysis.vue';
-
-export default {
-  name: 'FunctionAnalysis',
-  components: {
-    FunctionSearch,
-    CallChainAnalysis,
-    HotPathAnalysis,
-    PerformanceAnalysis
-  },
-  props: {
-    projectPath: {
-      type: String,
-      required: true
-    },
-    dbPath: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props) {
-    const loading = ref(false);
-    const functionName = ref('');
-    const functionCallData = ref([]);
-    const activeTab = ref('callchain');
-
-    // 处理搜索事件
-    const handleSearch = async (name) => {
-      functionName.value = name;
-      loading.value = true;
-      functionCallData.value = [];
-      
-      try {
-        const dbpath = props.dbPath || props.projectPath;
-        if (!dbpath) {
-          throw new Error('数据库路径为空');
-        }
-        
-        const response = await axios.post('/api/runtime/function/analysis', {
-          functionName: name,
-          type: 'caller',
-          path: dbpath
-        });
-        
-        if (response.data?.callData) {
-          functionCallData.value = processCallData(response.data.callData);
-        }
-      } catch (error) {
-        console.error('获取函数调用关系失败:', error);
-        alert('获取函数调用关系失败: ' + error.message);
-      } finally {
-        loading.value = false;
-      }
-    };
-
-    // 处理调用数据，添加唯一ID
-    const processCallData = (data) => {
-      let nextId = 1;
-      
-      const addIds = (node) => {
-        node.id = nextId++;
-        
-        if (node.children?.length) {
-          node.children.forEach(child => {
-            addIds(child);
-          });
-        }
-        
-        return node;
-      };
-      
-      return data.map(node => addIds({...node}));
-    };
-
-    return {
-      loading,
-      functionName,
-      functionCallData,
-      activeTab,
-      handleSearch
-    };
-  }
-};
-</script>
-
-<style scoped>
-.nav-tabs .nav-link {
-  color: var(--bs-gray-700);
-}
-
-.nav-tabs .nav-link.active {
-  color: var(--bs-primary);
-  font-weight: 500;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/components/FunctionAnalysis.vue b/src/components/runtime/analysis/components/FunctionAnalysis.vue
deleted file mode 100644
index 4168ffe..0000000
--- a/src/components/runtime/analysis/components/FunctionAnalysis.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<template>
-  <div class="function-analysis">
-    <!-- 函数搜索区域 -->
-    <div class="search-section mb-4">
-      <div class="card">
-        <div class="card-body">
-          <div class="row g-3">
-            <div class="col-md-6">
-              <label class="form-label">数据库路径</label>
-              <div class="input-group">
-                <input 
-                  type="text" 
-                  class="form-control" 
-                  v-model="dbPath"
-                  placeholder="请输入数据库路径"
-                  @change="onDbPathChange"
-                >
-                <button 
-                  class="btn btn-outline-secondary" 
-                  type="button"
-                  @click="onDbPathChange"
-                >
-                  加载
-                </button>
-              </div>
-            </div>
-            
-            <div class="col-md-6">
-              <label class="form-label">函数名称</label>
-              <div class="dropdown">
-                <input 
-                  type="text" 
-                  class="form-control" 
-                  v-model="searchQuery"
-                  placeholder="请输入函数名称"
-                  @focus="showSuggestions = true"
-                  @input="onSearchInput"
-                >
-                <ul 
-                  class="dropdown-menu w-100" 
-                  :class="{ show: showSuggestions && filteredFunctions.length }"
-                >
-                  <li v-for="func in filteredFunctions" :key="func.name">
-                    <a 
-                      class="dropdown-item" 
-                      href="#"
-                      @click.prevent="onFunctionSelect(func.name)"
-                    >
-                      <div>{{ func.name }}</div>
-                      <small class="text-muted">{{ func.package }}</small>
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 分析结果区域 -->
-    <div v-if="functionName" class="analysis-section">
-      <!-- 函数信息 -->
-      <div class="function-info mb-4">
-        <h4>{{ functionName }}</h4>
-        <div class="text-muted">{{ currentPackage }}</div>
-      </div>
-
-      <!-- 分析标签页 -->
-      <div class="analysis-tabs">
-        <ul class="nav nav-tabs mb-3">
-          <li class="nav-item">
-            <a 
-              class="nav-link" 
-              :class="{ active: activeTab === 'call-chain' }"
-              href="#"
-              @click.prevent="switchTab('call-chain')"
-            >
-              调用链分析
-            </a>
-          </li>
-          <li class="nav-item">
-            <a 
-              class="nav-link" 
-              :class="{ active: activeTab === 'hot-path' }"
-              href="#"
-              @click.prevent="switchTab('hot-path')"
-            >
-              热点路径分析
-            </a>
-          </li>
-          <li class="nav-item">
-            <a 
-              class="nav-link" 
-              :class="{ active: activeTab === 'performance' }"
-              href="#"
-              @click.prevent="switchTab('performance')"
-            >
-              性能异常分析
-            </a>
-          </li>
-        </ul>
-
-        <!-- 分析内容 -->
-        <div class="tab-content">
-          <div v-show="activeTab === 'call-chain'">
-            <CallChainAnalysis 
-              :db-path="dbPath"
-              :function-name="functionName"
-            />
-          </div>
-          
-          <div v-show="activeTab === 'hot-path'">
-            <HotPathAnalysis 
-              :db-path="dbPath"
-              :function-name="functionName"
-            />
-          </div>
-          
-          <div v-show="activeTab === 'performance'">
-            <PerformanceAnalysis 
-              :db-path="dbPath"
-              :function-name="functionName"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div v-else class="text-center py-5 text-muted">
-      请选择要分析的函数
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, computed, watch } from 'vue';
-import { useFunctionAnalysis } from '../composables/useFunctionAnalysis';
-import CallChainAnalysis from './CallChainAnalysis.vue';
-import HotPathAnalysis from './HotPathAnalysis.vue';
-import PerformanceAnalysis from './PerformanceAnalysis.vue';
-
-export default {
-  name: 'FunctionAnalysis',
-  
-  components: {
-    CallChainAnalysis,
-    HotPathAnalysis,
-    PerformanceAnalysis
-  },
-  
-  setup() {
-    const {
-      dbPath,
-      functionName,
-      activeTab,
-      functions,
-      currentPackage,
-      loading,
-      error,
-      loadFunctions,
-      selectFunction,
-      switchTab,
-      reset
-    } = useFunctionAnalysis();
-
-    const searchQuery = ref('');
-    const showSuggestions = ref(false);
-    
-    // 过滤函数列表
-    const filteredFunctions = computed(() => {
-      if (!searchQuery.value) return functions.value;
-      const query = searchQuery.value.toLowerCase();
-      return functions.value.filter(f => 
-        f.name.toLowerCase().includes(query) || 
-        f.package.toLowerCase().includes(query)
-      );
-    });
-
-    // 处理数据库路径变化
-    const onDbPathChange = async () => {
-      if (!dbPath.value) return;
-      reset();
-      await loadFunctions(dbPath.value);
-    };
-
-    // 处理搜索输入
-    const onSearchInput = () => {
-      showSuggestions.value = true;
-    };
-
-    // 处理函数选择
-    const onFunctionSelect = (name) => {
-      searchQuery.value = name;
-      selectFunction(name);
-      showSuggestions.value = false;
-    };
-
-    // 监听点击事件以关闭建议列表
-    const onClickOutside = (event) => {
-      if (!event.target.closest('.dropdown')) {
-        showSuggestions.value = false;
-      }
-    };
-
-    // 添加和移除全局点击事件监听
-    watch(showSuggestions, (show) => {
-      if (show) {
-        document.addEventListener('click', onClickOutside);
-      } else {
-        document.removeEventListener('click', onClickOutside);
-      }
-    });
-
-    return {
-      dbPath,
-      functionName,
-      activeTab,
-      currentPackage,
-      searchQuery,
-      showSuggestions,
-      filteredFunctions,
-      loading,
-      error,
-      onDbPathChange,
-      onSearchInput,
-      onFunctionSelect,
-      switchTab
-    };
-  }
-};
-</script>
-
-<style scoped>
-.function-analysis .dropdown-menu {
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.function-analysis .dropdown-item {
-  padding: 0.5rem 1rem;
-  white-space: normal;
-}
-
-.function-analysis .dropdown-item small {
-  display: block;
-  font-size: 0.875em;
-}
-
-.function-analysis .function-info {
-  border-left: 4px solid #0d6efd;
-  padding-left: 1rem;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/components/HotPathAnalysis.vue b/src/components/runtime/analysis/components/HotPathAnalysis.vue
deleted file mode 100644
index ec3495c..0000000
--- a/src/components/runtime/analysis/components/HotPathAnalysis.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <div class="hot-path-analysis">
-    <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="mb-0">热点路径分析</h5>
-        <div class="controls">
-          <div class="btn-group me-2">
-            <button 
-              class="btn" 
-              :class="analysisMode === 'time' ? 'btn-primary' : 'btn-outline-primary'"
-              @click="toggleAnalysisMode"
-            >
-              执行时间
-            </button>
-            <button 
-              class="btn" 
-              :class="analysisMode === 'count' ? 'btn-primary' : 'btn-outline-primary'"
-              @click="toggleAnalysisMode"
-            >
-              调用次数
-            </button>
-          </div>
-          <select 
-            class="form-select form-select-sm" 
-            v-model="pathLimit"
-            @change="onLimitChange"
-          >
-            <option value="5">Top 5</option>
-            <option value="10">Top 10</option>
-            <option value="20">Top 20</option>
-            <option value="50">Top 50</option>
-          </select>
-        </div>
-      </div>
-      
-      <div class="card-body">
-        <div v-if="loading" class="text-center py-5">
-          <div class="spinner-border text-primary" role="status">
-            <span class="visually-hidden">加载中...</span>
-          </div>
-        </div>
-        
-        <div v-else-if="error" class="alert alert-danger">
-          加载热点路径数据失败: {{ error.message }}
-        </div>
-        
-        <div v-else-if="!hotPaths.length" class="text-center py-5 text-muted">
-          暂无热点路径数据
-        </div>
-        
-        <div v-else>
-          <div ref="chartRef" class="chart-container"></div>
-          
-          <div class="table-responsive mt-4">
-            <table class="table table-sm table-hover">
-              <thead>
-                <tr>
-                  <th>调用路径</th>
-                  <th class="text-end">{{ analysisMode === 'time' ? '平均执行时间(ms)' : '调用次数' }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="path in hotPaths" :key="path.path.join('')">
-                  <td>
-                    <small class="text-muted">{{ path.path.join(' -> ') }}</small>
-                  </td>
-                  <td class="text-end">
-                    {{ analysisMode === 'time' ? path.avgTime : path.callCount }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { useHotPathAnalysis } from '../composables/useHotPathAnalysis';
-import { initChart, handleChartResize, disposeChart } from '../../shared/utils/chartUtils';
-
-export default {
-  name: 'HotPathAnalysis',
-  
-  props: {
-    dbPath: {
-      type: String,
-      required: true
-    },
-    functionName: {
-      type: String,
-      required: true
-    }
-  },
-  
-  setup(props) {
-    const chartRef = ref(null);
-    const chart = ref(null);
-    
-    const {
-      hotPaths,
-      analysisMode,
-      pathLimit,
-      chartOption,
-      loading,
-      error,
-      loadHotPaths,
-      toggleAnalysisMode
-    } = useHotPathAnalysis();
-
-    // 监听属性变化
-    watch(
-      [() => props.dbPath, () => props.functionName],
-      async ([newDbPath, newFunctionName]) => {
-        if (newDbPath && newFunctionName) {
-          await loadHotPaths(newDbPath, newFunctionName);
-        }
-      },
-      { immediate: true }
-    );
-
-    // 监听图表配置变化
-    watch(chartOption, () => {
-      if (chart.value) {
-        chart.value.setOption(chartOption.value);
-      }
-    });
-
-    // 初始化图表
-    onMounted(() => {
-      chart.value = initChart(chartRef.value, chartOption.value);
-      window.addEventListener('resize', onResize);
-    });
-
-    // 清理图表
-    onUnmounted(() => {
-      window.removeEventListener('resize', onResize);
-      disposeChart(chart.value);
-    });
-
-    // 处理窗口大小变化
-    const onResize = () => {
-      handleChartResize(chart.value);
-    };
-
-    // 处理路径数量限制变化
-    const onLimitChange = async () => {
-      await loadHotPaths(props.dbPath, props.functionName);
-    };
-
-    return {
-      chartRef,
-      hotPaths,
-      analysisMode,
-      pathLimit,
-      loading,
-      error,
-      toggleAnalysisMode,
-      onLimitChange
-    };
-  }
-};
-</script>
-
-<style scoped>
-.hot-path-analysis .chart-container {
-  height: 400px;
-  width: 100%;
-}
-
-.hot-path-analysis .form-select {
-  width: auto;
-}
-
-.hot-path-analysis .controls {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/components/PerformanceAnalysis.vue b/src/components/runtime/analysis/components/PerformanceAnalysis.vue
deleted file mode 100644
index 073b204..0000000
--- a/src/components/runtime/analysis/components/PerformanceAnalysis.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <div class="performance-analysis">
-    <div class="card">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="mb-0">性能异常分析</h5>
-        <div class="controls">
-          <div class="input-group input-group-sm">
-            <span class="input-group-text">异常阈值</span>
-            <input 
-              type="number" 
-              class="form-control" 
-              v-model.number="threshold"
-              min="1.1"
-              max="10"
-              step="0.1"
-              @change="onThresholdChange"
-            >
-            <span class="input-group-text">倍标准差</span>
-          </div>
-        </div>
-      </div>
-      
-      <div class="card-body">
-        <div v-if="loading" class="text-center py-5">
-          <div class="spinner-border text-primary" role="status">
-            <span class="visually-hidden">加载中...</span>
-          </div>
-        </div>
-        
-        <div v-else-if="error" class="alert alert-danger">
-          加载性能异常数据失败: {{ error.message }}
-        </div>
-        
-        <template v-else>
-          <!-- 性能统计信息 -->
-          <div class="row g-3 mb-4" v-if="stats">
-            <div class="col-md-4">
-              <div class="card h-100 bg-light">
-                <div class="card-body">
-                  <h6 class="card-subtitle mb-2 text-muted">调用次数</h6>
-                  <p class="card-text h4">{{ stats.totalCalls }}</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-4">
-              <div class="card h-100 bg-light">
-                <div class="card-body">
-                  <h6 class="card-subtitle mb-2 text-muted">平均执行时间</h6>
-                  <p class="card-text h4">{{ stats.avgTime }}ms</p>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-4">
-              <div class="card h-100 bg-light">
-                <div class="card-body">
-                  <h6 class="card-subtitle mb-2 text-muted">标准差</h6>
-                  <p class="card-text h4">{{ stats.standardDeviation }}ms</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div v-if="!anomalies.length" class="text-center py-5 text-muted">
-            暂无性能异常数据
-          </div>
-          
-          <template v-else>
-            <!-- 异常分布图表 -->
-            <div class="row mb-4">
-              <div class="col-md-6">
-                <div ref="chartRef" class="chart-container"></div>
-              </div>
-              <div class="col-md-6 d-flex align-items-center">
-                <div class="w-100">
-                  <div class="alert" :class="anomalyRatio > 20 ? 'alert-danger' : 'alert-warning'">
-                    <h4 class="alert-heading">异常比例: {{ anomalyRatio }}%</h4>
-                    <p class="mb-0">
-                      {{ anomalyRatio > 20 ? '性能异常比例过高，建议进行优化' : '性能异常比例在可接受范围内' }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 异常详情表格 -->
-            <div class="table-responsive">
-              <table class="table table-sm table-hover">
-                <thead>
-                  <tr>
-                    <th>时间戳</th>
-                    <th class="text-end">执行时间(ms)</th>
-                    <th class="text-end">偏差倍数</th>
-                    <th class="text-center">状态</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr 
-                    v-for="item in anomalies" 
-                    :key="item.timestamp"
-                    :class="{ 'table-danger': item.isAnomaly }"
-                  >
-                    <td>
-                      <small>{{ new Date(item.timestamp).toLocaleString() }}</small>
-                    </td>
-                    <td class="text-end">{{ item.executionTime }}</td>
-                    <td class="text-end">{{ item.deviationMultiple?.toFixed(1) }}</td>
-                    <td class="text-center">
-                      <span 
-                        class="badge"
-                        :class="item.isAnomaly ? 'bg-danger' : 'bg-success'"
-                      >
-                        {{ item.isAnomaly ? '异常' : '正常' }}
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </template>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { usePerformanceAnalysis } from '../composables/usePerformanceAnalysis';
-import { initChart, handleChartResize, disposeChart } from '../../shared/utils/chartUtils';
-
-export default {
-  name: 'PerformanceAnalysis',
-  
-  props: {
-    dbPath: {
-      type: String,
-      required: true
-    },
-    functionName: {
-      type: String,
-      required: true
-    }
-  },
-  
-  setup(props) {
-    const chartRef = ref(null);
-    const chart = ref(null);
-    
-    const {
-      anomalies,
-      stats,
-      threshold,
-      distributionChartOption,
-      anomalyRatio,
-      loading,
-      error,
-      loadPerformanceData,
-      updateThreshold
-    } = usePerformanceAnalysis();
-
-    // 监听属性变化
-    watch(
-      [() => props.dbPath, () => props.functionName],
-      async ([newDbPath, newFunctionName]) => {
-        if (newDbPath && newFunctionName) {
-          await loadPerformanceData(newDbPath, newFunctionName);
-        }
-      },
-      { immediate: true }
-    );
-
-    // 监听图表配置变化
-    watch(distributionChartOption, () => {
-      if (chart.value && distributionChartOption.value) {
-        chart.value.setOption(distributionChartOption.value);
-      }
-    });
-
-    // 初始化图表
-    onMounted(() => {
-      if (distributionChartOption.value) {
-        chart.value = initChart(chartRef.value, distributionChartOption.value);
-        window.addEventListener('resize', onResize);
-      }
-    });
-
-    // 清理图表
-    onUnmounted(() => {
-      window.removeEventListener('resize', onResize);
-      disposeChart(chart.value);
-    });
-
-    // 处理窗口大小变化
-    const onResize = () => {
-      handleChartResize(chart.value);
-    };
-
-    // 处理阈值变化
-    const onThresholdChange = async () => {
-      await updateThreshold(threshold.value, props.dbPath, props.functionName);
-    };
-
-    return {
-      chartRef,
-      anomalies,
-      stats,
-      threshold,
-      anomalyRatio,
-      loading,
-      error,
-      onThresholdChange
-    };
-  }
-};
-</script>
-
-<style scoped>
-.performance-analysis .chart-container {
-  height: 300px;
-  width: 100%;
-}
-
-.performance-analysis .form-control {
-  width: 80px;
-}
-
-.performance-analysis .controls {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/composables/useHotPathAnalysis.js b/src/components/runtime/analysis/composables/useHotPathAnalysis.js
deleted file mode 100644
index ba0149d..0000000
--- a/src/components/runtime/analysis/composables/useHotPathAnalysis.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { ref, computed } from 'vue';
-import { useRuntimeApi } from '../../shared/composables/useRuntimeApi';
-import { createHotPathChartOption } from '../../shared/utils/chartUtils';
-
-export function useHotPathAnalysis() {
-  const runtimeApi = useRuntimeApi();
-  const hotPaths = ref([]);
-  const analysisMode = ref('time'); // 'time' | 'count'
-  const pathLimit = ref(10);
-  
-  // 处理热点路径数据
-  const processHotPaths = (paths) => {
-    return paths.map(path => ({
-      name: path.path.join(' -> '),
-      value: analysisMode.value === 'time' ? path.avgTime : path.callCount
-    }));
-  };
-
-  // 计算图表配置
-  const chartOption = computed(() => {
-    const processedData = processHotPaths(hotPaths.value);
-    return createHotPathChartOption(processedData, analysisMode.value);
-  });
-
-  // 加载热点路径数据
-  const loadHotPaths = async (dbPath, functionName) => {
-    const paths = await runtimeApi.getHotPaths(dbPath, functionName, pathLimit.value);
-    hotPaths.value = paths;
-  };
-
-  // 切换分析模式
-  const toggleAnalysisMode = () => {
-    analysisMode.value = analysisMode.value === 'time' ? 'count' : 'time';
-  };
-
-  // 更新路径数量限制
-  const updatePathLimit = (limit) => {
-    pathLimit.value = limit;
-  };
-
-  return {
-    hotPaths,
-    analysisMode,
-    pathLimit,
-    chartOption,
-    loading: runtimeApi.loading,
-    error: runtimeApi.error,
-    loadHotPaths,
-    toggleAnalysisMode,
-    updatePathLimit
-  };
-} 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/composables/usePerformanceAnalysis.js b/src/components/runtime/analysis/composables/usePerformanceAnalysis.js
deleted file mode 100644
index f06e50d..0000000
--- a/src/components/runtime/analysis/composables/usePerformanceAnalysis.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { ref, computed } from 'vue';
-import { useRuntimeApi } from '../../shared/composables/useRuntimeApi';
-import { createPieChartOption } from '../../shared/utils/chartUtils';
-
-export function usePerformanceAnalysis() {
-  const runtimeApi = useRuntimeApi();
-  const anomalies = ref([]);
-  const threshold = ref(2);
-  const stats = ref(null);
-  
-  // 处理性能统计数据
-  const processStats = (rawStats) => {
-    if (!rawStats) return null;
-    return {
-      avgTime: Number(rawStats.avgTime?.toFixed(2)) || 0,
-      maxTime: Number(rawStats.maxTime?.toFixed(2)) || 0,
-      minTime: Number(rawStats.minTime?.toFixed(2)) || 0,
-      totalCalls: rawStats.totalCalls || 0,
-      standardDeviation: Number(rawStats.standardDeviation?.toFixed(2)) || 0
-    };
-  };
-
-  // 计算异常分布图表配置
-  const distributionChartOption = computed(() => {
-    if (!anomalies.value.length) return null;
-    
-    const normal = anomalies.value.filter(a => !a.isAnomaly).length;
-    const abnormal = anomalies.value.filter(a => a.isAnomaly).length;
-    
-    const data = [
-      { name: '正常调用', value: normal },
-      { name: '异常调用', value: abnormal }
-    ];
-    
-    return createPieChartOption(data, '性能异常分布');
-  });
-
-  // 加载性能异常数据
-  const loadPerformanceData = async (dbPath, functionName) => {
-    const [anomalyData, statsData] = await Promise.all([
-      runtimeApi.getPerformanceAnomalies(dbPath, functionName, threshold.value),
-      runtimeApi.getCallStats(dbPath, functionName)
-    ]);
-    
-    anomalies.value = anomalyData;
-    stats.value = processStats(statsData);
-  };
-
-  // 更新阈值
-  const updateThreshold = async (newThreshold, dbPath, functionName) => {
-    threshold.value = newThreshold;
-    await loadPerformanceData(dbPath, functionName);
-  };
-
-  // 计算异常比例
-  const anomalyRatio = computed(() => {
-    if (!anomalies.value.length) return 0;
-    const abnormal = anomalies.value.filter(a => a.isAnomaly).length;
-    return Number((abnormal / anomalies.value.length * 100).toFixed(1));
-  });
-
-  return {
-    anomalies,
-    stats,
-    threshold,
-    distributionChartOption,
-    anomalyRatio,
-    loading: runtimeApi.loading,
-    error: runtimeApi.error,
-    loadPerformanceData,
-    updateThreshold
-  };
-} 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/components/CallChainAnalysis.vue b/src/components/runtime/components/CallChainAnalysis.vue
similarity index 98%
rename from src/components/runtime/analysis/components/CallChainAnalysis.vue
rename to src/components/runtime/components/CallChainAnalysis.vue
index 7011550..1716bb1 100644
--- a/src/components/runtime/analysis/components/CallChainAnalysis.vue
+++ b/src/components/runtime/components/CallChainAnalysis.vue
@@ -106,7 +106,7 @@
 <script>
 import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useCallChainAnalysis } from '../composables/useCallChainAnalysis';
-import { initChart, handleChartResize, disposeChart } from '../../shared/utils/chartUtils';
+import { initChart, handleChartResize, disposeChart } from '../utils/chartUtils';
 
 export default {
   name: 'CallChainAnalysis',
diff --git a/src/components/runtime/components/FunctionAnalysis.vue b/src/components/runtime/components/FunctionAnalysis.vue
new file mode 100644
index 0000000..a1453ba
--- /dev/null
+++ b/src/components/runtime/components/FunctionAnalysis.vue
@@ -0,0 +1,1079 @@
+<template>
+  <div class="function-analysis">
+    <!-- 搜索部分 -->
+    <div class="card mb-4 search-section">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h5 class="mb-0"><i class="bi bi-search me-2"></i>{{ t('runtimeAnalysis.functionAnalysis.title') }}</h5>
+      </div>
+      <div class="card-body">
+        <!-- 搜索框区域 -->
+        <div class="d-flex align-items-center mb-3">
+          <div class="search-icon me-2">
+            <i class="bi bi-code-square"></i>
+          </div>
+          <div class="flex-grow-1">
+            <input
+              ref="searchInput"
+              v-model="searchQuery"
+              type="text"
+              :placeholder="t('runtimeAnalysis.functionAnalysis.inputFunctionName')"
+              class="form-control"
+              @input="handleInput"
+              @keydown.down="onDown"
+              @keydown.up="onUp"
+              @keydown.enter="onEnter"
+              @keydown.esc="hideDropdown"
+              autocomplete="off"
+            />
+          </div>
+          <div class="ms-2">
+            <button class="btn btn-primary" @click="search">
+              <i class="bi bi-search me-1"></i> {{ t('runtimeAnalysis.functionAnalysis.search') }}
+            </button>
+          </div>
+        </div>
+        
+        <!-- 搜索建议区域 - 以卡片形式展示 -->
+        <div v-if="showDropdown && filteredItems.length > 0" class="search-suggestions-card mt-2">
+          <div class="suggestions-header px-3 py-2 bg-light border-bottom">
+            <small><i class="bi bi-info-circle me-1"></i>{{ t('runtimeAnalysis.functionAnalysis.foundCount', { count: filteredItems.length }) }}</small>
+          </div>
+          <div class="suggestions-body" style="max-height: 300px; overflow-y: auto;">
+            <div 
+              v-for="(item, index) in filteredItems" 
+              :key="index"
+              class="suggestion-item p-2"
+              :class="{'active': index === activeIndex}"
+              @click="selectItem(item)"
+              @mouseover="activeIndex = index"
+            >
+              <div class="d-flex align-items-center">
+                <div class="function-icon me-2">
+                  <i class="bi bi-code-square"></i>
+                </div>
+                <div>
+                  <div v-html="highlightText(item.name, searchQuery)"></div>
+                  <small v-if="item.package" class="text-muted">{{ item.package }}</small>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 函数信息显示区域 -->
+    <div v-if="selectedFunction" class="function-info mb-4">
+      
+      <!-- 选中函数显示区域 -->
+      <div class="selected-function mt-4">
+        <div class="card function-card">
+          <div class="card-header function-header">
+            <i class="bi bi-code-square  me-2"></i>
+            <strong class="text-primary">{{ selectedFunction.name }}</strong>
+          </div>
+          <div class="card-body">
+            <div v-if="loading" class="d-flex justify-content-center align-items-center p-5">
+              <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">加载中...</span>
+              </div>
+            </div>
+            <div v-else>
+              <!-- 函数信息 -->
+              <div class="mb-3">
+                <div class="d-flex align-items-center mb-2">
+                  <i class="bi bi-archive me-2"></i>
+                  <span class="text-muted">{{ $t('runtimeAnalysis.functionAnalysis.packagePath') }}:</span>
+                  <span class="ms-2">{{ selectedFunction.package || '无' }}</span>
+                </div>
+              </div>
+              
+              <!-- 性能指标卡片 -->
+              <div class="row mb-4">
+                <div class="col-md-4 mb-4">
+                  <div class="card h-100 metric-card">
+                    <div class="card-body text-center">
+                      <h6 class="card-title d-flex align-items-center justify-content-center">
+                        <i class="bi bi-telephone-outbound me-2"></i>
+                        <span>{{ $t('runtimeAnalysis.functionAnalysis.callCount') }}</span>
+                      </h6>
+                      <p class="display-6">{{ functionStats.callCount || 0 }}</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4 mb-4">
+                  <div class="card h-100 metric-card">
+                    <div class="card-body text-center">
+                      <h6 class="card-title d-flex align-items-center justify-content-center">
+                        <i class="bi bi-clock-history me-2"></i>
+                        <span>{{ $t('runtimeAnalysis.functionAnalysis.avgTime') }}</span>
+                      </h6>
+                      <p class="display-6">{{ formatTime(functionStats.avgTime) }} <small>ms</small></p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-md-4 mb-4">
+                  <div class="card h-100 metric-card">
+                    <div class="card-body text-center">
+                      <h6 class="card-title d-flex align-items-center justify-content-center">
+                        <i class="bi bi-lightning-charge me-2"></i>
+                        <span>{{ $t('runtimeAnalysis.functionAnalysis.maxTime') }}</span>
+                      </h6>
+                      <p class="display-6">{{ formatTime(functionStats.maxTime) }} <small>ms</small></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            
+              <!-- 函数调用分析部分 -->
+              <div class="card mb-4">
+                <div class="card-header">
+                  <ul class="nav nav-tabs card-header-tabs">
+                    <li class="nav-item">
+                      <a class="nav-link" :class="{ active: activeTab === 'callers' }" href="#" @click.prevent="activeTab = 'callers'">
+                        <i class="bi bi-arrow-down-circle me-1"></i>调用者
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" :class="{ active: activeTab === 'callees' }" href="#" @click.prevent="activeTab = 'callees'">
+                        <i class="bi bi-arrow-up-circle me-1"></i>被调用者
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" :class="{ active: activeTab === 'tree' }" href="#" @click.prevent="activeTab = 'tree'">
+                        <i class="bi bi-diagram-3 me-1"></i>调用树
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <!-- 加载状态 -->
+                  <div v-if="loading" class="text-center py-3">
+                    <div class="spinner-border text-primary" role="status">
+                      <span class="visually-hidden">{{ t('common.loading') }}</span>
+                    </div>
+                  </div>
+                  
+                  <!-- 调用者表格 -->
+                  <div v-else-if="activeTab === 'callers'" class="table-responsive">
+                    <p class="text-muted mb-2">{{ $t('runtimeAnalysis.functionAnalysis.callersList', { name: selectedFunction.name }) }}：</p>
+                    <table class="table table-hover" v-if="functionData.callers && functionData.callers.length">
+                      <thead>
+                        <tr>
+                          <th scope="col">#</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.functionName') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.packagePath') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.callCount') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.avgTime') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.operations') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="(caller, index) in functionData.callers" :key="caller.id || caller.name">
+                          <td>{{ index + 1 }}</td>
+                          <td>{{ caller.name }}</td>
+                          <td><span class="badge bg-light text-dark">{{ caller.package || $t('runtimeAnalysis.functionAnalysis.none') }}</span></td>
+                          <td><span class="badge bg-primary">{{ caller.callCount || 0 }}</span></td>
+                          <td><span class="badge bg-info">{{ formatTime(caller.avgTime) }} ms</span></td>
+                          <td>
+                            <button class="btn btn-sm btn-outline-primary" @click="selectItem(caller)">
+                              <i class="bi bi-box-arrow-in-right me-1"></i>{{ $t('runtimeAnalysis.functionAnalysis.analyze') }}
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <div v-else class="alert alert-info">
+                      <i class="bi bi-info-circle me-2"></i>{{ $t('runtimeAnalysis.functionAnalysis.noCallers') }}
+                    </div>
+                  </div>
+                  
+                  <!-- 被调用者表格 -->
+                  <div v-else-if="activeTab === 'callees'" class="table-responsive">
+                    <p class="text-muted mb-2">{{ $t('runtimeAnalysis.functionAnalysis.calleesList', { name: selectedFunction.name }) }}：</p>
+                    <table class="table table-hover" v-if="functionData.callees && functionData.callees.length">
+                      <thead>
+                        <tr>
+                          <th scope="col">#</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.functionName') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.packagePath') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.callCount') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.avgTime') }}</th>
+                          <th scope="col">{{ $t('runtimeAnalysis.functionAnalysis.operations') }}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="(callee, index) in functionData.callees" :key="callee.id || callee.name">
+                          <td>{{ index + 1 }}</td>
+                          <td>{{ callee.name }}</td>
+                          <td><span class="badge bg-light text-dark">{{ callee.package || $t('runtimeAnalysis.functionAnalysis.none') }}</span></td>
+                          <td><span class="badge bg-success">{{ callee.callCount || 0 }}</span></td>
+                          <td><span class="badge bg-info">{{ formatTime(callee.avgTime) }} ms</span></td>
+                          <td>
+                            <button class="btn btn-sm btn-outline-primary" @click="selectItem(callee)">
+                              <i class="bi bi-box-arrow-in-right me-1"></i>{{ $t('runtimeAnalysis.functionAnalysis.analyze') }}
+                            </button>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                    <div v-else class="alert alert-info">
+                      <i class="bi bi-info-circle me-2"></i>{{ $t('runtimeAnalysis.functionAnalysis.noCallees') }}
+                    </div>
+                  </div>
+                  
+                  <!-- 树状图展示 -->
+                  <div v-else-if="activeTab === 'tree'" class="tree-view">
+                    <div class="mb-3">
+                      <div class="d-flex align-items-center mb-2">
+                        <div class="me-3">
+                          <label class="form-label">链类型：</label>
+                          <select v-model="chainType" class="form-select form-select-sm" @change="loadTreeGraph">
+                            <option value="upstream">上游调用链</option>
+                            <option value="downstream">下游调用链</option>
+                            <option value="full">完整调用链</option>
+                          </select>
+                        </div>
+                        <div>
+                          <label class="form-label">深度：</label>
+                          <select v-model="treeDepth" class="form-select form-select-sm" @change="loadTreeGraph">
+                            <option value="1">1</option>
+                            <option value="2">2</option>
+                            <option value="3">3</option>
+                            <option value="4">4</option>
+                            <option value="5">5</option>
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    
+                    <div v-if="loadingTree" class="py-5 text-center">
+                      <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">加载中...</span>
+                      </div>
+                      <div class="mt-2">加载调用树数据...</div>
+                    </div>
+                    
+                    <div v-else-if="treeData.length === 0" class="alert alert-info">
+                      <i class="bi bi-info-circle me-2"></i>没有可用的调用树数据
+                    </div>
+                    
+                    <div v-else class="tree-container">
+                      <div class="card">
+                        <div class="card-body">
+                          <div class="tree-node" v-for="(tree, index) in treeData" :key="index">
+                            <div class="tree-root">
+                              <i class="bi bi-diagram-3 me-2"></i>
+                              <strong>{{ tree.name }}</strong>
+                            </div>
+                            <div class="tree-children ps-4 mt-2">
+                              <template v-if="tree.children && tree.children.length">
+                                <div v-for="(child, childIndex) in tree.children" :key="childIndex">
+                                  <tree-node :node="child" @select-function="handleTreeNodeClick" />
+                                </div>
+                              </template>
+                              <div v-else class="text-muted">
+                                <i class="bi bi-info-circle me-2"></i>没有子节点
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-if="!selectedFunction && !loading" class="empty-state text-center">
+      <div class="py-5">
+        <i class="bi bi-search display-4 text-muted"></i>
+        <h4 class="mt-3">{{ t('runtimeAnalysis.functionAnalysis.searchToAnalyze') }}</h4>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="d-flex justify-content-center py-5">
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">{{ t('common.loading') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, computed, nextTick, watch, defineAsyncComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from '../../../axios';
+import debounce from 'lodash/debounce';
+
+// 使用defineAsyncComponent异步加载TreeNode组件
+const TreeNode = defineAsyncComponent(() => import('./TreeNode.vue'));
+
+export default {
+  name: 'FunctionAnalysis',
+  
+  components: {
+    TreeNode // 注册TreeNode组件
+  },
+  
+  setup() {
+    const { t } = useI18n();
+    // 初始化项目路径
+    const currentDbPath = ref(localStorage.getItem('verifiedProjectPath') || '');
+    const searchQuery = ref('');
+    const showDropdown = ref(false);
+    const activeIndex = ref(-1);
+    const items = ref([]);
+    const loading = ref(false);
+    const searchInput = ref(null);
+    const selectedFunction = ref(null);
+    const activeTab = ref('callers');
+    const functionData = ref({
+      callers: [],
+      callees: []
+    });
+    const functionStats = ref({
+      callCount: 0,
+      avgTime: 0,
+      maxTime: 0,
+      successRate: 0,
+      successCount: 0
+    });
+    
+    // 树状图相关
+    const chainType = ref('full');
+    const treeDepth = ref('3');
+    const treeData = ref([]);
+    const loadingTree = ref(false);
+
+    // 过滤后的项目
+    const filteredItems = computed(() => {
+      return items.value;
+    });
+
+    // 获取函数列表
+    const fetchFunctions = async (query) => {
+      if (!currentDbPath.value || !query) {
+        items.value = [];
+        return;
+      }
+
+      loading.value = true;
+
+      try {
+        const response = await axios.post('/api/runtime/functions/search', {
+          dbpath: currentDbPath.value,
+          query: query,
+          limit: 10
+        });
+
+        items.value = response.data.functions || [];
+        
+        if (items.value.length > 0) {
+          showDropdown.value = true;
+          activeIndex.value = -1;
+        } else {
+          showDropdown.value = false;
+        }
+      } catch (error) {
+        console.error('获取函数列表失败:', error);
+        items.value = [];
+        showDropdown.value = false;
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 防抖处理
+    const debouncedFetch = debounce(fetchFunctions, 300);
+
+    // 处理输入
+    const handleInput = () => {
+      if (searchQuery.value.length > 0) {
+        debouncedFetch(searchQuery.value);
+      } else {
+        items.value = [];
+        showDropdown.value = false;
+      }
+    };
+
+    // 键盘导航 - 下
+    const onDown = (e) => {
+      e.preventDefault();
+      if (!showDropdown.value) {
+        showDropdown.value = true;
+        return;
+      }
+      
+      if (filteredItems.value.length === 0) return;
+      
+      activeIndex.value = activeIndex.value < filteredItems.value.length - 1 
+        ? activeIndex.value + 1 
+        : 0;
+      
+      scrollToActive();
+    };
+
+    // 键盘导航 - 上
+    const onUp = (e) => {
+      e.preventDefault();
+      if (!showDropdown.value || filteredItems.value.length === 0) return;
+      
+      activeIndex.value = activeIndex.value > 0 
+        ? activeIndex.value - 1 
+        : filteredItems.value.length - 1;
+      
+      scrollToActive();
+    };
+
+    // 确保活动项在视图中
+    const scrollToActive = () => {
+      nextTick(() => {
+        const activeEl = document.querySelector('.suggestion-item.active');
+        if (activeEl) {
+          activeEl.scrollIntoView({ block: 'nearest' });
+        }
+      });
+    };
+
+    // 处理回车
+    const onEnter = () => {
+      if (showDropdown.value && activeIndex.value >= 0 && activeIndex.value < filteredItems.value.length) {
+        selectItem(filteredItems.value[activeIndex.value]);
+      } else {
+        search();
+      }
+    };
+
+    // 隐藏下拉框
+    const hideDropdown = () => {
+      showDropdown.value = false;
+    };
+
+    // 选择项目
+    const selectItem = (item) => {
+      searchQuery.value = item.name;
+      selectedFunction.value = item;
+      hideDropdown();
+      // 在这里调用函数分析相关API获取更多数据
+      analyzeFunctionDetails(item.name);
+    };
+
+    // 分析函数详情
+    const analyzeFunctionDetails = async (functionName) => {
+      if (!currentDbPath.value || !functionName) return;
+      
+      loading.value = true;
+      try {
+        // 初始化函数数据结构
+        functionData.value = {
+          callers: [],
+          callees: []
+        };
+        
+        // 获取被调用者（子函数）
+        try {
+          // 优先使用专门的子函数接口
+          const childFunctionsResponse = await axios.post('/api/runtime/functions/children', {
+            dbpath: currentDbPath.value,
+            parentId: functionName // 使用函数名作为父ID参数
+          });
+          
+          if (childFunctionsResponse.data && childFunctionsResponse.data.functions) {
+            functionData.value.callees = childFunctionsResponse.data.functions
+              .sort((a, b) => (b.callCount || 0) - (a.callCount || 0));
+          } else {
+            // 如果专门的接口没有返回数据，回退到函数分析数据
+            const functionAnalysisResponse = await axios.post('/api/runtime/function/analysis', {
+              dbpath: currentDbPath.value,
+              functionName: functionName,
+              type: 'full' // 获取完整的调用关系
+            });
+            
+            if (functionAnalysisResponse.data && functionAnalysisResponse.data.callData) {
+              // 提取被调用函数（子函数）
+              const calleesData = [];
+              const processNode = (node) => {
+                if (node.children && node.children.length > 0) {
+                  node.children.forEach(child => {
+                    calleesData.push({
+                      name: child.name,
+                      package: child.package || '',
+                      callCount: child.callCount || 0,
+                      avgTime: child.avgTime || '0'
+                    });
+                    processNode(child);
+                  });
+                }
+              };
+              
+              // 处理根节点及其子节点
+              const rootNodes = functionAnalysisResponse.data.callData;
+              rootNodes.forEach(node => processNode(node));
+              
+              // 去重并排序
+              const uniqueCallees = Array.from(
+                new Map(calleesData.map(item => [item.name, item])).values()
+              ).sort((a, b) => b.callCount - a.callCount);
+              
+              functionData.value.callees = uniqueCallees;
+            }
+          }
+        } catch (error) {
+          console.error('获取函数被调用者数据失败:', error);
+          
+          // 发生错误时回退到函数分析数据
+          try {
+            const functionAnalysisResponse = await axios.post('/api/runtime/function/analysis', {
+              dbpath: currentDbPath.value,
+              functionName: functionName,
+              type: 'full'
+            });
+            
+            if (functionAnalysisResponse.data && functionAnalysisResponse.data.callData) {
+              // 提取被调用函数（子函数）
+              const calleesData = [];
+              const processNode = (node) => {
+                if (node.children && node.children.length > 0) {
+                  node.children.forEach(child => {
+                    calleesData.push({
+                      name: child.name,
+                      package: child.package || '',
+                      callCount: child.callCount || 0,
+                      avgTime: child.avgTime || '0'
+                    });
+                    processNode(child);
+                  });
+                }
+              };
+              
+              // 处理根节点及其子节点
+              const rootNodes = functionAnalysisResponse.data.callData;
+              rootNodes.forEach(node => processNode(node));
+              
+              // 去重并排序
+              const uniqueCallees = Array.from(
+                new Map(calleesData.map(item => [item.name, item])).values()
+              ).sort((a, b) => b.callCount - a.callCount);
+              
+              functionData.value.callees = uniqueCallees;
+            }
+          } catch (innerError) {
+            console.error('回退方法获取被调用者数据也失败:', innerError);
+          }
+        }
+        
+        // 获取调用者（父函数）
+        try {
+          const parentFunctionsResponse = await axios.post('/api/runtime/functions/parents', {
+            dbpath: currentDbPath.value,
+            functionName: functionName
+          });
+          
+          if (parentFunctionsResponse.data && parentFunctionsResponse.data.functions) {
+            functionData.value.callers = parentFunctionsResponse.data.functions
+              .sort((a, b) => (b.callCount || 0) - (a.callCount || 0));
+          }
+        } catch (error) {
+          console.error('获取函数调用者数据失败:', error);
+        }
+        
+        // 获取函数性能指标
+        try {
+          const statsResponse = await axios.post('/api/runtime/function/stats', {
+            dbPath: currentDbPath.value,
+            functionName: functionName
+          });
+          
+          if (statsResponse.data && statsResponse.data.stats && statsResponse.data.stats.length > 0) {
+            // 服务器返回的是数组，取第一个元素
+            functionStats.value = statsResponse.data.stats[0] || {};
+            
+            // 处理时间字符串
+            if (typeof functionStats.value.avgTime === 'string') {
+              functionStats.value.avgTime = parseFloat(functionStats.value.avgTime);
+            }
+            if (typeof functionStats.value.maxTime === 'string') {
+              functionStats.value.maxTime = parseFloat(functionStats.value.maxTime);
+            }
+            if (typeof functionStats.value.minTime === 'string') {
+              functionStats.value.minTime = parseFloat(functionStats.value.minTime);
+            }
+            
+            // 计算成功率（如果没有提供）
+            if (functionStats.value.callCount && !functionStats.value.successRate) {
+              // 假设所有调用都是成功的，除非有明确的失败数据
+              functionStats.value.successRate = 1.0;
+            }
+          } else {
+            functionStats.value = {};
+          }
+        } catch (error) {
+          console.error('获取函数性能指标失败:', error);
+          functionStats.value = {};
+        }
+        
+        // 加载树状图数据
+        if (activeTab.value === 'tree') {
+          loadTreeGraph();
+        }
+      } catch (error) {
+        console.error('分析函数失败:', error);
+        functionData.value = {
+          callers: [],
+          callees: []
+        };
+        functionStats.value = {};
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 加载树状图数据
+    const loadTreeGraph = async () => {
+      if (!selectedFunction.value || !selectedFunction.value.name) return;
+      
+      loadingTree.value = true;
+      treeData.value = [];
+      
+      try {
+        const response = await axios.post('/api/runtime/tree-graph', {
+          dbPath: currentDbPath.value,
+          functionName: selectedFunction.value.name,
+          chainType: chainType.value,
+          depth: parseInt(treeDepth.value)
+        });
+        
+        if (response.data && Array.isArray(response.data.trees)) {
+          treeData.value = response.data.trees;
+        } else {
+          console.warn('树状图数据格式不符合预期', response.data);
+          treeData.value = [];
+        }
+      } catch (error) {
+        console.error('获取调用树数据失败:', error);
+        treeData.value = [];
+      } finally {
+        loadingTree.value = false;
+      }
+    };
+    
+    // 处理树节点点击事件
+    const handleTreeNodeClick = (node) => {
+      if (!node) return;
+      
+      try {
+        if (node && node.name) {
+          // 查找功能是否在搜索结果中
+          const foundFunction = items.value.find(item => item.name === node.name);
+          
+          if (foundFunction) {
+            selectItem(foundFunction);
+          } else {
+            // 创建一个简单的函数对象
+            const simpleFn = {
+              name: node.name,
+              package: ''
+            };
+            selectItem(simpleFn);
+          }
+        }
+      } catch (error) {
+        console.error('处理树节点点击事件失败:', error);
+      }
+    };
+
+    // 执行搜索
+    const search = () => {
+      if (!searchQuery.value) {
+        alert(t('runtimeAnalysis.functionAnalysis.pleaseInputFunction'));
+        return;
+      }
+      hideDropdown();
+      // 可以在这里直接搜索或调用其他方法
+      fetchFunctions(searchQuery.value);
+    };
+
+    // 高亮文本
+    const highlightText = (text, query) => {
+      if (!query) return text;
+      try {
+        const regex = new RegExp(`(${query})`, 'gi');
+        return text.replace(regex, '<span class="highlight">$1</span>');
+      } catch (e) {
+        return text;
+      }
+    };
+
+    // 点击外部关闭下拉框
+    const handleClickOutside = (event) => {
+      if (searchInput.value && !searchInput.value.contains(event.target)) {
+        hideDropdown();
+      }
+    };
+
+    // 生命周期钩子
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside);
+    });
+
+    onUnmounted(() => {
+      document.removeEventListener('click', handleClickOutside);
+      if (debouncedFetch.cancel) debouncedFetch.cancel();
+    });
+
+    // 格式化时间显示
+    const formatTime = (time) => {
+      if (!time) return '0';
+      
+      // 如果是字符串并且包含单位，提取数值部分
+      if (typeof time === 'string') {
+        const match = time.match(/(\d+(\.\d+)?)/);
+        if (match) {
+          return match[1];
+        }
+        return '0';
+      }
+      
+      // 如果是数值
+      if (isNaN(Number(time))) return '0';
+      const timeNum = Number(time);
+      if (timeNum < 1) {
+        return timeNum.toFixed(2);
+      }
+      return timeNum.toFixed(1);
+    };
+    
+    // 格式化成功率
+    const formatSuccessRate = (rate) => {
+      if (!rate || isNaN(Number(rate))) return '0%';
+      const rateNum = Number(rate);
+      return (rateNum * 100).toFixed(1) + '%';
+    };
+
+    // 监听标签切换
+    const watchTabChange = () => {
+      if (activeTab.value === 'tree' && selectedFunction.value) {
+        loadTreeGraph();
+      }
+    };
+
+    // 监听activeTab变化
+    watch(activeTab, watchTabChange);
+
+    return {
+      currentDbPath,
+      searchQuery,
+      showDropdown,
+      activeIndex,
+      filteredItems,
+      loading,
+      searchInput,
+      selectedFunction,
+      activeTab,
+      functionData,
+      functionStats,
+      handleInput,
+      onDown,
+      onUp,
+      onEnter,
+      hideDropdown,
+      selectItem,
+      search,
+      highlightText,
+      analyzeFunctionDetails,
+      formatTime,
+      formatSuccessRate,
+      t,
+      // 树状图相关
+      chainType,
+      treeDepth,
+      treeData,
+      loadingTree,
+      loadTreeGraph,
+      handleTreeNodeClick
+    };
+  }
+};
+</script>
+
+<style scoped>
+.function-analysis {
+  padding: 1rem;
+  position: relative;
+  isolation: isolate;
+}
+
+.search-section {
+  position: relative;
+}
+
+.search-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background-color: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+  border-radius: 8px;
+}
+
+.search-suggestions-card {
+  border: 1px solid #dee2e6;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background-color: white;
+}
+
+.suggestions-header {
+  font-size: 0.875rem;
+  color: #6c757d;
+}
+
+.suggestion-item {
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 4px 8px;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.suggestion-item:hover {
+  background-color: #f8f9fa;
+}
+
+.suggestion-item.active {
+  background-color: rgba(13, 110, 253, 0.08);
+}
+
+.function-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+  border-radius: 8px;
+}
+
+.highlight {
+  background-color: rgba(255, 193, 7, 0.2);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  font-weight: bold;
+  color: #212529;
+}
+
+.empty-state {
+  padding: 3rem;
+  background-color: rgba(248, 249, 250, 0.5);
+  border-radius: 12px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.function-info {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.nav-tabs .nav-link {
+  color: #6c757d;
+  border: none;
+  padding: 0.5rem 1rem;
+  transition: all 0.2s ease;
+}
+
+.nav-tabs .nav-link:hover {
+  color: #495057;
+  background-color: rgba(13, 110, 253, 0.05);
+}
+
+.nav-tabs .nav-link.active {
+  color: #0d6efd;
+  background-color: rgba(13, 110, 253, 0.1);
+  border-bottom: 2px solid #0d6efd;
+}
+
+.table th {
+  background-color: #f8f9fa;
+  font-weight: 500;
+}
+
+.table-hover tbody tr:hover {
+  background-color: rgba(13, 110, 253, 0.05);
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .search-icon {
+    background-color: rgba(91, 154, 255, 0.15);
+    color: #5b9aff;
+  }
+
+  .search-suggestions-card {
+    background-color: #2d2d2d;
+    border-color: #3d3d3d;
+  }
+  
+  .suggestions-header {
+    background-color: #333333 !important;
+    color: #a0a0a0;
+    border-bottom-color: #3d3d3d !important;
+  }
+
+  .suggestion-item:hover {
+    background-color: #333333;
+  }
+
+  .suggestion-item.active {
+    background-color: rgba(91, 154, 255, 0.15);
+  }
+
+  .function-icon {
+    background-color: rgba(91, 154, 255, 0.15);
+    color: #5b9aff;
+  }
+
+  .highlight {
+    background-color: rgba(255, 193, 7, 0.15);
+    color: #e1e1e1;
+  }
+
+  .empty-state {
+    color: #a0a0a0;
+    background-color: rgba(45, 45, 45, 0.5);
+  }
+
+  .nav-tabs .nav-link {
+    color: #a0a0a0;
+  }
+  
+  .nav-tabs .nav-link:hover {
+    color: #e1e1e1;
+    background-color: rgba(91, 154, 255, 0.08);
+  }
+  
+  .nav-tabs .nav-link.active {
+    color: #5b9aff;
+    background-color: rgba(91, 154, 255, 0.15);
+    border-bottom-color: #5b9aff;
+  }
+  
+  .table th {
+    background-color: #333333;
+    color: #e1e1e1;
+  }
+  
+  .table {
+    color: #e1e1e1;
+  }
+  
+  .table-hover tbody tr:hover {
+    background-color: rgba(91, 154, 255, 0.08);
+  }
+  
+  .badge.bg-light {
+    background-color: #444444 !important;
+    color: #e1e1e1 !important;
+  }
+}
+
+.selected-function {
+  margin-top: 2rem;
+}
+
+.function-header {
+  background-color: var(--bs-primary-bg-subtle);
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.function-card {
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+  transition: box-shadow .3s;
+}
+
+.function-card:hover {
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+}
+
+.metric-card {
+  border-radius: 0.5rem;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid var(--bs-border-color);
+}
+
+.metric-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
+}
+
+.metric-card .card-title {
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--bs-secondary);
+}
+
+.metric-card .display-6 {
+  font-weight: 600;
+  color: var(--bs-primary);
+}
+
+/* 深色模式支持 */
+[data-bs-theme="dark"] .metric-card {
+  background-color: var(--bs-dark-bg-subtle);
+}
+
+[data-bs-theme="dark"] .metric-card .display-6 {
+  color: var(--bs-info);
+}
+
+[data-bs-theme="dark"] .function-header {
+  background-color: var(--bs-dark-bg-subtle);
+}
+
+/* 树形结构样式 */
+.tree-container {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.tree-node {
+  padding: 4px 0;
+}
+
+.tree-node-simple {
+  padding: 4px 0;
+  margin-bottom: 8px;
+}
+
+.tree-root {
+  font-weight: 500;
+  padding: 6px;
+  background-color: var(--hover-color);
+  border-radius: 4px;
+}
+
+.toggle-icon {
+  cursor: pointer;
+  color: var(--primary-color);
+}
+
+.node-content {
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.node-content:hover {
+  background-color: var(--hover-color);
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/runtime/components/FunctionSearch.vue b/src/components/runtime/components/FunctionSearch.vue
new file mode 100644
index 0000000..f0638e8
--- /dev/null
+++ b/src/components/runtime/components/FunctionSearch.vue
@@ -0,0 +1,338 @@
+<template>
+  <div class="function-search">
+    <div class="card mb-4">
+      <div class="card-header">
+        <h5 class="mb-0"><i class="bi bi-search me-2"></i>{{ $t('runtimeAnalysis.functionAnalysis.title') }}</h5>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-md-8">
+            <div class="input-group">
+              <span class="input-group-text"><i class="bi bi-code-square"></i></span>
+              <!-- 使用Bootstrap原生组件 -->
+              <div class="dropdown w-100">
+                <input
+                  ref="searchInput"
+                  v-model="searchQuery"
+                  type="text"
+                  :placeholder="$t('runtimeAnalysis.functionAnalysis.inputFunctionName')"
+                  class="form-control"
+                  @input="handleInput"
+                  @keydown.down="onDown"
+                  @keydown.up="onUp"
+                  @keydown.enter="onEnter"
+                  @keydown.esc="hideDropdown"
+                  aria-haspopup="true"
+                  :aria-expanded="showDropdown"
+                  autocomplete="off"
+                />
+                <!-- 下拉菜单使用Bootstrap原生dropdown组件 -->
+                <ul 
+                  class="dropdown-menu w-100"
+                  :class="{'show': showDropdown && filteredItems.length > 0}"
+                  style="max-height: 350px; overflow-y: auto;"
+                >
+                  <li class="dropdown-header">
+                    <small><i class="bi bi-info-circle me-1"></i>找到 {{ filteredItems.length }} 个匹配函数</small>
+                  </li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li v-for="(item, index) in filteredItems" :key="index">
+                    <a 
+                      class="dropdown-item" 
+                      href="#" 
+                      :class="{'active': index === activeIndex}"
+                      @click.prevent="selectItem(item)"
+                      @mouseover="activeIndex = index"
+                    >
+                      <div class="d-flex align-items-center">
+                        <div class="function-icon me-2">
+                          <i class="bi bi-code-square"></i>
+                        </div>
+                        <div>
+                          <div v-html="highlightText(item.name, searchQuery)"></div>
+                          <small v-if="item.package" class="text-muted">{{ item.package }}</small>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                </ul>
+              </div>
+              <button class="btn btn-primary" @click="search">
+                <i class="bi bi-search me-1"></i> {{ $t('runtimeAnalysis.functionAnalysis.search') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import debounce from 'lodash/debounce';
+
+export default {
+  name: 'FunctionSearch',
+  props: {
+    dbPath: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const searchQuery = ref('');
+    const showDropdown = ref(false);
+    const activeIndex = ref(-1);
+    const items = ref([]);
+    const loading = ref(false);
+    const searchInput = ref(null);
+
+    // 过滤后的项目
+    const filteredItems = computed(() => {
+      return items.value;
+    });
+
+    // 获取函数列表
+    const fetchFunctions = async (query) => {
+      if (!props.dbPath || !query) {
+        items.value = [];
+        return;
+      }
+
+      loading.value = true;
+
+      try {
+        const response = await axios.post('/api/runtime/functions/search', {
+          dbpath: props.dbPath,
+          query: query,
+          limit: 10
+        });
+
+        items.value = response.data.functions || [];
+        
+        if (items.value.length > 0) {
+          showDropdown.value = true;
+          activeIndex.value = -1;
+        } else {
+          showDropdown.value = false;
+        }
+      } catch (error) {
+        console.error('获取函数列表失败:', error);
+        items.value = [];
+        showDropdown.value = false;
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 防抖处理
+    const debouncedFetch = debounce(fetchFunctions, 300);
+
+    // 处理输入
+    const handleInput = () => {
+      if (searchQuery.value.length > 0) {
+        debouncedFetch(searchQuery.value);
+      } else {
+        items.value = [];
+        showDropdown.value = false;
+      }
+    };
+
+    // 键盘导航 - 下
+    const onDown = (e) => {
+      e.preventDefault();
+      if (!showDropdown.value) {
+        showDropdown.value = true;
+        return;
+      }
+      
+      if (filteredItems.value.length === 0) return;
+      
+      activeIndex.value = activeIndex.value < filteredItems.value.length - 1 
+        ? activeIndex.value + 1 
+        : 0;
+      
+      scrollToActive();
+    };
+
+    // 键盘导航 - 上
+    const onUp = (e) => {
+      e.preventDefault();
+      if (!showDropdown.value || filteredItems.value.length === 0) return;
+      
+      activeIndex.value = activeIndex.value > 0 
+        ? activeIndex.value - 1 
+        : filteredItems.value.length - 1;
+      
+      scrollToActive();
+    };
+
+    // 确保活动项在视图中
+    const scrollToActive = () => {
+      nextTick(() => {
+        const activeEl = document.querySelector('.dropdown-item.active');
+        if (activeEl) {
+          activeEl.scrollIntoView({ block: 'nearest' });
+        }
+      });
+    };
+
+    // 处理回车
+    const onEnter = () => {
+      if (showDropdown.value && activeIndex.value >= 0 && activeIndex.value < filteredItems.value.length) {
+        selectItem(filteredItems.value[activeIndex.value]);
+      } else {
+        search();
+      }
+    };
+
+    // 隐藏下拉框
+    const hideDropdown = () => {
+      showDropdown.value = false;
+    };
+
+    // 选择项目
+    const selectItem = (item) => {
+      searchQuery.value = item.name;
+      hideDropdown();
+      emit('search', item.name);
+    };
+
+    // 执行搜索
+    const search = () => {
+      if (!searchQuery.value) {
+        alert(t('runtimeAnalysis.functionAnalysis.pleaseInputFunction'));
+        return;
+      }
+      hideDropdown();
+      emit('search', searchQuery.value);
+    };
+
+    // 高亮文本
+    const highlightText = (text, query) => {
+      if (!query) return text;
+      try {
+        const regex = new RegExp(`(${query})`, 'gi');
+        return text.replace(regex, '<span class="highlight">$1</span>');
+      } catch (e) {
+        return text;
+      }
+    };
+
+    // 点击外部关闭下拉框
+    const handleClickOutside = (event) => {
+      if (searchInput.value && !searchInput.value.contains(event.target)) {
+        hideDropdown();
+      }
+    };
+
+    // 生命周期钩子
+    onMounted(() => {
+      document.addEventListener('click', handleClickOutside);
+    });
+
+    onUnmounted(() => {
+      document.removeEventListener('click', handleClickOutside);
+      if (debouncedFetch.cancel) debouncedFetch.cancel();
+    });
+
+    return {
+      searchQuery,
+      showDropdown,
+      activeIndex,
+      filteredItems,
+      loading,
+      searchInput,
+      handleInput,
+      onDown,
+      onUp,
+      onEnter,
+      hideDropdown,
+      selectItem,
+      search,
+      highlightText
+    };
+  }
+};
+</script>
+
+<style scoped>
+.function-search {
+  position: relative;
+}
+
+.dropdown-menu {
+  border-radius: 0 0 8px 8px;
+}
+
+.dropdown-item {
+  padding: 0.5rem 1rem;
+  white-space: normal;
+}
+
+.dropdown-item.active, 
+.dropdown-item:active {
+  background-color: rgba(13, 110, 253, 0.08);
+  color: inherit;
+}
+
+.dropdown-item:hover {
+  background-color: rgba(13, 110, 253, 0.05);
+}
+
+.highlight {
+  background-color: rgba(255, 193, 7, 0.2);
+  padding: 0.1em 0.2em;
+  border-radius: 2px;
+  font-weight: bold;
+}
+
+.function-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+  border-radius: 8px;
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .dropdown-header {
+    background-color: #2d2d2d;
+    color: #e1e1e1;
+  }
+
+  .dropdown-menu {
+    background-color: #2d2d2d;
+    border: 1px solid #3d3d3d;
+  }
+
+  .dropdown-item {
+    color: #e1e1e1;
+  }
+
+  .dropdown-item.active, 
+  .dropdown-item:active, 
+  .dropdown-item:hover {
+    background-color: rgba(91, 154, 255, 0.15);
+  }
+
+  .highlight {
+    background-color: rgba(255, 193, 7, 0.15);
+    color: #e1e1e1;
+  }
+
+  .function-icon {
+    background-color: rgba(91, 154, 255, 0.15);
+    color: #5b9aff;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/runtime/components/GidCallGraph.vue b/src/components/runtime/components/GidCallGraph.vue
new file mode 100644
index 0000000..94e8204
--- /dev/null
+++ b/src/components/runtime/components/GidCallGraph.vue
@@ -0,0 +1,739 @@
+<template>
+  <div class="function-call-graph">
+    <!-- 图表容器 -->
+    <div class="modal fade" ref="graphModal" tabindex="-1">
+      <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">
+              <i class="bi bi-diagram-3 me-2"></i>函数调用关系图
+            </h5>
+            <div class="btn-group me-2">
+              <button class="btn btn-outline-secondary btn-sm" @click="zoomIn" title="放大">
+                <i class="bi bi-zoom-in"></i>
+              </button>
+              <button class="btn btn-outline-secondary btn-sm" @click="zoomOut" title="缩小">
+                <i class="bi bi-zoom-out"></i>
+              </button>
+              <button class="btn btn-outline-secondary btn-sm" @click="resetZoom" title="重置缩放">
+                <i class="bi bi-arrows-angle-contract"></i>
+              </button>
+            </div>
+            <button class="btn-close" @click="closeModal"></button>
+          </div>
+          <div class="modal-body p-0">
+            <!-- 加载状态 -->
+            <div v-if="loading" class="loading-overlay">
+              <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">加载中...</span>
+              </div>
+              <p class="mt-3">正在生成调用关系图...</p>
+              <div class="progress mt-2" style="width: 250px;">
+                <div class="progress-bar progress-bar-striped progress-bar-animated" 
+                     role="progressbar" 
+                     :style="{width: loadingProgress + '%'}" 
+                     :aria-valuenow="loadingProgress" 
+                     aria-valuemin="0" 
+                     aria-valuemax="100">
+                  {{loadingProgress}}%
+                </div>
+              </div>
+              <p class="text-muted small mt-2">大型调用图可能需要较长时间处理</p>
+            </div>
+            
+            <!-- 图表区域 -->
+            <div ref="chartContainer" class="chart-container"></div>
+            
+            <!-- 节点信息卡片 -->
+            <div v-if="nodeInfoVisible" class="node-info-card">
+              <div class="card-header">
+                <h6 class="mb-0">节点信息</h6>
+                <button type="button" class="btn-close" @click="clearActiveNode"></button>
+              </div>
+              <div class="card-body">
+                <div><strong>函数名:</strong> {{ nodeInfo.name }}</div>
+                <div><strong>函数ID:</strong> {{ nodeInfo.id }}</div>
+                <div><strong>执行时间:</strong> {{ nodeInfo.executionTime }}</div>
+                <div v-if="nodeInfo.childrenCount > 0">
+                  <strong>子节点数:</strong> {{ nodeInfo.childrenCount }}
+                </div>
+              </div>
+            </div>
+            
+            <!-- 错误提示 -->
+            <div v-if="error" class="error-message">
+              <i class="bi bi-exclamation-triangle me-2"></i>
+              {{ error }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { Modal } from 'bootstrap';
+import { initChart, handleChartResize, disposeChart, createTreeChartOption } from '../utils/chartUtils';
+
+export default {
+  name: 'GidCallGraph',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    gid: {
+      type: [String, Number],
+      required: true,
+      validator: (value) => {
+        // 如果是数字，将其转换为字符串后验证
+        const strValue = String(value);
+        return strValue && strValue.trim().length > 0;
+      }
+    },
+    dbpath: {
+      type: String,
+      required: true,
+      validator: (value) => {
+        return typeof value === 'string' && value.trim().length > 0;
+      }
+    },
+    chartData: {
+      type: Array,
+      default: () => []
+    }
+  },
+  
+  setup(props, { emit }) {
+    const chartContainer = ref(null);
+    const graphModal = ref(null);
+    const chart = ref(null);
+    const modal = ref(null);
+    const loading = ref(false);
+    const loadingProgress = ref(10);
+    const error = ref(null);
+    const scrollPosition = ref(0);
+    const hideRootNodes = ref(false);
+    const operationInProgress = ref(false);
+    const currentOperation = ref('');
+    const activeNode = ref(null);
+    const nodeInfoVisible = ref(false);
+    const nodeInfo = ref({
+      name: '',
+      id: '',
+      executionTime: '',
+      childrenCount: 0
+    });
+    
+    // 获取节点颜色
+    const getNodeColor = (index) => {
+      const colors = {
+        0: '#4b96ff', // 蓝色
+        1: '#ff7875', // 珊瑚红
+        2: '#52c41a', // 绿色
+        3: '#faad14', // 橙色
+        4: '#ff4d4f', // 红色
+        5: '#40a9ff'  // 浅蓝色
+      };
+      
+      return colors[index % Object.keys(colors).length] || colors[0];
+    };
+    
+    // 更新图表
+    const updateChartData = (data) => {
+      if (chartContainer.value && data) {
+        // 销毁旧的图表实例
+        if (chart.value) {
+          disposeChart(chart.value);
+          chart.value = null;
+        }
+        
+        // 模拟加载进度
+        loadingProgress.value = 25;
+        const progressInterval = setInterval(() => {
+          if (loadingProgress.value < 90) {
+            loadingProgress.value += Math.floor(Math.random() * 8) + 1;
+          }
+        }, 300);
+        
+        // 延迟初始化图表，确保容器完全显示并有尺寸
+        setTimeout(() => {
+          // 再次检查容器和数据有效性
+          if (!chartContainer.value || !data) {
+            clearInterval(progressInterval);
+            console.error('图表容器或数据不可用');
+            error.value = '无法初始化图表，请重试';
+            loading.value = false;
+            return;
+          }
+          
+          // 确保容器可见且有尺寸
+          if (chartContainer.value.offsetWidth === 0 || chartContainer.value.offsetHeight === 0) {
+            console.error('图表容器尺寸异常，尝试强制设置尺寸');
+            
+            // 强制设置容器尺寸并确保可见
+            chartContainer.value.style.display = 'block';
+            chartContainer.value.style.width = '100%';
+            chartContainer.value.style.height = 'calc(100vh - 60px)';
+            chartContainer.value.style.minWidth = '800px';
+            chartContainer.value.style.minHeight = '600px';
+            
+            // 允许足够的时间让DOM更新
+            setTimeout(() => {
+              // 触发窗口resize事件以便于重新计算尺寸
+              window.dispatchEvent(new Event('resize'));
+              
+              // 延迟继续初始化图表
+              createChart();
+            }, 100);
+          } else {
+            // 直接创建图表
+            createChart();
+          }
+          
+          function createChart() {
+            loadingProgress.value = 70;
+            
+            // 创建新的图表实例
+            chart.value = initChart(chartContainer.value, createTreeChartOption(data));
+            
+            loadingProgress.value = 90;
+            
+            // 确保图表实例创建成功后再添加事件监听
+            if (chart.value) {
+              // 监听图表的点击事件
+              chart.value.on('click', (params) => {
+                if (params.data) {
+                  // 展开或收缩节点
+                  toggleNodeByClick(params);
+                }
+              });
+  
+              // 应用根节点的可见性
+              if (hideRootNodes.value) {
+                applyRootNodesVisibility();
+              }
+  
+              // 设置完成
+              loadingProgress.value = 100;
+              
+              // 额外延迟执行resize以确保容器已经完全显示
+              setTimeout(() => {
+                clearInterval(progressInterval);
+                if (chart.value) {
+                  chart.value.resize();
+                  loading.value = false; // 加载完成
+                }
+              }, 500);
+            } else {
+              clearInterval(progressInterval);
+              console.error('图表初始化失败');
+              error.value = '无法创建图表，请检查数据格式或刷新页面重试';
+              loading.value = false;
+            }
+          }
+        }, 300); // 延迟300ms，等待Modal渲染完成
+      }
+    };
+    
+    // 根据点击切换节点状态
+    const toggleNodeByClick = (params) => {
+      if (!params || !params.data) {
+        console.warn('节点点击事件缺少必要信息');
+        return;
+      }
+      
+      if (chart.value) {
+        try {
+          // 记录当前节点名称，用于后续查找
+          const nodeName = params.data.name;
+          const seriesIndex = params.seriesIndex || 0;
+          const dataIndex = params.dataIndex;
+          
+          // 检查是否有子节点
+          const hasChildren = params.data.children && params.data.children.length > 0;
+          
+          // 选中当前节点，和之前的选中节点进行比较
+          const selectedNodeData = {
+            seriesIndex,
+            dataIndex,
+            name: nodeName,
+            value: params.data.value
+          };
+          
+          // 取消之前选中的节点高亮
+          if (activeNode.value && chart.value) {
+            chart.value.dispatchAction({
+              type: 'downplay',
+              seriesIndex: activeNode.value.seriesIndex,
+              dataIndex: activeNode.value.dataIndex
+            });
+          }
+          
+          // 设置当前节点为活跃节点并高亮
+          activeNode.value = selectedNodeData;
+          chart.value.dispatchAction({
+            type: 'highlight',
+            seriesIndex: seriesIndex,
+            dataIndex: dataIndex
+          });
+          
+          // 显示节点信息
+          nodeInfoVisible.value = true;
+          nodeInfo.value = {
+            name: nodeName,
+            id: params.data.value,
+            executionTime: params.data.executionTime || '未知',
+            childrenCount: hasChildren ? params.data.children.length : 0
+          };
+          
+          // 只有有子节点的节点才能展开/折叠
+          if (hasChildren) {
+            // 判断当前节点状态
+            const isCurrentlyExpanded = !params.data.collapsed; // ECharts中，collapsed为false表示展开状态
+            
+            // 确定操作类型
+            const actionType = isCurrentlyExpanded ? 'treeCollapse' : 'treeExpand';
+            
+            // 使用明确的展开/折叠操作
+            chart.value.dispatchAction({
+              type: actionType,
+              seriesIndex: seriesIndex,
+              dataIndex: dataIndex
+            });
+            
+            console.log(`节点 ${nodeName} ${actionType === 'treeExpand' ? '已展开' : '已折叠'}`);
+            
+            // 延迟刷新图表，使动画更连贯
+            setTimeout(() => {
+              if (chart.value) {
+                chart.value.resize();
+              }
+            }, 650);
+          } else {
+            console.log('该节点没有子节点，无法展开/折叠');
+          }
+        } catch (err) {
+          console.error('点击节点处理失败:', err);
+        }
+      }
+    };
+    
+    // 清除活跃节点
+    const clearActiveNode = () => {
+      if (activeNode.value && chart.value) {
+        chart.value.dispatchAction({
+          type: 'downplay',
+          seriesIndex: activeNode.value.seriesIndex,
+          dataIndex: activeNode.value.dataIndex
+        });
+        activeNode.value = null;
+        nodeInfoVisible.value = false;
+      }
+    };
+    
+    
+    // 应用根节点的可见性
+    const applyRootNodesVisibility = () => {
+      if (!chart.value) return;
+      
+      const option = chart.value.getOption();
+      
+      if (!option || !option.series) return;
+      
+      try {
+        // 处理每个系列
+        const newSeries = option.series.map(series => {
+          // 调整每棵树的根节点显示
+          if (hideRootNodes.value) {
+            // 隐藏根节点: 通过修改数据结构，让子节点成为新的顶级节点
+            if (series.data && series.data.length > 0 && series.data[0].children) {
+              return {
+                ...series,
+                data: series.data[0].children // 使用根节点的子节点作为新的顶级节点
+              };
+            }
+          } else {
+            // 恢复原始数据结构，重新加载图表
+            // 这需要完整重新加载数据，因为我们无法保存完整的原始数据结构
+            // 所以这里只进行部分操作，完整操作需要重新加载图表
+          }
+          return series;
+        });
+        
+        // 设置新的配置
+        chart.value.setOption({
+          series: newSeries
+        });
+        
+        // 如果是显示根节点，则需要完全重新加载图表
+        if (!hideRootNodes.value) {
+          // 使用setTimeout避免状态更新冲突
+          setTimeout(() => {
+            updateChartData(props.chartData);
+          }, 100);
+        }
+      } catch (err) {
+        console.error('切换根节点可见性失败:', err);
+        error.value = '切换根节点可见性失败';
+      }
+    };
+    
+    
+    // 监听图表数据变化
+    watch(() => props.chartData, (newData) => {
+      // 只有在模态框已显示的情况下才处理数据更新
+      if (!props.visible || !modal.value) {
+        return;
+      }
+      
+      // 增强数据验证
+      if (!newData) {
+        console.warn('图表数据为空');
+        loading.value = false;
+        error.value = '无效的图表数据：数据为空';
+        return;
+      }
+      
+      if (!Array.isArray(newData)) {
+        console.warn('图表数据不是数组');
+        loading.value = false;
+        error.value = '无效的图表数据：数据格式错误';
+        return;
+      }
+      
+      if (newData.length === 0) {
+        console.warn('图表数据数组为空');
+        loading.value = false;
+        error.value = '无效的图表数据：没有函数调用数据';
+        return;
+      }
+      
+      // 检查数据结构
+      const isValidData = newData.every(item => {
+        return item && typeof item === 'object' && typeof item.name === 'string';
+      });
+      
+      if (!isValidData) {
+        console.warn('图表数据结构不正确');
+        loading.value = false;
+        error.value = '无效的图表数据：数据结构不正确';
+        return;
+      }
+      
+      try {
+        // 重置错误状态
+        loading.value = false;
+        error.value = null;
+        
+        // 在下一个tick更新图表，确保DOM已更新
+        nextTick(() => {
+          console.log('处理图表数据:', newData.length, '棵树');
+          updateChartData(newData);
+        });
+      } catch (err) {
+        console.error('处理图表数据时发生错误:', err);
+        error.value = '处理图表数据时发生错误，请检查数据格式';
+        loading.value = false;
+      }
+    }, { deep: true });
+    
+    // 缩放控制
+    const zoomIn = () => {
+      if (chart.value) {
+        const option = chart.value.getOption();
+        const zoom = option.series[0].zoom || 1;
+        chart.value.setOption({
+          series: [{
+            zoom: zoom * 1.2
+          }]
+        });
+      }
+    };
+    
+    const zoomOut = () => {
+      if (chart.value) {
+        const option = chart.value.getOption();
+        const zoom = option.series[0].zoom || 1;
+        chart.value.setOption({
+          series: [{
+            zoom: zoom / 1.2
+          }]
+        });
+      }
+    };
+    
+    const resetZoom = () => {
+      if (chart.value) {
+        chart.value.setOption({
+          series: [{
+            zoom: 1
+          }]
+        });
+      }
+    };
+    
+    // 监听窗口大小变化
+    const handleResize = () => {
+      handleChartResize(chart.value);
+    };
+    
+    // 保存滚动位置
+    const saveScrollPosition = () => {
+      scrollPosition.value = window.pageYOffset || document.documentElement.scrollTop;
+    };
+
+    // 恢复滚动位置
+    const restoreScrollPosition = () => {
+      setTimeout(() => {
+        window.scrollTo(0, scrollPosition.value);
+      }, 0);
+    };
+    
+    // 关闭模态框
+    const closeModal = () => {
+      if (modal.value) {
+        modal.value.hide();
+      }
+    };
+    
+    onMounted(() => {
+      // 初始化模态框
+      if (graphModal.value) {
+        modal.value = new Modal(graphModal.value, {
+          backdrop: 'static',
+          keyboard: false
+        });
+        
+        // 监听模态框事件
+        graphModal.value.addEventListener('show.bs.modal', () => {
+          saveScrollPosition();
+        });
+
+        graphModal.value.addEventListener('hidden.bs.modal', () => {
+          emit('update:visible', false);
+          restoreScrollPosition();
+          
+          // 修复关闭后无法再次打开的问题：清理状态
+          if (chart.value) {
+            disposeChart(chart.value);
+            chart.value = null;
+          }
+          
+          // 重置所有状态
+          loading.value = false;
+          error.value = null;
+          nodeInfoVisible.value = false;
+          activeNode.value = null;
+          hideRootNodes.value = false;
+          operationInProgress.value = false;
+          currentOperation.value = '';
+          loadingProgress.value = 10;
+        });
+      }
+      
+      // 监听窗口大小变化
+      window.addEventListener('resize', handleResize);
+    });
+    
+    onUnmounted(() => {
+      // 清理事件监听
+      window.removeEventListener('resize', handleResize);
+      
+      // 销毁图表实例
+      if (chart.value) {
+        disposeChart(chart.value);
+      }
+      
+      // 销毁模态框实例
+      if (modal.value) {
+        modal.value.dispose();
+      }
+    });
+    
+    // 监听可见性变化
+    watch(() => props.visible, (newVal) => {
+      if (newVal && modal.value) {
+        loading.value = true;
+        // 显示模态框
+        modal.value.show();
+        
+        // 添加模态框显示完成的事件监听
+        graphModal.value.addEventListener('shown.bs.modal', () => {
+          // 修复容器尺寸问题：确保容器有足够的尺寸和可见性
+          if (chartContainer.value) {
+            chartContainer.value.style.display = 'block';
+            chartContainer.value.style.width = '100%';
+            chartContainer.value.style.height = 'calc(100vh - 60px)';
+            
+            // 手动触发一个resize事件，确保容器尺寸已更新
+            window.dispatchEvent(new Event('resize'));
+          }
+          
+          // 模态框完全显示后处理图表数据
+          const chartData = props.chartData;
+          
+          // 预先验证数据
+          if (!chartData) {
+            loading.value = false;
+            error.value = '无效的图表数据：数据为空';
+            return;
+          }
+          
+          if (!Array.isArray(chartData)) {
+            loading.value = false;
+            error.value = '无效的图表数据：数据格式错误';
+            return;
+          }
+          
+          if (chartData.length === 0) {
+            loading.value = false;
+            error.value = '无效的图表数据：没有函数调用数据';
+            return;
+          }
+          
+          // 验证数据结构
+          const isValidData = chartData.every(item => {
+            return item && typeof item === 'object' && typeof item.name === 'string';
+          });
+          
+          if (!isValidData) {
+            loading.value = false;
+            error.value = '无效的图表数据：数据结构不正确';
+            return;
+          }
+          
+          console.log('模态框显示完成，准备处理图表数据:', chartData.length, '棵树');
+          
+          // 延长等待时间，确保DOM完全渲染后再初始化图表
+          setTimeout(() => {
+            updateChartData(chartData);
+          }, 300);
+        }, { once: true }); // 只监听一次事件
+      } else if (!newVal && modal.value) {
+        modal.value.hide();
+      }
+    });
+    
+    return {
+      chartContainer,
+      graphModal,
+      loading,
+      loadingProgress,
+      error,
+      closeModal,
+      zoomIn,
+      zoomOut,
+      resetZoom,
+      getNodeColor,
+      activeNode,
+      nodeInfoVisible,
+      nodeInfo,
+      clearActiveNode
+    };
+  }
+};
+</script>
+
+<style scoped>
+.function-call-graph {
+  width: 100%;
+  height: 100%;
+}
+
+.chart-container {
+  width: 100%;
+  height: calc(100vh - 60px);
+  background-color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.modal-content {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-body {
+  flex: 1;
+  padding: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.9);
+  z-index: 1000;
+}
+
+.error-message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1rem;
+  background-color: #fff3f3;
+  border: 1px solid #ffccc7;
+  border-radius: 4px;
+  color: #ff4d4f;
+}
+
+.modal-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.modal-header .btn-group {
+  margin-left: 1rem;
+}
+
+.node-info-card {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 280px;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.node-info-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.node-info-card .card-body {
+  padding: 15px;
+}
+
+.node-info-card .card-body div {
+  margin-bottom: 8px;
+}
+
+.node-info-card .btn-close {
+  padding: 0;
+  font-size: 12px;
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/runtime/RuntimeAnalysis.vue b/src/components/runtime/components/RuntimeAnalysis.vue
similarity index 72%
rename from src/components/runtime/RuntimeAnalysis.vue
rename to src/components/runtime/components/RuntimeAnalysis.vue
index 131823f..4edcf9b 100644
--- a/src/components/runtime/RuntimeAnalysis.vue
+++ b/src/components/runtime/components/RuntimeAnalysis.vue
@@ -1,5 +1,23 @@
 <template>
   <div class="runtime-analysis">
+    <!-- 搜索框 -->
+    <div class="search-container mb-4">
+      
+      <!-- 函数名建议列表 -->
+      <div class="suggestions-wrapper" v-if="showFunctionSuggestions">
+        <div class="function-suggestions list-group">
+          <button
+            v-for="func in functionSuggestions"
+            :key="func.name"
+            class="list-group-item list-group-item-action"
+            @click="selectFunction(func.name)"
+          >
+            {{ func.name }}
+          </button>
+        </div>
+      </div>
+    </div>
+    
     <!-- 消息提示组件 -->
     <div class="message-container" v-if="message.show">
       <div :class="['message-box', `message-${message.type}`]">
@@ -11,20 +29,6 @@
     <!-- 运行时分析内容 -->
     <div>
       
-      <!-- 函数名建议列表 -->
-      <div class="suggestions-wrapper" v-if="showFunctionSuggestions && filteredFunctionNames.length">
-        <ul class="list-group function-suggestions">
-          <li
-            v-for="(name, index) in filteredFunctionNames"
-            :key="index"
-            class="list-group-item list-group-item-action"
-            @mousedown.prevent="selectFunction(name)"
-          >
-            {{ name }}
-          </li>
-        </ul>
-      </div>
-
       <!-- 统计卡片 -->
       <div class="row mb-4">
         <div class="col-md-3">
@@ -312,46 +316,95 @@
       </div>
 
       <!-- 函数调用关系图组件 -->
-      <function-call-graph
-        v-if="showChart"
-        :visible="showChart"
+      <GidCallGraph
+        v-model:visible="showChart"
         :gid="currentGid"
-        :dbpath="getCurrentDbPath()"
-        @update:visible="showChart = $event"
+        :dbpath="dbPath"
+        :chart-data="chartData"
         @error="handleChartError"
-        :key="`chart-${currentGid}-${chartRenderCount}`"
-        :use-mock-data="testMode"
       />
     </div>
   </div>
 </template>
 
 <script>
-import FunctionCallGraph from '../charts/FunctionCallGraph.vue';
 import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
+import axios from 'axios';
+import GidCallGraph from './GidCallGraph.vue';
 
 export default {
   name: 'RuntimeAnalysis',
   components: {
-    FunctionCallGraph
+    GidCallGraph
   },
   props: {
     projectPath: {
       type: String,
       default: ''
     },
-    dbPath: {
-      type: String,
-      default: ''
-    },
   },
-  setup() {
+  setup(props) {
     const { t, locale } = useI18n({ useScope: 'global' });
-    return { t, locale };
+    const currentGid = ref(0);
+    const showChart = ref(false);
+    const chartData = ref(null);
+    const dbPath = computed(() => props.projectPath || '');
+    const message = ref({
+      show: false,
+      content: '',
+      type: 'info',
+      timer: null
+    });
+
+    // 显示消息提示
+    const showMessage = (content, type = 'info', duration = 3000) => {
+      // 清除之前的定时器
+      if (message.value.timer) {
+        clearTimeout(message.value.timer);
+      }
+      
+      // 设置消息内容
+      message.value = {
+        show: true,
+        content,
+        type,
+        timer: null
+      };
+      
+      // 设置定时器，自动关闭消息
+      message.value.timer = setTimeout(() => {
+        message.value.show = false;
+      }, duration);
+    };
+
+    // 查看函数调用链
+    const viewFunctionCallChain = (gid) => {
+      currentGid.value = Number(gid);
+      showChart.value = true;
+    };
+
+    // 处理图表错误
+    const handleChartError = (error) => {
+      showMessage(`图表加载失败: ${error.message}`, 'error');
+      showChart.value = false;
+    };
+
+    return {
+      t,
+      locale,
+      currentGid,
+      showChart,
+      chartData,
+      dbPath,
+      message,
+      showMessage,
+      viewFunctionCallChain,
+      handleChartError
+    };
   },
   data() {
     return {
-      projectPathInput: '',
       functionName: '',
       filteredFunctionNames: [],
       showFunctionSuggestions: false,
@@ -361,42 +414,26 @@ export default {
       total: 0,
       totalPages: 1,
       gids: [],
-      currentGid: null,
-      suggestionsTimer: null, // 用于延迟隐藏建议列表的计时器
-      isSearching: false, // 标记是否正在搜索
-      inputPosition: { top: 0, left: 0, width: 0 }, // 存储输入框位置
+      suggestionsTimer: null,
+      isSearching: false,
+      inputPosition: { top: 0, left: 0, width: 0 },
       loading: false,
       showAllGoroutines: false,
       hotFunctions: [],
-      hotFunctionSortBy: 'calls', // 'calls' 或 'time'
+      hotFunctionSortBy: 'calls',
       goroutineStats: {
         active: 0,
         avgTime: '0ms',
         maxDepth: 0
       },
-      showChart: false, // 是否显示图表
-      showDatabaseError: false, // 添加数据库错误标志
-      gidLimit: 10, // 添加gidLimit属性
-      hotFunctionLimit: 10, // 添加hotFunctionLimit属性
-      chartRenderCount: 0, // 图表渲染计数器，用于强制重新创建组件
-      testMode: false, // 测试模式，用于在API请求失败时使用模拟数据
-      searchTimeout: null, // 用于防抖
-      unfinishedFunctions: [], // 未完成函数列表
-      unfinishedFunctionsTotal: 0, // 未完成函数总数
-      unfinishedFunctionsPage: 1, // 当前页码
-      unfinishedFunctionsLimit: 10, // 每页数量
-      unfinishedFunctionsTotalPages: 1, // 总页数
-      blockingThreshold: 1000, // 阻塞时间阈值（毫秒），默认1秒
-      loadingUnfinishedFunctions: false, // 加载状态
-      highlightedFunctionId: null, // 高亮显示的函数ID
-      
-      // 消息提示
-      message: {
-        show: false,
-        content: '',
-        type: 'info', // info, success, error, warning
-        timer: null
-      }
+      unfinishedFunctions: [],
+      unfinishedFunctionsTotal: 0,
+      unfinishedFunctionsPage: 1,
+      unfinishedFunctionsLimit: 10,
+      unfinishedFunctionsTotalPages: 1,
+      blockingThreshold: 1000,
+      loadingUnfinishedFunctions: false,
+      highlightedFunctionId: null
     };
   },
   mounted() {
@@ -501,7 +538,6 @@ export default {
     
     // 初始化数据
     initializeData() {
-      this.projectPathInput = this.projectPath;
       this.fetchGIDs();
       this.fetchHotFunctions();
       this.fetchFunctionNames();
@@ -511,25 +547,10 @@ export default {
     
     // 获取当前数据库路径
     getCurrentDbPath() {
-      console.log('获取数据库路径，当前状态:', {
-        dbPath: this.dbPath,
-        projectPath: this.projectPath
-      });
-      
-      // 如果已经设置了数据库路径，直接返回
-      if (this.dbPath) {
-        console.log('使用已设置的数据库路径:', this.dbPath);
-        return this.dbPath;
-      }
-      
       // 否则使用项目路径作为数据库路径
       if (this.projectPath) {
-        console.log('使用项目路径作为数据库路径:', this.projectPath);
         return this.projectPath;
       }
-      
-      // 如果都没有，返回空字符串
-      console.warn('数据库路径为空');
       return '';
     },
     
@@ -641,27 +662,6 @@ export default {
       }
     },
     
-    // 显示消息
-    showMessage(content, type = 'info', duration = 3000) {
-      // 清除之前的定时器
-      if (this.message.timer) {
-        clearTimeout(this.message.timer);
-      }
-      
-      // 设置消息内容
-      this.message = {
-        show: true,
-        content,
-        type,
-        timer: null
-      };
-      
-      // 设置定时器，自动关闭消息
-      this.message.timer = setTimeout(() => {
-        this.message.show = false;
-      }, duration);
-    },
-
     // 获取热点函数列表
     async fetchHotFunctions() {
       try {
@@ -703,6 +703,16 @@ export default {
       }
     },
     
+    // 排序热点函数
+    async sortHotFunctions(sortBy) {
+      if (this.hotFunctionSortBy === sortBy) {
+        return; // 如果已经是当前排序方式，则不需要重新排序
+      }
+      
+      this.hotFunctionSortBy = sortBy;
+      await this.fetchHotFunctions(); // 重新获取排序后的数据
+    },
+    
     // 获取函数名列表（用于自动完成）
     async fetchFunctionNames() {
       try {
@@ -728,10 +738,10 @@ export default {
         
         const data = await response.json();
         
-        // 更新函数名列表
-        this.functionNames = data.functionNames || [];
+        // 更新数据
+        this.functionNames = data.functions || [];
       } catch (error) {
-        this.showMessage(`get function names list failed: ${error.message}`, 'error');
+        this.showMessage(`get function names failed: ${error.message}`, 'error');
         this.functionNames = [];
       }
     },
@@ -743,6 +753,7 @@ export default {
         const dbpath = this.getCurrentDbPath();
         
         if (!dbpath) {
+          this.showMessage('database path is empty', 'error');
           this.loadingUnfinishedFunctions = false;
           return;
         }
@@ -756,13 +767,12 @@ export default {
           body: JSON.stringify({
             page: this.unfinishedFunctionsPage,
             limit: this.unfinishedFunctionsLimit,
-            blockingThreshold: this.blockingThreshold,
             dbpath: dbpath
           })
         });
         
         if (!response.ok) {
-          throw new Error(`API请求失败: ${response.status}`);
+          throw new Error(`API request failed: ${response.status}`);
         }
         
         const data = await response.json();
@@ -783,72 +793,12 @@ export default {
     
     // 更新阻塞阈值
     updateBlockingThreshold() {
-      // 验证阈值
-      if (isNaN(this.blockingThreshold) || this.blockingThreshold < 100) {
-        this.showMessage('blocking threshold must be greater than or equal to 100ms', 'warning');
-        this.blockingThreshold = 1000; // 重置为默认值
-        return;
-      }
-      
-      // 保存到本地存储
+      // 将阻塞阈值保存到本地存储
       localStorage.setItem('blockingThreshold', this.blockingThreshold.toString());
-      
-      // 刷新未完成函数列表
-      this.fetchUnfinishedFunctions();
-      
-      this.showMessage(`blocking threshold has been updated to ${this.blockingThreshold}ms`, 'success');
-    },
-    
-    // 未完成函数分页控制
-    prevUnfinishedFunctionsPage() {
-      if (this.unfinishedFunctionsPage > 1) {
-        this.unfinishedFunctionsPage--;
-        this.fetchUnfinishedFunctions();
-      }
-    },
-    
-    nextUnfinishedFunctionsPage() {
-      if (this.unfinishedFunctionsPage < this.unfinishedFunctionsTotalPages) {
-        this.unfinishedFunctionsPage++;
-        this.fetchUnfinishedFunctions();
-      }
-    },
-    
-    goToUnfinishedFunctionsPage(page) {
-      if (page >= 1 && page <= this.unfinishedFunctionsTotalPages) {
-        this.unfinishedFunctionsPage = page;
-        this.fetchUnfinishedFunctions();
-      }
-    },
-    
-    // 查看函数调用链
-    viewFunctionCallChain(functionId, gid) {
-      this.highlightedFunctionId = functionId;
-      this.currentGid = gid;
-      this.showChart = true;
-    },
-    
-    // 显示函数调用图
-    showFunctionCallGraph(gid) {
-      this.currentGid = gid;
-      this.chartRenderCount++; // 增加计数器，强制重新创建组件
-      this.showChart = true;
-    },
-    
-    // 处理图表错误
-    handleChartError(error) {
-      this.showMessage(`chart loading failed: ${error.message}`, 'error');
-    },
-    
-    // 排序热点函数
-    sortHotFunctions(sortBy) {
-      if (this.hotFunctionSortBy !== sortBy) {
-        this.hotFunctionSortBy = sortBy;
-        this.fetchHotFunctions();
-      }
+      this.showMessage('阻塞阈值已更新', 'success');
     },
     
-    // 处理文档点击事件（用于隐藏建议列表）
+    // 处理文档点击事件
     handleDocumentClick(event) {
       // 如果点击的不是建议列表或输入框，则隐藏建议列表
       if (this.showFunctionSuggestions) {
@@ -861,13 +811,13 @@ export default {
       }
     },
     
-    // 更新输入框位置（用于建议列表定位）
+    // 更新输入框位置
     updateInputPosition() {
-      const input = document.querySelector('#functionNameInput');
+      const input = this.$refs.functionNameInput;
       if (input) {
         const rect = input.getBoundingClientRect();
         this.inputPosition = {
-          top: rect.bottom,
+          top: rect.top,
           left: rect.left,
           width: rect.width
         };
@@ -876,267 +826,415 @@ export default {
     
     // 处理语言变化
     handleLanguageChange() {
-      // 刷新数据
-      this.fetchGIDs();
-      this.fetchHotFunctions();
+      // 重新初始化数据
+      this.initializeData();
     },
     
-    // 选择函数名
+    // 选择函数
     selectFunction(name) {
       this.functionName = name;
       this.showFunctionSuggestions = false;
-      
-      // 根据选择的函数名搜索相关的GID
-      this.searchGIDsByFunctionName();
     },
     
-    // 根据函数名搜索GID
-    async searchGIDsByFunctionName() {
-      if (!this.functionName.trim()) {
-        // 如果函数名为空，则获取所有GID
-        this.fetchGIDs();
-        return;
-      }
-      
+    // 显示函数调用关系图
+    async showFunctionCallGraph(gid) {
       try {
-        this.loading = true;
-        const dbpath = this.getCurrentDbPath();
+        // 保存当前滚动位置
+        const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
         
-        if (!dbpath) {
-          this.showMessage('database path is empty', 'error');
-          this.loading = false;
-          return;
-        }
+        this.currentGid = gid;
+        // 先设置showChart为true，确保模态框开始显示
+        this.showChart = true;
+        this.chartData = null; // 清空旧数据
         
-        // 调用API根据函数名搜索GID
-        const response = await fetch('/api/runtime/gids/function', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({
-            functionName: this.functionName,
-            path: dbpath,
-            includeMetrics: true
+        // 获取函数调用链数据
+        const [treeResponse, traceResponse] = await Promise.all([
+          axios.post('/api/runtime/tree-graph/gid', {
+            dbPath: this.getCurrentDbPath(),
+            gid: gid
+          }),
+          axios.post(`/api/runtime/traces/${gid}`, {
+            dbpath: this.getCurrentDbPath()
           })
-        });
+        ]);
         
-        if (!response.ok) {
-          throw new Error(`API请求失败: ${response.status}`);
+        const treeData = treeResponse.data;
+        const traceData = traceResponse.data;
+        
+        if (!treeData || !treeData.trees || !traceData || !traceData.traceData) {
+          throw new Error('返回的数据格式不正确');
         }
         
-        const data = await response.json();
+        // 创建函数ID到执行时间的映射
+        const executionTimeMap = {};
+        traceData.traceData.forEach(trace => {
+          if (trace.id && trace.timeCost) {
+            executionTimeMap[trace.id] = trace.timeCost;
+          }
+        });
         
-        // 更新数据
-        this.gids = data.body || [];
-        this.total = data.total || 0;
-        this.totalPages = Math.ceil(this.total / this.limit) || 1;
-        this.currentPage = 1; // 重置为第一页
+        // 递归添加执行时间到树节点
+        const addExecutionTime = (node) => {
+          if (!node) return;
+          
+          // 添加执行时间
+          if (node.value && executionTimeMap[node.value]) {
+            node.executionTime = executionTimeMap[node.value];
+          }
+          
+          // 递归处理子节点
+          if (Array.isArray(node.children)) {
+            node.children.forEach(child => addExecutionTime(child));
+          }
+        };
+        
+        // 处理所有树
+        treeData.trees.forEach(tree => addExecutionTime(tree));
         
-        if (this.gids.length === 0) {
-          this.showMessage(`no goroutine found for function "${this.functionName}"`, 'info');
+        // 确保每棵树都是一个独立的数据结构
+        const processedTreeData = treeData.trees.map(tree => {
+          // 处理树节点，确保数据格式正确
+          return {
+            name: tree.name || 'Root',
+            value: tree.value || '',
+            children: tree.children || [],
+            executionTime: tree.executionTime || null
+          };
+        });
+        
+        // 更新图表数据
+        // 延迟设置图表数据，确保模态框已经显示
+        setTimeout(() => {
+          this.chartData = processedTreeData;
+        }, 200);
+
+        // 监听模态框关闭事件
+        const handleModalHidden = () => {
+          // 恢复滚动位置
+          setTimeout(() => {
+            window.scrollTo(0, scrollPosition);
+          }, 100);
+        };
+
+        // 添加一次性事件监听
+        const modal = document.querySelector('.modal');
+        if (modal) {
+          modal.addEventListener('hidden.bs.modal', handleModalHidden, { once: true });
         }
       } catch (error) {
-        this.showMessage(`search function failed: ${error.message}`, 'error');
-        this.gids = [];
-        this.total = 0;
-        this.totalPages = 1;
-      } finally {
-        this.loading = false;
+        this.showMessage(`获取调用链数据失败: ${error.message}`, 'error');
+        this.showChart = false;
       }
-    }
+    },
   }
 };
 </script>
 
 <style scoped>
-.search-container {
-  position: relative;
+.runtime-analysis {
+  --primary-color: #4b96ff;
+  --secondary-color: #ff7875;
+  --success-color: #52c41a;
+  --warning-color: #faad14;
+  --danger-color: #ff4d4f;
+  --info-color: #40a9ff;
+  --text-primary: #1f1f1f;
+  --text-secondary: #666666;
+  --border-color: #e8e8e8;
+  --hover-color: #f6f6f6;
+  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --transition-speed: 0.3s;
 }
 
-.suggestions-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 0;
-  z-index: 9999;
-  pointer-events: none;
+.card {
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--card-shadow);
+  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+  margin-bottom: 1.5rem;
 }
 
-.function-suggestions {
-  position: absolute;
-  z-index: 9999;
-  width: calc(100% - 30px);
-  max-width: 600px;
-  max-height: 300px;
-  overflow-y: auto;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 0.375rem;
-  margin-top: 0;
-  top: 140px;
-  left: 50%;
-  transform: translateX(-50%);
-  pointer-events: auto;
-  padding: 0;
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }
 
-.function-suggestions .list-group-item {
-  border-left: none;
-  border-right: none;
-  border-radius: 0;
+.card-header {
+  background: #fff;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+  border-radius: 12px 12px 0 0 !important;
+  padding: 1rem 1.25rem;
+}
+
+.card-title {
+  margin: 0;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.btn {
+  border-radius: 4px;
+  padding: 0.375rem 0.75rem;
+  font-weight: normal;
+  font-size: 0.875rem;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: #3a85ff;
+  transform: none;
+}
+
+.btn-outline-primary {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  background-color: transparent;
+}
+
+.btn-outline-primary:hover {
+  background-color: var(--primary-color);
+  color: white;
+  transform: none;
+}
+
+.btn-success {
+  background-color: var(--success-color);
+  border: none;
+}
+
+.btn-success:hover {
+  background-color: #47ad15;
+}
+
+.btn-group {
+  gap: 4px;
+}
+
+.btn-group .btn {
+  border-radius: 4px !important;
+}
+
+.btn-sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.btn i {
+  font-size: 0.875rem;
+  margin-right: 4px;
+}
+
+.btn-close {
+  font-size: 1rem;
+  padding: 0.5rem;
+}
+
+.pagination .page-link {
+  border-radius: 4px;
+  margin: 0 2px;
+  padding: 0.375rem 0.75rem;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  background-color: #fff;
+}
+
+.pagination .page-link:hover {
+  background-color: #f8f9fa;
+  color: var(--primary-color);
+  transform: none;
+}
+
+.pagination .page-item.active .page-link {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: white;
+}
+
+.badge {
+  padding: 0.4em 0.8em;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+.badge.bg-danger {
+  background-color: rgba(255, 77, 79, 0.1) !important;
+  color: #ff4d4f;
+  border: 1px solid rgba(255, 77, 79, 0.2);
+}
+
+.badge.bg-secondary {
+  background-color: rgba(0, 0, 0, 0.05) !important;
+  color: #666;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.alert-info {
+  background-color: rgba(64, 169, 255, 0.1);
+  border: 1px solid rgba(64, 169, 255, 0.2);
+  color: var(--info-color);
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border-radius: 6px;
+}
+
+.table {
+  margin: 0;
+}
+
+.table thead th {
+  background-color: #f8f9fa;
+  color: var(--text-primary);
+  font-weight: 600;
+  border-bottom: 1px solid var(--border-color);
   padding: 0.75rem 1rem;
-  font-family: 'Consolas', 'Monaco', monospace;
-  transition: all 0.2s ease;
-  cursor: pointer;
 }
 
-.function-suggestions .list-group-item:first-child {
-  border-top: none;
+.table td {
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--border-color);
 }
 
-.function-suggestions .list-group-item:last-child {
+.table tbody tr:last-child td {
   border-bottom: none;
 }
 
-.function-suggestions .list-group-item:hover {
-  background-color: #f8f9fa;
-  color: #0d6efd;
+.table-warning {
+  background-color: rgba(250, 173, 20, 0.05);
 }
 
-.function-suggestions .list-group-item-action:active {
-  background-color: #e9ecef;
+.pagination {
+  margin: 1rem 0;
 }
 
-.pagination-info {
+.message-container {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  z-index: 1000;
+}
+
+.message-box {
+  padding: 1rem;
+  border-radius: 8px;
+  margin-bottom: 1rem;
   display: flex;
   align-items: center;
+  gap: 0.5rem;
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-/* 阻塞阈值控件样式 */
 .threshold-control {
   display: flex;
   align-items: center;
   background-color: #f8f9fa;
-  padding: 8px 12px;
-  border-radius: 6px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  padding: 0.75rem;
+  border-radius: 8px;
 }
 
 .threshold-control .form-label {
-  color: #495057;
-  white-space: nowrap;
+  margin-bottom: 0;
+  margin-right: 1rem;
+  color: var(--text-primary);
 }
 
 .threshold-control .input-group {
   width: auto;
-  flex-wrap: nowrap;
+  margin-right: 0.5rem;
 }
 
 .threshold-control .form-control {
-  text-align: center;
-  font-weight: 500;
+  width: 120px;
+  border: 1px solid var(--border-color);
+  border-radius: 6px 0 0 6px;
 }
 
-.threshold-control .btn-primary {
-  min-width: 80px;
+.threshold-control .input-group-text {
+  background-color: #fff;
+  border: 1px solid var(--border-color);
+  border-left: none;
+  color: var(--text-secondary);
 }
 
-@media (max-width: 768px) {
-  .pagination-info {
-    margin-top: 1rem;
-  }
-  
-  .function-suggestions {
-    width: 90%;
-    top: 180px;
-  }
-  
-  .card-header {
-    flex-direction: column;
-    align-items: flex-start !important;
-  }
-  
-  .card-header .d-flex {
-    margin-top: 10px;
-    width: 100%;
-  }
-  
-  .threshold-control {
-    width: 100%;
-    margin-bottom: 10px;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  
-  .threshold-control .form-label {
-    margin-bottom: 5px !important;
-  }
-  
-  .threshold-control .input-group {
-    width: 100%;
-  }
+.threshold-control .btn-primary {
+  background-color: var(--primary-color);
+  border: none;
+  padding: 0.375rem 1rem;
 }
 
-/* 消息提示样式 */
-.message-container {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  min-width: 300px;
-  max-width: 80%;
+.display-4 {
+  background: linear-gradient(20deg, var(--primary-color), var(--info-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 500;
 }
 
-.message-box {
-  padding: 10px 20px;
+code {
+  color: var(--primary-color);
+  padding: 0.2em 0.4em;
   border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  animation: message-fade-in 0.3s;
+  font-size: 0.9em;
+  transition: all var(--transition-speed);
 }
 
-.message-box i {
-  margin-right: 10px;
-  font-size: 16px;
+code:hover {
+  background-color: rgba(255, 120, 117, 0.2);
 }
 
-.message-info {
-  background-color: #f4f4f5;
-  border: 1px solid #ebeef5;
-  color: #909399;
+.spinner-border {
+  color: var(--primary-color) !important;
 }
 
-.message-success {
-  background-color: #f0f9eb;
-  border: 1px solid #e1f3d8;
-  color: #67c23a;
+.chart-container {
+  background-color: white;
+  border-radius: 12px;
+  padding: 1rem;
+  box-shadow: var(--card-shadow);
 }
 
-.message-warning {
-  background-color: #fdf6ec;
-  border: 1px solid #faecd8;
-  color: #e6a23c;
+.alert {
+  border-radius: 8px;
+  border: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
-.message-error {
-  background-color: #fef0f0;
-  border: 1px solid #fde2e2;
-  color: #f56c6c;
+.suggestions-wrapper {
+  position: absolute;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--card-shadow);
+  z-index: 1000;
 }
 
-@keyframes message-fade-in {
-  0% {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.function-suggestions .list-group-item {
+  border: none;
+  padding: 0.75rem 1rem;
+  transition: all var(--transition-speed);
+}
+
+.function-suggestions .list-group-item:hover {
+  background-color: rgba(75, 150, 255, 0.05);
+  color: var(--primary-color);
+  transform: translateX(5px);
 }
-</style> 
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/runtime/TraceDetails.vue b/src/components/runtime/components/TraceDetails.vue
similarity index 82%
rename from src/components/runtime/TraceDetails.vue
rename to src/components/runtime/components/TraceDetails.vue
index 9e60833..386946e 100644
--- a/src/components/runtime/TraceDetails.vue
+++ b/src/components/runtime/components/TraceDetails.vue
@@ -151,7 +151,7 @@
 
 
 <script>
-import axios from '../../axios';
+import axios from '../../../axios';
 import { Modal } from 'bootstrap';
 
 export default {
@@ -292,7 +292,7 @@ export default {
       let currentParentId = Number(node.parentId);
       
       while (currentParentId) {
-        const parentIndex = this.findNodeIndexById(currentParentId);
+        const parentIndex = this.findNodeIndexByParentId(currentParentId);
         if (parentIndex === -1) break;
         
         ancestors.push(parentIndex);
@@ -626,22 +626,28 @@ export default {
 
 <style scoped>
 .trace-container {
-  max-height: 70vh;
+  max-height: 75vh;
   overflow-y: auto;
-  padding: 0.5rem 1rem;
+  padding: 1rem;
+  background: #fafafa;
+  border-radius: 12px;
 }
 
 .stack-item {
   position: relative;
+  padding-left: 2rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
 }
 
 .stack-item::before {
   content: '';
   position: absolute;
-  left: -15px;
+  left: 0;
   top: 0;
   height: 100%;
-  border-left: 1px dashed #ccc;
+  border-left: 2px dashed rgba(52, 152, 219, 0.3);
+  transition: opacity 0.3s ease;
 }
 
 .stack-item:last-child::before {
@@ -649,117 +655,324 @@ export default {
 }
 
 .trace-row {
-  padding: 0.75rem;
+  padding: 1rem;
   background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease;
-  margin-bottom: 0.75rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  margin-bottom: 1rem;
   position: relative;
+  border: 1px solid #eef2f7;
+  transform-origin: top;
 }
 
 .trace-row:hover {
   background-color: #f8f9fa;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
 }
 
 .trace-row.has-children {
-  border-left: 3px solid #3498db;
+  border-left: 4px solid #3498db;
 }
 
 .trace-row.is-collapsed {
-  border-left: 3px solid #e74c3c;
+  border-left: 4px solid #e74c3c;
+}
+
+.trace-row.is-collapsed + .stack-item {
+  max-height: 0;
+  margin: 0;
+  opacity: 0;
+  transform: translateX(-10px);
+}
+
+.stack-item {
+  max-height: 1000px; /* 设置一个足够大的值 */
+  opacity: 1;
+  transform: translateX(0);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .trace-row.is-highlighted {
-  background-color: #fff3cd;
-  border-left: 3px solid #ffc107;
-  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
+  background-color: #fff8e1;
+  border-left: 4px solid #ffc107;
+  box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
 }
 
 .trace-row.is-highlighted:hover {
-  background-color: #ffecb5;
-  transform: translateY(-2px);
+  background-color: #fff3cd;
 }
 
 .function-name {
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-weight: 500;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-weight: 600;
   color: #2c3e50;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
 }
 
 .toggle-btn {
-  padding: 0;
+  padding: 0.25rem;
   color: #3498db;
   background: transparent;
   border: none;
-  font-size: 1.2rem;
-  transition: transform 0.2s ease;
+  font-size: 1.25rem;
+  transition: all 0.3s ease;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+
+.toggle-btn::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 50%;
+  transform: scale(0);
+  transition: transform 0.3s ease;
+  z-index: -1;
 }
 
-.toggle-btn:hover {
-  color: #2980b9;
-  transform: scale(1.2);
+.toggle-btn:hover::before {
+  transform: scale(1);
+}
+
+.toggle-btn i {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.is-collapsed .toggle-btn i {
+  transform: rotate(-90deg);
 }
 
 .is-collapsed .toggle-btn {
   color: #e74c3c;
 }
 
+.is-collapsed .toggle-btn:hover::before {
+  background: rgba(231, 76, 60, 0.1);
+}
+
 .function-dot {
-  font-size: 0.5rem;
+  font-size: 0.6rem;
   color: #95a5a6;
+  margin-right: 0.5rem;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+}
+
+.trace-row:hover .function-dot {
+  opacity: 1;
 }
 
 .param-value {
-  font-family: 'Consolas', 'Monaco', monospace;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
   word-break: break-all;
   white-space: pre-wrap;
   background-color: #f8f9fa;
-  padding: 0.5rem;
-  border-radius: 4px;
-  border-left: 3px solid #3498db;
+  padding: 1rem;
+  border-radius: 8px;
+  border-left: 4px solid #3498db;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  transition: all 0.3s ease;
 }
 
 .btn-outline-info {
-  border-color: #3498db;
+  border: 2px solid #3498db;
   color: #3498db;
+  font-weight: 500;
+  padding: 0.375rem 1rem;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-outline-info::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: rgba(52, 152, 219, 0.1);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: width 0.3s ease, height 0.3s ease;
+}
+
+.btn-outline-info:hover::before {
+  width: 200%;
+  height: 200%;
 }
 
 .btn-outline-info:hover {
   background-color: #3498db;
   color: white;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
 }
 
 .card {
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   border: none;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }
 
 .card-header {
   background-color: #f8f9fa;
-  border-bottom: 1px solid #eaeaea;
+  border-bottom: 1px solid #eef2f7;
+  padding: 1rem 1.5rem;
+}
+
+.display-4 {
+  font-weight: 600;
+  color: #2c3e50;
+  font-size: 2.5rem;
+}
+
+.text-muted {
+  color: #6c757d !important;
+  font-size: 0.9rem;
+  transition: opacity 0.3s ease;
+}
+
+.trace-row:hover .text-muted {
+  opacity: 0.9;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 添加折叠动画 */
+@keyframes collapseOut {
+  from {
+    max-height: 1000px;
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    max-height: 0;
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+@keyframes expandIn {
+  from {
+    max-height: 0;
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    max-height: 1000px;
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @media (max-width: 768px) {
+  .trace-row {
+    padding: 0.75rem;
+  }
+  
   .trace-row .row {
     flex-direction: column;
   }
   
   .trace-row .col-md-3 {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
     text-align: left !important;
   }
   
   .stack-item {
-    margin-left: 10px !important;
+    padding-left: 1rem;
+  }
+  
+  .function-name {
+    font-size: 1rem;
+  }
+  
+  .display-4 {
+    font-size: 2rem;
+  }
+  
+  .card {
+    margin-bottom: 1rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .trace-container {
+    background: #1a1a1a;
+  }
+  
+  .trace-row {
+    background-color: #2d2d2d;
+    border-color: #3d3d3d;
+  }
+  
+  .trace-row:hover {
+    background-color: #333333;
+  }
+  
+  .function-name {
+    color: #e1e1e1;
+  }
+  
+  .param-value {
+    background-color: #333333;
+    color: #e1e1e1;
+  }
+  
+  .card {
+    background-color: #2d2d2d;
+  }
+  
+  .card-header {
+    background-color: #333333;
+    border-color: #3d3d3d;
+  }
+  
+  .text-muted {
+    color: #a0a0a0 !important;
+  }
+  
+  .display-4 {
+    color: #e1e1e1;
+  }
+  
+  .toggle-btn::before {
+    background: rgba(52, 152, 219, 0.05);
   }
   
-  .stack-item::before {
-    left: -10px;
+  .is-collapsed .toggle-btn:hover::before {
+    background: rgba(231, 76, 60, 0.05);
   }
 }
 </style> 
\ No newline at end of file
diff --git a/src/components/runtime/TraceViewer.vue b/src/components/runtime/components/TraceViewer.vue
similarity index 93%
rename from src/components/runtime/TraceViewer.vue
rename to src/components/runtime/components/TraceViewer.vue
index 2b93957..2669374 100644
--- a/src/components/runtime/TraceViewer.vue
+++ b/src/components/runtime/components/TraceViewer.vue
@@ -145,7 +145,7 @@
                   </div>
                 </div>
                 <div class="text-center mt-4">
-                  <button class="btn btn-primary" @click="showUploadModal = true">
+                  <button class="btn btn-primary" @click="openUploadModal">
                     <i class="bi bi-upload me-2"></i>上传文件
                   </button>
                 </div>
@@ -199,7 +199,7 @@
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title">上传运行时分析文件</h5>
-            <button type="button" class="btn-close" @click="showUploadModal = false"></button>
+            <button type="button" class="btn-close" @click="closeUploadModal"></button>
           </div>
           <div class="modal-body">
             <div v-if="uploadStatus.uploading" class="text-center py-3">
@@ -233,7 +233,7 @@
             </form>
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-secondary" @click="showUploadModal = false" :disabled="uploadStatus.uploading">取消</button>
+            <button type="button" class="btn btn-secondary" @click="closeUploadModal" :disabled="uploadStatus.uploading">取消</button>
             <button type="button" class="btn btn-primary" @click="uploadFile" :disabled="!uploadForm.file || uploadStatus.uploading">
               <i class="bi bi-upload me-2"></i>上传
             </button>
@@ -246,7 +246,7 @@
 </template>
 
 <script>
-import axios from '../../axios';
+import axios from '../../../axios';
 import { useI18n } from 'vue-i18n';
 
 export default {
@@ -553,7 +553,14 @@ export default {
           description: '',
           contentType: ''
         };
-        document.getElementById('file').value = '';
+        
+        // 安全地重置文件输入框
+        this.$nextTick(() => {
+          const fileInput = document.getElementById('file');
+          if (fileInput) {
+            fileInput.value = '';
+          }
+        });
       } catch (error) {
         this.showMessage('文件上传失败: ' + (error.response?.data || error.message || '未知错误'), 'error');
       } finally {
@@ -614,6 +621,54 @@ export default {
       console.log('TraceViewer - Language changed:', event.detail.locale);
       // 强制刷新组件中的国际化文本
       this.$forceUpdate();
+    },
+    
+    // 处理模态框关闭
+    closeUploadModal() {
+      // 如果正在上传，不允许关闭
+      if (this.uploadStatus.uploading) {
+        return;
+      }
+      
+      // 重置表单数据
+      this.uploadForm = {
+        file: null,
+        description: '',
+        contentType: ''
+      };
+      
+      // 关闭模态框
+      this.showUploadModal = false;
+    },
+    
+    // 打开上传模态框
+    openUploadModal() {
+      // 重置上传表单
+      this.uploadForm = {
+        file: null,
+        description: '',
+        contentType: ''
+      };
+      
+      // 重置上传状态
+      this.uploadStatus = {
+        uploading: false,
+        progress: 0,
+        currentChunk: 0,
+        totalChunks: 0,
+        fileId: ''
+      };
+      
+      // 打开模态框
+      this.showUploadModal = true;
+      
+      // 确保DOM更新后清空文件输入框
+      this.$nextTick(() => {
+        const fileInput = document.getElementById('file');
+        if (fileInput) {
+          fileInput.value = '';
+        }
+      });
     }
   }
 };
diff --git a/src/components/runtime/components/TreeNode.vue b/src/components/runtime/components/TreeNode.vue
new file mode 100644
index 0000000..aa493ef
--- /dev/null
+++ b/src/components/runtime/components/TreeNode.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="tree-node">
+    <div class="d-flex align-items-center mb-1">
+      <span 
+        v-if="node.children && node.children.length" 
+        class="toggle-icon me-2" 
+        @click="toggleCollapse"
+      >
+        <i :class="isCollapsed ? 'bi bi-plus-square' : 'bi bi-dash-square'"></i>
+      </span>
+      <span v-else class="ms-3 me-1"></span>
+      <span class="node-content" @click="selectFunction(node)">
+        {{ node.name }}
+        <small v-if="node.value" class="text-muted ms-1">{{ node.value }}</small>
+      </span>
+    </div>
+    <div class="children-container ps-4" v-if="!isCollapsed && node.children && node.children.length">
+      <div v-for="(child, index) in node.children" :key="index" class="mt-1">
+        <tree-node :node="child" @select-function="onSelectFunction" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'TreeNode',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['select-function'],
+  setup(props, { emit }) {
+    const isCollapsed = ref(props.node.collapsed || false);
+    
+    const toggleCollapse = () => {
+      isCollapsed.value = !isCollapsed.value;
+    };
+    
+    const selectFunction = (node) => {
+      emit('select-function', node);
+    };
+    
+    const onSelectFunction = (node) => {
+      emit('select-function', node);
+    };
+    
+    return {
+      isCollapsed,
+      toggleCollapse,
+      selectFunction,
+      onSelectFunction
+    };
+  }
+});
+</script>
+
+<style scoped>
+.tree-node {
+  padding: 4px 0;
+}
+
+.toggle-icon {
+  cursor: pointer;
+  color: var(--bs-primary);
+}
+
+.node-content {
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+}
+
+.node-content:hover {
+  background-color: rgba(13, 110, 253, 0.1);
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .toggle-icon {
+    color: #5b9aff;
+  }
+  
+  .node-content:hover {
+    background-color: rgba(91, 154, 255, 0.15);
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/runtime/analysis/composables/useCallChainAnalysis.js b/src/components/runtime/composables/useCallChainAnalysis.js
similarity index 94%
rename from src/components/runtime/analysis/composables/useCallChainAnalysis.js
rename to src/components/runtime/composables/useCallChainAnalysis.js
index 66f72b9..5de4a6d 100644
--- a/src/components/runtime/analysis/composables/useCallChainAnalysis.js
+++ b/src/components/runtime/composables/useCallChainAnalysis.js
@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue';
-import { useRuntimeApi } from '../../shared/composables/useRuntimeApi';
-import { createTreeChartOption } from '../../shared/utils/chartUtils';
+import { useRuntimeApi } from './useRuntimeApi';
+import { createTreeChartOption } from '../utils/chartUtils';
 
 export function useCallChainAnalysis() {
   const runtimeApi = useRuntimeApi();
diff --git a/src/components/runtime/analysis/composables/useFunctionAnalysis.js b/src/components/runtime/composables/useFunctionAnalysis.js
similarity index 94%
rename from src/components/runtime/analysis/composables/useFunctionAnalysis.js
rename to src/components/runtime/composables/useFunctionAnalysis.js
index 8fe2ec2..6daecf9 100644
--- a/src/components/runtime/analysis/composables/useFunctionAnalysis.js
+++ b/src/components/runtime/composables/useFunctionAnalysis.js
@@ -1,5 +1,5 @@
 import { ref, computed } from 'vue';
-import { useRuntimeApi } from '../../shared/composables/useRuntimeApi';
+import { useRuntimeApi } from './useRuntimeApi';
 
 export function useFunctionAnalysis() {
   const runtimeApi = useRuntimeApi();
diff --git a/src/components/runtime/function-analysis/composables/useFunctionSearch.js b/src/components/runtime/composables/useFunctionSearch.js
similarity index 100%
rename from src/components/runtime/function-analysis/composables/useFunctionSearch.js
rename to src/components/runtime/composables/useFunctionSearch.js
diff --git a/src/components/runtime/composables/useRuntimeApi.js b/src/components/runtime/composables/useRuntimeApi.js
new file mode 100644
index 0000000..590b94d
--- /dev/null
+++ b/src/components/runtime/composables/useRuntimeApi.js
@@ -0,0 +1,99 @@
+import { ref } from 'vue';
+import axios from '../../../axios';
+
+export function useRuntimeApi() {
+  const loading = ref(false);
+  const error = ref(null);
+
+  // 获取函数列表
+  const getFunctions = async (dbPath) => {
+    loading.value = true;
+    error.value = null;
+    
+    try {
+      const response = await axios.post('/api/runtime/functions', {
+        dbpath: dbPath,
+        includePackage: true
+      });
+      
+      if (response.data?.functions) {
+        return response.data.functions;
+      } else if (response.data?.functionNames) {
+        return response.data.functionNames.map(name => ({
+          name,
+          package: ''
+        }));
+      }
+      return [];
+    } catch (err) {
+      error.value = err;
+      console.error('获取函数列表失败:', err);
+      return [];
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 获取函数分析数据
+  const getFunctionAnalysis = async (dbPath, functionName) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      const response = await axios.post('/api/runtime/function/analysis', {
+        dbpath: dbPath,
+        functionName: functionName
+      });
+      return response.data.data || [];
+    } catch (err) {
+      error.value = err;
+      return [];
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 获取调用树数据
+  const getCallTree = async (dbPath, functionName) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      const response = await axios.post('/api/runtime/function/tree', {
+        dbpath: dbPath,
+        functionName: functionName
+      });
+      return response.data.tree || null;
+    } catch (err) {
+      error.value = err;
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // 获取调用统计数据
+  const getCallStats = async (dbPath, functionName) => {
+    try {
+      loading.value = true;
+      error.value = null;
+      const response = await axios.post('/api/runtime/function/stats', {
+        dbPath: dbPath,
+        functionName: functionName
+      });
+      return response.data.stats || null;
+    } catch (err) {
+      error.value = err;
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    error,
+    getFunctions,
+    getFunctionAnalysis,
+    getCallTree,
+    getCallStats
+  };
+} 
\ No newline at end of file
diff --git a/src/components/runtime/function-analysis/components/CallChainAnalysis.vue b/src/components/runtime/function-analysis/components/CallChainAnalysis.vue
deleted file mode 100644
index 65a21ea..0000000
--- a/src/components/runtime/function-analysis/components/CallChainAnalysis.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <div class="call-chain-analysis">
-    <!-- 分析功能按钮组 -->
-    <div class="mb-3 d-flex justify-content-between align-items-center">
-      <div class="btn-group">
-        <button class="btn" :class="{'btn-primary': viewMode === 'table', 'btn-outline-primary': viewMode !== 'table'}" @click="viewMode = 'table'">
-          <i class="bi bi-table me-1"></i> 表格视图
-        </button>
-        <button class="btn" :class="{'btn-primary': viewMode === 'tree', 'btn-outline-primary': viewMode !== 'tree'}" @click="viewMode = 'tree'">
-          <i class="bi bi-diagram-3 me-1"></i> 树状图
-        </button>
-      </div>
-    </div>
-
-    <!-- 表格视图 -->
-    <div v-if="viewMode === 'table'" class="card mb-4">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="mb-0">
-          <i class="bi bi-arrow-down-square"></i>
-          调用链分析: <code>{{ functionName }}</code>
-        </h5>
-        <div class="btn-group">
-          <button class="btn btn-sm btn-outline-primary" @click="exportToCSV">
-            <i class="bi bi-download me-1"></i> 导出数据
-          </button>
-        </div>
-      </div>
-      <div class="card-body p-0">
-        <div class="table-responsive">
-          <table class="table table-hover table-striped mb-0">
-            <thead class="table-light">
-              <tr>
-                <th>函数名称</th>
-                <th>包路径</th>
-                <th class="text-center">调用层级</th>
-                <th class="text-center">调用次数</th>
-                <th class="text-center">平均耗时</th>
-                <th class="text-center">操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in flattenedCallData" :key="item.id" :class="{'table-primary': item.name === functionName}">
-                <td>
-                  <div class="d-flex align-items-center">
-                    <span v-if="item.level > 0" :style="{ marginLeft: (item.level * 20) + 'px' }">
-                      <i class="bi bi-arrow-return-right me-2 text-muted"></i>
-                    </span>
-                    <code class="function-name">{{ item.name }}</code>
-                  </div>
-                </td>
-                <td><small class="text-muted">{{ item.package }}</small></td>
-                <td class="text-center">{{ item.level }}</td>
-                <td class="text-center">
-                  <span class="badge bg-primary">{{ item.callCount || 0 }}</span>
-                </td>
-                <td class="text-center">{{ item.avgTime || 'N/A' }}</td>
-                <td class="text-center">
-                  <button v-if="item.name !== functionName" 
-                          class="btn btn-sm btn-outline-info"
-                          @click="$emit('search', item.name)">
-                    <i class="bi bi-search me-1"></i> 搜索
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-
-    <!-- 树状图 -->
-    <div v-else class="card mb-4">
-      <div class="card-header d-flex justify-content-between align-items-center">
-        <h5 class="mb-0">
-          <i class="bi bi-diagram-3"></i>
-          函数调用链树状图: <code>{{ functionName }}</code>
-        </h5>
-        <div class="btn-group">
-          <button class="btn btn-sm btn-outline-primary" @click="refreshTreeChart">
-            <i class="bi bi-arrow-clockwise me-1"></i> 刷新图表
-          </button>
-        </div>
-      </div>
-      <div class="card-body">
-        <div ref="treeChartRef" class="tree-chart-container"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import { useCallChainAnalysis } from '../composables/useCallChainAnalysis';
-
-export default {
-  name: 'CallChainAnalysis',
-  props: {
-    functionName: {
-      type: String,
-      required: true
-    },
-    callData: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ['search'],
-  setup(props) {
-    const viewMode = ref('table');
-    const treeChartRef = ref(null);
-    const treeChart = ref(null);
-    
-    const {
-      flattenedCallData,
-      exportToCSV,
-      initTreeChart,
-      refreshTreeChart
-    } = useCallChainAnalysis(props.functionName, props.callData);
-
-    // 监听视图模式变化
-    watch(viewMode, (newMode) => {
-      if (newMode === 'tree') {
-        initTreeChart(treeChartRef.value, treeChart);
-      }
-    });
-
-    // 监听窗口大小变化
-    const handleResize = () => {
-      if (treeChart.value) {
-        treeChart.value.resize();
-      }
-    };
-
-    onMounted(() => {
-      window.addEventListener('resize', handleResize);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', handleResize);
-      if (treeChart.value) {
-        treeChart.value.dispose();
-      }
-    });
-
-    return {
-      viewMode,
-      treeChartRef,
-      flattenedCallData,
-      exportToCSV,
-      refreshTreeChart
-    };
-  }
-};
-</script>
-
-<style scoped>
-.tree-chart-container {
-  width: 100%;
-  height: 600px;
-  margin: 0 auto;
-}
-
-.function-name {
-  font-family: 'Consolas', 'Monaco', monospace;
-  font-weight: 500;
-}
-
-.table td {
-  vertical-align: middle;
-}
-
-.table-primary {
-  --bs-table-bg: rgba(13, 110, 253, 0.1);
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/function-analysis/components/FunctionSearch.vue b/src/components/runtime/function-analysis/components/FunctionSearch.vue
deleted file mode 100644
index 6aaf868..0000000
--- a/src/components/runtime/function-analysis/components/FunctionSearch.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <div class="function-search">
-    <div class="card mb-4">
-      <div class="card-header">
-        <h5 class="mb-0"><i class="bi bi-search me-2"></i>{{ $t('runtimeAnalysis.functionAnalysis.title') }}</h5>
-      </div>
-      <div class="card-body">
-        <div class="row">
-          <div class="col-md-8 search-container">
-            <div class="input-group">
-              <span class="input-group-text"><i class="bi bi-code-square"></i></span>
-              <input
-                v-model="searchQuery"
-                type="text"
-                :placeholder="$t('runtimeAnalysis.functionAnalysis.inputFunctionName')"
-                class="form-control"
-                @input="handleInput"
-                @focus="showSuggestions = true"
-                @blur="hideSuggestionsDelayed"
-                ref="searchInput"
-              />
-              <button class="btn btn-primary" @click="search">
-                <i class="bi bi-search me-1"></i> {{ $t('runtimeAnalysis.functionAnalysis.search') }}
-              </button>
-            </div>
-            
-            <teleport to="body" :disabled="!isMounted">
-              <div class="suggestions-container" v-if="showSuggestions && filteredSuggestions.length && isMounted" :style="suggestionsStyle">
-                <div class="suggestions-wrapper">
-                  <ul class="list-group function-suggestions" ref="suggestionsList">
-                    <li
-                      v-for="(item, index) in filteredSuggestions"
-                      :key="index"
-                      class="list-group-item list-group-item-action"
-                      :class="{ 'active': index === selectedIndex }"
-                      @mousedown.prevent="selectSuggestion(item)"
-                      @mouseover="selectedIndex = index"
-                    >
-                      <span v-html="highlightMatch(item.name, searchQuery)"></span>
-                      <small v-if="item.package" class="text-muted d-block">{{ item.package }}</small>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </teleport>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useFunctionSearch } from '../composables/useFunctionSearch';
-
-export default {
-  name: 'FunctionSearch',
-  props: {
-    dbPath: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ['search'],
-  setup(props, { emit }) {
-    const { t } = useI18n();
-    const searchInput = ref(null);
-    const suggestionsList = ref(null);
-    const isMounted = ref(false);
-    
-    const {
-      searchQuery,
-      showSuggestions,
-      filteredSuggestions,
-      selectedIndex,
-      suggestionsStyle,
-      handleInput,
-      selectSuggestion,
-      hideSuggestionsDelayed,
-      highlightMatch,
-      updateSuggestionsPosition
-    } = useFunctionSearch(props.dbPath, emit);
-
-    const search = () => {
-      if (!searchQuery.value) {
-        alert(t('runtimeAnalysis.functionAnalysis.pleaseInputFunction'));
-        return;
-      }
-      emit('search', searchQuery.value);
-    };
-
-    onMounted(() => {
-      isMounted.value = true;
-      window.addEventListener('resize', updateSuggestionsPosition);
-      window.addEventListener('scroll', updateSuggestionsPosition, true);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('resize', updateSuggestionsPosition);
-      window.removeEventListener('scroll', updateSuggestionsPosition, true);
-    });
-
-    return {
-      searchInput,
-      suggestionsList,
-      isMounted,
-      searchQuery,
-      showSuggestions,
-      filteredSuggestions,
-      selectedIndex,
-      suggestionsStyle,
-      handleInput,
-      selectSuggestion,
-      hideSuggestionsDelayed,
-      highlightMatch,
-      search
-    };
-  }
-};
-</script>
-
-<style scoped>
-.search-container {
-  position: relative;
-  z-index: 1050;
-}
-
-.suggestions-container {
-  position: fixed;
-  z-index: 9999 !important;
-}
-
-.suggestions-wrapper {
-  position: relative;
-  width: 100%;
-  max-width: 100%;
-  overflow: visible;
-}
-
-.function-suggestions {
-  width: 100%;
-  max-height: 300px;
-  overflow-y: auto;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-  background-color: white;
-  border: 1px solid #dee2e6;
-  border-radius: 0 0 0.375rem 0.375rem;
-  margin-top: 0;
-  padding: 0;
-}
-
-.highlight {
-  background-color: rgba(255, 230, 0, 0.4);
-  font-weight: bold;
-  border-radius: 2px;
-  padding: 0 2px;
-}
-</style> 
\ No newline at end of file
diff --git a/src/components/runtime/function-analysis/composables/useCallChainAnalysis.js b/src/components/runtime/function-analysis/composables/useCallChainAnalysis.js
deleted file mode 100644
index 1f5ac17..0000000
--- a/src/components/runtime/function-analysis/composables/useCallChainAnalysis.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import { ref, computed } from 'vue';
-import * as echarts from 'echarts';
-
-export function useCallChainAnalysis(functionName, callData) {
-  const collapsedNodes = ref(new Set());
-  
-  // 处理调用数据，添加层级信息
-  const processedCallData = computed(() => {
-    const result = [];
-    
-    const processNode = (node, level, parentId) => {
-      const processedNode = {
-        ...node,
-        level,
-        parentId
-      };
-      
-      result.push(processedNode);
-      
-      if (!collapsedNodes.value.has(node.id) && node.children?.length) {
-        node.children.forEach(child => {
-          processNode(child, level + 1, node.id);
-        });
-      }
-    };
-    
-    callData.forEach(node => {
-      processNode(node, 0, null);
-    });
-    
-    return result;
-  });
-  
-  // 扁平化的调用数据，用于表格展示
-  const flattenedCallData = computed(() => {
-    return processedCallData.value.map(item => ({
-      id: item.id,
-      name: item.name,
-      package: item.package || '',
-      level: item.level,
-      callCount: item.callCount || 0,
-      avgTime: item.avgTime || 'N/A',
-      parentId: item.parentId
-    }));
-  });
-  
-  // 导出为CSV
-  const exportToCSV = () => {
-    if (!flattenedCallData.value.length) {
-      alert('没有数据可导出');
-      return;
-    }
-    
-    const headers = ['函数名称', '包路径', '调用层级', '调用次数', '平均耗时'];
-    const csvData = flattenedCallData.value.map(item => [
-      item.name,
-      item.package,
-      item.level,
-      item.callCount,
-      item.avgTime
-    ]);
-    
-    csvData.unshift(headers);
-    
-    const csvString = csvData.map(row => row.map(cell => {
-      if (cell && (String(cell).includes(',') || String(cell).includes('"') || String(cell).includes('\n'))) {
-        return `"${String(cell).replace(/"/g, '""')}"`;
-      }
-      return String(cell);
-    }).join(',')).join('\n');
-    
-    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-    const url = URL.createObjectURL(blob);
-    
-    link.setAttribute('href', url);
-    link.setAttribute('download', `函数调用关系_${functionName}_${new Date().toISOString().slice(0, 10)}.csv`);
-    link.style.visibility = 'hidden';
-    
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-  
-  // 将调用数据转换为ECharts树图格式
-  const convertToTreeData = (node) => {
-    if (!node) return null;
-    
-    const treeNode = {
-      name: node.name,
-      package: node.package || '',
-      callCount: node.callCount || 0,
-      avgTime: node.avgTime || 'N/A',
-      value: node.avgTime ? parseFloat(node.avgTime.replace(/[^\d.]/g, '')) : 0,
-      children: []
-    };
-    
-    if (node.children?.length) {
-      treeNode.children = node.children
-        .map(child => convertToTreeData(child))
-        .filter(Boolean);
-    }
-    
-    return treeNode;
-  };
-  
-  // 初始化树状图
-  const initTreeChart = (chartRef, chartInstance) => {
-    if (!chartRef) return;
-    
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-    }
-    
-    chartInstance.value = echarts.init(chartRef);
-    
-    const treeData = convertToTreeData(callData[0]);
-    const option = {
-      tooltip: {
-        trigger: 'item',
-        triggerOn: 'mousemove',
-        formatter: (params) => {
-          const data = params.data;
-          let html = `<div style="font-weight:bold;">${data.name}</div>`;
-          
-          if (data.package) {
-            html += `<div>包路径: ${data.package}</div>`;
-          }
-          
-          if (data.callCount !== undefined) {
-            html += `<div>调用次数: ${data.callCount}</div>`;
-          }
-          
-          if (data.avgTime) {
-            html += `<div>平均耗时: ${data.avgTime}</div>`;
-          }
-          
-          return html;
-        }
-      },
-      series: [
-        {
-          type: 'tree',
-          name: '函数调用关系',
-          data: [treeData],
-          top: '1%',
-          left: '7%',
-          bottom: '1%',
-          right: '20%',
-          symbolSize: 10,
-          orient: 'vertical',
-          expandAndCollapse: true,
-          initialTreeDepth: 5,
-          label: {
-            position: 'top',
-            rotate: 0,
-            verticalAlign: 'middle',
-            align: 'right',
-            fontSize: 12,
-            color: '#555'
-          },
-          leaves: {
-            label: {
-              position: 'right',
-              verticalAlign: 'middle',
-              align: 'left'
-            }
-          },
-          emphasis: {
-            focus: 'descendant'
-          },
-          animationDuration: 550,
-          animationDurationUpdate: 750
-        }
-      ]
-    };
-    
-    chartInstance.value.setOption(option);
-  };
-  
-  // 刷新树状图
-  const refreshTreeChart = () => {
-    const chartRef = document.querySelector('.tree-chart-container');
-    const chartInstance = ref(null);
-    initTreeChart(chartRef, chartInstance);
-  };
-  
-  return {
-    flattenedCallData,
-    exportToCSV,
-    initTreeChart,
-    refreshTreeChart
-  };
-} 
\ No newline at end of file
diff --git a/src/components/runtime/shared/composables/useRuntimeApi.js b/src/components/runtime/shared/composables/useRuntimeApi.js
deleted file mode 100644
index 6fdb85a..0000000
--- a/src/components/runtime/shared/composables/useRuntimeApi.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import { ref } from 'vue';
-import axios from '../../../../axios';
-
-export function useRuntimeApi() {
-  const loading = ref(false);
-  const error = ref(null);
-
-  // 获取函数列表
-  const getFunctions = async (dbPath) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/functions', {
-        dbpath: dbPath,
-        includePackage: true
-      });
-      
-      if (response.data?.functions) {
-        return response.data.functions;
-      } else if (response.data?.functionNames) {
-        return response.data.functionNames.map(name => ({
-          name,
-          package: ''
-        }));
-      }
-      return [];
-    } catch (err) {
-      error.value = err;
-      console.error('获取函数列表失败:', err);
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // 获取函数调用分析
-  const getFunctionAnalysis = async (dbPath, functionName) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/function/analysis', {
-        functionName,
-        type: 'caller',
-        path: dbPath
-      });
-      
-      return response.data?.callData || [];
-    } catch (err) {
-      error.value = err;
-      console.error('获取函数调用分析失败:', err);
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // 获取热点路径
-  const getHotPaths = async (dbPath, functionName, limit = 10) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/hot-paths', {
-        dbPath,
-        functionName,
-        limit
-      });
-      
-      return response.data?.paths || [];
-    } catch (err) {
-      error.value = err;
-      console.error('获取热点路径失败:', err);
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // 获取调用统计
-  const getCallStats = async (dbPath, functionName) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/call-stats', {
-        dbPath,
-        functionName
-      });
-      
-      return response.data?.stats || [];
-    } catch (err) {
-      error.value = err;
-      console.error('获取调用统计失败:', err);
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // 获取性能异常
-  const getPerformanceAnomalies = async (dbPath, functionName, threshold = 2) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/performance-anomalies', {
-        dbPath,
-        functionName,
-        threshold
-      });
-      
-      return response.data?.anomalies || [];
-    } catch (err) {
-      error.value = err;
-      console.error('获取性能异常失败:', err);
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  // 获取调用链树图
-  const getCallTree = async (dbPath, functionName) => {
-    loading.value = true;
-    error.value = null;
-    
-    try {
-      const response = await axios.post('/api/runtime/tree-graph', {
-        dbPath,
-        functionName,
-        chainType: 'full'
-      });
-      
-      return response.data?.root || null;
-    } catch (err) {
-      error.value = err;
-      console.error('获取调用链树图失败:', err);
-      return null;
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  return {
-    loading,
-    error,
-    getFunctions,
-    getFunctionAnalysis,
-    getHotPaths,
-    getCallStats,
-    getPerformanceAnomalies,
-    getCallTree
-  };
-} 
\ No newline at end of file
diff --git a/src/components/runtime/shared/utils/chartUtils.js b/src/components/runtime/shared/utils/chartUtils.js
deleted file mode 100644
index 239faf3..0000000
--- a/src/components/runtime/shared/utils/chartUtils.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import * as echarts from 'echarts';
-
-// 创建树状图配置
-export const createTreeChartOption = (treeData) => {
-  return {
-    tooltip: {
-      trigger: 'item',
-      triggerOn: 'mousemove',
-      formatter: (params) => {
-        const data = params.data;
-        let html = `<div style="font-weight:bold;">${data.name}</div>`;
-        
-        if (data.package) {
-          html += `<div>包路径: ${data.package}</div>`;
-        }
-        
-        if (data.callCount !== undefined) {
-          html += `<div>调用次数: ${data.callCount}</div>`;
-        }
-        
-        if (data.avgTime) {
-          html += `<div>平均耗时: ${data.avgTime}</div>`;
-        }
-        
-        return html;
-      }
-    },
-    series: [
-      {
-        type: 'tree',
-        name: '函数调用关系',
-        data: [treeData],
-        top: '1%',
-        left: '7%',
-        bottom: '1%',
-        right: '20%',
-        symbolSize: 10,
-        orient: 'vertical',
-        expandAndCollapse: true,
-        initialTreeDepth: 5,
-        label: {
-          position: 'top',
-          rotate: 0,
-          verticalAlign: 'middle',
-          align: 'right',
-          fontSize: 12,
-          color: '#555'
-        },
-        leaves: {
-          label: {
-            position: 'right',
-            verticalAlign: 'middle',
-            align: 'left'
-          }
-        },
-        emphasis: {
-          focus: 'descendant'
-        },
-        animationDuration: 550,
-        animationDurationUpdate: 750
-      }
-    ]
-  };
-};
-
-// 创建热点路径图表配置
-export const createHotPathChartOption = (data, mode = 'time') => {
-  return {
-    title: {
-      text: mode === 'time' ? '函数调用路径执行时间分析' : '函数调用路径频次分析',
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      },
-      formatter: (params) => {
-        const data = params[0].data;
-        return `${data.name}<br/>${mode === 'time' ? '执行时间' : '调用次数'}: ${data.value}${mode === 'time' ? 'ms' : ''}`;
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      name: mode === 'time' ? '执行时间(ms)' : '调用次数',
-      nameLocation: 'end'
-    },
-    yAxis: {
-      type: 'category',
-      data: data.map(item => {
-        const name = item.name;
-        if (name.length > 40) {
-          return name.substring(0, 37) + '...';
-        }
-        return name;
-      })
-    },
-    series: [
-      {
-        name: mode === 'time' ? '执行时间' : '调用次数',
-        type: 'bar',
-        data: data,
-        itemStyle: {
-          color: (params) => {
-            const colorList = ['#c23531', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
-            return colorList[params.dataIndex % colorList.length];
-          }
-        },
-        label: {
-          show: true,
-          position: 'right',
-          formatter: (params) => {
-            return mode === 'time' ? params.value + 'ms' : params.value;
-          }
-        }
-      }
-    ]
-  };
-};
-
-// 创建饼图配置
-export const createPieChartOption = (data, title) => {
-  return {
-    title: {
-      text: title,
-      left: 'center'
-    },
-    tooltip: {
-      trigger: 'item'
-    },
-    series: [
-      {
-        type: 'pie',
-        radius: ['40%', '70%'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 10,
-          borderColor: '#fff',
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: '18',
-            fontWeight: 'bold'
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: data
-      }
-    ]
-  };
-};
-
-// 初始化图表
-export const initChart = (chartRef, option) => {
-  if (!chartRef) return null;
-  
-  const chart = echarts.init(chartRef);
-  chart.setOption(option);
-  
-  return chart;
-};
-
-// 处理图表大小调整
-export const handleChartResize = (chart) => {
-  if (chart) {
-    chart.resize();
-  }
-};
-
-// 销毁图表
-export const disposeChart = (chart) => {
-  if (chart) {
-    chart.dispose();
-  }
-}; 
\ No newline at end of file
diff --git a/src/components/runtime/utils/chartUtils.js b/src/components/runtime/utils/chartUtils.js
new file mode 100644
index 0000000..8af9d2b
--- /dev/null
+++ b/src/components/runtime/utils/chartUtils.js
@@ -0,0 +1,552 @@
+import * as echarts from 'echarts';
+
+// 定义颜色变量
+const colors = {
+  primary: '#4b96ff',      // 主色调：蓝色
+  secondary: '#ff7875',    // 互补色：珊瑚红
+  success: '#52c41a',      // 成功色：绿色
+  warning: '#faad14',      // 警告色：橙色
+  danger: '#ff4d4f',       // 危险色：红色
+  info: '#40a9ff',         // 信息色：浅蓝色
+  textPrimary: '#1f1f1f',  // 主要文本色
+  textSecondary: '#666666' // 次要文本色
+};
+
+// 格式化图表数据
+export function formatChartData(data) {
+  return data;
+}
+
+// 初始化图表
+export function initChart(container, option) {
+  if (!container) {
+    console.error('图表容器不存在');
+    return null;
+  }
+
+  try {
+    // 检查容器尺寸
+    if (container.offsetWidth === 0 || container.offsetHeight === 0) {
+      console.error('图表容器尺寸异常：', { width: container.offsetWidth, height: container.offsetHeight });
+      
+      // 尝试调整容器大小并强制显示
+      container.style.display = 'block';
+      container.style.width = '100%';
+      container.style.height = '100%';
+      container.style.minWidth = '800px';
+      container.style.minHeight = '600px';
+      
+      // 强制浏览器回流以更新尺寸
+      void container.offsetHeight;
+      
+      // 如果还是没有尺寸，则给出警告但继续尝试初始化
+      if (container.offsetWidth === 0 || container.offsetHeight === 0) {
+        console.warn('调整后容器尺寸仍然异常，将尝试使用固定尺寸初始化图表');
+      }
+    }
+    
+    // 检查选项是否有效
+    if (!option || typeof option !== 'object') {
+      console.error('图表配置无效');
+      return null;
+    }
+
+    // 创建图表实例，如果容器没有尺寸，使用备选方案
+    let chart;
+    try {
+      chart = echarts.init(container);
+    } catch (e) {
+      console.error('常规初始化失败，尝试备选方法:', e);
+      
+      // 备选方案：使用固定尺寸初始化
+      container.style.width = '800px';
+      container.style.height = '600px';
+      container.style.position = 'relative';
+      container.style.visibility = 'visible';
+      
+      // 强制浏览器回流
+      void container.offsetHeight;
+      
+      chart = echarts.init(container);
+    }
+    
+    // 设置图表配置
+    chart.setOption(option);
+    
+    // 给图表一个临时ID以便于调试
+    chart.__debugId = 'echarts_' + Date.now();
+    console.log('图表初始化成功:', chart.__debugId);
+    
+    // 添加自动resize的功能
+    const observer = new ResizeObserver(() => {
+      chart.resize();
+    });
+    
+    // 观察容器尺寸变化
+    observer.observe(container);
+    
+    // 保存observer以便后续清理
+    chart.__resizeObserver = observer;
+    
+    // 立即执行一次resize确保图表完全适应容器
+    chart.resize();
+    
+    return chart;
+  } catch (error) {
+    console.error('初始化图表失败:', error);
+    return null;
+  }
+}
+
+// 处理图表大小调整
+export function handleChartResize(chart) {
+  if (chart) {
+    try {
+      chart.resize();
+    } catch (e) {
+      console.error('调整图表大小失败:', e);
+    }
+  }
+}
+
+// 销毁图表实例
+export function disposeChart(chart) {
+  if (chart) {
+    try {
+      // 清理ResizeObserver
+      if (chart.__resizeObserver) {
+        chart.__resizeObserver.disconnect();
+        chart.__resizeObserver = null;
+      }
+      
+      chart.dispose();
+      console.log('图表已销毁:', chart.__debugId);
+    } catch (e) {
+      console.error('销毁图表失败:', e);
+    }
+  }
+}
+
+// 创建树形图配置
+export const createTreeChartOption = (data) => {
+  // 确保数据是数组且非空
+  if (!Array.isArray(data) || data.length === 0) {
+    return {
+      series: [{
+        type: 'tree',
+        data: [{
+          name: '暂无数据',
+          value: '',
+        }],
+        layout: 'orthogonal',
+        orient: 'LR',
+        label: {
+          show: true
+        }
+      }]
+    };
+  }
+  
+  // 配置全局样式
+  const globalStyle = {
+    symbol: 'emptyCircle',
+    symbolSize: 16,
+    itemStyle: {
+      color: '#fff',
+      borderWidth: 1.5,
+      shadowBlur: 4,
+      shadowColor: 'rgba(0, 0, 0, 0.2)'
+    },
+    lineStyle: {
+      width: 1.5,
+      curveness: 0.1,
+      opacity: 0.7,
+      shadowBlur: 2,
+      shadowColor: 'rgba(0, 0, 0, 0.15)'
+    },
+    label: {
+      show: true,
+      position: 'right',
+      formatter: (params) => formatLabel(params),
+      backgroundColor: 'rgba(255,255,255,0.95)',
+      padding: [5, 8],
+      borderRadius: 4,
+      distance: 12,
+      shadowColor: 'rgba(0, 0, 0, 0.15)',
+      shadowBlur: 4,
+      shadowOffsetX: 1,
+      shadowOffsetY: 1,
+      rich: {
+        title: {
+          fontSize: 13,
+          fontWeight: 'bold',
+          lineHeight: 18,
+          color: colors.textPrimary
+        },
+        time: {
+          fontSize: 12,
+          color: colors.primary,
+          lineHeight: 16
+        },
+        icon: {
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: colors.primary,
+          lineHeight: 18,
+          align: 'center',
+          padding: [0, 4, 0, 0]
+        }
+      }
+    }
+  };
+  
+  // 公共提示框配置
+  const tooltipConfig = {
+    trigger: 'item',
+    triggerOn: 'mousemove',
+    backgroundColor: 'rgba(255,255,255,0.98)',
+    borderColor: colors.primary,
+    borderWidth: 1,
+    padding: [12, 16],
+    textStyle: {
+      color: colors.textPrimary
+    },
+    formatter: (params) => {
+      const { name, value } = params.data;
+      const executionTime = params.data.executionTime || '未知';
+      let childCount = '';
+      if (params.data.children && params.data.children.length > 0) {
+        childCount = `<div>子节点数: <span style="color:${colors.primary};font-weight:bold">${params.data.children.length}</span></div>`;
+      }
+      return `
+        <div style="font-weight: bold; font-size:14px; margin-bottom: 10px; color: ${colors.primary}; border-bottom:1px solid #eee; padding-bottom:5px;">
+          ${name || '未知函数'}
+        </div>
+        <div style="color: ${colors.textSecondary}">
+          <div>函数ID: <span style="font-family:monospace;color:#333">${value || '未知'}</span></div>
+          <div>执行时间: <span style="color:${colors.secondary};font-weight:bold">${executionTime}</span></div>
+          ${childCount}
+        </div>
+      `;
+    },
+    extraCssText: 'box-shadow: 0 3px 12px rgba(0,0,0,0.15); border-radius: 6px;'
+  };
+  
+  // 如果有多棵树
+  if (data.length > 1) {
+    return createMultipleTreeOption(data, globalStyle, tooltipConfig);
+  }
+  
+  // 单棵树的配置
+  return createSingleTreeOption(data, globalStyle, tooltipConfig);
+};
+
+// 创建多棵树的图表配置
+function createMultipleTreeOption(data, globalStyle, tooltipConfig) {
+  const treeCount = data.length;
+  const seriesArray = [];
+  
+  // 创建多个series，每个树单独占一个series
+  for (let i = 0; i < treeCount; i++) {
+    // 根据树的数量选择布局模式
+    // 修改：所有布局都使用正交布局，从左向右展示
+    const layout = 'orthogonal';
+    const orient = 'LR';
+    
+    // 计算每棵树的位置
+    let top, left, height, width;
+    const treeColor = getTreeColor(i);
+    
+    if (treeCount <= 2) {
+      // 如果只有1-2棵树，垂直排列
+      top = `${5 + (90 / treeCount) * i}%`;
+      left = '10%';
+      height = `${90 / treeCount - 5}%`;
+      width = '80%';
+    } else if (treeCount <= 4) {
+      // 如果有3-4棵树，2x2网格排列
+      top = i < 2 ? '5%' : '55%';
+      left = i % 2 === 0 ? '5%' : '55%';
+      height = '40%';
+      width = '40%';
+    } else {
+      // 如果有更多树，使用动态网格
+      const cols = treeCount <= 6 ? 2 : 3;
+      const rows = Math.ceil(treeCount / cols);
+      const colIndex = i % cols;
+      const rowIndex = Math.floor(i / cols);
+      
+      // 计算每个单元格的大小
+      const cellHeight = 95 / rows;
+      const cellWidth = 95 / cols;
+      
+      top = `${2.5 + cellHeight * rowIndex}%`;
+      left = `${2.5 + cellWidth * colIndex}%`;
+      height = `${cellHeight - 5}%`;
+      width = `${cellWidth - 5}%`;
+    }
+    
+    // 所有布局都使用polyline边缘形状
+    const edgeShape = 'polyline';
+    
+    // 创建单个树的系列配置
+    seriesArray.push({
+      type: 'tree',
+      name: `树 ${i+1}`,
+      data: [data[i]], // 每个series只包含一棵树
+      top: top,
+      left: left,
+      height: height,
+      width: width,
+      symbolSize: globalStyle.symbolSize,
+      
+      // 布局设置
+      layout: layout,
+      orient: orient,
+      initialTreeDepth: 2, // 默认展开两层
+      
+      // 交互相关配置
+      roam: true,
+      expandAndCollapse: true,
+      animationDuration: 550,
+      animationDurationUpdate: 750,
+      animationEasingUpdate: 'elasticOut',
+      edgeShape: edgeShape,
+      edgeForkPosition: '50%',
+      nodeGap: 35,
+      layerPadding: 150,
+      
+      // 高亮效果
+      emphasis: {
+        focus: 'descendant',
+        itemStyle: {
+          color: '#fff',
+          borderColor: treeColor,
+          borderWidth: 3,
+          shadowBlur: 8,
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
+        },
+        lineStyle: {
+          width: 2.5,
+          color: treeColor,
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
+        },
+        label: {
+          fontWeight: 'bold',
+          backgroundColor: 'rgba(255,255,255,0.98)',
+          shadowBlur: 5,
+          shadowColor: 'rgba(0, 0, 0, 0.2)'
+        }
+      },
+      
+      // 标签样式
+      label: {
+        ...globalStyle.label,
+        position: 'right'
+      },
+      
+      // 节点样式
+      itemStyle: {
+        ...globalStyle.itemStyle,
+        borderColor: treeColor
+      },
+      
+      // 连线样式
+      lineStyle: {
+        ...globalStyle.lineStyle,
+        color: `rgba(${hexToRgb(treeColor)}, 0.6)`,
+        curveness: 0.1
+      },
+      
+      // 叶子节点样式
+      leaves: {
+        label: {
+          ...globalStyle.label,
+          position: 'right'
+        },
+        itemStyle: {
+          color: '#fff',
+          borderColor: treeColor,
+          borderWidth: 1.5,
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.15)'
+        }
+      }
+    });
+  }
+  
+  return {
+    backgroundColor: '#fff',
+    tooltip: tooltipConfig,
+    
+    // 为每棵树添加可选择的图例
+    legend: {
+      show: treeCount > 1,
+      top: '10px',
+      type: 'scroll',
+      data: data.map((_, i) => `树 ${i+1}`),
+      selected: data.reduce((acc, _, i) => {
+        acc[`树 ${i+1}`] = true;
+        return acc;
+      }, {}),
+      textStyle: {
+        color: colors.textPrimary
+      },
+      icon: 'circle'
+    },
+    
+    // 删除工具箱功能
+    
+    series: seriesArray
+  };
+}
+
+// 创建单棵树的图表配置
+function createSingleTreeOption(data, globalStyle, tooltipConfig) {
+  const treeColor = colors.primary;
+  
+  return {
+    backgroundColor: '#fff',
+    tooltip: tooltipConfig,
+    
+    // 删除工具箱功能
+    
+    series: [{
+      type: 'tree',
+      data: data,
+      top: '5%',
+      left: '10%',
+      bottom: '5%',
+      right: '20%',
+      symbolSize: globalStyle.symbolSize,
+      
+      // 布局设置
+      layout: 'orthogonal',
+      orient: 'LR',
+      initialTreeDepth: 2,
+      
+      // 交互相关配置
+      roam: true,
+      expandAndCollapse: true,
+      animationDuration: 550,
+      animationDurationUpdate: 750,
+      animationEasingUpdate: 'elasticOut',
+      edgeShape: 'polyline',
+      edgeForkPosition: '50%',
+      nodeGap: 35,
+      layerPadding: 150,
+      
+      // 高亮效果
+      emphasis: {
+        focus: 'descendant',
+        itemStyle: {
+          color: '#fff',
+          borderColor: treeColor,
+          borderWidth: 3,
+          shadowBlur: 8,
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
+        },
+        lineStyle: {
+          width: 2.5,
+          color: treeColor,
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.3)'
+        },
+        label: {
+          fontWeight: 'bold',
+          backgroundColor: 'rgba(255,255,255,0.98)',
+          shadowBlur: 5,
+          shadowColor: 'rgba(0, 0, 0, 0.2)'
+        }
+      },
+      
+      // 标签样式
+      label: globalStyle.label,
+      
+      // 节点样式
+      itemStyle: {
+        ...globalStyle.itemStyle,
+        borderColor: treeColor
+      },
+      
+      // 连线样式
+      lineStyle: {
+        ...globalStyle.lineStyle,
+        color: `rgba(${hexToRgb(treeColor)}, 0.6)`
+      },
+      
+      // 叶子节点样式
+      leaves: {
+        label: globalStyle.label,
+        itemStyle: {
+          color: '#fff',
+          borderColor: treeColor,
+          borderWidth: 1.5,
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.15)'
+        }
+      }
+    }]
+  };
+}
+
+// 根据索引生成不同的颜色
+const getTreeColor = (index) => {
+  const colorPalette = [
+    colors.primary,    // 蓝色
+    colors.secondary,  // 珊瑚红
+    colors.success,    // 绿色
+    colors.warning,    // 橙色
+    colors.danger,     // 红色
+    colors.info        // 浅蓝色
+  ];
+  
+  return colorPalette[index % colorPalette.length];
+};
+
+// 格式化标签
+const formatLabel = (params) => {
+  if (!params || !params.data) {
+    return '未知';
+  }
+  
+  const { name, executionTime, children } = params.data;
+  if (!name) {
+    return '未知函数';
+  }
+  
+  // 提取函数名（只保留最后一部分）
+  const funcName = name.split('.').pop() || name;
+  
+  // 截断过长的函数名
+  const maxLength = 20;
+  const displayName = funcName.length > maxLength 
+    ? funcName.substring(0, maxLength) + '...' 
+    : funcName;
+  
+  // 添加不同的标记，表示是否有子节点
+  const hasChildren = children && children.length > 0;
+  const icon = hasChildren ? '⊕' : '○'; // 使用简单字符，⊕表示可展开节点，○表示叶子节点
+  
+  // 使用富文本格式化
+  if (executionTime) {
+    return `{icon|${icon}} {title|${displayName}}\n{time|⏱ ${executionTime}}`;
+  }
+  
+  return `{icon|${icon}} {title|${displayName}}`;
+};
+
+// 辅助函数：将hex颜色转换为RGB
+function hexToRgb(hex) {
+  // 移除可能的#前缀
+  hex = hex.replace(/^#/, '');
+  
+  // 解析RGB颜色
+  let bigint = parseInt(hex, 16);
+  let r = (bigint >> 16) & 255;
+  let g = (bigint >> 8) & 255;
+  let b = bigint & 255;
+  
+  return `${r}, ${g}, ${b}`;
+}
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index fc735c2..a780381 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -177,6 +177,7 @@ const zh = {
       runtimeAnalysis: '运行时分析大盘',
       functionAnalysis: '函数查询分析'
     },
+
     projectPath: {
       currentProjectPath: '当前项目路径',
       changeProjectPath: '更换项目',
@@ -228,23 +229,26 @@ const zh = {
       prevPage: '上一页',
       nextPage: '下一页'
     },
-    functionAnalysis:{
-      title: '函数查询分析',
-      search: '查询',
-      inputFunctionName: '输入函数名称进行查询，支持模糊匹配',
-      caller: '调用者',
-      loading: '加载中...',
-      analyzing: '正在分析函数调用关系...',
-      noRelatedFunction: '未找到相关函数调用关系',
-      tryOtherFunctionName: '请尝试其他函数名称',
-      callRelationAnalysis: '调用关系分析',
-      export: '导出',
+    functionAnalysis: {
+      title: '函数调用分析',
+      inputFunctionName: '输入函数名称搜索',
+      search: '搜索',
+      searchToAnalyze: '搜索函数以开始分析',
+      pleaseInputFunction: '请输入函数名称',
       functionName: '函数名称',
       packagePath: '包路径',
-      callLevel: '调用层级',
       callCount: '调用次数',
       avgTime: '平均耗时',
-      operation: '操作'
+      maxTime: '最大耗时',
+      minTime: '最小耗时',
+      operations: '操作',
+      analyze: '分析',
+      callersList: '调用 {name} 的函数列表',
+      calleesList: '{name} 调用的函数列表',
+      noCallers: '未找到调用当前函数的记录',
+      noCallees: '当前函数未调用其他函数',
+      none: '无',
+      foundCount: '找到 {count} 个匹配函数'
     }
   }
 }
@@ -477,7 +481,7 @@ const en = {
       prevPage: 'Previous',
       nextPage: 'Next'
     },
-    functionAnalysis:{
+    functionAnalysis: {
       title: 'Function Analysis',
       search: 'Search',
       inputFunctionName: 'Input function name for query, supports fuzzy matching',
diff --git a/src/main.js b/src/main.js
index 01014d9..02c4935 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import { createApp, defineAsyncComponent } from 'vue'
 import App from './App.vue'
 import router from './router'
 import i18n from './i18n' // 引入i18n配置
@@ -23,6 +23,11 @@ cytoscape.use(popper);
 // 创建应用实例
 const app = createApp(App)
 
+// 注册全局组件
+app.component('tree-node', defineAsyncComponent(() => 
+  import('./components/runtime/components/TreeNode.vue')
+))
+
 // 使用插件
 app.use(router)
 app.use(i18n)
diff --git a/src/router/index.js b/src/router/index.js
index 4c0ccc8..ff2a070 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import TraceViewer from '../components/runtime/TraceViewer.vue';
-import TraceDetails from '../components/runtime/TraceDetails.vue';
+import TraceViewer from '../components/runtime/components/TraceViewer.vue';
+import TraceDetails from '../components/runtime/components/TraceDetails.vue';
 import StaticAnalysis from '../components/callgraph/StaticAnalysis.vue';
 import DbAnalysisDetail from '../components/callgraph/DbAnalysisDetail.vue';
 import WelcomePage from '../components/Welcome.vue';
-import RuntimeAnalysis from '../components/runtime/RuntimeAnalysis.vue';
-import FunctionAnalysis from '../components/runtime/FunctionAnalysis.vue';
+import RuntimeAnalysis from '../components/runtime/components/RuntimeAnalysis.vue';
+import FunctionAnalysis from '../components/runtime/components/FunctionAnalysis.vue';
 import SetLanguage from '../components/Language.vue';
 
 const routes = [
diff --git a/vue.config.js b/vue.config.js
index cfb395a..83208a9 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -11,7 +11,7 @@ module.exports = defineConfig({
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://175.178.49.104:8000',
+        target: 'http://10.86.32.70:8000',
         changeOrigin: true,
       },
     },