feat: 主机别名.

2023-12-19 01:06:09 +08:00
parent bbb56d63bf
commit 934c59cf96
9 changed files with 206 additions and 66 deletions
--- a/orion-ops-ui/src/api/asset/host.ts
+++ b/orion-ops-ui/src/api/asset/host.ts
@@ -46,8 +46,13 @@ export interface HostQueryResponse extends TableData {
  creator: string;
  updater: string;
  favorite: boolean;
+  alias: string;
  tags: Array<{ id: number, name: string }>;
  groupIdList: Array<number>;
+
+  editable: boolean;
+  loading: boolean;
+  modCount: number;
 }

 /**
@@ -72,6 +77,14 @@ export interface HostConfigQueryResponse {
  config: Record<string, any>;
 }

+/**
+ * 主机别名更新请求
+ */
+export interface HostAliasUpdateRequest {
+  id?: number;
+  name?: string;
+}
+
 /**
 * 创建主机
 */
@@ -114,6 +127,13 @@ export function deleteHost(id: number) {
  return axios.delete('/asset/host/delete', { params: { id } });
 }

+/**
+ * 修改主机别名
+ */
+export function updateHostAlias(request: HostAliasUpdateRequest) {
+  return axios.put('/asset/host/update-alias', request);
+}
+
 /**
 * 查询主机配置
 */
--- a/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
+++ b/orion-ops-ui/src/components/asset/host-group/host-group-tree.vue
@@ -17,14 +17,14 @@
        <template v-if="node.editable">
          <a-input size="mini"
                   ref="renameInput"
-                   v-model="currName"
+                   v-model="node.title"
                   style="width: 138px;"
                   placeholder="名称"
                   :max-length="32"
                   :disabled="node.loading"
-                   @blur="() => saveNode(node.key)"
-                   @pressEnter="() => saveNode(node.key)"
-                   @change="() => saveNode(node.key)">
+                   @blur="saveNode(node)"
+                   @pressEnter="saveNode(node)"
+                   @change="saveNode(node)">
            <template #suffix>
              <!-- 加载中 -->
              <icon-loading v-if="node.loading" />
@@ -32,7 +32,7 @@
              <icon-check v-else
                          class="pointer"
                          title="保存"
-                          @click="() => saveNode(node.key)" />
+                          @click="saveNode(node)" />
            </template>
          </a-input>
        </template>
@@ -116,9 +116,7 @@
  const cacheStore = useCacheStore();

  const tree = ref();
-  const modCount = ref(0);
  const renameInput = ref();
-  const currName = ref();
  const treeData = ref<Array<TreeNodeData>>([]);

  const checkedKeys = computed<Array<number>>({
@@ -140,7 +138,6 @@
    if (!node) {
      return;
    }
-    currName.value = title;
    node.editable = true;
    nextTick(() => {
      renameInput.value?.focus();
@@ -178,14 +175,13 @@
  const addRootNode = () => {
    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
    treeData.value.push({
-      title: '新分组',
+      title: '',
      key: newKey
    });
    // 编辑子节点
    const newNode = findNode<TreeNodeData>(newKey, treeData.value);
    if (newNode) {
      newNode.editable = true;
-      currName.value = '';
      nextTick(() => {
        renameInput.value?.focus();
      });
@@ -197,7 +193,7 @@
    const newKey = `${createGroupGroupPrefix}${Date.now()}`;
    const children = parentNode.children || [];
    children.push({
-      title: '新分组',
+      title: '',
      key: newKey
    });
    parentNode.children = children;
@@ -209,7 +205,6 @@
      const newNode = findNode<TreeNodeData>(newKey, treeData.value);
      if (newNode) {
        newNode.editable = true;
-        currName.value = '';
        nextTick(() => {
          renameInput.value?.focus();
        });
@@ -217,18 +212,16 @@
    });
  };

+  // FIXME 测试
  // 保存节点
-  const saveNode = async (key: string | number) => {
-    modCount.value++;
-    if (modCount.value !== 1) {
+  const saveNode = async (node: TreeNodeData) => {
+    const key = node.key
+    const newTitle = node.title
+    node.modCount = (node.modCount || 0) + 1;
+    if (node.modCount != 1) {
      return;
    }
-    // 寻找节点
-    const node = findNode<TreeNodeData>(key, treeData.value);
-    if (!node) {
-      return;
-    }
-    if (currName.value) {
+    if (newTitle) {
      node.loading = true;
      try {
        // 创建节点
@@ -240,17 +233,16 @@
          // 创建
          const { data } = await createHostGroup({
            parentId: parent.key as number,
-            name: currName.value
+            name: newTitle
          });
          node.key = data;
        } else {
          // 重命名节点
          await updateHostGroupName({
            id: key as unknown as number,
-            name: currName.value
+            name: newTitle
          });
        }
-        node.title = currName.value;
        node.editable = false;
      } catch (e) {
        // 重复 重新聚焦
@@ -282,7 +274,7 @@
      }
      node.editable = false;
    }
-    modCount.value = 0;
+    node.modCount = 0;
  };

  // 移动分组
--- a/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/group/host-transfer.vue
@@ -86,11 +86,12 @@
    }
  });

+  // FIXME 省略和tooltip
  // 渲染 label
  const renderLabel = (label: string) => {
    const last = label.lastIndexOf('-');
-    const prefix = label.substring(0, last);
-    const ip = label.substring(last + 1, label.length);
+    const prefix = label.substring(0, last - 1);
+    const ip = label.substring(last + 2, label.length);
    return `${prefix} - <span class="span-blue">${ip}</span>`;
  };

@@ -117,7 +118,7 @@
      data.value = hosts.map(s => {
        return {
          value: String(s.id),
-          label: `${s.name}(${s.code})-${s.address}`,
+          label: `${s.name} (${s.code}) - ${s.address}`,
          disabled: false
        };
      });
--- a/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list-view.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list-view.vue
@@ -21,18 +21,62 @@
            <div class="flex-center host-item-left">
              <!-- 图标 -->
              <span class="host-item-left-icon">
-              <icon-desktop />
-            </span>
-              <!-- 名称 -->
-              <a-tooltip position="top"
-                         :mini="true"
-                         content-class="terminal-tooltip-content"
-                         arrow-class="terminal-tooltip-content"
-                         :content="`${item.name} (${item.code})`">
-              <span class="host-item-text host-item-left-name">
-                {{ `${item.name} (${item.code})` }}
+                <icon-desktop />
+              </span>
+              <!-- 名称 -->
+              <span class="host-item-left-name">
+                <!-- 名称文本 -->
+                <template v-if="!item.editable">
+                  <!-- 文本 -->
+                  <a-tooltip position="top"
+                             :mini="true"
+                             content-class="terminal-tooltip-content"
+                             arrow-class="terminal-tooltip-content"
+                             :content="item.alias || `${item.name} (${item.code})`">
+                    <span class="host-item-text host-item-left-name-text">
+                      <template v-if="item.alias">
+                        {{ item.alias }}
+                      </template>
+                      <template v-else>
+                        {{ `${item.name} (${item.code})` }}
+                      </template>
+                    </span>
+                  </a-tooltip>
+                  <!-- 修改别名 -->
+                  <a-tooltip position="top"
+                             :mini="true"
+                             content-class="terminal-tooltip-content"
+                             arrow-class="terminal-tooltip-content"
+                             content="修改别名">
+                    <icon-edit class="host-item-left-name-edit"
+                               @click.stop="clickEditAlias(item)" />
+                  </a-tooltip>
+                </template>
+                <!-- 名称输入框 -->
+                <template v-else>
+                  <a-input v-model="item.alias"
+                           ref="aliasNameInput"
+                           class="host-item-left-name-input"
+                           :max-length="32"
+                           :disabled="item.loading"
+                           size="mini"
+                           placeholder="主机别名"
+                           @blur="saveAlias(item)"
+                           @pressEnter="saveAlias(item)"
+                           @change="saveAlias(item)"
+                           @click.stop>
+                    <template #suffix>
+                      <!-- 加载中 -->
+                      <icon-loading v-if="item.loading" />
+                      <!-- 保存 -->
+                      <icon-check v-else
+                                  class="pointer"
+                                  title="保存"
+                                  @click="saveAlias(item)" />
+                    </template>
+                  </a-input>
+                </template>
              </span>
-              </a-tooltip>
            </div>
            <!-- 中间ip -->
            <div class="flex-center host-item-center">
@@ -123,6 +167,8 @@
  import useFavorite from '@/hooks/favorite';
  import { dataColor } from '@/utils';
  import { tagColor } from '@/views/asset/host-list/types/const';
+  import { ref, nextTick } from 'vue';
+  import { updateHostAlias } from '@/api/asset/host';

  const props = defineProps<{
    hostList: Array<HostQueryResponse>,
@@ -131,18 +177,52 @@

  const { toggle: toggleFavorite, loading: favoriteLoading } = useFavorite('HOST');

+  const aliasNameInput = ref();
+
+  // 点击修改别名
+  const clickEditAlias = (item: HostQueryResponse) => {
+    item.editable = true;
+    if (!item.alias) {
+      item.alias = `${item.name} (${item.code})`;
+    }
+    nextTick(() => {
+      aliasNameInput.value?.focus();
+    });
+  };
+
+  // 保存别名
+  const saveAlias = async (item: HostQueryResponse) => {
+    item.loading = true;
+    item.modCount = (item.modCount || 0) + 1;
+    if (item.modCount != 1) {
+      return;
+    }
+    try {
+      // 修改别名
+      await updateHostAlias({
+        id: item.id,
+        name: item.alias || ''
+      });
+      item.editable = false;
+    } catch (e) {
+    } finally {
+      item.loading = false;
+      item.modCount = 0;
+    }
+  };
+
  // 打开终端
-  const openTerminal = (item: any) => {
+  const openTerminal = (item: HostQueryResponse) => {
    console.log('ter', item);
  };

  // 打开配置
-  const openSetting = (item: any) => {
+  const openSetting = (item: HostQueryResponse) => {
    console.log('set', item);
  };

  // 设置收藏
-  const setFavorite = async (item: any) => {
+  const setFavorite = async (item: HostQueryResponse) => {
    if (favoriteLoading.value) {
      return;
    }
@@ -184,11 +264,11 @@

    .host-item {
      width: 100%;
-      padding: 0 18px;
+      height: @host-item-height;
      display: flex;
      justify-content: space-between;
      align-items: center;
-      height: @host-item-height;
+      position: relative;

      &-text {
        display: inline-block;
@@ -197,10 +277,27 @@
        overflow: hidden;
        text-overflow: ellipsis;
      }
+
+      &:hover {
+        .host-item-left-name-edit {
+          display: inline;
+        }
+
+        .host-item-right-tags {
+          display: none;
+        }
+
+        .host-item-right-actions {
+          display: flex;
+        }
+      }
    }

    .host-item-left {
      width: 35%;
+      height: 100%;
+      padding-left: 18px;
+      position: absolute;

      &-icon {
        width: 32px;
@@ -216,12 +313,36 @@
      }

      &-name {
-        max-width: calc(100% - 32px - 12px - 8px);
+        // 100% - icon-width - icon-margin-right
+        width: calc(100% - 42px);
+        display: flex;
+        align-items: center;
+
+        &-text {
+          // 100% - edit-margin-left - edit-font-size
+          max-width: calc(100% - 18px);
+        }
+
+        &-edit {
+          display: none;
+          margin-left: 4px;
+          cursor: pointer;
+          color: rgb(var(--blue-6));
+          font-size: 14px;
+        }
+
+        &-input {
+          width: 80%;
+        }
      }
    }

    .host-item-center {
      width: 25%;
+      height: 100%;
+      left: 35%;
+      padding: 0 8px;
+      position: absolute;

      &-address {
        max-width: 100%;
@@ -231,34 +352,22 @@
    .host-item-right {
      width: 40%;
      height: 100%;
+      left: 60%;
+      padding-right: 18px;
      flex-direction: column;
      justify-content: center;
-      position: relative;
+      position: absolute;

      &-tags {
-        // 必须设置 最外层用的是 min-width
-        position: absolute;
        width: 100%;
      }

      &-actions {
-        position: absolute;
        display: none;
        width: 100%;
        justify-content: flex-end;
      }
    }
-
-    &:hover {
-      .host-item-right-tags {
-        display: none;
-      }
-
-      .host-item-right-actions {
-        display: flex;
-      }
-    }
-
  }

  .favorite {