manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 修改 tag selector.

Browse Source
This commit is contained in:
lijiahangmax
2023-12-18 00:15:56 +08:00
parent 856c80c28c
commit 7be48c3774
16 changed files with 141 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/model/TerminalPreferenceModel.java
View File

@@ -24,8 +24,8 @@ public class TerminalPreferenceModel implements PreferenceModel {
@Schema(description = "暗色主题")
private String darkTheme;
@Schema(description = "终端主题")
private JSONObject themeSchema;
@Schema(description = "新建连接类型")
private String newConnectionType;
@Schema(description = "显示设置")
private JSONObject displaySetting;
@@ -33,6 +33,9 @@ public class TerminalPreferenceModel implements PreferenceModel {
@Schema(description = "背景设置")
private JSONObject backgroundSetting;
@Schema(description = "终端主题")
private JSONObject themeSchema;
@Data
@Builder
@NoArgsConstructor

3
orion-ops-module-infra/orion-ops-module-infra-service/src/main/java/com/orion/ops/module/infra/handler/preference/strategy/TerminalPreferenceStrategy.java
View File

@@ -18,7 +18,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
public TerminalPreferenceModel getDefault() {
return TerminalPreferenceModel.builder()
.darkTheme("dark")
.themeSchema(new JSONObject())
.newConnectionType("group")
.displaySetting(TerminalPreferenceModel.DisplaySettingModel.builder()
.fontFamily("_")
.fontSize(15)
@@ -31,6 +31,7 @@ public class TerminalPreferenceStrategy implements IPreferenceStrategy<TerminalP
.toJson()
)
.backgroundSetting(new JSONObject())
.themeSchema(new JSONObject())
.build();
}

19
orion-ops-ui/src/components/meta/tag/tag-multi-selector.vue
View File

@@ -8,6 +8,11 @@
@exceed-limit="() => { emits('onLimited', limit, `最多选择${limit}个tag`) }"
multiple
allow-clear>
<template #option="{ data: { label } }">
<a-tag :color="dataColor(label, tagColor)">
{{ label }}
</a-tag>
</template>
</a-select>
</template>
@@ -23,7 +28,7 @@
import type { TagCreateRequest } from '@/api/meta/tag';
import { ref, computed, onBeforeMount } from 'vue';
import { useCacheStore } from '@/store';
import { Message } from '@arco-design/web-vue';
import { dataColor } from '@/utils';
import { createTag } from '@/api/meta/tag';
import useLoading from '@/hooks/loading';
@@ -33,6 +38,10 @@
limit: Number,
type: String,
allowCreate: Boolean,
tagColor: {
type: Array as PropType<Array<string>>,
default: () => []
},
});
const emits = defineEmits(['update:modelValue', 'onLimited']);
@@ -95,7 +104,10 @@
// 插入 options
optionData.value.push({
label: name,
value: id
value: id,
tagProps: {
color: dataColor(name, props.tagColor)
}
});
return id;
};
@@ -109,6 +121,9 @@
return {
label: s.name,
value: s.id,
tagProps: {
color: dataColor(s.name, props.tagColor)
}
};
});
} catch (e) {

81
orion-ops-ui/src/store/modules/terminal/index.ts
View File

@@ -2,7 +2,7 @@ import type { TerminalDisplaySetting, TerminalPreference, TerminalState, Termina
import { defineStore } from 'pinia';
import { getPreference, updatePreferencePartial } from '@/api/user/preference';
import { Message } from '@arco-design/web-vue';
import { useDark } from '@vueuse/core';
import { useDark, useDebounceFn } from '@vueuse/core';
import { DEFAULT_SCHEMA } from '@/views/host-ops/terminal/types/terminal.theme';
// 暗色主题
@@ -24,17 +24,13 @@ export default defineStore('terminal', {
}),
preference: {
darkTheme: 'auto',
themeSchema: {} as TerminalThemeSchema,
displaySetting: {} as TerminalDisplaySetting
newConnectionType: 'group',
displaySetting: {} as TerminalDisplaySetting,
themeSchema: {} as TerminalThemeSchema
},
}),
actions: {
// 修改暗色主题
changeDarkTheme(dark: boolean) {
this.isDarkTheme = dark;
},
// 加载终端偏好
async fetchPreference() {
try {
@@ -56,18 +52,67 @@ export default defineStore('terminal', {
}
},
// 更新终端偏好
async updatePreference() {
try {
// 修改配置
await updatePreferencePartial({
type: 'TERMINAL',
config: this.preference
});
} catch (e) {
Message.error('同步失败');
// 修改暗色主题
changeDarkTheme(darkTheme: string) {
this.preference.darkTheme = darkTheme;
if (darkTheme === DarkTheme.DARK) {
// 暗色
this.isDarkTheme = true;
} else if (darkTheme === DarkTheme.LIGHT) {
// 亮色
this.isDarkTheme = false;
} else if (darkTheme === DarkTheme.AUTO) {
// 自动配色
this.isDarkTheme = this.preference.themeSchema.dark;
}
// 同步配置
this.updateTerminalPreference();
},
// 修改显示配置
changeDisplaySetting(displaySetting: TerminalDisplaySetting) {
this.preference.displaySetting = displaySetting;
// 同步配置
this.updateTerminalPreference();
},
// 选择终端主题
changeThemeSchema(themeSchema: TerminalThemeSchema) {
this.preference.themeSchema = themeSchema;
// 切换主题配色
if (this.preference.darkTheme === DarkTheme.AUTO) {
this.isDarkTheme = themeSchema.dark;
}
// 同步配置
this.updateTerminalPreference();
},
// 切换新建连接类型
changeNewConnectionType(newConnectionType: string) {
this.preference.newConnectionType = newConnectionType;
// 同步配置
this.updateTerminalPreference();
},
// 更新终端偏好-防抖
updateTerminalPreference() {
// 初始化函数
if (!this.updateTerminalPreferenceFn) {
this.updateTerminalPreferenceFn = useDebounceFn(async () => {
try {
// 修改配置
await updatePreferencePartial({
type: 'TERMINAL',
config: this.preference
});
} catch (e) {
Message.error('同步失败');
}
}, 1500);
}
// 更新
this.updateTerminalPreferenceFn();
}
},
});

31
orion-ops-ui/src/store/modules/terminal/types.ts
View File

@@ -3,13 +3,27 @@ import type { Ref } from 'vue';
export interface TerminalState {
isDarkTheme: Ref<boolean>;
preference: TerminalPreference;
updateTerminalPreferenceFn?: () => void;
}
// 终端配置
export interface TerminalPreference {
darkTheme: string,
themeSchema: TerminalThemeSchema,
displaySetting: TerminalDisplaySetting,
darkTheme: string;
newConnectionType: string;
displaySetting: TerminalDisplaySetting;
themeSchema: TerminalThemeSchema;
}
// 显示设置
export interface TerminalDisplaySetting {
fontFamily?: string;
fontSize?: number;
lineHeight?: number;
fontWeight?: string | number;
fontWeightBold?: string | number;
cursorStyle?: string;
cursorBlink?: boolean;
}
// 终端主题
@@ -42,14 +56,3 @@ export interface TerminalThemeSchema {
[key: string]: unknown;
}
// 显示设置
export interface TerminalDisplaySetting {
fontFamily?: string;
fontSize?: number;
lineHeight?: number;
fontWeight?: string | number;
fontWeightBold?: string | number;
cursorStyle?: string;
cursorBlink?: boolean;
}

9
orion-ops-ui/src/utils/index.ts
View File

@@ -40,7 +40,10 @@ export function md5(plain: string): string {
/**
* 获取数据颜色
*/
export function dataColor(str: string, colors: string[]): string {
export function dataColor(str: string, colors: string[], defaultColor = ''): string {
if (!colors?.length) {
return defaultColor;
}
let total = 0;
for (let i = 0; i < str.length; i++) {
total += str.charCodeAt(i);
@@ -160,7 +163,7 @@ export const resetObject = (obj: any, ignore: string[] = []) => {
export const objectTruthKeyCount = (obj: any, ignore: string[] = []) => {
return Object.keys(obj)
.filter(s => !ignore.includes(s))
.reduce(function(acc, curr) {
.reduce(function (acc, curr) {
const currVal = obj[curr];
return acc + ~~(currVal !== undefined && currVal !== null && currVal?.length !== 0 && currVal !== '');
}, 0);
@@ -200,7 +203,7 @@ export function getRoute(url = location.href) {
* 获取唯一的 UUID
*/
export function getUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);

1
orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
View File

@@ -78,6 +78,7 @@
:allowCreate="false"
:limit="0"
type="HOST"
:tagColor="tagColor"
placeholder="请选择主机标签" />
</a-form-item>
</a-form>

2
orion-ops-ui/src/views/asset/host-list/components/host-form-modal.vue
View File

@@ -43,6 +43,7 @@
:allowCreate="true"
:limit="5"
type="HOST"
:tagColor="tagColor"
placeholder="请选择主机标签"
@onLimited="onLimitedTag" />
</a-form-item>
@@ -68,6 +69,7 @@
import { pick } from 'lodash';
import TagMultiSelector from '@/components/meta/tag/tag-multi-selector.vue';
import HostGroupTreeSelector from '@/components/asset/host-group/host-group-tree-selector.vue';
import { tagColor } from '@/views/asset/host-list/types/const';
const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();

1
orion-ops-ui/src/views/asset/host-list/components/host-table.vue
View File

@@ -32,6 +32,7 @@
:allowCreate="false"
:limit="0"
type="HOST"
:tagColor="tagColor"
placeholder="请选择主机标签" />
</a-form-item>
</a-query-header>

4
orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-header.vue
View File

@@ -56,6 +56,7 @@
import { computed } from 'vue';
import IconActions from '../layout/icon-actions.vue';
import { useTerminalStore } from '@/store';
import { DarkTheme } from '@/store/modules/terminal';
const props = defineProps({
modelValue: {
@@ -82,10 +83,9 @@
click: () => emits('share')
},
{
// FIXME 持久化
icon: terminalStore.isDarkTheme ? 'icon-sun-fill' : 'icon-moon-fill',
content: terminalStore.isDarkTheme ? '点击切换为亮色模式' : '点击切换为暗色模式',
click: () => terminalStore.changeDarkTheme(!terminalStore.isDarkTheme)
click: () => terminalStore.changeDarkTheme(terminalStore.isDarkTheme ? DarkTheme.LIGHT : DarkTheme.DARK)
},
{
icon: isFullscreen.value ? 'icon-fullscreen-exit' : 'icon-fullscreen',

7
orion-ops-ui/src/views/host-ops/terminal/components/layout/terminal-left-sidebar.vue
View File

@@ -22,7 +22,7 @@
import { InnerTabs } from '../../types/terminal.const';
import IconActions from './icon-actions.vue';
const emits = defineEmits(['switchTab', 'copyAddress']);
const emits = defineEmits(['switchTab']);
// 顶部操作
const topActions: Array<SidebarAction> = [
@@ -31,11 +31,6 @@
content: '新建连接',
click: () => emits('switchTab', InnerTabs.NEW_CONNECTION)
},
{
icon: 'icon-copy',
content: '复制主机IP',
click: () => emits('copyAddress')
},
];
// 底部操作

20
orion-ops-ui/src/views/host-ops/terminal/components/new-connection/new-connection-view.vue
View File

@@ -10,7 +10,7 @@
type="button"
class="usn"
:options="toOptions(NewConnectionTypeKey)"
@change="changeConnectionType" />
@change="changeNewConnectionType" />
<!-- 过滤 -->
<a-auto-complete v-model="filterValue"
class="host-filter"
@@ -57,10 +57,10 @@
</a-empty>
<!-- 主机列表 -->
<hosts-view v-else
class="host-view-container"
:hosts="hosts"
:filter-value="filterValue"
:new-connection-type="newConnectionType" />
class="host-view-container"
:hosts="hosts"
:filter-value="filterValue"
:new-connection-type="newConnectionType" />
</div>
</div>
</div>
@@ -80,15 +80,16 @@
import { onBeforeMount, ref } from 'vue';
import { NewConnectionType, NewConnectionTypeKey } from '../../types/terminal.const';
import useLoading from '@/hooks/loading';
import { useDictStore } from '@/store';
import { useDictStore, useTerminalStore } from '@/store';
import { dataColor } from '@/utils';
import { tagColor } from '@/views/asset/host-list/types/const';
import HostsView from './hosts-view.vue';
const { loading, setLoading } = useLoading();
const { toOptions } = useDictStore();
const { preference, changeNewConnectionType } = useTerminalStore();
const newConnectionType = ref(NewConnectionType.GROUP);
const newConnectionType = ref(preference.newConnectionType || NewConnectionType.GROUP);
const filterValue = ref('');
const filterOptions = ref<Array<SelectOptionData>>([]);
const hosts = ref<AuthorizedHostQueryResponse>({} as AuthorizedHostQueryResponse);
@@ -124,11 +125,6 @@
}).forEach(s => filterOptions.value.push(s));
};
// 修改连接类型
const changeConnectionType = () => {
// FIXME 持久化类型
};
// 初始化
const init = async () => {
try {

24
orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-display-block.vue
View File

@@ -79,7 +79,7 @@
<div class="terminal-example">
<span class="terminal-example-label">预览效果</span>
<div class="terminal-example-wrapper"
:style="{ background: preference.themeSchema.background }">
:style="{ background: preference.themeSchema?.background }">
<terminal-example :theme="preference.themeSchema"
ref="previewTerminal" />
</div>
@@ -96,22 +96,19 @@
<script lang="ts" setup>
import type { TerminalDisplaySetting } from '@/store/modules/terminal/types';
import { onMounted, ref, watch } from 'vue';
import { ref, watch } from 'vue';
import { useDictStore, useTerminalStore } from '@/store';
import { fontFamilyKey, fontSizeKey, fontWeightKey, fontFamilySuffix, cursorStyleKey } from '../../types/terminal.const';
import { labelFilter } from '@/types/form';
import { useDebounceFn } from '@vueuse/core';
import TerminalExample from '../view-setting/terminal-example.vue';
const { toOptions } = useDictStore();
const { preference, updatePreference } = useTerminalStore();
const { preference, changeDisplaySetting } = useTerminalStore();
// 同步用户偏好 - 防抖函数
const sync = useDebounceFn(updatePreference, 1500);
const previewTerminal = ref();
const formModel = ref<TerminalDisplaySetting>({});
const formModel = ref<TerminalDisplaySetting>({ ...preference.displaySetting });
// 监听主题变化
// 监听主题变化 动态修改预览样式
watch(() => preference.themeSchema, (v) => {
if (!v) {
return;
@@ -129,7 +126,7 @@
if (!options) {
return;
}
// 修改配置
// 修改预览终端配置
Object.keys(v).forEach(key => {
if (key === 'fontFamily') {
options[key] = (formModel.value as any)[key] + fontFamilySuffix;
@@ -137,19 +134,12 @@
options[key] = (formModel.value as any)[key];
}
});
preference.displaySetting = formModel.value;
// 同步
sync();
changeDisplaySetting(formModel.value);
// 聚焦
previewTerminal.value.term.focus();
}, { deep: true });
// 设置默认配置
onMounted(() => {
// 触发 watch 函数
formModel.value = { ...preference.displaySetting };
});
</script>
<style lang="less" scoped>

40
orion-ops-ui/src/views/host-ops/terminal/components/view-setting/terminal-theme-block.vue
View File

@@ -10,7 +10,7 @@
class="usn"
size="mini"
type="button"
@change="checkDarkTheme"
@change="changeDarkTheme"
:options="toOptions(darkThemeKey)">
</a-radio-group>
</div>
@@ -34,7 +34,7 @@
color: theme.dark ? 'rgba(255, 255, 255, .8)' : 'rgba(0, 0, 0, .8)',
userSelect: 'none'
}"
@click="checkTheme(theme)">
@click="changeThemeSchema(theme)">
<!-- 样例 -->
<terminal-example :theme="{ ...theme, cursor: theme.background }" />
<!-- 选中按钮 -->
@@ -53,48 +53,14 @@
</script>
<script lang="ts" setup>
import type { TerminalThemeSchema } from '@/store/modules/terminal/types';
import { darkThemeKey } from '../../types/terminal.const';
import ThemeSchema from '../../types/terminal.theme';
import { useDebounceFn } from '@vueuse/core';
import { useDictStore, useTerminalStore } from '@/store';
import { DarkTheme } from '@/store/modules/terminal';
import TerminalExample from './terminal-example.vue';
const { updatePreference, changeDarkTheme, preference } = useTerminalStore();
const { changeThemeSchema, changeDarkTheme, preference } = useTerminalStore();
const { toOptions } = useDictStore();
// 同步用户偏好 - 防抖函数
const sync = useDebounceFn(updatePreference, 1500);
// 修改暗色主题
const checkDarkTheme = (value: string) => {
preference.darkTheme = value;
if (value === DarkTheme.DARK) {
// 暗色
changeDarkTheme(true);
} else if (value === DarkTheme.LIGHT) {
// 亮色
changeDarkTheme(false);
} else if (value === DarkTheme.AUTO) {
// 自动配色
changeDarkTheme(preference.themeSchema.dark);
}
// 同步用户偏好
sync();
};
// 选择终端主题
const checkTheme = (theme: TerminalThemeSchema) => {
preference.themeSchema = theme;
// 切换主题配色
if (preference.darkTheme === DarkTheme.AUTO) {
changeDarkTheme(theme.dark);
}
// 同步用户偏好
sync();
};
</script>
<style lang="less" scoped>

2
sql/init-3-data.sql
View File

@@ -111,7 +111,7 @@ INSERT INTO `dict_value` VALUES (8, 6, 'systemMenuVisible', '0', '隐藏', '{\"c
INSERT INTO `dict_value` VALUES (9, 6, 'systemMenuVisible', '1', '显示', '{\"color\": \"blue\"}', 20, '2023-10-27 00:25:30', '2023-10-27 00:25:58', '1', '1', 0);
INSERT INTO `dict_value` VALUES (10, 7, 'systemMenuCache', '0', '不缓存', '{}', 10, '2023-10-27 00:26:15', '2023-10-27 00:26:15', '1', '1', 0);
INSERT INTO `dict_value` VALUES (11, 7, 'systemMenuCache', '1', '缓存', '{}', 20, '2023-10-27 00:26:25', '2023-10-27 00:26:25', '1', '1', 0);
INSERT INTO `dict_value` VALUES (12, 8, 'dictValueType', 'STRING', '字符串', '{\"color\": \"blue\"}', 10, '2023-10-27 01:49:18', '2023-10-27 01:49:18', '1', '1', 0);
INSERT INTO `dict_value` VALUES (12, 8, 'dictValueType', 'STRING', '字符串', '{\"color\": \"arcoblue\"}', 10, '2023-10-27 01:49:18', '2023-10-27 01:49:18', '1', '1', 0);
INSERT INTO `dict_value` VALUES (13, 8, 'dictValueType', 'INTEGER', '整数', '{\"color\": \"arcoblue\"}', 20, '2023-10-27 01:54:30', '2023-10-27 01:54:30', '1', '1', 0);
INSERT INTO `dict_value` VALUES (14, 8, 'dictValueType', 'DECIMAL', '小数', '{\"color\": \"purple\"}', 30, '2023-10-27 01:54:43', '2023-10-27 01:54:43', '1', '1', 0);
INSERT INTO `dict_value` VALUES (15, 8, 'dictValueType', 'BOOLEAN', '布尔值', '{\"color\": \"pinkpurple\"}', 40, '2023-10-27 01:54:54', '2023-10-27 01:54:54', '1', '1', 0);

5
sql/常用.sql
View File

@@ -17,3 +17,8 @@ ADD COLUMN `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TI
ADD COLUMN `creator` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '创建人' AFTER update_time,
ADD COLUMN `updater` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '更新人' AFTER creator,
ADD COLUMN `deleted` tinyint(1) DEFAULT '0' COMMENT '是否删除 0未删除 1已删除' AFTER updater;
-- 删除已删除的元数据
DELETE FROM dict_key WHERE deleted = 1;
DELETE FROM dict_value WHERE deleted = 1;
DELETE FROM system_menu WHERE deleted = 1;