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

perf: cropped icon size

This commit is contained in:
tiny-craft 2023-10-30 11:52:46 +08:00
parent fd99b43798
commit 0143e8f52a
13 changed files with 197 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,8 @@ import Log from '@/components/icons/Log.vue'
import Detail from '@/components/icons/Detail.vue'
import ContentValueWrapper from '@/components/content_value/ContentValueWrapper.vue'
import ContentCli from '@/components/content_value/ContentCli.vue'
import Monitor from '@/components/icons/Monitor.vue'
import Pub from '@/components/icons/Pub.vue'
const themeVars = useThemeVars()
@ -106,7 +108,10 @@ watch(
<template #tab>
<n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon size="16">
<status :inverse="selectedSubTab === BrowserTabType.Status.toString()" stroke-width="4" />
<status
:inverse="selectedSubTab === BrowserTabType.Status.toString()"
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.status') }}</span>
</n-space>
@ -121,7 +126,8 @@ watch(
<n-icon size="16">
<detail
:inverse="selectedSubTab === BrowserTabType.KeyDetail.toString()"
fill-color="none" />
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.key_detail') }}</span>
</n-space>
@ -146,7 +152,10 @@ watch(
<template #tab>
<n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon size="16">
<terminal :inverse="selectedSubTab === BrowserTabType.Cli.toString()" />
<terminal
:inverse="selectedSubTab === BrowserTabType.Cli.toString()"
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.cli') }}</span>
</n-space>
@ -155,16 +164,49 @@ watch(
</n-tab-pane>
<!-- slow log pane -->
<n-tab-pane :name="BrowserTabType.SlowLog.toString()">
<n-tab-pane :disabled="true" :name="BrowserTabType.SlowLog.toString()">
<template #tab>
<n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon size="16">
<log :inverse="selectedSubTab === BrowserTabType.SlowLog.toString()" />
<log
:inverse="selectedSubTab === BrowserTabType.SlowLog.toString()"
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.slow_log') }}</span>
</n-space>
</template>
</n-tab-pane>
<!-- command monitor pane -->
<n-tab-pane :disabled="true" :name="BrowserTabType.CmdMonitor.toString()">
<template #tab>
<n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon size="16">
<monitor
:inverse="selectedSubTab === BrowserTabType.CmdMonitor.toString()"
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.cmd_monitor') }}</span>
</n-space>
</template>
</n-tab-pane>
<!-- pub/sub message pane -->
<n-tab-pane :disabled="true" :name="BrowserTabType.PubMessage.toString()">
<template #tab>
<n-space :size="5" :wrap-item="false" align="center" inline justify="center">
<n-icon size="16">
<pub
:inverse="selectedSubTab === BrowserTabType.PubMessage.toString()"
:stroke-color="themeVars.tabColor"
stroke-width="4" />
</n-icon>
<span>{{ $t('interface.sub_tab.pub_message') }}</span>
</n-space>
</template>
</n-tab-pane>
</n-tabs>
</div>
</template>

72
frontend/src/components/icons/Cluster.vue
View File

@ -14,10 +14,10 @@ const props = defineProps({
</script>
<template>
<svg v-if="props.inverse" 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">
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="8"
stroke="currentColor"
stroke-linecap="round"
@ -26,8 +26,8 @@ const props = defineProps({
x="4"
y="34" />
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="12"
stroke="currentColor"
stroke-linecap="round"
@ -48,8 +48,8 @@ const props = defineProps({
stroke-linecap="round"
stroke-linejoin="round" />
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="8"
stroke="currentColor"
stroke-linecap="round"
@ -58,8 +58,8 @@ const props = defineProps({
x="36"
y="34" />
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="8"
stroke="currentColor"
stroke-linecap="round"
@ -68,69 +68,9 @@ const props = defineProps({
x="20"
y="34" />
<path
:stroke="props.inverse ? '#FFF' : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M14 12H16"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="8"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="8"
x="4"
y="34" />
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="12"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="32"
x="8"
y="6" />
<path
:stroke-width="props.strokeWidth"
d="M24 34V18"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M8 34V26H40V34"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="8"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="8"
x="36"
y="34" />
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="8"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="8"
x="20"
y="34" />
<path
:stroke-width="props.strokeWidth"
d="M14 12H16"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

34
frontend/src/components/icons/Database.vue
View File

@ -14,7 +14,7 @@ const props = defineProps({
</script>
<template>
<svg v-if="props.inverse" 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
:stroke-width="props.strokeWidth"
d="M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11"
@ -34,40 +34,10 @@ const props = defineProps({
stroke-linecap="round"
stroke-linejoin="round" />
<ellipse
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
cx="24"
cy="10"
fill="currentColor"
rx="20"
ry="6"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<ellipse
:stroke-width="props.strokeWidth"
cx="24"
cy="10"
fill="none"
rx="20"
ry="6"
stroke="currentColor"

65
frontend/src/components/icons/Detail.vue
View File

@ -10,14 +10,18 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
<template>
<svg v-if="props.inverse" 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">
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="36"
rx="3"
stroke="currentColor"
@ -26,81 +30,36 @@ const props = defineProps({
x="6"
y="6" />
<rect
:fill="props.inverse ? props.strokeColor : 'none'"
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
fill="#FFF"
height="8"
stroke="#FFF"
stroke-linejoin="round"
width="8"
x="13"
y="13" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M27 13L35 13"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M27 20L35 20"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M13 28L35 28"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M13 35H35"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="36"
rx="3"
stroke="currentColor"
stroke-linejoin="round"
width="36"
x="6"
y="6" />
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="8"
stroke="currentColor"
stroke-linejoin="round"
width="8"
x="13"
y="13" />
<path
:stroke-width="props.strokeWidth"
d="M27 13L35 13"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M27 20L35 20"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M13 28L35 28"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M13 35H35"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

37
frontend/src/components/icons/Log.vue
View File

@ -8,17 +8,21 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
<template>
<svg v-if="props.inverse" 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">
<rect
fill="currentColor"
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
height="34"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="3"
width="28"
x="13"
y="10" />
@ -28,35 +32,16 @@ const props = defineProps({
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="3" />
<path d="M21 22H33" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
<path d="M21 30H33" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect
:stroke-width="strokeWidth"
fill="none"
height="34"
stroke="currentColor"
stroke-linejoin="round"
width="28"
x="13"
y="10" />
<path
:stroke-width="strokeWidth"
d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="strokeWidth"
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M21 22H33"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="strokeWidth"
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M21 30H33"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

40
frontend/src/components/icons/Monitor.vue Normal file
View File

@ -0,0 +1,40 @@
<script setup>
const props = defineProps({
inverse: {
type: Boolean,
default: false,
},
strokeWidth: {
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
height="36"
rx="3"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
width="36"
x="6"
y="6" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M12 25H15L19 14L22 36L27 23L31 29L34 25H37"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</template>
<style lang="scss" scoped></style>

46
frontend/src/components/icons/Pub.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup>
const props = defineProps({
inverse: {
type: Boolean,
default: false,
},
strokeWidth: {
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
<template>
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
:stroke-width="props.strokeWidth"
d="M33 38H22V30H36V22H44V38H39L36 41L33 38Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
d="M4 6H36V30H17L13 34L9 30H4V6Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M12 22H18"
stroke-linecap="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M12 14H24"
stroke-linecap="round" />
</svg>
</template>
<style lang="scss" scoped></style>

48
frontend/src/components/icons/Server.vue
View File

@ -14,59 +14,29 @@ const props = defineProps({
</script>
<template>
<svg v-if="props.inverse" 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
:fill="props.inverse ? 'currentColor' : 'none'"
: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"
fill="currentColor"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path :stroke-width="props.strokeWidth" d="M4 32H44" stroke="#FFF" stroke-linecap="round" />
<path
:stroke="props.inverse ? '#FFF' : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M4 32H44"
stroke-linecap="round" />
<path
:stroke="props.inverse ? '#FFF' : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M10 38H11"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? '#FFF' : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M26 38H38"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M44 37V27"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M4 37V27"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path
: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"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path :stroke-width="props.strokeWidth" d="M4 32H44" stroke="currentColor" stroke-linecap="round" />
<path
:stroke-width="props.strokeWidth"
d="M10 38H11"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M26 38H38"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path

10
frontend/src/components/icons/Status.vue
View File

@ -8,6 +8,10 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
@ -18,9 +22,9 @@ const props = defineProps({
fill="currentColor"
stroke="currentColor"
stroke-width="3" />
<path :stroke-width="props.strokeWidth" d="M24 17V31" stroke="#FFF" stroke-linecap="round" />
<path :stroke-width="props.strokeWidth" d="M32 24V31" stroke="#FFF" stroke-linecap="round" />
<path :stroke-width="props.strokeWidth" d="M16 22V31" stroke="#FFF" stroke-linecap="round" />
<path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M24 17V31" stroke-linecap="round" />
<path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M32 24V31" stroke-linecap="round" />
<path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M16 22V31" stroke-linecap="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect

36
frontend/src/components/icons/Terminal.vue
View File

@ -10,14 +10,18 @@ const props = defineProps({
type: [Number, String],
default: 3,
},
strokeColor: {
type: String,
default: '#FFF',
},
})
</script>
<template>
<svg v-if="props.inverse" 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">
<rect
:fill="props.inverse ? 'currentColor' : 'none'"
:stroke-width="props.strokeWidth"
fill="currentColor"
height="32"
rx="2"
stroke="currentColor"
@ -26,39 +30,15 @@ const props = defineProps({
x="4"
y="8" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M12 18L19 24L12 30"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke="props.inverse ? props.strokeColor : 'currentColor'"
:stroke-width="props.strokeWidth"
d="M23 32H36"
stroke="#FFF"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<rect
:stroke-width="props.strokeWidth"
fill="none"
height="32"
rx="2"
stroke="currentColor"
stroke-linejoin="round"
width="40"
x="4"
y="8" />
<path
:stroke-width="props.strokeWidth"
d="M12 18L19 24L12 30"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
<path
:stroke-width="props.strokeWidth"
d="M23 32H36"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>

2
frontend/src/consts/browser_tab_type.js
View File

@ -7,4 +7,6 @@ export const BrowserTabType = {
KeyDetail: 'key_detail',
Cli: 'cli',
SlowLog: 'slow_log',
CmdMonitor: 'cmd_monitor',
PubMessage: 'pub_message',
}

6
frontend/src/langs/en.json
View File

@ -101,8 +101,10 @@
"sub_tab": {
"status": "Status",
"key_detail": "Key Detail",
"cli": "Command Line",
"slow_log": "Slow Log"
"cli": "Console",
"slow_log": "Slow Log",
"cmd_monitor": "Monitor Commands",
"pub_message": "Pub/Sub"
}
},
"ribbon": {

4
frontend/src/langs/zh-cn.json
View File

@ -102,7 +102,9 @@
"status": "状态",
"key_detail": "键详情",
"cli": "命令行",
"slow_log": "慢日志"
"slow_log": "慢日志",
"cmd_monitor": "监控命令",
"pub_message": "推送/订阅"
}
},
"ribbon": {