Merge branch 'master' of http://172.16.20.1:3000/changyunju/SocialNetworks

package-lock.json

@@ -8,9 +8,10 @@
       "name": "vite-project",
       "version": "0.0.0",
       "dependencies": {
-        "@antv/g6": "^4.8.24",
+        "@antv/g6": "^4.8.25",
         "@iconify/vue": "^5.0.0",
         "axios": "^1.10.0",
+        "d3": "^7.9.0",
         "echarts": "^5.6.0",
         "element-plus": "^2.10.1",
         "pinia": "^3.0.3",
@@ -2164,6 +2165,15 @@
         "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/confbox": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
@@ -2200,6 +2210,96 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "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",
@@ -2209,18 +2309,92 @@
         "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": "2.0.0",
       "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
       "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
       "license": "BSD-3-Clause"
     },
+    "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": "1.0.7",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.7.tgz",
       "integrity": "sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==",
       "license": "BSD-3-Clause"
     },
+    "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": "2.1.1",
       "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
@@ -2232,6 +2406,36 @@
         "d3-timer": "1 - 2"
       }
     },
+    "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",
@@ -2244,18 +2448,204 @@
         "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": "2.0.0",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
       "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==",
       "license": "BSD-3-Clause"
     },
+    "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",
+      "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": "1.0.10",
       "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
       "integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==",
       "license": "BSD-3-Clause"
     },
+    "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/d3/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/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/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/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/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/dagre": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
@@ -2296,6 +2686,15 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "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",
@@ -2916,9 +3315,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -2955,6 +3352,15 @@
       "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==",
       "license": "MIT"
     },
+    "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/is-any-array": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-any-array/-/is-any-array-2.0.1.tgz",
@@ -3679,6 +4085,12 @@
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "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.41.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
@@ -3719,6 +4131,12 @@
         "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/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3746,9 +4164,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
+      "license": "MIT"
-      "license": "MIT",
-      "optional": true
     },
     "node_modules/sax": {
       "version": "1.4.1",

package.json

@@ -9,9 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@antv/g6": "^4.8.24",
+    "@antv/g6": "^4.8.25",
     "@iconify/vue": "^5.0.0",
     "axios": "^1.10.0",
+    "d3": "^7.9.0",
     "echarts": "^5.6.0",
     "element-plus": "^2.10.1",
     "pinia": "^3.0.3",

src/App.vue

@@ -4,49 +4,6 @@
       <div>
         <img src="./assets/images/head.png" alt="" style="width: 100%; height: 100%" />
         <div>
-          <!-- 转换为按钮，添加点击事件 -->
-          <!-- <button
-            style="
-              width: 110px;
-              height: 34px;
-              border: 2px solid;
-              border-image: linear-gradient(to bottom, #c9e4ff, #0783fa00) 0;
-              margin-left: 800px;
-              margin-top: -140px;
-              position: absolute;
-              overflow: hidden;
-              background: none;
-              cursor: pointer;
-            "
-            @click="showToggleJianjie = true"
-          >
-            <img
-              src="./assets/images/shijianjianjie.png"
-              alt=""
-              style="width: 100%; height: 100%; object-fit: cover"
-            />
-          </button> -->
-          <!-- <button
-            style="
-              width: 111px;
-              height: 34px;
-              border: 2px solid;
-              border-image: linear-gradient(to bottom, #c9e4ff, #0783fa00) 0;
-              margin-left: 950px;
-              margin-top: -140px;
-              position: absolute;
-              overflow: hidden;
-              background: none;
-              cursor: pointer;
-            "
-            @click="showToggleJianjie = false"
-          >
-            <img
-              src="./assets/images/zhanshidaping.png"
-              alt=""
-              style="width: 100%; height: 100%; object-fit: cover"
-            />
-          </button> -->
           <!-- 根据状态控制显示 -->
           <div class="toogle-jianjie" v-if="showToggleJianjie">
             <img
@@ -282,6 +239,7 @@ const menuItems = [
 // 判断当前路由是否激活菜单项
 const isActive = (routePath) => {
   return route.path === routePath;
+
 };
 
 // 控制弹窗显示状态
@@ -291,9 +249,8 @@ const showToggleJianjie = ref(false);
 <style scoped>
 .app-container {
   width: 100vw;
-  height: 100%;
   background-image: url("./assets/images/bci.png");
-  background-size: cover;
+  background-size:cover;
   background-repeat: no-repeat;
   background-position: center;
   background-color: #02131f;
@@ -315,7 +272,7 @@ const showToggleJianjie = ref(false);
 }
 .aside {
   width: 320px;
-  height: 944px;
+  height: 100%;
   border: 2px;
   padding: 16px;
   left: 16px;
@@ -326,7 +283,7 @@ const showToggleJianjie = ref(false);
 
 .menu {
   width: 320px;
-  height: 101%;
+  height: 100%;
   border-width: 2px;
   border-style: solid;
   border-image: linear-gradient(to bottom, #3aa1f8, #3aa1f833) 1;
@@ -401,14 +358,14 @@ const showToggleJianjie = ref(false);
 
 .main {
   width: 1544px;
-  height: 944px;
+  height: 100%;
   margin-left: 360px;
   margin-top: 16px;
 }
 
 .main2 {
   width: 1544px;
-  height: 944px;
+  height: 100%;
   margin-left: 0px;
   margin-top: 16px;
 }

src/store/keyNodeRecognition/index.js

@@ -38,6 +38,7 @@ import rank5Img from "@/assets/images/logo/ruank5.png";
 import high3Img from "@/assets/images/logo/high3.png";
 import high2Img from "@/assets/images/logo/high2.png";
 import high1Img from "@/assets/images/logo/high1.png";
+
 export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", {
   state: () => ({
     mediaData: [
@@ -572,6 +573,224 @@ export const useKeyNodeRecognitionStore = defineStore("keyNodeRecognition", {
           backimg: high3Img
         }
       ]
+    ],
+
+    anchorMonitorList: [
+      {
+        avatar: bossImg,
+        commenter: "钻石狗Boss",
+        comment: "干的漂亮，赞一个！",
+        time: "2024-06-19 16:03:26"
+      },
+      {
+        avatar: aiImg,
+        commenter: "爱锤盾海桃-霆恩启副",
+        comment: "转发微博",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: kongtianImg,
+        commenter: "空天砺剑",
+        comment:
+          "#中国海警首次登检菲律宾运补船只# 有了第一次就会有第二次第三次，以后登检就形成常态了，一步...   ",
+        time: "2024-06-19 18:15:53"
+      },
+      {
+        avatar: luxianImg,
+        commenter: "平安泸县 ",
+        comment: "@金台法院 ",
+        time: "2024-06-21 11:20:01 "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          "中国海警从菲方夺回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】中国海警...",
+        time: "2024-06-20 17:31:07"
+      },
+      {
+        avatar: img79,
+        commenter: "苍龙飞天79",
+        comment:
+          "#菲律宾##中方回应菲称我海警挥舞刀具##热门视频# 视频为霸占咱中业岛的菲猴们，武器大炮已...",
+        time: "2024-06-27 12:54:00"
+      },
+      {
+        avatar: img79,
+        commenter: "苍龙飞天79",
+        comment: "转发微博",
+        time: "2024-06-20 23:09:47"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          "#中国海警首提对菲船只登临检查#，如何理解这一新表述】6月17日，中国海警依法对非法闯入我... ",
+        time: "2024-06-20 13:08:44"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          "#中国海警首提对菲船只登临检查#，如何理解这一新表述】6月17日，中国海警依法对非法闯入我... ",
+        time: "2024-06-20 13:08:44"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          "#外交部回应菲军方声称中国海警发射催泪弹#【菲军方声称中国海警发射催泪弹、破坏设备，外交部：... ",
+        time: "2024-06-20 16:14:58"
+      },
+      {
+        avatar: huanqiuImg,
+        commenter: "环球时报",
+        comment:
+          " #中国海警从菲方缴回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】#中国海... ",
+        time: "2024-06-20 17:13:31"
+      },
+      {
+        avatar: huanqiuImg,
+        commenter: "环球时报",
+        comment:
+          " #中国海警从菲方缴回被盗渔网# 【独家视频！菲方偷盗中国渔民渔网，中国海警夺回归还】#中国海... ",
+        time: "2024-06-20 17:13:31"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          "#菲方非法坐滩军舰航拍影像公开#【独家影像！#中国仁爱礁高清航拍画面发布#，菲非法“坐滩”军... ",
+        time: "2024-06-20 17:13:31"
+      },
+      {
+        avatar: kongtianImg,
+        commenter: "空天砺剑",
+        comment:
+          " #中国海警夺回菲方盗窃赃物# 你偷，我就有理由上你的破船，只要上了船，我干什么就由不得你了，... ",
+        time: "2024-06-20 17:13:31"
+      },
+      {
+        avatar: bbsImg,
+        commenter: "外贸发布BBS",
+        comment:
+          " 我海警耍猴还是有点技巧的！#菲媒称中国万吨大驱驶过菲沿岸# #中国海警夺回菲方盗窃赃物#",
+        time: "2024-06-20 17:13:31"
+      },
+
+      {
+        avatar: bbsImg,
+        commenter: " 外贸发布BBS",
+        comment: "特种部队丢手指，普通部队丢胳膊！",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: bossImg,
+        commenter: " 钻石狗Boss",
+        comment: "打的就是他精锐……",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: bossImg,
+        commenter: " 钻石狗Boss",
+        comment: "别怂，叫你的“精锐”接着来……",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: ggImg,
+        commenter: "  肥_谍_gg",
+        comment:
+          "//@帝吧官微:拿着自拍杆邀请菲律宾顶级特种部队合影而已，你们看那些平常喜欢聒噪的公知大v都...    ",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: tangImg,
+        commenter: " 唐宁20150903",
+        comment: "转发微博",
+        time: "2024-06-24 22:53:02 "
+      },
+      {
+        avatar: bossImg,
+        commenter: " 钻石狗Boss",
+        comment: "“金手指” ",
+        time: "2024-06-20 18:25:02 "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: " 新浪军事",
+        comment:
+          "【#菲自曝被中国海警缴枪的是顶级特种部队#】近日，菲律宾船只侵闯我仁爱礁，中国海警对其进行登...       ",
+        time: "2024-06-23 11:05:46  "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: " 新浪军事",
+        comment:
+          "#中国海警将菲非法所得渔网送归中国渔民#】据新华社6月21日报道，近期，在中国仁爱礁及其附...  ",
+        time: "2024-06-23 13:07:47 "
+      },
+      {
+        avatar: kongtianImg,
+        commenter: "  空天砺剑",
+        comment:
+          "#菲自曝被中国海警缴枪的是顶级特种部队# 菲律宾：我派出的可是精锐部队 中国海警：就这？老子... ",
+        time: "2024-06-23 14:05:32 "
+      },
+      {
+        avatar: qianImg,
+        commenter: " 钱局长本人",
+        comment:
+          "菲律宾特种部队被中国的警察叔叔缴了械，断指士兵获奖章，俄罗斯网友：这是我今年听过最搞笑的笑话...   ",
+        time: "2024-06-23 14:46:29"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "  新浪军事",
+        comment:
+          '#台退将分析中菲仁爱礁冲突#：解放军"关门打狗" 菲律宾敢动就是团灭（海峡新干线）#菲自曝被...',
+        time: "2024-06-23 14:55:23  "
+      },
+      {
+        avatar: bbsImg,
+        commenter: " 外贸发布BBS",
+        comment: "特种部队丢手指，普通部队丢胳膊！#菲自曝被中国海警缴枪的是顶级特种部队# ",
+        time: "2024-06-23 14:56:42  "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "新浪军事",
+        comment:
+          " #菲自曝被中国海警缴枪的是顶级特种部队# 近日，菲律宾船只侵闯我仁爱礁，中国海警对其进行登临...   ",
+        time: "2024-06-23 15:55:24 "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: "   新浪军事",
+        comment:
+          " #驻越使馆驳斥美高官越南期间肆意攻击中国#【美高官访越南期间就南海问题肆意攻击中国",
+        time: "2024-06-23 16:12:54 "
+      },
+      {
+        avatar: bbsImg,
+        commenter: " 外贸发布BBS",
+        comment:
+          "#菲自曝被中国海警缴枪的是顶级特种部队# 菲律宾特种部队就这？怪不得现在菲律宾网友各种找补洗白  ",
+        time: "盖世英雄玉椒龙"
+      },
+      {
+        avatar: xinlangImg,
+        commenter: " 新浪军事",
+        comment:
+          " #菲总统最新言论话里有话#【警惕！菲总统最新言论，话里有话】什么叫做一意孤行地碰瓷？菲律宾方...",
+        time: "2024-06-23 18:47:55  "
+      },
+      {
+        avatar: xinlangImg,
+        commenter: " 新浪军事",
+        comment:
+          "【外媒：#菲律宾外长称希望与中国就南海问题进行对话#，以解决分歧】据路透社、《菲律宾星报》报... ",
+        time: "2024-06-25 17:30:20"
+      }
     ]
   }),
   actions: {},

src/views/KeyNodeRecognition1.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="keyNodeOne-container">
     <!-- 1. 顶部介绍图片 -->
     <div>
       <img src="../assets/images/head/chuanbo.png" alt="系统介绍" class="intruduction" />
@@ -1028,6 +1028,10 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.keyNodeOne-container{
+  width: 100%;
+  height: 100%;
+}
 .intruduction {
   width: 100%;
   margin-top: 0px;

src/views/keyNodeRecognition3/components/anchorGraph.vue

@@ -1,12 +1,26 @@
 <template>
-  <div class="anchorGraph-component">2</div>
+  <div class="anchorGraph-component">
+    <div class="container" ref="containerRef"></div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import G6 from "@antv/g6";
+</script>
 
 <style scoped lang="less">
 .anchorGraph-component {
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .container {
+    width: 100%;
+    height: 100%;
+    background: #101a3c;
+    border: 1px solid #222;
+  }
 }
 </style>

src/views/keyNodeRecognition3/components/anchorStatistics.vue

@@ -24,10 +24,7 @@ const props = defineProps({
 .anchorStatistics-component {
   width: 100%;
   height: 100%;
-  border-radius: 4px;
+ 
-  border: 1px solid #95ceff;
-  background: linear-gradient(270deg, rgba(0, 63, 125, 0.24) 0%, rgba(93, 185, 255, 0.12) 100%);
-  backdrop-filter: blur(8px);
   .statistics-list {
     display: flex;
     height: 100%;

src/views/keyNodeRecognition3/components/attentionTopic.vue

@@ -212,6 +212,7 @@ const initTopicChart = () => {
     ]
   };
   myChart.setOption(option);
+  currentTopicList.value = props.topicList[2]
 };
 onMounted(() => {
   initTopicChart();
@@ -258,6 +259,8 @@ onMounted(() => {
       }
     }
     .topic-chart {
+      width: 100%;
+      height: 200px;
     }
   }
 }

src/views/keyNodeRecognition3/components/monitoring.vue

@@ -1,12 +1,144 @@
 <template>
-  <div class="monitoring-component">6</div>
+  <div class="monitoring-component">
+    <img src="@/assets/images/head/monitorTitle.png" alt="" class="headerImage" />
+    <div class="monitor-list" ref="monitorListRef">
+      <div class="monitor-item" v-for="(item,index) in anchorMonitorList" :key="index">
+        <div class="monitor-item-content">
+          <img :src="item.avatar" alt="" class="avatar">
+          <div class="context">
+            <div class="title-and-time">
+              <div class="title">{{ item.commenter }}</div>
+              <div class="time">{{ item.time }}</div>
+            </div>
+            <div class="content">{{ item.comment }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { defineProps,ref,onBeforeUnmount,onMounted } from 'vue';
+const monitorListRef = ref(null);
+let scrollTimer = null;
+const scrollConstant = {
+  DIRECTION:1,// 1: 向下, -1: 向上
+  SCROLLSPEED:1, // 每次滚动的像素
+  SCROLLINTERVAL:50
+}
+
+const props = defineProps({
+  anchorMonitorList:{
+    type: Array,
+    default:() => []
+  }
+})
+
+const startAutoScroll = () =>{
+  if(!monitorListRef.value) return;
+  scrollTimer = setInterval(()=>{
+    const el = monitorListRef.value;
+    if(!el) return;
+    el.scrollTop += scrollConstant.SCROLLSPEED * scrollConstant.DIRECTION
+    //到底部
+    if(el.scrollTop + el.clientHeight >= el.scrollHeight){
+      scrollConstant.DIRECTION = -1;
+    }
+
+    //到顶部
+    if(el.scrollTop <= 0){
+      scrollConstant.DIRECTION = 1;
+    }
+  }, scrollConstant.SCROLLINTERVAL)
+}
+
+onMounted(()=>{
+  startAutoScroll()
+})
+onBeforeUnmount(() => {
+  if (scrollTimer) clearInterval(scrollTimer);
+});
+</script>
 
 <style scoped lang="less">
 .monitoring-component {
   width: 100%;
   height: 100%;
+  .monitor-list{
+    padding: 20px 20px;
+    margin-bottom: 15px;
+    width: 100%;
+    height: 240px;
+    overflow: auto;
+      -ms-overflow-style: none; /* IE 和 Edge */
+      scrollbar-width: none; /* Firefox */
+    .monitor-item{
+      width: 100%;
+      height: 80px;
+      border-bottom: 1px solid #0071bc;
+      display: flex;
+      align-items: center;
+      .monitor-item-content{
+        width: 100%;
+        height: 80%;
+        padding: 0px 10px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        .avatar{
+          width: 45px;
+          height: 45px;
+          border-radius: 5px;
+        }
+        .context{
+          padding-left: 15px;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .title-and-time{
+            width: 100%;
+              display: flex;
+              justify-content: space-between;
+            .title{
+              color: #fff;
+              font-size: 16px;
+            }
+            .time{
+              color: rgba(255, 255, 255, 0.80);
+              font-family: "PingFang SC";
+              font-size: 12px;
+              font-style: normal;
+              font-weight: 400;
+              line-height: normal;
+              letter-spacing: 0.14px;
+              opacity: 0.6;
+            }
+          }
+         
+          .content{
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;  /* 限制显示的行数 */
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 13px;
+            font-family: "PingFang SC";
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+            letter-spacing: 0.14px;
+            color: rgba(255, 255, 255, 0.80);
+            opacity: 0.6;
+          }
+        }
+        &:hover{
+          background-color: #152341;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/keyNodeRecognition3/components/search.vue

@@ -1,11 +1,22 @@
 <template>
   <div class="search-component">
-    <input type="text" class="search-input" placeholder="南海争端系列舆情事件" />
+    <input type="text" class="search-input" placeholder="南海争端系列舆情事件"  v-model="searchValue" />
-    <img src="@/assets/images/icon/search-icon.png" alt="" class="search-icon" />
+    <img src="@/assets/images/icon/search-icon.png" alt="" class="search-icon" @click="handleSearchBtn"/>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, defineEmits } from 'vue';
+
+const searchValue = ref(null)
+const emit = defineEmits(['click:search'])
+
+const handleSearchBtn = () =>{
+  if(searchValue.value == '') return;
+  emit('click:search', searchValue.value)
+  
+}
+</script>
 
 <style scoped lang="less">
 .search-component {
@@ -25,8 +36,8 @@
     -webkit-appearance: none;
     font: inherit;
     color: inherit;
-    width: 50%;
+    width: 60%;
-    height: 90%;
+    height: 75%;
     border-radius: 58px;
     border: 1px solid #214a8e;
     background: linear-gradient(0deg, #051634 0%, #081d40 51.78%, #04285c 100%);
@@ -39,7 +50,7 @@
     }
   }
   .search-icon {
-    margin-left: -50px;
+    margin-left: -40px;
     cursor: pointer;
   }
 }

src/views/keyNodeRecognition3/index.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="middle-container">
         <div class="search">
-          <Search></Search>
+          <Search @click:search="handleSearch"></Search>
         </div>
         <div class="anchorGraph">
           <AnchorGraph></AnchorGraph>
@@ -34,7 +34,7 @@
           <AttentionTopic :topicList="KeyNodeOneStore.tooltipList"></AttentionTopic>
         </div>
         <div class="monitoring-situation">
-          <Monitoring></Monitoring>
+          <Monitoring :anchorMonitorList="KeyNodeOneStore.anchorMonitorList"></Monitoring>
         </div>
       </div>
     </div>
@@ -70,6 +70,10 @@ const handleSwitchTab = (tabName) => {
 const handleSwitchChartTab = (tabName) => {
   KeyNodeOneStore.currentChartTabType = tabName;
 };
+
+const handleSearch = (value) => {
+  console.log(value);
+};
 </script>
 
 <style scoped lang="less">
@@ -78,11 +82,14 @@ const handleSwitchChartTab = (tabName) => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 27px;
   .top-container {
     width: 100%;
-    height: 100px;
+    height: 80px;
-    background-color: saddlebrown;
+    background-image: url(@/assets/images/head/anchorBigTitle.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
   }
 
   .content {
@@ -101,17 +108,22 @@ const handleSwitchChartTab = (tabName) => {
       .userPanel {
         width: 100%;
         height: 500px;
-        background-color: #090f28;
+        border-radius: 2px;
+        border: 1px solid rgba(33, 74, 142, 0);
+        background: linear-gradient(180deg, rgba(10, 26, 52, 0.24) 0%, rgba(10, 26, 52, 0.8) 100%);
+        backdrop-filter: blur(4px);
       }
       .anchorChart {
         flex: 1;
-        background-color: #090f28;
+        border-radius: 2px;
+        border: 1px solid rgba(33, 74, 142, 0);
+        background: linear-gradient(180deg, rgba(10, 26, 52, 0.24) 0%, rgba(10, 26, 52, 0.8) 100%);
+        backdrop-filter: blur(4px);
       }
     }
 
     .middle-container {
       flex: 1;
-
       display: flex;
       flex-direction: column;
       .search {
@@ -121,9 +133,19 @@ const handleSwitchChartTab = (tabName) => {
       .anchorGraph {
         width: 100%;
         height: 580px;
+        background-color: #070a22;
+        border-radius: 4px;
       }
       .anchorGrap-statistics {
         flex: 1;
+        border-radius: 4px;
+        border: 1px solid #95ceff;
+        background: linear-gradient(
+          270deg,
+          rgba(0, 63, 125, 0.24) 0%,
+          rgba(93, 185, 255, 0.12) 100%
+        );
+        backdrop-filter: blur(8px);
       }
     }
 
@@ -137,11 +159,17 @@ const handleSwitchChartTab = (tabName) => {
       .attention-topic {
         width: 100%;
         height: 500px;
-        background-color: #090f28;
+        border-radius: 2px;
+        border: 1px solid rgba(33, 74, 142, 0);
+        background: linear-gradient(180deg, rgba(10, 26, 52, 0.24) 0%, rgba(10, 26, 52, 0.8) 100%);
+        backdrop-filter: blur(4px);
       }
       .monitoring-situation {
         flex: 1;
-        background-color: #090f28;
+        border-radius: 2px;
+        border: 1px solid rgba(33, 74, 142, 0);
+        background: linear-gradient(180deg, rgba(10, 26, 52, 0.24) 0%, rgba(10, 26, 52, 0.8) 100%);
+        backdrop-filter: blur(4px);
       }
     }
   }