style: 设置列表样式.

2023-12-15 00:44:03 +08:00
parent 49697b2c87
commit 0cd8b3ae02
5 changed files with 219 additions and 47 deletions
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/AuthorizedHostWrapperVO.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/AuthorizedHostWrapperVO.java
@@ -21,7 +21,7 @@ import java.util.Set;
@Builder
@NoArgsConstructor
@AllArgsConstructor
-@Schema(name = "AuthorizedHostGroupWrapperVO", description = "已授权的主机分组 视图响应对象")
+@Schema(name = "AuthorizedHostWrapperVO", description = "已授权的主机分组 视图响应对象")
 public class AuthorizedHostWrapperVO {

    @Schema(description = "授权的主机分组")
--- a/orion-ops-ui/src/assets/style/global.less
+++ b/orion-ops-ui/src/assets/style/global.less
@@ -66,6 +66,12 @@ body {
  }
 }

+// flex
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+
 // -- click-icon
 .click-icon-wrapper {
  display: flex;
--- a/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
+++ b/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less
@@ -206,13 +206,14 @@ body[terminal-theme='dark'] .host-layout {
 // 终端设置容器
 .terminal-setting-container {
  padding: 32px 16px 16px 16px;
-  width: fit-content;
-  margin: auto;
+  width: 100%;
  display: flex;
  flex-direction: column;

  .terminal-setting-wrapper {
    min-width: 932px;
+    max-width: 90%;
+    margin: 0 auto;
    position: relative;
  }

--- a/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-group-view.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-group-view.vue
@@ -1,38 +1,23 @@
 <template>
  <div class="group-view-container">
    <!-- 主机分组 -->
-    <a-scrollbar>
-      <a-tree v-model:selected-keys="selectedGroup"
-              :data="hosts.groupTree"
-              :blockNode="true"
-              class="host-tree block-tree"
-              @select="chooseGroup">
-        <!-- 标题 -->
-        <template #extra="node">
-          <span class="node-host-count span-blue">{{ hosts?.treeNodes[node.key]?.length || 0 }}</span>
-        </template>
-      </a-tree>
-    </a-scrollbar>
+    <div class="host-group-container">
+      <a-scrollbar>
+        <a-tree v-model:selected-keys="selectedGroup"
+                :data="hosts.groupTree"
+                :blockNode="true"
+                class="host-tree block-tree"
+                @select="chooseGroup">
+          <!-- 组内数量 -->
+          <template #extra="node">
+            <span class="node-host-count span-blue">{{ hosts?.treeNodes[node.key]?.length || 0 }}</span>
+          </template>
+        </a-tree>
+      </a-scrollbar>
+    </div>
    <!-- 主机列表 -->
    <div class="host-list">
-      <a-list size="large"
-              max-height="100%"
-              :hoverable="true"
-              :data="[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
-        <!-- 空数据 -->
-        <template #empty>
-          <span class="host-list-empty">当前分组未配置主机</span>
-        </template>
-        <!-- 数据 -->
-        <template #item="{ item }">
-          <a-list-item :title="`${item.name}(${item.code}) - ${item.address}`">
-            {{ hosts?.treeNodes[selectedGroup[0]] }}
-            <icon-desktop class="host-list-icon" />
-            <span>{{ `${item.name}(${item.code}) - ` }}</span>
-            <span class="span-blue">{{ item.address }}</span>
-          </a-list-item>
-        </template>
-      </a-list>
+      <host-list :hosts="hosts" />
    </div>
  </div>
 </template>
@@ -46,6 +31,7 @@
 <script lang="ts" setup>
  import type { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
  import { ref } from 'vue';
+  import HostList from './host-list.vue';

  const props = defineProps<{
    hosts: AuthorizedHostQueryResponse
@@ -68,6 +54,21 @@
    justify-content: space-between;
    max-height: 100%;
    width: 100%;
+  }
+
+  .host-group-container {
+    :deep(.arco-scrollbar) {
+      width: @tree-width;
+      height: 100%;
+      margin-right: @tree-gap;
+      border-radius: 4px;
+
+      &-container {
+        width: 100%;
+        max-height: 100%;
+        overflow: auto;
+      }
+    }

    .host-tree {
      min-width: 100%;
@@ -82,25 +83,17 @@
        display: flex;
        justify-content: flex-end;
        align-items: center;
+        font-weight: bold;
      }
    }
-
-    .host-list {
-      width: calc(100% - @tree-width - @tree-gap);
-      border-radius: 4px;
-    }
  }

-  :deep(.arco-scrollbar) {
-    width: @tree-width;
-    margin-right: @tree-gap;
+  .host-list {
+    width: calc(100% - @tree-width - @tree-gap);
    border-radius: 4px;
-
-    &-container {
-      width: 100%;
-      max-height: 100%;
-      overflow: auto;
-    }
+    max-height: 100%;
+    overflow: auto;
+    position: relative;
  }

 </style>
--- a/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list.vue
+++ b/orion-ops-ui/src/views/host-ops/terminal/components/new-connection/host-list.vue
@@ -0,0 +1,172 @@
+<template>
+  <a-list size="large"
+          max-height="100%"
+          :hoverable="true"
+          :data="hosts.hostList">
+    <!-- 空数据 -->
+    <template #empty>
+      <a-empty>
+        <template #image>
+          <icon-desktop />
+        </template>
+        当前分组内无授权主机!
+      </a-empty>
+    </template>
+    <!-- 数据 -->
+    <template #item="{ item }">
+      <a-list-item class="host-item-wrapper">
+        <div class="host-item">
+          <!-- 左侧图标-名称 -->
+          <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})` }}
+              </span>
+            </a-tooltip>
+          </div>
+          <!-- 中间ip -->
+          <div class="flex-center host-item-center">
+            <!-- ip -->
+            <a-tooltip position="top"
+                       :mini="true"
+                       content-class="terminal-tooltip-content"
+                       arrow-class="terminal-tooltip-content"
+                       :content="item.address">
+              <span class="host-item-text host-item-center-address">
+                {{ item.address }}
+              </span>
+            </a-tooltip>
+          </div>
+          <!-- flex-center 右侧tag-操作 -->
+          <div class="flex-center host-item-right">
+            <div v-if="item.code === 'main'">
+              <a-tag v-for="i in 5"
+                     class="host-item-text"
+                     :style="{
+                    width: `calc(${100/5}% - ${i !== 5 ? '8px' : '0px'})`,
+                    maxWidth: `calc(${100/5}% - ${i !== 5 ? '8px' : '0px'})`,
+                    marginRight: `${i !== 5 ? '8px' : '0'}`,
+                   }"
+                     color="arcoblue">
+                <template v-for="j in i*5">
+                  {{ j }}
+                </template>
+              </a-tag>
+            </div>
+            <div v-else>
+
+            </div>
+          </div>
+        </div>
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostList'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { AuthorizedHostQueryResponse } from '@/api/asset/asset-authorized-data';
+
+  const props = defineProps<{
+    hosts: AuthorizedHostQueryResponse
+  }>();
+
+</script>
+
+<style lang="less" scoped>
+  @host-item-height: 56px;
+
+  :deep(.arco-list-bordered) {
+    border: 1px solid var(--color-fill-3);
+
+    .arco-empty {
+      padding: 16px 0;
+      flex-direction: column;
+
+      .arco-empty-image {
+        margin-bottom: 0;
+      }
+    }
+
+    .arco-list-item:not(:last-child) {
+      border-bottom: 1px solid var(--color-fill-3);
+    }
+
+    .arco-list-item:hover {
+      background-color: var(--color-fill-2);
+    }
+  }
+
+  .host-item-wrapper {
+    padding: 0 !important;
+    height: @host-item-height;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--color-content-text-2);
+
+    .host-item {
+      width: 100%;
+      padding: 0 18px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: @host-item-height;
+
+      &-text {
+        display: inline-block;
+        white-space: pre;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .host-item-left {
+      width: 35%;
+
+      &-icon {
+        width: 32px;
+        height: 32px;
+        border-radius: 32px;
+        margin-right: 10px;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--color-text-3);
+        background: var(--color-fill-3);
+      }
+
+      &-name {
+        max-width: calc(100% - 32px - 12px - 8px);
+      }
+    }
+
+    .host-item-center {
+      width: 25%;
+
+      &-address {
+        max-width: calc(100% - 8px);
+      }
+    }
+
+    .host-item-right {
+      width: 40%;
+    }
+
+  }
+</style>