fix: 优化会话ID的显示逻辑,增加文本溢出处理以提升用户体验

This commit is contained in:
cmliu committed 2026-07-31 03:10:44 +08:00
1 parent 25504d54c2
commit 8cb3c4053c
2 files changed
+16 -1

No files matched your search

+8 -1
View File
@@ -1082,6 +1082,11 @@ function updateConnectionStatus(message: LocalizedMessage): void {
}
}
function formatSessionId(id: string): string {
if (!id) return '';
return id.length > 8 ? `${id.slice(0, 8)}…` : id;
}
function setState(state: ConnectionState, label?: string): void {
connectionState = state;
const stateLabel = label ?? ({
@@ -1095,10 +1100,11 @@ function setState(state: ConnectionState, label?: string): void {
ui.liveOrbLabel.textContent = stateLabel;
ui.liveOrb.title = stateLabel;
const control = resolveConnectionControl(state, historyPasswordLoading);
const sessionPrefix = formatSessionId(currentSessionId);
const controlLabel = control.action === 'cancel'
? bilingual('取消连接', 'Cancel connection')
: control.action === 'disconnect'
? (currentSessionId ? `${currentSessionId} ${bilingual('断开', 'Disconnect')}` : bilingual('断开', 'Disconnect'))
? (sessionPrefix ? `${sessionPrefix} ${bilingual('断开', 'Disconnect')}` : bilingual('断开', 'Disconnect'))
: control.action === 'disconnecting'
? bilingual('断开中...', 'Disconnecting...')
: bilingual('连接', 'Connect');
@@ -1108,6 +1114,7 @@ function setState(state: ConnectionState, label?: string): void {
ui.connect.querySelector<HTMLElement>('.button-icon')!.textContent = control.danger ? 'x' : '>_';
ui.connect.querySelector<HTMLElement>('span:last-child')!.textContent = controlLabel;
ui.connect.setAttribute('aria-label', controlLabel);
ui.connect.title = currentSessionId || controlLabel;
}
function event(message: string, category = 'session', error = false, alternate?: string): void {
+8
View File
@@ -864,10 +864,18 @@ button:disabled {
align-items: center;
justify-content: center;
gap: 8px;
min-width: 0;
background: var(--accent);
color: #06130e;
}
.primary-button > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme='light'] .primary-button {
color: #fff;
}