github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 00:08:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: tabs name

Browse Source
This commit is contained in:
Fine 2023-06-20 17:20:53 +08:00
parent 6c4991bc56
commit f0ef4d0a9b
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/types/components.d.ts vendored
View File

@ -6,6 +6,8 @@ import '@vue/runtime-core'
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
DateCalendar: typeof import('./../components/DateCalendar.vue')['default'] DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']

16
src/views/dashboard/controls/Tab.vue
View File

@ -28,6 +28,7 @@ limitations under the License. -->
class="tab-name" class="tab-name"
:readonly="isNaN(editTabIndex) && !canEditTabName" :readonly="isNaN(editTabIndex) && !canEditTabName"
:class="{ view: !canEditTabName }" :class="{ view: !canEditTabName }"
:style="{ width: getStringWidth(child.name) + 'px' }"
/> />
<Icon <Icon
v-show="activeTabIndex === idx" v-show="activeTabIndex === idx"
@ -202,6 +203,16 @@ limitations under the License. -->
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i); const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children); dashboardStore.setCurrentTabItems(dashboardStore.layout[l].children[activeTabIndex.value].children);
} }
function getStringWidth(s: string) {
const dom = document.createElement("span");
dom.style.display = "inline-block";
dom.textContent = s;
document.body.appendChild(dom);
const width = dom.clientWidth;
document.body.removeChild(dom);
return width + 10;
}
function copyLink() { function copyLink() {
let path = ""; let path = "";
if (route.params.activeTabIndex === undefined) { if (route.params.activeTabIndex === undefined) {
@ -254,6 +265,7 @@ limitations under the License. -->
removeTab, removeTab,
clickTabs, clickTabs,
copyLink, copyLink,
getStringWidth,
...toRefs(props), ...toRefs(props),
activeTabWidget, activeTabWidget,
dashboardStore, dashboardStore,
@ -275,6 +287,7 @@ limitations under the License. -->
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
padding: 0 10px;
span { span {
display: inline-block; display: inline-block;
@ -291,10 +304,9 @@ limitations under the License. -->
outline: none; outline: none;
color: #333; color: #333;
font-style: normal; font-style: normal;
margin-right: 5px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; margin-right: 20px;
} }
.tab-icons { .tab-icons {