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

⚡ 优化按钮组件逻辑.

Browse Source
This commit is contained in:
lijiahang
2024-09-29 10:20:45 +08:00
parent ef57040e1d
commit 3b1d6ab8a4
24 changed files with 417 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
orion-visor-ui/src/views/host/terminal/components/command-snippet/command-snippet-drawer.vue
View File

@@ -21,17 +21,17 @@
<!-- 右侧按钮 -->
<a-space size="small">
<!-- 创建命令 -->
<span class="click-icon-wrapper snippet-header-icon"
title="创建命令"
@click="openAdd">
<a-button class="snippet-header-icon icon-button"
title="创建命令"
@click="openAdd">
<icon-plus />
</span>
</a-button>
<!-- 刷新 -->
<span class="click-icon-wrapper snippet-header-icon"
title="刷新"
@click="fetchData">
<a-button class="snippet-header-icon icon-button"
title="刷新"
@click="fetchData">
<icon-refresh />
</span>
</a-button>
</a-space>
</div>
<!-- 加载中 -->
@@ -321,7 +321,6 @@
&-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
&-input {

44
orion-visor-ui/src/views/host/terminal/components/layout/empty-recommend.vue
View File

@@ -25,11 +25,11 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="跳转页面">
<span v-if="!handler.host"
class="click-icon-wrapper"
@click="openTab(handler)">
<a-button v-if="!handler.host"
class="combined-handler-action icon-button"
@click="openTab(handler)">
<icon-right />
</span>
</a-button>
</a-tooltip>
<!-- 打开 SSH -->
<a-tooltip position="top"
@@ -38,11 +38,11 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SSH">
<span v-if="handler.host"
class="click-icon-wrapper"
@click="openSession(handler.host as any, PanelSessionType.SSH)">
<a-button v-if="handler.host"
class="combined-handler-action icon-button"
@click="openSession(handler.host as any, PanelSessionType.SSH)">
<icon-thunderbolt />
</span>
</a-button>
</a-tooltip>
<!-- 打开 SFTP -->
<a-tooltip position="top"
@@ -51,11 +51,11 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SFTP">
<span v-if="handler.host"
class="click-icon-wrapper"
@click="openSession(handler.host as any, PanelSessionType.SFTP)">
<a-button v-if="handler.host"
class="combined-handler-action icon-button"
@click="openSession(handler.host as any, PanelSessionType.SFTP)">
<icon-folder />
</span>
</a-button>
</a-tooltip>
</div>
</div>
@@ -138,7 +138,8 @@
@container-height: 448px;
@handler-height: 44px;
@icon-size: @handler-height;
@actions-width: 80px;
@actions-width: 83px;
@action-size: 28px;
.recommend-container {
overflow: hidden;
@@ -211,16 +212,17 @@
padding-right: 8px;
align-items: center;
justify-content: flex-end;
}
.click-icon-wrapper {
font-size: 18px;
padding: 4px;
border-radius: 4px;
margin: 0 4px;
&-action {
width: @action-size;
height: @action-size;
margin: 0 4px;
border-radius: 4px;
font-size: 18px;
&:hover {
background: var(--color-neutral-4);
}
&:hover {
background: var(--color-neutral-4);
}
}
}

20
orion-visor-ui/src/views/host/terminal/components/layout/icon-actions.vue
View File

@@ -11,15 +11,15 @@
<div v-if="action.visible !== false"
class="terminal-sidebar-icon-wrapper"
:class="[ wrapperClass ]">
<div class="terminal-sidebar-icon"
:class="[
iconClass,
action.disabled === true ? 'disabled-item' : '',
action.checked === true ? 'checked-item' : '',
]"
@click="action.disabled === true ? false : action.click()">
<a-button class="terminal-sidebar-icon"
:class="[
iconClass,
action.checked === true ? 'checked-item' : '',
]"
:disabled="action.disabled === true"
@click="action.click()">
<component :is="action.icon" :style="action?.iconStyle" />
</div>
</a-button>
</div>
</a-tooltip>
</div>
@@ -44,5 +44,7 @@
</script>
<style lang="less" scoped>
.terminal-sidebar-icon[disabled]:hover {
background: var(--color-secondary-disabled);
}
</style>

30
orion-visor-ui/src/views/host/terminal/components/new-connection/host-list-modal.vue
View File

@@ -47,10 +47,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SSH">
<span class="click-icon-wrapper"
@click="clickHost(item, PanelSessionType.SSH)">
<a-button class="host-item-action icon-button"
@click="clickHost(item, PanelSessionType.SSH)">
<icon-thunderbolt />
</span>
</a-button>
</a-tooltip>
<!-- 打开 SFTP -->
<a-tooltip position="top"
@@ -59,10 +59,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="打开 SFTP">
<span class="click-icon-wrapper"
@click="clickHost(item, PanelSessionType.SFTP)">
<a-button class="host-item-action icon-button"
@click="clickHost(item, PanelSessionType.SFTP)">
<icon-folder />
</span>
</a-button>
</a-tooltip>
</div>
</div>
@@ -141,6 +141,7 @@
@item-height: 54px;
@item-padding-y: 4px;
@item-padding-x: 12px;
@action-size: 32px;
.host-list-wrapper {
padding: 12px;
@@ -215,16 +216,17 @@
height: 100%;
align-items: center;
justify-content: flex-end;
}
.click-icon-wrapper {
font-size: 22px;
padding: 4px;
border-radius: 4px;
margin: 0 4px;
&-action {
width: @action-size;
height: @action-size;
margin: 0 4px;
border-radius: 4px;
font-size: 22px;
&:hover {
background: var(--color-neutral-4);
}
&:hover {
background: var(--color-neutral-4);
}
}
}

16
orion-visor-ui/src/views/host/terminal/components/new-connection/host-list-view.vue
View File

@@ -119,9 +119,9 @@
arrow-class="terminal-tooltip-content"
content="打开 SSH">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.SSH)">
<a-button class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.SSH)">
<icon-thunderbolt />
</div>
</a-button>
</div>
</a-tooltip>
<!-- 打开 SFTP -->
@@ -132,9 +132,9 @@
arrow-class="terminal-tooltip-content"
content="打开 SFTP">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.SFTP)">
<a-button class="terminal-sidebar-icon" @click="openSession(item, PanelSessionType.SFTP)">
<icon-folder />
</div>
</a-button>
</div>
</a-tooltip>
<!-- 主机设置 -->
@@ -145,9 +145,9 @@
arrow-class="terminal-tooltip-content"
content="主机设置">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click="openSetting(item)">
<a-button class="terminal-sidebar-icon" @click="openSetting(item)">
<icon-settings />
</div>
</a-button>
</div>
</a-tooltip>
<!-- 收藏 -->
@@ -158,10 +158,10 @@
arrow-class="terminal-tooltip-content"
content="收藏">
<div class="terminal-sidebar-icon-wrapper">
<div class="terminal-sidebar-icon" @click="setFavorite(item)">
<a-button class="terminal-sidebar-icon" @click="setFavorite(item)">
<icon-star-fill class="favorite" v-if="item.favorite" />
<icon-star v-else />
</div>
</a-button>
</div>
</a-tooltip>
</div>

17
orion-visor-ui/src/views/host/terminal/components/path-bookmark/path-bookmark-drawer.vue
View File

@@ -21,17 +21,17 @@
<!-- 右侧侧按钮 -->
<a-space size="small">
<!-- 创建路径 -->
<span class="click-icon-wrapper path-header-icon"
title="创建路径"
@click="openAdd">
<a-button class="path-header-icon icon-button"
title="创建路径"
@click="openAdd">
<icon-plus />
</span>
</a-button>
<!-- 刷新 -->
<span class="click-icon-wrapper path-header-icon"
title="刷新"
@click="fetchData">
<a-button class="path-header-icon icon-button"
title="刷新"
@click="fetchData">
<icon-refresh />
</span>
</a-button>
</a-space>
</div>
<!-- 加载中 -->
@@ -328,7 +328,6 @@
&-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
&-input {

50
orion-visor-ui/src/views/host/terminal/components/setting/shortcut/terminal-shortcut-keys-block.vue
View File

@@ -29,28 +29,28 @@
<span v-else class="disabled-key">已禁用</span>
</div>
<!-- 操作 -->
<a-space class="shortcut-actions-container">
<a-space class="shortcut-actions">
<!-- 屏蔽 -->
<div class="click-icon-wrapper"
v-if="item.enabled"
title="屏蔽"
@click="updateEnabledStatus(item, false)">
<a-button class="shortcut-action icon-button"
v-if="item.enabled"
title="屏蔽"
@click="updateEnabledStatus(item, false)">
<icon-message-banned />
</div>
</a-button>
<!-- 恢复 -->
<div class="click-icon-wrapper"
v-if="!item.enabled"
title="恢复"
@click="updateEnabledStatus(item, true)">
<a-button class="shortcut-action icon-button"
v-if="!item.enabled"
title="恢复"
@click="updateEnabledStatus(item, true)">
<icon-message />
</div>
</a-button>
<!-- 设置 -->
<div class="click-icon-wrapper"
v-if="!item.editable && item.enabled"
title="设置"
@click="setEditableStatus(item)">
<a-button class="shortcut-action icon-button"
v-if="!item.editable && item.enabled"
title="设置"
@click="setEditableStatus(item)">
<icon-settings />
</div>
</a-button>
</a-space>
<!-- 描述 -->
<div class="shortcut-desc">
@@ -121,7 +121,7 @@
&:hover {
background: var(--color-neutral-3);
.shortcut-actions-container {
.shortcut-actions {
display: flex;
}
@@ -149,16 +149,17 @@
font-size: 12px;
}
.shortcut-actions-container {
.shortcut-actions {
display: none;
}
.click-icon-wrapper {
font-size: 18px;
padding: 4px;
.shortcut-action {
width: 28px;
height: 28px;
font-size: 18px;
&:hover {
background: var(--color-neutral-4);
}
&:hover {
background: var(--color-neutral-4);
}
}
@@ -166,5 +167,4 @@
color: var(--color-neutral-6);
}
}
</style>

14
orion-visor-ui/src/views/host/terminal/components/sftp/sftp-editor-header.vue
View File

@@ -27,10 +27,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="保存">
<span class="click-icon-wrapper header-action-icon"
@click="emits('save')">
<a-button class="header-action-icon icon-button"
@click="emits('save')">
<icon-save />
</span>
</a-button>
</a-tooltip>
<!-- 关闭 -->
<a-tooltip position="top"
@@ -40,10 +40,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="关闭">
<span class="click-icon-wrapper header-action-icon"
@click="emits('close')">
<a-button class="header-action-icon icon-button"
@click="emits('close')">
<icon-close />
</span>
</a-button>
</a-tooltip>
</a-space>
</div>
@@ -96,8 +96,6 @@
}
.header-action-icon {
font-size: 16px;
padding: 4px;
width: @action-size;
height: @action-size;
}

68
orion-visor-ui/src/views/host/terminal/components/sftp/sftp-table-header.vue
View File

@@ -11,10 +11,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="返回上级">
<span class="click-icon-wrapper header-action-icon mr8"
@click="backParentPath">
<a-button class="header-action-icon icon-button mr8"
@click="backParentPath">
<icon-left />
</span>
</a-button>
</a-tooltip>
<!-- 当前路径 -->
<div class="sftp-path-container"
@@ -62,10 +62,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="重连">
<span class="click-icon-wrapper header-action-icon ml8"
@click="reConnect">
<a-button class="header-action-icon icon-button ml8"
@click="reConnect">
<icon-refresh />
</span>
</a-button>
</a-tooltip>
</div>
<!-- 路径编辑模式-右侧操作 -->
@@ -78,10 +78,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="进入">
<span class="click-icon-wrapper header-action-icon"
@click="doChangePath">
<a-button class="header-action-icon icon-button"
@click="doChangePath">
<icon-right />
</span>
</a-button>
</a-tooltip>
<!-- 取消 -->
<a-tooltip position="top"
@@ -91,10 +91,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="取消">
<span class="click-icon-wrapper header-action-icon"
@click="setPathEditable(false)">
<a-button class="header-action-icon icon-button"
@click="setPathEditable(false)">
<icon-stop />
</span>
</a-button>
</a-tooltip>
</a-space>
<!-- 非路径编辑模式-右侧操作 -->
@@ -107,10 +107,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="刷新">
<span class="click-icon-wrapper header-action-icon"
@click="loadFileList()">
<a-button class="header-action-icon icon-button"
@click="loadFileList()">
<icon-refresh />
</span>
</a-button>
</a-tooltip>
<!-- 显示隐藏文件 -->
<a-tooltip position="top"
@@ -120,11 +120,11 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
:content="showHiddenFile ? '不显示隐藏文件' : '显示隐藏文件'">
<span class="click-icon-wrapper header-action-icon"
@click="toggleShowHiddenFile">
<a-button class="header-action-icon icon-button"
@click="toggleShowHiddenFile">
<icon-eye-invisible v-if="showHiddenFile" />
<icon-eye v-else />
</span>
</a-button>
</a-tooltip>
<!-- 创建文件 -->
<a-tooltip position="top"
@@ -134,10 +134,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="创建文件">
<span class="click-icon-wrapper header-action-icon"
@click="createFile">
<a-button class="header-action-icon icon-button"
@click="createFile">
<icon-drive-file />
</span>
</a-button>
</a-tooltip>
<!-- 创建文件夹 -->
<a-tooltip position="top"
@@ -147,10 +147,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="创建文件夹">
<span class="click-icon-wrapper header-action-icon"
@click="createDir">
<a-button class="header-action-icon icon-button"
@click="createDir">
<icon-folder-add />
</span>
</a-button>
</a-tooltip>
<!-- 删除选中文件 -->
<a-tooltip position="top"
@@ -160,10 +160,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="删除选中文件">
<span class="click-icon-wrapper header-action-icon"
@click="deleteSelectFiles">
<a-button class="header-action-icon icon-button"
@click="deleteSelectFiles">
<icon-delete />
</span>
</a-button>
</a-tooltip>
<!-- 上传 -->
<a-tooltip position="top"
@@ -173,10 +173,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="上传">
<span class="click-icon-wrapper header-action-icon"
@click="openSftpUploadModal">
<a-button class="header-action-icon icon-button"
@click="openSftpUploadModal">
<icon-upload />
</span>
</a-button>
</a-tooltip>
<!-- 下载 -->
<a-tooltip position="top"
@@ -186,10 +186,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="下载">
<span class="click-icon-wrapper header-action-icon"
@click="downloadFile">
<a-button class="header-action-icon icon-button"
@click="downloadFile">
<icon-download />
</span>
</a-button>
</a-tooltip>
</a-space>
</div>
@@ -371,8 +371,6 @@
}
.header-action-icon {
font-size: 16px;
padding: 4px;
width: @action-size;
height: @action-size;
}

40
orion-visor-ui/src/views/host/terminal/components/sftp/sftp-table.vue
View File

@@ -62,10 +62,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="复制路径">
<span class="click-icon-wrapper row-action-icon"
@click="copy(record.path, true)">
<a-button class="icon-button row-action-icon"
@click="copy(record.path, true)">
<icon-copy />
</span>
</a-button>
</a-tooltip>
<!-- 编辑内容 -->
<a-tooltip v-if="canEditable(record.size, record.attr)"
@@ -76,10 +76,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="编辑内容">
<span class="click-icon-wrapper row-action-icon"
@click="editFile(record)">
<a-button class="icon-button row-action-icon"
@click="editFile(record)">
<icon-edit />
</span>
</a-button>
</a-tooltip>
<!-- 删除 -->
<a-tooltip position="top"
@@ -88,10 +88,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="删除">
<span class="click-icon-wrapper row-action-icon"
@click="deleteFile(record.path)">
<a-button class="icon-button row-action-icon"
@click="deleteFile(record.path)">
<icon-delete />
</span>
</a-button>
</a-tooltip>
<!-- 下载 -->
<a-tooltip position="top"
@@ -100,10 +100,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="下载">
<span class="click-icon-wrapper row-action-icon"
@click="downloadFile(record.path)">
<a-button class="icon-button row-action-icon"
@click="downloadFile(record.path)">
<icon-download />
</span>
</a-button>
</a-tooltip>
<!-- 移动 -->
<a-tooltip position="top"
@@ -112,10 +112,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="移动">
<span class="click-icon-wrapper row-action-icon"
@click="moveFile(record.path)">
<a-button class="icon-button row-action-icon"
@click="moveFile(record.path)">
<icon-paste />
</span>
</a-button>
</a-tooltip>
<!-- 提权 -->
<a-tooltip position="top"
@@ -124,10 +124,10 @@
content-class="terminal-tooltip-content"
arrow-class="terminal-tooltip-content"
content="提权">
<span class="click-icon-wrapper row-action-icon"
@click="chmodFile(record.path, record.permission)">
<a-button class="icon-button row-action-icon"
@click="chmodFile(record.path, record.permission)">
<icon-user-group />
</span>
</a-button>
</a-tooltip>
</a-space>
</template>
@@ -304,8 +304,8 @@
}
.row-action-icon {
font-size: 16px;
padding: 4px;
width: 26px;
height: 26px;
background: unset;
&:hover {

12
orion-visor-ui/src/views/host/terminal/components/transfer/transfer-drawer.vue
View File

@@ -17,16 +17,17 @@
<!-- 左侧按钮 -->
<a-space size="small">
<!-- 清空 -->
<span class="click-icon-wrapper transfer-header-icon"
title="清空"
@click="removeAllTask">
<a-button class="transfer-header-icon icon-button"
title="清空"
@click="removeAllTask">
<icon-close />
</span>
</a-button>
</a-space>
<!-- 右侧数量 -->
<a-space size="small">
<a-tag v-for="option in toOptions(transferStatusKey)"
class="pointer"
class="pointer px12"
size="large"
:color="option.color as string"
:title="option.label"
:bordered="option.value === filterStatus"
@@ -144,7 +145,6 @@
&-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
.status-count {