Merge pull request #3203 from xinnan-tech/mac-address-mask

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>

main/manager-web/src/views/AddressBookManagement.vue

@@ -42,9 +42,13 @@
                   <img :src="getDeviceAvatar(device.id)" alt="avatar" />
                 </div>
                 <div class="device-content">
-                  <div class="device-name">{{ device.name }}</div>
+                  <div class="device-name">
+                    <MacAddressMask :macAddress="device.name" />
+                  </div>
                   <div class="device-row">
-                    <span class="device-id">{{ device.deviceId }}</span>
+                    <span class="device-id">
+                      <MacAddressMask :macAddress="device.deviceId" />
+                    </span>
                     <span class="device-status" :class="device.online ? 'online' : 'offline'">
                       {{ device.online ? $t('addressBookManagement.online') : $t('addressBookManagement.offline') }}
                     </span>
@@ -76,10 +80,15 @@
                     @keyup.enter="handleAliasBlur"
                     autofocus
                   />
-                  <span v-else class="device-name-text" @click="handleStartEdit">{{ selectedDevice.name }}</span>
+                  <span v-else class="device-name-text" @click="handleStartEdit">
+                    <MacAddressMask :macAddress="selectedDevice.name" />
+                  </span>
                   <i v-if="!isEditingAlias" class="el-icon-edit" @click="handleStartEdit"></i>
                 </div>
-                <div class="device-mac">{{ $t('addressBookManagement.macAddress') }}：{{ selectedDevice.deviceId }}</div>
+                <div class="device-mac">
+                  {{ $t('addressBookManagement.macAddress') }}：
+                  <MacAddressMask :macAddress="selectedDevice.deviceId" />
+                </div>
                 <div class="device-status">
                   <span>{{ $t('addressBookManagement.status') }}：</span>
                   <span :class="selectedDevice.online ? 'online' : 'offline'">
@@ -166,10 +175,14 @@
                       @keyup.enter="handleEditPermissionBlur(device)"
                       autofocus
                     />
-                    <span v-else class="permission-name" @click.stop="handleStartEditPermission(device)">{{ device.addressBookAlias || device.name }}</span>
+                    <span v-else class="permission-name" @click.stop="handleStartEditPermission(device)">
+                      <MacAddressMask :macAddress="device.addressBookAlias || device.name" />
+                    </span>
                     <i v-if="editingDeviceId !== device.id" class="el-icon-edit permission-edit-btn" @click.stop="handleStartEditPermission(device)"></i>
                   </div>
-                  <div class="permission-id">{{ device.deviceId }}</div>
+                  <div class="permission-id">
+                    <MacAddressMask :macAddress="device.deviceId" />
+                  </div>
                   <div class="permission-status" :class="device.online ? 'online' : 'offline'">
                     {{ device.online ? $t('addressBookManagement.online') : $t('addressBookManagement.offline') }}
                   </div>
@@ -195,10 +208,11 @@ import HeaderBar from "@/components/HeaderBar.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
 import Api from "@/apis/api.js";
 import AddressBookApi from "@/apis/module/addressBook.js";
+import MacAddressMask from "@/components/MacAddressMask.vue";
 
 export default {
   name: "AddressBookManagement",
-  components: { HeaderBar, VersionFooter },
+  components: { HeaderBar, VersionFooter, MacAddressMask },
   data() {
     return {
       searchKeyword: "",

main/manager-web/src/views/DeviceManagement.vue

@@ -31,7 +31,11 @@
               </el-table-column>
               <el-table-column :label="$t('device.firmwareVersion')" prop="firmwareVersion"
                 align="center"></el-table-column>
-              <el-table-column :label="$t('device.macAddress')" prop="macAddress" align="center"></el-table-column>
+              <el-table-column :label="$t('device.macAddress')" prop="macAddress" align="center">
+                <template slot-scope="scope">
+                  <MacAddressMask :macAddress="scope.row.macAddress" />
+                </template>
+              </el-table-column>
               <el-table-column :label="$t('device.bindTime')" prop="bindTime" align="center"></el-table-column>
               <el-table-column :label="$t('device.lastConversation')" prop="lastConversation"
                 align="center"></el-table-column>
@@ -131,13 +135,15 @@ import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
 import VersionFooter from "@/components/VersionFooter.vue";
+import MacAddressMask from "@/components/MacAddressMask.vue";
 
 export default {
   components: {
     HeaderBar,
     AddDeviceDialog,
     ManualAddDeviceDialog,
-    VersionFooter
+    VersionFooter,
+    MacAddressMask,
   },
   data() {
     return {