feat: 获取主题变量 hook &资源池model

frontend/src/api/modules/system/resourcePool.ts

@@ -1,6 +1,7 @@
 import MSR from '@/api/http/index';
 import { PoolListUrl, UpdatePoolUrl, AddPoolUrl, DetailPoolUrl } from '@/api/requrls/system/resourcePool';
-import type { ResourcePoolItem, ResourcePoolInfo } from '@/models/system/resourcePool';
+
+import type { ResourcePoolItem, AddResourcePoolParams } from '@/models/system/resourcePool';
 import type { TableQueryParams } from '@/models/common';
 
 // 获取资源池列表
@@ -14,7 +15,7 @@ export function updatePoolInfo(data: ResourcePoolItem) {
 }
 
 // 添加资源池
-export function addPool(data: ResourcePoolInfo) {
+export function addPool(data: AddResourcePoolParams) {
   return MSR.post({ url: AddPoolUrl, data });
 }
 

frontend/src/assets/style/arco-reset.less

@@ -100,6 +100,13 @@
   }
 }
 
+/** 气泡确认框 **/
+.ms-pop-confirm {
+  .arco-btn-secondary {
+    @apply hidden;
+  }
+}
+
 /** 按钮 **/
 .arco-btn-primary {
   background-color: rgb(var(--primary-5)) !important;
@@ -159,6 +166,7 @@
   }
 }
 .arco-input-error,
+.arco-select-view-error,
 .arco-input-tag-error {
   border-color: rgb(var(--danger-6)) !important;
   background-color: var(--color-bg-2) !important;
@@ -188,9 +196,13 @@
 
       border: 1px solid var(--color-text-input-border);
       border-radius: var(--border-radius-small) !important;
-      .btn-outline-sec-disabled();
       .btn-outline-sec-hover();
       .btn-outline-sec-active();
+      &:disabled {
+        border: 1px solid var(--color-text-input-border) !important;
+        color: var(--color-text-4);
+        background-color: var(--color-text-n8) !important;
+      }
     }
   }
 }
@@ -241,6 +253,52 @@
   }
 }
 
+/** radio **/
+.arco-radio-group-button {
+  padding: 1px;
+  background-color: var(--color-text-n8);
+  .arco-radio-button {
+    @apply bg-transparent;
+
+    margin: 1px;
+  }
+  .arco-radio-checked {
+    @apply bg-white;
+
+    color: rgb(var(--primary-4));
+  }
+}
+.arco-radio {
+  .arco-radio-icon {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border: 1px solid var(--color-text-input-border);
+    &::after {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}
+.arco-radio-checked {
+  .arco-radio-icon {
+    @apply !bg-white;
+
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    border: 1px solid rgb(var(--primary-6));
+    &::after {
+      top: 2px;
+      left: 2px;
+      width: 10px;
+      height: 10px;
+      background-color: rgb(var(--primary-6)) !important;
+      transform: scale(0.8) !important;
+    }
+  }
+}
+
 /** Message **/
 .arco-message {
   border: 0.5px solid var(--color-text-n8);

frontend/src/assets/style/var.less

@@ -28,7 +28,7 @@
     @apply !bg-white;
 
     border: 1px solid rgb(var(--primary-3)) !important;
-    color: rgb(var(--primary-3));
+    color: rgb(var(--primary-3)) !important;
   }
 }
 .btn-outline-sec-hover() {

frontend/src/hooks/useThemeVars.ts

@@ -0,0 +1,32 @@
+const bodyStyle = getComputedStyle(document.body);
+
+export const getSingleVar = (_var: string) => {
+  return bodyStyle.getPropertyValue(_var);
+};
+
+export const P9 = getSingleVar('--primary-9');
+export const P5 = getSingleVar('--primary-5');
+export const P4 = getSingleVar('--primary-4');
+export const P3 = getSingleVar('--primary-3');
+export const P2 = getSingleVar('--primary-2');
+export const P1 = getSingleVar('--primary-1');
+
+export const primaryVars = {
+  P1,
+  P2,
+  P3,
+  P4,
+  P5,
+  P9,
+};
+
+export const allVars = {
+  ...primaryVars,
+};
+
+export const useThemeVars = () => {
+  return {
+    allVars,
+    getSingleVar,
+  };
+};

frontend/src/models/system/resourcePool.ts

@@ -1,20 +1,48 @@
-import type { OrganizationListItem } from './user';
-
-export interface ResourcePoolItem {
-  id: string;
-  name: string;
-  type: string;
-  description: string;
-  enable: boolean;
-  createTime: number;
-  updateTime: number;
-  createUser: string;
-  apiTest: boolean;
-  loadTest: boolean;
-  uiTest: boolean;
-  serverUrl: string;
-  deleted: boolean;
-  configuration: string;
-  organizationList: OrganizationListItem[];
-  resources: string[];
+// Node 类型资源信息
+export interface NodesListItem {
+  ip: string;
+  port: string;
+  monitor: string;
+  concurrentNumber: number;
 }
+
+// 资源池配置信息对象
+export interface TestResourceDTO {
+  loadTestImage: string; // 镜像
+  loadTestHeap: string; // Jmeter heap
+  nodesList: NodesListItem[]; // node资源
+  ip: string; // k8s ip
+  token: string; // k8s token
+  nameSpaces: string; // k8s 命名空间
+  concurrentNumber: number; // k8s 最大并发数
+  podThreads: number; // k8s 单pod最大线程数
+  jobDefinition: string; // k8s job自定义模板
+  apiTestImage: string; // k8s api测试镜像
+  deployName: string; // k8s api测试部署名称
+  uiGrid: string; // ui测试selenium-grid
+  orgIds: string[]; // 应用范围选择指定组织时的id集合
+}
+
+// 资源池信息对象
+export interface ResourcePoolInfo {
+  name: string; // 资源池名称
+  description: string; // 资源池描述
+  type: string; // 资源池类型
+  enable: boolean; // 是否启用
+  apiTest: boolean; // 是否支持api测试
+  loadTest: boolean; // 是否支持性能测试
+  uiTest: boolean; // 是否支持ui测试
+  serverUrl: string; // 资源池地址
+  allOrg: boolean; // 是否应用范围选择全部组织
+  testResourceDTO: TestResourceDTO; // 测试资源信息对象
+}
+
+// 资源池列表项对象
+export interface ResourcePoolItem extends ResourcePoolInfo {
+  id: string;
+}
+
+// 添加资源池参数对象
+export type AddResourcePoolParams = Omit<ResourcePoolInfo, 'testResourceDTO'> & {
+  testResourceDTO?: Partial<TestResourceDTO>;
+};