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

refactor: 拆分交互配置.

Browse Source
This commit is contained in:
lijiahang
2024-01-11 19:24:33 +08:00
parent 25acde6d1e
commit 13c352691a
10 changed files with 183 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
orion-ops-ui/src/utils/bell.ts Normal file
View File

@@ -0,0 +1,33 @@
/**
* 钟鸣
* @param frequency 蜂鸣器频率Hz
* @param duration 持续时间
*/
export const playBell = (frequency: number = 400, duration: number = .2) => {
try {
// 创建 AudioContext 对象
const audioCtx = new (window.AudioContext)();
const buffer = audioCtx.createBuffer(1, audioCtx.sampleRate, audioCtx.sampleRate);
const channelData = buffer.getChannelData(0);
// 获取正弦波形数据
const sampleRate = audioCtx.sampleRate;
const numSamples = Math.floor(duration * sampleRate);
const sineWaveData = [];
for (let i = 0; i < numSamples; ++i) {
const time = i / sampleRate;
// 计算当前样本点的值
const value = Math.sin(2 * Math.PI * frequency * time);
// 将值转换为-1到+1之间的范围内
sineWaveData[i] = value > 0 ? value : -value;
}
// 复制正弦波形数据到buffer中
for (let i = 0; i < sineWaveData.length; ++i) {
channelData[i] = sineWaveData[i];
}
const source = audioCtx.createBufferSource();
source.buffer = buffer;
source.connect(audioCtx.destination);
source.start();
} catch (e) {
}
};

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

@@ -13,6 +13,8 @@
<terminal-display-setting v-else-if="tab.key === InnerTabs.DISPLAY_SETTING.key" />
<!-- 主题设置 -->
<terminal-theme-setting v-else-if="tab.key === InnerTabs.THEME_SETTING.key" />
<!-- 终端设置 -->
<terminal-general-setting v-else-if="tab.key === InnerTabs.TERMINAL_SETTING.key" />
</template>
<!-- 终端 -->
<template v-else-if="tab.type === TabType.TERMINAL">
@@ -33,9 +35,10 @@
import { TabType, InnerTabs } from '../../types/terminal.const';
import { useTerminalStore } from '@/store';
import { watch } from 'vue';
import NewConnectionView from '../new-connection/new-connection-view.vue';
import TerminalDisplaySetting from '../view-setting/terminal-display-setting.vue';
import TerminalThemeSetting from '../view-setting/terminal-theme-setting.vue';
import NewConnectionView from '../new-connection/new-connection-view.vue';
import TerminalGeneralSetting from '../view-setting/terminal-general-setting.vue';
import TerminalView from '../xterm/terminal-view.vue';
const { tabManager, sessionManager } = useTerminalStore();

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

@@ -46,11 +46,6 @@
content: InnerTabs.DISPLAY_SETTING.title,
click: () => tabManager.openTab(InnerTabs.DISPLAY_SETTING)
},
{
icon: 'icon-stamp',
content: InnerTabs.INTERACT_SETTING.title,
click: () => tabManager.openTab(InnerTabs.INTERACT_SETTING)
},
{
icon: 'icon-palette',
content: InnerTabs.THEME_SETTING.title,

28
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-general-setting.vue Normal file
View File

@@ -0,0 +1,28 @@
<template>
<div class="terminal-setting-container">
<div class="terminal-setting-wrapper">
<!-- 主标题 -->
<h2 class="terminal-setting-title">终端设置</h2>
<!-- 交互设置 -->
<terminal-interact-block />
<!-- 会话设置 -->
<terminal-session-block />
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'TerminalGeneralSetting'
};
</script>
<script lang="ts" setup>
import TerminalInteractBlock from './terminal-interact-block.vue';
import TerminalSessionBlock from './terminal-session-block.vue';
</script>
<style lang="less" scoped>
</style>

82
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-interact-block.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div class="terminal-setting-block">
<!-- 顶部 -->
<div class="terminal-setting-subtitle-wrapper">
<h3 class="terminal-setting-subtitle">
交互设置
</h3>
</div>
<!-- 提示 -->
<a-alert class="mb16">修改后会立刻保存, 刷新页面后生效</a-alert>
<!-- 内容区域 -->
<div class="terminal-setting-body">
<a-row class="" :gutter="[16, 16]">
<a-col :span="12">
<div class="block-form-item-wrapper">
<div class="block-form-item-label">
label
</div>
<div class="block-form-item-desc">
描述一下
</div>
<div class="block-form-item-value">
<a-switch />
</div>
</div>
</a-col>
</a-row>
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'TerminalInteractBlock'
};
</script>
<script lang="ts" setup>
// TODO
// 交互设置
// alt + 滚轮快速滚动 fastScrollModifier 'none' | 'alt'
// alt 点击可以切换光标位置 altClickMovesCursor
// 右键选中词条 rightClickSelectsWord
// 自动将选中内容复制到剪切板 onSelectionChange
// 粘贴时删除空格
// 复制时删除空格
// 右键粘贴
// 启用右键菜单
// 自动检测 url 并可以点击
// 支持显示图片 使用 sixel 打开图片
// bell sound
// 分隔符 /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│ 在终端中双击文本将使用到这些符号 wordSeparator
</script>
<style lang="less" scoped>
.block-form-item-wrapper {
height: 84px;
border-radius: 4px;
background: var(--color-fill-2);
display: flex;
padding: 16px;
.block-form-item-label {
color: var(--color-content-text-3);
font-size: 15px;
font-weight: bold;
}
.block-form-item-desc {
color: var(--color-content-text-2);
font-size: 12px;
}
}
</style>

33
orion-ops-ui/src/views/host/terminal/components/view-setting/terminal-session-block.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="terminal-setting-block">
<!-- 顶部 -->
<div class="terminal-setting-subtitle-wrapper">
<h3 class="terminal-setting-subtitle">
会话设置
</h3>
</div>
<!-- 内容区域 -->
<div class="terminal-setting-body">
</div>
</div>
</template>
<script lang="ts">
export default {
name: 'TerminalSessionBlock'
};
</script>
<script lang="ts" setup>
// TODO
// terminal emulation type: xterm 256color
// 回滚（ScrollBack） scrollback 保存在缓冲区的行数
</script>
<style lang="less" scoped>
</style>

21
orion-ops-ui/src/views/host/terminal/components/xterm/terminal-view.vue
View File

@@ -86,26 +86,7 @@
// 右键菜单补充
// 搜索 search color 配置
// 截屏
// 主机获取逻辑 最近连接逻辑 偏好逻辑
// TODO
// 交互设置
// 右键选中词条
// 右键粘贴
// 启用右键菜单
// 自动将选中内容复制到剪切板
// 粘贴时删除空格
// 复制时删除空格
// 分隔符 /\()"'-.,:;<>~!@#$%^&*|+=[]{}~?│ 在终端中双击文本将使用到这些符号
// 自动检测 url 并可以点击
// 支持显示图片 使用 sixel 打开图片
// 终端设置
// bell sound
// terminal emulation type: xterm 256color
// 回滚（ScrollBack）
// 保存在缓冲区的行数
// 主机获取逻辑 最近连接逻辑
// 发送命令
const writeCommandInput = async (e: KeyboardEvent) => {

2
orion-ops-ui/src/views/host/terminal/handler/terminal-session.ts
View File

@@ -48,7 +48,7 @@ export default class TerminalSession implements ITerminalSession {
this.inst = new Terminal({
...(preference.displaySetting as any),
theme: preference.theme.schema,
fastScrollModifier: 'shift',
fastScrollModifier: 'ctrl',
fontFamily: preference.displaySetting.fontFamily + fontFamilySuffix,
});
// 注册插件

2
orion-ops-ui/src/views/host/terminal/index.vue
View File

@@ -68,7 +68,7 @@
// 注册关闭视口事件
onMounted(() => {
// TODO 开发阶段
// FIXME 开发阶段
// window.addEventListener('beforeunload', handleBeforeUnload);
});

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

@@ -23,11 +23,6 @@ export const InnerTabs = {
title: '显示设置',
type: TabType.SETTING
},
INTERACT_SETTING: {
key: 'interactSetting',
title: '交互设置',
type: TabType.SETTING
},
THEME_SETTING: {
key: 'themeSetting',
title: '主题设置',