优化按钮组件逻辑.

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

View File

@@ -89,6 +89,12 @@ body {
} }
} }
// -- icon-button
.icon-button {
padding: 0;
font-size: 16px;
}
// -- element // -- element
.split-line { .split-line {
border-color: rgb(var(--gray-2)); border-color: rgb(var(--gray-2));
@@ -128,6 +134,117 @@ body {
cursor: pointer; cursor: pointer;
} }
.p0 {
padding: 0;
}
.px0 {
padding-left: 0;
padding-right: 0;
}
.py0 {
padding-top: 0;
padding-bottom: 0;
}
.px2 {
padding-left: 2px;
padding-right: 2px;
}
.px4 {
padding-left: 4px;
padding-right: 4px;
}
.pl4 {
padding-left: 4px;
}
.pr4 {
padding-right: 4px;
}
.pt4 {
padding-top: 4px;
}
.pb4 {
padding-bottom: 4px;
}
.px4 {
padding-left: 4px;
padding-right: 4px;
}
.py4 {
padding-top: 4px;
padding-bottom: 4px;
}
.pl8 {
padding-left: 8px;
}
.pr8 {
padding-right: 8px;
}
.pt8 {
padding-top: 8px;
}
.pb8 {
padding-bottom: 8px;
}
.px8 {
padding-left: 8px;
padding-right: 8px;
}
.py8 {
padding-top: 8px;
padding-bottom: 8px;
}
.pl12 {
padding-left: 12px;
}
.px12 {
padding-left: 12px;
padding-right: 12px;
}
.pl16 {
padding-left: 16px;
}
.pr16 {
padding-right: 16px;
}
.pt16 {
padding-top: 16px;
}
.pb16 {
padding-bottom: 16px;
}
.px16 {
padding-left: 16px;
padding-right: 16px;
}
.py16 {
padding-top: 16px;
padding-bottom: 16px;
}
.m0 { .m0 {
margin: 0; margin: 0;
} }
@@ -204,6 +321,10 @@ body {
margin-bottom: 8px; margin-bottom: 8px;
} }
.ml12 {
margin-left: 12px;
}
.ml16 { .ml16 {
margin-left: 16px; margin-left: 16px;
} }

View File

@@ -505,13 +505,12 @@ body[terminal-theme='dark'] .arco-modal-container {
.terminal-sidebar-icon { .terminal-sidebar-icon {
width: var(--sidebar-icon-size); width: var(--sidebar-icon-size);
height: var(--sidebar-icon-size); height: var(--sidebar-icon-size);
font-size: var(--sidebar-icon-font-size); padding: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-sidebar-icon);
border-radius: 4px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: var(--color-sidebar-icon);
font-size: var(--sidebar-icon-font-size);
transition: 0.15s cubic-bezier(0, 0, 1, 1); transition: 0.15s cubic-bezier(0, 0, 1, 1);
cursor: pointer; cursor: pointer;

View File

@@ -174,9 +174,15 @@
} }
} }
.card-header-icon-wrapper { .card-header-button {
height: 27px; height: 26px;
padding: 6px; padding: 0 8px;
user-select: none;
}
.card-header-icon-button {
height: 26px;
width: 26px;
user-select: none; user-select: none;
} }

View File

@@ -36,65 +36,65 @@
<!-- 右侧操作 --> <!-- 右侧操作 -->
<a-space class="log-header-right" :size="12"> <a-space class="log-header-right" :size="12">
<!-- 搜索 --> <!-- 搜索 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="搜索" title="搜索"
@click="() => appender?.openSearch()"> @click="() => appender?.openSearch()">
<icon-find-replace /> <icon-find-replace />
</span> </a-button>
<!-- 增大字号 --> <!-- 增大字号 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="增大字号" title="增大字号"
@click="() => appender?.addFontSize(1)"> @click="() => appender?.addFontSize(1)">
<icon-zoom-in /> <icon-zoom-in />
</span> </a-button>
<!-- 减小字号 --> <!-- 减小字号 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="减小字号" title="减小字号"
@click="() => appender?.addFontSize(-1)"> @click="() => appender?.addFontSize(-1)">
<icon-zoom-out /> <icon-zoom-out />
</span> </a-button>
<!-- 去顶部 --> <!-- 去顶部 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="去顶部" title="去顶部"
@click="() => appender?.toTop()"> @click="() => appender?.toTop()">
<icon-up /> <icon-up />
</span> </a-button>
<!-- 去底部 --> <!-- 去底部 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="去底部" title="去底部"
@click="() => appender?.toBottom()"> @click="() => appender?.toBottom()">
<icon-down /> <icon-down />
</span> </a-button>
<!-- 全选 --> <!-- 全选 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="全选" title="全选"
@click="() => appender?.selectAll()"> @click="() => appender?.selectAll()">
<icon-expand /> <icon-expand />
</span> </a-button>
<!-- 复制 --> <!-- 复制 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="复制" title="复制"
@click="() => appender?.copy()"> @click="() => appender?.copy()">
<icon-copy /> <icon-copy />
</span> </a-button>
<!-- 复制全部 --> <!-- 复制全部 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="复制全部" title="复制全部"
@click="() => appender?.copyAll()"> @click="() => appender?.copyAll()">
<icon-brush /> <icon-brush />
</span> </a-button>
<!-- 清空 --> <!-- 清空 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="清空" title="清空"
@click="() => appender?.clear()"> @click="() => appender?.clear()">
<icon-delete /> <icon-delete />
</span> </a-button>
<!-- 下载 --> <!-- 下载 -->
<span class="log-action click-icon-wrapper" <a-button class="log-action icon-button"
title="下载" title="下载"
@click="downloadLogFile(host.id)"> @click="downloadLogFile(host.id)">
<icon-download /> <icon-download />
</span> </a-button>
</a-space> </a-space>
</div> </div>
<!-- 右键菜单 --> <!-- 右键菜单 -->
@@ -255,7 +255,6 @@
.log-action { .log-action {
width: 24px; width: 24px;
height: 24px; height: 24px;
font-size: 16px;
} }
} }

View File

@@ -24,13 +24,13 @@
<div class="card-list-handler-left"> <div class="card-list-handler-left">
<a-space> <a-space>
<!-- 创建 --> <!-- 创建 -->
<div v-permission="addPermission" <a-button v-permission="addPermission"
v-if="!handleVisible?.disableAdd" v-if="!handleVisible?.disableAdd"
class="click-icon-wrapper card-header-icon-wrapper" class="icon-button card-header-icon-button"
title="创建" title="创建"
@click="bubblesEmitter(HeaderEmitter.ADD)"> @click="bubblesEmitter(HeaderEmitter.ADD)">
<icon-plus /> <icon-plus />
</div> </a-button>
<!-- 左侧侧操作槽位 --> <!-- 左侧侧操作槽位 -->
<slot name="leftHandle" /> <slot name="leftHandle" />
</a-space> </a-space>
@@ -54,14 +54,14 @@
</div> </div>
<!-- 过滤条件 --> <!-- 过滤条件 -->
<a-popover position="br" trigger="click" content-class="card-filter-wrapper"> <a-popover position="br" trigger="click" content-class="card-filter-wrapper">
<div v-if="!handleVisible?.disableFilter" <a-button v-if="!handleVisible?.disableFilter"
ref="filterRef" ref="filterRef"
class="click-icon-wrapper card-header-icon-wrapper" class="icon-button card-header-icon-button"
title="选择过滤条件"> title="选择过滤条件">
<a-badge :count="filterCount as number" :dot-style="{zoom: '.75'}" :offset="[9, -6]"> <a-badge :count="filterCount as number" :dot-style="{zoom: '.75'}" :offset="[9, -6]">
<icon-filter /> <icon-filter />
</a-badge> </a-badge>
</div> </a-button>
<template #content> <template #content>
<div class="card-filter-container"> <div class="card-filter-container">
<!-- 过滤表单 --> <!-- 过滤表单 -->
@@ -77,19 +77,19 @@
</template> </template>
</a-popover> </a-popover>
<!-- 搜索 --> <!-- 搜索 -->
<div v-if="!handleVisible?.disableSearch" <a-button v-if="!handleVisible?.disableSearch"
class="click-icon-wrapper card-header-icon-wrapper" class="icon-button card-header-icon-button"
title="搜索" title="搜索"
@click="bubblesEmitter(HeaderEmitter.SEARCH)"> @click="bubblesEmitter(HeaderEmitter.SEARCH)">
<icon-search /> <icon-search />
</div> </a-button>
<!-- 重置 --> <!-- 重置 -->
<div v-if="!handleVisible?.disableReset" <a-button v-if="!handleVisible?.disableReset"
class="click-icon-wrapper card-header-icon-wrapper" class="icon-button card-header-icon-button"
title="重置" title="重置"
@click="bubblesEmitter(HeaderEmitter.RESET)"> @click="bubblesEmitter(HeaderEmitter.RESET)">
<icon-refresh /> <icon-refresh />
</div> </a-button>
</a-space> </a-space>
</div> </div>
</div> </div>

View File

@@ -25,17 +25,17 @@
</div> </div>
<!-- 操作 --> <!-- 操作 -->
<div class="tree-card-handler"> <div class="tree-card-handler">
<div v-permission="['asset:host-group:create']" <a-button v-permission="['asset:host-group:create']"
class="click-icon-wrapper handler-icon-wrapper" class="handler-icon-wrapper icon-button mr4"
title="根节点添加" title="根节点添加"
@click="addRootNode"> @click="addRootNode">
<icon-plus /> <icon-plus />
</div> </a-button>
<div class="click-icon-wrapper handler-icon-wrapper" <a-button class="handler-icon-wrapper icon-button"
title="刷新" title="刷新"
@click="refreshTree"> @click="refreshTree">
<icon-refresh /> <icon-refresh />
</div> </a-button>
</div> </div>
</div> </div>
<!-- 主机分组树 --> <!-- 主机分组树 -->
@@ -177,9 +177,8 @@
display: flex; display: flex;
.handler-icon-wrapper { .handler-icon-wrapper {
margin-left: 2px; width: 24px;
padding: 4px; height: 24px;
font-size: 16px;
background: unset; background: unset;
&:hover { &:hover {

View File

@@ -17,7 +17,7 @@
<template #leftHandle> <template #leftHandle>
<!-- 角色授权 --> <!-- 角色授权 -->
<a-button v-permission="['asset:host-identity:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_ROLE }})">
角色授权 角色授权
<template #icon> <template #icon>
@@ -26,7 +26,7 @@
</a-button> </a-button>
<!-- 用户授权 --> <!-- 用户授权 -->
<a-button v-permission="['asset:host-identity:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_IDENTITY_USER }})">
用户授权 用户授权
<template #icon> <template #icon>
@@ -114,7 +114,7 @@
<template #extra="{ record }"> <template #extra="{ record }">
<a-space> <a-space>
<!-- 更多操作 --> <!-- 更多操作 -->
<a-dropdown trigger="hover"> <a-dropdown trigger="hover" :popup-max-height="false">
<icon-more class="card-extra-icon" /> <icon-more class="card-extra-icon" />
<template #content> <template #content>
<!-- 修改 --> <!-- 修改 -->

View File

@@ -17,7 +17,7 @@
<template #leftHandle> <template #leftHandle>
<!-- 角色授权 --> <!-- 角色授权 -->
<a-button v-permission="['asset:host-key:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_ROLE }})">
角色授权 角色授权
<template #icon> <template #icon>
@@ -26,7 +26,7 @@
</a-button> </a-button>
<!-- 用户授权 --> <!-- 用户授权 -->
<a-button v-permission="['asset:host-key:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_KEY_USER }})">
用户授权 用户授权
<template #icon> <template #icon>
@@ -42,7 +42,7 @@
<template #extra="{ record }"> <template #extra="{ record }">
<a-space> <a-space>
<!-- 更多操作 --> <!-- 更多操作 -->
<a-dropdown trigger="hover"> <a-dropdown trigger="hover" :popup-max-height="false">
<icon-more class="card-extra-icon" /> <icon-more class="card-extra-icon" />
<template #content> <template #content>
<!-- 详情 --> <!-- 详情 -->

View File

@@ -17,7 +17,7 @@
<template #leftHandle> <template #leftHandle>
<!-- 主机分组 --> <!-- 主机分组 -->
<a-button v-permission="['asset:host-group:update']" <a-button v-permission="['asset:host-group:update']"
class="card-header-icon-wrapper" class="card-header-button"
@click="emits('openHostGroup')"> @click="emits('openHostGroup')">
主机分组 主机分组
<template #icon> <template #icon>
@@ -26,7 +26,7 @@
</a-button> </a-button>
<!-- 角色授权 --> <!-- 角色授权 -->
<a-button v-permission="['asset:host-group:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_GROUP_ROLE }})">
角色授权 角色授权
<template #icon> <template #icon>
@@ -35,7 +35,7 @@
</a-button> </a-button>
<!-- 用户授权 --> <!-- 用户授权 -->
<a-button v-permission="['asset:host-group:grant']" <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 }})"> @click="$router.push({ name: GrantRouteName, query: { key: GrantKey.HOST_GROUP_USER }})">
用户授权 用户授权
<template #icon> <template #icon>
@@ -142,7 +142,7 @@
<template #extra="{ record }"> <template #extra="{ record }">
<a-space> <a-space>
<!-- 更多操作 --> <!-- 更多操作 -->
<a-dropdown trigger="hover"> <a-dropdown trigger="hover" :popup-max-height="false">
<icon-more class="card-extra-icon" /> <icon-more class="card-extra-icon" />
<template #content> <template #content>
<!-- 修改 --> <!-- 修改 -->
@@ -182,6 +182,22 @@
<icon-delete /> 删除 <icon-delete /> 删除
</span> </span>
</a-doption> </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> </template>
</a-dropdown> </a-dropdown>
</a-space> </a-space>
@@ -202,12 +218,13 @@
import { dataColor, objectTruthKeyCount, resetObject } from '@/utils'; import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
import { deleteHost, getHostPage, updateHostStatus } from '@/api/asset/host'; import { deleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
import { Message, Modal } from '@arco-design/web-vue'; 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 { copy } from '@/hooks/copy';
import { useDictStore } from '@/store'; import { useDictStore } from '@/store';
import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const'; import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
import useLoading from '@/hooks/loading'; import useLoading from '@/hooks/loading';
import fieldConfig from '../types/card.fields'; import fieldConfig from '../types/card.fields';
import { openNewRoute } from '@/router';
import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue'; import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup', 'openCopy']); const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup', 'openCopy']);

View File

@@ -132,11 +132,11 @@
<span>描述</span> <span>描述</span>
</template> </template>
</a-input> </a-input>
<span class="parameter-item-close click-icon-wrapper" <a-button class="parameter-item-close icon-button"
title="移除" title="移除"
@click="removeParameter(i)"> @click="removeParameter(i)">
<icon-close /> <icon-close />
</span> </a-button>
</a-input-group> </a-input-group>
</template> </template>
<!-- 无参数 --> <!-- 无参数 -->
@@ -373,7 +373,6 @@
cursor: pointer; cursor: pointer;
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 16px;
background: var(--color-fill-2); background: var(--color-fill-2);
display: flex; display: flex;
align-items: center; align-items: center;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -164,11 +164,11 @@
<span>描述</span> <span>描述</span>
</template> </template>
</a-input> </a-input>
<span class="parameter-item-close click-icon-wrapper" <a-button class="parameter-item-close icon-button"
title="移除" title="移除"
@click="removeParameter(i)"> @click="removeParameter(i)">
<icon-close /> <icon-close />
</span> </a-button>
</a-input-group> </a-input-group>
</template> </template>
<!-- 无参数 --> <!-- 无参数 -->
@@ -485,7 +485,6 @@
cursor: pointer; cursor: pointer;
width: 32px; width: 32px;
height: 32px; height: 32px;
font-size: 16px;
background: var(--color-fill-2); background: var(--color-fill-2);
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -52,11 +52,11 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="extra-action"> <div class="extra-action">
<!-- 删除 --> <!-- 删除 -->
<span class="click-icon-wrapper minus-icon-wrapper" <a-button class="minus-icon-wrapper icon-button"
title="移除参数" title="移除参数"
@click="removeExtraParam(index)"> @click="removeExtraParam(index)">
<icon-minus /> <icon-minus />
</span> </a-button>
</div> </div>
</a-form-item> </a-form-item>
<!-- 参数操作 --> <!-- 参数操作 -->
@@ -253,13 +253,13 @@
height: 32px; height: 32px;
margin-left: 8px; margin-left: 8px;
font-size: 18px; font-size: 18px;
padding: 6px;
} }
.param-addition { .param-addition {
margin-bottom: 20px; margin-bottom: 20px;
justify-content: flex-end; justify-content: flex-end;
cursor: pointer; cursor: pointer;
font-size: 18px;
user-select: none; user-select: none;
} }
</style> </style>

View File

@@ -8,6 +8,9 @@ INSERT INTO `system_role` VALUES (1, '管理员', 'admin', 1, '2023-07-16 21:13:
-- 角色用户关联 -- 角色用户关联
INSERT INTO `system_user_role` VALUES (1, 1, 1, '2023-07-16 21:15:49', '2023-07-17 18:18:02', '1', '1', 0); INSERT INTO `system_user_role` VALUES (1, 1, 1, '2023-07-16 21:15:49', '2023-07-17 18:18:02', '1', '1', 0);
-- 系统设置
INSERT INTO `system_setting` VALUES (1, 'SFTP', 'previewSize', '{\"value\": 2}', '2024-09-27 17:33:05', '2024-09-27 17:33:21', '1', '1', 0);
-- 字典项 -- 字典项
INSERT INTO `dict_key` VALUES (1, 'operatorLogModule', 'STRING', '[]', '操作日志模块', '2023-10-21 02:04:22', '2023-10-30 14:11:38', '1', '1', 0); INSERT INTO `dict_key` VALUES (1, 'operatorLogModule', 'STRING', '[]', '操作日志模块', '2023-10-21 02:04:22', '2023-10-30 14:11:38', '1', '1', 0);
INSERT INTO `dict_key` VALUES (2, 'operatorLogType', 'STRING', '[]', '操作日志类型', '2023-10-21 02:06:04', '2023-10-21 02:06:04', '1', '1', 0); INSERT INTO `dict_key` VALUES (2, 'operatorLogType', 'STRING', '[]', '操作日志类型', '2023-10-21 02:06:04', '2023-10-21 02:06:04', '1', '1', 0);