refactor: 重构偏好模块.

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

@@ -10,7 +10,7 @@
           <!-- 新建连接 -->
           <new-connection-view v-if="tab.key === InnerTabs.NEW_CONNECTION.key" />
           <!-- 显示设置 -->
-          <terminal-view-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
+          <terminal-view-setting v-else-if="tab.key === InnerTabs.VIEW_SETTING.key" />
           <span v-else>
             {{ tab.key }}
             {{ tab.title }}

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

@@ -55,8 +55,6 @@
   import { useFullscreen } from '@vueuse/core';
   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: {
@@ -72,7 +70,6 @@
   const emits = defineEmits(['update:modelValue', 'clickTab', 'deleteTab', 'share']);
 
   const { isFullscreen, toggle: toggleFullScreen } = useFullscreen();
-  const terminalStore = useTerminalStore();
 
   // 顶部操作
   const actions = computed<Array<SidebarAction>>(() => [
@@ -82,11 +79,6 @@
       visible: false,
       click: () => emits('share')
     },
-    {
-      icon: terminalStore.isDarkTheme ? 'icon-sun-fill' : 'icon-moon-fill',
-      content: terminalStore.isDarkTheme ? '点击切换为亮色模式' : '点击切换为暗色模式',
-      click: () => terminalStore.changeDarkTheme(terminalStore.isDarkTheme ? DarkTheme.LIGHT : DarkTheme.DARK)
-    },
     {
       icon: isFullscreen.value ? 'icon-fullscreen-exit' : 'icon-fullscreen',
       content: isFullscreen.value ? '点击退出全屏模式' : '点击切换全屏模式',
@@ -113,7 +105,7 @@
   .terminal-header {
     --logo-width: 168px;
     --right-avatar-width: calc(28px * 5 - 7px * 4);
-    --right-action-width: calc(var(--header-height) * 3);
+    --right-action-width: calc(var(--sidebar-icon-wrapper-size) * 2);
   }
 
   .terminal-header {

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

@@ -43,7 +43,7 @@
     {
       icon: 'icon-palette',
       content: '外观设置',
-      click: () => emits('switchTab', InnerTabs.THEME_SETTING)
+      click: () => emits('switchTab', InnerTabs.VIEW_SETTING)
     },
   ];
 

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

@@ -20,11 +20,16 @@
 <script lang="ts" setup>
   import type { SidebarAction } from '../../types/terminal.const';
   import IconActions from './icon-actions.vue';
+  import { computed } from 'vue';
+  import { useTerminalStore } from '@/store';
+  import { DarkTheme } from '@/store/modules/terminal';
 
   const emits = defineEmits(['openSnippet', 'openSftp', 'openTransfer', 'openHistory', 'screenshot']);
 
+  const terminalStore = useTerminalStore();
+
   // 顶部操作
-  const topActions: Array<SidebarAction> = [
+  const topActions = computed<Array<SidebarAction>>(() => [
     {
       icon: 'icon-code-block',
       content: '打开命令片段',
@@ -49,7 +54,12 @@
       visible: false,
       click: () => emits('openHistory')
     },
-  ];
+    {
+      icon: terminalStore.isDarkTheme ? 'icon-sun-fill' : 'icon-moon-fill',
+      content: terminalStore.isDarkTheme ? '点击切换为亮色模式' : '点击切换为暗色模式',
+      click: () => terminalStore.changeDarkTheme(terminalStore.isDarkTheme ? DarkTheme.LIGHT : DarkTheme.DARK)
+    },
+  ]);
 
   // 底部操作
   const bottomActions: Array<SidebarAction> = [

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

@@ -6,12 +6,12 @@
         主题设置
       </h3>
       <!-- 暗色选择 -->
-      <a-radio-group :default-value="preference.darkTheme"
+      <a-radio-group v-model="preference.darkTheme"
                      class="usn"
                      size="mini"
                      type="button"
-                     @change="changeDarkTheme"
-                     :options="toOptions(darkThemeKey)">
+                     :options="toOptions(darkThemeKey)"
+                     @change="changeDarkTheme">
       </a-radio-group>
     </div>
     <!-- 内容区域 -->

orion-ops-ui/src/views/host-ops/terminal/types/terminal.const.ts

@@ -36,9 +36,9 @@ export const InnerTabs = {
     title: '快捷键设置',
     type: TabType.SETTING
   },
-  THEME_SETTING: {
-    key: 'themeSetting',
-    title: '主题设置',
+  VIEW_SETTING: {
+    key: 'viewSetting',
+    title: '外观设置',
     type: TabType.SETTING
   },
 };