1

src/store/llinkPrediction/index.js

@@ -3,5 +3,5 @@ import { defineStore } from "pinia";
 export const useCharacterInteractionStore = defineStore("characterInteraction", {
   state: () => ({}),
   actions: {},
-  persist: false // 开启持久化
+  persist: true // 开启持久化
 });

src/views/LinkPrediction/characterInteraction/index.vue

@@ -3,7 +3,9 @@
     <div class="top-container"></div>
     <div class="content">
       <div class="left-container">
-        <div class="userPanel"></div>
+        <div class="userPanel">
+          <UserPanel :title="userPanelTitleImg"></UserPanel>
+        </div>
         <div class="userChart"></div>
       </div>
       <div class="middle-container">
@@ -19,7 +21,9 @@
 </template>
 
 <script setup>
+import UserPanel from "../components/userPanel.vue";
 import { useCharacterInteractionStore } from "@/store/llinkPrediction/index";
+import userPanelTitleImg from "@/assets/images/linkPrediction/title/user-title.png";
 const interactionStore = useCharacterInteractionStore();
 </script>
 

src/views/LinkPrediction/components/userPanel.vue

@@ -1,7 +1,31 @@
 <template>
-  <div class="userPanel-component"></div>
+  <div class="userPanel-component">
+    <img :src="title" alt="" class="title" />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { defineProps } from "vue";
 
-<style scoped lang="less"></style>
+const props = defineProps({
+  userList: {
+    type: Array,
+    default: []
+  },
+  title: {
+    type: String,
+    default: ""
+  }
+});
+</script>
+
+<style scoped lang="less">
+.userPanel-component {
+  width: 100%;
+  height: 100%;
+  .title {
+    margin-top: -7px;
+    margin-left: -2px;
+  }
+}
+</style>