refactor: 修改 tag selector.

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

@@ -24,8 +24,8 @@ public class TerminalPreferenceModel implements PreferenceModel {
     @Schema(description = "暗色主题")
     private String darkTheme;
 
-    @Schema(description = "终端主题")
+    @Schema(description = "新建连接类型")
-    private JSONObject themeSchema;
+    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

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

@@ -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();
     }
 

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

@@ -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) {

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

@@ -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,
+      newConnectionType: 'group',
-      displaySetting: {} as TerminalDisplaySetting
+      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() {
+    changeDarkTheme(darkTheme: string) {
-      try {
+      this.preference.darkTheme = darkTheme;
-        // 修改配置
+      if (darkTheme === DarkTheme.DARK) {
-        await updatePreferencePartial({
+        // 暗色
-          type: 'TERMINAL',
+        this.isDarkTheme = true;
-          config: this.preference
+      } else if (darkTheme === DarkTheme.LIGHT) {
-        });
+        // 亮色
-      } catch (e) {
+        this.isDarkTheme = false;
-        Message.error('同步失败');
+      } 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();
+    }
+
   },
 });

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

@@ -3,13 +3,27 @@ import type { Ref } from 'vue';
 export interface TerminalState {
   isDarkTheme: Ref<boolean>;
   preference: TerminalPreference;
+
+  updateTerminalPreferenceFn?: () => void;
 }
 
 // 终端配置
 export interface TerminalPreference {
-  darkTheme: string,
+  darkTheme: string;
-  themeSchema: TerminalThemeSchema,
+  newConnectionType: string;
-  displaySetting: TerminalDisplaySetting,
+  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;
-}

orion-ops-ui/src/utils/index.ts

@@ -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);

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

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

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

@@ -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();

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

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

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

@@ -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',

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

@@ -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')
-    },
   ];
 
   // 底部操作

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

@@ -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"
+                      class="host-view-container"
-                     :hosts="hosts"
+                      :hosts="hosts"
-                     :filter-value="filterValue"
+                      :filter-value="filterValue"
-                     :new-connection-type="newConnectionType" />
+                      :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 {

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

@@ -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>

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

@@ -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>

sql/init-3-data.sql

@@ -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);

sql/常用.sql

@@ -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;