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

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>