diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java index a9da8430..b0d1a3dc 100644 --- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java +++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java @@ -1,5 +1,6 @@ package com.orion.ops.module.infra.handler.preference.model; +import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import io.swagger.v3.oas.annotations.media.Schema; import lombok.AllArgsConstructor; @@ -24,9 +25,50 @@ public class TerminalPreferenceModel implements PreferenceModel { private String darkTheme; @Schema(description = "终端主题") - private JSONObject terminalTheme; + private JSONObject themeSchema; @Schema(description = "显示设置") - private JSONObject viewSetting; + private JSONObject displaySetting; + + @Schema(description = "背景设置") + private JSONObject backgroundSetting; + + @Data + @Builder + @NoArgsConstructor + @AllArgsConstructor + public static class DisplaySettingModel { + + @Schema(description = "字体样式") + private String fontFamily; + + @Schema(description = "字体大小") + private Integer fontSize; + + @Schema(description = "行高") + private Double lineHeight; + + @Schema(description = "文本字重") + private String fontWeight; + + @Schema(description = "加粗字重") + private String fontWeightBold; + + @Schema(description = "光标样式") + private String cursorStyle; + + @Schema(description = "光标闪烁") + private Boolean cursorBlink; + + /** + * 转为 json + * + * @return json + */ + public JSONObject toJson() { + return JSON.parseObject(JSON.toJSONString(this)); + } + + } } diff --git a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java index 4be57b60..bbd3875a 100644 --- a/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java +++ b/orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java @@ -18,8 +18,19 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy('TERMINAL'); // 设置默认终端主题 - if (!data.config.terminalTheme?.name) { - data.config.terminalTheme = DEFAULT_SCHEMA; + if (!data.config.themeSchema?.name) { + data.config.themeSchema = DEFAULT_SCHEMA; } this.preference = data.config; // 设置暗色主题 const userDarkTheme = data.config.darkTheme; if (userDarkTheme === DarkTheme.AUTO) { - this.isDarkTheme = data.config.terminalTheme?.dark === true; + this.isDarkTheme = data.config.themeSchema?.dark === true; } else { this.isDarkTheme = userDarkTheme === DarkTheme.DARK; } diff --git a/orion-ops-ui/src/store/modules/terminal/types.ts b/orion-ops-ui/src/store/modules/terminal/types.ts index d74015b2..1ed5bd07 100644 --- a/orion-ops-ui/src/store/modules/terminal/types.ts +++ b/orion-ops-ui/src/store/modules/terminal/types.ts @@ -8,11 +8,12 @@ export interface TerminalState { // 终端配置 export interface TerminalPreference { darkTheme: string, - terminalTheme: TerminalTheme, + themeSchema: TerminalThemeSchema, + displaySetting: TerminalDisplaySetting, } // 终端主题 -export interface TerminalTheme { +export interface TerminalThemeSchema { name: string; dark: boolean; background: string; @@ -41,3 +42,14 @@ export interface TerminalTheme { [key: string]: unknown; } + +// 显示设置 +export interface TerminalDisplaySetting { + fontFamily?: string; + fontSize?: number; + lineHeight?: number; + fontWeight?: string | number; + fontWeightBold?: string | number; + cursorStyle?: string; + cursorBlink?: boolean; +} diff --git a/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less b/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less index 907dc805..d05de605 100644 --- a/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less +++ b/orion-ops-ui/src/views/host-ops/terminal/assets/styles/layout.less @@ -204,16 +204,16 @@ body[terminal-theme='dark'] .host-layout { } // 终端设置容器 -@setting-container-width: 1180px; .terminal-setting-container { padding: 32px 16px; - width: @setting-container-width; + width: max-content; margin: auto; display: flex; flex-direction: column; .terminal-setting-title { margin: 0 0 24px 0; + user-select: none; color: var(--color-content-text-3); } @@ -230,6 +230,7 @@ body[terminal-theme='dark'] .host-layout { .terminal-setting-subtitle { margin: 0; + user-select: none; color: var(--color-content-text-3); } diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue index aad9e1ef..f8cbb0b5 100644 --- a/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue +++ b/orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-content.vue @@ -36,7 +36,7 @@ import type { TabItem } from '../../types/terminal.const'; import { computed } from 'vue'; import { TabType, InnerTabs } from '../../types/terminal.const'; - import TerminalViewSetting from '../theme-setting/terminal-view-setting.vue'; + import TerminalViewSetting from '../view-setting/terminal-view-setting.vue'; const props = defineProps({ modelValue: { diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-font-block.vue b/orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-font-block.vue deleted file mode 100644 index 6cb3f7ae..00000000 --- a/orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-font-block.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-display-block.vue b/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-display-block.vue new file mode 100644 index 00000000..95156d49 --- /dev/null +++ b/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-display-block.vue @@ -0,0 +1,224 @@ + + + + + + + diff --git a/orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-example.vue b/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-example.vue similarity index 63% rename from orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-example.vue rename to orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-example.vue index aca82578..5fd750b2 100644 --- a/orion-ops-ui/src/views/host-ops/terminal/components/theme-setting/terminal-example.vue +++ b/orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-example.vue @@ -9,12 +9,12 @@ @@ -26,7 +26,6 @@ diff --git a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts index 08bfa22a..7d05c330 100644 --- a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts +++ b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts @@ -43,8 +43,23 @@ export interface TabItem { [key: string]: unknown; } +// 字体后缀 兜底 +export const fontFamilySuffix = ',courier-new, courier, monospace'; + // 终端暗色模式 字典项 export const darkThemeKey = 'terminalDarkTheme'; +// 终端字体样式 +export const fontFamilyKey = 'terminalFontFamily'; + +// 终端字体大小 +export const fontSizeKey = 'terminalFontSize'; + +// 终端字体字重 +export const fontWeightKey = 'terminalFontWeight'; + +// 终端光标样式 +export const cursorStyleKey = 'terminalCursorStyle'; + // 加载的字典值 -export const dictKeys = [darkThemeKey]; +export const dictKeys = [darkThemeKey, fontFamilyKey, fontSizeKey, fontWeightKey, cursorStyleKey]; diff --git a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.theme.ts b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.theme.ts index 3423d223..2d521aa4 100644 --- a/orion-ops-ui/src/views/host-ops/terminal/types/terminal.theme.ts +++ b/orion-ops-ui/src/views/host-ops/terminal/types/terminal.theme.ts @@ -1,4 +1,4 @@ -import type { TerminalTheme } from '@/store/modules/terminal/types'; +import type { TerminalThemeSchema } from '@/store/modules/terminal/types'; // 默认配色 export const DEFAULT_SCHEMA = { @@ -248,4 +248,4 @@ export default [ brightCyan: '#2488FF', brightWhite: '#EAE5FF' } -] as Array; +] as Array;