zfsafe/web/main/static/resources/css/node_tree.css

/* 左侧树容器：固定高度，允许滚动，根节点居中 */
  .node-tree-area {
    width: 100%;
    height: 100%; /* 示例高度，根据需求调整 */
    border: 1px solid #ddd;
    /* overflow: hidden; 超出时出现滚动条 */
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #f8f9fa;
    text-align: center; /* 内部 inline-block 居中 */
    position: relative;
  }

/* 树节点内容区域，不包含刷新按钮 */
.tree-content {
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  padding-top: 5px; /* 留出顶部刷新按钮位置 */
  /* 关键一行：至少宽度撑满其内部内容 */
  min-width: max-content;
}

/* 顶部刷新按钮 */
 .refresh-container {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 100;
  }

.tree-refresh {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 100;
  cursor: pointer;
  border: none;
  background-color: #007bff; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
  font-size: 20px;
  padding: 5px 10px;
  border-radius: 4px;
}
.tree-refresh:hover {
  background-color: #0056b3; /* 悬停时深蓝 */
}

  /* 让树的 ul 使用 inline-block 显示，便于根节点居中 */
  .tree-root-ul {
    display: inline-block;
    text-align: left; /* 子节点左对齐 */
    margin: 20px;
    padding:0;
    min-width: max-content;   /* 一定撑足够宽度 */
  }
  .tree-root-ul ul {
    margin-left: 20px; /* 子节点缩进 */
    padding-left: 20px;
    border-left: 1px dashed #ccc; /* 增加分隔线效果 */
  }
   /* 节点容器：增加立体效果 */
  .node-container {
    display: inline-flex;
    align-items: center;
  }
    /* 切换图标 */
  .toggle-icon {
    margin-right: 5px;
    font-weight: bold;
    cursor: pointer;
  }
  /* 每个节点样式 */
  .tree-node {
    display: inline-block;
    padding: 6px 10px;
    margin: 3px 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  }
  /* “暂停”状态下，所有节点加粗红边 */
.tree-node.status-paused {
  border: 3px solid #ff4d4f !important;  /* 红色，加粗 */
  /* 保留原有背景色或阴影，不做修改 */
}

/* “执行中”状态，去掉红色边框 */
.tree-node.status-running {
  border-width: 1px;       /* 恢复原有边框粗细 */
  border-color: transparent; /* 或者你原来设的灰色透明边 */
}

  .tree-node:hover {
    background-color: #e6f7ff;
    transform: translateY(-1px);
  }
  .tree-node.selected {
    border: 2px solid #1890ff !important;
    background-color: #bae7ff ;
  }
  /* 针对漏洞级别的样式 */
  .tree-node.vul-low {
    border-color: #87d068;
    background-color: #f6ffed !important;
  }
  .tree-node.vul-medium {
    border-color: #faad14;
    background-color: #fff7e6 !important;
  }
  .tree-node.vul-high {
    border-color: #ff4d4f;
    background-color: #fff1f0 !important;
  }
.tree-node.no-work {
    border: 2px solid #151515;
    /*border-color: #151515;*/
    background-color: #c4c4c4;
  }
  /* 收缩/展开时隐藏子节点 ul */
  .collapsed {
    display: none;
  }
  /* 右侧信息区域 */
  .node-info-area {
    border: 1px solid #ddd;
    padding: 10px;
    min-height: 200px;
  }
  /* 按钮区域 */
  .node-actions button {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  /* 限制模态框对话框的最大高度（比如距离屏幕上下各留 20px） */
.modal-dialog {
  max-height: calc(100vh - 60px);
  /* 如果模态框尺寸需要自适应宽度，可以考虑设置 width: auto; */
}

/* 限制模态框内容区域的最大高度并启用垂直滚动 */
.modal-content {
  max-height: calc(100vh - 60px);
}

/* 模态框主体区域启用滚动 */
.modal-body {
  overflow-y: auto;
}
/* 无任务 */
.cmd-none {
  color: #595959;
  background-color: #f0f0f0;
  border-color: #595959;
}

/* 待执行 */
.cmd-pending {
  color: #1890ff;
  background-color: #e6f7ff;
  border-color: #91d5ff;
}

/* 执行中 */
.cmd-running {
  color: #fa8c16;
  background-color: #fff7e6;
  border-color: #ffd591;
}

/* 待提交 LLM */
.cmd-waiting-llm {
  color: #722ed1;
  background-color: #f9f0ff;
  border-color: #d3adf7;
}

/* 提交 LLM 中 */
.cmd-submitting-llm {
  color: #52c41a;
  background-color: #f6ffed;
  border-color: #b7eb8f;
}

/* 让这些命令状态可以用在按钮或标签上 */
.cmd-none, .cmd-pending,
.cmd-running, .cmd-waiting-llm,
.cmd-submitting-llm {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.85rem;
  border: 1px solid;
  border-radius: 3px;
  margin-right: 4px;
}