feat(frontend): make mock panels follow business line

frontend/src/views/service/Catalog.vue

@@ -77,8 +77,10 @@
               <div class="field">
                 <label>业务线</label>
                 <select v-model="mysqlForm.bl">
-                  <option value="las">las（当前）</option>
                   <option value="kodo">kodo</option>
+                  <option value="linxi">linxi</option>
+                  <option value="xinfra">xinfra</option>
+                  <option value="las">las</option>
                 </select>
               </div>
               <div class="field">
@@ -128,12 +130,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { subsystemApi } from '@/api/subsystem'
+import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
 
 const router = useRouter()
+const { currentName } = useBusinessLineMockProfile()
 
 interface Service {
   name: string
@@ -210,11 +214,16 @@ const basicServices = ref<Service[]>([
 const showMysqlModal = ref(false)
 
 const mysqlForm = reactive({
-  bl: 'las',
+  bl: currentName.value,
   topology: '1m2r',
   spec: '8C32G',
   version: '8.0.36',
-  instanceName: 'mysql-las-billing-02',
+  instanceName: `mysql-${currentName.value}-billing-02`,
+})
+
+watch(currentName, (name) => {
+  mysqlForm.bl = name
+  mysqlForm.instanceName = `mysql-${name}-billing-02`
 })
 
 const handleCardClick = (service: Service) => {

frontend/src/views/service/Management.vue

@@ -16,12 +16,12 @@
       </div>
       <div class="stat-card">
         <div class="label">服务总数</div>
-        <div class="value">186</div>
+        <div class="value">{{ filteredServices.length }}</div>
         <div class="delta">去重后唯一服务名</div>
       </div>
       <div class="stat-card">
         <div class="label">服务实例总数</div>
-        <div class="value">842</div>
+        <div class="value">{{ serviceInstances }}</div>
         <div class="delta">所有机房注册 IP 汇总</div>
       </div>
       <div class="stat-card">
@@ -50,10 +50,9 @@
       <el-select placeholder="全部业务标签">
         <el-option label="全部业务标签" value="" />
         <el-option label="kodo" value="kodo" />
+        <el-option label="linxi" value="linxi" />
+        <el-option label="xinfra" value="xinfra" />
         <el-option label="las" value="las" />
-        <el-option label="lingxi" value="lingxi" />
-        <el-option label="ltoken" value="ltoken" />
-        <el-option label="maas" value="maas" />
       </el-select>
       <el-select placeholder="全部状态">
         <el-option label="全部状态" value="" />
@@ -83,7 +82,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="service in services" :key="service.name" class="tr-hover">
+            <tr v-for="service in filteredServices" :key="service.name" class="tr-hover">
               <td class="strong mono">{{ service.name }}</td>
               <td><span class="tag" :class="service.dcClass">{{ service.dc }}</span></td>
               <td class="mono">{{ service.biz }}</td>
@@ -95,7 +94,7 @@
           </tbody>
         </table>
         <div class="pagination">
-          <span>共 186 条 · 每页 7 条</span>
+          <span>共 {{ filteredServices.length }} 条 · 当前业务线：{{ currentName }}</span>
           <div class="pg-btns">
             <span class="pg-btn disabled">‹</span>
             <span class="pg-btn active">1</span>
@@ -112,17 +111,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
+
+const { currentName } = useBusinessLineMockProfile()
 
 const services = ref([
   { name: 'kodo-gateway-svc', dc: 'YZH', dcClass: 'zone-a', biz: 'kodo', instances: 12, healthy: '12 / 12', ip: '10.21.4.51', status: '健康', statusClass: 'ok' },
   { name: 'kodo-upload-svc', dc: 'XS', dcClass: 'zone-b', biz: 'kodo', instances: 10, healthy: '10 / 10', ip: '10.34.37.66', status: '健康', statusClass: 'ok' },
+  { name: 'linxi-render-svc', dc: 'JF', dcClass: 'zone-c', biz: 'linxi', instances: 6, healthy: '6 / 6', ip: '10.45.2.30', status: '健康', statusClass: 'ok' },
+  { name: 'xinfra-portal-svc', dc: 'YZH', dcClass: 'zone-a', biz: 'xinfra', instances: 8, healthy: '8 / 8', ip: '10.21.4.88', status: '健康', statusClass: 'ok' },
   { name: 'las-search-api', dc: 'XS', dcClass: 'zone-b', biz: 'las', instances: 18, healthy: '17 / 18', ip: '10.34.37.20', status: '部分异常', statusClass: 'warn' },
   { name: 'las-order-svc', dc: '达拉斯 IDC', dcClass: '', biz: 'las', instances: 5, healthy: '5 / 5', ip: '10.66.2.20', status: '健康', statusClass: 'ok' },
-  { name: 'lingxi-render-svc', dc: 'JF', dcClass: 'zone-c', biz: 'lingxi', instances: 6, healthy: '6 / 6', ip: '10.45.2.30', status: '健康', statusClass: 'ok' },
-  { name: 'ltoken-wallet-svc', dc: 'YZH', dcClass: 'zone-a', biz: 'ltoken', instances: 8, healthy: '8 / 8', ip: '10.21.4.88', status: '健康', statusClass: 'ok' },
-  { name: 'maas-infer-svc', dc: '新加坡 IDC', dcClass: '', biz: 'maas', instances: 4, healthy: '3 / 4', ip: '10.88.1.40', status: '部分异常', statusClass: 'warn' },
 ])
+
+const filteredServices = computed(() => services.value.filter((service) => service.biz === currentName.value))
+const serviceInstances = computed(() => filteredServices.value.reduce((sum, service) => sum + service.instances, 0))
 </script>
 
 <style scoped>