⚡ 优化资产授权交互逻辑.

orion-ops-ui/src/components/asset/host-group/tree-selector/index.vue

@@ -5,8 +5,7 @@
                  :loading="loading"
                  placeholder="请选择主机分组"
                  :allow-clear="true"
-                 :allow-search="true">
-  </a-tree-select>
+                 :allow-search="true" />
 </template>
 
 <script lang="ts">

orion-ops-ui/src/components/asset/host-group/tree/index.vue

@@ -2,15 +2,17 @@
   <a-scrollbar>
     <!-- 分组树 -->
     <a-tree v-if="treeData.length"
+            v-model:checked-keys="checkedKeys"
             ref="tree"
             class="tree-container block-tree"
-            v-model:checked-keys="checkedKeys"
+            :class="[ editable ? 'editable-tree' : '' ]"
             :blockNode="true"
-            :draggable="editable"
             :data="treeData"
+            :draggable="editable"
             :checkable="checkable"
             :check-strictly="true"
-            @drop="moveGroup">
+            @drop="moveGroup"
+            @select="(s) => emits('onSelected', s)">
       <!-- 标题 -->
       <template #title="node">
         <!-- 修改名称输入框 -->
@@ -40,8 +42,8 @@
         <span v-else
               class="node-title-wrapper"
               @click="() => emits('selectedNode', node)">
-        {{ node.title }}
-      </span>
+          {{ node.title }}
+        </span>
       </template>
       <!-- 操作图标 -->
       <template #drag-icon="{ node }">
@@ -51,8 +53,8 @@
                 class="tree-icon"
                 title="重命名"
                 @click="rename(node.title, node.key)">
-          <icon-edit />
-        </span>
+            <icon-edit />
+          </span>
           <!-- 删除 -->
           <a-popconfirm content="确认删除这条记录吗?"
                         position="left"
@@ -69,8 +71,8 @@
                 class="tree-icon"
                 title="新增"
                 @click="addChildren(node)">
-          <icon-plus />
-        </span>
+            <icon-plus />
+          </span>
         </a-space>
       </template>
     </a-tree>
@@ -97,13 +99,16 @@
   import { isString } from '@/utils/is';
   import { useCacheStore } from '@/store';
 
-  const props = defineProps<Partial<{
+  const props = withDefaults(defineProps<Partial<{
     loading: boolean;
     editable: boolean;
     checkable: boolean;
     checkedKeys: Array<number>;
-  }>>();
-  const emits = defineEmits(['setLoading', 'selectedNode', 'update:checkedKeys']);
+  }>>(), {
+    editable: false,
+    checkable: false,
+  });
+  const emits = defineEmits(['setLoading', 'onSelected', 'selectedNode', 'update:checkedKeys']);
 
   const cacheStore = useCacheStore();
 
@@ -331,6 +336,29 @@
     width: max-content;
     user-select: none;
     overflow: hidden;
+
+    :deep(.arco-tree-node-title) {
+      padding: 0;
+    }
+
+    .node-title-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+    }
+
+    .tree-icon {
+      font-size: 12px;
+      color: rgb(var(--primary-6));
+    }
+  }
+
+  .editable-tree {
+    :deep(.arco-tree-node-title) {
+      padding: 0 80px 0 0;
+    }
   }
 
   .empty-container {
@@ -342,21 +370,4 @@
     color: var(--color-text-3);
   }
 
-  :deep(.arco-tree-node-title) {
-    padding: 0 80px 0 0;
-  }
-
-  .node-title-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-  }
-
-  .tree-icon {
-    font-size: 12px;
-    color: rgb(var(--primary-6));
-  }
-
 </style>

orion-ops-ui/src/components/asset/host/selector/index.vue

@@ -19,7 +19,7 @@
   import useLoading from '@/hooks/loading';
 
   const props = defineProps<Partial<{
-    modelValue: number
+    modelValue: number;
   }>>();
 
   const emits = defineEmits(['update:modelValue']);

orion-ops-ui/src/components/meta/history/modal/index.vue

@@ -4,7 +4,7 @@
            :title="title"
            :width="960"
            :top="80"
-           :body-style="{padding: '0 8px'}"
+           :body-style="{ padding: '0 8px' }"
            :align-center="false"
            :draggable="true"
            :mask-closable="false"

orion-ops-ui/src/components/meta/tag/multi-selector/index.vue

@@ -39,7 +39,8 @@
     allowCreate: boolean;
     tagColor: Array<string>;
   }>>(), {
-    tagColor: () => []
+    allowCreate: false,
+    tagColor: () => [],
   });
 
   const emits = defineEmits(['update:modelValue', 'onLimited']);

orion-ops-ui/src/components/view/editor/index.vue

@@ -1,12 +1,8 @@
 <template>
   <div ref="editorContainer"
        class="editor-wrapper"
-       :class="[
-         !!containerClass ? containerClass : ''
-       ]"
-       :style="{
-          ...containerStyle
-       }" />
+       :class="[ !!containerClass ? containerClass : '' ]"
+       :style="{ ...containerStyle }" />
 </template>
 
 <script lang="ts">