feat(frontend): make mock panels follow business line

frontend/src/views/task/TaskCenter.vue

@@ -15,7 +15,7 @@
         <div class="panel-body">
           <table>
             <tbody>
-              <tr v-for="task in tasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
+              <tr v-for="task in visibleTasks" :key="task.id" class="tr-hover" :class="{ active: task.id === selectedTask }" @click="selectedTask = task.id">
                 <td :class="['status-text', task.statusClass]">● {{ task.status }}</td>
                 <td class="strong">{{ task.name }}</td>
                 <td class="mono text-xs text-dim">{{ task.playbook }}</td>
@@ -23,7 +23,7 @@
             </tbody>
           </table>
           <div class="pagination">
-            <span>共 86 条 · 每页 6 条</span>
+            <span>共 {{ visibleTasks.length }} 条 · 当前业务线：{{ currentName }}</span>
             <div class="pg-btns">
               <span class="pg-btn disabled">‹</span>
               <span class="pg-btn active">1</span>
@@ -39,11 +39,11 @@
 
       <div class="panel">
         <div class="panel-head">
-          <h3>实时日志 · RKE2 节点加入</h3>
+          <h3>实时日志 · {{ currentName }} RKE2 节点加入</h3>
           <span class="meta">WebSocket 流式输出</span>
         </div>
         <div class="panel-body log-stream">
-          <div v-for="(log, index) in logs" :key="index" :class="['task-log-line', log.class]">
+          <div v-for="(log, index) in visibleLogs" :key="index" :class="['task-log-line', log.class]">
             <span class="t">{{ log.time }}</span>{{ log.message }}
           </div>
           <div class="task-log-line">
@@ -57,17 +57,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
+
+const { currentName } = useBusinessLineMockProfile()
 
 const selectedTask = ref(1)
 
 const tasks = ref([
   { id: 1, name: 'RKE2 节点加入 · bj-node-061', playbook: 'roles/rke2-node-join', status: '执行中', statusClass: 'warn' },
   { id: 2, name: 'MySQL 主从部署 · kodo', playbook: 'roles/mysql-deploy', status: '成功', statusClass: 'ok' },
-  { id: 3, name: 'Redis Cluster 部署 · las', playbook: 'roles/redis-deploy', status: '成功', statusClass: 'ok' },
+  { id: 3, name: 'Redis Cluster 部署 · linxi', playbook: 'roles/redis-deploy', status: '成功', statusClass: 'ok' },
   { id: 4, name: 'openresty 网关部署', playbook: 'roles/openresty-deploy', status: '失败', statusClass: 'err' },
   { id: 5, name: '业务线标签同步 · LDAP', playbook: 'internal/label-sync', status: '成功', statusClass: 'ok' },
-  { id: 6, name: 'MySQL 主从部署 · ltoken', playbook: 'roles/mysql-deploy', status: '成功', statusClass: 'ok' },
+  { id: 6, name: 'MySQL 主从部署 · xinfra', playbook: 'roles/mysql-deploy', status: '成功', statusClass: 'ok' },
 ])
 
 const logs = ref([
@@ -80,6 +83,16 @@ const logs = ref([
   { time: '10:42:20', message: 'changed: [bj-node-061] => labels applied', class: 'tag-ok' },
   { time: '10:42:21', message: 'TASK [加入集群 rke2-bj-prod-01] ...', class: '' },
 ])
+
+const visibleTasks = computed(() => tasks.value.map((task) => ({
+  ...task,
+  name: task.name.replace(/ · (kodo|linxi|xinfra|las)|$/, ` · ${currentName.value}`),
+})))
+
+const visibleLogs = computed(() => logs.value.map((log) => ({
+  ...log,
+  message: log.message.replace(/business-line=(kodo|linxi|xinfra|las)/, `business-line=${currentName.value}`),
+})))
 </script>
 
 <style scoped>