diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7ee9e75..e9a340f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.13.2",
+        "d3": "^7.9.0",
         "vue": "^3.5.24",
         "vue-router": "^4.6.3"
       },
@@ -998,12 +999,432 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1298,6 +1719,27 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1409,6 +1851,12 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==",
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.53.3",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.3.tgz",
@@ -1451,6 +1899,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 217cefe..a91638a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.13.2",
+    "d3": "^7.9.0",
     "vue": "^3.5.24",
     "vue-router": "^4.6.3"
   },
diff --git a/frontend/src/store/pendingUpload.js b/frontend/src/store/pendingUpload.js
new file mode 100644
index 0000000..958c3d0
--- /dev/null
+++ b/frontend/src/store/pendingUpload.js
@@ -0,0 +1,33 @@
+/**
+ * 临时存储待上传的文件和需求
+ * 用于首页点击启动引擎后立即跳转，在Process页面再进行API调用
+ */
+import { reactive } from 'vue'
+
+const state = reactive({
+  files: [],
+  simulationRequirement: '',
+  isPending: false
+})
+
+export function setPendingUpload(files, requirement) {
+  state.files = files
+  state.simulationRequirement = requirement
+  state.isPending = true
+}
+
+export function getPendingUpload() {
+  return {
+    files: state.files,
+    simulationRequirement: state.simulationRequirement,
+    isPending: state.isPending
+  }
+}
+
+export function clearPendingUpload() {
+  state.files = []
+  state.simulationRequirement = ''
+  state.isPending = false
+}
+
+export default state
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index ac75c64..05c3009 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -206,7 +206,6 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { generateOntology } from '../api/graph'
 
 const router = useRouter()
 
@@ -285,31 +284,20 @@ const scrollToBottom = () => {
   })
 }
 
-// 开始模拟
-const startSimulation = async () => {
+// 开始模拟 - 立即跳转，API调用在Process页面进行
+const startSimulation = () => {
   if (!canSubmit.value || loading.value) return
   
-  loading.value = true
-  try {
-    const formDataObj = new FormData()
-    files.value.forEach(file => {
-      formDataObj.append('files', file)
+  // 存储待上传的数据
+  import('../store/pendingUpload.js').then(({ setPendingUpload }) => {
+    setPendingUpload(files.value, formData.value.simulationRequirement)
+    
+    // 立即跳转到Process页面（使用特殊标识表示新建项目）
+    router.push({
+      name: 'Process',
+      params: { projectId: 'new' }
     })
-    formDataObj.append('simulation_requirement', formData.value.simulationRequirement)
-    
-    const response = await generateOntology(formDataObj)
-    
-    if (response.success) {
-      router.push({
-        name: 'Process',
-        params: { projectId: response.data.project_id }
-      })
-    }
-  } catch (err) {
-    console.error('Start simulation error:', err)
-  } finally {
-    loading.value = false
-  }
+  })
 }
 </script>
 
diff --git a/frontend/src/views/Process.vue b/frontend/src/views/Process.vue
index d73a777..4a9aa66 100644
--- a/frontend/src/views/Process.vue
+++ b/frontend/src/views/Process.vue
@@ -1,75 +1,269 @@
 <template>
-  <div class="process-container">
-    <!-- 左侧:实时图谱展示区 -->
-    <div class="left-panel">
-      <div class="panel-header">
-        <h2>实时图谱</h2>
+  <div class="process-page">
+    <!-- 顶部导航栏 -->
+    <nav class="navbar">
+      <div class="nav-brand" @click="goHome">MIROFISH</div>
+      <div class="nav-step">
+        <span class="step-badge">STEP 01</span>
+        <span class="step-name">图谱构建</span>
       </div>
-      <div class="graph-container">
-        <div v-if="loading" class="loading-state">
-          <div class="loading-spinner-large"></div>
-          <p>加载图谱中...</p>
-        </div>
-        <div v-else-if="error" class="error-state">
-          <p>{{ error }}</p>
-        </div>
-        <div v-else-if="graphData" class="graph-view">
-          <!-- 图谱可视化将在这里实现 -->
-          <div class="graph-placeholder">
-            <p>图谱节点数: {{ graphData.node_count }}</p>
-            <p>关系数: {{ graphData.edge_count }}</p>
+      <div class="nav-status">
+        <span class="status-dot" :class="statusClass"></span>
+        <span class="status-text">{{ statusText }}</span>
+      </div>
+    </nav>
+
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 左侧: 实时图谱展示 -->
+      <div class="left-panel">
+        <div class="panel-header">
+          <div class="header-left">
+            <span class="header-icon">◈</span>
+            <span class="header-title">实时知识图谱</span>
+          </div>
+          <div class="header-right" v-if="graphData">
+            <span class="stat-item">{{ graphData.node_count }} 节点</span>
+            <span class="stat-divider">|</span>
+            <span class="stat-item">{{ graphData.edge_count }} 关系</span>
           </div>
         </div>
-        <div v-else class="empty-state">
-          <p>暂无图谱数据</p>
+        
+        <div class="graph-container" ref="graphContainer">
+          <!-- 加载状态 -->
+          <div v-if="graphLoading" class="graph-loading">
+            <div class="loading-animation">
+              <div class="loading-ring"></div>
+              <div class="loading-ring"></div>
+              <div class="loading-ring"></div>
+            </div>
+            <p class="loading-text">图谱数据加载中...</p>
+          </div>
+          
+          <!-- 等待构建 -->
+          <div v-else-if="!graphData && currentPhase < 2" class="graph-waiting">
+            <div class="waiting-icon">
+              <svg viewBox="0 0 100 100" class="network-icon">
+                <circle cx="50" cy="20" r="8" fill="none" stroke="#000" stroke-width="1.5"/>
+                <circle cx="20" cy="60" r="8" fill="none" stroke="#000" stroke-width="1.5"/>
+                <circle cx="80" cy="60" r="8" fill="none" stroke="#000" stroke-width="1.5"/>
+                <circle cx="50" cy="80" r="8" fill="none" stroke="#000" stroke-width="1.5"/>
+                <line x1="50" y1="28" x2="25" y2="54" stroke="#000" stroke-width="1"/>
+                <line x1="50" y1="28" x2="75" y2="54" stroke="#000" stroke-width="1"/>
+                <line x1="28" y1="60" x2="72" y2="60" stroke="#000" stroke-width="1" stroke-dasharray="4"/>
+                <line x1="50" y1="72" x2="26" y2="66" stroke="#000" stroke-width="1"/>
+                <line x1="50" y1="72" x2="74" y2="66" stroke="#000" stroke-width="1"/>
+              </svg>
+            </div>
+            <p class="waiting-text">等待图谱构建完成</p>
+            <p class="waiting-hint">完成本体生成后将自动开始构建</p>
+          </div>
+          
+          <!-- 图谱可视化 -->
+          <div v-else-if="graphData" class="graph-view">
+            <svg ref="graphSvg" class="graph-svg"></svg>
+          </div>
+          
+          <!-- 错误状态 -->
+          <div v-else-if="error" class="graph-error">
+            <span class="error-icon">⚠</span>
+            <p>{{ error }}</p>
+          </div>
+        </div>
+        
+        <!-- 图谱图例 -->
+        <div v-if="graphData" class="graph-legend">
+          <div class="legend-item" v-for="type in entityTypes" :key="type.name">
+            <span class="legend-dot" :style="{ background: type.color }"></span>
+            <span class="legend-label">{{ type.name }}</span>
+            <span class="legend-count">{{ type.count }}</span>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- 右侧:流程展示区 -->
-    <div class="right-panel">
-      <div class="panel-header">
-        <h2>Step 1 - 现实种子构建</h2>
-      </div>
-      <div class="process-content">
-        <!-- 流程步骤 -->
-        <div class="steps">
-          <div
-            v-for="(step, index) in steps"
-            :key="index"
-            class="step-item"
-            :class="{
-              'active': currentStep === index,
-              'completed': currentStep > index
-            }"
-          >
-            <div class="step-indicator">
-              <div class="step-number">{{ index + 1 }}</div>
+      <!-- 右侧: 构建流程详情 -->
+      <div class="right-panel">
+        <div class="panel-header">
+          <span class="header-icon">▣</span>
+          <span class="header-title">构建流程</span>
+        </div>
+
+        <div class="process-content">
+          <!-- 阶段1: 本体生成 -->
+          <div class="process-phase" :class="{ 'active': currentPhase === 0, 'completed': currentPhase > 0 }">
+            <div class="phase-header">
+              <span class="phase-num">01</span>
+              <div class="phase-info">
+                <div class="phase-title">本体生成</div>
+                <div class="phase-api">/api/graph/ontology/generate</div>
+              </div>
+              <span class="phase-status" :class="getPhaseStatusClass(0)">
+                {{ getPhaseStatusText(0) }}
+              </span>
             </div>
-            <div class="step-content">
-              <h3>{{ step.title }}</h3>
-              <p>{{ step.description }}</p>
-              <div v-if="step.status" class="step-status">
-                {{ step.status }}
+            
+            <div class="phase-detail">
+              <div class="detail-section">
+                <div class="detail-label">接口说明</div>
+                <div class="detail-content">
+                  上传文档后，LLM分析文档内容，自动生成适合舆论模拟的本体结构（实体类型 + 关系类型）
+                </div>
+              </div>
+              
+              <!-- 本体生成进度 -->
+              <div class="detail-section" v-if="ontologyProgress && currentPhase === 0">
+                <div class="detail-label">生成进度</div>
+                <div class="ontology-progress">
+                  <div class="progress-spinner"></div>
+                  <span class="progress-text">{{ ontologyProgress.message }}</span>
+                </div>
+              </div>
+              
+              <!-- 已生成的本体信息 -->
+              <div class="detail-section" v-if="projectData?.ontology">
+                <div class="detail-label">生成的实体类型 ({{ projectData.ontology.entity_types?.length || 0 }})</div>
+                <div class="entity-tags">
+                  <span 
+                    v-for="entity in projectData.ontology.entity_types" 
+                    :key="entity.name"
+                    class="entity-tag"
+                  >
+                    {{ entity.name }}
+                  </span>
+                </div>
+              </div>
+              
+              <div class="detail-section" v-if="projectData?.ontology">
+                <div class="detail-label">生成的关系类型 ({{ projectData.ontology.relation_types?.length || 0 }})</div>
+                <div class="relation-list">
+                  <div 
+                    v-for="(rel, idx) in projectData.ontology.relation_types?.slice(0, 5) || []" 
+                    :key="idx"
+                    class="relation-item"
+                  >
+                    <span class="rel-source">{{ rel.source_type }}</span>
+                    <span class="rel-arrow">→</span>
+                    <span class="rel-name">{{ rel.name }}</span>
+                    <span class="rel-arrow">→</span>
+                    <span class="rel-target">{{ rel.target_type }}</span>
+                  </div>
+                  <div v-if="(projectData.ontology.relation_types?.length || 0) > 5" class="relation-more">
+                    +{{ projectData.ontology.relation_types.length - 5 }} 更多关系...
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 等待状态 -->
+              <div class="detail-section waiting-state" v-if="!projectData?.ontology && currentPhase === 0 && !ontologyProgress">
+                <div class="waiting-hint">等待本体生成...</div>
               </div>
             </div>
           </div>
+
+          <!-- 阶段2: 图谱构建 -->
+          <div class="process-phase" :class="{ 'active': currentPhase === 1, 'completed': currentPhase > 1 }">
+            <div class="phase-header">
+              <span class="phase-num">02</span>
+              <div class="phase-info">
+                <div class="phase-title">图谱构建</div>
+                <div class="phase-api">/api/graph/build</div>
+              </div>
+              <span class="phase-status" :class="getPhaseStatusClass(1)">
+                {{ getPhaseStatusText(1) }}
+              </span>
+            </div>
+            
+            <div class="phase-detail">
+              <div class="detail-section">
+                <div class="detail-label">接口说明</div>
+                <div class="detail-content">
+                  基于生成的本体，将文档分块后调用 Zep API 构建知识图谱，提取实体和关系
+                </div>
+              </div>
+              
+              <!-- 等待本体完成 -->
+              <div class="detail-section waiting-state" v-if="currentPhase < 1">
+                <div class="waiting-hint">等待本体生成完成...</div>
+              </div>
+              
+              <!-- 构建进度 -->
+              <div class="detail-section" v-if="buildProgress && currentPhase >= 1">
+                <div class="detail-label">构建进度</div>
+                <div class="progress-bar">
+                  <div class="progress-fill" :style="{ width: buildProgress.progress + '%' }"></div>
+                </div>
+                <div class="progress-info">
+                  <span class="progress-message">{{ buildProgress.message }}</span>
+                  <span class="progress-percent">{{ buildProgress.progress }}%</span>
+                </div>
+              </div>
+              
+              <div class="detail-section" v-if="graphData">
+                <div class="detail-label">构建结果</div>
+                <div class="build-result">
+                  <div class="result-item">
+                    <span class="result-value">{{ graphData.node_count }}</span>
+                    <span class="result-label">实体节点</span>
+                  </div>
+                  <div class="result-item">
+                    <span class="result-value">{{ graphData.edge_count }}</span>
+                    <span class="result-label">关系边</span>
+                  </div>
+                  <div class="result-item">
+                    <span class="result-value">{{ entityTypes.length }}</span>
+                    <span class="result-label">实体类型</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 阶段3: 完成 -->
+          <div class="process-phase" :class="{ 'active': currentPhase === 2, 'completed': currentPhase > 2 }">
+            <div class="phase-header">
+              <span class="phase-num">03</span>
+              <div class="phase-info">
+                <div class="phase-title">构建完成</div>
+                <div class="phase-api">准备进入下一步骤</div>
+              </div>
+              <span class="phase-status" :class="getPhaseStatusClass(2)">
+                {{ getPhaseStatusText(2) }}
+              </span>
+            </div>
+          </div>
+
+          <!-- 下一步按钮 -->
+          <div class="next-step-section" v-if="currentPhase >= 2">
+            <button class="next-step-btn" @click="goToNextStep" :disabled="currentPhase < 2">
+              进入环境搭建
+              <span class="btn-arrow">→</span>
+            </button>
+          </div>
         </div>
 
-        <!-- 项目信息 -->
-        <div v-if="projectData" class="project-info">
-          <h3>项目信息</h3>
-          <div class="info-item">
-            <span class="label">项目名称:</span>
-            <span class="value">{{ projectData.name }}</span>
+        <!-- 项目信息面板 -->
+        <div class="project-panel">
+          <div class="project-header">
+            <span class="project-icon">◇</span>
+            <span class="project-title">项目信息</span>
           </div>
-          <div class="info-item">
-            <span class="label">项目ID:</span>
-            <span class="value">{{ projectData.project_id }}</span>
-          </div>
-          <div class="info-item">
-            <span class="label">状态:</span>
-            <span class="value">{{ projectData.status }}</span>
+          <div class="project-details" v-if="projectData">
+            <div class="project-item">
+              <span class="item-label">项目名称</span>
+              <span class="item-value">{{ projectData.name }}</span>
+            </div>
+            <div class="project-item">
+              <span class="item-label">项目ID</span>
+              <span class="item-value code">{{ projectData.project_id }}</span>
+            </div>
+            <div class="project-item" v-if="projectData.graph_id">
+              <span class="item-label">图谱ID</span>
+              <span class="item-value code">{{ projectData.graph_id }}</span>
+            </div>
+            <div class="project-item">
+              <span class="item-label">模拟需求</span>
+              <span class="item-value">{{ projectData.simulation_requirement || '-' }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -78,71 +272,190 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
+import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
+import * as d3 from 'd3'
 
 const route = useRoute()
-const projectId = route.params.projectId
+const router = useRouter()
+
+// 当前项目ID（可能从'new'变为实际ID）
+const currentProjectId = ref(route.params.projectId)
 
 // 状态
 const loading = ref(true)
+const graphLoading = ref(false)
 const error = ref('')
 const projectData = ref(null)
 const graphData = ref(null)
-const currentStep = ref(0)
+const buildProgress = ref(null)
+const ontologyProgress = ref(null) // 本体生成进度
+const currentPhase = ref(-1) // -1: 上传中, 0: 本体生成中, 1: 图谱构建, 2: 完成
 
-// 流程步骤
-const steps = ref([
-  {
-    title: '文档分析',
-    description: '正在分析上传的文档内容',
-    status: ''
-  },
-  {
-    title: '本体生成',
-    description: '使用LLM生成知识图谱本体',
-    status: ''
-  },
-  {
-    title: '图谱构建',
-    description: '基于本体构建知识图谱',
-    status: ''
-  },
-  {
-    title: '完成',
-    description: '现实种子构建完成',
-    status: ''
-  }
-])
+// DOM引用
+const graphContainer = ref(null)
+const graphSvg = ref(null)
 
 // 轮询定时器
 let pollTimer = null
 
-// 加载项目数据
-const loadProject = async () => {
+// 计算属性
+const statusClass = computed(() => {
+  if (error.value) return 'error'
+  if (currentPhase.value >= 2) return 'completed'
+  return 'processing'
+})
+
+const statusText = computed(() => {
+  if (error.value) return '构建失败'
+  if (currentPhase.value >= 2) return '构建完成'
+  if (currentPhase.value === 1) return '图谱构建中'
+  if (currentPhase.value === 0) return '本体生成中'
+  return '初始化中'
+})
+
+const entityTypes = computed(() => {
+  if (!graphData.value?.nodes) return []
+  
+  const typeMap = {}
+  const colors = ['#FF6B35', '#004E89', '#7B2D8E', '#1A936F', '#C5283D', '#E9724C']
+  
+  graphData.value.nodes.forEach(node => {
+    const type = node.labels?.find(l => l !== 'Entity') || 'Entity'
+    if (!typeMap[type]) {
+      typeMap[type] = { name: type, count: 0, color: colors[Object.keys(typeMap).length % colors.length] }
+    }
+    typeMap[type].count++
+  })
+  
+  return Object.values(typeMap)
+})
+
+// 方法
+const goHome = () => {
+  router.push('/')
+}
+
+const goToNextStep = () => {
+  // TODO: 进入环境搭建步骤
+  alert('环境搭建功能开发中...')
+}
+
+const getPhaseStatusClass = (phase) => {
+  if (currentPhase.value > phase) return 'completed'
+  if (currentPhase.value === phase) return 'active'
+  return 'pending'
+}
+
+const getPhaseStatusText = (phase) => {
+  if (currentPhase.value > phase) return '已完成'
+  if (currentPhase.value === phase) {
+    if (phase === 1 && buildProgress.value) {
+      return `${buildProgress.value.progress}%`
+    }
+    return '进行中'
+  }
+  return '等待中'
+}
+
+// 初始化 - 处理新建项目或加载已有项目
+const initProject = async () => {
+  const paramProjectId = route.params.projectId
+  
+  if (paramProjectId === 'new') {
+    // 新建项目：从 store 获取待上传的数据
+    await handleNewProject()
+  } else {
+    // 加载已有项目
+    currentProjectId.value = paramProjectId
+    await loadProject()
+  }
+}
+
+// 处理新建项目 - 调用 ontology/generate API
+const handleNewProject = async () => {
+  const pending = getPendingUpload()
+  
+  if (!pending.isPending || pending.files.length === 0) {
+    error.value = '没有待上传的文件，请返回首页重新操作'
+    loading.value = false
+    return
+  }
+  
   try {
-    const response = await getProject(projectId)
+    loading.value = true
+    currentPhase.value = 0 // 本体生成阶段
+    ontologyProgress.value = { message: '正在上传文件并分析文档...' }
+    
+    // 构建 FormData
+    const formDataObj = new FormData()
+    pending.files.forEach(file => {
+      formDataObj.append('files', file)
+    })
+    formDataObj.append('simulation_requirement', pending.simulationRequirement)
+    
+    // 调用本体生成 API
+    const response = await generateOntology(formDataObj)
+    
     if (response.success) {
+      // 清除待上传数据
+      clearPendingUpload()
+      
+      // 更新项目ID和数据
+      currentProjectId.value = response.data.project_id
       projectData.value = response.data
       
-      // 根据项目状态更新步骤
-      updateStepsByProjectStatus(response.data.status)
+      // 更新URL（不刷新页面）
+      router.replace({
+        name: 'Process',
+        params: { projectId: response.data.project_id }
+      })
       
-      // 如果本体已生成,自动开始构建图谱
+      ontologyProgress.value = null
+      
+      // 自动开始图谱构建
+      await startBuildGraph()
+    } else {
+      error.value = response.error || '本体生成失败'
+    }
+  } catch (err) {
+    console.error('Handle new project error:', err)
+    error.value = '项目初始化失败: ' + (err.message || '未知错误')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 加载已有项目数据
+const loadProject = async () => {
+  try {
+    loading.value = true
+    const response = await getProject(currentProjectId.value)
+    
+    if (response.success) {
+      projectData.value = response.data
+      updatePhaseByStatus(response.data.status)
+      
+      // 自动开始图谱构建
       if (response.data.status === 'ontology_generated' && !response.data.graph_id) {
         await startBuildGraph()
       }
       
-      // 如果图谱正在构建,开始轮询任务状态
+      // 继续轮询构建中的任务
       if (response.data.status === 'graph_building' && response.data.graph_build_task_id) {
+        currentPhase.value = 1
         startPollingTask(response.data.graph_build_task_id)
       }
       
-      // 如果图谱已完成,加载图谱数据
+      // 加载已完成的图谱
       if (response.data.status === 'graph_completed' && response.data.graph_id) {
-        await loadGraphData(response.data.graph_id)
+        currentPhase.value = 2
+        await loadGraph(response.data.graph_id)
       }
+    } else {
+      error.value = response.error || '加载项目失败'
     }
   } catch (err) {
     console.error('Load project error:', err)
@@ -152,33 +465,20 @@ const loadProject = async () => {
   }
 }
 
-// 根据项目状态更新步骤
-const updateStepsByProjectStatus = (status) => {
+const updatePhaseByStatus = (status) => {
   switch (status) {
     case 'created':
-      currentStep.value = 0
-      steps.value[0].status = '进行中...'
-      break
     case 'ontology_generated':
-      currentStep.value = 1
-      steps.value[0].status = '已完成'
-      steps.value[1].status = '已完成'
+      currentPhase.value = 0
       break
     case 'graph_building':
-      currentStep.value = 2
-      steps.value[0].status = '已完成'
-      steps.value[1].status = '已完成'
-      steps.value[2].status = '进行中...'
+      currentPhase.value = 1
       break
     case 'graph_completed':
-      currentStep.value = 3
-      steps.value[0].status = '已完成'
-      steps.value[1].status = '已完成'
-      steps.value[2].status = '已完成'
-      steps.value[3].status = '已完成'
+      currentPhase.value = 2
       break
     case 'failed':
-      error.value = projectData.value?.error || '项目处理失败'
+      error.value = projectData.value?.error || '处理失败'
       break
   }
 }
@@ -186,52 +486,81 @@ const updateStepsByProjectStatus = (status) => {
 // 开始构建图谱
 const startBuildGraph = async () => {
   try {
-    const response = await buildGraph({
-      project_id: projectId
-    })
+    currentPhase.value = 1
+    // 设置初始进度
+    buildProgress.value = {
+      progress: 0,
+      message: '正在启动图谱构建...'
+    }
+    
+    const response = await buildGraph({ project_id: currentProjectId.value })
     
     if (response.success) {
-      const taskId = response.data.task_id
-      startPollingTask(taskId)
+      buildProgress.value.message = '图谱构建任务已启动...'
+      startPollingTask(response.data.task_id)
+    } else {
+      error.value = response.error || '启动图谱构建失败'
+      buildProgress.value = null
     }
   } catch (err) {
     console.error('Build graph error:', err)
     error.value = '启动图谱构建失败: ' + (err.message || '未知错误')
+    buildProgress.value = null
   }
 }
 
-// 开始轮询任务状态
+// 轮询任务状态
 const startPollingTask = (taskId) => {
-  pollTimer = setInterval(async () => {
-    try {
-      const response = await getTaskStatus(taskId)
-      if (response.success) {
-        const task = response.data
-        
-        // 更新步骤状态
-        if (task.status === 'processing') {
-          steps.value[2].status = `${task.message} (${task.progress}%)`
-        } else if (task.status === 'completed') {
-          steps.value[2].status = '已完成'
-          currentStep.value = 3
-          
-          // 停止轮询
-          stopPolling()
-          
-          // 重新加载项目数据
-          await loadProject()
-        } else if (task.status === 'failed') {
-          error.value = '图谱构建失败: ' + (task.error || '未知错误')
-          stopPolling()
-        }
-      }
-    } catch (err) {
-      console.error('Poll task status error:', err)
-    }
-  }, 2000) // 每2秒轮询一次
+  // 立即执行一次查询
+  pollTaskStatus(taskId)
+  
+  // 然后定时轮询
+  pollTimer = setInterval(() => {
+    pollTaskStatus(taskId)
+  }, 2000)
+}
+
+// 查询任务状态
+const pollTaskStatus = async (taskId) => {
+  try {
+    const response = await getTaskStatus(taskId)
+    
+    if (response.success) {
+      const task = response.data
+      
+      // 更新进度显示
+      buildProgress.value = {
+        progress: task.progress || 0,
+        message: task.message || '处理中...'
+      }
+      
+      console.log('Task status:', task.status, 'Progress:', task.progress)
+      
+      if (task.status === 'completed') {
+        stopPolling()
+        currentPhase.value = 2
+        
+        // 重新加载项目数据获取 graph_id
+        const projectResponse = await getProject(currentProjectId.value)
+        if (projectResponse.success) {
+          projectData.value = projectResponse.data
+          
+          // 加载图谱数据
+          if (projectResponse.data.graph_id) {
+            await loadGraph(projectResponse.data.graph_id)
+          }
+        }
+      } else if (task.status === 'failed') {
+        stopPolling()
+        error.value = '图谱构建失败: ' + (task.error || '未知错误')
+        buildProgress.value = null
+      }
+    }
+  } catch (err) {
+    console.error('Poll task error:', err)
+  }
 }
 
-// 停止轮询
 const stopPolling = () => {
   if (pollTimer) {
     clearInterval(pollTimer)
@@ -240,20 +569,134 @@ const stopPolling = () => {
 }
 
 // 加载图谱数据
-const loadGraphData = async (graphId) => {
+const loadGraph = async (graphId) => {
   try {
+    graphLoading.value = true
     const response = await getGraphData(graphId)
+    
     if (response.success) {
       graphData.value = response.data
+      await nextTick()
+      renderGraph()
     }
   } catch (err) {
-    console.error('Load graph data error:', err)
+    console.error('Load graph error:', err)
+  } finally {
+    graphLoading.value = false
   }
 }
 
+// 渲染图谱 (D3.js)
+const renderGraph = () => {
+  if (!graphSvg.value || !graphData.value) return
+  
+  const container = graphContainer.value
+  const width = container.clientWidth
+  const height = container.clientHeight - 60
+  
+  const svg = d3.select(graphSvg.value)
+    .attr('width', width)
+    .attr('height', height)
+  
+  svg.selectAll('*').remove()
+  
+  const nodes = graphData.value.nodes.map(n => ({
+    id: n.uuid,
+    name: n.name,
+    type: n.labels?.find(l => l !== 'Entity') || 'Entity'
+  }))
+  
+  const edges = graphData.value.edges.map(e => ({
+    source: e.source_node_uuid,
+    target: e.target_node_uuid,
+    type: e.fact_type || 'RELATED_TO'
+  }))
+  
+  // 颜色映射
+  const colorScale = d3.scaleOrdinal()
+    .domain([...new Set(nodes.map(n => n.type))])
+    .range(['#FF6B35', '#004E89', '#7B2D8E', '#1A936F', '#C5283D', '#E9724C'])
+  
+  // 力导向布局
+  const simulation = d3.forceSimulation(nodes)
+    .force('link', d3.forceLink(edges).id(d => d.id).distance(80))
+    .force('charge', d3.forceManyBody().strength(-200))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide().radius(30))
+  
+  // 绘制边
+  const link = svg.append('g')
+    .attr('class', 'links')
+    .selectAll('line')
+    .data(edges)
+    .enter()
+    .append('line')
+    .attr('stroke', '#ddd')
+    .attr('stroke-width', 1)
+  
+  // 绘制节点
+  const node = svg.append('g')
+    .attr('class', 'nodes')
+    .selectAll('g')
+    .data(nodes)
+    .enter()
+    .append('g')
+    .call(d3.drag()
+      .on('start', dragstarted)
+      .on('drag', dragged)
+      .on('end', dragended))
+  
+  node.append('circle')
+    .attr('r', 8)
+    .attr('fill', d => colorScale(d.type))
+    .attr('stroke', '#fff')
+    .attr('stroke-width', 2)
+  
+  node.append('text')
+    .attr('dx', 12)
+    .attr('dy', 4)
+    .text(d => d.name?.substring(0, 10) || '')
+    .attr('font-size', '10px')
+    .attr('fill', '#333')
+  
+  simulation.on('tick', () => {
+    link
+      .attr('x1', d => d.source.x)
+      .attr('y1', d => d.source.y)
+      .attr('x2', d => d.target.x)
+      .attr('y2', d => d.target.y)
+    
+    node.attr('transform', d => `translate(${d.x},${d.y})`)
+  })
+  
+  function dragstarted(event) {
+    if (!event.active) simulation.alphaTarget(0.3).restart()
+    event.subject.fx = event.subject.x
+    event.subject.fy = event.subject.y
+  }
+  
+  function dragged(event) {
+    event.subject.fx = event.x
+    event.subject.fy = event.y
+  }
+  
+  function dragended(event) {
+    if (!event.active) simulation.alphaTarget(0)
+    event.subject.fx = null
+    event.subject.fy = null
+  }
+}
+
+// 监听图谱数据变化
+watch(graphData, () => {
+  if (graphData.value) {
+    nextTick(() => renderGraph())
+  }
+})
+
 // 生命周期
 onMounted(() => {
-  loadProject()
+  initProject()
 })
 
 onUnmounted(() => {
@@ -262,186 +705,674 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.process-container {
+/* 变量 */
+:root {
+  --black: #000000;
+  --white: #FFFFFF;
+  --orange: #FF6B35;
+  --gray-light: #F5F5F5;
+  --gray-border: #E0E0E0;
+  --gray-text: #666666;
+}
+
+.process-page {
+  min-height: 100vh;
+  background: var(--white);
+  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
+}
+
+/* 导航栏 */
+.navbar {
   display: flex;
-  height: 100vh;
-  background-color: #ffffff;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 40px;
+  height: 60px;
+  background: #000;
+  color: #fff;
+}
+
+.nav-brand {
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.15em;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.nav-brand:hover {
+  opacity: 0.8;
+}
+
+.nav-step {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.step-badge {
+  background: #FF6B35;
+  color: #fff;
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+}
+
+.step-name {
+  font-size: 0.9rem;
+  letter-spacing: 0.05em;
+}
+
+.nav-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #666;
+}
+
+.status-dot.processing {
+  background: #FF6B35;
+  animation: pulse 1.5s infinite;
+}
+
+.status-dot.completed {
+  background: #1A936F;
+}
+
+.status-dot.error {
+  background: #C5283D;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.status-text {
+  font-size: 0.85rem;
+  color: #999;
+}
+
+/* 主内容区 */
+.main-content {
+  display: flex;
+  height: calc(100vh - 60px);
 }
 
 /* 左侧面板 */
 .left-panel {
   flex: 1;
-  border-right: 1px solid #000000;
   display: flex;
   flex-direction: column;
+  border-right: 1px solid #E0E0E0;
 }
 
-/* 右侧面板 */
-.right-panel {
-  width: 400px;
-  display: flex;
-  flex-direction: column;
-}
-
-/* 面板标题 */
 .panel-header {
-  padding: 1.5rem;
-  border-bottom: 1px solid #000000;
-  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid #E0E0E0;
+  background: #FAFAFA;
 }
 
-.panel-header h2 {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: 500;
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header-icon {
+  font-size: 1rem;
+  color: #FF6B35;
+}
+
+.header-title {
+  font-size: 0.9rem;
+  font-weight: 600;
   letter-spacing: 0.05em;
 }
 
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.8rem;
+  color: #666;
+}
+
+.stat-divider {
+  color: #ddd;
+}
+
 /* 图谱容器 */
 .graph-container {
   flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
+  position: relative;
+  overflow: hidden;
 }
 
-.loading-state,
-.error-state,
-.empty-state {
+.graph-loading,
+.graph-waiting,
+.graph-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   text-align: center;
 }
 
-.loading-spinner-large {
-  width: 48px;
-  height: 48px;
-  border: 3px solid #000000;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
+.loading-animation {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
 }
 
-@keyframes spin {
+.loading-ring {
+  position: absolute;
+  border: 2px solid transparent;
+  border-radius: 50%;
+  animation: ring-rotate 1.5s linear infinite;
+}
+
+.loading-ring:nth-child(1) {
+  width: 80px;
+  height: 80px;
+  border-top-color: #000;
+}
+
+.loading-ring:nth-child(2) {
+  width: 60px;
+  height: 60px;
+  top: 10px;
+  left: 10px;
+  border-right-color: #FF6B35;
+  animation-delay: 0.2s;
+}
+
+.loading-ring:nth-child(3) {
+  width: 40px;
+  height: 40px;
+  top: 20px;
+  left: 20px;
+  border-bottom-color: #666;
+  animation-delay: 0.4s;
+}
+
+@keyframes ring-rotate {
   to { transform: rotate(360deg); }
 }
 
-.graph-placeholder {
-  text-align: center;
-  padding: 2rem;
-  border: 1px solid #000000;
+.loading-text,
+.waiting-text {
+  font-size: 0.9rem;
+  color: #333;
+  margin: 0 0 8px;
+}
+
+.waiting-hint {
+  font-size: 0.8rem;
+  color: #999;
+  margin: 0;
+}
+
+.waiting-icon {
+  margin-bottom: 20px;
+}
+
+.network-icon {
+  width: 100px;
+  height: 100px;
+  opacity: 0.6;
+}
+
+.graph-view {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.error-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 10px;
+}
+
+/* 图谱图例 */
+.graph-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding: 12px 24px;
+  border-top: 1px solid #E0E0E0;
+  background: #FAFAFA;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-label {
+  color: #333;
+}
+
+.legend-count {
+  color: #999;
+}
+
+/* 右侧面板 */
+.right-panel {
+  width: 480px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.right-panel .panel-header {
+  background: #000;
+  color: #fff;
+  border-bottom: none;
+}
+
+.right-panel .header-icon {
+  color: #FF6B35;
 }
 
 /* 流程内容 */
 .process-content {
   flex: 1;
   overflow-y: auto;
-  padding: 2rem;
+  padding: 24px;
 }
 
-/* 步骤列表 */
-.steps {
-  margin-bottom: 2rem;
-}
-
-.step-item {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  opacity: 0.4;
-  transition: opacity 0.3s;
-}
-
-.step-item.active,
-.step-item.completed {
-  opacity: 1;
-}
-
-.step-indicator {
-  flex-shrink: 0;
-}
-
-.step-number {
-  width: 36px;
-  height: 36px;
-  border: 2px solid #000000;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  background-color: #ffffff;
+/* 流程阶段 */
+.process-phase {
+  margin-bottom: 24px;
+  border: 1px solid #E0E0E0;
+  opacity: 0.5;
   transition: all 0.3s;
 }
 
-.step-item.active .step-number {
-  background-color: #000000;
-  color: #ffffff;
+.process-phase.active,
+.process-phase.completed {
+  opacity: 1;
 }
 
-.step-item.completed .step-number {
-  background-color: #000000;
-  color: #ffffff;
+.process-phase.active {
+  border-color: #FF6B35;
 }
 
-.step-content h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1rem;
-  font-weight: 500;
+.process-phase.completed {
+  border-color: #1A936F;
 }
 
-.step-content p {
-  margin: 0;
-  font-size: 0.9rem;
-  color: #666666;
-}
-
-.step-status {
-  margin-top: 0.5rem;
-  font-size: 0.85rem;
-  color: #000000;
-  font-weight: 500;
-}
-
-/* 项目信息 */
-.project-info {
-  margin-top: 2rem;
-  padding: 1.5rem;
-  border: 1px solid #000000;
-}
-
-.project-info h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.info-item {
+.phase-header {
   display: flex;
-  margin-bottom: 0.75rem;
-  font-size: 0.9rem;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px;
+  background: #FAFAFA;
+  border-bottom: 1px solid #E0E0E0;
 }
 
-.info-item .label {
+.process-phase.active .phase-header {
+  background: #FFF5F2;
+}
+
+.process-phase.completed .phase-header {
+  background: #F2FAF6;
+}
+
+.phase-num {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #ddd;
+  line-height: 1;
+}
+
+.process-phase.active .phase-num {
+  color: #FF6B35;
+}
+
+.process-phase.completed .phase-num {
+  color: #1A936F;
+}
+
+.phase-info {
+  flex: 1;
+}
+
+.phase-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.phase-api {
+  font-size: 0.75rem;
+  color: #999;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.phase-status {
+  font-size: 0.75rem;
+  padding: 4px 10px;
+  background: #eee;
+  color: #666;
+}
+
+.phase-status.active {
+  background: #FF6B35;
+  color: #fff;
+}
+
+.phase-status.completed {
+  background: #1A936F;
+  color: #fff;
+}
+
+/* 阶段详情 */
+.phase-detail {
+  padding: 16px;
+}
+
+.detail-section {
+  margin-bottom: 16px;
+}
+
+.detail-section:last-child {
+  margin-bottom: 0;
+}
+
+.detail-label {
+  font-size: 0.75rem;
+  color: #999;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.detail-content {
+  font-size: 0.85rem;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* 实体标签 */
+.entity-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.entity-tag {
+  font-size: 0.75rem;
+  padding: 4px 10px;
+  background: #F5F5F5;
+  border: 1px solid #E0E0E0;
+  color: #333;
+}
+
+/* 关系列表 */
+.relation-list {
+  font-size: 0.8rem;
+}
+
+.relation-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px dashed #eee;
+}
+
+.relation-item:last-child {
+  border-bottom: none;
+}
+
+.rel-source,
+.rel-target {
+  color: #333;
+}
+
+.rel-arrow {
+  color: #ccc;
+}
+
+.rel-name {
+  color: #FF6B35;
   font-weight: 500;
-  margin-right: 0.5rem;
-  min-width: 80px;
 }
 
-.info-item .value {
-  color: #666666;
+.relation-more {
+  padding-top: 8px;
+  color: #999;
+  font-size: 0.75rem;
+}
+
+/* 本体生成进度 */
+.ontology-progress {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #FFF5F2;
+  border: 1px solid #FFE0D6;
+}
+
+.progress-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #FFE0D6;
+  border-top-color: #FF6B35;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.progress-text {
+  font-size: 0.85rem;
+  color: #333;
+}
+
+/* 等待状态 */
+.waiting-state {
+  padding: 16px;
+  background: #F9F9F9;
+  border: 1px dashed #E0E0E0;
+  text-align: center;
+}
+
+.waiting-hint {
+  font-size: 0.85rem;
+  color: #999;
+}
+
+/* 进度条 */
+.progress-bar {
+  height: 6px;
+  background: #E0E0E0;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #FF6B35;
+  transition: width 0.3s;
+}
+
+.progress-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+}
+
+.progress-message {
+  color: #666;
+}
+
+.progress-percent {
+  color: #FF6B35;
+  font-weight: 600;
+}
+
+/* 构建结果 */
+.build-result {
+  display: flex;
+  gap: 16px;
+}
+
+.result-item {
+  flex: 1;
+  text-align: center;
+  padding: 12px;
+  background: #F5F5F5;
+}
+
+.result-value {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #000;
+  margin-bottom: 4px;
+}
+
+.result-label {
+  font-size: 0.7rem;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* 下一步按钮 */
+.next-step-section {
+  margin-top: 24px;
+  padding-top: 24px;
+  border-top: 1px solid #E0E0E0;
+}
+
+.next-step-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 16px;
+  background: #000;
+  color: #fff;
+  border: none;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.next-step-btn:hover:not(:disabled) {
+  background: #FF6B35;
+}
+
+.next-step-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.btn-arrow {
+  font-size: 1.2rem;
+}
+
+/* 项目信息面板 */
+.project-panel {
+  border-top: 1px solid #E0E0E0;
+  background: #FAFAFA;
+}
+
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 24px;
+  border-bottom: 1px solid #E0E0E0;
+}
+
+.project-icon {
+  color: #FF6B35;
+}
+
+.project-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.project-details {
+  padding: 16px 24px;
+}
+
+.project-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 8px 0;
+  border-bottom: 1px dashed #E0E0E0;
+  font-size: 0.8rem;
+}
+
+.project-item:last-child {
+  border-bottom: none;
+}
+
+.item-label {
+  color: #999;
+  flex-shrink: 0;
+}
+
+.item-value {
+  color: #333;
+  text-align: right;
+  max-width: 60%;
   word-break: break-all;
 }
 
-/* 响应式设计 */
+.item-value.code {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.75rem;
+  color: #666;
+}
+
+/* 响应式 */
 @media (max-width: 1024px) {
-  .process-container {
+  .main-content {
     flex-direction: column;
   }
   
   .left-panel {
     border-right: none;
-    border-bottom: 1px solid #000000;
+    border-bottom: 1px solid #E0E0E0;
     height: 50vh;
   }