Skip to content

Commit

Permalink
perf: Substitution watermark and icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhaoJiSen
ZhaoJiSen committed Sep 4, 2024
1 parent 7cabcb5 commit 81d3a73
Show file tree
Hide file tree
Showing 9 changed files with 89 additions and 60 deletions.
1 change: 1 addition & 0 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"@vicons/fluent": "^0.12.0",
"@vicons/ionicons5": "^0.12.0",
"@vicons/material": "^0.12.0",
"@vicons/tabler": "^0.12.0",
"@vitejs/plugin-vue": "^5.0.5",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.39",
Expand Down
15 changes: 8 additions & 7 deletions ui/src/components/Kubernetes/MainContent/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@
<n-watermark
cross
selectable
:rotate="-15"
:font-size="16"
:width="192"
:height="128"
:x-offset="12"
:y-offset="28"
:rotate="-45"
:font-size="20"
:width="300"
:height="300"
:content="waterMarkContent"
:line-height="16"
:line-height="20"
:x-offset="-60"
:y-offset="60"
:font-family="'Open Sans'"
>
<CustomTerminal
ref="terminalRef"
Expand Down
6 changes: 3 additions & 3 deletions ui/src/components/Kubernetes/Sidebar/components/Tree/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@
:class="{ active: isActive }"
>
<n-icon
:component="TreeIcon"
:component="Kubernetes"
color="#646A73"
size="26"
size="30"
class="hover:!text-white transition-all duration-300 cursor-pointer tree-icon"
/>
</n-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Tree as TreeIcon } from '@vicons/carbon';
import { Kubernetes } from '@vicons/carbon';
import mittBus from '@/utils/mittBus.ts';
Expand Down
8 changes: 6 additions & 2 deletions ui/src/components/Kubernetes/Tree/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
.n-collapse-item__header-main {
height: 22px;
margin-left: 5px;
font-size: 13px;
}
}

Expand All @@ -38,8 +39,10 @@
padding-top: 0;

.tree-item .n-tree-node-wrapper {
padding: 0 0 5px 0;
line-height: 22px;
//padding: 0 0 5px 0;
padding: 0;
line-height: 17px;
font-size: 13px;

.n-tree-node-content {
padding-left: 5px;
Expand All @@ -48,6 +51,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
}
}
}
Expand Down
60 changes: 37 additions & 23 deletions ui/src/components/Kubernetes/Tree/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
}
"
>
<n-icon size="16" :component="option.icon" />
<n-icon size="13" :component="option.icon" />
</n-button>
</template>
{{ option.label }}
Expand Down Expand Up @@ -92,7 +92,9 @@ import { useTreeStore } from '@/store/modules/tree.ts';
import mittBus from '@/utils/mittBus.ts';
import { Link, ExpandCategories } from '@vicons/carbon';
import { Folder, FolderOpen } from '@vicons/fa';
import { ExpandCategories } from '@vicons/carbon';
import { Terminal2 } from '@vicons/tabler';
import { NIcon, TreeOption, DropdownOption } from 'naive-ui';
import { RefreshRound, LocationSearchingOutlined } from '@vicons/material';
Expand Down Expand Up @@ -120,19 +122,19 @@ const allOptions = [
label: '展开',
key: 'expand',
// disabled: true,
icon: () => h(NIcon, null, { default: () => h(ExpandCategories) })
icon: () => h(NIcon, { size: 13 }, { default: () => h(ExpandCategories) })
},
{
label: '连接',
key: 'connect',
// disabled: true,
icon: () => h(NIcon, null, { default: () => h(Link) })
icon: () => h(NIcon, { size: 13 }, { default: () => h(Terminal2) })
}
];
const buttonGroups = [
{
label: t('link'),
icon: Link,
icon: Terminal2,
click: (e: Event) => {
handleRootLink(e);
}
Expand All @@ -159,33 +161,45 @@ const buttonGroups = [
* @description 处理节点展开
* @param expandedKeys
* @param _option
* @param _meta
* @param meta
*/
const handleExpandCollapse = (
expandedKeys: string[],
_option: Array<TreeOption | null>,
_meta: { node: TreeOption | null; action: 'expand' | 'collapse' | 'filter' }
meta: { node: TreeOption | null; action: 'expand' | 'collapse' | 'filter' }
) => {
expandedKeysRef.value = expandedKeys;
emits('sync-load-node');
// switch (meta.action) {
// case 'expand':
// meta.node &&
// (meta.node.prefix = () =>
// h(NIcon, null, {
// default: () => h(FolderOpen)
// }));
// break;
// case 'collapse':
// meta.node &&
// (meta.node.prefix = () =>
// h(NIcon, null, {
// default: () => h(Folder)
// }));
// break;
// }
if (meta.node && meta.node.type === 'pod') {
return;
}
switch (meta.action) {
case 'expand':
meta.node &&
(meta.node.prefix = () =>
h(
NIcon,
{ size: 14 },
{
default: () => h(FolderOpen)
}
));
break;
case 'collapse':
meta.node &&
(meta.node.prefix = () =>
h(
NIcon,
{ size: 14 },
{
default: () => h(Folder)
}
));
break;
}
};
/**
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/Kubernetes/helper/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const showToolTip = (option: TreeOption) => {
{
trigger: 'hover',
placement: 'top-start',
delay: 500
delay: 1000
},
{
trigger: () =>
Expand Down
48 changes: 24 additions & 24 deletions ui/src/hooks/useK8s.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { NIcon } from 'naive-ui';
import { v4 as uuid } from 'uuid';
import { Folder, Docker } from '@vicons/fa';
import { Cube16Regular } from '@vicons/fluent';
import { Folder, Cubes, Expand } from '@vicons/fa';

import { ref, h, Component } from 'vue';
import { ref, h } from 'vue';
import { storeToRefs } from 'pinia';
import { useLogger } from './useLogger.ts';
import { useWebSocket } from '@vueuse/core';
Expand Down Expand Up @@ -66,24 +66,16 @@ export const useK8s = () => {
*
* @param item
* @param label
* @param _icon
* @param isLeaf
* @param id
*/
const setCommonAttributes = (
item: any,
label: string,
_icon: Component,
isLeaf: boolean = false,
id?: string
) => {
const setCommonAttributes = (item: any, label: string, isLeaf: boolean = false, id?: string) => {
Object.assign(item, {
id: id || uuid(),
label,
key: uuid(),
k8s_id: uuid(),
isLeaf
// prefix: () => h(NIcon, isLeaf ? { size: 16 } : null, { default: () => h(icon) })
});
};

Expand Down Expand Up @@ -138,9 +130,9 @@ export const useK8s = () => {
pod: podName,
container: container.name,
namespace,
prefix: () => h(NIcon, {}, { default: () => h(Cube16Regular) })
prefix: () => h(NIcon, { size: 13 }, { default: () => h(Docker) })
});
setCommonAttributes(container, container.name, Cube16Regular, true, parentId);
setCommonAttributes(container, container.name, true, parentId);
});
};

Expand All @@ -153,12 +145,12 @@ export const useK8s = () => {
*/
const handlePods = (pods: IPods[], namespace: string, parentId: string) => {
pods.forEach(pod => {
setCommonAttributes(pod, pod.name, Folder, false, parentId);
setCommonAttributes(pod, pod.name, false, parentId);

if (pod.containers && pod.containers?.length > 0) {
pod.namespace = namespace;
pod.children = pod.containers;
pod.prefix = () => h(NIcon, {}, { default: () => h(Cubes) });
pod.prefix = () => h(NIcon, { size: 13 }, { default: () => h(Cube16Regular) });
handleContainer(pod.children, pod.name, namespace, parentId);
delete pod.containers;
} else {
Expand All @@ -176,8 +168,8 @@ export const useK8s = () => {

Object.keys(data).map(nodeKey => {
const node = data[nodeKey];
setCommonAttributes(node, nodeKey, Folder, false, messageId);
node.prefix = () => h(NIcon, {}, { default: () => h(Expand) });
setCommonAttributes(node, nodeKey, false, messageId);
node.prefix = () => h(NIcon, { size: 13 }, { default: () => h(Folder) });

if (node.pods && node.pods.length > 0) {
node.children = node.pods;
Expand Down Expand Up @@ -208,9 +200,13 @@ export const useK8s = () => {
isLeaf: false,
isParent: true,
prefix: () =>
h(NIcon, null, {
default: () => h(Folder)
})
h(
NIcon,
{ size: 13 },
{
default: () => h(Folder)
}
)
};

syncLoadNodes(treeRootNode);
Expand Down Expand Up @@ -239,9 +235,13 @@ export const useK8s = () => {
label: name,
isLeaf: false,
prefix: () =>
h(NIcon, null, {
default: () => h(Folder)
})
h(
NIcon,
{ size: 13 },
{
default: () => h(Folder)
}
)
};

if (!node.namespace && !node.pod) {
Expand All @@ -258,7 +258,7 @@ export const useK8s = () => {
childNode.prefix = () =>
h(
NIcon,
{ size: 16 },
{ size: 14 },
{
default: () => h(Cube16Regular)
}
Expand Down
4 changes: 4 additions & 0 deletions ui/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

*{
font-family: 'Open Sans', 'Monaco', 'Consolas', 'monospace';
}
5 changes: 5 additions & 0 deletions ui/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,11 @@
resolved "https://registry.yarnpkg.com/@vicons/material/-/material-0.12.0.tgz#068e72fa40bd7f780af5fc68011fb69010c8e0b5"
integrity sha512-chv1CYAl8P32P3Ycwgd5+vw/OFNc2mtkKdb1Rw4T5IJmKy6GVDsoUKV3N2l208HATn7CCQphZtuPDdsm7K2kmA==

"@vicons/tabler@^0.12.0":
version "0.12.0"
resolved "https://registry.yarnpkg.com/@vicons/tabler/-/tabler-0.12.0.tgz#11924d2288e9346d47b44dd643ac20e72a32e089"
integrity sha512-3+wUFuxb7e8OzZ8Wryct1pzfA2vyoF4lwW98O9s27ZrfCGaJGNmqG+q8A7vQ92Mf+COCgxpK+rhNPTtTvaU6qw==

"@vitejs/plugin-vue@^5.0.5":
version "5.1.2"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"
Expand Down

0 comments on commit 81d3a73

Please sign in to comment.