lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: format all vue file

This commit is contained in:
tiny-craft 2023-08-02 19:40:57 +08:00
parent af289319ed
commit b852bb5b47
25 changed files with 92 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/common/IconButton.vue
View File

@ -32,16 +32,16 @@ const hasTooltip = computed(() => {
<template> <template>
<n-tooltip v-if="hasTooltip"> <n-tooltip v-if="hasTooltip">
<template #trigger> <template #trigger>
<n-button :text="!border" :disabled="disabled" @click.prevent="emit('click')"> <n-button :disabled="disabled" :text="!border" @click.prevent="emit('click')">
<n-icon :size="props.size" :color="props.color"> <n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" /> <component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon> </n-icon>
</n-button> </n-button>
</template> </template>
{{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }} {{ props.tTooltip ? $t(props.tTooltip) : props.tooltip }}
</n-tooltip> </n-tooltip>
<n-button v-else :text="!border" :disabled="disabled" @click.prevent="emit('click')"> <n-button v-else :disabled="disabled" :text="!border" @click.prevent="emit('click')">
<n-icon :size="props.size" :color="props.color"> <n-icon :color="props.color" :size="props.size">
<component :is="props.icon" :stroke-width="props.strokeWidth" /> <component :is="props.icon" :stroke-width="props.strokeWidth" />
</n-icon> </n-icon>
</n-button> </n-button>

2
frontend/src/components/common/RedisTypeTag.vue
View File

@ -26,9 +26,9 @@ const backgroundColor = computed(() => {
<template> <template>
<n-tag <n-tag
:bordered="props.bordered" :bordered="props.bordered"
:class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
:color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }" :color="{ color: backgroundColor, borderColor: fontColor, textColor: fontColor }"
:size="props.size" :size="props.size"
:class="[props.size === 'small' ? 'redis-type-tag-small' : 'redis-type-tag']"
strong strong
> >
{{ props.type }} {{ props.type }}

19
frontend/src/components/content/ContentLogPane.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, nextTick, onActivated, reactive, ref } from 'vue' import { computed, nextTick, reactive, ref } from 'vue'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import Refresh from '@/components/icons/Refresh.vue' import Refresh from '@/components/icons/Refresh.vue'
import useConnectionStore from 'stores/connections.js' import useConnectionStore from 'stores/connections.js'
@ -42,8 +42,9 @@ const loadHistory = () => {
tableRef.value?.scrollTo({ top: 999999 }) tableRef.value?.scrollTo({ top: 999999 })
}) })
} }
onActivated(() => {
nextTick().then(loadHistory) defineExpose({
refresh: () => nextTick().then(loadHistory),
}) })
</script> </script>
@ -53,17 +54,17 @@ onActivated(() => {
class="content-container flex-box-v" class="content-container flex-box-v"
content-style="display: flex;flex-direction: column; overflow: hidden;" content-style="display: flex;flex-direction: column; overflow: hidden;"
> >
<n-form inline :disabled="data.loading" class="flex-item"> <n-form :disabled="data.loading" class="flex-item" inline>
<n-form-item :label="$t('filter_server')"> <n-form-item :label="$t('filter_server')">
<n-select <n-select
style="min-width: 100px"
v-model:value="data.server" v-model:value="data.server"
:options="filterServerOption"
:consistent-menu-width="false" :consistent-menu-width="false"
:options="filterServerOption"
style="min-width: 100px"
/> />
</n-form-item> </n-form-item>
<n-form-item :label="$t('filter_keyword')"> <n-form-item :label="$t('filter_keyword')">
<n-input v-model:value="data.keyword" placeholder="" clearable /> <n-input v-model:value="data.keyword" clearable placeholder="" />
</n-form-item> </n-form-item>
<n-form-item> <n-form-item>
<icon-button :icon="Refresh" border t-tooltip="refresh" @click="loadHistory" /> <icon-button :icon="Refresh" border t-tooltip="refresh" @click="loadHistory" />
@ -72,7 +73,6 @@ onActivated(() => {
<div class="fill-height flex-box-h" style="user-select: text"> <div class="fill-height flex-box-h" style="user-select: text">
<n-data-table <n-data-table
ref="tableRef" ref="tableRef"
class="flex-item-expand"
:columns="[ :columns="[
{ {
title: $t('exec_time'), title: $t('exec_time'),
@ -125,13 +125,14 @@ onActivated(() => {
}, },
]" ]"
:data="data.history" :data="data.history"
class="flex-item-expand"
flex-height flex-height
/> />
</div> </div>
</n-card> </n-card>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
@import '@/styles/content'; @import '@/styles/content';
.content-container { .content-container {

4
frontend/src/components/content/ContentPane.vue
View File

@ -157,9 +157,9 @@ const onCloseTab = (tabIndex) => {
<!-- select nothing or select server node, display server status --> <!-- select nothing or select server node, display server status -->
<content-server-status <content-server-status
v-model:auto-refresh="autoRefresh" v-model:auto-refresh="autoRefresh"
:server="serverName"
:info="serverInfo" :info="serverInfo"
:loading="loadingServerInfo" :loading="loadingServerInfo"
:server="serverName"
@refresh="refreshInfo(true)" @refresh="refreshInfo(true)"
/> />
</div> </div>
@ -171,8 +171,8 @@ const onCloseTab = (tabIndex) => {
</n-empty> </n-empty>
</div> </div>
<component <component
v-else
:is="valueComponents[tabContent.type]" :is="valueComponents[tabContent.type]"
v-else
:db="tabContent.db" :db="tabContent.db"
:key-path="tabContent.keyPath" :key-path="tabContent.keyPath"
:name="tabContent.name" :name="tabContent.name"

22
frontend/src/components/content_value/ContentServerStatus.vue
View File

@ -80,36 +80,36 @@ const infoFilter = ref('')
<n-space vertical> <n-space vertical>
<n-card> <n-card>
<template #header> <template #header>
<n-space align="center" :wrap-item="false" inline size="small"> <n-space :wrap-item="false" align="center" inline size="small">
{{ props.server }} {{ props.server }}
<n-tooltip v-if="redisVersion"> <n-tooltip v-if="redisVersion">
Redis Version Redis Version
<template #trigger> <template #trigger>
<n-tag type="primary" size="small">v{{ redisVersion }}</n-tag> <n-tag size="small" type="primary">v{{ redisVersion }}</n-tag>
</template> </template>
</n-tooltip> </n-tooltip>
<n-tooltip v-if="redisMode"> <n-tooltip v-if="redisMode">
Mode Mode
<template #trigger> <template #trigger>
<n-tag type="primary" size="small">{{ redisMode }}</n-tag> <n-tag size="small" type="primary">{{ redisMode }}</n-tag>
</template> </template>
</n-tooltip> </n-tooltip>
<n-tooltip v-if="redisMode"> <n-tooltip v-if="redisMode">
Role Role
<template #trigger> <template #trigger>
<n-tag type="primary" size="small">{{ role }}</n-tag> <n-tag size="small" type="primary">{{ role }}</n-tag>
</template> </template>
</n-tooltip> </n-tooltip>
</n-space> </n-space>
</template> </template>
<template #header-extra> <template #header-extra>
<n-space inline align="center"> <n-space align="center" inline>
{{ $t('auto_refresh') }} {{ $t('auto_refresh') }}
<n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" /> <n-switch :value="props.autoRefresh" @update:value="(v) => emit('update:autoRefresh', v)" />
<n-tooltip> <n-tooltip>
{{ $t('refresh') }} {{ $t('refresh') }}
<template #trigger> <template #trigger>
<n-button tertiary circle size="small" @click="emit('refresh')"> <n-button circle size="small" tertiary @click="emit('refresh')">
<template #icon> <template #icon>
<n-icon :component="Refresh" /> <n-icon :component="Refresh" />
</template> </template>
@ -119,7 +119,7 @@ const infoFilter = ref('')
</n-space> </n-space>
</template> </template>
<n-spin :show="props.loading"> <n-spin :show="props.loading">
<n-grid x-gap="5" style="min-width: 500px"> <n-grid style="min-width: 500px" x-gap="5">
<n-gi :span="6"> <n-gi :span="6">
<n-statistic :label="$t('uptime')" :value="uptime[0]"> <n-statistic :label="$t('uptime')" :value="uptime[0]">
<template #suffix> {{ $t(uptime[1]) }}</template> <template #suffix> {{ $t(uptime[1]) }}</template>
@ -149,15 +149,15 @@ const infoFilter = ref('')
</n-card> </n-card>
<n-card :title="$t('all_info')"> <n-card :title="$t('all_info')">
<template #header-extra> <template #header-extra>
<n-input v-model:value="infoFilter" placeholder="" clearable> <n-input v-model:value="infoFilter" clearable placeholder="">
<template #prefix> <template #prefix>
<icon-button :icon="Filter" size="18" /> <icon-button :icon="Filter" size="18" />
</template> </template>
</n-input> </n-input>
</template> </template>
<n-spin :show="props.loading"> <n-spin :show="props.loading">
<n-tabs type="line" placement="left" default-value="CPU"> <n-tabs default-value="CPU" placement="left" type="line">
<n-tab-pane v-for="(v, k) in props.info" :key="k" :name="k" :disabled="isEmpty(v)"> <n-tab-pane v-for="(v, k) in props.info" :key="k" :disabled="isEmpty(v)" :name="k">
<n-data-table <n-data-table
:columns="[ :columns="[
{ {
@ -183,4 +183,4 @@ const infoFilter = ref('')
</n-scrollbar> </n-scrollbar>
</template> </template>
<style scoped lang="scss"></style> <style lang="scss" scoped></style>

8
frontend/src/components/content_value/ContentToolbar.vue
View File

@ -70,10 +70,10 @@ const onDeleteKey = () => {
<redis-type-tag :type="props.keyType" size="large" /> <redis-type-tag :type="props.keyType" size="large" />
<n-input v-model:value="props.keyPath"> <n-input v-model:value="props.keyPath">
<template #suffix> <template #suffix>
<icon-button :icon="Refresh" t-tooltip="reload" size="18" @click="onReloadKey" /> <icon-button :icon="Refresh" size="18" t-tooltip="reload" @click="onReloadKey" />
</template> </template>
</n-input> </n-input>
<icon-button :icon="Copy" t-tooltip="copy_key" size="18" border @click="onCopyKey" /> <icon-button :icon="Copy" border size="18" t-tooltip="copy_key" @click="onCopyKey" />
</n-input-group> </n-input-group>
<n-button-group> <n-button-group>
<n-tooltip> <n-tooltip>
@ -91,10 +91,10 @@ const onDeleteKey = () => {
TTL TTL
</n-tooltip> </n-tooltip>
<icon-button <icon-button
border
:icon="Edit" :icon="Edit"
t-tooltip="rename_key" border
size="18" size="18"
t-tooltip="rename_key"
@click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)" @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)"
/> />
<!-- <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">--> <!-- <n-button @click="dialogStore.openRenameKeyDialog(props.server, props.db, props.keyPath)">-->

2
frontend/src/components/content_value/ContentValueString.vue
View File

@ -204,7 +204,7 @@ const onSaveValue = async () => {
</div> </div>
<div class="value-wrapper flex-item-expand flex-box-v"> <div class="value-wrapper flex-item-expand flex-box-v">
<n-scrollbar v-if="!inEdit" class="flex-item-expand"> <n-scrollbar v-if="!inEdit" class="flex-item-expand">
<n-code :code="viewValue" :language="viewLanguage" show-line-numbers word-wrap style="cursor: text" /> <n-code :code="viewValue" :language="viewLanguage" show-line-numbers style="cursor: text" word-wrap />
</n-scrollbar> </n-scrollbar>
<n-input <n-input
v-else v-else

2
frontend/src/components/content_value/ContentValueZSet.vue
View File

@ -277,7 +277,7 @@ const onUpdateFilter = (filters, sourceColumn) => {
style="width: 120px" style="width: 120px"
@update:value="onChangeFilterType" @update:value="onChangeFilterType"
/> />
<n-tooltip :disabled="filterType !== 2" :delay="500"> <n-tooltip :delay="500" :disabled="filterType !== 2">
<template #trigger> <template #trigger>
<n-input <n-input
v-model:value="filterValue" v-model:value="filterValue"

6
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -159,7 +159,7 @@ const onClose = () => {
transform-origin="center" transform-origin="center"
> >
<n-spin :show="closingConnection"> <n-spin :show="closingConnection">
<n-tabs v-model:value="tab" type="line" animated> <n-tabs v-model:value="tab" animated type="line">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general"> <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form <n-form
ref="generalFormRef" ref="generalFormRef"
@ -265,13 +265,13 @@ const onClose = () => {
<template #action> <template #action>
<div class="flex-item-expand"> <div class="flex-item-expand">
<n-button :loading="testing" :disabled="closingConnection" @click="onTestConnection"> <n-button :disabled="closingConnection" :loading="testing" @click="onTestConnection">
{{ $t('conn_test') }} {{ $t('conn_test') }}
</n-button> </n-button>
</div> </div>
<div class="flex-item n-dialog__action"> <div class="flex-item n-dialog__action">
<n-button :disabled="closingConnection" @click="onClose">{{ $t('cancel') }}</n-button> <n-button :disabled="closingConnection" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" :disabled="closingConnection" @click="onSaveConnection"> <n-button :disabled="closingConnection" type="primary" @click="onSaveConnection">
{{ isEditMode ? $t('update') : $t('confirm') }} {{ isEditMode ? $t('update') : $t('confirm') }}
</n-button> </n-button>
</div> </div>

6
frontend/src/components/dialogs/DeleteKeyDialog.vue
View File

@ -96,12 +96,12 @@ const onClose = () => {
<n-input v-model:value="deleteForm.key" placeholder="" @input="resetAffected" /> <n-input v-model:value="deleteForm.key" placeholder="" @input="resetAffected" />
</n-form-item> </n-form-item>
<n-card v-if="deleteForm.showAffected" :title="$t('affected_key')" size="small"> <n-card v-if="deleteForm.showAffected" :title="$t('affected_key')" size="small">
<n-skeleton v-if="deleteForm.loadingAffected" text :repeat="10" /> <n-skeleton v-if="deleteForm.loadingAffected" :repeat="10" text />
<n-log <n-log
v-else v-else
:rows="10"
:line-height="1.5" :line-height="1.5"
:lines="deleteForm.affectedKeys" :lines="deleteForm.affectedKeys"
:rows="10"
style="user-select: text; cursor: text" style="user-select: text; cursor: text"
/> />
</n-card> </n-card>
@ -113,7 +113,7 @@ const onClose = () => {
<n-button v-if="!deleteForm.showAffected" type="primary" @click="scanAffectedKey"> <n-button v-if="!deleteForm.showAffected" type="primary" @click="scanAffectedKey">
{{ $t('show_affected_key') }} {{ $t('show_affected_key') }}
</n-button> </n-button>
<n-button v-else type="error" :disabled="isEmpty(deleteForm.affectedKeys)" @click="onConfirmDelete"> <n-button v-else :disabled="isEmpty(deleteForm.affectedKeys)" type="error" @click="onConfirmDelete">
{{ $t('confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }} {{ $t('confirm_delete_key', { num: size(deleteForm.affectedKeys) }) }}
</n-button> </n-button>
</div> </div>

2
frontend/src/components/dialogs/KeyFilterDialog.vue
View File

@ -92,7 +92,7 @@ const onClose = () => {
<n-input-group> <n-input-group>
<n-tooltip trigger="focus"> <n-tooltip trigger="focus">
<template #trigger> <template #trigger>
<n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable /> <n-input v-model:value="filterForm.pattern" clearable placeholder="Filter Pattern" />
</template> </template>
<div class="text-block">{{ $t('filter_pattern_tip') }}</div> <div class="text-block">{{ $t('filter_pattern_tip') }}</div>
</n-tooltip> </n-tooltip>

2
frontend/src/components/dialogs/NewKeyDialog.vue
View File

@ -188,7 +188,7 @@ const onClose = () => {
<n-button secondary type="primary" @click="newForm.ttl = -1">{{ $t('persist_key') }}</n-button> <n-button secondary type="primary" @click="newForm.ttl = -1">{{ $t('persist_key') }}</n-button>
</n-input-group> </n-input-group>
</n-form-item> </n-form-item>
<component ref="subFormRef" :is="addValueComponent[newForm.type]" v-model:value="newForm.value" /> <component :is="addValueComponent[newForm.type]" ref="subFormRef" v-model:value="newForm.value" />
<!-- TODO: Add import from txt file option --> <!-- TODO: Add import from txt file option -->
</n-form> </n-form>
</n-scrollbar> </n-scrollbar>

12
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -59,17 +59,17 @@ const onClose = () => {
<template> <template>
<n-modal <n-modal
v-model:show="dialogStore.preferencesDialogVisible" v-model:show="dialogStore.preferencesDialogVisible"
:auto-focus="false"
:closable="false" :closable="false"
:close-on-esc="false" :close-on-esc="false"
:mask-closable="false" :mask-closable="false"
:show-icon="false" :show-icon="false"
:auto-focus="false"
:title="$t('preferences')" :title="$t('preferences')"
preset="dialog" preset="dialog"
transform-origin="center" transform-origin="center"
> >
<n-spin :show="loading"> <n-spin :show="loading">
<n-tabs v-model:value="tab" type="line" animated> <n-tabs v-model:value="tab" animated type="line">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general"> <n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form <n-form
:label-width="formLabelWidth" :label-width="formLabelWidth"
@ -149,13 +149,13 @@ const onClose = () => {
<template #action> <template #action>
<div class="flex-item-expand"> <div class="flex-item-expand">
<n-button :disabled="loading" @click="prefStore.restorePreferences">{{ <n-button :disabled="loading" @click="prefStore.restorePreferences"
$t('restore_defaults') >{{ $t('restore_defaults') }}
}}</n-button> </n-button>
</div> </div>
<div class="flex-item n-dialog__action"> <div class="flex-item n-dialog__action">
<n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button> <n-button :disabled="loading" @click="onClose">{{ $t('cancel') }}</n-button>
<n-button type="primary" :disabled="loading" @click="onSavePreferences">{{ $t('save') }}</n-button> <n-button :disabled="loading" type="primary" @click="onSavePreferences">{{ $t('save') }}</n-button>
</div> </div>
</template> </template>
</n-modal> </n-modal>

6
frontend/src/components/icons/AddLink.vue
View File

@ -8,18 +8,18 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="strokeWidth"
d="M24.0605 10L24.0239 38" d="M24.0605 10L24.0239 38"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="strokeWidth"
d="M10 24L38 24" d="M10 24L38 24"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />

16
frontend/src/components/icons/Clear.vue
View File

@ -8,48 +8,48 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
fill-rule="evenodd" :stroke-width="props.strokeWidth"
clip-rule="evenodd" clip-rule="evenodd"
d="M20 5.91406H28V13.9141H43V21.9141H5V13.9141H20V5.91406Z" d="M20 5.91406H28V13.9141H43V21.9141H5V13.9141H20V5.91406Z"
fill-rule="evenodd"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="props.strokeWidth"
d="M8 40H40V22H8V40Z" d="M8 40H40V22H8V40Z"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="props.strokeWidth"
d="M16 39.8976V33.9141" d="M16 39.8976V33.9141"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="props.strokeWidth"
d="M24 39.8977V33.8977" d="M24 39.8977V33.8977"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="props.strokeWidth"
d="M32 39.8976V33.9141" d="M32 39.8976V33.9141"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="props.strokeWidth"
d="M12 40H36" d="M12 40H36"
stroke="currentColor" stroke="currentColor"
:stroke-width="props.strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />

6
frontend/src/components/icons/Close.vue
View File

@ -35,18 +35,18 @@ const props = defineProps({
stroke-linejoin="round" stroke-linejoin="round"
/> />
</svg> </svg>
<svg v-else width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg v-else fill="none" height="24" viewBox="0 0 48 48" width="24" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="strokeWidth"
d="M8 8L40 40" d="M8 8L40 40"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="strokeWidth"
d="M8 40L40 8" d="M8 40L40 8"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />

4
frontend/src/components/icons/Config.vue
View File

@ -11,16 +11,16 @@ const props = defineProps({
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
d="M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
d="M18.2838 43.1713C14.9327 42.1736 11.9498 40.3213 9.58787 37.867C10.469 36.8227 11 35.4734 11 34.0001C11 30.6864 8.31371 28.0001 5 28.0001C4.79955 28.0001 4.60139 28.01 4.40599 28.0292C4.13979 26.7277 4 25.3803 4 24.0001C4 21.9095 4.32077 19.8938 4.91579 17.9995C4.94381 17.9999 4.97188 18.0001 5 18.0001C8.31371 18.0001 11 15.3138 11 12.0001C11 11.0488 10.7786 10.1493 10.3846 9.35011C12.6975 7.1995 15.5205 5.59002 18.6521 4.72314C19.6444 6.66819 21.6667 8.00013 24 8.00013C26.3333 8.00013 28.3556 6.66819 29.3479 4.72314C32.4795 5.59002 35.3025 7.1995 37.6154 9.35011C37.2214 10.1493 37 11.0488 37 12.0001C37 15.3138 39.6863 18.0001 43 18.0001C43.0281 18.0001 43.0562 17.9999 43.0842 17.9995C43.6792 19.8938 44 21.9095 44 24.0001C44 25.3803 43.8602 26.7277 43.594 28.0292C43.3986 28.01 43.2005 28.0001 43 28.0001C39.6863 28.0001 37 30.6864 37 34.0001C37 35.4734 37.531 36.8227 38.4121 37.867C36.0502 40.3213 33.0673 42.1736 29.7162 43.1713C28.9428 40.752 26.676 39.0001 24 39.0001C21.324 39.0001 19.0572 40.752 18.2838 43.1713Z"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="strokeWidth" :stroke-width="strokeWidth"
d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
d="M24 31C27.866 31 31 27.866 31 24C31 20.134 27.866 17 24 17C20.134 17 17 20.134 17 24C17 27.866 20.134 31 24 31Z"
stroke-linejoin="round" stroke-linejoin="round"
/> />
</svg> </svg>

2
frontend/src/components/icons/Filter.vue
View File

@ -10,11 +10,11 @@ const props = defineProps({
<template> <template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="props.strokeWidth"
d="M6 9L20.4 25.8178V38.4444L27.6 42V25.8178L42 9H6Z" d="M6 9L20.4 25.8178V38.4444L27.6 42V25.8178L42 9H6Z"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-linejoin="round" stroke-linejoin="round"
:stroke-width="props.strokeWidth"
/> />
</svg> </svg>
</template> </template>

8
frontend/src/components/icons/Help.vue
View File

@ -8,26 +8,26 @@ const props = defineProps({
</script> </script>
<template> <template>
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:stroke-width="strokeWidth"
d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z" d="M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
:stroke-width="strokeWidth"
d="M24 28.6248V24.6248C27.3137 24.6248 30 21.9385 30 18.6248C30 15.3111 27.3137 12.6248 24 12.6248C20.6863 12.6248 18 15.3111 18 18.6248" d="M24 28.6248V24.6248C27.3137 24.6248 30 21.9385 30 18.6248C30 15.3111 27.3137 12.6248 24 12.6248C20.6863 12.6248 18 15.3111 18 18.6248"
stroke="currentColor" stroke="currentColor"
:stroke-width="strokeWidth"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
fill-rule="evenodd"
clip-rule="evenodd" clip-rule="evenodd"
d="M24 37.6248C25.3807 37.6248 26.5 36.5055 26.5 35.1248C26.5 33.7441 25.3807 32.6248 24 32.6248C22.6193 32.6248 21.5 33.7441 21.5 35.1248C21.5 36.5055 22.6193 37.6248 24 37.6248Z" d="M24 37.6248C25.3807 37.6248 26.5 36.5055 26.5 35.1248C26.5 33.7441 25.3807 32.6248 24 32.6248C22.6193 32.6248 21.5 33.7441 21.5 35.1248C21.5 36.5055 22.6193 37.6248 24 37.6248Z"
fill="currentColor" fill="currentColor"
fill-rule="evenodd"
/> />
</svg> </svg>
</template> </template>

2
frontend/src/components/icons/ToggleServer.vue
View File

@ -20,10 +20,10 @@ const props = defineProps({
<template> <template>
<svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path <path
:fill="props.fillColor"
:stroke="props.fillColor" :stroke="props.fillColor"
:stroke-width="props.strokeWidth" :stroke-width="props.strokeWidth"
d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z" d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z"
:fill="props.fillColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />

8
frontend/src/components/sidebar/BrowserPane.vue
View File

@ -77,15 +77,15 @@ const filterTypeOptions = computed(() => {
<div class="nav-pane-container flex-box-v"> <div class="nav-pane-container flex-box-v">
<browser-tree :server="currentName" /> <browser-tree :server="currentName" />
<div class="nav-pane-bottom flex-box-h" v-if="filterForm.showFilter"> <div v-if="filterForm.showFilter" class="nav-pane-bottom flex-box-h">
<n-input-group> <n-input-group>
<n-select <n-select
v-model:value="filterForm.type" v-model:value="filterForm.type"
:consistent-menu-width="false"
:options="filterTypeOptions" :options="filterTypeOptions"
style="width: 120px" style="width: 120px"
:consistent-menu-width="false"
/> />
<n-input placeholder="" clearable /> <n-input clearable placeholder="" />
<n-button ghost> <n-button ghost>
<template #icon> <template #icon>
<n-icon :component="Search" /> <n-icon :component="Search" />
@ -117,7 +117,7 @@ const filterTypeOptions = computed(() => {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
.nav-pane-bottom { .nav-pane-bottom {
color: v-bind('themeVars.iconColor'); color: v-bind('themeVars.iconColor');
border-top: v-bind('themeVars.borderColor') 1px solid; border-top: v-bind('themeVars.borderColor') 1px solid;

12
frontend/src/components/sidebar/BrowserTree.vue
View File

@ -582,25 +582,25 @@ const handleOutsideContextMenu = () => {
</script> </script>
<template> <template>
<div class="browser-tree-wrapper" :style="{ backgroundColor }"> <div :style="{ backgroundColor }" class="browser-tree-wrapper">
<n-tree <n-tree
:animated="false"
:block-line="true" :block-line="true"
:block-node="true" :block-node="true"
:animated="false"
:cancelable="false" :cancelable="false"
:data="data" :data="data"
:expand-on-click="false" :expand-on-click="false"
:expanded-keys="expandedKeys" :expanded-keys="expandedKeys"
:selected-keys="selectedKeys"
@update:selected-keys="onUpdateSelectedKeys"
:node-props="nodeProps" :node-props="nodeProps"
@load="onLoadTree"
@update:expanded-keys="onUpdateExpanded"
:render-label="renderLabel" :render-label="renderLabel"
:render-prefix="renderPrefix" :render-prefix="renderPrefix"
:render-suffix="renderSuffix" :render-suffix="renderSuffix"
:selected-keys="selectedKeys"
class="fill-height" class="fill-height"
virtual-scroll virtual-scroll
@load="onLoadTree"
@update:selected-keys="onUpdateSelectedKeys"
@update:expanded-keys="onUpdateExpanded"
/> />
<n-dropdown <n-dropdown
:animated="false" :animated="false"

2
frontend/src/components/sidebar/ConnectionPane.vue
View File

@ -57,7 +57,7 @@ const onDisconnectAll = () => {
</div> </div>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
.nav-pane-bottom { .nav-pane-bottom {
color: v-bind('themeVars.iconColor'); color: v-bind('themeVars.iconColor');
border-top: v-bind('themeVars.borderColor') 1px solid; border-top: v-bind('themeVars.borderColor') 1px solid;

16
frontend/src/components/sidebar/ConnectionTree.vue
View File

@ -330,27 +330,27 @@ const handleDrop = ({ node, dragNode, dropPosition }) => {
</script> </script>
<template> <template>
<n-empty v-if="isEmpty(connectionStore.connections)" class="empty-content" :description="$t('empty_server_list')" /> <n-empty v-if="isEmpty(connectionStore.connections)" :description="$t('empty_server_list')" class="empty-content" />
<n-tree <n-tree
v-else v-else
class="fill-height"
:animated="false" :animated="false"
:block-line="true" :block-line="true"
:block-node="true" :block-node="true"
:cancelable="false" :cancelable="false"
:draggable="true"
:data="connectionStore.connections" :data="connectionStore.connections"
:draggable="true"
:expanded-keys="expandedKeys" :expanded-keys="expandedKeys"
@update:selected-keys="onUpdateSelectedKeys"
:node-props="nodeProps" :node-props="nodeProps"
@update:expanded-keys="onUpdateExpandedKeys" :pattern="props.filterPattern"
:selected-keys="selectedKeys"
:render-label="renderLabel" :render-label="renderLabel"
:render-prefix="renderPrefix" :render-prefix="renderPrefix"
:render-suffix="renderSuffix" :render-suffix="renderSuffix"
@drop="handleDrop" :selected-keys="selectedKeys"
:pattern="props.filterPattern" class="fill-height"
virtual-scroll virtual-scroll
@drop="handleDrop"
@update:selected-keys="onUpdateSelectedKeys"
@update:expanded-keys="onUpdateExpandedKeys"
/> />
<!-- status display modal --> <!-- status display modal -->

6
frontend/src/components/sidebar/NavMenu.vue
View File

@ -104,12 +104,12 @@ const openGithub = () => {
class="flex-box-v" class="flex-box-v"
> >
<n-menu <n-menu
:collapsed-width="props.width"
:value="props.value"
:collapsed="true" :collapsed="true"
:collapsed-icon-size="iconSize" :collapsed-icon-size="iconSize"
@update:value="(val) => emit('update:value', val)" :collapsed-width="props.width"
:options="menuOptions" :options="menuOptions"
:value="props.value"
@update:value="(val) => emit('update:value', val)"
/> />
<div class="flex-item-expand"></div> <div class="flex-item-expand"></div>
<div class="nav-menu-item flex-box-v"> <div class="nav-menu-item flex-box-v">