feat: mac地址添加马赛克功能

main/manager-web/src/components/ChatHistoryDialog.vue

@@ -2,6 +2,14 @@
     <el-dialog
         :title="$t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle') + (currentMacAddress ? '[' + currentMacAddress + ']' : '')"
         :visible.sync="dialogVisible" width="80%" :before-close="handleClose" custom-class="chat-history-dialog">
+        <template slot="title">
+            <span style="font-size: 18px;">
+                {{ $t('chatHistory.with') + agentName + $t('chatHistory.dialogTitle') }}
+                <template v-if="currentMacAddress">
+                    [<MacAddressMask :macAddress="currentMacAddress" />]
+                </template>
+            </span>
+        </template>
         <div class="chat-container">
             <div class="session-list" @scroll="handleScroll">
                 <div v-for="session in sessions" :key="session.sessionId" class="session-item"
@@ -75,6 +83,7 @@
 <script>
 import { debounce } from '@/utils'
 import Api from '@/apis/api';
+import MacAddressMask from '@/components/MacAddressMask.vue';
 
 export default {
     name: 'ChatHistoryDialog',
@@ -110,6 +119,9 @@ export default {
             expandedToolResults: {} // 跟踪工具结果的展开状态
         };
     },
+    components: {
+        MacAddressMask,
+    },
     watch: {
         visible(val) {
             this.dialogVisible = val;

main/manager-web/src/components/MacAddressMask.vue

@@ -0,0 +1,43 @@
+<template>
+  <span v-if="isValid" class="mac-address-wrapper">{{ prefix }}<span class="mac-address-mask">{{ middle }}</span>{{ suffix }}</span>
+  <span v-else>{{ macAddress }}</span>
+</template>
+
+<script>
+export default {
+  props: {
+    macAddress: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    isValid() {
+      return /^(?:[0-9A-F]{2}[:-]){5}[0-9A-F]{2}$/i.test(this.macAddress);
+    },
+    segments() {
+      return this.macAddress.split(':');
+    },
+    prefix() {
+      return this.segments.slice(0, 2).join(':');
+    },
+    middle() {
+      return ':' + this.segments.slice(2, 4).join(':') + ':';
+    },
+    suffix() {
+      return this.segments.slice(4).join(':');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mac-address-wrapper:hover .mac-address-mask {
+  filter: none;
+}
+
+.mac-address-mask {
+  filter: blur(4px);
+  transition: filter 0.3s;
+}
+</style>