修改bug，添加登录功能逻辑

src/router/index.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router"
 
 const routes = [
-  { path: "/", redirect: "/login" },
+  { path: "/", redirect: "/home" },
   { path: "/login", component: () => import("@/views/login/index.vue") },
   {
     path: "/home",

src/service/api/authentication.js

@@ -1 +1,5 @@
 import http from "@/utils/http"
+
+export function login(userInfo) {
+  return http.post("/auth/login", userInfo)
+}

src/store/authentication/index.js

@@ -1,7 +1,14 @@
 import { defineStore } from "pinia"
+import { login } from "@/service/api/authentication"
+import { ElMessage } from "element-plus"
 export const useLoginStore = defineStore("loginStore", {
   state: () => ({
     token: ""
   }),
-  actions: {}
+  actions: {
+    async loginForAccessToken(userInfo) {
+      const res = await login(userInfo)
+      if (res.code != 200) ElMessage.error("账号或密码错误")
+    }
+  }
 })

src/utils/http.js

@@ -1,4 +1,5 @@
 import axios from "axios"
+import cache from "./http"
 import { ElMessage } from "element-plus"
 
 // 创建axios实例
@@ -10,7 +11,11 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(
   (config) => {
-    // 在发送请求之前做些什么
+    // const token = cache.getItem("token")
+    // const excludePath = new Set(["/login"])
+    // if (!excludePath.has(config.url) && token && config.headers) {
+    //   config.headers.Authorization = `Bearer ${token}`
+    // }
     return config
   },
   (error) => {

src/views/KeyNodeDiscern/anchorRecommendation/components/detailNode.vue

@@ -24,16 +24,64 @@ const detailContainer = ref(null)
 const currentSelectedCommunity = ref({})
 let chart = null
 // 政府官号
-const officeList = ["峨眉公安","平安马边","东坡公安","淮安清江浦法院","抚州消防","游仙公安",
+const officeList = [
-                    "甘泉检察","平安会东","淮安市公安局淮阴分局","南铁福州车务段","太白检察",
+  "峨眉公安",
-                    "任丘司法行政","万源警事","澄城检察","国台办发布","海洋装备与公务船资讯",
+  "平安马边",
-                    "团陵水县委","滕州司法行政在线","陇南徽县总工会","南部战区","中国海警","奉贤反邪"]
+  "东坡公安",
+  "淮安清江浦法院",
+  "抚州消防",
+  "游仙公安",
+  "甘泉检察",
+  "平安会东",
+  "淮安市公安局淮阴分局",
+  "南铁福州车务段",
+  "太白检察",
+  "任丘司法行政",
+  "万源警事",
+  "澄城检察",
+  "国台办发布",
+  "海洋装备与公务船资讯",
+  "团陵水县委",
+  "滕州司法行政在线",
+  "陇南徽县总工会",
+  "南部战区",
+  "中国海警",
+  "奉贤反邪"
+]
 // 新闻媒体列表
-const newList = ["大象观点","大象新闻","湖北日报","热点锐评","合肥晚报","北京广播电视台","环球收视",
+const newList = [
-                  "沧州微播报","中华文化传媒","玉渊谭天","人民网","空警世界","海峡之声","中国军号",
+  "大象观点",
-                  "新浪军事","解放军报","人民日报","中国妇女报","央视新闻","成都新事儿","中国警方在线",
+  "大象新闻",
-                  "环视频","四川观察","齐鲁晚报","生命时报","中国新闻网","南海之声","每日信报","环球网",
+  "湖北日报",
-                  "大国外交最前线","环球时报"]
+  "热点锐评",
+  "合肥晚报",
+  "北京广播电视台",
+  "环球收视",
+  "沧州微播报",
+  "中华文化传媒",
+  "玉渊谭天",
+  "人民网",
+  "空警世界",
+  "海峡之声",
+  "中国军号",
+  "新浪军事",
+  "解放军报",
+  "人民日报",
+  "中国妇女报",
+  "央视新闻",
+  "成都新事儿",
+  "中国警方在线",
+  "环视频",
+  "四川观察",
+  "齐鲁晚报",
+  "生命时报",
+  "中国新闻网",
+  "南海之声",
+  "每日信报",
+  "环球网",
+  "大国外交最前线",
+  "环球时报"
+]
 
 // 根据节点数量计算缩放比例
 const calculateInitialZoom = (nodes) => {
@@ -78,8 +126,11 @@ const initChart = async () => {
     .map((filteredList) => ({
       ...extraInfo[filteredList[0]],
       anchor: filteredList[0],
-      neighbors: filteredList[1].map((neighNode) => ({ id: neighNode ,nodeName: neighNode, avatar: "" }))
+      neighbors: filteredList[1].map((neighNode) => ({
-
+        id: neighNode,
+        nodeName: neighNode,
+        avatar: ""
+      }))
     }))
 
   //处理连线
@@ -90,19 +141,31 @@ const initChart = async () => {
     })
   })
 
-
   // 合并所有锚点和邻居节点到一个数组并去重
   let nodeSet = new Set()
   filterResult.forEach((item) => {
     //添加锚点自己
     if (!nodeSet.has(item.anchor)) {
-      nodes.push({ id: item?.anchor, nodeName: item?.anchor, value: item?.anchor, category: 1, ...item })
+      nodes.push({
+        id: item?.anchor,
+        nodeName: item?.anchor,
+        value: item?.anchor,
+        category: 1,
+        ...item
+      })
       nodeSet.add(item?.anchor)
     }
     //添加该锚点的邻居
     ;(item.neighbors || []).forEach((n) => {
       if (!nodeSet.has(n?.nodeName)) {
-        nodes.push({ id: n.id, nodeName: n.nodeName, value: n.nodeName, category: 0, avatar: n.avatar ?? "", label: nodeLabel(n) })
+        nodes.push({
+          id: n.id,
+          nodeName: n.nodeName,
+          value: n.nodeName,
+          category: 0,
+          avatar: n.avatar ?? "",
+          label: nodeLabel(n)
+        })
         nodeSet.add(n.nodeName)
       }
     })
@@ -111,8 +174,13 @@ const initChart = async () => {
   const data = { nodes, links }
 
   const categories = [
-    { name: "邻居账号", category: 0 },
+    { name: "邻居账号", category: 0, icon: "circle", size: 30 },
-    { name: "锚点账号", category: 1 }
+    {
+      name: "锚点账号",
+      category: 1,
+      icon: `image://${new URL("@/assets/images/avatar/1/light_indobosss.png", import.meta.url)}`,
+      size: 30
+    }
   ]
 
   const option = {
@@ -132,10 +200,8 @@ const initChart = async () => {
                 : "#cccccc" // 锚点账号用灰色纯色（默认头像常用色）
           },
           // 锚点账号用圆形头像，普通账号保持默认
-          icon:
+          icon: c.icon,
-            c.category === 1
+          symbolSize: c.size
-              ? "path://M50 50 m -50 0 a 50 50 0 1 0 100 0 a 50 50 0 1 0 -100 0 Z" // 精确圆形路径
-              : "circle" // 普通账号用ECharts内置circle
         })),
         right: 15,
         bottom: 13,

src/views/KeyNodeDiscern/anchorRecommendation/components/userChart.vue

@@ -95,19 +95,7 @@ const updateChart = () => {
       trigger: "item",
       formatter: "{a} <br/>{b}: {c}%"
     },
-    // tooltip: {
+
-    //   trigger: "item",
-    //   formatter: function(params) {
-    //     console.log(params)
-    //     // // 计算总值
-    //     const total = chartData.reduce((sum, item) => sum + item.value, 0)
-    //     // // 计算百分比
-    //     const item = chartData.find((item) => item.name === params.name)
-    //     const percentage = total > 0 ? ((item.value / total) * 100).toFixed(1) + "%" : "0%"
-    //     return `行为模式发布<br/>
-    //             ${params.data.name}: ${percentage}(${params.data.value}次)`
-    //   }
-    // },
     legend: {
       orient: "vertical", // 垂直排列
       top: "center", // 垂直居中
@@ -179,14 +167,6 @@ const updateChart = () => {
           show: false,
           position: "outside"
         },
-        emphasis: {
-          label: {
-            show: true,
-            fontSize: 16,
-            fontWeight: "bold",
-            color: "#fff"
-          }
-        },
         labelLine: {
           show: false
         },

src/views/KeyNodeDiscern/anchorRecommendation/index.vue

@@ -123,7 +123,15 @@
                 <div class="diamond"></div>
                 <div class="user-label">
                   <div class="label-key">锚点用户：</div>
+
+                  <el-tooltip
+                    class="box-item"
+                    effect="light"
+                    :content="currentTopic.keyuser"
+                    placement="bottom"
+                  >
                     <div class="label-value">{{ cutOutTheFirstTwo(currentTopic.keyuser) }}</div>
+                  </el-tooltip>
                 </div>
               </div>
             </div>
@@ -138,7 +146,7 @@
         <div class="dialog-content-leaderInfo">
           <img class="leaderInfo-avatar" :src="currentSelectedAnchorItem.avatar" alt="" />
           <div class="leaderInfo-message">
-            <div class="leader-name">{{ currentSelectedAnchorItem.name }}</div>
+            <div class="leader-name">{{ currentSelectedAnchorItem.nodeName }}</div>
             <div class="leader-heat">
               <div class="fancy">粉丝量：&nbsp;&nbsp;{{ currentSelectedAnchorItem.fancy }}</div>
               <div class="post-number">
@@ -598,6 +606,7 @@ watch(topicDialog, (val) => {
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
+              cursor: pointer;
             }
           }
         }

src/views/login/components/loginPanel.vue

@@ -7,6 +7,7 @@
       :rules="rules"
       label-width="auto"
       class="demo-ruleForm"
+      @submit.native.prevent="submitForm(ruleFormRef)"
     >
       <el-form-item prop="username">
         <el-input
@@ -27,7 +28,7 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitForm(ruleFormRef)" class="submit">登录</el-button>
+        <el-button type="primary" native-type="submit" class="submit">登录</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -69,6 +70,7 @@ const submitForm = (formEl) => {
   formEl.validate((valid) => {
     if (valid) {
       const userInfo = toRaw(ruleForm)
+      loginStore.loginForAccessToken(userInfo)
     } else {
     }
   })
@@ -81,7 +83,7 @@ const submitForm = (formEl) => {
   height: 40%;
   border-radius: 7px;
   background-color: #fff;
-  padding: 0 45px;
+  padding: 0 40px;
   .demo-ruleForm {
     margin-top: 100px;
     height: 50%;