Skip to content

Commit dd08212

Browse files
ibuleribuler
committed
fix: tab blink
1 parent 4fda9e7 commit dd08212

3 files changed

Lines changed: 81 additions & 41 deletions

File tree

‎src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import {Component, Input, OnChanges, OnInit} from '@angular/core';
2-
import {ConnectMethod, ConnectOption, GlobalSetting, Protocol, Setting} from '@app/model';
3-
import {resolutionsChoices} from '@app/globals';
4-
import {SettingService} from '@app/services';
1+
import { Component, Input, OnChanges, OnInit } from '@angular/core';
2+
import { ConnectMethod, ConnectOption, GlobalSetting, Protocol, Setting } from '@app/model';
3+
import { resolutionsChoices } from '@app/globals';
4+
import { SettingService } from '@app/services';
55

66
@Component({
77
standalone: false,
88
selector: 'elements-advanced-option',
99
templateUrl: 'advanced-option.component.html',
10-
styleUrls: ['advanced-option.component.scss'],
10+
styleUrls: ['advanced-option.component.scss']
1111
})
1212
export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
1313
@Input() protocol: Protocol;
@@ -19,8 +19,8 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
1919
public globalSetting: GlobalSetting;
2020
private allOptions: ConnectOption[] = [];
2121
private boolChoices = [
22-
{label: 'Yes', value: true},
23-
{label: 'No', value: false},
22+
{ label: 'Yes', value: true },
23+
{ label: 'No', value: false }
2424
];
2525

2626
constructor(public _settingSvc: SettingService) {
@@ -33,15 +33,18 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
3333
label: 'Charset',
3434
hidden: () => {
3535
const protocolsCanCharset: Array<string> = ['ssh', 'telnet'];
36-
return this.connectMethod && this.connectMethod.component !== 'koko' || !protocolsCanCharset.includes(this.protocol.name);
36+
return (
37+
(this.connectMethod && this.connectMethod.component !== 'koko') ||
38+
!protocolsCanCharset.includes(this.protocol.name)
39+
);
3740
},
3841
value: 'default',
3942
options: [
40-
{label: 'Default', value: 'default'},
41-
{label: 'UTF-8', value: 'utf8'},
42-
{label: 'GBK', value: 'gbk'},
43-
{label: 'GB2312', value: 'gb2312'},
44-
{label: 'IOS-8859-1', value: 'ios-8859-1'},
43+
{ label: 'Default', value: 'default' },
44+
{ label: 'UTF-8', value: 'utf8' },
45+
{ label: 'GBK', value: 'gbk' },
46+
{ label: 'GB2312', value: 'gb2312' },
47+
{ label: 'IOS-8859-1', value: 'ios-8859-1' }
4548
]
4649
},
4750
{
@@ -51,7 +54,10 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
5154
const protocolsCanAutoHash: Array<string> = ['mysql', 'mariadb'];
5255
if (this.connectMethod) {
5356
if (this.connectMethod.component === 'koko') {
54-
return this.connectMethod.component !== 'koko' || !protocolsCanAutoHash.includes(this.protocol.name);
57+
return (
58+
this.connectMethod.component !== 'koko' ||
59+
!protocolsCanAutoHash.includes(this.protocol.name)
60+
);
5561
}
5662
if (this.connectMethod.component === 'chen') {
5763
return false;
@@ -67,7 +73,11 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
6773
type: 'select',
6874
field: 'token_reusable',
6975
hidden: () => {
70-
return !(this.connectMethod.component === 'magnus' && this.connectMethod.value === 'db_client' && this.globalSetting.CONNECTION_TOKEN_REUSABLE);
76+
return !(
77+
this.connectMethod.component === 'magnus' &&
78+
this.connectMethod.value === 'db_client' &&
79+
this.globalSetting.CONNECTION_TOKEN_REUSABLE
80+
);
7181
},
7282
label: 'Set reusable',
7383
value: false,
@@ -80,7 +90,7 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
8090
const protocolsCanResolution: Array<string> = ['rdp'];
8191
return !protocolsCanResolution.includes(this.protocol.name);
8292
},
83-
options: resolutionsChoices.map(i => ({label: i, value: i.toLowerCase()})),
93+
options: resolutionsChoices.map(i => ({ label: i, value: i.toLowerCase() })),
8494
label: 'RDP resolution',
8595
value: this.setting.graphics.rdp_resolution || 'auto'
8696
},
@@ -98,8 +108,10 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
98108
type: 'select',
99109
field: 'appletConnectMethod',
100110
options: [
101-
{label: 'Web', value: 'web'},
102-
...(this.globalSetting.TERMINAL_RAZOR_ENABLED ? [{label: 'Client', value: 'client'}] : [])
111+
{ label: 'Web', value: 'web' },
112+
...(this.globalSetting.TERMINAL_RAZOR_ENABLED
113+
? [{ label: 'Client', value: 'client' }]
114+
: [])
103115
],
104116
label: 'Applet connect method',
105117
value: this.setting.graphics.applet_connection_method,
@@ -114,8 +126,8 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
114126
type: 'select',
115127
field: 'virtualappConnectMethod',
116128
options: [
117-
{label: 'Web', value: 'web'},
118-
...(true ? [{label: 'Client', value: 'client'}] : [])
129+
{ label: 'Web', value: 'web' },
130+
...(true ? [{ label: 'Client', value: 'client' }] : [])
119131
],
120132
label: 'Virtualapp connect method',
121133
value: this.setting.graphics.applet_connection_method,
@@ -157,15 +169,16 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
157169
},
158170
value: 'auto',
159171
options: [
160-
{label: 'Auto', value: 'auto'},
161-
{label: 'Low Speed Broadband (256 Kbps - 2 Mbps)', value: 'low_speed_broadband'},
162-
{label: 'High-speed broadband (2 Mbps – 10 Mbps )', value: 'high_speed_broadband'},
172+
{ label: 'Auto', value: 'auto' },
173+
{ label: 'Low Speed Broadband (256 Kbps - 2 Mbps)', value: 'low_speed_broadband' },
174+
{ label: 'High-speed broadband (2 Mbps – 10 Mbps )', value: 'high_speed_broadband' }
163175
]
164176
}
165177
];
166178
}
167179

168180
ngOnInit() {
181+
this.checkOptions();
169182
}
170183

171184
checkOptions() {

‎src/app/elements/connect/connect-dialog/connect-method/connect-method.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
</ng-template>
1515

1616
<nz-radio-group [(ngModel)]="connectMethod" class="connect-method" name="connect-method">
17-
<!-- <nz-radio-button *ngFor="let method of item['methods']" [disabled]="method.disabled" [value]="method">-->
1817
<label *ngFor="let method of item['methods']" [nzValue]="method" nz-radio>
1918
{{ method.label }}
2019

‎src/app/elements/connect/connect-dialog/connect-method/connect-method.component.scss‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.connect-type-group {
32
border: solid #cbc9c9 1px;
43
}
@@ -19,29 +18,58 @@
1918
width: 70px;
2019
}
2120

22-
.connect-type-group ::ng-deep {
23-
.ant-tabs-nav-list {
24-
width: 100%;
21+
/* Tab 布局优化 - 允许溢出操作但防止闪烁 */
22+
.full-width-tabs ::ng-deep {
23+
.ant-tabs-nav {
24+
.ant-tabs-nav-wrap {
25+
/* 允许溢出，但设置合理的阈值 */
26+
overflow: hidden;
27+
}
2528

26-
& > div {
29+
.ant-tabs-nav-list {
2730
display: flex;
31+
width: 100%;
32+
33+
.ant-tabs-tab {
34+
/* 设置合理的最小宽度，避免过度压缩 */
35+
min-width: 100px;
36+
flex: 1;
37+
padding-top: 6px;
38+
padding-bottom: 8px;
39+
40+
.ant-tabs-tab-btn {
41+
width: 100%;
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
padding: 0 12px;
46+
white-space: nowrap;
47+
overflow: hidden;
48+
text-overflow: ellipsis;
49+
50+
i {
51+
margin-right: 8px;
52+
flex-shrink: 0;
53+
}
54+
}
55+
}
2856
}
2957

30-
.ant-tabs-tab {
31-
min-width: 20px;
32-
padding-top: 6px;
33-
padding-bottom: 8px;
34-
flex: 1;
35-
justify-content: center; /* 水平居中标题文字 */
36-
text-align: center;
58+
/* 优化溢出操作按钮的显示逻辑 */
59+
.ant-tabs-nav-operations {
60+
/* 只在真正需要时才显示 */
61+
opacity: 1;
62+
transition: opacity 0.2s ease;
3763

38-
i {
39-
margin-right: 10px;
64+
/* 当没有溢出时隐藏 */
65+
&.ant-tabs-nav-operations-hidden {
66+
opacity: 0;
67+
pointer-events: none;
4068
}
4169
}
4270
}
71+
}
4372

44-
.question {
45-
color: #5d5d5d;
46-
}
73+
.question {
74+
color: #5d5d5d;
4775
}

0 commit comments

Comments
 (0)