feat: 主机分组授权.

orion-ops-ui/src/components/view/tab-router/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="simple-card tabs-container">
+  <div class="tabs-container">
     <template v-for="item in items"
               :key="item.key">
-      <span v-permission="item.permission"
+      <span v-permission="item.permission || []"
             :title="item.text"
             :class="['tab-item', item.key === modelValue ? 'tab-item-active' : '']"
-            @click="changeTab(item.key)">
+            @click="changeTab(item)">
         <component v-if="item.icon"
                    :is="item.icon" />
         {{ item.text }}
@@ -36,24 +36,31 @@
   const emits = defineEmits(['update:modelValue', 'change']);
 
   // 切换 tab
-  const changeTab = (key: string | number) => {
+  const changeTab = ({ key, text }: TabRouterItem) => {
     if (key === props.modelValue) {
       return;
     }
     emits('update:modelValue', key);
-    emits('change', key);
+    emits('change', key, text);
   };
 
   onMounted(() => {
     // 获取有权限的 key
-    const keys = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission))
-    .map(s => s.key) || [];
-    if (!keys.length) {
+    const items = props.items?.filter(s => !s.permission || !s.permission.length || permission.hasAnyPermission(s.permission)) || [];
+    if (!items.length) {
       return;
     }
     // 设置默认选中
-    if (keys.indexOf(props.modelValue as string | number) === -1) {
-      emits('update:modelValue', keys[0]);
+    if (items.map(s => s.key).indexOf(props.modelValue as string | number) === -1) {
+      const item = items[0];
+      emits('update:modelValue', item.key);
+      emits('change', item.key, item.text);
+    } else {
+      // 触发 change 事件
+      const matchItem = items.find(s => s.key === props.modelValue);
+      if (matchItem) {
+        emits('change', matchItem.key, matchItem.text);
+      }
     }
   });
 
@@ -64,6 +71,7 @@
     display: flex;
     flex-direction: column;
     user-select: none;
+    background: #FFF;
   }
 
   .tab-item {
@@ -77,6 +85,10 @@
     font-size: 14px;
     color: var(--color-text-2);
 
+    &:first-child {
+      margin-top: 0;
+    }
+
     svg {
       margin-right: 4px;
       font-size: 16px;

orion-ops-ui/src/components/view/tab-router/types.ts

@@ -2,8 +2,10 @@
  * tab 元素
  */
 export interface TabRouterItem {
-  key: string | number,
-  text: string,
+  key: string | number;
+  text: string;
   icon?: string;
-  permission?: string[]
+  permission?: string[];
+
+  [key: string]: unknown;
 }