review: 修改 footer.

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/HostGroupController.java

@@ -1,143 +1,85 @@
-// package com.orion.ops.module.asset.controller;
-//
-// import com.orion.lang.define.wrapper.DataGrid;
-// import com.orion.ops.framework.biz.operator.log.core.annotation.OperatorLog;
-// import com.orion.ops.framework.common.validator.group.Page;
-// import com.orion.ops.framework.log.core.annotation.IgnoreLog;
-// import com.orion.ops.framework.log.core.enums.IgnoreLogMode;
-// import com.orion.ops.framework.web.core.annotation.RestWrapper;
-// import com.orion.ops.module.asset.define.operator.HostOperatorType;
-// import com.orion.ops.module.asset.entity.request.host.*;
-// import com.orion.ops.module.asset.entity.vo.HostConfigVO;
-// import com.orion.ops.module.asset.entity.vo.HostVO;
-// import com.orion.ops.module.asset.service.HostConfigService;
-// import com.orion.ops.module.asset.service.HostService;
-// import io.swagger.v3.oas.annotations.Operation;
-// import io.swagger.v3.oas.annotations.Parameter;
-// import io.swagger.v3.oas.annotations.tags.Tag;
-// import lombok.extern.slf4j.Slf4j;
-// import org.springframework.security.access.prepost.PreAuthorize;
-// import org.springframework.validation.annotation.Validated;
-// import org.springframework.web.bind.annotation.*;
-//
-// import javax.annotation.Resource;
-// import java.util.List;
-//
-// /**
-//  * 主机 api
-//  *
-//  * @author Jiahang Li
-//  * @version 1.0.0
-//  * @since 2023-9-11 14:16
-//  */
-// @Tag(name = "asset - 主机服务")
-// @Slf4j
-// @Validated
-// @RestWrapper
-// @RestController
-// @RequestMapping("/asset/host-group")
-// @SuppressWarnings({"ELValidationInJSP", "SpringElInspection"})
-// public class HostGroupController {
-//
-//     @Resource
-//     private HostService hostService;
-//
-//     @Resource
-//     private HostConfigService hostConfigService;
-//
-//     @OperatorLog(HostOperatorType.CREATE)
-//     @PostMapping("/create")
-//     @Operation(summary = "创建主机")
-//     @PreAuthorize("@ss.hasPermission('asset:host:create')")
-//     public Long createHost(@Validated @RequestBody HostCreateRequest request) {
-//         return hostService.createHost(request);
-//     }
-//
-//     @OperatorLog(HostOperatorType.UPDATE)
-//     @PutMapping("/update")
-//     @Operation(summary = "通过 id 更新主机")
-//     @PreAuthorize("@ss.hasPermission('asset:host:update')")
-//     public Integer updateHost(@Validated @RequestBody HostUpdateRequest request) {
-//         return hostService.updateHostById(request);
-//     }
-//
-//     @IgnoreLog(IgnoreLogMode.RET)
-//     @GetMapping("/get")
-//     @Operation(summary = "通过 id 查询主机")
-//     @Parameter(name = "id", description = "id", required = true)
-//     @Parameter(name = "extra", description = "是否查询额外信息")
-//     @Parameter(name = "config", description = "是否查询配置信息")
-//     @PreAuthorize("@ss.hasPermission('asset:host:query')")
-//     public HostVO getHost(@RequestParam("id") Long id,
-//                           @RequestParam(name = "extra", required = false) boolean extra,
-//                           @RequestParam(name = "config", required = false) boolean config) {
-//         HostQueryRequest request = new HostQueryRequest();
-//         request.setId(id);
-//         request.setExtra(extra);
-//         request.setConfig(config);
-//         return hostService.getHostById(request);
-//     }
-//
-//     @IgnoreLog(IgnoreLogMode.RET)
-//     @PostMapping("/list")
-//     @Operation(summary = "查询主机")
-//     @PreAuthorize("@ss.hasPermission('asset:host:query')")
-//     public List<HostVO> getHostList() {
-//         return hostService.getHostListByCache();
-//     }
-//
-//     @IgnoreLog(IgnoreLogMode.RET)
-//     @PostMapping("/query")
-//     @Operation(summary = "分页查询主机")
-//     @PreAuthorize("@ss.hasPermission('asset:host:query')")
-//     public DataGrid<HostVO> getHostPage(@Validated(Page.class) @RequestBody HostQueryRequest request) {
-//         return hostService.getHostPage(request);
-//     }
-//
-//     @OperatorLog(HostOperatorType.DELETE)
-//     @DeleteMapping("/delete")
-//     @Operation(summary = "通过 id 删除主机")
-//     @Parameter(name = "id", description = "id", required = true)
-//     @PreAuthorize("@ss.hasPermission('asset:host:delete')")
-//     public Integer deleteHost(@RequestParam("id") Long id) {
-//         return hostService.deleteHostById(id);
-//     }
-//
-//     @IgnoreLog(IgnoreLogMode.RET)
-//     @GetMapping("/get-config")
-//     @Operation(summary = "查询主机配置")
-//     @Parameter(name = "hostId", description = "hostId", required = true)
-//     @Parameter(name = "type", description = "配置类型", required = true)
-//     @PreAuthorize("@ss.hasPermission('asset:host:query')")
-//     public HostConfigVO getHostConfig(@RequestParam("hostId") Long hostId,
-//                                       @RequestParam(name = "type") String type) {
-//         return hostConfigService.getHostConfig(hostId, type);
-//     }
-//
-//     @IgnoreLog(IgnoreLogMode.RET)
-//     @GetMapping("/get-config-all")
-//     @Operation(summary = "查询主机配置 - 全部")
-//     @Parameter(name = "hostId", description = "hostId", required = true)
-//     @PreAuthorize("@ss.hasPermission('asset:host:query')")
-//     public List<HostConfigVO> getHostConfig(@RequestParam("hostId") Long hostId) {
-//         return hostConfigService.getHostConfig(hostId);
-//     }
-//
-//     @OperatorLog(HostOperatorType.UPDATE_CONFIG)
-//     @PutMapping("/update-config")
-//     @Operation(summary = "更新主机配置")
-//     @PreAuthorize("@ss.hasPermission('asset:host:update-config')")
-//     public Integer updateHostConfig(@Validated @RequestBody HostConfigUpdateRequest request) {
-//         return hostConfigService.updateHostConfig(request);
-//     }
-//
-//     @OperatorLog(HostOperatorType.UPDATE_CONFIG_STATUS)
-//     @PutMapping("/update-config-status")
-//     @Operation(summary = "更新主机配置状态")
-//     @PreAuthorize("@ss.hasPermission('asset:host:update-config')")
-//     public Integer updateHostConfigStatus(@Validated @RequestBody HostConfigUpdateStatusRequest request) {
-//         return hostConfigService.updateHostConfigStatus(request);
-//     }
-//
-// }
-//
+package com.orion.ops.module.asset.controller;
+
+import com.orion.ops.framework.biz.operator.log.core.annotation.OperatorLog;
+import com.orion.ops.framework.log.core.annotation.IgnoreLog;
+import com.orion.ops.framework.log.core.enums.IgnoreLogMode;
+import com.orion.ops.framework.web.core.annotation.RestWrapper;
+import com.orion.ops.module.asset.define.operator.HostOperatorType;
+import com.orion.ops.module.asset.service.HostService;
+import com.orion.ops.module.infra.api.DataGroupApi;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupCreateDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupDTO;
+import com.orion.ops.module.infra.entity.dto.data.DataGroupUpdateDTO;
+import com.orion.ops.module.infra.enums.DataGroupTypeEnum;
+import io.swagger.v3.oas.annotations.Operation;
+import io.swagger.v3.oas.annotations.tags.Tag;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.validation.annotation.Validated;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * 主机分组 api
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2023-11-09 16:16
+ */
+@Tag(name = "asset - 主机分组服务")
+@Slf4j
+@Validated
+@RestWrapper
+@RestController
+@RequestMapping("/asset/host-group")
+@SuppressWarnings({"ELValidationInJSP", "SpringElInspection"})
+public class HostGroupController {
+
+    @Resource
+    private HostService hostService;
+
+    @Resource
+    private DataGroupApi dataGroupApi;
+
+    // TODO 配置权限
+    // TODO 配置操作日志类型
+    // TODO 拖拽
+    // TODO http
+    // TODO 聚合查询关联
+
+    @OperatorLog(HostOperatorType.CREATE)
+    @PostMapping("/create")
+    @Operation(summary = "创建主机分组")
+    @PreAuthorize("@ss.hasPermission('asset:host-group:create')")
+    public Long createHostGroup(@Validated @RequestBody DataGroupCreateDTO request) {
+        return dataGroupApi.createDataGroup(DataGroupTypeEnum.HOST, request);
+    }
+
+    @IgnoreLog(IgnoreLogMode.RET)
+    @GetMapping("/tree")
+    @Operation(summary = "创建主机分组")
+    @PreAuthorize("@ss.hasPermission('asset:host-group:query')")
+    public List<DataGroupDTO> queryHostGroup() {
+        return dataGroupApi.getDataGroupTree(DataGroupTypeEnum.HOST);
+    }
+
+    @OperatorLog(HostOperatorType.UPDATE)
+    @PutMapping("/rename")
+    @Operation(summary = "修改名称")
+    @PreAuthorize("@ss.hasPermission('asset:host-group:update')")
+    public Integer updateHostGroupName(@Validated @RequestBody DataGroupUpdateDTO request) {
+        return dataGroupApi.renameDataGroup(request);
+    }
+
+    @OperatorLog(HostOperatorType.DELETE)
+    @DeleteMapping("/delete")
+    @Operation(summary = "删除主机分组")
+    @PreAuthorize("@ss.hasPermission('asset:host-group:delete')")
+    public Integer deleteHostGroup(@RequestParam("id") Long id) {
+        return dataGroupApi.deleteDataGroupById(id);
+    }
+
+}
+

orion-ops-ui/src/api/asset/host-group-rel.ts

@@ -0,0 +1,114 @@
+import type { DataGrid, Pagination } from '@/types/global';
+import type { TableData } from '@arco-design/web-vue/es/table/interface';
+import axios from 'axios';
+import qs from 'query-string';
+
+/**
+ * 数据分组关联创建请求
+ */
+export interface DataGroupRelCreateRequest {
+  groupId?: number;
+  relId?: number;
+  type?: string;
+  sort?: number;
+}
+
+/**
+ * 数据分组关联更新请求
+ */
+export interface DataGroupRelUpdateRequest extends DataGroupRelCreateRequest {
+  id?: number;
+}
+
+/**
+ * 数据分组关联查询请求
+ */
+export interface DataGroupRelQueryRequest extends Pagination {
+  searchValue?: string;
+  id?: number;
+  groupId?: number;
+  relId?: number;
+  type?: string;
+  sort?: number;
+}
+
+/**
+ * 数据分组关联查询响应
+ */
+export interface DataGroupRelQueryResponse extends TableData {
+  id: number;
+  groupId: number;
+  relId: number;
+  type: string;
+  sort: number;
+  createTime: number;
+  updateTime: number;
+  creator: string;
+  updater: string;
+}
+
+/**
+ * 创建数据分组关联
+ */
+export function createDataGroupRel(request: DataGroupRelCreateRequest) {
+  return axios.post('/infra/data-group-rel/create', request);
+}
+
+/**
+ * 更新数据分组关联
+ */
+export function updateDataGroupRel(request: DataGroupRelUpdateRequest) {
+  return axios.put('/infra/data-group-rel/update', request);
+}
+
+/**
+ * 查询数据分组关联
+ */
+export function getDataGroupRel(id: number) {
+  return axios.get<DataGroupRelQueryResponse>('/infra/data-group-rel/get', { params: { id } });
+}
+
+/**
+ * 批量查询数据分组关联
+ */
+export function batchGetDataGroupRelList(idList: Array<number>) {
+  return axios.get<DataGroupRelQueryResponse[]>('/infra/data-group-rel/batch-get', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
+/**
+ * 查询全部数据分组关联
+ */
+export function getDataGroupRelList(request: DataGroupRelQueryRequest) {
+  return axios.post<Array<DataGroupRelQueryResponse>>('/infra/data-group-rel/list', request);
+}
+
+/**
+ * 分页查询数据分组关联
+ */
+export function getDataGroupRelPage(request: DataGroupRelQueryRequest) {
+  return axios.post<DataGrid<DataGroupRelQueryResponse>>('/infra/data-group-rel/query', request);
+}
+
+/**
+ * 删除数据分组关联
+ */
+export function deleteDataGroupRel(id: number) {
+  return axios.delete('/infra/data-group-rel/delete', { params: { id } });
+}
+
+/**
+ * 批量删除数据分组关联
+ */
+export function batchDeleteDataGroupRel(idList: Array<number>) {
+  return axios.delete('/infra/data-group-rel/batch-delete', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}

orion-ops-ui/src/api/asset/host-group.ts

@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+/**
+ * 主机分组创建请求
+ */
+export interface HostGroupCreateRequest {
+  parentId?: number;
+  name?: string;
+}
+
+/**
+ * 主机分组更新请求
+ */
+export interface HostGroupUpdateRequest extends HostGroupCreateRequest {
+  id?: number;
+}
+
+/**
+ * 主机分组查询请求
+ */
+export interface HostGroupQueryRequest {
+  searchValue?: string;
+  id?: number;
+  parentId?: number;
+  name?: string;
+  type?: string;
+  sort?: number;
+}
+
+/**
+ * 主机分组查询响应
+ */
+export interface HostGroupQueryResponse {
+  id: number;
+  parentId: number;
+  name: string;
+  sort: number;
+  children: Array<HostGroupQueryResponse>;
+}
+
+/**
+ * 创建主机分组
+ */
+export function createHostGroup(request: HostGroupCreateRequest) {
+  return axios.post('/asset/host-group/create', request);
+}
+
+/**
+ * 更新主机分组
+ */
+export function updateHostGroup(request: HostGroupUpdateRequest) {
+  return axios.put('/asset/host-group/update', request);
+}
+
+/**
+ * 查询全部主机分组树
+ */
+export function getHostGroupTree() {
+  return axios.get<Array<HostGroupQueryResponse>>('/asset/host-group/tree');
+}
+
+/**
+ * 删除主机分组
+ */
+export function deleteHostGroup(id: number) {
+  return axios.delete('/asset/host-group/delete', { params: { id } });
+}

orion-ops-ui/src/assets/style/global.less

@@ -13,9 +13,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   --color-scrollbar-track: var(--color-neutral-1);
-  --color-scrollbar-thumb: #959FAB;
+  --color-scrollbar-thumb: var(--color-neutral-5);
 }
 
+// -- echarts
 .echarts-tooltip-diy {
   background: linear-gradient(304.17deg,
     rgba(253, 254, 255, 0.6) -6.04%,
@@ -67,31 +68,10 @@ body {
   }
 }
 
-.general-card {
-  border-radius: 4px;
-  border: none;
-
-  & > .arco-card-header {
-    height: auto;
-    padding: 16px;
-    border: none;
-  }
-
-  & > .arco-card-body {
-    padding: 0 16px 16px 16px;
-  }
-}
-
-.a-query-header-grid {
-  .arco-grid-item {
-    &:last-child {
-      display: flex !important;
-    }
-  }
-}
-
-.split-line {
-  border-color: rgb(var(--gray-2));
+// -- arco
+.arco-table-td-content {
+  color: rgba(var(--gray-9), .95);
+  font-size: 13px;
 }
 
 .arco-table-cell {
@@ -120,6 +100,31 @@ body {
   }
 }
 
+.a-query-header-grid {
+  .arco-grid-item {
+    &:last-child {
+      display: flex !important;
+    }
+  }
+}
+
+// -- card
+.general-card {
+  border-radius: 4px;
+  border: none;
+
+  & > .arco-card-header {
+    height: auto;
+    padding: 16px;
+    border: none;
+  }
+
+  & > .arco-card-body {
+    padding: 0 16px 16px 16px;
+  }
+}
+
+// -- click-icon
 .click-icon-wrapper {
   display: flex;
   justify-content: center;
@@ -136,6 +141,113 @@ body {
   background: var(--color-fill-3);
 }
 
+// -- element
+.split-line {
+  border-color: rgb(var(--gray-2));
+}
+
+.usn {
+  user-select: none;
+}
+
+.hide {
+  display: none;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.mx0 {
+  margin: 0 0;
+}
+
+.mx2 {
+  margin: 0 2px;
+}
+
+.mx4 {
+  margin: 0 4px;
+}
+
+.ml4 {
+  margin-left: 4px;
+}
+
+.mr4 {
+  margin-right: 4px;
+}
+
+.mt4 {
+  margin-top: 4px;
+}
+
+.mb4 {
+  margin-bottom: 4px;
+}
+
+.mx4 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.my4 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.ml8 {
+  margin-left: 8px;
+}
+
+.mr8 {
+  margin-right: 8px;
+}
+
+.mt8 {
+  margin-top: 8px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.mx8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.my8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.ml16 {
+  margin-left: 16px;
+}
+
+.mr16 {
+  margin-right: 16px;
+}
+
+.mt16 {
+  margin-top: 16px;
+}
+
+.mb16 {
+  margin-bottom: 16px;
+}
+
+.mx16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.my16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
 .copy-left {
   color: rgb(var(--arcoblue-6));
   cursor: pointer;
@@ -150,6 +262,7 @@ body {
   color: rgb(var(--red-6));
 }
 
+// -- 滚动条
 #app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

orion-ops-ui/src/assets/style/layout.less

@@ -1,10 +1,13 @@
+// -- container
 .layout-container {
   background-color: var(--color-fill-2);
   padding: 16px;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
+// -- table-view
 .table-search-card {
   width: 100%;
   padding-top: 16px;
@@ -64,10 +67,12 @@
   }
 }
 
+// -- modal
 .modal-form {
   padding: 24px 20px 4px 20px;
 }
 
+// -- card-view
 .card-list-item {
   height: 100%;
   display: flex;
@@ -105,109 +110,8 @@
   padding: 18px 24px 14px 24px;
 }
 
-.arco-table-td-content {
-  color: rgba(var(--gray-9), .95);
-  font-size: 13px;
-}
-
-.usn {
-  user-select: none;
-}
-
-.hide {
-  display: none;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.mx0 {
-  margin: 0 0;
-}
-
-.mx2 {
-  margin: 0 2px;
-}
-
-.mx4 {
-  margin: 0 4px;
-}
-
-.ml4 {
-  margin-left: 4px;
-}
-
-.mr4 {
-  margin-right: 4px;
-}
-
-.mt4 {
-  margin-top: 4px;
-}
-
-.mb4 {
-  margin-bottom: 4px;
-}
-
-.mx4 {
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-.my4 {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
-.ml8 {
-  margin-left: 8px;
-}
-
-.mr8 {
-  margin-right: 8px;
-}
-
-.mt8 {
-  margin-top: 8px;
-}
-
-.mb8 {
-  margin-bottom: 8px;
-}
-
-.mx8 {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.my8 {
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.ml16 {
-  margin-left: 16px;
-}
-
-.mr16 {
-  margin-right: 16px;
-}
-
-.mt16 {
-  margin-top: 16px;
-}
-
-.mb16 {
-  margin-bottom: 16px;
-}
-
-.mx16 {
-  margin-left: 16px;
-  margin-right: 16px;
-}
-
-.my16 {
-  margin-top: 16px;
-  margin-bottom: 16px;
+// -- card
+.simple-card {
+  background: var(--color-bg-2);
+  border-radius: 4px;
 }

orion-ops-ui/src/components/app/footer/index.vue

@@ -1,10 +1,17 @@
 <template>
   <a-layout-footer class="footer">
-    <div class="footer-text">
-      项目地址 <a target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">github</a> - <a
-      target="_blank" href="https://gitee.com/lijiahangmax/orion-ops-pro">gitee</a>
-      <a class="license" target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro/blob/main/LICENSE">License - Apache 2.0</a>
-    </div>
+    <a-space direction="vertical" size="medium">
+      <a-space size="large">
+        <a target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">官网</a>
+        <a target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">文档</a>
+        <a target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">教程</a>
+        <a target="_blank" href="https://github.com/lijiahangmax/orion-ops-pro">github</a>
+        <a target="_blank" href="https://gitee.com/lijiahangmax/orion-ops-pro">gitee</a>
+      </a-space>
+      <span class="copyright">
+          Copyright<icon-copyright /> 2023 By OrionOpsPro
+        </span>
+    </a-space>
   </a-layout-footer>
 </template>
 
@@ -16,21 +23,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 40px;
-    color: var(--color-text-2);
+    height: 80px;
     text-align: center;
 
-    &-text {
-      text-wrap: none;
-
-      a {
-        text-decoration: none;
-      }
-
-      .license {
-        display: inline-block;
-        margin-left: 16px;
-      }
+    a {
+      text-decoration: none;
+      color: rgb(var(--primary-6));
     }
+
+    .copyright {
+      color: var(--color-text-3)
+    }
+
   }
 </style>

orion-ops-ui/src/components/index.ts

@@ -30,10 +30,10 @@ use([
 
 export default {
   install(Vue: App) {
-    Vue.component('Chart', Chart);
-    Vue.component('Breadcrumb', Breadcrumb);
+    Vue.component('chart', Chart);
+    Vue.component('breadcrumb', Breadcrumb);
     Vue.component('a-query-header', AQueryHeader);
     Vue.component('card-list', CardList);
-    Vue.component('Editor', Editor);
+    Vue.component('editor', Editor);
   },
 };

orion-ops-ui/src/components/system/menu/grant/menu-grant-table.vue

@@ -136,6 +136,7 @@
     }
   });
 
+  // fixme 提成公共方法
   // 寻找当前节点
   const findNode = (id: number, arr: Array<MenuQueryResponse>): MenuQueryResponse | undefined => {
     for (let node of arr) {

orion-ops-ui/src/components/view/card-list/index.vue

@@ -6,16 +6,16 @@
         <!-- 信息部分 -->
         <div class="card-list-info">
           <!-- 路由面包屑 -->
-          <Breadcrumb />
+          <breadcrumb />
           <!-- 分页部分 -->
           <div class="pagination-wrapper">
             <a-pagination v-if="pagination"
                           size="mini"
-                          v-model:current="pagination.current"
-                          v-model:page-size="pagination.pageSize"
+                          v-model:current="(pagination as PaginationProps).current"
+                          v-model:page-size="(pagination as PaginationProps).pageSize"
                           v-bind="pagination"
                           :auto-adjust="false"
-                          @change="page => emits('pageChange', page, pagination.pageSize)"
+                          @change="page => emits('pageChange', page, (pagination as PaginationProps).pageSize)"
                           @page-size-change="limit => emits('pageChange', 1, limit)" />
           </div>
         </div>

orion-ops-ui/src/layout/default-layout.vue

@@ -4,7 +4,7 @@
     <div v-if="navbar" class="layout-navbar">
       <NavBar />
     </div>
-    <a-layout>
+    <a-layout style="flex-direction: row;">
       <!-- 左侧菜单栏 -->
       <a-layout-sider v-if="renderMenu"
                       v-show="!hideMenu"
@@ -33,10 +33,13 @@
       </a-drawer>
       <!-- body -->
       <a-layout class="layout-content" :style="paddingStyle">
+        <!-- 页签 -->
         <TabBar v-if="appStore.tabBar" />
+        <!-- 页面 -->
         <a-layout-content>
           <PageLayout />
         </a-layout-content>
+        <!-- 页脚 -->
         <Footer v-if="footer" />
       </a-layout>
     </a-layout>
@@ -81,9 +84,7 @@
     return { ...paddingLeft, ...paddingTop };
   });
 
-  /**
-   * 设置菜单展开状态
-   */
+  // 设置菜单展开状态
   const setCollapsed = (val: boolean) => {
     if (!isInit.value) return;
     appStore.updateSettings({ menuCollapse: val });
@@ -117,7 +118,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 100;
+    z-index: 120;
     width: 100%;
     height: @nav-size-height;
   }

orion-ops-ui/src/router/routes/modules/asset.ts

@@ -7,6 +7,10 @@ const ASSET: AppRouteRecordRaw = {
   component: DEFAULT_LAYOUT,
   children: [
     {
+      name: 'assetHostGroup',
+      path: '/asset/host-group',
+      component: () => import('@/views/asset/host-group/index.vue'),
+    }, {
       name: 'assetHost',
       path: '/asset/host',
       component: () => import('@/views/asset/host/index.vue'),

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

@@ -0,0 +1,278 @@
+<template>
+  <div class="tree-container">
+    <a-tree
+      :blockNode="true"
+      :draggable="props.editMode"
+      :data="treeData">
+
+      <template #title="node">
+        <template v-if="node.editable">
+          <a-input size="mini"
+                   v-model="currName"
+                   :max-length="32"
+                   :disabled="node.loading"
+                   autofocus
+                   @change="() => saveNode(node.key)">
+            <template #suffix>
+              <!-- 加载中 -->
+              <icon-loading v-if="node.loading" />
+              <!-- 保存 -->
+              <icon-check v-else
+                          class="pointer"
+                          title="保存"
+                          @click="saveNode(node.key)" />
+            </template>
+          </a-input>
+        </template>
+
+        <span class="node-title" v-else>
+          {{ node.title }}
+        </span>
+      </template>
+      <!-- 操作图标 -->
+      <template #drag-icon="{ node }">
+        <a-space v-if="!node.editable">
+          <icon-edit class="tree-icon"
+                     title="重命名"
+                     @click="rename(node.title, node.key)" />
+          <icon-delete class="tree-icon"
+                       title="删除"
+                       @click="rename(node.title, node.key)" />
+          <icon-plus class="tree-icon"
+                     title="新增"
+                     @click="rename(node.title, node.key)" />
+        </a-space>
+      </template>
+    </a-tree>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-tree'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { nextTick, ref } from 'vue';
+  import { TagProps } from '@/store/modules/tab-bar/types';
+  import { TreeNodeData } from '@arco-design/web-vue';
+
+  const props = defineProps({
+    editMode: Boolean
+  });
+
+  const currName = ref();
+
+
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  // 保存节点
+  const saveNode = async (key: string) => {
+    // 寻找节点
+    const node = findNode(key, treeData.value);
+    if (currName.value) {
+      node.loading = true;
+      try {
+        if (key.startsWith('create')) {
+          // 调用创建 api
+          await sleep(340);
+          node.key = 'await id';
+        } else {
+          // 调用重命名 api
+          await sleep(340);
+        }
+        node.title = currName.value;
+      } catch (e) {
+      } finally {
+        node.loading = false;
+      }
+    } else {
+      if (key.startsWith('create')) {
+        // 寻找父节点
+        // 移除子节点
+      }
+    }
+    node.editable = false;
+  };
+
+  // 重命名
+  const rename = (title: string, key: string) => {
+    const node = findNode(key, treeData.value);
+    currName.value = title;
+    node.editable = true;
+  };
+
+  // 寻找当前节点
+  const findNode = (id: string, arr: Array<TreeNodeData>): TreeNodeData | undefined => {
+    for (let node of arr) {
+      if (node.key === id) {
+        return node;
+      }
+    }
+    // 寻找子级
+    for (let node of arr) {
+      if (node?.children?.length) {
+        const inChildNode = findNode(id, node.children);
+        if (inChildNode) {
+          return inChildNode;
+        }
+      }
+    }
+    return undefined;
+  };
+
+  function onIconClick(node: any) {
+    const children = node.children || [];
+    children.push({
+      title: 'new tree node',
+      key: node.key + '-' + (children.length + 1)
+    });
+    node.children = children;
+
+    treeData.value = [...treeData.value];
+  }
+
+  const treeData = ref(
+    [
+      {
+        title: 'Trunk',
+        key: '0-0',
+        children: [
+          {
+            title: 'Leaf',
+            key: '0-0-1',
+          },
+          {
+            title: 'Branch',
+            key: '0-0-2',
+            children: [
+              {
+                title: 'Leaf',
+                key: '0-0-2-1'
+              }
+            ]
+          },
+        ],
+      },
+      {
+        title: 'Trunk',
+        key: '0-1',
+        children: [
+          {
+            title: 'Branch',
+            key: '0-1-1',
+            children: [
+              {
+                title: 'Leaf',
+                key: '0-1-1-11',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-1-12',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-1-13',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-1-41',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-1-51',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-1-61',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-17-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-81-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-19-1-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-10-1-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-1-111-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-21-1-1',
+              },
+              {
+                title: 'Leaf',
+                key: '0-31-1-1',
+              },
+              {
+                title: 'Leaf',
+                key: '40-1-1-2',
+              },
+            ]
+          },
+          {
+            title: 'Leaf',
+            key: '0-1-2',
+          },
+        ],
+      },
+    ]
+  );
+</script>
+
+<style lang="less" scoped>
+  .tree-container {
+    min-width: 100%;
+    width: max-content;
+    user-select: none;
+  }
+
+  :deep(.arco-tree-node-title) {
+    padding-right: 48px;
+
+    &:hover {
+      background-color: var(--color-fill-1);
+    }
+
+    .arco-tree-node-title-text {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .node-title {
+
+  }
+
+  .node-handler {
+
+  }
+
+  :deep(.arco-tree-node-selected) {
+    background-color: var(--color-fill-2);
+  }
+
+  .tree-icon {
+    font-size: 12px;
+    color: rgb(var(--primary-6));
+  }
+
+  .drag-icon {
+    padding-left: -8px;
+  }
+
+</style>

orion-ops-ui/src/views/asset/host-group/components/host-group-view.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="view-container">
+    <!-- 左侧菜单 -->
+    <div class="simple-card tree-card">
+      <!-- 主机分组标题 -->
+      <div class="tree-card-header">
+        <!-- 标题 -->
+        <div class="tree-card-title">
+          主机菜单
+        </div>
+        <div class="tree-card-switch">
+          <a-switch type="round"
+                    v-model="editMode"
+                    checked-text="编辑模式"
+                    unchecked-text="授权模式" />
+        </div>
+      </div>
+      <!-- 主机分组树 -->
+      <div class="tree-card-main">
+        <host-group-tree ref="tree" :editMode="editMode" />
+      </div>
+    </div>
+    <!-- 身体部分 -->
+    <div class="view-body">
+      <div class="simple-card fixed-header">
+        <!-- 头部左侧 -->
+        <a-space>
+          <a-select placeholder="选择角色" />
+          <a-select placeholder="选择用户" />
+        </a-space>
+        <!-- 头部右侧 -->
+        <a-space>
+          <!-- 配置 -->
+          <a-button type="primary">
+            配置
+            <template #icon>
+              <icon-layers />
+            </template>
+          </a-button>
+          <!-- 授权 -->
+          <a-button type="primary">
+            授权
+            <template #icon>
+              <icon-safe />
+            </template>
+          </a-button>
+        </a-space>
+      </div>
+      <!-- 右侧数据 -->
+      <div class="simple-card data-content">
+        右侧数据
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-group-view'
+  };
+</script>
+
+<script lang="ts" setup>
+  import HostGroupTree from './host-group-tree.vue';
+  import { ref } from 'vue';
+
+  const editMode = ref(true);
+
+</script>
+
+<style lang="less" scoped>
+  @tree-width: 50%;
+
+  .view-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  .tree-card {
+    margin-right: 16px;
+    width: @tree-width;
+    height: 100%;
+    position: absolute;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      position: relative;
+      width: 100%;
+      height: 44px;
+      border-bottom: 1px var(--color-border-2) solid;
+    }
+
+    &-title {
+      color: rgba(var(--gray-10), .95);
+      font-size: 16px;
+      font-weight: 600;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &-main {
+      padding: 8px 8px 8px 16px;
+      position: relative;
+      width: 100%;
+      height: calc(100% - 48px);
+      overflow: auto;
+    }
+  }
+
+  .view-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: calc(100% - @tree-width - 16px);
+    position: absolute;
+    left: calc(@tree-width + 16px);
+
+    .fixed-header {
+      display: flex;
+      justify-content: space-between;
+
+      margin-bottom: 16px;
+      padding: 8px 16px;
+      height: 48px;
+    }
+
+    .data-content {
+      display: flex;
+      padding: 16px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="index-container" v-if="render">
+    <host-group-view />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'assetHostGroup'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { Message } from '@arco-design/web-vue';
+
+  import { computed, ref, onBeforeMount, onUnmounted } from 'vue';
+  import { useAppStore, useCacheStore, useDictStore } from '@/store';
+  import HostGroupView from './components/host-group-view.vue';
+
+  const render = ref(false);
+  const table = ref();
+  const card = ref();
+  const modal = ref();
+  const config = ref();
+  const appStore = useAppStore();
+  const cacheStore = useCacheStore();
+
+  // 添加回调
+  const modalAddCallback = () => {
+    table.value.addedCallback();
+  };
+
+  // 修改回调
+  const modalUpdateCallback = () => {
+    table.value.updatedCallback();
+  };
+
+  // 加载 tags
+  const loadTags = async () => {
+    try {
+      // 设置到缓存
+      // cacheStore.set('hostTags', data);
+    } catch {
+      Message.error('tag加载失败');
+    }
+  };
+
+  onBeforeMount(async () => {
+    // 加载角色列表
+
+    // 加载用户列表
+
+    // 加载主机列表
+
+    render.value = true;
+  });
+
+  // 卸载时清除 cache
+  onUnmounted(() => {
+    cacheStore.reset('user', 'roles', 'hosts');
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .index-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+  }
+</style>

orion-ops-ui/src/views/asset/host/components/host-table.vue

@@ -50,8 +50,8 @@
       <!-- 右侧操作 -->
       <div class="table-right-bar-handle">
         <a-space>
-          <!-- 仅看收藏 -->
-          <a-checkbox v-model="formModel.favorite" @change="fetchTableData()">
+          <!-- 仅看收藏 fixme 去掉  -->
+          <a-checkbox v-if="false" v-model="formModel.favorite" @change="fetchTableData()">
             <template #checkbox="{ checked }">
               <a-tag :checked="checked"
                      class="only-favorite"

orion-ops-ui/src/views/user/role/types/const.ts

@@ -6,30 +6,48 @@ export const RoleStatus = {
   ENABLED: 1,
 };
 
+// 查询操作
+const queryType = ['query', 'view'];
+const addType = ['add', 'create'];
+const updateType = ['update', 'modify'];
+const deleteType = ['delete', 'remove'];
+const standardRead = [...queryType];
+const standardWrite = [...addType, ...updateType, ...deleteType];
+
 // 快速分配菜单操作
 export const quickGrantMenuOperator = [
   {
     name: '',
     rule: undefined
+  }, {
+    name: '常规读操作',
+    rule: (perm: string) => {
+      return !!standardRead.find(s => perm.includes(s));
+    }
+  }, {
+    name: '常规写操作',
+    rule: (perm: string) => {
+      return !!standardWrite.find(s => perm.includes(s));
+    }
   }, {
     name: '查询',
     rule: (perm: string) => {
-      return perm.includes('query') || perm.includes('view');
+      return !!queryType.find(s => perm.includes(s));
     }
   }, {
     name: '新增',
     rule: (perm: string) => {
-      return perm.includes('add') || perm.includes('create');
+      return !!addType.find(s => perm.includes(s));
     }
   }, {
     name: '修改',
     rule: (perm: string) => {
-      return perm.includes('update') || perm.includes('modify');
+      return !!updateType.find(s => perm.includes(s));
     }
   }, {
     name: '删除',
     rule: (perm: string) => {
-      return perm.includes('delete') || perm.includes('remove');
+      return !!deleteType.find(s => perm.includes(s));
     }
   }, {
     name: '导入',