⚡ 优化按钮组件逻辑.
This commit is contained in:
@@ -25,17 +25,17 @@
|
||||
</div>
|
||||
<!-- 操作 -->
|
||||
<div class="tree-card-handler">
|
||||
<div v-permission="['asset:host-group:create']"
|
||||
class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="根节点添加"
|
||||
@click="addRootNode">
|
||||
<a-button v-permission="['asset:host-group:create']"
|
||||
class="handler-icon-wrapper icon-button mr4"
|
||||
title="根节点添加"
|
||||
@click="addRootNode">
|
||||
<icon-plus />
|
||||
</div>
|
||||
<div class="click-icon-wrapper handler-icon-wrapper"
|
||||
title="刷新"
|
||||
@click="refreshTree">
|
||||
</a-button>
|
||||
<a-button class="handler-icon-wrapper icon-button"
|
||||
title="刷新"
|
||||
@click="refreshTree">
|
||||
<icon-refresh />
|
||||
</div>
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 主机分组树 -->
|
||||
@@ -177,9 +177,8 @@
|
||||
display: flex;
|
||||
|
||||
.handler-icon-wrapper {
|
||||
margin-left: 2px;
|
||||
padding: 4px;
|
||||
font-size: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: unset;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #leftHandle>
|
||||
<!-- 角色授权 -->
|
||||
<a-button v-permission="['asset:host-identity:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_ROLE }})">
|
||||
角色授权
|
||||
<template #icon>
|
||||
@@ -26,7 +26,7 @@
|
||||
</a-button>
|
||||
<!-- 用户授权 -->
|
||||
<a-button v-permission="['asset:host-identity:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_USER }})">
|
||||
用户授权
|
||||
<template #icon>
|
||||
@@ -114,7 +114,7 @@
|
||||
<template #extra="{ record }">
|
||||
<a-space>
|
||||
<!-- 更多操作 -->
|
||||
<a-dropdown trigger="hover">
|
||||
<a-dropdown trigger="hover" :popup-max-height="false">
|
||||
<icon-more class="card-extra-icon" />
|
||||
<template #content>
|
||||
<!-- 修改 -->
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #leftHandle>
|
||||
<!-- 角色授权 -->
|
||||
<a-button v-permission="['asset:host-key:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_ROLE }})">
|
||||
角色授权
|
||||
<template #icon>
|
||||
@@ -26,7 +26,7 @@
|
||||
</a-button>
|
||||
<!-- 用户授权 -->
|
||||
<a-button v-permission="['asset:host-key:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_USER }})">
|
||||
用户授权
|
||||
<template #icon>
|
||||
@@ -42,7 +42,7 @@
|
||||
<template #extra="{ record }">
|
||||
<a-space>
|
||||
<!-- 更多操作 -->
|
||||
<a-dropdown trigger="hover">
|
||||
<a-dropdown trigger="hover" :popup-max-height="false">
|
||||
<icon-more class="card-extra-icon" />
|
||||
<template #content>
|
||||
<!-- 详情 -->
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<template #leftHandle>
|
||||
<!-- 主机分组 -->
|
||||
<a-button v-permission="['asset:host-group:update']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="emits('openHostGroup')">
|
||||
主机分组
|
||||
<template #icon>
|
||||
@@ -26,7 +26,7 @@
|
||||
</a-button>
|
||||
<!-- 角色授权 -->
|
||||
<a-button v-permission="['asset:host-group:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_GROUP_ROLE }})">
|
||||
角色授权
|
||||
<template #icon>
|
||||
@@ -35,7 +35,7 @@
|
||||
</a-button>
|
||||
<!-- 用户授权 -->
|
||||
<a-button v-permission="['asset:host-group:grant']"
|
||||
class="card-header-icon-wrapper"
|
||||
class="card-header-button"
|
||||
@click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_GROUP_USER }})">
|
||||
用户授权
|
||||
<template #icon>
|
||||
@@ -142,7 +142,7 @@
|
||||
<template #extra="{ record }">
|
||||
<a-space>
|
||||
<!-- 更多操作 -->
|
||||
<a-dropdown trigger="hover">
|
||||
<a-dropdown trigger="hover" :popup-max-height="false">
|
||||
<icon-more class="card-extra-icon" />
|
||||
<template #content>
|
||||
<!-- 修改 -->
|
||||
@@ -182,6 +182,22 @@
|
||||
<icon-delete /> 删除
|
||||
</span>
|
||||
</a-doption>
|
||||
<!-- SSH -->
|
||||
<a-doption v-if="record.type === hostType.SSH.type"
|
||||
v-permission="['asset:host-terminal:access']"
|
||||
@click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SSH' } })">
|
||||
<span class="more-doption normal">
|
||||
<icon-thunderbolt /> SSH
|
||||
</span>
|
||||
</a-doption>
|
||||
<!-- SFTP -->
|
||||
<a-doption v-if="record.type === hostType.SSH.type"
|
||||
v-permission="['asset:host-terminal:access']"
|
||||
@click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SFTP' } })">
|
||||
<span class="more-doption normal">
|
||||
<icon-folder /> SFTP
|
||||
</span>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
@@ -202,12 +218,13 @@
|
||||
import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
|
||||
import { deleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { hostStatusKey, hostTypeKey, tagColor } from '../types/const';
|
||||
import { hostStatusKey, hostType, hostTypeKey, tagColor } from '../types/const';
|
||||
import { copy } from '@/hooks/copy';
|
||||
import { useDictStore } from '@/store';
|
||||
import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import fieldConfig from '../types/card.fields';
|
||||
import { openNewRoute } from '@/router';
|
||||
import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
|
||||
|
||||
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup', 'openCopy']);
|
||||
|
||||
@@ -132,11 +132,11 @@
|
||||
<span>描述</span>
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="parameter-item-close click-icon-wrapper"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</span>
|
||||
<a-button class="parameter-item-close icon-button"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
</template>
|
||||
<!-- 无参数 -->
|
||||
@@ -373,7 +373,6 @@
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
background: var(--color-fill-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -164,11 +164,11 @@
|
||||
<span>描述</span>
|
||||
</template>
|
||||
</a-input>
|
||||
<span class="parameter-item-close click-icon-wrapper"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</span>
|
||||
<a-button class="parameter-item-close icon-button"
|
||||
title="移除"
|
||||
@click="removeParameter(i)">
|
||||
<icon-close />
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
</template>
|
||||
<!-- 无参数 -->
|
||||
@@ -485,7 +485,6 @@
|
||||
cursor: pointer;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
background: var(--color-fill-2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -52,11 +52,11 @@
|
||||
<!-- 操作按钮 -->
|
||||
<div class="extra-action">
|
||||
<!-- 删除 -->
|
||||
<span class="click-icon-wrapper minus-icon-wrapper"
|
||||
title="移除参数"
|
||||
@click="removeExtraParam(index)">
|
||||
<a-button class="minus-icon-wrapper icon-button"
|
||||
title="移除参数"
|
||||
@click="removeExtraParam(index)">
|
||||
<icon-minus />
|
||||
</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<!-- 参数操作 -->
|
||||
@@ -253,13 +253,13 @@
|
||||
height: 32px;
|
||||
margin-left: 8px;
|
||||
font-size: 18px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.param-addition {
|
||||
margin-bottom: 20px;
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user