✨ 终端颜色配置.

orion-ops-ui/src/views/authentication/login/locale/zh-CN.ts

@@ -7,7 +7,7 @@ export default {
   'login.form.userName.placeholder': '用户名',
   'login.form.password.placeholder': '密码',
   'login.form.login': '登录',
-  'login.banner.slogan1': '开箱即用的运维平台',
+  'login.banner.slogan1': '开箱即用的一站式智能运维平台',
   'login.banner.subSlogan1': '一站式操作 智能运维 让运维变得更简单',
   'login.banner.slogan2': '内置权限角色管理',
   'login.banner.subSlogan2': '让每一次操作都安全可控可追溯',

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

@@ -14,11 +14,11 @@
         </div>
       </div>
       <!-- 其他颜色 -->
-      <template v-for="color in TabColors">
+      <template v-for="color in toOptions(terminalTabColorKey)">
         <div class="color-wrapper"
-             :class="[formModel.color === color ? 'selected-color' : '']"
-             :style="{ '--color': `${color}` }"
-             @click="clickColor(color)">
+             :class="[formModel.color === color.value ? 'selected-color' : '']"
+             :style="{ '--color': `${color.value}` }"
+             @click="clickColor(color.value as string)">
           <div class="color-item">
             <div class="color-item-dot" />
           </div>
@@ -37,14 +37,17 @@
 <script lang="ts" setup>
   import type { ColorExtraSettingModel } from '../../../types/terminal.type';
   import { onMounted, ref } from 'vue';
-  import { TabColors } from '../../../types/terminal.const';
+  import { terminalTabColorKey } from '../../../types/terminal.const';
   import { getHostExtraItem } from '@/api/asset/host-extra';
+  import { useDictStore } from '@/store';
 
   const props = defineProps<{
     hostId: number,
     item: string
   }>();
 
+  const { toOptions } = useDictStore();
+
   const formModel = ref<ColorExtraSettingModel>({
     color: ''
   });

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

@@ -48,20 +48,6 @@ 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 = {
   // 使用默认认证方式
@@ -380,10 +366,14 @@ export const connectStatusKey = 'terminalConnectStatus';
 // 终端类型
 export const terminalEmulationTypeKey = 'terminalEmulationType';
 
+// 终端标签颜色
+export const terminalTabColorKey = 'terminalTabColor';
+
 // 加载的字典值
 export const dictKeys = [
   fontFamilyKey, fontSizeKey,
   fontWeightKey, cursorStyleKey,
   newConnectionTypeKey, extraSshAuthTypeKey,
-  connectStatusKey, terminalEmulationTypeKey
+  connectStatusKey, terminalEmulationTypeKey,
+  terminalTabColorKey
 ];