refactor: 修改 tag selector.

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"
-                     :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 {

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>