✨ 终端颜色配置.

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/AssetAuthorizedDataServiceImpl.java

@@ -334,7 +334,7 @@ public class AssetAuthorizedDataServiceImpl implements AssetAuthorizedDataServic
             hosts.forEach(s -> {
                 HostColorExtraModel color = JSON.parseObject(colorMap.get(s.getId()), HostColorExtraModel.class);
                 if (color != null) {
-                    s.setColor(Refs.unrefToString(color.getColor()));
+                    s.setColor(color.getColor());
                 }
             });
         }

orion-ops-ui/src/views/host/terminal/components/layout/terminal-panel.vue

@@ -22,7 +22,7 @@
         <!-- 标题 -->
         <template #title>
           <span class="tab-title-wrapper"
-                :style="{ 'border-bottom': `4px ${tab.color || 'transparent'} solid` }">
+                :style="{ 'border-bottom': `2px ${tab.color || 'transparent'} solid` }">
             <span class="tab-title-icon">
               <component :is="tab.icon" />
             </span>
@@ -106,7 +106,7 @@
     height: 100%;
     display: flex;
     align-items: center;
-    padding: 11px 18px 7px 14px;
+    padding: 11px 18px 9px 14px;
 
     .tab-title-icon {
       font-size: 16px;

orion-ops-ui/src/views/host/terminal/components/setting/extra/color-setting-form.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <a-alert class="mb16">刷新页面后生效</a-alert>
+    <!-- 颜色选择 -->
+    <div class="color-setting-container">
+      <!-- 透明色 -->
+      <div class="color-wrapper"
+           :style="{ '--color': 'transparent' }"
+           @click="clickColor('')">
+        <div class="color-item">
+        <span class="color-item-cancel">
+          <icon-stop />
+        </span>
+        </div>
+      </div>
+      <!-- 其他颜色 -->
+      <template v-for="color in TabColors">
+        <div class="color-wrapper"
+             :class="[formModel.color === color ? 'selected-color' : '']"
+             :style="{ '--color': `${color}` }"
+             @click="clickColor(color)">
+          <div class="color-item">
+            <div class="color-item-dot" />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'colorSettingForm'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ColorExtraSettingModel } from '../../../types/terminal.type';
+  import { onMounted, ref } from 'vue';
+  import { TabColors } from '../../../types/terminal.const';
+  import { getHostExtraItem } from '@/api/asset/host-extra';
+
+  const props = defineProps<{
+    hostId: number,
+    item: string
+  }>();
+
+  const formModel = ref<ColorExtraSettingModel>({
+    color: ''
+  });
+
+  // 渲染表单
+  const renderForm = async () => {
+    const { data } = await getHostExtraItem<ColorExtraSettingModel>({ hostId: props.hostId, item: props.item });
+    formModel.value = data;
+  };
+
+  // 设置颜色
+  const clickColor = (color: string) => {
+    formModel.value.color = color;
+  };
+
+  // 获取值
+  const getValue = async () => {
+    return JSON.stringify(formModel.value);
+  };
+
+  defineExpose({ getValue });
+
+  onMounted(renderForm);
+
+</script>
+
+<style lang="less" scoped>
+  .color-setting-container {
+    display: flex;
+  }
+
+  .color-wrapper {
+    margin-right: 8px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all .3s ease-in-out;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--color-fill-3);
+    }
+
+    .color-item {
+      width: 20px;
+      height: 20px;
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &-dot {
+        width: 100%;
+        height: 100%;
+        border-radius: 100%;
+        background: var(--color);
+      }
+
+      &-cancel {
+        color: var(--color-content-text-1);
+        font-size: 22px;
+        line-height: 1;
+      }
+    }
+  }
+
+  .color-wrapper.selected-color {
+
+    .color-item {
+      border: 2px solid var(--color);
+
+      &-dot {
+        width: 12px;
+        height: 12px;
+        box-sizing: border-box;
+        background: var(--color);
+        padding: 4px;
+        position: relative;
+      }
+    }
+  }
+
+</style>

orion-ops-ui/src/views/host/terminal/components/setting/extra/host-setting-modal.vue

@@ -15,7 +15,7 @@
            :on-before-ok="handlerOk"
            @close="handleClose">
     <a-spin class="full" :loading="loading">
-      <a-tabs v-model="item"
+      <a-tabs v-model:active-key="activeItem"
               position="left"
               type="rounded"
               :lazy-load="true">
@@ -27,8 +27,9 @@
         </a-tab-pane>
         <!-- 标签颜色 -->
         <a-tab-pane :key="ExtraSettingItems.COLOR" title="标签颜色">
-          <!-- TODO -->
-          <span>颜色</span>
+          <color-setting-form ref="colorForm"
+                              :host-id="hostId as number"
+                              :item="ExtraSettingItems.COLOR" />
         </a-tab-pane>
       </a-tabs>
     </a-spin>
@@ -47,14 +48,15 @@
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
   import { ExtraSettingItems } from '../../../types/terminal.const';
-  import SshSettingForm from './ssh-setting-form.vue';
   import { updateHostExtra } from '@/api/asset/host-extra';
   import { Message } from '@arco-design/web-vue';
+  import SshSettingForm from './ssh-setting-form.vue';
+  import ColorSettingForm from './color-setting-form.vue';
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
 
-  const item = ref<string>(ExtraSettingItems.SSH);
+  const activeItem = ref<string>(ExtraSettingItems.SSH);
   const title = ref<string>();
   const hostId = ref<number>();
   const sshForm = ref();
@@ -74,10 +76,10 @@
     setLoading(true);
     try {
       let value;
-      if (item.value === ExtraSettingItems.SSH) {
+      if (activeItem.value === ExtraSettingItems.SSH) {
         // SSH 配置
         value = await sshForm.value.getValue();
-      } else if (item.value === ExtraSettingItems.COLOR) {
+      } else if (activeItem.value === ExtraSettingItems.COLOR) {
         // 颜色配置
         value = await colorForm.value.getValue();
       }
@@ -87,7 +89,7 @@
       // 保存
       await updateHostExtra({
         hostId: hostId.value,
-        item: item.value,
+        item: activeItem.value,
         extra: value as string
       });
       Message.success('保存成功');

orion-ops-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue

@@ -44,7 +44,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SshExtraModel } from '../../../types/terminal.type';
+  import type { SshExtraSettingModel } from '../../../types/terminal.type';
   import { onMounted, ref } from 'vue';
   import { getHostExtraItem } from '@/api/asset/host-extra';
   import { ExtraSshAuthType, extraSshAuthTypeKey } from '../../../types/terminal.const';
@@ -60,11 +60,13 @@
   const { toRadioOptions } = useDictStore();
 
   const formRef = ref();
-  const formModel = ref<SshExtraModel>({});
+  const formModel = ref<SshExtraSettingModel>({
+    authType: ExtraSshAuthType.DEFAULT
+  });
 
   // 渲染表单
   const renderForm = async () => {
-    const { data } = await getHostExtraItem<SshExtraModel>({ hostId: props.hostId, item: props.item });
+    const { data } = await getHostExtraItem<SshExtraSettingModel>({ hostId: props.hostId, item: props.item });
     formModel.value = data;
   };
 

orion-ops-ui/src/views/host/terminal/types/terminal.const.ts

@@ -48,6 +48,20 @@ export const ExtraSettingItems = {
   COLOR: 'color'
 };
 
+// tab 颜色
+export const TabColors = [
+  'rgb(var(--red-6))',
+  'rgb(var(--orange-6))',
+  'rgb(var(--yellow-6))',
+  'rgb(var(--green-6))',
+  'rgb(var(--cyan-6))',
+  'rgb(var(--blue-6))',
+  'rgb(var(--arcoblue-6))',
+  'rgb(var(--purple-6))',
+  'rgb(var(--pinkpurple-6))',
+  'rgb(var(--gray-6))',
+];
+
 // 主机额外配置 ssh 认证方式
 export const ExtraSshAuthType = {
   // 使用默认认证方式

orion-ops-ui/src/views/host/terminal/types/terminal.type.ts

@@ -60,13 +60,18 @@ export interface ShortcutKeyItem {
 }
 
 // ssh 额外配置
-export interface SshExtraModel {
+export interface SshExtraSettingModel {
   authType?: string;
   username?: string;
   keyId?: number;
   identityId?: number;
 }
 
+// 颜色 额外配置
+export interface ColorExtraSettingModel {
+  color: string;
+}
+
 // session tab
 export interface PanelSessionTab {
   type: string;
@@ -97,25 +102,6 @@ export interface OutputPayload {
   [key: string]: string;
 }
 
-/*
-TODO
---red-6: 245, 63, 63;
---orangered-6: 247, 114, 52;
---orange-6: 255, 125, 0;
---gold-6: 247, 186, 30;
---yellow-6: 250, 220, 25;
---lime-6: 159, 219, 29;
---green-6: 0, 180, 42;
---cyan-6: 20, 201, 201;
---blue-6: 52, 145, 250;
---arcoblue-6: 22, 93, 255;
---purple-6: 114, 46, 209;
---pinkpurple-6: 217, 26, 217;
---magenta-6: 245, 49, 157;
---gray-6: 134, 144, 156;
-
- */
-
 // 终端 tab 管理器定义
 export interface ITerminalTabManager<T extends TerminalTabItem = TerminalTabItem> {
   // 当前 tab