diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/theme/terminal.theme.json b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/theme/terminal.theme.json index b95e1f0e..55767b29 100644 --- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/theme/terminal.theme.json +++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/theme/terminal.theme.json @@ -2,6 +2,7 @@ { "name": "catppuccin-macchiato", "dark": true, + "headerBackgroundColor": "#181B2E", "schema": { "background": "#24273A", "foreground": "#CAD3F5", @@ -26,6 +27,7 @@ { "name": "catppuccin-mocha", "dark": true, + "headerBackgroundColor": "#121222", "schema": { "background": "#1E1E2E", "foreground": "#CDD6F4", @@ -50,6 +52,7 @@ { "name": "OneHalfDark", "dark": true, + "headerBackgroundColor": "#1C2028", "schema": { "background": "#282C34", "foreground": "#DCDFE4", @@ -74,6 +77,7 @@ { "name": "MaterialDesignColors", "dark": true, + "headerBackgroundColor": "#111A1E", "schema": { "background": "#1D262A", "foreground": "#E7EBED", @@ -98,6 +102,7 @@ { "name": "Dracula", "dark": true, + "headerBackgroundColor": "#12131D", "schema": { "background": "#1E1F29", "foreground": "#F8F8F2", @@ -120,32 +125,34 @@ } }, { - "name": "Dracula+", + "name": "Atom", "dark": true, + "headerBackgroundColor": "#0A0B0D", "schema": { - "background": "#212121", - "foreground": "#F8F8F2", - "cursor": "#ECEFF4", - "selectionBackground": "#44475A", - "black": "#21222C", - "red": "#FF5555", - "green": "#50FA7B", - "yellow": "#FFCB6B", - "blue": "#82AAFF", - "cyan": "#8BE9FD", - "white": "#F8F8F2", - "brightBlack": "#545454", - "brightRed": "#FF6E6E", - "brightGreen": "#69FF94", - "brightYellow": "#FFCB6B", - "brightBlue": "#D6ACFF", - "brightCyan": "#A4FFFF", - "brightWhite": "#F8F8F2" + "background": "#161719", + "foreground": "#C5C8C6", + "cursor": "#D0D0D0", + "selectionBackground": "#444444", + "black": "#000000", + "red": "#FD5FF1", + "green": "#87C38A", + "yellow": "#FFD7B1", + "blue": "#85BEFD", + "cyan": "#85BEFD", + "white": "#E0E0E0", + "brightBlack": "#000000", + "brightRed": "#FD5FF1", + "brightGreen": "#94FA36", + "brightYellow": "#F5FFA8", + "brightBlue": "#96CBFE", + "brightCyan": "#85BEFD", + "brightWhite": "#E0E0E0" } }, { "name": "Apple System Colors", "dark": true, + "headerBackgroundColor": "#121212", "schema": { "background": "#1E1E1E", "foreground": "#FFFFFF", @@ -170,6 +177,7 @@ { "name": "Builtin Tango Light", "dark": false, + "headerBackgroundColor": "#F3F3F3", "schema": { "background": "#FFFFFF", "foreground": "#000000", @@ -194,6 +202,7 @@ { "name": "Duotone Dark", "dark": true, + "headerBackgroundColor": "#13111B", "schema": { "background": "#1F1D27", "foreground": "#B7A1FF", @@ -218,6 +227,7 @@ { "name": "BlulocoLight", "dark": false, + "headerBackgroundColor": "#EDEDED", "schema": { "background": "#F9F9F9", "foreground": "#373A41", @@ -242,6 +252,7 @@ { "name": "Chester", "dark": true, + "headerBackgroundColor": "#202A37", "schema": { "background": "#2C3643", "foreground": "#FFFFFF", @@ -266,6 +277,7 @@ { "name": "CLRS", "dark": false, + "headerBackgroundColor": "#F3F3F3", "schema": { "background": "#FFFFFF", "foreground": "#262626", @@ -290,6 +302,7 @@ { "name": "Calamity", "dark": true, + "headerBackgroundColor": "#231C27", "schema": { "background": "#2F2833", "foreground": "#D5CED9", @@ -314,6 +327,7 @@ { "name": "Tomorrow", "dark": false, + "headerBackgroundColor": "#F3F3F3", "schema": { "background": "#FFFFFF", "foreground": "#4D4D4C", @@ -335,4 +349,4 @@ "brightWhite": "#FFFFFF" } } -] +] \ No newline at end of file diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/test/java/com/orion/ops/module/asset/meta/TerminalThemeGenerator.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/test/java/com/orion/ops/module/asset/meta/TerminalThemeGenerator.java index 3d8be3bb..ca8f9e87 100644 --- a/orion-ops-module-asset/orion-ops-module-asset-service/src/test/java/com/orion/ops/module/asset/meta/TerminalThemeGenerator.java +++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/test/java/com/orion/ops/module/asset/meta/TerminalThemeGenerator.java @@ -5,6 +5,7 @@ import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.annotation.JSONField; import com.alibaba.fastjson.serializer.ValueFilter; import com.orion.lang.utils.Colors; +import com.orion.lang.utils.Strings; import com.orion.lang.utils.collect.Lists; import com.orion.lang.utils.io.FileReaders; import com.orion.lang.utils.io.Files1; @@ -30,7 +31,7 @@ public class TerminalThemeGenerator { List schemaFilter = Lists.of( "catppuccin-macchiato", "catppuccin-mocha", "OneHalfDark", "MaterialDesignColors", - "Dracula", "Dracula+", + "Dracula", "Atom", "Apple System Colors", "Builtin Tango Light", "Duotone Dark", "BlulocoLight", "Chester", "CLRS", @@ -51,10 +52,15 @@ public class TerminalThemeGenerator { .anyMatch(s -> f.getName().equalsIgnoreCase(s))) .map(f -> { JSONObject schema = JSONObject.parseObject(new String(FileReaders.readAllBytes(f))); + // 设置选中背景色 schema.put("selectionBackground", schema.getString("selection")); + // 设置主题色 + String background = schema.getString("background"); TerminalTheme theme = new TerminalTheme(); theme.setName(schema.getString("name")); - theme.setDark(Colors.isDarkColor(schema.getString("background"))); + theme.setDark(Colors.isDarkColor(background)); + // header 颜色为深 12 + theme.setHeaderBackgroundColor(adjustColor(background, -12)); theme.setSchema(JSON.parseObject(JSON.toJSONString(schema), TerminalThemeSchema.class)); return theme; }).collect(Collectors.toList()); @@ -107,6 +113,8 @@ public class TerminalThemeGenerator { @JSONField(ordinal = 1) private Boolean dark; @JSONField(ordinal = 2) + private String headerBackgroundColor; + @JSONField(ordinal = 3) private TerminalThemeSchema schema; } @@ -154,4 +162,26 @@ public class TerminalThemeGenerator { private String brightWhite; } + /** + * 调整颜色 + * + * @param color color + * @param range 正数越浅 负数越深 + * @return color + */ + private static String adjustColor(String color, int range) { + StringBuilder newColor = new StringBuilder("#"); + for (int i = 0; i < 3; i++) { + int c = Integer.parseInt(color.substring(i * 2 + 1, i * 2 + 3), 16); + c += range; + if (c < 0) { + c = 0; + } else if (c > 255) { + c = 255; + } + newColor.append(Strings.leftPad(Integer.toString(c, 16), 2, "0")); + } + return newColor.toString(); + } + } diff --git a/orion-ops-ui/src/api/asset/host-terminal.ts b/orion-ops-ui/src/api/asset/host-terminal.ts index cd12c1f1..02543077 100644 --- a/orion-ops-ui/src/api/asset/host-terminal.ts +++ b/orion-ops-ui/src/api/asset/host-terminal.ts @@ -4,6 +4,7 @@ import axios from 'axios'; export interface TerminalTheme { name: string; dark: boolean; + headerBackgroundColor: string; schema: TerminalThemeSchema; } diff --git a/orion-ops-ui/src/utils/index.ts b/orion-ops-ui/src/utils/index.ts index 4657989e..04271688 100644 --- a/orion-ops-ui/src/utils/index.ts +++ b/orion-ops-ui/src/utils/index.ts @@ -203,26 +203,6 @@ export function getUUID() { }); } -/** - * 调整颜色 - * @param color color - * @param range 正数越浅 负数越深 - */ -export function adjustColor(color: string, range: number) { - let newColor = '#'; - for (let i = 0; i < 3; i++) { - let c = parseInt(color.substring(i * 2 + 1, i * 2 + 3), 16); - c += range; - if (c < 0) { - c = 0; - } else if (c > 255) { - c = 255; - } - newColor += c.toString(16).padStart(2, '0'); - } - return newColor; -} - /** * 清除 xss */ diff --git a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue index 45080c08..52fd86c0 100644 --- a/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue +++ b/orion-ops-ui/src/views/host/terminal/components/layout/icon-actions.vue @@ -25,7 +25,7 @@